@wordpress/components
Version:
UI components for WordPress.
168 lines (164 loc) • 6.54 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _colorListPicker = _interopRequireDefault(require("./color-list-picker"));
var _circularOptionPicker = _interopRequireWildcard(require("../circular-option-picker"));
var _vStack = require("../v-stack");
var _customDuotoneBar = _interopRequireDefault(require("./custom-duotone-bar"));
var _utils = require("./utils");
var _spacer = require("../spacer");
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
*/
/**
* ```jsx
* import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const DUOTONE_PALETTE = [
* { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
* { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
* ];
*
* const COLOR_PALETTE = [
* { color: '#ff4747', name: 'Red', slug: 'red' },
* { color: '#fcff41', name: 'Yellow', slug: 'yellow' },
* { color: '#000097', name: 'Blue', slug: 'blue' },
* { color: '#8c00b7', name: 'Purple', slug: 'purple' },
* ];
*
* const Example = () => {
* const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
* return (
* <>
* <DuotonePicker
* duotonePalette={ DUOTONE_PALETTE }
* colorPalette={ COLOR_PALETTE }
* value={ duotone }
* onChange={ setDuotone }
* />
* <DuotoneSwatch values={ duotone } />
* </>
* );
* };
* ```
*/
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, _element.useMemo)(() => (0, _utils.getDefaultColors)(colorPalette), [colorPalette]);
const isUnset = value === 'unset';
const unsetOptionLabel = (0, _i18n.__)('Unset');
const unsetOption = /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
value: "unset",
isSelected: isUnset,
tooltipText: unsetOptionLabel,
"aria-label": unsetOptionLabel,
className: "components-duotone-picker__color-indicator",
onClick: () => {
onChange(isUnset ? undefined : 'unset');
}
}, "unset");
const duotoneOptions = duotonePalette.map(({
colors,
slug,
name
}) => {
const style = {
background: (0, _utils.getGradientFromCSSColors)(colors, '135deg'),
color: 'transparent'
};
const tooltipText = name !== null && name !== void 0 ? name : (0, _i18n.sprintf)(
// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
(0, _i18n.__)('Duotone code: %s'), slug);
const label = name ? (0, _i18n.sprintf)(
// translators: %s: The name of the option e.g: "Dark grayscale".
(0, _i18n.__)('Duotone: %s'), name) : tooltipText;
const isSelected = (0, _es.default)(colors, value);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
value: colors,
isSelected: isSelected,
"aria-label": label,
tooltipText: tooltipText,
style: style,
onClick: () => {
onChange(isSelected ? undefined : colors);
}
}, slug);
});
const {
metaProps,
labelProps
} = (0, _circularOptionPicker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default, {
...otherProps,
...metaProps,
...labelProps,
options: options,
actions: !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
onClick: () => onChange(undefined),
accessibleWhenDisabled: true,
disabled: !value,
children: (0, _i18n.__)('Clear')
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
paddingTop: options.length === 0 ? 0 : 4,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
spacing: 3,
children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_customDuotoneBar.default, {
value: isUnset ? undefined : value,
onChange: onChange
}), !disableCustomDuotone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorListPicker.default, {
labels: [(0, _i18n.__)('Shadows'), (0, _i18n.__)('Highlights')],
colors: colorPalette,
value: isUnset ? undefined : value,
disableCustomColors: disableCustomColors,
enableAlpha: true,
onChange: newColors => {
if (!newColors[0]) {
newColors[0] = defaultDark;
}
if (!newColors[1]) {
newColors[1] = defaultLight;
}
const newValue = newColors.length >= 2 ? newColors : undefined;
// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
// but it's currently typed as a string[].
// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
onChange(newValue);
}
})]
})
})
});
}
var _default = exports.default = DuotonePicker;
//# sourceMappingURL=duotone-picker.js.map