ish-ui 1.4.0 → 1.4.1

package/dist/colorPicker/ColorPicker.js

@@ -108,54 +108,55 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p,
 }));
 // Gap between the anchor and the paper, leaving room for the arrow.
 const popperModifiers = [{ name: 'offset', options: { offset: [0, 12] } }];
-const ColorPickerBase = React.memo(({ color, input: { value, onChange }, TransitionProps, setAnchorEl }) => {
+const ColorPickerBase = React.memo(({ color, input: { onChange }, TransitionProps, setAnchorEl }) => {
     const { classes } = useStyles();
-    const [hueColor, setHueColor] = useState(color);
-    const [alfaColor, setAlfaColor] = useState(color);
+    // Single source of truth for all pickers; null until HuePicker has parsed the initial color
+    const [hsv, setHsv] = useState(null);
     const hueRef = useRef(undefined);
-    const onColorChange = useCallback(color => {
-        setHueColor({
-            h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
-        });
-        setAlfaColor(color.hsv);
+    // Alpha slider is used as a saturation slider, so saturation is passed as alpha
+    const hueColor = useMemo(() => (hsv ? Object.assign(Object.assign({}, hsv), { a: 1 }) : color), [hsv, color]);
+    const alfaColor = useMemo(() => (hsv ? {
+        h: hsv.h, s: 1, v: hsv.v, a: hsv.s
+    } : color), [hsv, color]);
+    const onHueChange = useCallback(color => {
+        setHsv(prev => (Object.assign(Object.assign({}, (prev || color.hsv)), { h: color.hsv.h })));
     }, []);
-    const onChangeComplete = (color) => {
-        var _a, _b;
-        const hex = ((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex) || (color === null || color === void 0 ? void 0 : color.hex);
+    const onAlfaChange = useCallback(color => {
+        setHsv(prev => (Object.assign(Object.assign({}, (prev || color.hsv)), { s: color.hsv.a })));
+    }, []);
+    const onMaterialChange = useCallback(color => {
+        setHsv({ h: color.hsv.h, s: color.hsv.s, v: color.hsv.v });
+    }, []);
+    const commitHex = (hex) => {
         if (hex) {
             onChange(hex.replace('#', ''));
         }
     };
+    // Slider pickers report their own (saturation-substituted) color, so take the resulting one from HuePicker
+    const onSliderChangeComplete = () => { var _a, _b; return commitHex((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex); };
+    const onMaterialChangeComplete = color => commitHex(color.hex);
     const handleClickAway = useCallback(() => {
         setAnchorEl(null);
     }, []);
-    useEffect(() => {
-        if (!hueColor && value) {
-            setHueColor('#' + value);
-        }
-    }, [value, hueColor]);
     useEffect(() => {
         var _a, _b;
         const hueHsv = (_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hsv;
-        if (!hueHsv) {
-            return;
+        if (hueHsv) {
+            setHsv({ h: hueHsv.h, s: hueHsv.s, v: hueHsv.v });
         }
-        setAlfaColor({
-            h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
-        });
-    }, [hueRef.current]);
+    }, []);
     return (React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
         React.createElement(Grow, Object.assign({}, TransitionProps, { timeout: 200 }),
             React.createElement(Paper, { className: classes.paper },
                 React.createElement("span", { className: classes.arrow, "data-popper-arrow": true }),
-                React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
-                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onColorChange, onChangeComplete: onChangeComplete }),
+                React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onSliderChangeComplete, width: "168", className: classes.bottomOffset }),
+                React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onSliderChangeComplete }),
                 React.createElement("div", { className: classes.material },
                     React.createElement(MaterialPicker, { styles: {
                             default: {
                                 material: { width: '100%', height: 'unset', padding: 0, fontFamily: 'inherit' }
                             }
-                        }, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete }))))));
+                        }, color: hueColor, onChange: onMaterialChange, onChangeComplete: onMaterialChangeComplete }))))));
 });
 const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
     const { classes, cx } = useStyles();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {