diff --git a/output/components.eslint.txt b/output/components.eslint.txt index 94c7d2ada2c..33437cfe84a 100644 --- a/output/components.eslint.txt +++ b/output/components.eslint.txt @@ -214,16 +214,6 @@ 347:2 error defaultProp "minimumPercentage" has no corresponding propTypes declaration react/default-props-match-prop-types 348:2 error defaultProp "display" has no corresponding propTypes declaration react/default-props-match-prop-types -/home/travis/build/Talend/ui/packages/components/src/QualityBar/QualityBar.stories.js - 15:6 error Empty components are self-closing react/self-closing-comp - 17:6 error Empty components are self-closing react/self-closing-comp - 19:6 error Empty components are self-closing react/self-closing-comp - 21:6 error Empty components are self-closing react/self-closing-comp - 23:6 error Empty components are self-closing react/self-closing-comp - 25:6 error Empty components are self-closing react/self-closing-comp - 27:6 error Empty components are self-closing react/self-closing-comp - 29:6 error Empty components are self-closing react/self-closing-comp - /home/travis/build/Talend/ui/packages/components/src/RadarChart/RadarChart.stories.js 31:7 error 'activeAxis' is assigned a value but never used @typescript-eslint/no-unused-vars 45:6 error Value must be omitted for boolean attributes react/jsx-boolean-value @@ -291,7 +281,8 @@ 54:6 error The autoFocus prop should not be used, as it can reduce usability and accessibility for users jsx-a11y/no-autofocus /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js - 16:18 error React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks + 17:18 error React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks + 21:18 error React Hook "useMemo" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks /home/travis/build/Talend/ui/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.component.js 34:7 error Use callback in setState when referencing the previous state react/no-access-state-in-setstate @@ -316,5 +307,5 @@ 673:44 error ["icon"] is better written in dot notation dot-notation 679:56 error ["resizable"] is better written in dot notation dot-notation -✖ 155 problems (135 errors, 20 warnings) - 15 errors and 0 warnings potentially fixable with the `--fix` option. \ No newline at end of file +✖ 148 problems (128 errors, 20 warnings) + 7 errors and 0 warnings potentially fixable with the `--fix` option. diff --git a/packages/components/src/QualityBar/QualityBar.component.js b/packages/components/src/QualityBar/QualityBar.component.js index cf4a483c060..b8fca6194fd 100644 --- a/packages/components/src/QualityBar/QualityBar.component.js +++ b/packages/components/src/QualityBar/QualityBar.component.js @@ -53,27 +53,42 @@ export function QualityBar({ invalid, valid, empty, onClick, getDataFeature, dig return ( onClick(e, { - type: QualityType.INVALID - }) : null} + onClick={ + onClick + ? e => + onClick(e, { + type: QualityType.INVALID, + }) + : null + } dataFeature={getDataFeature ? getDataFeature(QualityType.INVALID) : null} value={invalid} percentage={invalidPercentage} t={t} /> onClick(e, { - type: QualityType.EMPTY - }) : null} + onClick={ + onClick + ? e => + onClick(e, { + type: QualityType.EMPTY, + }) + : null + } dataFeature={getDataFeature ? getDataFeature(QualityType.EMPTY) : null} value={empty} percentage={emptyPercentage} t={t} /> onClick(e, { - type: QualityType.VALID - }) : null} + onClick={ + onClick + ? e => + onClick(e, { + type: QualityType.VALID, + }) + : null + } dataFeature={getDataFeature ? getDataFeature(QualityType.VALID) : null} value={valid} percentage={validPercentage} @@ -88,6 +103,6 @@ QualityBar.propTypes = { empty: PropTypes.number.isRequired, valid: PropTypes.number.isRequired, onClick: PropTypes.func, - dataFeature: PropTypes.func, + getDataFeature: PropTypes.func, digits: PropTypes.number, }; diff --git a/packages/components/src/QualityBar/QualityBar.component.test.js b/packages/components/src/QualityBar/QualityBar.component.test.js index 95d430392c8..4f8f119f57b 100644 --- a/packages/components/src/QualityBar/QualityBar.component.test.js +++ b/packages/components/src/QualityBar/QualityBar.component.test.js @@ -29,24 +29,35 @@ describe('QualityBar', () => { invalid: 123, empty: 332, onClick: mockFunctionAction, - getDataFeature: (qualityType) => { return `data-feature-${qualityType}` }, + getDataFeature: qualityType => { + return `data-feature-${qualityType}`; + }, }; // when const wrapper = mount(); - wrapper.find('div').filterWhere((item) => { - return item.prop('data-feature') === 'data-feature-valid'; - }).simulate('click'); + wrapper + .find('div') + .filterWhere(item => { + return item.prop('data-feature') === 'data-feature-valid'; + }) + .simulate('click'); // then - expect(mockFunctionAction).toHaveBeenCalled();; - expect(wrapper.find('div').filterWhere((item) => { - return item.prop('data-feature') === 'data-feature-valid'; - }).length).toBe(1); - expect(wrapper.find('div').filterWhere((item) => { - return item.prop('data-feature') === 'data-feature-invalid'; - }).length).toBe(1); - expect(wrapper.find('div').filterWhere((item) => { - return item.prop('data-feature') === 'data-feature-empty'; - }).length).toBe(1); + expect(mockFunctionAction).toHaveBeenCalled(); + expect( + wrapper.find('div').filterWhere(item => { + return item.prop('data-feature') === 'data-feature-valid'; + }).length, + ).toBe(1); + expect( + wrapper.find('div').filterWhere(item => { + return item.prop('data-feature') === 'data-feature-invalid'; + }).length, + ).toBe(1); + expect( + wrapper.find('div').filterWhere(item => { + return item.prop('data-feature') === 'data-feature-empty'; + }).length, + ).toBe(1); }); }); }); diff --git a/packages/components/src/QualityBar/QualityBar.stories.js b/packages/components/src/QualityBar/QualityBar.stories.js index 60e4df87dce..e59da9d130b 100644 --- a/packages/components/src/QualityBar/QualityBar.stories.js +++ b/packages/components/src/QualityBar/QualityBar.stories.js @@ -33,7 +33,9 @@ stories valid={88} empty={3} onClick={action('onClickAction')} - getDataFeature={(qualityType) => { return `data-feature.${qualityType}` }} + getDataFeature={qualityType => { + return `data-feature.${qualityType}`; + }} /> diff --git a/packages/components/src/QualityBar/QualityRatioBar.component.js b/packages/components/src/QualityBar/QualityRatioBar.component.js index 75bde3195a4..5d299a85c99 100644 --- a/packages/components/src/QualityBar/QualityRatioBar.component.js +++ b/packages/components/src/QualityBar/QualityRatioBar.component.js @@ -29,18 +29,12 @@ function formatNumber(value = '') { } export const QualityType = { - VALID: "valid", - INVALID: "invalid", - EMPTY: "empty" -} + VALID: 'valid', + INVALID: 'invalid', + EMPTY: 'empty', +}; -export function QualityInvalidLine({ - value, - percentage, - t, - dataFeature, - onClick, -}) { +export function QualityInvalidLine({ value, percentage, t, dataFeature, onClick }) { return ( = minPercentage; if (!value || value < 0) return null; @@ -33,9 +26,10 @@ export function RatioBarLine({ default: break; } - }; + } const content = ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions
);