Sync changes v29.0.0 from IceHrmPro (https://icehrm.com/purchase-icehrmpro)

web/components/IceColorPick.js

@@ -0,0 +1,70 @@
+import React, { useState, useRef, useEffect } from "react";
+import { SketchPicker } from 'react-color';
+
+function useComponentVisible(initialIsVisible) {
+  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+  const ref = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsComponentVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  });
+
+  return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+function IceColorPick(props) {
+  const { value, onChange, readOnly } = props;
+
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(true);
+
+  const [color, setColor] = useState(value || '#FFF');
+  const [showPicker, setShowPicker] = useState(false);
+
+  useEffect(() => {
+    if (!isComponentVisible) {
+      setShowPicker(false);
+    }
+  }, [isComponentVisible])
+
+  useEffect(() => {
+    if (value) {
+      setColor(value);
+    }
+    
+  }, [value]);
+
+  return <div className="colorpicker-container">
+    <div
+      className="colorpicker-preview"
+      onClick={() => {
+        if (!showPicker) {
+          setIsComponentVisible(true);
+        }
+        setShowPicker(!showPicker);
+      }}
+      style={ { backgroundColor: color} }
+    />
+    <div ref={ref} className={`colorpicker-component ${(readOnly || !showPicker) ? 'hidden': ''}` }>
+      <SketchPicker
+        color={color}
+        disableAlpha
+        presetColors={[]}
+        onChangeComplete={({ hex }) => {
+          onChange(hex);
+          setColor(hex);
+        }}
+      />
+    </div>
+  </div>;
+} 
+
+export default IceColorPick;