@wordpress/components
Version:
UI components for WordPress.
212 lines (208 loc) • 7.57 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GradientPicker = GradientPicker;
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _circularOptionPicker = _interopRequireWildcard(require("../circular-option-picker"));
var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));
var _vStack = require("../v-stack");
var _styles = require("../color-palette/styles");
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; }
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// 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 = (0, _element.useMemo)(() => {
return gradients.map(({
gradient,
name,
slug
}, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.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%);".
(0, _i18n.sprintf)((0, _i18n.__)('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".
(0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) :
// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
(0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
}, slug));
}, [gradients, value, onChange, clearGradient]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.OptionGroup, {
className: className,
options: gradientOptions,
...additionalProps
});
}
function MultipleOrigin({
className,
clearGradient,
gradients,
onChange,
value,
headingLevel
}) {
const instanceId = (0, _compose.useInstanceId)(MultipleOrigin);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
spacing: 3,
className: className,
children: gradients.map(({
name,
gradients: gradientSet
}, index) => {
const id = `color-palette-${instanceId}-${index}`;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
spacing: 2,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ColorHeading, {
level: headingLevel,
id: id,
children: name
}), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(MultipleOrigin, {
headingLevel: headingLevel,
...additionalProps
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleOrigin, {
...additionalProps
});
const {
metaProps,
labelProps
} = (0, _circularOptionPicker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default, {
...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',
* },
* ] }
* />
* );
* };
*```
*
*/
function GradientPicker({
className,
gradients = [],
onChange,
value,
clearable = true,
enableAlpha = true,
disableCustomGradients = false,
__experimentalIsRenderedInSidebar,
headingLevel = 2,
...additionalProps
}) {
const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
spacing: gradients.length ? 4 : 0,
children: [!disableCustomGradients && /*#__PURE__*/(0, _jsxRuntime.jsx)(_customGradientPicker.default, {
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
enableAlpha: enableAlpha,
value: value,
onChange: onChange
}), (gradients.length > 0 || clearable) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
...additionalProps,
className: className,
clearGradient: clearGradient,
gradients: gradients,
onChange: onChange,
value: value,
actions: clearable && !disableCustomGradients && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
onClick: clearGradient,
accessibleWhenDisabled: true,
disabled: !value,
children: (0, _i18n.__)('Clear')
}),
headingLevel: headingLevel
})]
});
}
var _default = exports.default = GradientPicker;
//# sourceMappingURL=index.js.map