@sanity/color-input 4.0.0 → 4.0.1-canary.0

package/lib/_chunks-cjs/ColorInput.js

@@ -0,0 +1,63 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), sanity = require("sanity"), useEffectEvent = require("use-effect-event"), index = require("./index.js");
+const DEFAULT_COLOR = {
+  hex: "#24a3e3",
+  hsl: { h: 200, s: 0.7732, l: 0.5156, a: 1 },
+  hsv: { h: 200, s: 0.8414, v: 0.8901, a: 1 },
+  rgb: { r: 46, g: 163, b: 227, a: 1 },
+  source: "hex"
+};
+function ColorInput(props) {
+  const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = react.useRef(null), [color, setColor] = react.useState(value);
+  react.useEffect(() => react.startTransition(() => setColor(value)), [value]);
+  const [emitColor, setEmitColor] = react.useState(void 0), debouncedColor = react.useDeferredValue(emitColor), handleChange = useEffectEvent.useEffectEvent((nextColor) => {
+    const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field) => {
+      const nextFieldValue = nextColor[field.name], isObject = field.type.jsonType === "object";
+      return sanity.set(
+        isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
+        [field.name]
+      );
+    });
+    onChange([
+      sanity.setIfMissing({ _type: type.name }),
+      sanity.set(type.name, ["_type"]),
+      sanity.set(nextColor.rgb?.a, ["alpha"]),
+      ...fieldPatches
+    ]);
+  });
+  react.useEffect(() => {
+    if (!debouncedColor) return;
+    const raf = requestAnimationFrame(() => handleChange(debouncedColor));
+    return () => cancelAnimationFrame(raf);
+  }, [debouncedColor, handleChange]);
+  const handleCreateColor = react.useCallback(() => {
+    setColor(DEFAULT_COLOR), setEmitColor(DEFAULT_COLOR);
+  }, []), handleColorChange = react.useCallback((nextColor) => {
+    setColor(nextColor), setEmitColor(nextColor);
+  }, []), handleUnset = react.useCallback(() => {
+    setColor(void 0), onChange(sanity.unset());
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && value.hex ? /* @__PURE__ */ jsxRuntime.jsx(
+    index.ColorPicker,
+    {
+      color,
+      onChange: handleColorChange,
+      readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
+      disableAlpha: !!type.options?.disableAlpha,
+      colorList: type.options?.colorList,
+      onUnset: handleUnset
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
+      icon: icons.AddIcon,
+      mode: "ghost",
+      text: "Create color",
+      ref: focusRef,
+      disabled: !!readOnly,
+      onClick: handleCreateColor
+    }
+  ) });
+}
+exports.default = ColorInput;
+//# sourceMappingURL=ColorInput.js.map

