Repository: DevExpress/devextreme-react
Pull request #525 (2021-03-26 05:53:39)

filter option change calls (T983942)
- some lint fixes

LazyLahtak: We need to add tests for this case

Patch:
diff --git a/packages/devextreme-react-generator/src/generator.ts b/packages/devextreme-react-generator/src/generator.ts
index 66901f3..24ad2c7 100644
--- a/packages/devextreme-react-generator/src/generator.ts
+++ b/packages/devextreme-react-generator/src/generator.ts
@@ -138,6 +138,7 @@ export function collectIndependentEvents(options: IProp[]): IProp[] {
     if (option.types.filter((type) => type.type === 'Function').length === 1
         && (!option.firedEvents || option.firedEvents.length === 0)
         && option.name.substr(0, 2) === 'on'
+        && option.name !== 'onOptionChanged'
     ) {
       acc.push(option);
     }
diff --git a/packages/devextreme-react/src/core/configuration/tree.ts b/packages/devextreme-react/src/core/configuration/tree.ts
index 3b40dea..9342b44 100644
--- a/packages/devextreme-react/src/core/configuration/tree.ts
+++ b/packages/devextreme-react/src/core/configuration/tree.ts
@@ -156,5 +156,5 @@ export {
   buildNode,
   buildTemplates,
   findValue,
-  findValueInObject
+  findValueInObject,
 };
diff --git a/packages/devextreme-react/src/core/template-wrapper.ts b/packages/devextreme-react/src/core/template-wrapper.ts
index 0730641..6f15c33 100644
--- a/packages/devextreme-react/src/core/template-wrapper.ts
+++ b/packages/devextreme-react/src/core/template-wrapper.ts
@@ -22,6 +22,7 @@ const removalListenerStyle = { display: 'none' };
 
 class TemplateWrapper extends React.PureComponent<ITemplateWrapperProps, ITemplateWrapperState> {
   private readonly _removalListenerRef = React.createRef<HTMLElement>();
+
   private element: HTMLElement | undefined | null;
 
   constructor(props: ITemplateWrapperProps) {
@@ -105,7 +106,8 @@ class TemplateWrapper extends React.PureComponent<ITemplateWrapperProps, ITempla
         null,
         content && React.createElement(
           'div',
-          { style: { display: 'none' }, ref: this.getNextSiblingNode }),
+          { style: { display: 'none' }, ref: this.getNextSiblingNode },
+        ),
         content,
         removalListener,
       ),
diff --git a/packages/sandbox/form-example.tsx b/packages/sandbox/form-example.tsx
index 201d7b8..4c26b88 100644
--- a/packages/sandbox/form-example.tsx
+++ b/packages/sandbox/form-example.tsx
@@ -34,7 +34,7 @@ const getTextBoxComponent = (disabled: boolean) => (props: any) => {
   return <NumberBox disabled={disabled} value={data.editorOptions.value} />;
 };
 
-export default class extends React.Component<any, {disableIdInput: boolean}> {
+export default class extends React.Component<any, { disableIdInput: boolean }> {
   constructor(props: unknown) {
     super(props);
 
diff --git a/packages/sandbox/slide-out-view-example.tsx b/packages/sandbox/slide-out-view-example.tsx
index 8fbc889..d88c78f 100644
--- a/packages/sandbox/slide-out-view-example.tsx
+++ b/packages/sandbox/slide-out-view-example.tsx
@@ -42,7 +42,7 @@ export default class extends React.Component<any, any> {
     this.setState({ menuVisible: !menuVisible });
   }
 
-  private _optionChangeHandler(args: {name: string, value: any }) {
+  private _optionChangeHandler(args: { name: string, value: any }) {
     if (args.name === 'menuVisible') {
       this.setState({ menuVisible: args.value });
     }
diff --git a/packages/sandbox/toolbar-example.tsx b/packages/sandbox/toolbar-example.tsx
index 0866568..3455dd5 100644
--- a/packages/sandbox/toolbar-example.tsx
+++ b/packages/sandbox/toolbar-example.tsx
@@ -3,7 +3,7 @@ import { Button } from 'devextreme-react/button';
 import { Toolbar } from 'devextreme-react/toolbar';
 import Example from './example-block';
 
-const ItemComponent = (data: {data: {text: string}}) => (
+const ItemComponent = (data: { data: { text: string } }) => (
   <Button text={data.data.text} />
 );
 


Test patch:
diff --git a/packages/devextreme-react-generator/src/generator.test.ts b/packages/devextreme-react-generator/src/generator.test.ts
index 66ee456..1a68576 100644
--- a/packages/devextreme-react-generator/src/generator.test.ts
+++ b/packages/devextreme-react-generator/src/generator.test.ts
@@ -13,82 +13,97 @@ import {
 
 describe('collectIndependentEvents', () => {
   it('discard dependent events', () => {
-    const options: IProp[] = [{
-      name: 'option1',
-      isSubscribable: true,
-      types: [
-        {
-          type: 'Function',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-      ],
-      props: [],
-      firedEvents: ['func1'],
-    }, {
-      name: 'onOption',
-      isSubscribable: false,
-      types: [
-        {
-          type: 'Function',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-      ],
-      props: [],
-      firedEvents: [],
-    }, {
-      name: 'option3',
-      isSubscribable: true,
-      types: [
-        {
-          type: 'Function',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-        {
-          type: 'Number',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-      ],
-      props: [],
-      firedEvents: [],
-    }, {
-      name: 'onOption4',
-      isSubscribable: true,
-      types: [
-        {
-          type: 'Function',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-        {
-          type: 'Number',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-      ],
-      props: [],
-      firedEvents: ['func1'],
-    }, {
-      name: 'option5',
-      isSubscribable: true,
-      types: [
-        {
-          type: 'Function',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-        {
-          type: 'Number',
-          acceptableValues: [],
-          isCustomType: true,
-        },
-      ],
-      props: [],
-      firedEvents: [],
-    }];
+    const options: IProp[] = [
+      {
+        name: 'option1',
+        isSubscribable: true,
+        types: [
+          {
+            type: 'Function',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+        ],
+        props: [],
+        firedEvents: ['func1'],
+      }, {
+        name: 'onOption',
+        isSubscribable: false,
+        types: [
+          {
+            type: 'Function',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+        ],
+        props: [],
+        firedEvents: [],
+      }, {
+        name: 'option3',
+        isSubscribable: true,
+        types: [
+          {
+            type: 'Function',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+          {
+            type: 'Number',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+        ],
+        props: [],
+        firedEvents: [],
+      }, {
+        name: 'onOption4',
+        isSubscribable: true,
+        types: [
+          {
+            type: 'Function',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+          {
+            type: 'Number',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+        ],
+        props: [],
+        firedEvents: ['func1'],
+      }, {
+        name: 'option5',
+        isSubscribable: true,
+        types: [
+          {
+            type: 'Function',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+          {
+            type: 'Number',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+        ],
+        props: [],
+        firedEvents: [],
+      },
+      {
+        name: 'onOptionChanged',
+        isSubscribable: true,
+        types: [
+          {
+            type: 'Function',
+            acceptableValues: [],
+            isCustomType: true,
+          },
+        ],
+        props: [],
+        firedEvents: [],
+      },
+    ];
     const independentEvents = collectIndependentEvents(options);
     expect(independentEvents.length).toBe(1);
     expect(independentEvents[0]).toEqual(options[1]);
diff --git a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
index 7e481a3..32f2c91 100644
--- a/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/nested-option.test.tsx
@@ -527,7 +527,7 @@ describe('nested sub-option', () => {
   });
 });
 
-const ComponentWithConditionalOption = (props: {enableOption: boolean}) => {
+const ComponentWithConditionalOption = (props: { enableOption: boolean }) => {
   const { enableOption } = props;
   return (
     <TestComponent>
diff --git a/packages/devextreme-react/src/core/__tests__/template.test.tsx b/packages/devextreme-react/src/core/__tests__/template.test.tsx
index 2828f44..d3de29b 100644
--- a/packages/devextreme-react/src/core/__tests__/template.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/template.test.tsx
@@ -54,7 +54,7 @@ function testTemplateOption(testedOption: string) {
 
   if (testedOption === 'itemComponent') {
     prepareTemplate = (render) => {
-      class ItemComponent extends React.PureComponent<{data: any, index?: number}> {
+      class ItemComponent extends React.PureComponent<{ data: any, index?: number }> {
         public render() {
           const { data, index } = this.props;
           return render(data, index);
@@ -172,8 +172,8 @@ function testTemplateOption(testedOption: string) {
     const container = document.createElement('div');
     renderItemTemplate({ text: 'with data' }, container);
     component.update();
-    expect(container.innerHTML).
-      toBe('<div style=\"display: none;\"></div>Template with data<span style=\"display: none;\"></span>');
+    expect(container.innerHTML)
+      .toBe('<div style=\"display: none;\"></div>Template with data<span style=\"display: none;\"></span>');
   });
 
   it('does not render template removeEvent listener', () => {
diff --git a/packages/devextreme-react/src/core/configuration/__tests__/tree.test.ts b/packages/devextreme-react/src/core/configuration/__tests__/tree.test.ts
index d7688bb..cc30573 100644
--- a/packages/devextreme-react/src/core/configuration/__tests__/tree.test.ts
+++ b/packages/devextreme-react/src/core/configuration/__tests__/tree.test.ts
@@ -2,30 +2,29 @@
 import { findValueInObject } from '../tree';
 
 describe('check findValueInObject', () => {
+  it('get underfined by string', () => {
+    const obj = 'Extension';
+    const path = ['sortOrder'];
+    const valueInObject = findValueInObject(obj, path);
+    expect(() => findValueInObject(obj, path)).not.toThrow();
+    expect(valueInObject).toEqual(undefined);
+  });
 
-    it("get underfined by string", () => {
-        const obj = "Extension";
-        const path = ["sortOrder"];
-        const valueInObject = findValueInObject(obj, path);
-        expect(() => findValueInObject(obj, path)).not.toThrow();
-        expect(valueInObject).toEqual(undefined);
-    });
+  it('get value by object', () => {
+    const obj = {
+      sortOrder: 'desc',
+    };
+    const path = ['sortOrder'];
+    const valueInObject = findValueInObject(obj, path);
+    expect(valueInObject).toEqual({ type: 0, value: 'desc' });
+    expect(() => findValueInObject(obj, path)).not.toThrow();
+  });
 
-    it("get value by object", () => {
-        const obj = {
-            "sortOrder": "desc"
-        }
-        const path = ["sortOrder"];
-        const valueInObject = findValueInObject(obj, path);
-        expect(valueInObject).toEqual({ "type": 0, "value": "desc" });
-        expect(() => findValueInObject(obj, path)).not.toThrow();
-    })
-
-    it("get underfined by empty object",() =>{
-        const obj = {}
-        const path = ["sortOrder"];
-        const valueInObject = findValueInObject(obj, path);
-        expect(valueInObject).toEqual(undefined);
-        expect(() => findValueInObject(obj, path)).not.toThrow();
-    })
-})
+  it('get underfined by empty object', () => {
+    const obj = {};
+    const path = ['sortOrder'];
+    const valueInObject = findValueInObject(obj, path);
+    expect(valueInObject).toEqual(undefined);
+    expect(() => findValueInObject(obj, path)).not.toThrow();
+  });
+});