@synerise/ds-color-picker 0.1.8 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.2.0...@synerise/ds-color-picker@0.3.0) (2023-02-06)
+
+
+### Features
+
+* **color-picker:** copy tooltip texts object ([929c93e](https://github.com/Synerise/synerise-design/commit/929c93e53e3679e69c44e8ee655b0dbf200ad283))
+* **color-picker:** tests for component and methods ([bafa8c6](https://github.com/Synerise/synerise-design/commit/bafa8c6bbf967983fce4a65dc9bbc71a52a72953))
+
+
+
+
+
+# [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.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ColorPickerProps } from './ColorPicker.types';
-declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltipText, isShownSavedColors, size, errorText, description, }: ColorPickerProps) => JSX.Element;
+declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltip, isShownSavedColors, size, errorText, description, }: ColorPickerProps) => JSX.Element;
 export default ColorPicker;

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,
@@ -30,7 +29,7 @@ var ColorPicker = function ColorPicker(_ref) {
       inputProps = _ref.inputProps,
       _ref$maxSavedColors = _ref.maxSavedColors,
       maxSavedColors = _ref$maxSavedColors === void 0 ? 9 : _ref$maxSavedColors,
-      tooltipText = _ref.tooltipText,
+      tooltip = _ref.tooltip,
       isShownSavedColors = _ref.isShownSavedColors,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'M' : _ref$size,
@@ -38,37 +37,84 @@ 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),
+      lastValidHexColor = _React$useState3[0],
+      setLastValidHexColor = _React$useState3[1];
 
-  var _React$useState4 = React.useState(false),
-      dropdownVisible = _React$useState4[0],
-      setDropdownVisible = _React$useState4[1];
+  var _React$useState4 = React.useState(-1),
+      pressed = _React$useState4[0],
+      setPressed = _React$useState4[1];
 
-  var _React$useState5 = React.useState(colors),
-      savedColors = _React$useState5[0],
-      setSavedColors = _React$useState5[1];
+  var _React$useState5 = React.useState(false),
+      dropdownVisible = _React$useState5[0],
+      setDropdownVisible = _React$useState5[1];
 
-  var onChangeColor = React.useCallback(function (colorValue) {
-    setColor(colorValue);
+  var _React$useState6 = React.useState(colors),
+      savedColors = _React$useState6[0],
+      setSavedColors = _React$useState6[1];
+
+  var _React$useState7 = React.useState(tooltip == null ? void 0 : tooltip.copy),
+      tooltipText = _React$useState7[0],
+      setTooltipText = _React$useState7[1];
+
+  var onChangeTextColor = React.useCallback(function (colorValue) {
+    setColorTextInput(colorValue);
+
+    if (isValidTextColor(colorValue)) {
+      var standardizedColor = standardizeColor(colorValue);
+      setColorHexInput(standardizedColor);
+      setLastValidHexColor(standardizedColor);
+      onChange && onChange(standardizedColor);
+    } else if (isValidHexColor(colorValue)) {
+      var fullHexColor = convert3DigitHexTo6Digit(colorValue);
+      setColorHexInput(fullHexColor);
+      setLastValidHexColor(fullHexColor);
+      onChange && onChange(fullHexColor);
+    }
+
+    setPressed(-1);
+  }, [onChange]);
+  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);
+      setLastValidHexColor(fullHexColor);
+      onChange && onChange(fullHexColor);
     }
+
+    setPressed(-1);
   }, [onChange]);
   var onBlurHandler = React.useCallback(function () {
-    setColor(validHexColor);
-  }, [validHexColor]);
+    setColorTextInput(lastValidHexColor);
+    setColorHexInput(lastValidHexColor);
+  }, [lastValidHexColor]);
+  var onClickHandler = React.useCallback(function () {
+    setDropdownVisible(!dropdownVisible);
+  }, [dropdownVisible]);
+  var copyHandler = React.useCallback(function () {
+    lastValidHexColor && copy(lastValidHexColor);
+    setTooltipText(tooltip == null ? void 0 : tooltip.copied);
+    setTimeout(function () {
+      setTooltipText(tooltip == null ? void 0 : tooltip.copy);
+    }, 3000);
+  }, [lastValidHexColor, tooltip]);
+  React.useEffect(function () {
+    if (value && (isValidHexColor(value) || isValidTextColor(value))) {
+      onChangeTextColor(value);
+    } else {
+      onChangeTextColor(DEFAULT_COLOR);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   var heightOfDropdown = React.useCallback(function () {
     if (errorText || description) {
       if (errorText && description) {
@@ -87,7 +133,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 +149,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,44 +166,39 @@ 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);
-      },
+    icon1: tooltipText ? /*#__PURE__*/React.createElement(ColorPickerStyles.CopyIcon, {
+      onClick: copyHandler,
       component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
-    }),
-    icon1Tooltip: /*#__PURE__*/React.createElement("span", null, tooltipText || 'Copy to clipboard')
+    }) : undefined,
+    icon1Tooltip: tooltipText ? /*#__PURE__*/React.createElement("span", null, tooltipText) : undefined
   }), isShownSavedColors && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Divider, null), swatchSection)));
   return /*#__PURE__*/React.createElement(React.Fragment, null, maxWidth && maxWidth >= DEFAULT_MAX_WIDTH_PICKER && /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerModalStyle, {
     maxWidth: maxWidth
@@ -170,21 +211,20 @@ var ColorPicker = function ColorPicker(_ref) {
     overlay: dropdown,
     placement: "bottomLeft"
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerSelect, _extends({
+    "data-testid": "color-picker",
     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/ColorPicker.types.d.ts

@@ -22,7 +22,10 @@ export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeh
     infix?: (colorHooks?: Partial<ColorHookType>) => JSX.Element;
     maxSavedColors?: number;
     inputProps?: Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>;
-    tooltipText?: string;
+    tooltip?: {
+        copy: string;
+        copied: string;
+    };
     isShownSavedColors?: boolean;
     size?: 'S' | 'M' | 'L';
     errorText?: string;

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.3.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": "2bc43ef116113283aed104339dc1a50db543b45e"
 }