@wordpress/components
Version:
UI components for WordPress.
279 lines (273 loc) • 10.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColorPalette = void 0;
exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
exports.default = void 0;
var _colord = require("colord");
var _names = _interopRequireDefault(require("colord/plugins/names"));
var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _colorPicker = require("../color-picker");
var _circularOptionPicker = _interopRequireWildcard(require("../circular-option-picker"));
var _vStack = require("../v-stack");
var _truncate = require("../truncate");
var _styles = require("./styles");
var _dropdownContentWrapper = _interopRequireDefault(require("../dropdown/dropdown-content-wrapper"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
(0, _colord.extend)([_names.default, _a11y.default]);
function SinglePalette({
className,
clearColor,
colors,
onChange,
value,
...additionalProps
}) {
const colorOptions = (0, _element.useMemo)(() => {
return colors.map(({
color,
name
}, index) => {
const colordColor = (0, _colord.colord)(color);
const isSelected = value === color;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
isSelected: isSelected,
selectedIconProps: isSelected ? {
fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
} : {},
tooltipText: name ||
// translators: %s: color hex code e.g: "#f00".
(0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color),
style: {
backgroundColor: color,
color
},
onClick: isSelected ? clearColor : () => onChange(color, index)
}, `${color}-${index}`);
});
}, [colors, value, onChange, clearColor]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.OptionGroup, {
className: className,
options: colorOptions,
...additionalProps
});
}
function MultiplePalettes({
className,
clearColor,
colors,
onChange,
value,
headingLevel
}) {
const instanceId = (0, _compose.useInstanceId)(MultiplePalettes, 'color-palette');
if (colors.length === 0) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
spacing: 3,
className: className,
children: colors.map(({
name,
colors: colorPalette
}, index) => {
const id = `${instanceId}-${index}`;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
spacing: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ColorHeading, {
id: id,
level: headingLevel,
children: name
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(SinglePalette, {
clearColor: clearColor,
colors: colorPalette,
onChange: newColor => onChange(newColor, index),
value: value,
"aria-labelledby": id
})]
}, index);
})
});
}
function CustomColorPickerDropdown({
isRenderedInSidebar,
popoverProps: receivedPopoverProps,
...props
}) {
const popoverProps = (0, _element.useMemo)(() => ({
shift: true,
// Disabling resize as it would otherwise cause the popover to show
// scrollbars while dragging the color picker's handle close to the
// popover edge.
resize: false,
...(isRenderedInSidebar ? {
// When in the sidebar: open to the left (stacking),
// leaving the same gap as the parent popover.
placement: 'left-start',
offset: 34
} : {
// Default behavior: open below the anchor
placement: 'bottom',
offset: 8
}),
...receivedPopoverProps
}), [isRenderedInSidebar, receivedPopoverProps]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
contentClassName: "components-color-palette__custom-color-dropdown-content",
popoverProps: popoverProps,
...props
});
}
function UnforwardedColorPalette(props, forwardedRef) {
const {
asButtons,
loop,
clearable = true,
colors = [],
disableCustomColors = false,
enableAlpha = false,
onChange,
value,
__experimentalIsRenderedInSidebar = false,
headingLevel = 2,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
...additionalProps
} = props;
const [normalizedColorValue, setNormalizedColorValue] = (0, _element.useState)(value);
const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
const customColorPaletteCallbackRef = (0, _element.useCallback)(node => {
setNormalizedColorValue((0, _utils.normalizeColorValue)(value, node));
}, [value]);
const hasMultipleColorOrigins = (0, _utils.isMultiplePaletteArray)(colors);
const buttonLabelName = (0, _element.useMemo)(() => (0, _utils.extractColorNameFromCurrentValue)(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
const renderCustomColorPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownContentWrapper.default, {
paddingSize: "none",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
color: normalizedColorValue,
onChange: color => onChange(color),
enableAlpha: enableAlpha
})
});
const isHex = value?.startsWith('#');
// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
const customColorAccessibleLabel = !!displayValue ? (0, _i18n.sprintf)(
// translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
(0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0, _i18n.__)('Custom color picker');
const paletteCommonProps = {
clearColor,
onChange,
value
};
const actions = !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
onClick: clearColor,
accessibleWhenDisabled: true,
disabled: !value,
children: (0, _i18n.__)('Clear')
});
const {
metaProps,
labelProps
} = (0, _circularOptionPicker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
spacing: 3,
ref: forwardedRef,
...additionalProps,
children: [!disableCustomColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomColorPickerDropdown, {
isRenderedInSidebar: __experimentalIsRenderedInSidebar,
renderContent: renderCustomColorPicker,
renderToggle: ({
isOpen,
onToggle
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
className: "components-color-palette__custom-color-wrapper",
spacing: 0,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
ref: customColorPaletteCallbackRef,
className: "components-color-palette__custom-color-button",
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: onToggle,
"aria-label": customColorAccessibleLabel,
style: {
background: value
},
type: "button"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
className: "components-color-palette__custom-color-text-wrapper",
spacing: 0.5,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_truncate.Truncate, {
className: "components-color-palette__custom-color-name",
children: value ? buttonLabelName : (0, _i18n.__)('No color selected')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncate.Truncate, {
className: (0, _clsx.default)('components-color-palette__custom-color-value', {
'components-color-palette__custom-color-value--is-hex': isHex
}),
children: displayValue
})]
})]
})
}), (colors.length > 0 || actions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default, {
...metaProps,
...labelProps,
actions: actions,
options: hasMultipleColorOrigins ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiplePalettes, {
...paletteCommonProps,
headingLevel: headingLevel,
colors: colors,
value: value
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SinglePalette, {
...paletteCommonProps,
colors: colors,
value: value
})
})]
});
}
/**
* Allows the user to pick a color from a list of pre-defined color entries.
*
* ```jsx
* import { ColorPalette } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const MyColorPalette = () => {
* const [ color, setColor ] = useState ( '#f00' )
* const colors = [
* { name: 'red', color: '#f00' },
* { name: 'white', color: '#fff' },
* { name: 'blue', color: '#00f' },
* ];
* return (
* <ColorPalette
* colors={ colors }
* value={ color }
* onChange={ ( color ) => setColor( color ) }
* />
* );
* } );
* ```
*/
const ColorPalette = exports.ColorPalette = (0, _element.forwardRef)(UnforwardedColorPalette);
var _default = exports.default = ColorPalette;
//# sourceMappingURL=index.js.map