@synerise/ds-color-picker 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.8...@synerise/ds-color-picker@0.2.0) (2023-02-03)
+
+
+### Features
+
+* **color-picker:** color change logic separately for each input ([8eefaf0](https://github.com/Synerise/synerise-design/commit/8eefaf0b5028b4b916110d554f06b025bd2cdf45))
+* **color-picker:** color change logic separately for each input ([54283f7](https://github.com/Synerise/synerise-design/commit/54283f7ab79b0da75ef78e26671a8ad675b04f44))
+* **color-picker:** descriptions of methods and names ([45be774](https://github.com/Synerise/synerise-design/commit/45be774dff8bd50b6b201dbfed0a2d1d09a2b1a8))
+
+
+
+
+
 ## [0.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.7...@synerise/ds-color-picker@0.1.8) (2023-01-30)
 
 

package/dist/ColorPicker.js

@@ -9,15 +9,14 @@ import * as copy from 'copy-to-clipboard';
 import Tooltip from '@synerise/ds-tooltip';
 import Dropdown from '@synerise/ds-dropdown';
 import { useOnClickOutside } from '@synerise/ds-utils';
-import { isValidHexColor, convert3DigitHexTo6Digit, filterAlphanumeric } from './utils';
+import { isValidHexColor, isValidTextColor, convert3DigitHexTo6Digit, filterAlphanumeric, standardizeColor } from './utils';
 import ColorPickerStyles from './ColorPicker.styles';
-var hash = '#';
 var DEFAULT_MAX_WIDTH_PICKER = 228;
+var DEFAULT_COLOR = '#ffffff';
 
 var ColorPicker = function ColorPicker(_ref) {
   var maxWidth = _ref.maxWidth,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '#ffffff' : _ref$value,
+      value = _ref.value,
       onChange = _ref.onChange,
       _ref$colors = _ref.colors,
       colors = _ref$colors === void 0 ? [] : _ref$colors,
@@ -38,37 +37,80 @@ var ColorPicker = function ColorPicker(_ref) {
       description = _ref.description;
 
   var _React$useState = React.useState(value),
-      color = _React$useState[0],
-      setColor = _React$useState[1];
+      colorTextInput = _React$useState[0],
+      setColorTextInput = _React$useState[1];
 
   var _React$useState2 = React.useState(value),
-      validHexColor = _React$useState2[0],
-      setValidHexColor = _React$useState2[1];
+      colorHexInput = _React$useState2[0],
+      setColorHexInput = _React$useState2[1];
 
-  var _React$useState3 = React.useState(-1),
-      pressed = _React$useState3[0],
-      setPressed = _React$useState3[1];
+  var _React$useState3 = React.useState(value),
+      lastValidTextColor = _React$useState3[0],
+      setLastValidTextColor = _React$useState3[1];
 
-  var _React$useState4 = React.useState(false),
-      dropdownVisible = _React$useState4[0],
-      setDropdownVisible = _React$useState4[1];
+  var _React$useState4 = React.useState(value),
+      lastValidHexColor = _React$useState4[0],
+      setLastValidHexColor = _React$useState4[1];
 
-  var _React$useState5 = React.useState(colors),
-      savedColors = _React$useState5[0],
-      setSavedColors = _React$useState5[1];
+  var _React$useState5 = React.useState(-1),
+      pressed = _React$useState5[0],
+      setPressed = _React$useState5[1];
 
-  var onChangeColor = React.useCallback(function (colorValue) {
-    setColor(colorValue);
+  var _React$useState6 = React.useState(false),
+      dropdownVisible = _React$useState6[0],
+      setDropdownVisible = _React$useState6[1];
+
+  var _React$useState7 = React.useState(colors),
+      savedColors = _React$useState7[0],
+      setSavedColors = _React$useState7[1];
+
+  React.useEffect(function () {
+    if (lastValidHexColor) {
+      onChange && onChange(lastValidHexColor);
+    }
+  }, [onChange, lastValidHexColor]);
+  var onChangeTextColor = React.useCallback(function (colorValue) {
+    setColorTextInput(colorValue);
+
+    if (isValidTextColor(colorValue)) {
+      var standardizedColor = standardizeColor(colorValue);
+      setLastValidTextColor(colorValue);
+      setColorHexInput(standardizedColor);
+      setLastValidHexColor(standardizedColor);
+    } else if (isValidHexColor(colorValue)) {
+      var fullHexColor = convert3DigitHexTo6Digit(colorValue);
+      setLastValidTextColor(fullHexColor);
+      setColorHexInput(fullHexColor);
+      setLastValidHexColor(fullHexColor);
+    }
+
+    setPressed(-1);
+  }, []);
+  var onChangeHexColor = React.useCallback(function (colorValue) {
+    setColorHexInput(colorValue);
 
     if (isValidHexColor(colorValue)) {
-      var c = convert3DigitHexTo6Digit(colorValue);
-      setValidHexColor(c);
-      onChange && onChange(c);
+      var fullHexColor = convert3DigitHexTo6Digit(colorValue);
+      setColorTextInput(fullHexColor);
+      setLastValidTextColor(fullHexColor);
+      setLastValidHexColor(fullHexColor);
     }
-  }, [onChange]);
+
+    setPressed(-1);
+  }, []);
   var onBlurHandler = React.useCallback(function () {
-    setColor(validHexColor);
-  }, [validHexColor]);
+    setColorTextInput(lastValidTextColor);
+    setColorHexInput(lastValidHexColor);
+  }, [lastValidHexColor, lastValidTextColor]);
+  var onClickHandler = React.useCallback(function () {
+    setDropdownVisible(!dropdownVisible);
+  }, [dropdownVisible]);
+  React.useEffect(function () {
+    if (!value || !isValidTextColor(value) || !isValidHexColor(value)) {
+      onChangeTextColor(DEFAULT_COLOR);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   var heightOfDropdown = React.useCallback(function () {
     if (errorText || description) {
       if (errorText && description) {
@@ -87,7 +129,7 @@ var ColorPicker = function ColorPicker(_ref) {
 
   var saveColor = function saveColor() {
     setSavedColors(function (ar) {
-      var colorsArray = (color ? [color].concat(ar) : ar).slice(0, maxSavedColors);
+      var colorsArray = (lastValidHexColor ? [lastValidHexColor].concat(ar) : ar).slice(0, maxSavedColors);
       onSaveColors && onSaveColors(colorsArray);
       return colorsArray;
     });
@@ -103,8 +145,8 @@ var ColorPicker = function ColorPicker(_ref) {
     size: 16,
     component: /*#__PURE__*/React.createElement(FormulaPlusM, null)
   }))), infix({
-    color: color,
-    setColor: onChangeColor
+    color: colorTextInput,
+    setColor: onChangeTextColor
   }), savedColors.length > 0 && /*#__PURE__*/React.createElement(Tags, {
     tagShape: TagShape.SINGLE_CHARACTER_SQUARE // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
@@ -120,40 +162,37 @@ var ColorPicker = function ColorPicker(_ref) {
         })),
         color: colorEntry,
         onClick: function onClick() {
-          onChangeColor(colorEntry);
+          onChangeHexColor(colorEntry);
           setPressed(i);
         }
       };
-    }),
-    disabled: false
+    })
   }));
   var dropdown = /*#__PURE__*/React.createElement(ColorPickerStyles.Container, {
     ref: ref,
     size: size
   }, /*#__PURE__*/React.createElement(ReactColorful, {
-    color: validHexColor,
-    onChange: onChangeColor
+    color: lastValidHexColor,
+    onChange: onChangeHexColor
   }), /*#__PURE__*/React.createElement(ColorPickerStyles.PrefixTag, {
     height: isShownSavedColors,
     size: size
   }, /*#__PURE__*/React.createElement(Tag, {
     shape: TagShape.SINGLE_CHARACTER_SQUARE,
-    color: validHexColor,
-    disabled: false
+    color: lastValidHexColor
   })), /*#__PURE__*/React.createElement(ColorPickerStyles.SubContainer, {
     savedColors: isShownSavedColors
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerInput, {
-    value: filterAlphanumeric(color),
+    value: colorHexInput && filterAlphanumeric(colorHexInput),
     prefixel: /*#__PURE__*/React.createElement(ColorPickerStyles.PreffixWrapper, null, "#"),
     onChange: function onChange(ev) {
-      var hexValue = hash + filterAlphanumeric(ev.target.value);
-      onChangeColor(hexValue);
+      onChangeHexColor("#" + ev.target.value);
     },
     onBlur: onBlurHandler,
     placeholder: placeholder,
     icon1: /*#__PURE__*/React.createElement(ColorPickerStyles.CopyIcon, {
       onClick: function onClick() {
-        copy(color);
+        lastValidHexColor && copy(lastValidHexColor);
       },
       component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
     }),
@@ -172,19 +211,17 @@ var ColorPicker = function ColorPicker(_ref) {
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerSelect, _extends({
     prefix: /*#__PURE__*/React.createElement(ColorPickerStyles.ColorTag, {
       shape: TagShape.SINGLE_CHARACTER_ROUND,
-      color: validHexColor,
+      color: lastValidHexColor,
       disabled: false,
-      onClick: function onClick() {
-        return setDropdownVisible(!dropdownVisible);
-      }
+      onClick: onClickHandler
     }),
+    onClick: onClickHandler,
     onChange: function onChange(ev) {
-      var hexValue = hash + filterAlphanumeric(ev.target.value);
-      onChangeColor(hexValue);
+      onChangeTextColor(ev.target.value);
     },
     onBlur: onBlurHandler,
     placeholder: placeholder,
-    value: color,
+    value: colorTextInput,
     description: description,
     errorText: errorText
   }, inputProps))));

package/dist/utils.d.ts

@@ -1,3 +1,21 @@
 export declare const filterAlphanumeric: (colorValue: string) => string;
 export declare const isValidHexColor: (hex: string) => boolean;
+/**
+ *
+ * Method that creates an option element and then assigns a colour to its styles.
+ * If the colour is correct, it is assigned to the element and can then be checked against the input data.
+ *
+ * @param {string} strColor
+ * @returns {boolean}
+ */
+export declare const isValidTextColor: (strColor: string) => boolean;
+/**
+ *
+ * A method that converts color in user-understandable notation to HEX notation.
+ * It uses the canvas element for this
+ *
+ * @param {string} color
+ * @returns {string}
+ */
+export declare const standardizeColor: (color: string) => string;
 export declare const convert3DigitHexTo6Digit: (hexColor: string) => string;

package/dist/utils.js

@@ -6,6 +6,41 @@ export var filterAlphanumeric = function filterAlphanumeric(colorValue) {
 export var isValidHexColor = function isValidHexColor(hex) {
   return hexColorRegex.test(hex);
 };
+/**
+ *
+ * Method that creates an option element and then assigns a colour to its styles.
+ * If the colour is correct, it is assigned to the element and can then be checked against the input data.
+ *
+ * @param {string} strColor
+ * @returns {boolean}
+ */
+
+export var isValidTextColor = function isValidTextColor(strColor) {
+  if (!strColor) return false; // eslint-disable-next-line no-undef
+
+  var s = new Option().style;
+  s.color = strColor;
+  return s.color === strColor;
+};
+/**
+ *
+ * A method that converts color in user-understandable notation to HEX notation.
+ * It uses the canvas element for this
+ *
+ * @param {string} color
+ * @returns {string}
+ */
+
+export var standardizeColor = function standardizeColor(color) {
+  var ctx = document.createElement('canvas').getContext('2d');
+
+  if (ctx) {
+    ctx.fillStyle = color;
+    return ctx.fillStyle;
+  }
+
+  return '';
+};
 export var convert3DigitHexTo6Digit = function convert3DigitHexTo6Digit(hexColor) {
   var alphaHexColor = filterAlphanumeric(hexColor);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -45,5 +45,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "09992e7b69930b5357e169418af91e29d1cba5ee"
+  "gitHead": "05f16eaafa3de3ec33cc0d9a6712864646a0617e"
 }