kamotive_ui 1.2.2 → 1.2.4

package/dist/components/ColorPicker/ColorPicker.js

@@ -5,10 +5,61 @@ import { Chrome } from '@uiw/react-color';
 import EditableInput from '@uiw/react-color-editable-input';
 import { GithubPlacement } from '@uiw/react-color-github';
 import { IconColorPicker10 } from '../../Icons';
+;
+// Функция для преобразования HEXA в HEX
+const hexaToHex = (hexa = 'fff') => {
+    const cleanHex = hexa.replace('#', '');
+    if (cleanHex.length >= 8) {
+        return `#${cleanHex.slice(0, 6)}`;
+    }
+    if (cleanHex.length === 6) {
+        return `#${cleanHex}`;
+    }
+    if (cleanHex.length === 3) {
+        return `#${cleanHex[0]}${cleanHex[0]}${cleanHex[1]}${cleanHex[1]}${cleanHex[2]}${cleanHex[2]}`;
+    }
+    if (cleanHex.length < 6) {
+        return `#${cleanHex + '0'.repeat(6 - cleanHex.length)}`;
+    }
+    return '#ffffff';
+};
+/**
+ * Функция-обертка. Вызывает функцию-колбэк через заданный промежуток времени после того, как мышь покинет область
+ * @param callback функция-колбэк
+ * @param delay время в мс, через которое будет вызвана функция
+ */
+const mouseLeaveTimer = (callback, delay) => {
+    let timer = null;
+    function wrapper(element) {
+        const handleMouseLeave = () => {
+            timer = setTimeout(() => {
+                callback();
+                timer = null;
+            }, delay);
+        };
+        const handleMouseEnter = () => {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+        };
+        element.addEventListener('mouseleave', handleMouseLeave);
+        element.addEventListener('mouseenter', handleMouseEnter);
+        // функция очистки
+        return function cleanup() {
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }
+    return wrapper;
+};
 /**
  * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
  */
-export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, }) => {
+export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, onColorChange, }) => {
     const [colorValue, setColorValue] = useState(mainColor);
     const [selectedColor, setSelectedColor] = useState(color);
     const [isColorChanged, setIsColorChanged] = useState(false);
@@ -16,6 +67,26 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
     const [popoverPosition, setPopoverPosition] = useState('bottom');
     const circleRef = useRef(null);
     const popoverRef = useRef(null);
+    const divRef = useRef(null);
+    const mainColorClasses = classNames(styles.circle, {
+        [styles['mainColor']]: mainColor,
+    });
+    const colorCircleDefaultClasses = classNames(styles.circle, styles.colorCircleDefault);
+    const popoverClassess = classNames(styles['popover'], {
+        [styles[`popover--${popoverPosition}`]]: true,
+    });
+    useEffect(() => {
+        if (!divRef.current)
+            return;
+        const setTimer = mouseLeaveTimer(() => {
+            setIsHovered(false);
+            if (onChange) {
+                onChange(colorValue || color);
+            }
+        }, 800);
+        const cleanup = setTimer(divRef.current);
+        return cleanup;
+    }, []);
     useEffect(() => {
         // Обработчик клика вне компонента развертывания выбора цвета
         const handleClickOutside = (event) => {
@@ -50,63 +121,37 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
             !autoOpen && document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen]);
-    const mainColorClasses = classNames(styles['circle'], {
-        'mainColor': mainColor,
-    });
-    const colorCircleDefaultClasses = classNames(styles['circle'], {
-        'colorCircleDefault': color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
-    });
-    const popoverClassess = classNames(styles['popover'], {
-        [`popover--${popoverPosition}`]: true,
-    });
-    // Функция для преобразования HEXA в HEX
-    const hexaToHex = (hexa = 'fff') => {
-        const cleanHex = hexa.replace('#', '');
-        if (cleanHex.length >= 8) {
-            return `#${cleanHex.slice(0, 6)}`;
-        }
-        if (cleanHex.length === 6) {
-            return `#${cleanHex}`;
-        }
-        if (cleanHex.length === 3) {
-            return `#${cleanHex[0]}${cleanHex[0]}${cleanHex[1]}${cleanHex[1]}${cleanHex[2]}${cleanHex[2]}`;
-        }
-        if (cleanHex.length < 6) {
-            return `#${cleanHex + '0'.repeat(6 - cleanHex.length)}`;
-        }
-        return '#ffffff';
-    };
+    useEffect(() => {
+        setSelectedColor(colorValue || color);
+    }, [colorValue]);
     const colorChangeHandler = (color) => {
         const newColor = typeof color === 'string' ? color : color.hexa;
         setIsColorChanged(true);
         setColorValue(newColor);
         setSelectedColor(newColor);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newColor);
+        onColorChange(newColor);
     };
-    useEffect(() => {
-        setSelectedColor(color);
-    }, [color]);
-    return (React.createElement("div", { className: (mainColor || recentColors) ? 'colorPickerWrapper' : '', onMouseLeave: () => setIsHovered && setIsHovered(false) },
-        mainColor && React.createElement("div", { className: mainColorClasses, style: {
+    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, ref: divRef },
+        mainColor && (React.createElement("div", { className: mainColorClasses, style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 backgroundColor: (colorValue === null || colorValue === void 0 ? void 0 : colorValue.startsWith('#')) ? colorValue : `var(--${colorValue})`,
-            }, onClick: () => setIsHovered && setIsHovered(false) }),
-        recentColors && recentColors.map((color, index) => (React.createElement("div", { key: index, className: "circle", style: {
-                width: `${width}px`,
-                height: `${height}px`,
-                backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
-            }, onClick: () => colorChangeHandler(color) }))),
-        React.createElement("div", { className: "colorPicker" },
+            } })),
+        recentColors &&
+            recentColors.map((color, index) => (React.createElement("div", { key: index, className: styles.circle, style: {
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
+                }, onClick: () => colorChangeHandler(color) }))),
+        React.createElement("div", { className: styles.colorPicker },
             React.createElement("div", { ref: circleRef, className: colorCircleDefaultClasses, onClick: () => setIsOpen(!isOpen), style: {
                     width: `${width}px`,
                     height: `${height}px`,
-                    backgroundColor: selectedColor.startsWith('#') ? selectedColor : `var(--${selectedColor})`,
                 } }),
             isOpen && (React.createElement("div", { ref: popoverRef, className: popoverClassess },
-                isOpen && React.createElement(IconColorPicker10, { className: "colorPickerIcon", htmlColor: 'var(--white)' }),
-                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: "customChrome", showEyeDropper: false }),
-                React.createElement("div", { className: "hex", style: { padding: '0 10px 0 20px' } },
+                isOpen && React.createElement(IconColorPicker10, { className: styles.colorPickerIcon, htmlColor: 'var(--white)' }),
+                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: styles.customChrome, showEyeDropper: false }),
+                React.createElement("div", { className: styles.hex, style: { padding: '0 10px 0 20px' } },
                     React.createElement(EditableInput, { value: hexaToHex(selectedColor), style: { width: 68, alignItems: 'flex-start' }, onChange: (e, color) => {
                             const formattedColor = hexaToHex(color.toString());
                             colorChangeHandler(formattedColor);

package/dist/components/ColorPicker/ColorPicker.module.css

@@ -1,9 +1,3 @@
-.story--wrapper-colorpicker {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
-}
 
 .colorPicker {
   -webkit-appearance: none;
@@ -13,11 +7,6 @@
   position: relative;
   cursor: pointer;
   padding: 0;
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  font-size: 16px;
 }
 
 .colorPicker:hover{
@@ -25,13 +14,8 @@
   background-color: var(--white);
   border-radius: 50%;
   padding: 0;
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  font-size: 16px;
-
 }
+
 .colorPicker--defaultColor{
   background: conic-gradient(
     rgba(255, 59, 48) 0deg,
@@ -143,7 +127,7 @@
   z-index: 100;
 }
 
-.w-color-swatch{
+:global(.w-color-swatch){
   padding: 10px !important;
   border-radius: 10px !important;
   width: fit-content !important;
@@ -154,73 +138,72 @@
   --github-border: 0px !important;
 }
 
-.w-color-swatch > div:nth-child(1),
-.w-color-swatch > div:nth-child(2){
+:global(.w-color-swatch) > div:nth-child(1),
+:global(.w-color-swatch) > div:nth-child(2){
  display: none !important;
 }
-.w-color-swatch > div:nth-child(3) {
+:global(.w-color-swatch) > div:nth-child(3) {
   width: 195px !important;
   height: 195px !important;
   border-radius: 10px !important;
 }
 
-.w-color-swatch > div:nth-child(4){
+:global(.w-color-swatch) > div:nth-child(4){
   gap: 15px !important;
   padding: 10px 0 !important;
   /* width: 80%; */
 }
-.w-color-swatch > div:nth-child(5){
+:global(.w-color-swatch) > div:nth-child(5){
   padding: 0 !important;
 
 }
-.w-color-swatch > div:nth-child(5) > div:nth-child(2){
+:global(.w-color-swatch) > div:nth-child(5) > div:nth-child(2){
   display: none !important;
   /* width: 80%; */
 }
 /* Для всех инпутов в пикере */
-.w-color-chrome .w-color-editable-input input {
+:global(.w-color-chrome) :global(.w-color-editable-input) input {
   font-family: 'Raleway' !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 14px !important;
   font-size: 12px !important;
   margin: 0 !important;
-}
-.w-color-editable-input{
+}     
+:global(.w-color-editable-input){
   margin: 0 !important;
   max-width: 30px !important;
   flex-direction: column-reverse !important;
   --editable-input-box-shadow : none !important;
 }
-.w-color-editable-input-rgba{
+:global(.w-color-editable-input-rgba){
   justify-content: end !important;
 }
 
-.w-color-editable-input > span {
+:global(.w-color-editable-input) > span {
   padding-top: 0 !important;
 }
-.w-color-editable-input:nth-child(1)> input{
+:global(.w-color-editable-input:nth-child(1))> input{
   border-radius: 10px 0 0 10px !important;
-border: 1px solid var(--grey-light) !important;
+  border: 1px solid var(--grey-light) !important;
 }
-.w-color-editable-input:nth-child(2)> input{
+:global(.w-color-editable-input:nth-child(2))> input{
   border-radius: 0 0 0 0px !important;
 border: 1px solid var(--grey-light) !important;
 border-left: none !important;
 }
-.w-color-editable-input:nth-child(3)> input{
+:global(.w-color-editable-input:nth-child(3))> input{
   border-radius: 0 0 0 0px !important;
-
   border: 1px solid var(--grey-light) !important;
   border-left: none !important; 
 }
-.w-color-editable-input:nth-child(4)> input{
+:global(.w-color-editable-input:nth-child(4))> input{
   border-radius: 0px 10px 10px 0px !important;
   border: 1px solid var(--grey-light) !important;
   border-left: none !important; 
 }
 /* Для лейблов */
-.w-color-chrome-fields.w-color-editable-input label {
+:global(.w-color-chrome-fields) :global(.w-color-editable-input) label {
   font-family: 'Raleway' !important;
   font-style: normal !important;
   font-weight: 400 !important;
@@ -228,19 +211,19 @@ border-left: none !important;
   font-size: 16px !important;
 }
 
-.w-color-alpha-horizontal > div.w-color-interactive{
+:global(.w-color-alpha-horizontal > div.w-color-interactive){
   border-radius: 8px !important;
 }
-.w-color-alpha-horizontal:first-of-type > div:first-child{
+:global(.w-color-alpha-horizontal:first-of-type > div:first-child){
   border-radius: 50px !important;
 }
-.w-color-alpha-horizontal:nth-of-type(2) > div:first-child{
+:global(.w-color-alpha-horizontal:nth-of-type(2) > div:first-child){
   border-radius: 50px !important;
 }
 
 .colorPickerIcon {
   position: absolute;
-  top: 68%;
+  top: 69%;
   left: 8px;
   z-index: 200;
   padding: 10px;
@@ -251,10 +234,10 @@ border-left: none !important;
   bottom: 20px;
   left: -10px;
 }
-.hex .w-color-editable-input{
+.hex :global(.w-color-editable-input){
     border-radius: 10px !important; 
 }
-.hex > .w-color-editable-input > input {
+.hex > :global(.w-color-editable-input) > input {
   /* padding: 0 !important; */
   font-size: 12px !important;
   font-family: 'Raleway' !important;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,14 +1,18 @@
-import { FC } from 'react';
-import { DropdownProps } from 'kamotive_ui';
+import React, { FC } from 'react';
+import { DropdownProps, TOptions } from '../../types';
 /**
  * Компонент Dropdown позволяет пользователям выбирать однин вариант из выпадающего меню
-*/
+ */
 export interface DropdownListItemProps {
-    item: DropdownProps['items'][number];
-    size: 'sm' | 'md' | 'lg';
-    selectedItem: DropdownProps['items'][number] | null | string | number;
-    style?: 'default' | 'text';
-    onChange: (value: DropdownProps['items'][number]) => void;
+    item: TOptions | null;
+    getOptionLabel?: ((option: TOptions) => string);
+    size: 'md' | 'lg';
+    selectedItem: TOptions | null;
+    style?: 'icons' | 'text';
+    onChange: (event: React.MouseEvent<HTMLElement>, item: TOptions | null) => void;
+    isActive?: boolean;
+    activeIndex?: number;
+    index?: number;
 }
 export declare const DropdownListItem: FC<DropdownListItemProps>;
 export declare const Dropdown: FC<DropdownProps>;