From d2bfbaf823bd39fcef90c2c38faab262bb883c55 Mon Sep 17 00:00:00 2001 From: Xiaofan Wu Date: Mon, 23 Aug 2021 12:57:27 +1000 Subject: [PATCH] chore: upgrade eslint & prettier --- .eslintrc | 9 - babel.config.js | 3 - config/paths.js | 2 +- config/webpack.config.dev.js | 2 +- config/webpack.config.dist.js | 2 +- config/webpack.config.prod.js | 2 +- config/webpackDevServer.config.js | 2 +- package-lock.json | 364 +++++++++--------- package.json | 14 +- src/components/Accordion/index.jsx | 8 +- src/components/Accordion/index.spec.jsx | 4 +- src/components/ActionPanel/index.jsx | 4 +- src/components/ActionPanel/index.spec.jsx | 2 +- src/components/AlertInput/index.jsx | 16 +- src/components/Avatar/index.jsx | 6 +- src/components/Breadcrumb/index.jsx | 4 +- src/components/Breadcrumb/index.spec.jsx | 10 +- src/components/Button/index.jsx | 2 +- src/components/ButtonGroup/index.jsx | 4 +- src/components/Card/index.jsx | 18 +- src/components/Carousel/index.spec.jsx | 2 +- src/components/Checkbox/index.jsx | 2 +- src/components/CheckboxGroup/index.jsx | 4 +- src/components/ConfirmModal/index.spec.jsx | 2 +- src/components/DatePicker/index.jsx | 2 +- src/components/FilePicker/index.jsx | 2 +- src/components/Grid/Cell/index.spec.jsx | 2 +- src/components/Grid/Row/index.spec.jsx | 2 +- .../HoverDropdownMenu/index.spec.jsx | 2 +- src/components/ListPicker/index.jsx | 9 +- src/components/ListPicker/index.spec.jsx | 9 +- src/components/ListPicker/mocks.jsx | 2 +- src/components/ListPickerPure/index.jsx | 4 +- src/components/ListPickerPure/index.spec.jsx | 21 +- src/components/Navigation/index.jsx | 2 +- src/components/OverlayLoader/index.jsx | 2 +- src/components/PagedGrid/index.jsx | 8 +- src/components/PagedGrid/index.spec.jsx | 15 +- src/components/Pagination/index.spec.jsx | 2 +- src/components/Popover/constants.js | 6 +- src/components/Popover/index.jsx | 2 +- src/components/PrettyDiff/index.jsx | 2 +- src/components/PrettyDiff/index.spec.jsx | 4 +- src/components/RadioGroup/index.jsx | 4 +- .../RichTextEditor/BlockStyleButtons.jsx | 11 +- .../RichTextEditor/InlineStyleButtons.jsx | 6 +- .../RichTextEditor/ToolbarButton.jsx | 2 +- src/components/RichTextEditor/index.jsx | 8 +- src/components/RichTextEditor/index.spec.jsx | 4 +- src/components/Search/index.jsx | 8 +- src/components/Search/index.spec.jsx | 2 +- src/components/SearchableCheckList/index.jsx | 8 +- .../SearchableCheckList/index.spec.jsx | 8 +- src/components/Select/index.jsx | 12 +- src/components/Select/index.test.jsx | 7 +- src/components/Select/styles.js | 18 +- src/components/Slicey/Marker/index.jsx | 2 +- src/components/Slicey/dataProcessor.js | 4 +- src/components/Slicey/index.jsx | 10 +- src/components/Slicey/index.spec.jsx | 5 +- src/components/SvgSymbol/index.jsx | 2 +- src/components/Switch/index.jsx | 2 +- src/components/Tabs/index.jsx | 6 +- src/components/Tile/index.spec.jsx | 2 +- src/components/TileGrid/index.jsx | 2 +- src/components/TileGrid/index.spec.jsx | 9 +- src/components/Toast/ToastContainer.jsx | 2 +- src/components/Toast/ToastNotification.jsx | 7 +- src/components/Totals/index.jsx | 2 +- src/components/Totals/index.spec.jsx | 2 +- src/components/TreePicker/Grid/index.jsx | 2 +- src/components/TreePicker/Grid/index.spec.jsx | 6 +- src/components/TreePicker/Nav/index.spec.jsx | 7 +- src/components/TreePicker/Node/index.jsx | 22 +- src/components/TreePicker/Node/index.spec.jsx | 12 +- src/components/TreePicker/index.spec.jsx | 2 +- src/components/TreePicker/mocks.js | 4 +- src/components/UserListPicker/index.jsx | 2 +- src/components/UserListPicker/index.spec.jsx | 4 +- src/components/VerticalNavigation/index.jsx | 2 +- .../VerticalNavigation/index.spec.jsx | 6 +- src/components/fastStatelessWrapper/index.jsx | 4 +- src/lib/utils.js | 4 +- src/prop-types/TreePickerPropTypes.js | 2 +- www/containers/App.jsx | 4 +- www/containers/Props.jsx | 2 +- www/containers/Scaffold.jsx | 2 +- www/containers/SidePanel.jsx | 10 +- .../components/Header/Contributors.jsx | 28 +- www/containers/components/SearchBar/index.jsx | 2 +- www/examples/AlertInput.mdx | 2 +- www/examples/Card.mdx | 4 +- www/examples/DatePicker.mdx | 2 +- www/examples/Grid.mdx | 4 +- www/examples/HoverDropdownMenu.mdx | 2 +- www/examples/ImageCropper.mdx | 2 +- www/examples/ListPicker.mdx | 2 +- www/examples/OverlayLoader.mdx | 2 +- www/examples/Pagination.mdx | 2 +- www/examples/Popover.mdx | 2 +- www/examples/RadioGroup.mdx | 2 +- www/examples/RichTextEditor.mdx | 2 +- www/examples/Search.mdx | 4 +- www/examples/Select.mdx | 2 +- www/examples/Skeleton.mdx | 3 +- www/examples/Slicey.mdx | 6 +- www/examples/Switch.mdx | 2 +- www/examples/Tab.mdx | 2 +- www/examples/Tag.mdx | 4 +- www/examples/Tile.mdx | 2 +- www/examples/TreePicker.mdx | 6 +- www/examples/UserListPicker.mdx | 2 +- www/examples/VerticalNavigation.mdx | 2 +- 113 files changed, 455 insertions(+), 476 deletions(-) diff --git a/.eslintrc b/.eslintrc index a463a51a0..ef0c95b4d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,19 +1,10 @@ { "root": true, - "globals": { - "expect": false - }, - "parser": "@babel/eslint-parser", "plugins": ["jest-dom"], "extends": ["adslot", "plugin:jest-dom/recommended"], "settings": { "lodash": { "version": 4 - }, - "import/resolver": { - "node": { - "extensions": [".js", ".jsx"] - } } }, "rules": { diff --git a/babel.config.js b/babel.config.js index 4b8ea93bb..027efd08b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,5 @@ const isDevelopment = process.env.TYPE === 'development'; -const plugins = ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread']; - const presets = [ ['@babel/preset-env', { useBuiltIns: 'usage', corejs: { version: 3 } }], [ @@ -30,6 +28,5 @@ const env = { module.exports = { presets, - plugins, env, }; diff --git a/config/paths.js b/config/paths.js index bab528307..28ee7d8b6 100644 --- a/config/paths.js +++ b/config/paths.js @@ -4,7 +4,7 @@ const fs = require('fs'); // Make sure any symlinks in the project folder are resolved: // https://github.com/facebookincubator/create-react-app/issues/637 const appDirectory = fs.realpathSync(process.cwd()); -const resolveApp = relativePath => path.resolve(appDirectory, relativePath); +const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath); module.exports = { appBuild: resolveApp('docs'), diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 565ab4c2d..0ce5be083 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -34,7 +34,7 @@ module.exports = webpackMerge(commonConfig, { // This is the URL that app is served from. We use "/" in development. publicPath: '/', // Point sourcemap entries to original disk location (format as URL on Windows) - devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), + devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), }, cache: { type: 'filesystem' }, module: { diff --git a/config/webpack.config.dist.js b/config/webpack.config.dist.js index 8dd147e63..bffde7295 100644 --- a/config/webpack.config.dist.js +++ b/config/webpack.config.dist.js @@ -161,7 +161,7 @@ module.exports = webpackMerge(commonConfig, { return cssnano() .process(input, postcssOptions) - .then(result => { + .then((result) => { return { code: result.css, map: result.map, diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 1917d4227..843baf137 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -155,7 +155,7 @@ module.exports = webpackMerge(commonConfig, { return cssnano() .process(input, postcssOptions) - .then(result => { + .then((result) => { return { code: result.css, map: result.map, diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js index 69410ac49..099172c5b 100644 --- a/config/webpackDevServer.config.js +++ b/config/webpackDevServer.config.js @@ -5,7 +5,7 @@ const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const host = process.env.HOST || '0.0.0.0'; // eslint-disable-next-line -module.exports = function(proxy, allowedHost) { +module.exports = function (proxy, allowedHost) { return { // WebpackDevServer 2.4.3 introduced a security fix that prevents remote // websites from potentially accessing local content through DNS rebinding: diff --git a/package-lock.json b/package-lock.json index 413a97406..c2f695624 100644 --- a/package-lock.json +++ b/package-lock.json @@ -422,14 +422,14 @@ } }, "@babel/helpers": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.8.tgz", - "integrity": "sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==", + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.3.tgz", + "integrity": "sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==", "dev": true, "requires": { "@babel/template": "^7.14.5", - "@babel/traverse": "^7.14.8", - "@babel/types": "^7.14.8" + "@babel/traverse": "^7.15.0", + "@babel/types": "^7.15.0" } }, "@babel/highlight": { @@ -1106,9 +1106,9 @@ } }, "@babel/plugin-transform-block-scoping": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz", - "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==", + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz", + "integrity": "sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==", "dev": true, "requires": { "@babel/helper-plugin-utils": "^7.14.5" @@ -4136,12 +4136,6 @@ "@types/estree": "*" } }, - "@types/eslint-visitor-keys": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz", - "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==", - "dev": true - }, "@types/estree": { "version": "0.0.50", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz", @@ -4331,17 +4325,18 @@ "dev": true }, "@typescript-eslint/eslint-plugin": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.1.tgz", - "integrity": "sha512-PQg0emRtzZFWq6PxBcdxRH3QIQiyFO3WCVpRL3fgj5oQS3CDs3AeAKfv4DxNhzn8ITdNJGJ4D3Qw8eAJf3lXeQ==", + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.2.tgz", + "integrity": "sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==", "dev": true, "requires": { - "@typescript-eslint/experimental-utils": "3.10.1", - "debug": "^4.1.1", + "@typescript-eslint/experimental-utils": "4.29.2", + "@typescript-eslint/scope-manager": "4.29.2", + "debug": "^4.3.1", "functional-red-black-tree": "^1.0.1", - "regexpp": "^3.0.0", - "semver": "^7.3.2", - "tsutils": "^3.17.1" + "regexpp": "^3.1.0", + "semver": "^7.3.5", + "tsutils": "^3.21.0" }, "dependencies": { "debug": { @@ -4386,61 +4381,96 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz", - "integrity": "sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==", + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.2.tgz", + "integrity": "sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==", "dev": true, "requires": { - "@types/json-schema": "^7.0.3", - "@typescript-eslint/types": "3.10.1", - "@typescript-eslint/typescript-estree": "3.10.1", - "eslint-scope": "^5.0.0", - "eslint-utils": "^2.0.0" + "@types/json-schema": "^7.0.7", + "@typescript-eslint/scope-manager": "4.29.2", + "@typescript-eslint/types": "4.29.2", + "@typescript-eslint/typescript-estree": "4.29.2", + "eslint-scope": "^5.1.1", + "eslint-utils": "^3.0.0" + }, + "dependencies": { + "eslint-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", + "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^2.0.0" + } + } } }, "@typescript-eslint/parser": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.10.1.tgz", - "integrity": "sha512-Ug1RcWcrJP02hmtaXVS3axPPTTPnZjupqhgj+NnZ6BCkwSImWk/283347+x9wN+lqOdK9Eo3vsyiyDHgsmiEJw==", + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.29.2.tgz", + "integrity": "sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==", "dev": true, "requires": { - "@types/eslint-visitor-keys": "^1.0.0", - "@typescript-eslint/experimental-utils": "3.10.1", - "@typescript-eslint/types": "3.10.1", - "@typescript-eslint/typescript-estree": "3.10.1", - "eslint-visitor-keys": "^1.1.0" + "@typescript-eslint/scope-manager": "4.29.2", + "@typescript-eslint/types": "4.29.2", + "@typescript-eslint/typescript-estree": "4.29.2", + "debug": "^4.3.1" }, "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "debug": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", + "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true } } }, + "@typescript-eslint/scope-manager": { + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz", + "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==", + "dev": true, + "requires": { + "@typescript-eslint/types": "4.29.2", + "@typescript-eslint/visitor-keys": "4.29.2" + } + }, "@typescript-eslint/types": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-3.10.1.tgz", - "integrity": "sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==", + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz", + "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz", - "integrity": "sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==", + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.2.tgz", + "integrity": "sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==", "dev": true, "requires": { - "@typescript-eslint/types": "3.10.1", - "@typescript-eslint/visitor-keys": "3.10.1", - "debug": "^4.1.1", - "glob": "^7.1.6", + "@typescript-eslint/types": "4.29.2", + "@typescript-eslint/visitor-keys": "4.29.2", + "debug": "^4.3.1", + "globby": "^11.0.3", "is-glob": "^4.0.1", - "lodash": "^4.17.15", - "semver": "^7.3.2", - "tsutils": "^3.17.1" + "semver": "^7.3.5", + "tsutils": "^3.21.0" }, "dependencies": { + "array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true + }, "debug": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz", @@ -4450,6 +4480,26 @@ "ms": "2.1.2" } }, + "globby": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz", + "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==", + "dev": true, + "requires": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.1.1", + "ignore": "^5.1.4", + "merge2": "^1.3.0", + "slash": "^3.0.0" + } + }, + "ignore": { + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", + "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==", + "dev": true + }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -4474,6 +4524,12 @@ "lru-cache": "^6.0.0" } }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -4483,20 +4539,13 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz", - "integrity": "sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==", + "version": "4.29.2", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz", + "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==", "dev": true, "requires": { - "eslint-visitor-keys": "^1.1.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true - } + "@typescript-eslint/types": "4.29.2", + "eslint-visitor-keys": "^2.0.0" } }, "@webassemblyjs/ast": { @@ -6751,15 +6800,15 @@ "dev": true }, "core-js": { - "version": "3.16.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz", - "integrity": "sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==", + "version": "3.16.2", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.2.tgz", + "integrity": "sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==", "dev": true }, "core-js-compat": { - "version": "3.16.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.1.tgz", - "integrity": "sha512-NHXQXvRbd4nxp9TEmooTJLUf94ySUG6+DSsscBpTftN1lQLQ4LjnWvc7AoIo4UjDsFF3hB8Uh5LLCRRdaiT5MQ==", + "version": "3.16.2", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.2.tgz", + "integrity": "sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ==", "dev": true, "requires": { "browserslist": "^4.16.7", @@ -6864,17 +6913,6 @@ "node-fetch": "2.6.1" } }, - "cross-spawn": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", - "dev": true, - "requires": { - "lru-cache": "^4.0.1", - "shebang-command": "^1.2.0", - "which": "^1.2.9" - } - }, "css": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", @@ -8559,36 +8597,33 @@ } }, "eslint-config-adslot": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/eslint-config-adslot/-/eslint-config-adslot-1.0.3.tgz", - "integrity": "sha512-mKZeO8GIThMX7j93lSWjdIX95wnygUn5ZLmUooqWqeYHjcokkW63rJwYstnyfI0f2pBaf+mg39wIW0SS1jIGgw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-adslot/-/eslint-config-adslot-1.1.0.tgz", + "integrity": "sha512-ndXljGYsUgxQTUvLRaFiF8fibR3c33025tGXqONZ/9O7Ma2GyARGTtjZnT4UdHLYBkDFI8dzINTXImNl9fEY9g==", "dev": true, "requires": { - "@typescript-eslint/eslint-plugin": "^3.7.0", - "@typescript-eslint/parser": "^3.7.0", - "confusing-browser-globals": "^1.0.9", - "eslint-config-prettier": "^6.11.0", - "eslint-plugin-chai-friendly": "^0.6.0", - "eslint-plugin-import": "^2.22.0", - "eslint-plugin-jsx-a11y": "^6.3.1", - "eslint-plugin-lodash": "^7.1.0", - "eslint-plugin-react": "^7.20.3", - "eslint-plugin-react-hooks": "^4.0.8" + "@typescript-eslint/eslint-plugin": "^4.29.2", + "@typescript-eslint/parser": "^4.29.2", + "confusing-browser-globals": "^1.0.10", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-chai-friendly": "^0.7.2", + "eslint-plugin-import": "^2.24.1", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-lodash": "^7.3.0", + "eslint-plugin-react": "^7.24.0", + "eslint-plugin-react-hooks": "^4.2.0" } }, "eslint-config-prettier": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz", - "integrity": "sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==", - "dev": true, - "requires": { - "get-stdin": "^6.0.0" - } + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", + "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", + "dev": true }, "eslint-import-resolver-node": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.5.tgz", - "integrity": "sha512-XMoPKjSpXbkeJ7ZZ9icLnJMTY5Mc1kZbCakHquaFsXPpyWOwK0TK6CODO+0ca54UoM9LKOxyUNnoVZRl8TeaAg==", + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz", + "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==", "dev": true, "requires": { "debug": "^3.2.7", @@ -8810,32 +8845,32 @@ } }, "eslint-plugin-chai-friendly": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.6.0.tgz", - "integrity": "sha512-Uvvv1gkbRGp/qfN15B0kQyQWg+oFA8buDSqrwmW3egNSk/FpqH2MjQqKOuKwmEL6w4QIQrIjDp+gg6kGGmD3oQ==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.7.2.tgz", + "integrity": "sha512-LOIfGx5sZZ5FwM1shr2GlYAWV9Omdi+1/3byuVagvQNoGUuU0iHhp7AfjA1uR+4dJ4Isfb4+FwBJgQajIw9iAg==", "dev": true }, "eslint-plugin-import": { - "version": "2.24.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.0.tgz", - "integrity": "sha512-Kc6xqT9hiYi2cgybOc0I2vC9OgAYga5o/rAFinam/yF/t5uBqxQbauNPMC6fgb640T/89P0gFoO27FOilJ/Cqg==", + "version": "2.24.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.24.1.tgz", + "integrity": "sha512-KSFWhNxPH8OGJwpRJJs+Z7I0a13E2iFQZJIvSnCu6KUs4qmgAm3xN9GYBCSoiGWmwA7gERZPXqYQjcoCROnYhQ==", "dev": true, "requires": { "array-includes": "^3.1.3", "array.prototype.flat": "^1.2.4", "debug": "^2.6.9", "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.5", + "eslint-import-resolver-node": "^0.3.6", "eslint-module-utils": "^2.6.2", "find-up": "^2.0.0", "has": "^1.0.3", - "is-core-module": "^2.4.0", + "is-core-module": "^2.6.0", "minimatch": "^3.0.4", - "object.values": "^1.1.3", + "object.values": "^1.1.4", "pkg-up": "^2.0.0", "read-pkg-up": "^3.0.0", "resolve": "^1.20.0", - "tsconfig-paths": "^3.9.0" + "tsconfig-paths": "^3.10.1" }, "dependencies": { "doctrine": { @@ -8862,6 +8897,15 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, + "is-core-module": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz", + "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, "locate-path": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", @@ -9069,9 +9113,9 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz", - "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==", + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz", + "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==", "dev": true, "requires": { "regenerator-runtime": "^0.13.4" @@ -9086,12 +9130,12 @@ } }, "eslint-plugin-lodash": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-lodash/-/eslint-plugin-lodash-7.2.0.tgz", - "integrity": "sha512-7Wf7SOCK90OFgPd8LleVQa8uCWBZDLjPKxaFdwM/aINDyXhley0nRKSKL6TESGFCCMduYPox5VLttvqV2Vfbig==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-lodash/-/eslint-plugin-lodash-7.3.0.tgz", + "integrity": "sha512-FQM8HklruJzulPawX3uZqWbeyN3bQT4hjVCpFYMrWo0Hdz1qDCwp1v3JS4zjhdssAXdwCxdnyrNMCZJK70GeUQ==", "dev": true, "requires": { - "lodash": ">=4" + "lodash": "^4.17.21" } }, "eslint-plugin-react": { @@ -10660,18 +10704,6 @@ "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==", "dev": true }, - "get-stdin": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz", - "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==", - "dev": true - }, - "get-stream": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", - "dev": true - }, "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -15711,16 +15743,6 @@ "tslib": "^2.0.3" } }, - "lru-cache": { - "version": "4.1.5", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", - "dev": true, - "requires": { - "pseudomap": "^1.0.2", - "yallist": "^2.1.2" - } - }, "lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", @@ -17845,37 +17867,11 @@ "dev": true }, "prettier": { - "version": "1.18.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz", - "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", "dev": true }, - "prettier-check": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/prettier-check/-/prettier-check-2.0.0.tgz", - "integrity": "sha512-HZG53XQTJ9Cyi5hi1VFVVFxdlhITJybpZAch3ib9KqI05VUxV+F5Hip0GhSWRItrlDzVyqjSoDQ9KqIn7AHYyw==", - "dev": true, - "requires": { - "execa": "^0.6.0" - }, - "dependencies": { - "execa": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.6.3.tgz", - "integrity": "sha1-V7aaWU8IF1nGnlNw8NF7nLEWWP4=", - "dev": true, - "requires": { - "cross-spawn": "^5.0.1", - "get-stream": "^3.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - } - } - }, "pretty-error": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-3.0.4.tgz", @@ -18022,12 +18018,6 @@ "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", "dev": true }, - "pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", - "dev": true - }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -19024,9 +19014,9 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.14.8", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz", - "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==", + "version": "7.15.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz", + "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==", "dev": true, "requires": { "regenerator-runtime": "^0.13.4" @@ -23228,12 +23218,6 @@ "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", "dev": true }, - "yallist": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", - "dev": true - }, "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", diff --git a/package.json b/package.json index e9e64f600..f1c0a19b2 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "dist": "npm run clean && npm run dist:prod && npm run dist:dev && npm run generate-docs && npm run dist:demo", "lint:sass": "sass-lint -v", "lint:eslint": "eslint --ext .jsx,.js ./src && eslint --ext .jsx,.js ./www", - "lint:prettier": "prettier-check '{src,www,config}/**/*.{js,json,jsx,mdx}'", + "lint:prettier": "prettier '{src,www,config}/**/*.{js,json,jsx,mdx}' --check", "lint": "npm run lint:eslint && npm run lint:sass && npm run lint:prettier", "prettier": "prettier \"{src,www,config}/**/*.{js,json,jsx,mdx}\" --write", "svgo": "svgo --recursive --multipass --folder=src --config=svgo-config.js", @@ -42,7 +42,8 @@ "prettier": { "singleQuote": true, "trailingComma": "es5", - "printWidth": 120 + "printWidth": 120, + "arrowParens": "always" }, "lint-staged": { "{src,www,config}/**/*.{js,json,jsx,mdx}": [ @@ -70,8 +71,6 @@ "@babel/cli": "^7.14.8", "@babel/core": "^7.15.0", "@babel/eslint-parser": "^7.15.0", - "@babel/plugin-proposal-class-properties": "^7.14.5", - "@babel/plugin-proposal-object-rest-spread": "^7.14.7", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@commitlint/cli": "^13.1.0", @@ -92,14 +91,14 @@ "buffer": "^6.0.3", "case-sensitive-paths-webpack-plugin": "^2.4.0", "classnames": "^2.3.1", - "core-js": "^3.16.1", + "core-js": "^3.16.2", "cross-env": "^7.0.3", "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.0.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "eslint": "^7.32.0", - "eslint-config-adslot": "^1.0.3", + "eslint-config-adslot": "^1.1.0", "eslint-loader": "^4.0.2", "eslint-plugin-jest-dom": "^3.9.0", "eslint-webpack-plugin": "^3.0.1", @@ -117,8 +116,7 @@ "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^6.1.1", "postcss-safe-parser": "^6.0.0", - "prettier": "^1.18.2", - "prettier-check": "^2.0.0", + "prettier": "^2.3.2", "prism-react-renderer": "^1.2.1", "prop-types": "^15.7.2", "react-bootstrap": "^0.31.5", diff --git a/src/components/Accordion/index.jsx b/src/components/Accordion/index.jsx index e6a20e341..c09b15103 100644 --- a/src/components/Accordion/index.jsx +++ b/src/components/Accordion/index.jsx @@ -40,15 +40,15 @@ class Accordion extends React.PureComponent { : _.slice(this.props.defaultActivePanelIds, 0, this.props.maxExpand), }; - onPanelClick = panelId => { + onPanelClick = (panelId) => { const { maxExpand } = this.props; if (_.includes(this.state.activePanelIds, panelId)) { // remove panelId out of the active list - this.setState(prevState => ({ activePanelIds: _.without(prevState.activePanelIds, panelId) })); + this.setState((prevState) => ({ activePanelIds: _.without(prevState.activePanelIds, panelId) })); } else { // drop panels from the beginning if max opened panels count is reached - this.setState(prevState => { + this.setState((prevState) => { let newActivePanelIds = [...prevState.activePanelIds, panelId]; if (maxExpand !== 'max' && newActivePanelIds.length > maxExpand) { newActivePanelIds = _.drop(newActivePanelIds, newActivePanelIds.length - maxExpand); @@ -76,7 +76,7 @@ class Accordion extends React.PureComponent { } } - renderPanelFromChildren = child => { + renderPanelFromChildren = (child) => { const { id, isCollapsed } = child.props; // prevent rendering if child is not an instance of Accordion.Panel diff --git a/src/components/Accordion/index.spec.jsx b/src/components/Accordion/index.spec.jsx index 857ee1832..439534540 100644 --- a/src/components/Accordion/index.spec.jsx +++ b/src/components/Accordion/index.spec.jsx @@ -15,7 +15,7 @@ afterEach(cleanup); describe('', () => { const { panel1, panel2, panel3 } = PanelMocks; - const makeProps = override => + const makeProps = (override) => _.merge( { dts: 'my-accordion', @@ -84,7 +84,7 @@ describe('', () => { }); it('should expand or collapse any panels with a restriction of `maxExpand`', () => { - const panel = id => ({ + const panel = (id) => ({ id, title: `Panel ${id}`, dts: `panel-${id}`, diff --git a/src/components/ActionPanel/index.jsx b/src/components/ActionPanel/index.jsx index 7d5875bec..5a75e8a25 100644 --- a/src/components/ActionPanel/index.jsx +++ b/src/components/ActionPanel/index.jsx @@ -8,8 +8,8 @@ import './styles.scss'; const ActionPanel = React.forwardRef((props, ref) => { const { title, className, size, onClose, children, actionButton, isModal, closeIcon } = props; - const addBodyClass = classname => document.body.classList.add(classname); - const removeBodyClass = classname => document.body.classList.remove(classname); + const addBodyClass = (classname) => document.body.classList.add(classname); + const removeBodyClass = (classname) => document.body.classList.remove(classname); useEffect(() => { if (isModal) addBodyClass('modal-open'); diff --git a/src/components/ActionPanel/index.spec.jsx b/src/components/ActionPanel/index.spec.jsx index a82ab1882..a4942d791 100644 --- a/src/components/ActionPanel/index.spec.jsx +++ b/src/components/ActionPanel/index.spec.jsx @@ -7,7 +7,7 @@ import ActionPanel from '.'; afterEach(cleanup); describe('', () => { - const makeProps = override => + const makeProps = (override) => _.merge( { title: 'Action Panel', diff --git a/src/components/AlertInput/index.jsx b/src/components/AlertInput/index.jsx index fa8c62a66..f96506a73 100644 --- a/src/components/AlertInput/index.jsx +++ b/src/components/AlertInput/index.jsx @@ -55,7 +55,7 @@ export default class AlertInput extends React.PureComponent { this.setState({ isPopoverVisible: false }); }; - handleInputFocus = event => { + handleInputFocus = (event) => { event.target.select(); this.setState({ isFocused: true, @@ -67,7 +67,7 @@ export default class AlertInput extends React.PureComponent { } }; - handleInputBlur = event => { + handleInputBlur = (event) => { this.setState({ isFocused: false, isPopoverVisible: false, @@ -79,16 +79,8 @@ export default class AlertInput extends React.PureComponent { }; render() { - const { - dts, - popoverPlacement, - disabled, - prefixAddon, - suffixAddon, - alertStatus, - alertMessage, - onValueChange, - } = this.props; + const { dts, popoverPlacement, disabled, prefixAddon, suffixAddon, alertStatus, alertMessage, onValueChange } = + this.props; const className = classnames( baseClass, diff --git a/src/components/Avatar/index.jsx b/src/components/Avatar/index.jsx index d6f546840..5b529a2e3 100644 --- a/src/components/Avatar/index.jsx +++ b/src/components/Avatar/index.jsx @@ -17,9 +17,9 @@ const Avatar = ({ color, givenName, tooltip, image, surname }) => ( > {image ? presentation : null} -
{`${_.head(givenName) || ''}${_.head( - surname - ) || ''}`}
+
{`${_.head(givenName) || ''}${ + _.head(surname) || '' + }`}
); diff --git a/src/components/Breadcrumb/index.jsx b/src/components/Breadcrumb/index.jsx index 3f4bab04f..2fdd1e89e 100644 --- a/src/components/Breadcrumb/index.jsx +++ b/src/components/Breadcrumb/index.jsx @@ -8,7 +8,7 @@ import './styles.scss'; const Breadcrumb = ({ rootNode, divider, nodes, onClick, disabled }) => { const baseClass = 'aui--breadcrumb'; const className = classnames(baseClass, { [`${baseClass}--disabled`]: disabled }); - const onClickFunc = newActiveId => !disabled && onClick(newActiveId); + const onClickFunc = (newActiveId) => !disabled && onClick(newActiveId); if (nodes.length === 0) { return
; @@ -41,7 +41,7 @@ Breadcrumb.defaultProps = { rootNode: { id: 'all', label: 'All' }, divider: '>', nodes: [], - onClick: newActiveId => { + onClick: (newActiveId) => { throw new Error(`Breadcrumb needs an onClick handler to take ${newActiveId}`); }, disabled: false, diff --git a/src/components/Breadcrumb/index.spec.jsx b/src/components/Breadcrumb/index.spec.jsx index bac912c2b..c759b6eb3 100644 --- a/src/components/Breadcrumb/index.spec.jsx +++ b/src/components/Breadcrumb/index.spec.jsx @@ -8,7 +8,11 @@ describe('', () => { let nodes; const onClick = jest.fn(); beforeEach(() => { - nodes = [{ id: 'a', label: 'Canada' }, { id: 'b', label: 'British Columbia' }, { id: 'c', label: 'Victoria' }]; + nodes = [ + { id: 'a', label: 'Canada' }, + { id: 'b', label: 'British Columbia' }, + { id: 'c', label: 'Victoria' }, + ]; }); it('should render empty with the component className when no nodes', () => { @@ -28,7 +32,7 @@ describe('', () => { expect(queryAllByTestId('breadcrumb-node-wrapper')[0]).toHaveTextContent('All'); expect(queryAllByTestId('breadcrumb-node-divider')).toHaveLength(nodes.length); - queryAllByTestId('breadcrumb-node-divider').forEach(node => + queryAllByTestId('breadcrumb-node-divider').forEach((node) => expect(node).toHaveTextContent('/', { normalizeSpaces: false }) ); @@ -41,7 +45,7 @@ describe('', () => { it('should error when clicking a node with no onClick handler', () => { const { queryAllByTestId } = render(); - console.error = err => { + console.error = (err) => { throw new Error(err); }; expect(() => fireEvent.click(queryAllByTestId('breadcrumb-node-wrapper')[0])).toThrow( diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 406c42876..125134770 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -8,7 +8,7 @@ import Spinner from '../Spinner'; import { expandDts } from '../../lib/utils'; import './styles.scss'; -const Button = props => { +const Button = (props) => { const { theme, children, className, disabled, dts, href, inverse, isLoading, size, target, type } = props; const baseClass = 'aui--button'; const classes = classNames( diff --git a/src/components/ButtonGroup/index.jsx b/src/components/ButtonGroup/index.jsx index 404e15428..338f00220 100644 --- a/src/components/ButtonGroup/index.jsx +++ b/src/components/ButtonGroup/index.jsx @@ -19,7 +19,7 @@ class ButtonGroup extends React.PureComponent { }; injectProps(children) { - return React.Children.map(children, child => { + return React.Children.map(children, (child) => { if (React.isValidElement(child)) { const buttonProps = { ...(this.props.theme ? { theme: this.props.theme } : {}), @@ -28,7 +28,7 @@ class ButtonGroup extends React.PureComponent { ...(this.props.size ? { size: this.props.size } : {}), }; - const childNodes = React.Children.map(child.props.children, childNode => + const childNodes = React.Children.map(child.props.children, (childNode) => React.isValidElement(childNode) ? React.cloneElement(childNode, { ...childNode.props, diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx index 1270ef728..0e855c0dd 100644 --- a/src/components/Card/index.jsx +++ b/src/components/Card/index.jsx @@ -33,12 +33,18 @@ const Card = ({ children, className, accent, dts }) => { const baseClass = 'card-component'; const containerClassNames = classnames(baseClass, { [`accent accent-${accent}`]: accent }, className); - const nestedChildren = React.Children.map(children, ( - child // eslint-disable-line lodash/prefer-lodash-method - ) => (!_.get(child, 'props.append') ? child : null)); - const appendedChildren = React.Children.map(children, ( - child // eslint-disable-line lodash/prefer-lodash-method - ) => (_.get(child, 'props.append') ? child : null)); + const nestedChildren = React.Children.map( + children, + ( + child // eslint-disable-line lodash/prefer-lodash-method + ) => (!_.get(child, 'props.append') ? child : null) + ); + const appendedChildren = React.Children.map( + children, + ( + child // eslint-disable-line lodash/prefer-lodash-method + ) => (_.get(child, 'props.append') ? child : null) + ); return (
diff --git a/src/components/Carousel/index.spec.jsx b/src/components/Carousel/index.spec.jsx index 3efd2bdab..5d6c6759a 100644 --- a/src/components/Carousel/index.spec.jsx +++ b/src/components/Carousel/index.spec.jsx @@ -23,7 +23,7 @@ describe('', () => { 2 ); - getAllByTestId('carousel-image-wrapper').forEach(each => expect(container).toContainElement(each)); + getAllByTestId('carousel-image-wrapper').forEach((each) => expect(container).toContainElement(each)); getAllByTestId('carousel-image-wrapper').forEach((each, index) => expect(each).toHaveAttribute('src', `path/to/image-${index + 1}.jpg`) ); diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx index 00e1fd81f..d84a71f45 100644 --- a/src/components/Checkbox/index.jsx +++ b/src/components/Checkbox/index.jsx @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; import './styles.scss'; -const getNextState = checked => { +const getNextState = (checked) => { if (checked === 'partial') return false; return !checked; }; diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx index cd90355bf..360fc343e 100644 --- a/src/components/CheckboxGroup/index.jsx +++ b/src/components/CheckboxGroup/index.jsx @@ -8,14 +8,14 @@ import { expandDts } from '../../lib/utils'; const CheckboxGroup = ({ id, className, dts, children, value, name, inline, onChange }) => { const handleCheckboxChange = (nextCheckboxState, checkboxName, checkboxValue) => { const newValues = _.includes(value, checkboxValue) - ? value.filter(item => item !== checkboxValue) + ? value.filter((item) => item !== checkboxValue) : [...value, checkboxValue]; onChange(newValues, name); }; const renderChildren = () => - React.Children.map(children, child => { + React.Children.map(children, (child) => { if (!child) return null; if (child.type === Checkbox) { diff --git a/src/components/ConfirmModal/index.spec.jsx b/src/components/ConfirmModal/index.spec.jsx index 24585a8ed..8e6c32a27 100644 --- a/src/components/ConfirmModal/index.spec.jsx +++ b/src/components/ConfirmModal/index.spec.jsx @@ -72,7 +72,7 @@ describe('', () => { it('should throw when we click Apply without a handler', () => { const { getByTestId } = render(); - console.error = err => { + console.error = (err) => { throw new Error(err); }; expect(() => fireEvent.click(getByTestId('confirm-modal-confirm'))).toThrow( diff --git a/src/components/DatePicker/index.jsx b/src/components/DatePicker/index.jsx index df81aed44..b62da5ff6 100644 --- a/src/components/DatePicker/index.jsx +++ b/src/components/DatePicker/index.jsx @@ -9,7 +9,7 @@ const adslotDatePickerPropTypes = { }; class DatePicker extends React.PureComponent { - handleDateChangeRaw = event => { + handleDateChangeRaw = (event) => { event.preventDefault(); }; diff --git a/src/components/FilePicker/index.jsx b/src/components/FilePicker/index.jsx index 0201fed10..955af3f3d 100644 --- a/src/components/FilePicker/index.jsx +++ b/src/components/FilePicker/index.jsx @@ -60,7 +60,7 @@ class FilePickerComponent extends React.PureComponent { fileName: '', }; - onChange = changeEvent => { + onChange = (changeEvent) => { if (!this.state.isFileSelected) { this.setState({ isFileSelected: true, fileName: changeEvent.target.files[0].name }); this.props.onSelect(changeEvent.target.files[0]); diff --git a/src/components/Grid/Cell/index.spec.jsx b/src/components/Grid/Cell/index.spec.jsx index 295e6acc6..37134b8af 100644 --- a/src/components/Grid/Cell/index.spec.jsx +++ b/src/components/Grid/Cell/index.spec.jsx @@ -7,7 +7,7 @@ afterEach(cleanup); describe('', () => { const componentClass = 'grid-component-cell'; - const getClassNames = classSuffixes => { + const getClassNames = (classSuffixes) => { const classNames = classSuffixHelper({ classSuffixes, componentClass }); return `${componentClass}${classNames}`; }; diff --git a/src/components/Grid/Row/index.spec.jsx b/src/components/Grid/Row/index.spec.jsx index d13d51dde..42a940311 100644 --- a/src/components/Grid/Row/index.spec.jsx +++ b/src/components/Grid/Row/index.spec.jsx @@ -7,7 +7,7 @@ afterEach(cleanup); describe('', () => { const componentClass = 'grid-component-row'; - const getClassNames = classSuffixes => { + const getClassNames = (classSuffixes) => { const classNames = classSuffixHelper({ classSuffixes, componentClass }); return `${componentClass}${classNames}`; }; diff --git a/src/components/HoverDropdownMenu/index.spec.jsx b/src/components/HoverDropdownMenu/index.spec.jsx index 39d460176..d5e6aaf61 100644 --- a/src/components/HoverDropdownMenu/index.spec.jsx +++ b/src/components/HoverDropdownMenu/index.spec.jsx @@ -68,7 +68,7 @@ describe('', () => { expect(queryByTestId('popover-wrapper')).toBeInTheDocument(); expect(queryAllByTestId('popover-link-item-wrapper')).toHaveLength(2); - queryAllByTestId('popover-link-item-wrapper').forEach(item => expect(item).toHaveClass('popover-link-item')); + queryAllByTestId('popover-link-item-wrapper').forEach((item) => expect(item).toHaveClass('popover-link-item')); expect(queryAllByTestId('popover-link-item-wrapper')[0]).toHaveTextContent('Link 1'); expect(queryAllByTestId('popover-link-item-wrapper')[1]).toHaveTextContent('Logout'); }); diff --git a/src/components/ListPicker/index.jsx b/src/components/ListPicker/index.jsx index 357ea74dd..8fb35d398 100644 --- a/src/components/ListPicker/index.jsx +++ b/src/components/ListPicker/index.jsx @@ -11,16 +11,13 @@ import GridRow from '../Grid/Row'; import GridCell from '../Grid/Cell'; import './styles.scss'; -const isSubset = (array, subArray) => - _(subArray) - .difference(array) - .isEmpty(); +const isSubset = (array, subArray) => _(subArray).difference(array).isEmpty(); class ListPickerComponent extends React.PureComponent { constructor(props) { super(props); ['applyAction', 'cancelAction', 'deselectItem', 'getApplyButtonState', 'defaultState', 'selectItem'].forEach( - methodName => { + (methodName) => { this[methodName] = this[methodName].bind(this); } ); @@ -123,7 +120,7 @@ class ListPickerComponent extends React.PureComponent { {itemInfo.label} - {_.map(itemInfo.properties, property => ( + {_.map(itemInfo.properties, (property) => ( {property.label} diff --git a/src/components/ListPicker/index.spec.jsx b/src/components/ListPicker/index.spec.jsx index bbc2bd943..21d68dcbf 100644 --- a/src/components/ListPicker/index.spec.jsx +++ b/src/components/ListPicker/index.spec.jsx @@ -109,7 +109,10 @@ describe('', () => { it('should render with props for split pane', () => { const itemInfo = { label: 'User Details', - properties: [{ label: 'Name', value: 'Jill Smith' }, { label: 'Age', value: '21' }], + properties: [ + { label: 'Name', value: 'Jill Smith' }, + { label: 'Age', value: '21' }, + ], }; const initialSelection = getInitialSelection(); const emptySvgSymbol =
; @@ -263,7 +266,7 @@ describe('', () => { }); it('should throw when we click Apply without a handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const { getByText } = render(); @@ -280,7 +283,7 @@ describe('', () => { }); it('should throw when we click Close without a handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const { getByText } = render(); diff --git a/src/components/ListPicker/mocks.jsx b/src/components/ListPicker/mocks.jsx index 7ba731ef5..c5d69dcac 100644 --- a/src/components/ListPicker/mocks.jsx +++ b/src/components/ListPicker/mocks.jsx @@ -1,7 +1,7 @@ import immutable from 'seamless-immutable'; import React from 'react'; -const labelFormatter = item => `${item.givenName} ${item.surname}`; +const labelFormatter = (item) => `${item.givenName} ${item.surname}`; const teamMember1 = { givenName: 'John', id: 1, surname: 'Smith' }; diff --git a/src/components/ListPickerPure/index.jsx b/src/components/ListPickerPure/index.jsx index f78bc113f..e57142da4 100644 --- a/src/components/ListPickerPure/index.jsx +++ b/src/components/ListPickerPure/index.jsx @@ -86,7 +86,7 @@ class ListPickerPureComponent extends React.PureComponent { ) : null}
- {_.map(items, item => ( + {_.map(items, (item) => ( {labelFormatter(item)} @@ -137,7 +137,7 @@ ListPickerPureComponent.defaultProps = { throw new Error('AdslotUi ListPickerPure needs a deselectItem handler'); }, emptyMessage: 'No items to select.', - labelFormatter: item => item.label, + labelFormatter: (item) => item.label, items: [], itemType: 'item', selectItem: () => { diff --git a/src/components/ListPickerPure/index.spec.jsx b/src/components/ListPickerPure/index.spec.jsx index 7b872772f..4b78c3642 100644 --- a/src/components/ListPickerPure/index.spec.jsx +++ b/src/components/ListPickerPure/index.spec.jsx @@ -11,15 +11,8 @@ const queryAllByDts = queryAllByAttribute.bind(null, 'data-test-selector'); afterEach(cleanup); describe('', () => { - const { - getInitialSelection, - labelFormatter, - teamMember4, - userHeaders, - nodeUserHeaders, - users, - usersWithUuid, - } = ListPickerMocks; + const { getInitialSelection, labelFormatter, teamMember4, userHeaders, nodeUserHeaders, users, usersWithUuid } = + ListPickerMocks; const selectedItems = getInitialSelection(); @@ -62,7 +55,7 @@ describe('', () => { expect(getByText('Team')).toHaveClass('grid-component-cell'); expect(getByText('Member')).toHaveClass('grid-component-cell'); - queryAllByTestId('grid-row-wrapper').forEach(each => expect(each).toHaveClass('grid-component-row')); + queryAllByTestId('grid-row-wrapper').forEach((each) => expect(each).toHaveClass('grid-component-row')); expect(queryAllByTestId('grid-row-wrapper')[1]).toContainElement(getByText('John Smith')); expect(queryAllByTestId('grid-row-wrapper')[2]).toContainElement(getByText('Jane Doe')); expect(queryAllByTestId('grid-row-wrapper')[3]).toContainElement(getByText('Jack White')); @@ -103,7 +96,7 @@ describe('', () => { expect(queryAllByTestId('grid-row-wrapper')[0]).toContainElement(getByText('Team')); expect(queryAllByTestId('grid-row-wrapper')[0]).toContainElement(getByText('Member')); - queryAllByTestId('grid-row-wrapper').forEach(each => expect(each).toHaveClass('grid-component-row')); + queryAllByTestId('grid-row-wrapper').forEach((each) => expect(each).toHaveClass('grid-component-row')); expect(queryAllByTestId('grid-row-wrapper')[1]).toContainElement(getByText('Jones Cheng')); expect(queryAllByTestId('grid-row-wrapper')[2]).toContainElement(getByText('Joe Huang')); @@ -142,7 +135,7 @@ describe('', () => { expect(getByText('Required')).toHaveClass('grid-component-cell grid-component-cell-header-addon'); expect(queryAllByDts(container, 'addon')).toHaveLength(3); - queryAllByDts(container, 'addon').forEach(each => { + queryAllByDts(container, 'addon').forEach((each) => { expect(each).toHaveClass('grid-component-cell-addon'); expect(each).toHaveTextContent('Nothing to show.'); }); @@ -187,7 +180,7 @@ describe('', () => { }); it('should throw when we select without a `selectItem` handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const props = { items: users, selectedItems }; @@ -203,7 +196,7 @@ describe('', () => { }); it('should throw when we deselect without a `deselectItem` handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const props = { items: users, selectedItems }; diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx index b2edaee3f..3ae2b7bef 100644 --- a/src/components/Navigation/index.jsx +++ b/src/components/Navigation/index.jsx @@ -8,7 +8,7 @@ import './styles.scss'; const Nav = ({ stacked, className, onSelect, activeKey, barPosition, children, dts }) => { let navItems = []; - React.Children.forEach(children, child => { + React.Children.forEach(children, (child) => { navItems.push(React.cloneElement(child, { onSelect, activeKey: activeKey })); }); diff --git a/src/components/OverlayLoader/index.jsx b/src/components/OverlayLoader/index.jsx index fdca14990..6e21c4e6e 100644 --- a/src/components/OverlayLoader/index.jsx +++ b/src/components/OverlayLoader/index.jsx @@ -7,7 +7,7 @@ const OverlayLoader = ({ text, top, heading, disableBackground }) => (
event.stopPropagation() } : {})} + {...(disableBackground ? { onClick: (event) => event.stopPropagation() } : {})} >
diff --git a/src/components/PagedGrid/index.jsx b/src/components/PagedGrid/index.jsx index b35f60739..5f12c06bf 100644 --- a/src/components/PagedGrid/index.jsx +++ b/src/components/PagedGrid/index.jsx @@ -29,15 +29,15 @@ class PagedGridComponent extends React.PureComponent {
- {_.map(columns, column => ( + {_.map(columns, (column) => ( {column.label} ))} - {_.map(pageItems, item => ( + {_.map(pageItems, (item) => ( - {_.map(columns, column => ( + {_.map(columns, (column) => ( this.setState({ activePage: selectedPage })} + onSelect={(selectedPage) => this.setState({ activePage: selectedPage })} prev />
diff --git a/src/components/PagedGrid/index.spec.jsx b/src/components/PagedGrid/index.spec.jsx index dbb404a41..fcda97ea6 100644 --- a/src/components/PagedGrid/index.spec.jsx +++ b/src/components/PagedGrid/index.spec.jsx @@ -24,12 +24,15 @@ describe('', () => { it('should render with items', () => { const props = { columns: [{ key: 'name' }], - items: [{ name: 'item1', id: 1 }, { name: 'item2', id: 2 }], + items: [ + { name: 'item1', id: 1 }, + { name: 'item2', id: 2 }, + ], perPage: 1, }; const { queryByTestId, queryAllByTestId } = render(); expect(queryAllByTestId('grid-row-wrapper')).toHaveLength(2); - queryAllByTestId('grid-row-wrapper').forEach(gridRow => + queryAllByTestId('grid-row-wrapper').forEach((gridRow) => expect(gridRow).not.toHaveClass('grid-component-row-vertical-cell-border') ); expect(queryByTestId('pagination-wrapper')).toBeInTheDocument(); @@ -38,13 +41,17 @@ describe('', () => { it('should update grid when new page selected or items updated', () => { const props = { columns: [{ key: 'name' }], - items: [{ name: 'item1', id: 1 }, { name: 'item2', id: 2 }, { name: 'item3', id: 3 }], + items: [ + { name: 'item1', id: 1 }, + { name: 'item2', id: 2 }, + { name: 'item3', id: 3 }, + ], perPage: 1, verticalCellBorder: true, }; const { queryAllByTestId, getByTestId, getByText, rerender } = render(); expect(queryAllByTestId('grid-row-wrapper')).toHaveLength(2); - queryAllByTestId('grid-row-wrapper').forEach(gridRow => + queryAllByTestId('grid-row-wrapper').forEach((gridRow) => expect(gridRow).toHaveClass('grid-component-row-vertical-cell-border') ); expect(getByTestId('paged-grid-pagination-info')).toHaveClass('pagedgrid-component-pagination-info'); diff --git a/src/components/Pagination/index.spec.jsx b/src/components/Pagination/index.spec.jsx index 03fcc6c57..546310b02 100644 --- a/src/components/Pagination/index.spec.jsx +++ b/src/components/Pagination/index.spec.jsx @@ -63,7 +63,7 @@ describe('', () => { expect(queryAllByTestId('button-wrapper')).toHaveLength(4); const buttons = queryAllByTestId('button-wrapper'); - _.forEach(buttons, button => expect(button).not.toHaveClass('aui--pagination-sides')); + _.forEach(buttons, (button) => expect(button).not.toHaveClass('aui--pagination-sides')); }); it('should trigger selecting events of buttons when active page is 1', () => { diff --git a/src/components/Popover/constants.js b/src/components/Popover/constants.js index d265ccd08..4fe52138c 100644 --- a/src/components/Popover/constants.js +++ b/src/components/Popover/constants.js @@ -3,7 +3,11 @@ import _ from 'lodash'; export const themes = ['light', 'dark', 'warn', 'error', 'info', 'success']; const basePlacements = ['auto', 'top', 'right', 'bottom', 'left']; -export const popoverPlacements = _.flatMap(basePlacements, trigger => [trigger, `${trigger}-start`, `${trigger}-end`]); +export const popoverPlacements = _.flatMap(basePlacements, (trigger) => [ + trigger, + `${trigger}-start`, + `${trigger}-end`, +]); /** * Describes the positioning strategy to use. diff --git a/src/components/Popover/index.jsx b/src/components/Popover/index.jsx index e40f54dda..6cf61cbfb 100644 --- a/src/components/Popover/index.jsx +++ b/src/components/Popover/index.jsx @@ -9,7 +9,7 @@ import './styles.scss'; const triggerPropTypes = PropTypes.oneOf(['click', 'hover', 'focus', 'disabled']); -const Popover = props => { +const Popover = (props) => { const { isOpen } = props; const [isPopoverOpen, setIsPopoverOpen] = useState(isOpen); diff --git a/src/components/PrettyDiff/index.jsx b/src/components/PrettyDiff/index.jsx index 9c5a68ced..f8565b3e5 100644 --- a/src/components/PrettyDiff/index.jsx +++ b/src/components/PrettyDiff/index.jsx @@ -8,7 +8,7 @@ const PrettyDiff = ({ newText, oldText }) => { const dmp = new DiffMatchPatch(); const diffs = dmp.diff_main(oldText, newText); - const getTextClass = diffType => { + const getTextClass = (diffType) => { switch (diffType) { case DiffMatchPatch.DIFF_DELETE: return 'pretty-diff-component-delete'; diff --git a/src/components/PrettyDiff/index.spec.jsx b/src/components/PrettyDiff/index.spec.jsx index 60b0d1971..59498c63e 100644 --- a/src/components/PrettyDiff/index.spec.jsx +++ b/src/components/PrettyDiff/index.spec.jsx @@ -15,7 +15,7 @@ describe('', () => { expect(queryAllByTestId('pretty-diff-component-equal')).toHaveLength(3); - queryAllByTestId('pretty-diff-component-equal').forEach(span => + queryAllByTestId('pretty-diff-component-equal').forEach((span) => expect(span).toHaveClass('pretty-diff-component-equal') ); expect(queryAllByTestId('pretty-diff-component-equal')[0]).toHaveTextContent('', () => { expect(queryAllByTestId('pretty-diff-component-insert')).toHaveLength(2); expect(queryAllByTestId('pretty-diff-component-insert')[0]).toHaveClass('pretty-diff-component-insert'); - queryAllByTestId('pretty-diff-component-insert').forEach(span => + queryAllByTestId('pretty-diff-component-insert').forEach((span) => expect(span).toHaveClass('pretty-diff-component-insert') ); expect(queryAllByTestId('pretty-diff-component-insert')[0]).toHaveTextContent('slow'); diff --git a/src/components/RadioGroup/index.jsx b/src/components/RadioGroup/index.jsx index 05e998ff9..eec71c983 100644 --- a/src/components/RadioGroup/index.jsx +++ b/src/components/RadioGroup/index.jsx @@ -5,13 +5,13 @@ import PropTypes from 'prop-types'; import { expandDts } from '../../lib/utils'; class RadioGroup extends React.PureComponent { - onChangeDefault = event => { + onChangeDefault = (event) => { const newValue = event.currentTarget.value; this.props.onChange(newValue); }; renderChildren = () => - React.Children.map(this.props.children, child => { + React.Children.map(this.props.children, (child) => { const childProps = _.assign({}, child.props, { name: this.props.name, checked: this.props.value === child.props.value, diff --git a/src/components/RichTextEditor/BlockStyleButtons.jsx b/src/components/RichTextEditor/BlockStyleButtons.jsx index a3f77575e..3a06f2d96 100644 --- a/src/components/RichTextEditor/BlockStyleButtons.jsx +++ b/src/components/RichTextEditor/BlockStyleButtons.jsx @@ -9,19 +9,16 @@ const BLOCK_TYPES = [ { label: number, style: 'ordered-list-item' }, ]; -const BlockStyleButtons = props => { +const BlockStyleButtons = (props) => { const { editorState } = props; const selection = editorState.getSelection(); - const blockType = editorState - .getCurrentContent() - .getBlockForKey(selection.getStartKey()) - .getType(); + const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType(); - const onToggle = style => { + const onToggle = (style) => { props.onToggle(RichUtils.toggleBlockType(props.editorState, style)); }; - return BLOCK_TYPES.map(type => ( + return BLOCK_TYPES.map((type) => ( , style: 'UNDERLINE' }, ]; -const InlineStyleButtons = props => { +const InlineStyleButtons = (props) => { const currentStyle = props.editorState.getCurrentInlineStyle(); - const onToggle = style => { + const onToggle = (style) => { props.onToggle(RichUtils.toggleInlineStyle(props.editorState, style)); }; - return INLINE_STYLES.map(type => ( + return INLINE_STYLES.map((type) => ( { }); const mouseDownHandler = React.useCallback( - event => { + (event) => { event.preventDefault(); event.stopPropagation(); return onToggle(); diff --git a/src/components/RichTextEditor/index.jsx b/src/components/RichTextEditor/index.jsx index 273fc16af..7b2ace341 100644 --- a/src/components/RichTextEditor/index.jsx +++ b/src/components/RichTextEditor/index.jsx @@ -20,7 +20,7 @@ const RichTextEditor = ({ className, value, initialValue, onChange, placeholder const [editorState, setEditorState] = React.useState(initialValue || EditorState.createEmpty()); - const handleOnChange = newState => { + const handleOnChange = (newState) => { if (!value) { setEditorState(newState); } @@ -29,7 +29,7 @@ const RichTextEditor = ({ className, value, initialValue, onChange, placeholder } }; - const handleKeyCommand = command => { + const handleKeyCommand = (command) => { const newState = RichUtils.handleKeyCommand(editorState, command); if (newState) { handleOnChange(newState); @@ -74,7 +74,7 @@ RichTextEditor.defaultProps = { RichTextEditor.createEmpty = EditorState.createEmpty; RichTextEditor.createWithText = EditorState.createWithText; -RichTextEditor.stateToHTML = input => stateToHTML(input.getCurrentContent()); -RichTextEditor.stateFromHTML = input => EditorState.createWithContent(stateFromHTML(input)); +RichTextEditor.stateToHTML = (input) => stateToHTML(input.getCurrentContent()); +RichTextEditor.stateFromHTML = (input) => EditorState.createWithContent(stateFromHTML(input)); export default RichTextEditor; diff --git a/src/components/RichTextEditor/index.spec.jsx b/src/components/RichTextEditor/index.spec.jsx index 59f03eb35..dcb19139e 100644 --- a/src/components/RichTextEditor/index.spec.jsx +++ b/src/components/RichTextEditor/index.spec.jsx @@ -7,12 +7,12 @@ import RichTextEditor from '.'; const getByClass = queryByAttribute.bind(null, 'class'); const queryAllByClass = queryAllByAttribute.bind(null, 'class'); -const createPasteEvent = html => { +const createPasteEvent = (html) => { const text = html.replace('<[^>]*>', ''); return { clipboardData: { types: ['text/plain', 'text/html'], - getData: type => (type === 'text/plain' ? text : html), + getData: (type) => (type === 'text/plain' ? text : html), }, }; }; diff --git a/src/components/Search/index.jsx b/src/components/Search/index.jsx index b4e4fd7a9..3a3f788fd 100644 --- a/src/components/Search/index.jsx +++ b/src/components/Search/index.jsx @@ -28,7 +28,7 @@ const Search = React.forwardRef( ) => { const [inputValue, setInputValue] = React.useState(''); - const onInputChange = event => { + const onInputChange = (event) => { const eventValue = _.get(event, 'target.value'); if (onChange) { onChange(eventValue); @@ -52,19 +52,19 @@ const Search = React.forwardRef( if (onClear) onClear(emptyValue); }; - const onKeyPress = event => { + const onKeyPress = (event) => { if (searchOnEnter && event.key === 'Enter') { event.preventDefault(); onInputSearch(_.get(event, 'target.value')); } }; - const onInputSearch = searchValue => { + const onInputSearch = (searchValue) => { const search = debounceInterval ? _.debounce(onSearch, debounceInterval) : onSearch; search(searchValue); }; - const onSearchButtonClick = event => { + const onSearchButtonClick = (event) => { event.preventDefault(); const searchValue = value || inputValue; onInputSearch(searchValue); diff --git a/src/components/Search/index.spec.jsx b/src/components/Search/index.spec.jsx index c0502d7e5..d79d38239 100644 --- a/src/components/Search/index.spec.jsx +++ b/src/components/Search/index.spec.jsx @@ -200,7 +200,7 @@ describe('', () => { expect(callbacks.onSearch).toHaveBeenCalledWith('new-value'); }); - it('should fire onSearch after debounceInterval', done => { + it('should fire onSearch after debounceInterval', (done) => { const callbacks = { onSearch: jest.fn(), }; diff --git a/src/components/SearchableCheckList/index.jsx b/src/components/SearchableCheckList/index.jsx index 2688d6849..74ff542f1 100644 --- a/src/components/SearchableCheckList/index.jsx +++ b/src/components/SearchableCheckList/index.jsx @@ -11,7 +11,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount, const eligibleItems = searchText ? _(items) - .map(item => { + .map((item) => { return item.label.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 ? item : null; }) .compact() @@ -45,7 +45,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount,
{ + onSearch={(value) => { setSearchText(value); }} placeholder={placeholder} @@ -56,7 +56,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount, checked={mainCheckBoxState} value={`all-${pluralLabel}`} label={`All ${pluralLabel}`} - onChange={nextState => { + onChange={(nextState) => { onChange(nextState ? _.map(items, 'value') : []); }} /> @@ -65,7 +65,7 @@ const SearchableCheckList = ({ context, items, selectedItemsKeys, displayCount, { + onChange={(newSelectionList) => { onChange(newSelectionList); }} > diff --git a/src/components/SearchableCheckList/index.spec.jsx b/src/components/SearchableCheckList/index.spec.jsx index fa1ff9f87..cb80a0eeb 100644 --- a/src/components/SearchableCheckList/index.spec.jsx +++ b/src/components/SearchableCheckList/index.spec.jsx @@ -38,7 +38,7 @@ describe('', () => { expect(checkBoxesWrapper).toHaveLength(7); // All unselected checkBoxes - _.forEach(checkBoxesWrapper, checkBoxItem => { + _.forEach(checkBoxesWrapper, (checkBoxItem) => { expect(checkBoxItem).not.toBeChecked(); }); @@ -95,12 +95,12 @@ describe('', () => { expect(checkBoxesWrapper).toHaveLength(7); // 2 checked elements - _.forEach([1, 2], index => { + _.forEach([1, 2], (index) => { expect(checkBoxesWrapper[index]).toBeChecked(); }); // Remaining 4 un-checked elements - _.forEach([3, 4, 5, 6], index => { + _.forEach([3, 4, 5, 6], (index) => { expect(checkBoxesWrapper[index]).not.toBeChecked(); }); }); @@ -121,7 +121,7 @@ describe('', () => { const checkBoxesWrapper = queryAllByTestId('checkbox-input'); expect(checkBoxesWrapper).toHaveLength(7); - _.forEach(checkBoxesWrapper, checkBoxItem => { + _.forEach(checkBoxesWrapper, (checkBoxItem) => { expect(checkBoxItem).toBeChecked(); }); }); diff --git a/src/components/Select/index.jsx b/src/components/Select/index.jsx index 9e0b7bea1..fb4f1592f 100644 --- a/src/components/Select/index.jsx +++ b/src/components/Select/index.jsx @@ -12,15 +12,15 @@ import './styles.scss'; const componentBaseClass = 'select-component'; -const DropdownIndicator = props => ( +const DropdownIndicator = (props) => (
); -const ClearIndicator = props => ✕; +const ClearIndicator = (props) => ✕; -const selectContainerBuilder = extraProps => props => { +const selectContainerBuilder = (extraProps) => (props) => { const containerProps = { ...props, innerProps: { @@ -35,8 +35,8 @@ const selectContainerBuilder = extraProps => props => { /** * The propType for this component should be the same as 'React-Select` lib, plus any special props */ -const selectComponentBuilder = Component => { - const SelectComponent = props => { +const selectComponentBuilder = (Component) => { + const SelectComponent = (props) => { const customComponents = { DropdownIndicator, ClearIndicator }; if (!_.isEmpty(props.dts)) { @@ -54,7 +54,7 @@ const selectComponentBuilder = Component => { if (props.isInModal) { selectProps.menuPortalTarget = document.body; selectProps.styles = { - menuPortal: base => ({ ...base, zIndex: 9999 }), + menuPortal: (base) => ({ ...base, zIndex: 9999 }), ...selectProps.styles, }; } diff --git a/src/components/Select/index.test.jsx b/src/components/Select/index.test.jsx index da0e5fea5..a9e8193dc 100644 --- a/src/components/Select/index.test.jsx +++ b/src/components/Select/index.test.jsx @@ -14,11 +14,6 @@ describe('SelectComponent', () => { it('should render select options in body if props.isInModal is true', () => { const wrapper = mount(); expect(wrapper.find(Select).prop('menuPortalTarget')).toEqual(document.body); - expect( - wrapper - .find(Select) - .prop('styles') - .menuPortal() - ).toEqual({ zIndex: 9999 }); + expect(wrapper.find(Select).prop('styles').menuPortal()).toEqual({ zIndex: 9999 }); }); }); diff --git a/src/components/Select/styles.js b/src/components/Select/styles.js index 3557816cb..86e5a4234 100644 --- a/src/components/Select/styles.js +++ b/src/components/Select/styles.js @@ -23,7 +23,7 @@ const defaultStyle = { backgroundColor, }; }, - indicatorSeparator: styles => ({ + indicatorSeparator: (styles) => ({ ...styles, display: 'none', }), @@ -39,38 +39,38 @@ const defaultStyle = { minHeight: 26, borderRadius: 0, }), - clearIndicator: styles => ({ + clearIndicator: (styles) => ({ ...styles, padding: '0 4px 0 8px', }), - dropdownIndicator: styles => ({ + dropdownIndicator: (styles) => ({ ...styles, padding: '0 8px 0 4px', }), - valueContainer: styles => ({ + valueContainer: (styles) => ({ ...styles, padding: '0 8px', }), - multiValue: styles => ({ + multiValue: (styles) => ({ ...styles, color: '#fff', backgroundColor: '#838383', }), - multiValueLabel: styles => ({ + multiValueLabel: (styles) => ({ ...styles, color: '#fff', }), - multiValueRemove: styles => ({ + multiValueRemove: (styles) => ({ ...styles, ':hover': {}, }), - menu: styles => ({ + menu: (styles) => ({ ...styles, zIndex: 1060, borderRadius: 0, marginTop: 4, }), - noOptionsMessage: styles => ({ + noOptionsMessage: (styles) => ({ ...styles, textAlign: 'left', }), diff --git a/src/components/Slicey/Marker/index.jsx b/src/components/Slicey/Marker/index.jsx index 3c06955c7..e23a491aa 100644 --- a/src/components/Slicey/Marker/index.jsx +++ b/src/components/Slicey/Marker/index.jsx @@ -4,7 +4,7 @@ import { ROUND, QUARTER, getPointX, getPointY } from '../dataProcessor'; import './styles.scss'; const Marker = ({ fraction }) => { - const getMarkerPoints = markerValue => { + const getMarkerPoints = (markerValue) => { const pointOnCircle = ROUND * markerValue - QUARTER; return `${getPointX(pointOnCircle)},${getPointY(pointOnCircle)} 0,0`; }; diff --git a/src/components/Slicey/dataProcessor.js b/src/components/Slicey/dataProcessor.js index ecddcacc5..0161e9ddd 100644 --- a/src/components/Slicey/dataProcessor.js +++ b/src/components/Slicey/dataProcessor.js @@ -4,6 +4,6 @@ export const QUARTER = Math.PI / 2; export const HALF = Math.PI; export const ROUND = Math.PI * 2; -export const getPointX = angle => RADIUS * Math.cos(angle); +export const getPointX = (angle) => RADIUS * Math.cos(angle); -export const getPointY = angle => RADIUS * Math.sin(angle); +export const getPointY = (angle) => RADIUS * Math.sin(angle); diff --git a/src/components/Slicey/index.jsx b/src/components/Slicey/index.jsx index 58aaea588..17863c114 100644 --- a/src/components/Slicey/index.jsx +++ b/src/components/Slicey/index.jsx @@ -7,9 +7,9 @@ import Marker from './Marker'; import { ROUND, HALF, QUARTER, getPointX, getPointY } from './dataProcessor'; import './styles.scss'; -const filterDataset = dataset => _.filter(dataset, ({ value }) => value > 0); +const filterDataset = (dataset) => _.filter(dataset, ({ value }) => value > 0); -const getArcs = datasetForArcs => { +const getArcs = (datasetForArcs) => { const total = _.sumBy(datasetForArcs, 'value'); const arcs = new Array(datasetForArcs.length); @@ -34,9 +34,9 @@ const getArcs = datasetForArcs => { }; // IE Can't draw a complete circle as an arc, so swap it to a circle element. -const getArcElements = filteredDataset => { +const getArcElements = (filteredDataset) => { if (filteredDataset.length > 1) { - return _.map(getArcs(filteredDataset), arc => ); + return _.map(getArcs(filteredDataset), (arc) => ); } return ( @@ -50,7 +50,7 @@ const getArcElements = filteredDataset => { ); }; -const getSvgProps = diameter => ({ +const getSvgProps = (diameter) => ({ className: 'slicey-component', height: diameter, width: diameter, diff --git a/src/components/Slicey/index.spec.jsx b/src/components/Slicey/index.spec.jsx index 646441486..fab0cbfd4 100644 --- a/src/components/Slicey/index.spec.jsx +++ b/src/components/Slicey/index.spec.jsx @@ -5,7 +5,10 @@ import Slicey from '.'; afterEach(cleanup); describe('', () => { - const dataset = [{ label: 'positive', value: 5 }, { label: 'negative', value: 3 }]; + const dataset = [ + { label: 'positive', value: 5 }, + { label: 'negative', value: 3 }, + ]; it('should render an empty state', () => { const { getByTestId, queryByTestId } = render(); diff --git a/src/components/SvgSymbol/index.jsx b/src/components/SvgSymbol/index.jsx index a524e6121..31880f493 100644 --- a/src/components/SvgSymbol/index.jsx +++ b/src/components/SvgSymbol/index.jsx @@ -5,7 +5,7 @@ import './styles.scss'; const base64UrlPrefix = 'data:image/svg+xml;base64,'; -const SvgSymbol = props => { +const SvgSymbol = (props) => { let isEncoded = false; const { classSuffixes, href, onClick, isCircle } = props; const suffixOptions = { clickable: props.onClick }; diff --git a/src/components/Switch/index.jsx b/src/components/Switch/index.jsx index 85bb35df6..ff8d3d0a9 100644 --- a/src/components/Switch/index.jsx +++ b/src/components/Switch/index.jsx @@ -6,7 +6,7 @@ import './styles.scss'; class Switch extends React.PureComponent { state = { checked: this.props.defaultChecked || false }; - handleChange = event => { + handleChange = (event) => { const { onChange, checked } = this.props; const targetCheckedValue = _.get(event, 'target.checked'); diff --git a/src/components/Tabs/index.jsx b/src/components/Tabs/index.jsx index b017385c3..8cf62865e 100755 --- a/src/components/Tabs/index.jsx +++ b/src/components/Tabs/index.jsx @@ -28,7 +28,7 @@ class Tabs extends React.PureComponent { switchTab(key) { const { onSelect, activeKey } = this.props; - return event => { + return (event) => { event.preventDefault(); if (this.isControlled && key !== activeKey) { @@ -43,7 +43,7 @@ class Tabs extends React.PureComponent { const { id, children } = this.props; const tabs = []; - const content = React.Children.map(children, child => { + const content = React.Children.map(children, (child) => { if (_.get(child, 'type.innerName') !== Tab.innerName) { console.error(' children must be instances of '); return false; @@ -61,7 +61,7 @@ class Tabs extends React.PureComponent { return (
    - {tabs.map(tab => ( + {tabs.map((tab) => (
  • +const makeProps = (override) => _.merge( { id: '123', diff --git a/src/components/TileGrid/index.jsx b/src/components/TileGrid/index.jsx index 2a53ffbfb..31bcf51a6 100644 --- a/src/components/TileGrid/index.jsx +++ b/src/components/TileGrid/index.jsx @@ -10,7 +10,7 @@ const defaultMaxWidth = 295; // 295px const baseClass = 'tile-grid-component'; const TileGrid = ({ title, items, onItemClick, distributed }) => { - const cardList = _.map(items, item => { + const cardList = _.map(items, (item) => { const itemClassNames = classnames(`${baseClass}-item`, `${baseClass}-item-${item.classSuffix}`, { [`${baseClass}-item-distributed`]: distributed, }); diff --git a/src/components/TileGrid/index.spec.jsx b/src/components/TileGrid/index.spec.jsx index 2ffb86df3..90fcf926a 100644 --- a/src/components/TileGrid/index.spec.jsx +++ b/src/components/TileGrid/index.spec.jsx @@ -7,7 +7,10 @@ afterEach(cleanup); describe('', () => { const props = { - items: [{ id: '0', classSuffix: 'alpha', title: 'Alpha' }, { id: '1', classSuffix: 'beta', title: 'Beta' }], + items: [ + { id: '0', classSuffix: 'alpha', title: 'Alpha' }, + { id: '1', classSuffix: 'beta', title: 'Beta' }, + ], onItemClick: jest.fn(), }; @@ -66,7 +69,7 @@ describe('', () => { props.distributed = true; const { queryAllByTestId } = render(); expect(queryAllByTestId('tile-grid-list-item')).toHaveLength(2); - queryAllByTestId('tile-grid-list-item').forEach(item => + queryAllByTestId('tile-grid-list-item').forEach((item) => expect(item).toHaveClass('tile-grid-component-item-distributed') ); }); @@ -79,7 +82,7 @@ describe('', () => { props.items = itemsWithLink; const { queryAllByTestId } = render(); expect(queryAllByTestId('tile-grid-list-item-img-wrapper')).toHaveLength(2); - queryAllByTestId('tile-grid-list-item-img-wrapper').forEach(item => + queryAllByTestId('tile-grid-list-item-img-wrapper').forEach((item) => expect(item).toHaveClass('tile-grid-component-item-img-wrapper') ); }); diff --git a/src/components/Toast/ToastContainer.jsx b/src/components/Toast/ToastContainer.jsx index 09b352fae..7c44bb71d 100644 --- a/src/components/Toast/ToastContainer.jsx +++ b/src/components/Toast/ToastContainer.jsx @@ -5,7 +5,7 @@ import { toastPlacements } from './constants'; import 'react-toastify/dist/ReactToastify.css'; import './styles.scss'; -const ToastContainerComponent = props => ; +const ToastContainerComponent = (props) => ; ToastContainerComponent.propTypes = { /** diff --git a/src/components/Toast/ToastNotification.jsx b/src/components/Toast/ToastNotification.jsx index a22f118e7..f3429b404 100644 --- a/src/components/Toast/ToastNotification.jsx +++ b/src/components/Toast/ToastNotification.jsx @@ -7,7 +7,7 @@ import { toastPlacements } from './constants'; import 'react-toastify/dist/ReactToastify.css'; import './styles.scss'; -const getToastClass = theme => classnames('aui--toast-title', { [`aui--toast-title-${theme}`]: theme }); +const getToastClass = (theme) => classnames('aui--toast-title', { [`aui--toast-title-${theme}`]: theme }); export const ToastMessage = ({ toastClass, title, message }) => ( @@ -18,9 +18,10 @@ export const ToastMessage = ({ toastClass, title, message }) => ( ); -const options = props => _.omit({ className: 'aui--toast-notification-body', ...props }, ['title', 'theme', 'message']); +const options = (props) => + _.omit({ className: 'aui--toast-notification-body', ...props }, ['title', 'theme', 'message']); -const ToastNotificationComponent = props => { +const ToastNotificationComponent = (props) => { const { theme, title, message } = props; const toastClass = getToastClass(theme); diff --git a/src/components/Totals/index.jsx b/src/components/Totals/index.jsx index 1ae63e0e5..79e59929e 100644 --- a/src/components/Totals/index.jsx +++ b/src/components/Totals/index.jsx @@ -40,7 +40,7 @@ Totals.propTypes = { Totals.defaultProps = { toSum: [], - valueFormatter: value => `${value}`, + valueFormatter: (value) => `${value}`, }; export default Totals; diff --git a/src/components/Totals/index.spec.jsx b/src/components/Totals/index.spec.jsx index 65aa9d6b6..ddb14bae0 100644 --- a/src/components/Totals/index.spec.jsx +++ b/src/components/Totals/index.spec.jsx @@ -30,7 +30,7 @@ describe('', () => { { label: 'Custom Paint for Yo Whip', value: 200000 }, { label: 'Selected', value: 50000 }, ], - valueFormatter: value => `€${(value / 100).toFixed(2)}`, + valueFormatter: (value) => `€${(value / 100).toFixed(2)}`, }; const { queryByTestId, queryAllByTestId } = render(); expect(queryByTestId('grid-wrapper')).toBeInTheDocument(); diff --git a/src/components/TreePicker/Grid/index.jsx b/src/components/TreePicker/Grid/index.jsx index ba2981a56..92935520e 100644 --- a/src/components/TreePicker/Grid/index.jsx +++ b/src/components/TreePicker/Grid/index.jsx @@ -48,7 +48,7 @@ const TreePickerGridComponent = ({ {label}
) : null} - {_.map(groupedNodes, node => ( + {_.map(groupedNodes, (node) => ( ', () => { emptySvgSymbol: svgSymbol, emptyText: 'Empty!', expandNode: jest.fn(), - groupFormatter: node => node.id, + groupFormatter: (node) => node.id, includeNode: jest.fn(), itemType, nodes: [qldNode, saNode], @@ -68,7 +68,7 @@ describe('', () => { expect(queryByTestId('grid-wrapper')).toBeInTheDocument(); expect(getByTestId('grid-wrapper').children).toHaveLength(3); expect(queryAllByTestId('treepicker-grid-node-wrapper')).toHaveLength(2); - queryAllByTestId('treepicker-grid-node-wrapper').forEach(group => + queryAllByTestId('treepicker-grid-node-wrapper').forEach((group) => expect(group).toHaveClass('treepickergrid-component-group') ); @@ -100,7 +100,7 @@ describe('', () => { emptySvgSymbol: svgSymbol, emptyText: 'Empty!', expandNode: jest.fn(), - groupFormatter: node => node.randomAttr, + groupFormatter: (node) => node.randomAttr, includeNode: jest.fn(), itemType, nodes: [qldNode], diff --git a/src/components/TreePicker/Nav/index.spec.jsx b/src/components/TreePicker/Nav/index.spec.jsx index 81d5357ce..16005bdb5 100644 --- a/src/components/TreePicker/Nav/index.spec.jsx +++ b/src/components/TreePicker/Nav/index.spec.jsx @@ -7,11 +7,14 @@ const getByClass = queryByAttribute.bind(null, 'class'); const queryAllByClass = queryAllByAttribute.bind(null, 'class'); const testFunction = _.noop; -const breadcrumbNodes = [{ id: 'a', label: 'UK' }, { id: 'b', label: 'London' }]; +const breadcrumbNodes = [ + { id: 'a', label: 'UK' }, + { id: 'b', label: 'London' }, +]; afterEach(cleanup); -const mockProps = overrides => ({ +const mockProps = (overrides) => ({ breadcrumbNodes, breadcrumbOnClick: testFunction, onChange: testFunction, diff --git a/src/components/TreePicker/Node/index.jsx b/src/components/TreePicker/Node/index.jsx index 1e9f2f986..91f7b37d9 100644 --- a/src/components/TreePicker/Node/index.jsx +++ b/src/components/TreePicker/Node/index.jsx @@ -12,17 +12,9 @@ import './styles.scss'; const baseClass = 'treepickernode-component'; -const printPathText = node => - _(node.path) - .map('label') - .clone() - .reverse() - .join(', '); - -const printAncestorText = node => - _(node.ancestors) - .map('label') - .join(', '); +const printPathText = (node) => _(node.path).map('label').clone().reverse().join(', '); + +const printAncestorText = (node) => _(node.ancestors).map('label').join(', '); const pathPrefix = ({ type }) => (_.isEmpty(type) ? '' : `${type} in `); @@ -137,15 +129,15 @@ TreePickerNodeComponent.propTypes = { TreePickerNodeComponent.defaultProps = { disabled: false, - includeNode: node => { + includeNode: (node) => { throw new Error(`AdslotUi TreePickerNode needs an includeNode handler for ${node}`); }, - removeNode: node => { + removeNode: (node) => { throw new Error(`AdslotUi TreePickerNode needs a removeNode handler for ${node}`); }, selected: false, - valueFormatter: value => value, - nodeRenderer: node => node.label, + valueFormatter: (value) => value, + nodeRenderer: (node) => node.label, }; export default TreePickerNodeComponent; diff --git a/src/components/TreePicker/Node/index.spec.jsx b/src/components/TreePicker/Node/index.spec.jsx index e17a80fa2..aa2e5dd87 100644 --- a/src/components/TreePicker/Node/index.spec.jsx +++ b/src/components/TreePicker/Node/index.spec.jsx @@ -101,7 +101,7 @@ describe('', () => { }); it('should filter value when provided', () => { - const valueFormatter = value => `€${value / 100}`; + const valueFormatter = (value) => `€${value / 100}`; const { queryAllByTestId } = render( ); @@ -167,7 +167,7 @@ describe('', () => { it('should fire includeNode when clicking on the `include` button', () => { const nodes = []; - const includeNode = node => nodes.push(node); + const includeNode = (node) => nodes.push(node); const { queryAllByTestId, getByText } = render( ); @@ -178,7 +178,7 @@ describe('', () => { }); it('should error on click of `include` button without includeNode handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; @@ -230,7 +230,7 @@ describe('', () => { it('should fire removeNode when clicking on the `remove` button', () => { const nodes = [cbrNode]; - const removeNode = node => _.remove(nodes, { id: node.id }); + const removeNode = (node) => _.remove(nodes, { id: node.id }); const props = { itemType, node: cbrNode, removeNode, selected: true }; const { queryAllByTestId, getByText, queryByText } = render(); @@ -245,7 +245,7 @@ describe('', () => { }); it('should error on click of `remove` button without removeNode handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; @@ -269,7 +269,7 @@ describe('', () => { }); it('should throw error message when props does not contain `path` or `ancestors`', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const nodeWithoutPathAndAncestors = _.omit(cbrNode, ['path', 'ancestors']); diff --git a/src/components/TreePicker/index.spec.jsx b/src/components/TreePicker/index.spec.jsx index e8ac517e1..d31387a4a 100644 --- a/src/components/TreePicker/index.spec.jsx +++ b/src/components/TreePicker/index.spec.jsx @@ -42,7 +42,7 @@ describe('', () => { expect(queryAllByTestId('split-panel-wrapper')).toHaveLength(2); - getByTestId('treepicker-wrapper').children.forEach(child => expect(child).toHaveClass('splitpane-component')); + getByTestId('treepicker-wrapper').children.forEach((child) => expect(child).toHaveClass('splitpane-component')); expect(queryByTestId('treepicker-nav-wrapper')).toBeInTheDocument(); diff --git a/src/components/TreePicker/mocks.js b/src/components/TreePicker/mocks.js index 9df431467..a4ae37a8a 100644 --- a/src/components/TreePicker/mocks.js +++ b/src/components/TreePicker/mocks.js @@ -73,9 +73,9 @@ const maleNode = { rootTypeId: 'b', }; -const valueFormatter = value => value; +const valueFormatter = (value) => value; -const nodeRenderer = value => `Test value: ${value.label}`; +const nodeRenderer = (value) => `Test value: ${value.label}`; const initialSelection = [actNode, ntNode]; diff --git a/src/components/UserListPicker/index.jsx b/src/components/UserListPicker/index.jsx index 3e8176c19..625115bde 100644 --- a/src/components/UserListPicker/index.jsx +++ b/src/components/UserListPicker/index.jsx @@ -20,7 +20,7 @@ const UserListPickerComponent = ({ userHeaders, users, }) => { - const labelFormatter = user => ( + const labelFormatter = (user) => (
{`${user.givenName} ${user.surname}`} diff --git a/src/components/UserListPicker/index.spec.jsx b/src/components/UserListPicker/index.spec.jsx index 2710ae29b..d14df7aa3 100644 --- a/src/components/UserListPicker/index.spec.jsx +++ b/src/components/UserListPicker/index.spec.jsx @@ -91,7 +91,7 @@ describe('', () => { }); it('should throw when we do not supply apply handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const { queryAllByTestId, getByText } = render(); @@ -105,7 +105,7 @@ describe('', () => { }); it('should throw when we do not supply close handler', () => { - console.error = err => { + console.error = (err) => { throw new Error(err); }; const { getByText } = render(); diff --git a/src/components/VerticalNavigation/index.jsx b/src/components/VerticalNavigation/index.jsx index fb2457fa6..6544b0830 100644 --- a/src/components/VerticalNavigation/index.jsx +++ b/src/components/VerticalNavigation/index.jsx @@ -49,7 +49,7 @@ class VerticalNavigation extends React.Component { return true; } - getActiveTabIndex = children => { + getActiveTabIndex = (children) => { const activeIndex = _.findIndex(children, 'props.isActive'); return activeIndex === -1 ? 0 : activeIndex; }; diff --git a/src/components/VerticalNavigation/index.spec.jsx b/src/components/VerticalNavigation/index.spec.jsx index d09c73867..ab8341f3f 100644 --- a/src/components/VerticalNavigation/index.spec.jsx +++ b/src/components/VerticalNavigation/index.spec.jsx @@ -5,7 +5,7 @@ import VerticalNav from '.'; afterEach(cleanup); describe('', () => { - const makeProps = override => ({ + const makeProps = (override) => ({ collapsable: true, isCollapsed: false, onClick: jest.fn(), @@ -13,7 +13,7 @@ describe('', () => { className: 'custom-class', ...override, }); - const makeMenuItemProps = override => ({ + const makeMenuItemProps = (override) => ({ isActive: false, dts: 'menu-item-dts', content: jest.fn(), @@ -35,7 +35,7 @@ describe('', () => { expect(queryByTestId('vertical-nav-wrapper')).toBeInTheDocument(); expect(getByTestId('vertical-nav-wrapper')).toHaveClass('aui--vertical-navigation-component custom-class'); expect(queryAllByTestId('vertical-nav-menu-item')).toHaveLength(3); // 1 collapse, 2 menu items - queryAllByTestId('vertical-nav-menu-item').forEach(item => + queryAllByTestId('vertical-nav-menu-item').forEach((item) => expect(item).toHaveClass('aui--vertical-navigation-component__menu-item') ); diff --git a/src/components/fastStatelessWrapper/index.jsx b/src/components/fastStatelessWrapper/index.jsx index 823117c7b..dcef2442d 100644 --- a/src/components/fastStatelessWrapper/index.jsx +++ b/src/components/fastStatelessWrapper/index.jsx @@ -14,8 +14,8 @@ import React from 'react'; const fastStatelessWrapper = (ComposedComponent, propsToCheck) => class FastStatelessWrapperComponent extends React.Component { shouldComponentUpdate(nextProps) { - const isEqualProps = toGet => { - const getFromProps = props => _.get(props, toGet); + const isEqualProps = (toGet) => { + const getFromProps = (props) => _.get(props, toGet); return getFromProps(nextProps) === getFromProps(this.props); }; diff --git a/src/lib/utils.js b/src/lib/utils.js index 3d39400d9..772021ede 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -17,12 +17,12 @@ export const classSuffixHelper = ({ classSuffixes, suffixOptions, componentClass if (_.isEmpty(internalSuffixes)) return ''; - return _.map(internalSuffixes, suffix => ` ${componentClass}-${suffix}`).join(''); + return _.map(internalSuffixes, (suffix) => ` ${componentClass}-${suffix}`).join(''); }; // A DTS is an attribute which attaches a selector to a component so E2Es can locate and navigate through the DOM. // expandDts converts a string to an object for ES6 expansion as -export const expandDts = dtsString => (dtsString ? { 'data-test-selector': dtsString } : {}); +export const expandDts = (dtsString) => (dtsString ? { 'data-test-selector': dtsString } : {}); export default { classSuffixHelper, diff --git a/src/prop-types/TreePickerPropTypes.js b/src/prop-types/TreePickerPropTypes.js index 1e7a6aecb..35adcc4cf 100644 --- a/src/prop-types/TreePickerPropTypes.js +++ b/src/prop-types/TreePickerPropTypes.js @@ -7,7 +7,7 @@ const baseNodeProps = { label: PropTypes.string.isRequired, }; -const mergeNodeProps = addedProps => Object.assign({}, baseNodeProps, addedProps); +const mergeNodeProps = (addedProps) => Object.assign({}, baseNodeProps, addedProps); export default { node: PropTypes.shape( diff --git a/www/containers/App.jsx b/www/containers/App.jsx index ac6ebdb9d..9e3e898c8 100644 --- a/www/containers/App.jsx +++ b/www/containers/App.jsx @@ -7,8 +7,8 @@ import CodeBlock from './CodeBlock'; import './styles.scss'; const components = { - pre: props =>
, - code: props => , + pre: (props) =>
, + code: (props) => , }; export class App extends Component { diff --git a/www/containers/Props.jsx b/www/containers/Props.jsx index 226f17c63..af3fe5ffd 100644 --- a/www/containers/Props.jsx +++ b/www/containers/Props.jsx @@ -18,7 +18,7 @@ const Props = ({ componentName, customMapper }) => { componentExports.length === 1 ? componentExports[0] : componentExports.find( - component => + (component) => component.displayName === componentName || component.displayName === componentNameMapper[componentName] ); diff --git a/www/containers/Scaffold.jsx b/www/containers/Scaffold.jsx index b41e8cf7c..98428468c 100644 --- a/www/containers/Scaffold.jsx +++ b/www/containers/Scaffold.jsx @@ -24,7 +24,7 @@ export default function Scaffold() {
- {Object.keys(routes).map(key => ( + {Object.keys(routes).map((key) => ( ))} diff --git a/www/containers/SidePanel.jsx b/www/containers/SidePanel.jsx index c418f8e77..147110d16 100644 --- a/www/containers/SidePanel.jsx +++ b/www/containers/SidePanel.jsx @@ -11,7 +11,7 @@ export class SidePanel extends Component { searchText: '', }; - onSearch = searchText => { + onSearch = (searchText) => { this.setState({ searchText }); }; @@ -24,14 +24,16 @@ export class SidePanel extends Component { {_(groupedRoutes) - .pickBy(components => _.some(_.map(components, entry => new RegExp(searchText, 'gi').test(entry.title)))) + .pickBy((components) => + _.some(_.map(components, (entry) => new RegExp(searchText, 'gi').test(entry.title))) + ) .map((components, key) => ( // eslint-disable-next-line {_(components) .orderBy(key === 'Getting Started' ? null : 'title') - .pickBy(entry => new RegExp(searchText, 'gi').test(entry.title)) - .map(component => ( + .pickBy((entry) => new RegExp(searchText, 'gi').test(entry.title)) + .map((component) => (
`${number} contribution${number > 1 ? 's' : ''}`; +const plural = (number) => `${number} contribution${number > 1 ? 's' : ''}`; const Contributors = () => { const [contributors, setContributors] = React.useState([]); const getContributors = () => { axios .get('https://api.github.com/repos/Adslot/adslot-ui/contributors') - .then(response => response.data) - .then(data => setContributors(data)); + .then((response) => response.data) + .then((data) => setContributors(data)); }; React.useEffect(getContributors, []); const renderContributors = () => - contributors.map(( - { login, avatar_url, contributions } // eslint-disable-line camelcase - ) => ( - - - - )); + contributors.map( + ( + { login, avatar_url, contributions } // eslint-disable-line camelcase + ) => ( + + + + ) + ); const [showContributors, setShowContributors] = React.useState(false); diff --git a/www/containers/components/SearchBar/index.jsx b/www/containers/components/SearchBar/index.jsx index 32f3e2d54..1bb538aea 100644 --- a/www/containers/components/SearchBar/index.jsx +++ b/www/containers/components/SearchBar/index.jsx @@ -4,7 +4,7 @@ import { Search } from '../../../../src'; import './styles.scss'; const SearchBarComponent = ({ onSearch }) => ( - onSearch(value.trim())} /> + onSearch(value.trim())} /> ); SearchBarComponent.propTypes = { diff --git a/www/examples/AlertInput.mdx b/www/examples/AlertInput.mdx index a8b144005..be71664fc 100644 --- a/www/examples/AlertInput.mdx +++ b/www/examples/AlertInput.mdx @@ -59,7 +59,7 @@ class Example extends React.Component { suffixAddon="impressions" alertStatus={this.state.status} alertMessage={this.state.message} - onValueChange={event => this.changeValue(event.target.value)} + onValueChange={(event) => this.changeValue(event.target.value)} /> ); } diff --git a/www/examples/Card.mdx b/www/examples/Card.mdx index 183295ae7..50329a2d4 100644 --- a/www/examples/Card.mdx +++ b/www/examples/Card.mdx @@ -27,9 +27,9 @@ import DesignNotes from '../containers/DesignNotes.jsx'; ### Card.Container - [props[`src/components/Card/index.jsx`][1]]} /> + [props[`src/components/Card/index.jsx`][1]]} />
### Card.Content - [props[`src/components/Card/index.jsx`][0]]} /> + [props[`src/components/Card/index.jsx`][0]]} /> diff --git a/www/examples/DatePicker.mdx b/www/examples/DatePicker.mdx index 54e0d46f2..b8b75c739 100644 --- a/www/examples/DatePicker.mdx +++ b/www/examples/DatePicker.mdx @@ -6,7 +6,7 @@ import DesignNotes from '../containers/DesignNotes.jsx'; ```jsx live=true const Example = () => { const [startDate, setStartDate] = React.useState(moment()); - const handleChange = startDate => setStartDate(startDate); + const handleChange = (startDate) => setStartDate(startDate); return ( props[`src/components/Grid/Row/index.jsx`]} /> + props[`src/components/Grid/Row/index.jsx`]} /> ### Grid.Cell - props[`src/components/Grid/Cell/index.jsx`]} /> + props[`src/components/Grid/Cell/index.jsx`]} /> diff --git a/www/examples/HoverDropdownMenu.mdx b/www/examples/HoverDropdownMenu.mdx index 2ea383f34..97eda0db7 100644 --- a/www/examples/HoverDropdownMenu.mdx +++ b/www/examples/HoverDropdownMenu.mdx @@ -33,7 +33,7 @@ class Example extends React.PureComponent { <>
Hover the avatar below
- {_.map(links, link => ( + {_.map(links, (link) => ( ))} diff --git a/www/examples/ImageCropper.mdx b/www/examples/ImageCropper.mdx index 066060207..4a0f131da 100644 --- a/www/examples/ImageCropper.mdx +++ b/www/examples/ImageCropper.mdx @@ -5,7 +5,7 @@ import Props from '../containers/Props.jsx'; ```jsx live=true const Example = () => { const [data, setData] = React.useState(''); - const onCrop = value => setData(JSON.stringify(value)); + const onCrop = (value) => setData(JSON.stringify(value)); return ( <> diff --git a/www/examples/ListPicker.mdx b/www/examples/ListPicker.mdx index 7bd1980f7..b3e1eb0d4 100644 --- a/www/examples/ListPicker.mdx +++ b/www/examples/ListPicker.mdx @@ -16,7 +16,7 @@ const UncontrolledCheckbox = () => { return setChecked(!checked)} />; }; -const labelFormatter = item => `${item.givenName} ${item.surname}`; +const labelFormatter = (item) => `${item.givenName} ${item.surname}`; const addonFormatter = () => ; const listPickerItemHeaders = { diff --git a/www/examples/OverlayLoader.mdx b/www/examples/OverlayLoader.mdx index 2add7ae3d..ed6ca8b2a 100644 --- a/www/examples/OverlayLoader.mdx +++ b/www/examples/OverlayLoader.mdx @@ -7,7 +7,7 @@ import DesignNotes from '../containers/DesignNotes.jsx'; const Example = () => { const [showLoader, setShowLoader] = React.useState(false); - const handleKeyPress = event => { + const handleKeyPress = (event) => { if (event.keyCode === 27) { toggleDisabledLoader(); } diff --git a/www/examples/Pagination.mdx b/www/examples/Pagination.mdx index e7b5cdcbf..d0f63e9f7 100644 --- a/www/examples/Pagination.mdx +++ b/www/examples/Pagination.mdx @@ -6,7 +6,7 @@ import DesignNotes from '../containers/DesignNotes.jsx'; ```jsx live=true const Example = () => { const [activePage, setActivePage] = React.useState(1); - const onSelect = pageNumber => setActivePage(pageNumber); + const onSelect = (pageNumber) => setActivePage(pageNumber); const props = { pageCount: 10, diff --git a/www/examples/Popover.mdx b/www/examples/Popover.mdx index 719fb9628..5242646d8 100644 --- a/www/examples/Popover.mdx +++ b/www/examples/Popover.mdx @@ -27,7 +27,7 @@ import { popoverPlacements, themes } from '../../src/components/Popover/constant

There might be use cases where the element which will display the popover will be decided on the fly.

-We support the implementation of dynamic popovers via Popover.WithRef + We support the implementation of dynamic popovers via Popover.WithRef

```jsx live=true diff --git a/www/examples/RadioGroup.mdx b/www/examples/RadioGroup.mdx index 681ba594e..9970975ba 100644 --- a/www/examples/RadioGroup.mdx +++ b/www/examples/RadioGroup.mdx @@ -5,7 +5,7 @@ import Props from '../containers/Props.jsx'; ```jsx live=true const Example = () => { const [hobbies, setHobbies] = React.useState('badminton'); - const handleGroupChange = value => setHobbies(value); + const handleGroupChange = (value) => setHobbies(value); return ( <> diff --git a/www/examples/RichTextEditor.mdx b/www/examples/RichTextEditor.mdx index 4fb834aca..fc0fe01fd 100644 --- a/www/examples/RichTextEditor.mdx +++ b/www/examples/RichTextEditor.mdx @@ -40,7 +40,7 @@ const Example = () => { <>
setState(RichTextEditor.stateToHTML(output))} + onChange={(output) => setState(RichTextEditor.stateToHTML(output))} placeholder="Custom placeholder" />
diff --git a/www/examples/Search.mdx b/www/examples/Search.mdx index 608d2f5dc..b371761ed 100644 --- a/www/examples/Search.mdx +++ b/www/examples/Search.mdx @@ -10,7 +10,7 @@ const Example = () => { const [searchOnEnterKeyLoading, setSearchOnEnterKeyLoading] = React.useState(false); const [searchInput, showSearchInput] = React.useState(false); - const onChange = value => { + const onChange = (value) => { setValue(value); }; @@ -23,7 +23,7 @@ const Example = () => { setTimeout(() => setSearchOnInputChangeLoading(false), 950); }; - const searchOnEnterKey = value => { + const searchOnEnterKey = (value) => { setSearchOnEnterKeyLoading(true); setTimeout(() => { setSearchOnEnterKeyLoading(false); diff --git a/www/examples/Select.mdx b/www/examples/Select.mdx index 9e4104fc2..b6e5f51fd 100644 --- a/www/examples/Select.mdx +++ b/www/examples/Select.mdx @@ -14,7 +14,7 @@ const countryOptions = [ const Example = () => { const [selected, setSelected] = React.useState(''); - const onChangeHandler = value => { + const onChangeHandler = (value) => { setSelected(value); }; diff --git a/www/examples/Skeleton.mdx b/www/examples/Skeleton.mdx index 152fae150..a46ae1ba9 100644 --- a/www/examples/Skeleton.mdx +++ b/www/examples/Skeleton.mdx @@ -26,7 +26,8 @@ render(Example);

- Skeleton provides a layout for loading state with a aesthetic placeholder and animation. + Skeleton provides a layout for loading state with a aesthetic placeholder and + animation.

It could be used when loading data like text, images and avatar.

 diff --git a/www/examples/Slicey.mdx b/www/examples/Slicey.mdx index bfd567a8c..1e5a2c89d 100644 --- a/www/examples/Slicey.mdx +++ b/www/examples/Slicey.mdx @@ -4,7 +4,11 @@ import Props from '../containers/Props.jsx'; ```jsx live=true ``` diff --git a/www/examples/Switch.mdx b/www/examples/Switch.mdx index df89b5252..079aef793 100644 --- a/www/examples/Switch.mdx +++ b/www/examples/Switch.mdx @@ -5,7 +5,7 @@ import Props from '../containers/Props.jsx'; ```jsx live=true const Example = () => { const [isToggleOn, setIsToggleOn] = React.useState(true); - const onChange = newValue => setIsToggleOn(newValue); + const onChange = (newValue) => setIsToggleOn(newValue); return ( <> diff --git a/www/examples/Tab.mdx b/www/examples/Tab.mdx index 27c756013..f69bc5d20 100644 --- a/www/examples/Tab.mdx +++ b/www/examples/Tab.mdx @@ -6,7 +6,7 @@ import DesignNotes from '../containers/DesignNotes.jsx'; ```jsx live=true const Example = () => { const [activeTab, setActiveTab] = React.useState('Audience'); - const switchTab = tabKey => setActiveTab(tabKey); + const switchTab = (tabKey) => setActiveTab(tabKey); return ( diff --git a/www/examples/Tag.mdx b/www/examples/Tag.mdx index e43744948..08a792c67 100644 --- a/www/examples/Tag.mdx +++ b/www/examples/Tag.mdx @@ -33,7 +33,7 @@ const Example = () => { } function deleteTag(tagIdToDelete) { - setTags(_.reject(tags, tag => tag.id === tagIdToDelete)); + setTags(_.reject(tags, (tag) => tag.id === tagIdToDelete)); } if (_.isEmpty(tags)) { @@ -46,7 +46,7 @@ const Example = () => { return (
- {_.map(tags, tag => ( + {_.map(tags, (tag) => ( {
- {_.map(items, item => ( + {_.map(items, (item) => ( ))} diff --git a/www/examples/TreePicker.mdx b/www/examples/TreePicker.mdx index 3d927db39..2a8f0061f 100644 --- a/www/examples/TreePicker.mdx +++ b/www/examples/TreePicker.mdx @@ -89,12 +89,12 @@ const Example = () => { searchValue={pickerSearchValue} onChange={setPickerSearchValue} searchOnClear={() => setPickerSearchValue('')} - includeNode={node => setSelectedNodes(_.concat([], selectedNodes, node))} - removeNode={node => setSelectedNodes(_.reject(selectedNodes, { id: node.id }))} + includeNode={(node) => setSelectedNodes(_.concat([], selectedNodes, node))} + removeNode={(node) => setSelectedNodes(_.reject(selectedNodes, { id: node.id }))} additionalClassNames={pickerSearchValue ? undefined : ['background-highlighted', 'test-class']} selectedTopSearch={
- setSelectedSearchValue(selectedSearchValue)} /> + setSelectedSearchValue(selectedSearchValue)} />
} /> diff --git a/www/examples/UserListPicker.mdx b/www/examples/UserListPicker.mdx index ae5061f56..fdfe3ede2 100644 --- a/www/examples/UserListPicker.mdx +++ b/www/examples/UserListPicker.mdx @@ -4,7 +4,7 @@ import DesignNotes from '../containers/DesignNotes.jsx'; ## User List Picker ```jsx live=true -const avatarColor = user => (user.avatar ? '' : 'cyan'); +const avatarColor = (user) => (user.avatar ? '' : 'cyan'); const emptySvgSymbol = ; const teamMember1 = { avatar: '../assets/user-avatar.jpeg', diff --git a/www/examples/VerticalNavigation.mdx b/www/examples/VerticalNavigation.mdx index 93f056a82..3e1ee9bec 100644 --- a/www/examples/VerticalNavigation.mdx +++ b/www/examples/VerticalNavigation.mdx @@ -50,7 +50,7 @@ const Example = () => { const handleCollapse = () => { setIsCollapsed(!isCollapsed); }; - const handleMenuClick = tabName => () => { + const handleMenuClick = (tabName) => () => { setActiveTab(tabName); };