@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 7.88 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/duotone-picker/duotone-picker.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n asButtons,\n loop,\n clearable = true,\n unsetable = true,\n colorPalette,\n duotonePalette,\n disableCustomColors,\n disableCustomDuotone,\n value,\n onChange,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n ...otherProps\n}) {\n const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n const isUnset = value === 'unset';\n const unsetOptionLabel = __('Unset');\n const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n value: \"unset\",\n isSelected: isUnset,\n tooltipText: unsetOptionLabel,\n \"aria-label\": unsetOptionLabel,\n className: \"components-duotone-picker__color-indicator\",\n onClick: () => {\n onChange(isUnset ? undefined : 'unset');\n }\n }, \"unset\");\n const duotoneOptions = duotonePalette.map(({\n colors,\n slug,\n name\n }) => {\n const style = {\n background: getGradientFromCSSColors(colors, '135deg'),\n color: 'transparent'\n };\n const tooltipText = name ?? sprintf(\n // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n __('Duotone code: %s'), slug);\n const label = name ? sprintf(\n // translators: %s: The name of the option e.g: \"Dark grayscale\".\n __('Duotone: %s'), name) : tooltipText;\n const isSelected = fastDeepEqual(colors, value);\n return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n value: colors,\n isSelected: isSelected,\n \"aria-label\": label,\n tooltipText: tooltipText,\n style: style,\n onClick: () => {\n onChange(isSelected ? undefined : colors);\n }\n }, slug);\n });\n const {\n metaProps,\n labelProps\n } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n return /*#__PURE__*/_jsx(CircularOptionPicker, {\n ...otherProps,\n ...metaProps,\n ...labelProps,\n options: options,\n actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n onClick: () => onChange(undefined),\n accessibleWhenDisabled: true,\n disabled: !value,\n children: __('Clear')\n }),\n children: /*#__PURE__*/_jsx(Spacer, {\n paddingTop: options.length === 0 ? 0 : 4,\n children: /*#__PURE__*/_jsxs(VStack, {\n spacing: 3,\n children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n value: isUnset ? undefined : value,\n onChange: onChange\n }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n labels: [__('Shadows'), __('Highlights')],\n colors: colorPalette,\n value: isUnset ? undefined : value,\n disableCustomColors: disableCustomColors,\n enableAlpha: true,\n onChange: newColors => {\n if (!newColors[0]) {\n newColors[0] = defaultDark;\n }\n if (!newColors[1]) {\n newColors[1] = defaultLight;\n }\n const newValue = newColors.length >= 2 ? newColors : undefined;\n // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n // but it's currently typed as a string[].\n // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n onChange(newValue);\n }\n })]\n })\n })\n });\n}\nexport default DuotonePicker;"],
"mappings": "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",
"names": ["_jsx", "CircularOptionPicker", "fastDeepEqual", "_jsxs", "CustomDuotoneBar", "ColorListPicker"]
}