From 71a010d5d772759d184d451777b8a81967b2589d Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 16 Feb 2022 20:07:10 +0100 Subject: [PATCH 1/2] Replaced rect-color with react-colorful --- package-lock.json | 103 +++--------------------- package.json | 2 +- src/tags/helpers/EditTagModal.scss | 4 + src/tags/helpers/EditTagModal.tsx | 13 ++- test/tags/helpers/EditTagModal.test.tsx | 8 +- 5 files changed, 31 insertions(+), 99 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb98f706..c42eb6e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "ramda": "^0.27.1", "react": "^17.0.1", "react-chartjs-2": "^3.0.4", - "react-color": "^2.19.3", + "react-colorful": "^5.5.1", "react-copy-to-clipboard": "^5.0.2", "react-datepicker": "^3.6.0", "react-dom": "^17.0.1", @@ -2567,14 +2567,6 @@ "react": ">=0.14.0" } }, - "node_modules/@icons/material": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "peerDependencies": { - "react": "*" - } - }, "node_modules/@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -18664,11 +18656,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "node_modules/lodash-es": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", - "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" - }, "node_modules/lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -18997,11 +18984,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "node_modules/mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -26503,21 +26485,13 @@ "react": "^16.8.0 || ^17.0.0" } }, - "node_modules/react-color": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", - "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", - "dependencies": { - "@icons/material": "^0.2.4", - "lodash": "^4.17.15", - "lodash-es": "^4.17.15", - "material-colors": "^1.2.1", - "prop-types": "^15.5.10", - "reactcss": "^1.2.0", - "tinycolor2": "^1.4.1" - }, + "node_modules/react-colorful": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", + "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", "peerDependencies": { - "react": "*" + "react": ">=16.8.0", + "react-dom": ">=16.8.0" } }, "node_modules/react-copy-to-clipboard": { @@ -26989,14 +26963,6 @@ "react-dom": ">=15.0.0" } }, - "node_modules/reactcss": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", - "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "dependencies": { - "lodash": "^4.0.1" - } - }, "node_modules/reactstrap": { "version": "8.9.0", "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz", @@ -31626,14 +31592,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, - "node_modules/tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", - "engines": { - "node": "*" - } - }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz", @@ -36622,12 +36580,6 @@ "warning": "^4.0.3" } }, - "@icons/material": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", - "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "requires": {} - }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -49128,11 +49080,6 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, - "lodash-es": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", - "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" - }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -49406,11 +49353,6 @@ "repeat-string": "^1.0.0" } }, - "material-colors": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", - "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" - }, "mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", @@ -55346,19 +55288,11 @@ "lodash": "^4.17.19" } }, - "react-color": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", - "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", - "requires": { - "@icons/material": "^0.2.4", - "lodash": "^4.17.15", - "lodash-es": "^4.17.15", - "material-colors": "^1.2.1", - "prop-types": "^15.5.10", - "reactcss": "^1.2.0", - "tinycolor2": "^1.4.1" - } + "react-colorful": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", + "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", + "requires": {} }, "react-copy-to-clipboard": { "version": "5.0.2", @@ -55710,14 +55644,6 @@ "react-lifecycles-compat": "^3.0.4" } }, - "reactcss": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", - "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", - "requires": { - "lodash": "^4.0.1" - } - }, "reactstrap": { "version": "8.9.0", "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz", @@ -59307,11 +59233,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, - "tinycolor2": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", - "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" - }, "tmp": { "version": "0.0.33", "resolved": "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 3d4c6102..f05f55e3 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "ramda": "^0.27.1", "react": "^17.0.1", "react-chartjs-2": "^3.0.4", - "react-color": "^2.19.3", + "react-colorful": "^5.5.1", "react-copy-to-clipboard": "^5.0.2", "react-datepicker": "^3.6.0", "react-dom": "^17.0.1", diff --git a/src/tags/helpers/EditTagModal.scss b/src/tags/helpers/EditTagModal.scss index 29bc4308..df8f2d19 100644 --- a/src/tags/helpers/EditTagModal.scss +++ b/src/tags/helpers/EditTagModal.scss @@ -5,3 +5,7 @@ .edit-tag-modal__color-icon { color: #fff; } + +.edit-tag-modal__popover.edit-tag-modal__popover { + border-radius: .6rem; +} diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx index e70875f1..80a6d477 100644 --- a/src/tags/helpers/EditTagModal.tsx +++ b/src/tags/helpers/EditTagModal.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap'; -import { ChromePicker } from 'react-color'; +import { HexColorPicker } from 'react-colorful'; import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useToggle } from '../../utils/helpers/hooks'; @@ -46,8 +46,15 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => ( - - setColor(hex)} /> + + ', () => { it('changes color when changing on color picker', () => { const wrapper = createWrapper(); - expect(wrapper.find(ChromePicker).prop('color')).toEqual('red'); - wrapper.find(ChromePicker).simulate('change', { hex: 'blue' }); - expect(wrapper.find(ChromePicker).prop('color')).toEqual('blue'); + expect(wrapper.find(HexColorPicker).prop('color')).toEqual('red'); + wrapper.find(HexColorPicker).simulate('change', 'blue'); + expect(wrapper.find(HexColorPicker).prop('color')).toEqual('blue'); }); it('allows toggling popover with different mechanisms', () => { From 643494a54b166c66fb164fd26ffd1799a30c0385 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 16 Feb 2022 20:08:48 +0100 Subject: [PATCH 2/2] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7da4f08a..ab0d574b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), * [#543](https://github.com/shlinkio/shlink-web-client/pull/543) Redesigned settings section. * [#567](https://github.com/shlinkio/shlink-web-client/pull/567) Improved Shlink 3.0.0 compatibility by checking the `INVALID_SHORT_URL_DELETION` error code when deleting short URLs. * [#524](https://github.com/shlinkio/shlink-web-client/pull/524) Updated to react-router v6. +* [#579](https://github.com/shlinkio/shlink-web-client/pull/579) Replaced react-color with react-colorful. ### Deprecated * *Nothing*