package/lib/_chunks-cjs/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sources":["../../src/ColorInput.tsx"],"sourcesContent":["import {AddIcon} from '@sanity/icons'\nimport {Button} from '@sanity/ui'\nimport {startTransition, useCallback, useDeferredValue, useEffect, useRef, useState} from 'react'\nimport type {Color, HSLColor, HSVColor, RGBColor} from 'react-color'\nimport {\n  type ObjectInputProps,\n  type ObjectOptions,\n  type ObjectSchemaType,\n  set,\n  setIfMissing,\n  unset,\n} from 'sanity'\nimport {useEffectEvent} from 'use-effect-event'\n\nimport {ColorPicker} from './ColorPicker'\n\nexport interface ColorValue {\n  hex: string\n  hsl: HSLColor\n  hsv: HSVColor\n  rgb: RGBColor\n}\n\nconst DEFAULT_COLOR: ColorValue & {source: string} = {\n  hex: '#24a3e3',\n  hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},\n  hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},\n  rgb: {r: 46, g: 163, b: 227, a: 1},\n  source: 'hex',\n}\n\nexport interface ColorOptions extends Omit<ObjectOptions, 'columns'> {\n  disableAlpha?: boolean\n  colorList?: Array<Color>\n}\n\nexport type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {\n  options?: ColorOptions\n}\nexport type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>\n\nexport default function ColorInput(props: ObjectInputProps) {\n  const {onChange, readOnly} = props\n  const value = props.value as ColorValue | undefined\n  const type = props.schemaType as ColorSchemaType\n  const focusRef = useRef<HTMLButtonElement>(null)\n\n  // use local state so we can have instant ui updates while debouncing patch emits\n  const [color, setColor] = useState(value)\n  // Marking the `setColor` in a transition allows React to interrupt render should the user start dragging the input before React is finished rendering\n  useEffect(() => startTransition(() => setColor(value)), [value])\n\n  // The color picker emits onChange events continuously while the user is sliding the\n  // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches\n  // and massively improve render performance and avoid jank\n  const [emitColor, setEmitColor] = useState<typeof value>(undefined)\n  const debouncedColor = useDeferredValue(emitColor)\n  const handleChange = useEffectEvent((nextColor: ColorValue) => {\n    const fieldPatches = type.fields\n      .filter((field) => field.name in nextColor)\n      .map((field) => {\n        const nextFieldValue = nextColor[field.name as keyof ColorValue]\n        const isObject = field.type.jsonType === 'object'\n        return set(\n          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n          [field.name],\n        )\n      })\n\n    onChange([\n      setIfMissing({_type: type.name}),\n      set(type.name, ['_type']),\n      set(nextColor.rgb?.a, ['alpha']),\n      ...fieldPatches,\n    ])\n  })\n  useEffect(() => {\n    if (!debouncedColor) return undefined\n    const raf = requestAnimationFrame(() => handleChange(debouncedColor))\n    return () => cancelAnimationFrame(raf)\n  }, [debouncedColor, handleChange])\n\n  const handleCreateColor = useCallback(() => {\n    setColor(DEFAULT_COLOR)\n    setEmitColor(DEFAULT_COLOR)\n  }, [])\n\n  const handleColorChange = useCallback((nextColor: ColorValue) => {\n    setColor(nextColor)\n    setEmitColor(nextColor)\n  }, [])\n\n  const handleUnset = useCallback(() => {\n    setColor(undefined)\n    onChange(unset())\n  }, [onChange])\n\n  return (\n    <>\n      {value && value.hex ? (\n        <ColorPicker\n          color={color}\n          onChange={handleColorChange}\n          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}\n          disableAlpha={!!type.options?.disableAlpha}\n          colorList={type.options?.colorList}\n          onUnset={handleUnset}\n        />\n      ) : (\n        <Button\n          icon={AddIcon}\n          mode=\"ghost\"\n          text=\"Create color\"\n          ref={focusRef}\n          disabled={Boolean(readOnly)}\n          onClick={handleCreateColor}\n        />\n      )}\n    </>\n  )\n}\n"],"names":["useRef","useState","useEffect","startTransition","useDeferredValue","useEffectEvent","set","setIfMissing","useCallback","unset","jsx","Fragment","ColorPicker","Button","AddIcon"],"mappings":";;AAuBA,MAAM,gBAA+C;AAAA,EACnD,KAAK;AAAA,EACL,KAAK,EAAC,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,EAAC;AAAA,EACxC,KAAK,EAAC,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,EAAC;AAAA,EACxC,KAAK,EAAC,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,EAAC;AAAA,EACjC,QAAQ;AACV;AAYA,SAAwB,WAAW,OAAyB;AACpD,QAAA,EAAC,UAAU,aAAY,OACvB,QAAQ,MAAM,OACd,OAAO,MAAM,YACb,WAAWA,MAAAA,OAA0B,IAAI,GAGzC,CAAC,OAAO,QAAQ,IAAIC,eAAS,KAAK;AAE9BC,kBAAA,MAAMC,sBAAgB,MAAM,SAAS,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AAK/D,QAAM,CAAC,WAAW,YAAY,IAAIF,eAAuB,MAAS,GAC5D,iBAAiBG,MAAAA,iBAAiB,SAAS,GAC3C,eAAeC,eAAA,eAAe,CAAC,cAA0B;AAC7D,UAAM,eAAe,KAAK,OACvB,OAAO,CAAC,UAAU,MAAM,QAAQ,SAAS,EACzC,IAAI,CAAC,UAAU;AACR,YAAA,iBAAiB,UAAU,MAAM,IAAwB,GACzD,WAAW,MAAM,KAAK,aAAa;AAClC,aAAAC,OAAA;AAAA,QACL,WAAW,OAAO,OAAO,EAAC,OAAO,MAAM,KAAK,KAAA,GAAO,cAAc,IAAI;AAAA,QACrE,CAAC,MAAM,IAAI;AAAA,MAAA;AAAA,IACb,CACD;AAEM,aAAA;AAAA,MACPC,OAAAA,aAAa,EAAC,OAAO,KAAK,MAAK;AAAA,MAC/BD,OAAAA,IAAI,KAAK,MAAM,CAAC,OAAO,CAAC;AAAA,MACxBA,OAAAA,IAAI,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;AAAA,MAC/B,GAAG;AAAA,IAAA,CACJ;AAAA,EAAA,CACF;AACDJ,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,eAAgB;AACrB,UAAM,MAAM,sBAAsB,MAAM,aAAa,cAAc,CAAC;AAC7D,WAAA,MAAM,qBAAqB,GAAG;AAAA,EAAA,GACpC,CAAC,gBAAgB,YAAY,CAAC;AAE3B,QAAA,oBAAoBM,MAAAA,YAAY,MAAM;AACjC,aAAA,aAAa,GACtB,aAAa,aAAa;AAAA,KACzB,CAAE,CAAA,GAEC,oBAAoBA,MAAA,YAAY,CAAC,cAA0B;AACtD,aAAA,SAAS,GAClB,aAAa,SAAS;AAAA,KACrB,EAAE,GAEC,cAAcA,MAAAA,YAAY,MAAM;AACpC,aAAS,MAAS,GAClB,SAASC,OAAAA,MAAO,CAAA;AAAA,EAAA,GACf,CAAC,QAAQ,CAAC;AAGX,SAAAC,2BAAAA,IAAAC,WAAAA,UAAA,EACG,UAAS,SAAA,MAAM,MACdD,2BAAA;AAAA,IAACE,MAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,UAAU,YAAa,OAAO,KAAK,YAAa,aAAa,KAAK;AAAA,MAClE,cAAc,CAAC,CAAC,KAAK,SAAS;AAAA,MAC9B,WAAW,KAAK,SAAS;AAAA,MACzB,SAAS;AAAA,IAAA;AAAA,EAAA,IAGXF,2BAAA;AAAA,IAACG,GAAA;AAAA,IAAA;AAAA,MACC,MAAMC,MAAA;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,KAAK;AAAA,MACL,UAAU,CAAQ,CAAA;AAAA,MAClB,SAAS;AAAA,IAAA;AAAA,EAGf,EAAA,CAAA;AAEJ;;"}