@wordpress/components
Version:
UI components for WordPress.
201 lines (199 loc) • 6.14 kB
JavaScript
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { useInstanceId } from '@wordpress/compose';
import { useCallback, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';
import CustomGradientPicker from '../custom-gradient-picker';
import { VStack } from '../v-stack';
import { ColorHeading } from '../color-palette/styles';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// The Multiple Origin Gradients have a `gradients` property (an array of
// gradient objects), while Single Origin ones have a `gradient` property.
const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);
const isMultipleOriginArray = arr => {
return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
};
function SingleOrigin({
className,
clearGradient,
gradients,
onChange,
value,
...additionalProps
}) {
const gradientOptions = useMemo(() => {
return gradients.map(({
gradient,
name,
slug
}, index) => /*#__PURE__*/_jsx(CircularOptionPicker.Option, {
value: gradient,
isSelected: value === gradient,
tooltipText: name ||
// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
sprintf(__('Gradient code: %s'), gradient),
style: {
color: 'rgba( 0,0,0,0 )',
background: gradient
},
onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
"aria-label": name ?
// translators: %s: The name of the gradient e.g: "Angular red to blue".
sprintf(__('Gradient: %s'), name) :
// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
sprintf(__('Gradient code: %s'), gradient)
}, slug));
}, [gradients, value, onChange, clearGradient]);
return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {
className: className,
options: gradientOptions,
...additionalProps
});
}
function MultipleOrigin({
className,
clearGradient,
gradients,
onChange,
value,
headingLevel
}) {
const instanceId = useInstanceId(MultipleOrigin);
return /*#__PURE__*/_jsx(VStack, {
spacing: 3,
className: className,
children: gradients.map(({
name,
gradients: gradientSet
}, index) => {
const id = `color-palette-${instanceId}-${index}`;
return /*#__PURE__*/_jsxs(VStack, {
spacing: 2,
children: [/*#__PURE__*/_jsx(ColorHeading, {
level: headingLevel,
id: id,
children: name
}), /*#__PURE__*/_jsx(SingleOrigin, {
clearGradient: clearGradient,
gradients: gradientSet,
onChange: gradient => onChange(gradient, index),
value: value,
"aria-labelledby": id
})]
}, index);
})
});
}
function Component(props) {
const {
asButtons,
loop,
actions,
headingLevel,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
...additionalProps
} = props;
const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {
headingLevel: headingLevel,
...additionalProps
}) : /*#__PURE__*/_jsx(SingleOrigin, {
...additionalProps
});
const {
metaProps,
labelProps
} = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
return /*#__PURE__*/_jsx(CircularOptionPicker, {
...metaProps,
...labelProps,
actions: actions,
options: options
});
}
/**
* GradientPicker is a React component that renders a color gradient picker to
* define a multi step gradient. There's either a _linear_ or a _radial_ type
* available.
*
* ```jsx
* import { useState } from 'react';
* import { GradientPicker } from '@wordpress/components';
*
* const MyGradientPicker = () => {
* const [ gradient, setGradient ] = useState( null );
*
* return (
* <GradientPicker
* value={ gradient }
* onChange={ ( currentGradient ) => setGradient( currentGradient ) }
* gradients={ [
* {
* name: 'JShine',
* gradient:
* 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
* slug: 'jshine',
* },
* {
* name: 'Moonlit Asteroid',
* gradient:
* 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
* slug: 'moonlit-asteroid',
* },
* {
* name: 'Rastafarie',
* gradient:
* 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
* slug: 'rastafari',
* },
* ] }
* />
* );
* };
*```
*
*/
export function GradientPicker({
className,
gradients = [],
onChange,
value,
clearable = true,
enableAlpha = true,
disableCustomGradients = false,
__experimentalIsRenderedInSidebar,
headingLevel = 2,
...additionalProps
}) {
const clearGradient = useCallback(() => onChange(undefined), [onChange]);
return /*#__PURE__*/_jsxs(VStack, {
spacing: gradients.length ? 4 : 0,
children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
enableAlpha: enableAlpha,
value: value,
onChange: onChange
}), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {
...additionalProps,
className: className,
clearGradient: clearGradient,
gradients: gradients,
onChange: onChange,
value: value,
actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
onClick: clearGradient,
accessibleWhenDisabled: true,
disabled: !value,
children: __('Clear')
}),
headingLevel: headingLevel
})]
});
}
export default GradientPicker;
//# sourceMappingURL=index.js.map