sanity-plugin-simpler-color-input
Version:
291 lines (290 loc) • 12.7 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function")
for (let key of __getOwnPropNames(from))
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
mod
));
Object.defineProperty(exports, "__esModule", { value: !0 });
var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), bi = require("react-icons/bi"), styled = require("styled-components");
function _interopDefaultCompat(e) {
return e && typeof e == "object" && "default" in e ? e : { default: e };
}
var styled__default = /* @__PURE__ */ _interopDefaultCompat(styled);
const SimplerColorInput = (props) => {
const [isOpen, setIsOpen] = react.useState(!1), [pickerIsOpen, setPickerIsOpen] = react.useState(!1), [searchValue, setSearchValue] = react.useState(""), { onChange } = props, value = props.value, type = props.schemaType, showColorValue = !!(type.options?.showColorValue ?? !0), [selectedColor, setSelectedColor] = react.useState(value), handleChange = react.useCallback(
(color) => {
setSelectedColor(color), setIsOpen(!1), onChange(sanity.set({ ...props.value, ...color }));
},
[onChange, props.value]
), colorList = type.options?.colorList || type.type?.options?.defaultColorList, colorFormat = type.options?.colorFormat ?? type.type?.options?.defaultColorFormat, enableSearch = !!(type.options?.enableSearch ?? type.type?.options?.enableSearch), filteredColorList = searchValue.length ? colorList?.filter((color) => color.label.toLowerCase().includes(searchValue.toLowerCase())) : colorList, handlePickerChange = (color) => {
let colorValue;
switch (colorFormat) {
case "hexa":
colorValue = color.hexa;
break;
case "rgb":
colorValue = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
break;
case "rgba":
colorValue = `rgba(${color.rgba.r}, ${color.rgba.g}, ${color.rgba.b}, ${color.rgba.a.toFixed(2)})`;
break;
case "hsl":
colorValue = `hsl(${color.hsl.h.toFixed(0)}, ${color.hsl.s.toFixed(
0
)}%, ${color.hsl.l.toFixed(0)}%)`;
break;
case "hsla":
colorValue = `hsla(${color.hsla.h.toFixed(0)}, ${color.hsla.s.toFixed(
0
)}%, ${color.hsla.l.toFixed(0)}%, ${color.hsla.a.toFixed(2)})`;
break;
default:
colorValue = color.hex;
break;
}
const formattedColor = {
label: "Custom",
value: colorValue
};
setSelectedColor(formattedColor), onChange(sanity.set({ ...props.value, ...formattedColor }));
}, ref = react.useRef(null);
react.useEffect(() => {
isOpen || setSearchValue("");
const handleClickOutside = (event) => {
ref.current && !ref.current.contains(event.target) && (setPickerIsOpen(!1), setIsOpen(!1));
};
return document.addEventListener("click", handleClickOutside, !0), () => {
document.removeEventListener("click", handleClickOutside, !0);
};
}, [isOpen, pickerIsOpen, ref]);
const isRequired = type.validation[0]._required === "required", [Component, setComponent] = react.useState(/* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }));
return react.useEffect(() => {
import("@uiw/react-color").then((module2) => {
const { Chrome, rgbStringToHsva, hslStringToHsva } = module2;
let pickerColor = selectedColor?.value || "#ffffff";
pickerColor.startsWith("rgb") ? pickerColor = rgbStringToHsva(pickerColor) : pickerColor.startsWith("hsl") && (pickerColor = hslStringToHsva(pickerColor)), setComponent(
/* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
ui.Popover,
{
ref,
content: /* @__PURE__ */ jsxRuntime.jsx(
Chrome,
{
onChange: handlePickerChange,
color: pickerColor,
showAlpha: colorFormat ? colorFormat.slice(-1) === "a" : !1
}
),
portal: !0,
open: pickerIsOpen,
children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
ui.Button,
{
style: {
width: "100%",
textAlign: "center",
borderTopRightRadius: isRequired ? "" : "0",
borderBottomRightRadius: isRequired ? "" : "0",
flexShrink: 1,
overflow: "hidden"
},
mode: "ghost",
padding: 2,
onClick: () => colorList && colorList.length > 0 ? setIsOpen(!isOpen) : setPickerIsOpen(!pickerIsOpen),
children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "center", gap: 4, children: [
/* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 1, overflow: "hidden", children: [
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
ui.Card,
{
style: { backgroundColor: selectedColor?.value || "#ffffff" },
radius: 2,
shadow: 1,
padding: 2,
margin: 1
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { ...showColorValue && { flexShrink: 0 } }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { weight: "semibold", textOverflow: "ellipsis", children: [
selectedColor?.label || "Select a color...",
" "
] }) }),
showColorValue && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { textOverflow: "ellipsis", children: selectedColor?.value }) })
] }),
/* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, { style: { flexShrink: 0 }, width: 32, height: 32 })
] })
}
),
!isRequired && /* @__PURE__ */ jsxRuntime.jsx(
ui.Button,
{
mode: "ghost",
onClick: () => {
if (value !== void 0 && value._key) {
const annotationValue = { _type: value._type, _key: value._key };
setSelectedColor(annotationValue), onChange(sanity.set(annotationValue));
} else
setSelectedColor(void 0), onChange(sanity.unset());
},
style: { borderTopLeftRadius: "0", borderBottomLeftRadius: "0" },
children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { width: 24, height: 24 }),
/* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "semibold", children: "Clear" })
] })
}
)
] })
}
),
isOpen && colorList && /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { radius: 2, shadow: 3, marginTop: 1, overflow: "hidden", children: [
enableSearch && /* @__PURE__ */ jsxRuntime.jsx(
ui.Box,
{
padding: 3,
style: {
borderBottom: "1px solid var(--card-border-color)"
},
children: /* @__PURE__ */ jsxRuntime.jsx(
ui.TextInput,
{
icon: icons.SearchIcon,
radius: 2,
placeholder: "Search",
onChange: (event) => {
setSearchValue(event.currentTarget.value);
},
autoFocus: !0
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { children: filteredColorList?.map(
(color) => color.value === "custom" ? /* @__PURE__ */ jsxRuntime.jsx(
ui.Button,
{
radius: 0,
mode: "bleed",
onClick: () => {
setIsOpen(!1), setPickerIsOpen(!0);
},
children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: color.label })
},
color.label
) : /* @__PURE__ */ jsxRuntime.jsx(
ui.Button,
{
radius: 0,
mode: "bleed",
onClick: () => handleChange(color),
children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
/* @__PURE__ */ jsxRuntime.jsx(
ui.Card,
{
style: { backgroundColor: color.value, width: "16px", height: "16px" },
radius: 2,
shadow: 1
}
),
/* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: color.label })
] }) })
},
color.label
)
) })
] })
] })
);
});
}, [isOpen, selectedColor, searchValue, pickerIsOpen]), Component;
}, ColorSpan$1 = styled__default.default.span`
& > span {
background-color: ${({ color }) => color};
border-bottom: unset;
color: inherit;
}
`, HighlightColorAnnotation = (props) => /* @__PURE__ */ jsxRuntime.jsx(ColorSpan$1, { color: props.value?.value || "", children: props.renderDefault(props) }), highlightColor = sanity.defineType({
title: "Highlight color",
type: "object",
name: "highlightColor",
icon: bi.BiHighlight,
components: {
annotation: HighlightColorAnnotation,
input: SimplerColorInput
},
fields: [
{
name: "label",
type: "string"
},
{
name: "value",
type: "string"
}
]
}), simplerColor = sanity.defineType({
title: "Simpler Color",
type: "object",
name: "simplerColor",
components: { input: SimplerColorInput },
fields: [
{
name: "label",
type: "string"
},
{
name: "value",
type: "string"
}
]
}), ColorSpan = styled__default.default.span`
& > span {
background-color: inherit;
border-bottom: unset;
color: ${({ color }) => color};
}
`, TextColorAnnotation = (props) => /* @__PURE__ */ jsxRuntime.jsx(ColorSpan, { color: props.value?.value || "", children: props.renderDefault(props) }), textColor = sanity.defineType({
title: "Text color",
type: "object",
name: "textColor",
icon: bi.BiFontColor,
components: {
annotation: TextColorAnnotation,
input: SimplerColorInput
},
fields: [
{
name: "label",
type: "string"
},
{
name: "value",
type: "string"
}
]
}), simplerColorInput = sanity.definePlugin((options) => ({
name: "sanity-plugin-simpler-color-input",
schema: {
types: [
{ ...simplerColor, options },
{ ...textColor, options },
{ ...highlightColor, options }
]
}
}));
exports.SimplerColorInput = SimplerColorInput;
exports.simplerColorInput = simplerColorInput;
//# sourceMappingURL=index.js.map