Merge pull request #580 from acelaya-forks/feature/simple-color-picker

Feature/simple color picker
2024-12-23 01:20:24 +03:00 · 2022-02-16 20:14:22 +01:00 · 2022-02-16 20:14:22 +01:00 · de027eccad
commit de027eccad
parent 78a519c649 643494a54b
6 changed files with 32 additions and 99 deletions
--- 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*
--- 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",
@ -18642,11 +18634,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",
@ -18975,11 +18962,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",
@ -26480,21 +26462,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": {
@ -26966,14 +26940,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",
@ -31603,14 +31569,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",
@ -36599,12 +36557,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",
@ -49084,11 +49036,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",
@ -49362,11 +49309,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",
@ -55301,19 +55243,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",
@ -55665,14 +55599,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",
@ -59262,11 +59188,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",
--- 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",
--- 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;
+}
--- 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) => (
                <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
              </div>
            </div>
-            <Popover isOpen={showColorPicker} toggle={toggleColorPicker} target="colorPickerBtn" placement="right">
-              <ChromePicker color={color} disableAlpha onChange={({ hex }) => setColor(hex)} />
+            <Popover
+              isOpen={showColorPicker}
+              toggle={toggleColorPicker}
+              target="colorPickerBtn"
+              placement="right"
+              hideArrow
+              popperClassName="edit-tag-modal__popover"
+            >
+              <HexColorPicker color={color} onChange={setColor} />
            </Popover>
            <Input
              value={newTagName}
--- a/test/tags/helpers/EditTagModal.test.tsx
+++ b/test/tags/helpers/EditTagModal.test.tsx
@ -1,7 +1,7 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import { Button, Input, Modal, ModalHeader, Popover } from 'reactstrap';
-import { ChromePicker } from 'react-color';
+import { HexColorPicker } from 'react-colorful';
 import { TagEdition } from '../../../src/tags/reducers/tagEdit';
 import createEditTagModal from '../../../src/tags/helpers/EditTagModal';
 import ColorGenerator from '../../../src/utils/services/ColorGenerator';
@ -92,9 +92,9 @@ describe('<EditTagModal />', () => {
  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', () => {