#7007 Replace validate color with tiny color 2

decaporg · Dec 6, 2023 · 63212d4 · 63212d4
1 parent 9dc2fbd
commit 63212d4
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 10 deletions.
diff --git a/dev-test/config.yml b/dev-test/config.yml
@@ -158,6 +158,7 @@ collections: # A list of collections the CMS should be able to edit
           multiple: true,
         }
       - { label: 'Hidden', name: 'hidden', widget: 'hidden', default: 'hidden' }
+      - { label: 'Color', name: 'color', widget: 'color' }
       - label: 'Object'
         name: 'object'
         widget: 'object'

diff --git a/packages/decap-cms-widget-colorstring/package.json b/packages/decap-cms-widget-colorstring/package.json
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "react-color": "^2.18.1",
-    "validate-color": "^2.1.0"
+    "tinycolor2": "^1.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",

diff --git a/packages/decap-cms-widget-colorstring/src/ColorControl.js b/packages/decap-cms-widget-colorstring/src/ColorControl.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import ChromePicker from 'react-color';
-import validateColor from 'validate-color';
+import tinycolor from 'tinycolor2';
 import { zIndex } from 'decap-cms-ui-default';
 
 function ClearIcon() {
@@ -131,8 +131,8 @@ export default class ColorControl extends React.Component {
         )}
         <ColorSwatchBackground />
         <ColorSwatch
-          background={validateColor(this.props.value) ? this.props.value : '#fff'}
-          color={validateColor(this.props.value) ? 'rgba(255, 255, 255, 0)' : 'rgb(223, 223, 227)'}
+          background={tinycolor(this.props.value).isValid() ? this.props.value : '#fff'}
+          color={tinycolor(this.props.value).isValid() ? 'rgba(255, 255, 255, 0)' : 'rgb(223, 223, 227)'}
           onClick={this.handleClick}
         >
           ?

diff --git a/yarn.lock b/yarn.lock
@@ -16499,7 +16499,7 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinycolor2@^1.4.1:
+tinycolor2@^1.4.1, tinycolor2@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
@@ -17389,11 +17389,6 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
-validate-color@^2.1.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/validate-color/-/validate-color-2.2.4.tgz#77acf863458cd637ee944f604932512f6cbe6103"
-  integrity sha512-Znolz+b6CwW6eBXYld7MFM3O7funcdyRfjKC/X9hqYV/0VcC5LB/L45mff7m3dIn9wdGdNOAQ/fybNuD5P/HDw==
-
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"