@synerise/ds-color-picker 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 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)
 
 

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

@@ -29,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,
@@ -45,68 +45,72 @@ var ColorPicker = function ColorPicker(_ref) {
       setColorHexInput = _React$useState2[1];
 
   var _React$useState3 = React.useState(value),
-      lastValidTextColor = _React$useState3[0],
-      setLastValidTextColor = _React$useState3[1];
+      lastValidHexColor = _React$useState3[0],
+      setLastValidHexColor = _React$useState3[1];
 
-  var _React$useState4 = React.useState(value),
-      lastValidHexColor = _React$useState4[0],
-      setLastValidHexColor = _React$useState4[1];
+  var _React$useState4 = React.useState(-1),
+      pressed = _React$useState4[0],
+      setPressed = _React$useState4[1];
 
-  var _React$useState5 = React.useState(-1),
-      pressed = _React$useState5[0],
-      setPressed = _React$useState5[1];
+  var _React$useState5 = React.useState(false),
+      dropdownVisible = _React$useState5[0],
+      setDropdownVisible = _React$useState5[1];
 
-  var _React$useState6 = React.useState(false),
-      dropdownVisible = _React$useState6[0],
-      setDropdownVisible = _React$useState6[1];
+  var _React$useState6 = React.useState(colors),
+      savedColors = _React$useState6[0],
+      setSavedColors = _React$useState6[1];
 
-  var _React$useState7 = React.useState(colors),
-      savedColors = _React$useState7[0],
-      setSavedColors = _React$useState7[1];
+  var _React$useState7 = React.useState(tooltip == null ? void 0 : tooltip.copy),
+      tooltipText = _React$useState7[0],
+      setTooltipText = _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);
+      onChange && onChange(standardizedColor);
     } else if (isValidHexColor(colorValue)) {
       var fullHexColor = convert3DigitHexTo6Digit(colorValue);
-      setLastValidTextColor(fullHexColor);
       setColorHexInput(fullHexColor);
       setLastValidHexColor(fullHexColor);
+      onChange && onChange(fullHexColor);
     }
 
     setPressed(-1);
-  }, []);
+  }, [onChange]);
   var onChangeHexColor = React.useCallback(function (colorValue) {
     setColorHexInput(colorValue);
 
     if (isValidHexColor(colorValue)) {
       var fullHexColor = convert3DigitHexTo6Digit(colorValue);
       setColorTextInput(fullHexColor);
-      setLastValidTextColor(fullHexColor);
       setLastValidHexColor(fullHexColor);
+      onChange && onChange(fullHexColor);
     }
 
     setPressed(-1);
-  }, []);
+  }, [onChange]);
   var onBlurHandler = React.useCallback(function () {
-    setColorTextInput(lastValidTextColor);
+    setColorTextInput(lastValidHexColor);
     setColorHexInput(lastValidHexColor);
-  }, [lastValidHexColor, lastValidTextColor]);
+  }, [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 || !isValidTextColor(value) || !isValidHexColor(value)) {
+    if (value && (isValidHexColor(value) || isValidTextColor(value))) {
+      onChangeTextColor(value);
+    } else {
       onChangeTextColor(DEFAULT_COLOR);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -190,13 +194,11 @@ var ColorPicker = function ColorPicker(_ref) {
     },
     onBlur: onBlurHandler,
     placeholder: placeholder,
-    icon1: /*#__PURE__*/React.createElement(ColorPickerStyles.CopyIcon, {
-      onClick: function onClick() {
-        lastValidHexColor && copy(lastValidHexColor);
-      },
+    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
@@ -209,6 +211,7 @@ 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: lastValidHexColor,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "0.2.0",
+  "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": "05f16eaafa3de3ec33cc0d9a6712864646a0617e"
+  "gitHead": "2bc43ef116113283aed104339dc1a50db543b45e"
 }