@wordpress/components
Version:
UI components for WordPress.
204 lines (192 loc) • 6.14 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useMemo } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
import CircularOptionPicker from '../circular-option-picker';
import CustomGradientPicker from '../custom-gradient-picker';
import { VStack } from '../v-stack';
import { ColorHeading } from '../color-palette/styles';
import { Spacer } from '../spacer';
// 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(_ref) {
let {
className,
clearGradient,
gradients,
onChange,
value,
actions
} = _ref;
const gradientOptions = useMemo(() => {
return gradients.map((_ref2, index) => {
let {
gradient,
name
} = _ref2;
return createElement(CircularOptionPicker.Option, {
key: gradient,
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)
});
});
}, [gradients, value, onChange, clearGradient]);
return createElement(CircularOptionPicker, {
className: className,
options: gradientOptions,
actions: actions
});
}
function MultipleOrigin(_ref3) {
let {
className,
clearGradient,
gradients,
onChange,
value,
actions,
headingLevel
} = _ref3;
return createElement(VStack, {
spacing: 3,
className: className
}, gradients.map((_ref4, index) => {
let {
name,
gradients: gradientSet
} = _ref4;
return createElement(VStack, {
spacing: 2,
key: index
}, createElement(ColorHeading, {
level: headingLevel
}, name), createElement(SingleOrigin, _extends({
clearGradient: clearGradient,
gradients: gradientSet,
onChange: gradient => onChange(gradient, index),
value: value
}, gradients.length === index + 1 ? {
actions
} : {})));
}));
}
function Component(props) {
if (isMultipleOriginArray(props.gradients)) {
return createElement(MultipleOrigin, props);
}
return createElement(SingleOrigin, props);
}
/**
* 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 { GradientPicker } from '@wordpress/components';
*import { useState } from '@wordpress/element';
*
*const myGradientPicker = () => {
* const [ gradient, setGradient ] = useState( null );
*
* return (
* <GradientPicker
* __nextHasNoMargin
* 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(_ref5) {
let {
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMargin = false,
className,
gradients = [],
onChange,
value,
clearable = true,
disableCustomGradients = false,
__experimentalIsRenderedInSidebar,
headingLevel = 2
} = _ref5;
const clearGradient = useCallback(() => onChange(undefined), [onChange]);
if (!__nextHasNoMargin) {
deprecated('Outer margin styles for wp.components.GradientPicker', {
since: '6.1',
version: '6.4',
hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
});
}
const deprecatedMarginSpacerProps = !__nextHasNoMargin ? {
marginTop: !gradients.length ? 3 : undefined,
marginBottom: !clearable ? 6 : 0
} : {};
return (// Outmost Spacer wrapper can be removed when deprecation period is over
createElement(Spacer, _extends({
marginBottom: 0
}, deprecatedMarginSpacerProps), createElement(VStack, {
spacing: gradients.length ? 4 : 0
}, !disableCustomGradients && createElement(CustomGradientPicker, {
__nextHasNoMargin: true,
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
value: value,
onChange: onChange
}), (gradients.length || clearable) && createElement(Component, {
className: className,
clearGradient: clearGradient,
gradients: gradients,
onChange: onChange,
value: value,
actions: clearable && !disableCustomGradients && createElement(CircularOptionPicker.ButtonAction, {
onClick: clearGradient
}, __('Clear')),
headingLevel: headingLevel
})))
);
}
export default GradientPicker;
//# sourceMappingURL=index.js.map