@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -6,9 +6,8 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/index.js';
 import { Input } from '../Input/index.js';
-import { ColorValue, InputContainer, SvgSwap, Box } from '../utils/index.js';
+import { ColorValue, SvgSwap, Box } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
-import '@itwin/itwinui-css/css/color-picker.css';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
  * It also allows switching between the specified formats using a swap button.
@@ -19,262 +18,389 @@ import '@itwin/itwinui-css/css/color-picker.css';
  * </ColorPicker>
  */
 export const ColorInputPanel = React.forwardRef((props, ref) => {
-    var _a, _b, _c, _d, _f, _g, _h, _j;
-    const { defaultColorFormat, allowedColorFormats = ['hsl', 'rgb', 'hex'], className, ...rest } = props;
-    const inputsContainerRef = React.useRef(null);
-    const { activeColor, applyHsvColorChange, hsvColor, showAlpha } = useColorPickerContext();
-    const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
-    React.useEffect(() => {
-        setCurrentFormat(defaultColorFormat);
-    }, [defaultColorFormat]);
-    // need to use state since input may have parsing error
-    const [input, setInput] = React.useState(['', '', '', '']);
-    React.useEffect(() => {
-        var _a, _b;
-        if (currentFormat === 'hsl') {
-            const hsl = activeColor.toHslColor();
-            setInput([
-                ColorValue.getFormattedColorNumber(hsvColor.h),
-                ColorValue.getFormattedColorNumber(hsl.s),
-                ColorValue.getFormattedColorNumber(hsl.l),
-                ColorValue.getFormattedColorNumber((_a = hsl.a) !== null && _a !== void 0 ? _a : activeColor.getAlpha() / 255, 2),
-            ]);
+  const {
+    defaultColorFormat,
+    allowedColorFormats = ['hsl', 'rgb', 'hex'],
+    className,
+    ...rest
+  } = props;
+  const inputsContainerRef = React.useRef(null);
+  const { activeColor, applyHsvColorChange, hsvColor, showAlpha } =
+    useColorPickerContext();
+  const [currentFormat, setCurrentFormat] = React.useState(defaultColorFormat);
+  React.useEffect(() => {
+    setCurrentFormat(defaultColorFormat);
+  }, [defaultColorFormat]);
+  // need to use state since input may have parsing error
+  const [input, setInput] = React.useState(['', '', '', '']);
+  React.useEffect(() => {
+    if (currentFormat === 'hsl') {
+      const hsl = activeColor.toHslColor();
+      setInput([
+        ColorValue.getFormattedColorNumber(hsvColor.h),
+        ColorValue.getFormattedColorNumber(hsl.s),
+        ColorValue.getFormattedColorNumber(hsl.l),
+        ColorValue.getFormattedColorNumber(
+          hsl.a ?? activeColor.getAlpha() / 255,
+          2,
+        ),
+      ]);
+    } else if (currentFormat === 'rgb') {
+      const rgb = activeColor.toRgbColor();
+      setInput([
+        rgb.r.toString(),
+        rgb.g.toString(),
+        rgb.b.toString(),
+        ColorValue.getFormattedColorNumber(
+          rgb.a ?? activeColor.getAlpha() / 255,
+          2,
+        ),
+      ]);
+    } else {
+      setInput([activeColor.toHexString(showAlpha)]);
+      setValidHexInput(true);
+    }
+  }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
+  const [validHexInput, setValidHexInput] = React.useState(true);
+  const swapColorFormat = React.useCallback(() => {
+    const newFormat =
+      allowedColorFormats[
+        (allowedColorFormats.indexOf(currentFormat) + 1) %
+          allowedColorFormats.length
+      ] ?? allowedColorFormats[0];
+    setCurrentFormat(newFormat);
+  }, [currentFormat, allowedColorFormats]);
+  const isFocusInside = (focused) =>
+    !!(
+      focused &&
+      inputsContainerRef.current &&
+      inputsContainerRef.current.contains(focused)
+    );
+  const handleColorInputChange = () => {
+    let color;
+    if (currentFormat === 'hex') {
+      try {
+        const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
+        color = ColorValue.create(value);
+        setValidHexInput(true);
+        if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
+          return;
         }
-        else if (currentFormat === 'rgb') {
-            const rgb = activeColor.toRgbColor();
-            setInput([
-                rgb.r.toString(),
-                rgb.g.toString(),
-                rgb.b.toString(),
-                ColorValue.getFormattedColorNumber((_b = rgb.a) !== null && _b !== void 0 ? _b : activeColor.getAlpha() / 255, 2),
-            ]);
+      } catch (_e) {
+        setValidHexInput(false);
+        return;
+      }
+    }
+    if (currentFormat === 'hsl') {
+      const [h, s, l, a] = input.map(Number);
+      if (
+        h < 0 ||
+        h > 360 ||
+        s < 0 ||
+        s > 100 ||
+        l < 0 ||
+        l > 100 ||
+        a < 0 ||
+        a > 1
+      ) {
+        return;
+      }
+      const hsl = activeColor.toHslColor();
+      if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
+        return;
+      }
+      color = ColorValue.create({ h, s, l, a });
+    }
+    if (currentFormat === 'rgb') {
+      const [r, g, b, a] = input.map(Number);
+      if (
+        r < 0 ||
+        r > 255 ||
+        g < 0 ||
+        g > 255 ||
+        b < 0 ||
+        b > 255 ||
+        a < 0 ||
+        a > 1
+      ) {
+        return;
+      }
+      const rgb = activeColor.toRgbColor();
+      if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
+        return;
+      }
+      color = ColorValue.create({ r, g, b, a });
+    }
+    if (color) {
+      applyHsvColorChange(color.toHsvColor(), true, color);
+    }
+  };
+  const hexInputField = React.createElement(Input, {
+    size: 'small',
+    maxLength: showAlpha ? 9 : 7,
+    minLength: 1,
+    placeholder: 'HEX',
+    value: input[0],
+    onChange: (event) => {
+      const value = event.target.value.startsWith('#')
+        ? event.target.value
+        : `#${event.target.value}`;
+      setInput([value]);
+    },
+    onKeyDown: (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        handleColorInputChange();
+      }
+    },
+    onBlur: (event) => {
+      event.preventDefault();
+      handleColorInputChange();
+    },
+    status: validHexInput ? undefined : 'negative',
+  });
+  const hslInputs = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '359',
+      step: '.1',
+      placeholder: 'H',
+      value: input[0] ?? '',
+      onChange: (event) => {
+        setInput([event.target.value, input[1], input[2], input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        else {
-            setInput([activeColor.toHexString(showAlpha)]);
-            setValidHexInput(true);
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
         }
-    }, [activeColor, hsvColor.h, currentFormat, showAlpha]);
-    const [validHexInput, setValidHexInput] = React.useState(true);
-    const swapColorFormat = React.useCallback(() => {
-        var _a;
-        const newFormat = (_a = allowedColorFormats[(allowedColorFormats.indexOf(currentFormat) + 1) %
-            allowedColorFormats.length]) !== null && _a !== void 0 ? _a : allowedColorFormats[0];
-        setCurrentFormat(newFormat);
-    }, [currentFormat, allowedColorFormats]);
-    const isFocusInside = (focused) => !!(focused &&
-        inputsContainerRef.current &&
-        inputsContainerRef.current.contains(focused));
-    const handleColorInputChange = () => {
-        let color;
-        if (currentFormat === 'hex') {
-            try {
-                const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
-                color = ColorValue.create(value);
-                setValidHexInput(true);
-                if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
-                    return;
-                }
-            }
-            catch (_e) {
-                setValidHexInput(false);
-                return;
-            }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '100',
+      step: '.1',
+      placeholder: 'S',
+      value: input[1] ?? '',
+      onChange: (event) => {
+        setInput([input[0], event.target.value, input[2], input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        if (currentFormat === 'hsl') {
-            const [h, s, l, a] = input.map(Number);
-            if (h < 0 ||
-                h > 360 ||
-                s < 0 ||
-                s > 100 ||
-                l < 0 ||
-                l > 100 ||
-                a < 0 ||
-                a > 1) {
-                return;
-            }
-            const hsl = activeColor.toHslColor();
-            if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
-                return;
-            }
-            color = ColorValue.create({ h, s, l, a });
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
         }
-        if (currentFormat === 'rgb') {
-            const [r, g, b, a] = input.map(Number);
-            if (r < 0 ||
-                r > 255 ||
-                g < 0 ||
-                g > 255 ||
-                b < 0 ||
-                b > 255 ||
-                a < 0 ||
-                a > 1) {
-                return;
-            }
-            const rgb = activeColor.toRgbColor();
-            if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
-                return;
-            }
-            color = ColorValue.create({ r, g, b, a });
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '100',
+      step: '.1',
+      placeholder: 'L',
+      value: input[2] ?? '',
+      onChange: (event) => {
+        setInput([input[0], input[1], event.target.value, input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
         }
-        if (color) {
-            applyHsvColorChange(color.toHsvColor(), true, color);
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
         }
-    };
-    const hexInputField = (React.createElement(InputContainer, { status: validHexInput ? undefined : 'negative' },
-        React.createElement(Input, { size: 'small', maxLength: showAlpha ? 9 : 7, minLength: 1, placeholder: 'HEX', value: input[0], onChange: (event) => {
-                const value = event.target.value.startsWith('#')
-                    ? event.target.value
-                    : `#${event.target.value}`;
-                setInput([value]);
-            }, onKeyDown: (event) => {
-                if (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleColorInputChange();
-                }
-            }, onBlur: (event) => {
-                event.preventDefault();
-                handleColorInputChange();
-            } })));
-    const hslInputs = (React.createElement(React.Fragment, null,
-        React.createElement(InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 360
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '359', step: '.1', placeholder: 'H', value: (_a = input[0]) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
-                    setInput([event.target.value, input[1], input[2], input[3]]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })),
-        React.createElement(InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 100
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'S', value: (_b = input[1]) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
-                    setInput([input[0], event.target.value, input[2], input[3]]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })),
-        React.createElement(InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 100
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '100', step: '.1', placeholder: 'L', value: (_c = input[2]) !== null && _c !== void 0 ? _c : '', onChange: (event) => {
-                    setInput([input[0], input[1], event.target.value, input[3]]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })),
-        showAlpha && (React.createElement(InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_d = input[3]) !== null && _d !== void 0 ? _d : '', onChange: (event) => {
-                    setInput([input[0], input[1], input[2], event.target.value]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })))));
-    const rgbInputs = (React.createElement(React.Fragment, null,
-        React.createElement(InputContainer, { status: Number(input[0]) < 0 || Number(input[0]) > 255
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'R', value: (_f = input[0]) !== null && _f !== void 0 ? _f : '', onChange: (event) => {
-                    setInput([event.target.value, input[1], input[2], input[3]]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })),
-        React.createElement(InputContainer, { status: Number(input[1]) < 0 || Number(input[1]) > 255
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'G', value: (_g = input[1]) !== null && _g !== void 0 ? _g : '', onChange: (event) => {
-                    setInput([input[0], event.target.value, input[2], input[3]]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })),
-        React.createElement(InputContainer, { status: Number(input[2]) < 0 || Number(input[2]) > 255
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '255', placeholder: 'B', value: (_h = input[2]) !== null && _h !== void 0 ? _h : '', onChange: (event) => {
-                    setInput([input[0], input[1], event.target.value, input[3]]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })),
-        showAlpha && (React.createElement(InputContainer, { status: Number(input[3]) < 0 || Number(input[3]) > 1
-                ? 'negative'
-                : undefined },
-            React.createElement(Input, { size: 'small', type: 'number', min: '0', max: '1', step: '.01', placeholder: 'A', value: (_j = input[3]) !== null && _j !== void 0 ? _j : '', onChange: (event) => {
-                    setInput([input[0], input[1], input[2], event.target.value]);
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        handleColorInputChange();
-                    }
-                }, onBlur: (event) => {
-                    event.preventDefault();
-                    if (!isFocusInside(event.relatedTarget)) {
-                        handleColorInputChange();
-                    }
-                } })))));
-    return (React.createElement(Box, { className: cx('iui-color-input-wrapper', className), ref: ref, ...rest },
-        React.createElement(Box, { className: 'iui-color-picker-section-label' }, showAlpha && currentFormat != 'hex'
-            ? currentFormat.toUpperCase() + 'A'
-            : currentFormat.toUpperCase()),
-        React.createElement(Box, { className: 'iui-color-input' },
-            allowedColorFormats.length > 1 && (React.createElement(IconButton, { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-                React.createElement(SvgSwap, null))),
-            React.createElement(Box, { ref: inputsContainerRef, className: 'iui-color-input-fields' },
-                currentFormat === 'hex' && hexInputField,
-                currentFormat === 'rgb' && rgbInputs,
-                currentFormat === 'hsl' && hslInputs))));
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
+    }),
+    showAlpha &&
+      React.createElement(Input, {
+        size: 'small',
+        type: 'number',
+        min: '0',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        value: input[3] ?? '',
+        onChange: (event) => {
+          setInput([input[0], input[1], input[2], event.target.value]);
+        },
+        onKeyDown: (event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            handleColorInputChange();
+          }
+        },
+        onBlur: (event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
+      }),
+  );
+  const rgbInputs = React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'R',
+      value: input[0] ?? '',
+      onChange: (event) => {
+        setInput([event.target.value, input[1], input[2], input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'G',
+      value: input[1] ?? '',
+      onChange: (event) => {
+        setInput([input[0], event.target.value, input[2], input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'B',
+      value: input[2] ?? '',
+      onChange: (event) => {
+        setInput([input[0], input[1], event.target.value, input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
+    }),
+    showAlpha &&
+      React.createElement(Input, {
+        size: 'small',
+        type: 'number',
+        min: '0',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        value: input[3] ?? '',
+        onChange: (event) => {
+          setInput([input[0], input[1], input[2], event.target.value]);
+        },
+        onKeyDown: (event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            handleColorInputChange();
+          }
+        },
+        onBlur: (event) => {
+          event.preventDefault();
+          if (!isFocusInside(event.relatedTarget)) {
+            handleColorInputChange();
+          }
+        },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
+      }),
+  );
+  return React.createElement(
+    Box,
+    { className: cx('iui-color-input-wrapper', className), ref: ref, ...rest },
+    React.createElement(
+      Box,
+      { className: 'iui-color-picker-section-label' },
+      showAlpha && currentFormat != 'hex'
+        ? currentFormat.toUpperCase() + 'A'
+        : currentFormat.toUpperCase(),
+    ),
+    React.createElement(
+      Box,
+      { className: 'iui-color-input' },
+      allowedColorFormats.length > 1 &&
+        React.createElement(
+          IconButton,
+          { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
+          React.createElement(SvgSwap, null),
+        ),
+      React.createElement(
+        Box,
+        { ref: inputsContainerRef, className: 'iui-color-input-fields' },
+        currentFormat === 'hex' && hexInputField,
+        currentFormat === 'rgb' && rgbInputs,
+        currentFormat === 'hsl' && hslInputs,
+      ),
+    ),
+  );
 });
 export default ColorInputPanel;