@wordpress/components
Version:
UI components for WordPress.
151 lines (149 loc) • 6.03 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__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: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/duotone-picker/duotone-picker.tsx
var duotone_picker_exports = {};
__export(duotone_picker_exports, {
default: () => duotone_picker_default
});
module.exports = __toCommonJS(duotone_picker_exports);
var import_es6 = __toESM(require("fast-deep-equal/es6"));
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_color_list_picker = __toESM(require("./color-list-picker"));
var import_circular_option_picker = __toESM(require("../circular-option-picker"));
var import_v_stack = require("../v-stack");
var import_custom_duotone_bar = __toESM(require("./custom-duotone-bar"));
var import_utils = require("./utils");
var import_spacer = require("../spacer");
var import_jsx_runtime = require("react/jsx-runtime");
function DuotonePicker({
asButtons,
loop,
clearable = true,
unsetable = true,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
onChange,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
...otherProps
}) {
const [defaultDark, defaultLight] = (0, import_element.useMemo)(() => (0, import_utils.getDefaultColors)(colorPalette), [colorPalette]);
const isUnset = value === "unset";
const unsetOptionLabel = (0, import_i18n.__)("Unset");
const unsetOption = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
value: "unset",
isSelected: isUnset,
tooltipText: unsetOptionLabel,
"aria-label": unsetOptionLabel,
className: "components-duotone-picker__color-indicator",
onClick: () => {
onChange(isUnset ? void 0 : "unset");
}
}, "unset");
const duotoneOptions = duotonePalette.map(({
colors,
slug,
name
}) => {
const style = {
background: (0, import_utils.getGradientFromCSSColors)(colors, "135deg"),
color: "transparent"
};
const tooltipText = name !== null && name !== void 0 ? name : (0, import_i18n.sprintf)(
// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
(0, import_i18n.__)("Duotone code: %s"),
slug
);
const label = name ? (0, import_i18n.sprintf)(
// translators: %s: The name of the option e.g: "Dark grayscale".
(0, import_i18n.__)("Duotone: %s"),
name
) : tooltipText;
const isSelected = (0, import_es6.default)(colors, value);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
value: colors,
isSelected,
"aria-label": label,
tooltipText,
style,
onClick: () => {
onChange(isSelected ? void 0 : colors);
}
}, slug);
});
const {
metaProps,
labelProps
} = (0, import_circular_option_picker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default, {
...otherProps,
...metaProps,
...labelProps,
options,
actions: !!clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.ButtonAction, {
onClick: () => onChange(void 0),
accessibleWhenDisabled: true,
disabled: !value,
children: (0, import_i18n.__)("Clear")
}),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
paddingTop: options.length === 0 ? 0 : 4,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
spacing: 3,
children: [!disableCustomColors && !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_duotone_bar.default, {
value: isUnset ? void 0 : value,
onChange
}), !disableCustomDuotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_list_picker.default, {
labels: [(0, import_i18n.__)("Shadows"), (0, import_i18n.__)("Highlights")],
colors: colorPalette,
value: isUnset ? void 0 : value,
disableCustomColors,
enableAlpha: true,
onChange: (newColors) => {
if (!newColors[0]) {
newColors[0] = defaultDark;
}
if (!newColors[1]) {
newColors[1] = defaultLight;
}
const newValue = newColors.length >= 2 ? newColors : void 0;
onChange(newValue);
}
})]
})
})
});
}
var duotone_picker_default = DuotonePicker;
//# sourceMappingURL=duotone-picker.js.map