From f8305512e41b29259de84439dab55912bf5d8a33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= Date: Thu, 3 Oct 2024 09:06:00 +0200 Subject: [PATCH] fix: use rc-dropdown and svg icons instead of antd --- package-lock.json | 142 ++++++++++++++++-- package.json | 3 +- src/components/InfiniteTable/ITOptsButton.tsx | 68 ++++++--- .../InfiniteTable/icons/MoreIcon.tsx | 22 +++ .../InfiniteTable/icons/RedoIcon.tsx | 23 +++ 5 files changed, 223 insertions(+), 35 deletions(-) create mode 100644 src/components/InfiniteTable/icons/MoreIcon.tsx create mode 100644 src/components/InfiniteTable/icons/RedoIcon.tsx diff --git a/package-lock.json b/package-lock.json index ef4af64..8a7ba11 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,9 @@ "dependencies": { "ag-grid-community": "^31.2.1", "ag-grid-react": "^31.2.1", - "antd": "^5.13.1", "dequal": "^2.0.3", "lodash.debounce": "^4.0.8", + "rc-dropdown": "^4.2.0", "react": "18.2.0", "react-dom": "18.2.0", "style-object-to-css-string": "^1.1.3", @@ -42,6 +42,7 @@ "@typescript-eslint/eslint-plugin": "5.59.0", "@typescript-eslint/parser": "5.59.0", "@vitejs/plugin-react-swc": "3.3.2", + "antd": "^5.13.1", "concurrently": "8.2.0", "eslint": "8.51.0", "eslint-config-prettier": "8.5.0", @@ -103,6 +104,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.1.0.tgz", "integrity": "sha512-MMoDGWn1y9LdQJQSHiCC20x3uZ3CwQnv9QMz6pCmJOrqdgM9YxsoVVY0wtrdXbmfSgnV0KNk6zi09NAhMR2jvg==", + "dev": true, "dependencies": { "@ctrl/tinycolor": "^3.6.1" } @@ -111,6 +113,7 @@ "version": "1.21.1", "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.21.1.tgz", "integrity": "sha512-tyWnlK+XH7Bumd0byfbCiZNK43HEubMoCcu9VxwsAwiHdHTgWa+tMN0/yvxa+e8EzuFP1WdUNNPclRpVtD33lg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.1", "@emotion/hash": "^0.8.0", @@ -129,6 +132,7 @@ "version": "5.2.6", "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.6.tgz", "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==", + "dev": true, "dependencies": { "@ant-design/colors": "^7.0.0", "@ant-design/icons-svg": "^4.3.0", @@ -147,12 +151,14 @@ "node_modules/@ant-design/icons-svg": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz", - "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==" + "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g==", + "dev": true }, "node_modules/@ant-design/react-slick": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz", "integrity": "sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.4", "classnames": "^2.2.5", @@ -2617,6 +2623,7 @@ "version": "3.6.1", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==", + "dev": true, "engines": { "node": ">=10" } @@ -2639,7 +2646,8 @@ "node_modules/@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", - "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "dev": true }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.1", @@ -4493,6 +4501,7 @@ "version": "1.5.3", "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.5.3.tgz", "integrity": "sha512-+tGGH3nLmYXTalVe0L8hSZNs73VTP5ueSHwUlDC77KKRaN7G4DS4wcpG5DTDzdcV/Yas+rzA6UGgIyzd8fS4cw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.23.6", "@ctrl/tinycolor": "^3.6.1", @@ -4508,6 +4517,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz", "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "rc-util": "^5.27.0" @@ -4521,6 +4531,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz", "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.18.0" }, @@ -4532,6 +4543,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz", "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.18.0", "classnames": "^2.3.2", @@ -4566,6 +4578,7 @@ "version": "1.12.3", "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.12.3.tgz", "integrity": "sha512-U4mf1FiUxGCwrX4ed8op77Y8VKur+8Y/61ylxtqGbcSoh1EBC7bWd/DkLu0ClTUrKZInqEi1FL7YgFtnT90vHA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.18.0", "@rc-component/portal": "^1.0.0-9", @@ -4585,6 +4598,7 @@ "version": "1.18.2", "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.2.tgz", "integrity": "sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.23.2", "@rc-component/portal": "^1.1.0", @@ -8304,6 +8318,7 @@ "version": "5.13.1", "resolved": "https://registry.npmjs.org/antd/-/antd-5.13.1.tgz", "integrity": "sha512-/qAPsr6UyJPSFZQD9G7kW98GelH2Bajli+1q7CRW4IinYQ0R0UVJckFX11emByhiU4Jd4WNH/hOO+fZtp0eVDA==", + "dev": true, "dependencies": { "@ant-design/colors": "^7.0.2", "@ant-design/cssinjs": "^1.18.2", @@ -8362,6 +8377,22 @@ "react-dom": ">=16.9.0" } }, + "node_modules/antd/node_modules/rc-dropdown": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz", + "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@rc-component/trigger": "^1.7.0", + "classnames": "^2.2.6", + "rc-util": "^5.17.0" + }, + "peerDependencies": { + "react": ">=16.11.0", + "react-dom": ">=16.11.0" + } + }, "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", @@ -8467,7 +8498,8 @@ "node_modules/array-tree-filter": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz", - "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==" + "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==", + "dev": true }, "node_modules/array-union": { "version": "2.1.0", @@ -8634,7 +8666,8 @@ "node_modules/async-validator": { "version": "4.2.5", "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz", - "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==" + "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==", + "dev": true }, "node_modules/asynckit": { "version": "0.4.0", @@ -9557,7 +9590,8 @@ "node_modules/compute-scroll-into-view": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz", - "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==" + "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==", + "dev": true }, "node_modules/computeds": { "version": "0.0.1", @@ -9776,6 +9810,7 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz", "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==", + "dev": true, "dependencies": { "toggle-selection": "^1.0.6" } @@ -9910,7 +9945,8 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true }, "node_modules/dargs": { "version": "7.0.0", @@ -9925,7 +9961,7 @@ "version": "2.30.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "devOptional": true, + "dev": true, "dependencies": { "@babel/runtime": "^7.21.0" }, @@ -9949,7 +9985,8 @@ "node_modules/dayjs": { "version": "1.11.10", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", - "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==" + "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==", + "dev": true }, "node_modules/de-indent": { "version": "1.0.2", @@ -13629,6 +13666,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dev": true, "dependencies": { "string-convert": "^0.2.0" } @@ -19264,6 +19302,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz", "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==", + "dev": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } @@ -19365,6 +19404,7 @@ "version": "3.21.2", "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.21.2.tgz", "integrity": "sha512-J7GozpgsLaOtzfIHFJFuh4oFY0ePb1w10twqK6is3pAkqHkca/PsokbDr822KIRZ8/CK8CqevxohuPDVZ1RO/A==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", "array-tree-filter": "^2.1.0", @@ -19382,6 +19422,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.1.0.tgz", "integrity": "sha512-PAwpJFnBa3Ei+5pyqMMXdcKYKNBMS+TvSDiLdDnARnMJHC8ESxwPfm4Ao1gJiKtWLdmGfigascnCpwrHFgoOBQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.3.2", @@ -19396,6 +19437,7 @@ "version": "3.7.2", "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.7.2.tgz", "integrity": "sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", @@ -19411,6 +19453,7 @@ "version": "9.3.4", "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz", "integrity": "sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/portal": "^1.0.0-8", @@ -19427,6 +19470,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-7.0.0.tgz", "integrity": "sha512-ePcS4KtQnn57bCbVXazHN2iC8nTPCXlWEIA/Pft87Pd9U7ZeDkdRzG47jWG2/TAFXFlFltRAMcslqmUM8NPCGA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/portal": "^1.1.1", @@ -19440,12 +19484,12 @@ } }, "node_modules/rc-dropdown": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz", - "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.2.0.tgz", + "integrity": "sha512-odM8Ove+gSh0zU27DUj5cG1gNKg7mLWBYzB5E4nNLrLwBmYEgYP43vHKDGOVZcJSVElQBI0+jTQgjnq0NfLjng==", "dependencies": { "@babel/runtime": "^7.18.3", - "@rc-component/trigger": "^1.7.0", + "@rc-component/trigger": "^2.0.0", "classnames": "^2.2.6", "rc-util": "^5.17.0" }, @@ -19454,10 +19498,31 @@ "react-dom": ">=16.11.0" } }, + "node_modules/rc-dropdown/node_modules/@rc-component/trigger": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-2.2.3.tgz", + "integrity": "sha512-X1oFIpKoXAMXNDYCviOmTfuNuYxE4h5laBsyCqVAVMjNHxoF3/uiyA7XdegK1XbCvBbCZ6P6byWrEoDRpKL8+A==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "@rc-component/portal": "^1.1.0", + "classnames": "^2.3.2", + "rc-motion": "^2.0.0", + "rc-resize-observer": "^1.3.1", + "rc-util": "^5.38.0" + }, + "engines": { + "node": ">=8.x" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, "node_modules/rc-field-form": { "version": "1.41.0", "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.41.0.tgz", "integrity": "sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.18.0", "async-validator": "^4.1.0", @@ -19475,6 +19540,7 @@ "version": "7.5.1", "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.5.1.tgz", "integrity": "sha512-Z9loECh92SQp0nSipc0MBuf5+yVC05H/pzC+Nf8xw1BKDFUJzUeehYBjaWlxly8VGBZJcTHYri61Fz9ng1G3Ag==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.2", "@rc-component/portal": "^1.0.2", @@ -19492,6 +19558,7 @@ "version": "1.4.5", "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.4.5.tgz", "integrity": "sha512-AjzykhwnwYTRSwwgCu70CGKBIAv6bP2nqnFptnNTprph/TF1BAs0Qxl91mie/BR6n827WIJB6ZjaRf9iiMwAfw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", @@ -19506,6 +19573,7 @@ "version": "8.6.1", "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.6.1.tgz", "integrity": "sha512-gaAMUKtUKLktJ3Yx93tjgYY1M0HunnoqzPEqkb9//Ydup4DcG0TFL9yHBA3pgVdNIt5f0UWyHCgFBj//JxeD6A==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/mini-decimal": "^1.0.1", @@ -19522,6 +19590,7 @@ "version": "2.10.1", "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.10.1.tgz", "integrity": "sha512-72qsEcr/7su+a07ndJ1j8rI9n0Ka/ngWOLYnWMMv0p2mi/5zPwPrEDTt6Uqpe8FWjWhueDJx/vzunL6IdKDYMg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.22.5", "@rc-component/trigger": "^1.5.0", @@ -19540,6 +19609,7 @@ "version": "9.12.4", "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.12.4.tgz", "integrity": "sha512-t2NcvPLV1mFJzw4F21ojOoRVofK2rWhpKPx69q2raUsiHPDP6DDevsBILEYdsIegqBeSXoWs2bf6CueBKg3BFg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/trigger": "^1.17.0", @@ -19571,6 +19641,7 @@ "version": "5.3.0", "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.3.0.tgz", "integrity": "sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", @@ -19589,6 +19660,7 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz", "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", @@ -19604,6 +19676,7 @@ "version": "4.0.4", "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-4.0.4.tgz", "integrity": "sha512-GGrLT4NgG6wgJpT/hHIpL9nELv27A1XbSZzECIuQBQTVSf4xGKxWr6I/jhpRPauYEWEbWVw22ObG6tJQqwJqWQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.3.2", @@ -19618,6 +19691,7 @@ "version": "3.14.6", "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.14.6.tgz", "integrity": "sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/trigger": "^1.5.0", @@ -19654,6 +19728,7 @@ "version": "3.5.1", "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.5.1.tgz", "integrity": "sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.6", @@ -19668,6 +19743,7 @@ "version": "2.12.0", "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.12.0.tgz", "integrity": "sha512-g092v5iZCdVzbjdn28FzvWebK2IutoVoiTeqoLTj9WM7SjA/gOJIw5/JFZMRyJYYVe1jLAU2UhAfstIpCNRozg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.5", @@ -19700,6 +19776,7 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.2.2.tgz", "integrity": "sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.1", "classnames": "^2.2.1", @@ -19715,6 +19792,7 @@ "version": "14.11.0", "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.11.0.tgz", "integrity": "sha512-8J8G/7duaGjFiTXCBLWfh5P+KDWyA3KTlZDfV3xj/asMPqB2cmxfM+lH50wRiPIRsCQ6EbkCFBccPuaje3DHIg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/trigger": "^1.5.0", @@ -19736,6 +19814,7 @@ "version": "10.5.0", "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.5.0.tgz", "integrity": "sha512-xiYght50cvoODZYI43v3Ylsqiw14+D7ELsgzR40boDZaya1HFa1Etnv9MDkQE8X/UrXAffwv2AcNAhslgYuDTw==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.5", @@ -19753,6 +19832,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz", "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==", + "dev": true, "dependencies": { "@babel/runtime": "^7.16.7", "classnames": "^2.2.3", @@ -19770,6 +19850,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz", "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.21.0", "classnames": "^2.2.1", @@ -19784,6 +19865,7 @@ "version": "7.37.0", "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.37.0.tgz", "integrity": "sha512-hEB17ktLRVfVmdo+U8MjGr+PuIgdQ8Cxj/N5lwMvP/Az7TOrQxwTMLVEDoj207tyPYLTWifHIF9EJREWwyk67g==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "@rc-component/context": "^1.4.0", @@ -19804,6 +19886,7 @@ "version": "14.0.0", "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-14.0.0.tgz", "integrity": "sha512-lp1YWkaPnjlyhOZCPrAWxK6/P6nMGX/BAZcAC3nuVwKz0Byfp+vNnQKK8BRCP2g/fzu+SeB5dm9aUigRu3tRkQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.2", "classnames": "2.x", @@ -19821,10 +19904,27 @@ "react-dom": ">=16.9.0" } }, + "node_modules/rc-tabs/node_modules/rc-dropdown": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz", + "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.18.3", + "@rc-component/trigger": "^1.7.0", + "classnames": "^2.2.6", + "rc-util": "^5.17.0" + }, + "peerDependencies": { + "react": ">=16.11.0", + "react-dom": ">=16.11.0" + } + }, "node_modules/rc-textarea": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.6.3.tgz", "integrity": "sha512-8k7+8Y2GJ/cQLiClFMg8kUXOOdvcFQrnGeSchOvI2ZMIVvX5a3zQpLxoODL0HTrvU63fPkRmMuqaEcOF9dQemA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.2.1", @@ -19841,6 +19941,7 @@ "version": "6.1.3", "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.1.3.tgz", "integrity": "sha512-HMSbSs5oieZ7XddtINUddBLSVgsnlaSb3bZrzzGWjXa7/B7nNedmsuz72s7EWFEro9mNa7RyF3gOXKYqvJiTcQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.11.2", "@rc-component/trigger": "^1.18.0", @@ -19855,6 +19956,7 @@ "version": "5.8.8", "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.8.tgz", "integrity": "sha512-S+mCMWo91m5AJqjz3PdzKilGgbFm7fFJRFiTDOcoRbD7UfMOPnerXwMworiga0O2XIo383UoWuEfeHs1WOltag==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", @@ -19874,6 +19976,7 @@ "version": "5.17.0", "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.17.0.tgz", "integrity": "sha512-7sRGafswBhf7n6IuHyCEFCildwQIgyKiV8zfYyUoWfZEFdhuk7lCH+DN0aHt+oJrdiY9+6Io/LDXloGe01O8XQ==", + "dev": true, "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", @@ -19890,6 +19993,7 @@ "version": "4.5.2", "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.5.2.tgz", "integrity": "sha512-QO3ne77DwnAPKFn0bA5qJM81QBjQi0e0NHdkvpFyY73Bea2NfITiotqJqVjHgeYPOJu5lLVR32TNGP084aSoXA==", + "dev": true, "dependencies": { "@babel/runtime": "^7.18.3", "classnames": "^2.2.5", @@ -19917,6 +20021,7 @@ "version": "3.14.8", "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.14.8.tgz", "integrity": "sha512-8D0KfzpRYi6YZvlOWIxiOm9BGt4Wf2hQyEaM6RXlDDiY2NhLheuYI+RA+7ZaZj1lq+XQqy3KHlaeeXQfzI5fGg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.20.0", "classnames": "^2.2.6", @@ -20833,6 +20938,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz", "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==", + "dev": true, "dependencies": { "compute-scroll-into-view": "^3.0.2" } @@ -21671,7 +21777,8 @@ "node_modules/string-convert": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", - "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==", + "dev": true }, "node_modules/string-width": { "version": "5.1.2", @@ -21936,7 +22043,8 @@ "node_modules/stylis": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.4.tgz", - "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==" + "integrity": "sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==", + "dev": true }, "node_modules/sucrase": { "version": "3.34.0", @@ -22271,6 +22379,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz", "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==", + "dev": true, "engines": { "node": ">=12.22" } @@ -22341,7 +22450,8 @@ "node_modules/toggle-selection": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", - "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==" + "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==", + "dev": true }, "node_modules/toidentifier": { "version": "1.0.1", diff --git a/package.json b/package.json index c37d755..ff55860 100644 --- a/package.json +++ b/package.json @@ -36,9 +36,9 @@ "dependencies": { "ag-grid-community": "^31.2.1", "ag-grid-react": "^31.2.1", - "antd": "^5.13.1", "dequal": "^2.0.3", "lodash.debounce": "^4.0.8", + "rc-dropdown": "^4.2.0", "react": "18.2.0", "react-dom": "18.2.0", "style-object-to-css-string": "^1.1.3", @@ -68,6 +68,7 @@ "@typescript-eslint/eslint-plugin": "5.59.0", "@typescript-eslint/parser": "5.59.0", "@vitejs/plugin-react-swc": "3.3.2", + "antd": "^5.13.1", "concurrently": "8.2.0", "eslint": "8.51.0", "eslint-config-prettier": "8.5.0", diff --git a/src/components/InfiniteTable/ITOptsButton.tsx b/src/components/InfiniteTable/ITOptsButton.tsx index 8dc95b8..d5eea84 100644 --- a/src/components/InfiniteTable/ITOptsButton.tsx +++ b/src/components/InfiniteTable/ITOptsButton.tsx @@ -1,5 +1,34 @@ -import { Dropdown, MenuProps } from "antd"; -import { RedoOutlined, MoreOutlined } from "@ant-design/icons"; +import Dropdown from "rc-dropdown"; +import Menu, { Item as MenuItem } from "rc-menu"; +import "rc-dropdown/assets/index.css"; +import styled from "styled-components"; +import { MoreIcon } from "./icons/MoreIcon"; +import { RedoIcon } from "./icons/RedoIcon"; + +const StyledMenuItem = styled(MenuItem)` + padding: 7px 10px !important; + cursor: pointer; + font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, + Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + display: flex; + align-items: center; + gap: 8px; + + &:hover { + background-color: #f0f0f0; + } +`; + +const StyledMoreOutlined = styled(MoreIcon)` + font-size: 1.5em; + cursor: pointer; + color: #000000; +`; + +const StyledRedoIcon = styled(RedoIcon)` + font-size: 12px; + flex-shrink: 0; +`; export type ITOptsButtonProps = { onResetTableView: () => void; @@ -10,28 +39,31 @@ export const ITOptsButton = ({ onResetTableView, resetTableViewLabel, }: ITOptsButtonProps) => { - const handleMenuClick: MenuProps["onClick"] = (e) => { - if (e.key === "1") { + const handleMenuClick = ({ key }: { key: string }) => { + if (key === "1") { onResetTableView(); } }; - const menuItems = [ - { - key: "1", - icon: , - label: resetTableViewLabel, - }, - ]; - - const menu: MenuProps = { - items: menuItems, - onClick: handleMenuClick, - }; + const menu = ( + + + + {resetTableViewLabel} + + + ); return ( - - + +
+ +
); }; diff --git a/src/components/InfiniteTable/icons/MoreIcon.tsx b/src/components/InfiniteTable/icons/MoreIcon.tsx new file mode 100644 index 0000000..ed1615d --- /dev/null +++ b/src/components/InfiniteTable/icons/MoreIcon.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +export const MoreIcon = (props: React.SVGProps) => { + return ( + + + + + + + ); +}; diff --git a/src/components/InfiniteTable/icons/RedoIcon.tsx b/src/components/InfiniteTable/icons/RedoIcon.tsx new file mode 100644 index 0000000..75723bd --- /dev/null +++ b/src/components/InfiniteTable/icons/RedoIcon.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; + +export function RedoIcon(props: React.SVGProps) { + return ( + + + + + + ); +}