@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 8.16 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/custom-gradient-picker/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport AnglePickerControl from '../angle-picker-control';\nimport CustomGradientBar from './gradient-bar';\nimport { Flex } from '../flex';\nimport SelectControl from '../select-control';\nimport { VStack } from '../v-stack';\nimport { getGradientAstWithDefault, getLinearGradientRepresentation, getGradientAstWithControlPoints, getStopCssColor } from './utils';\nimport { serializeGradient } from './serializer';\nimport { DEFAULT_LINEAR_GRADIENT_ANGLE, GRADIENT_OPTIONS, HORIZONTAL_GRADIENT_ORIENTATION } from './constants';\nimport { AccessoryWrapper, SelectWrapper } from './styles/custom-gradient-picker-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GradientAnglePicker = ({\n gradientAST,\n hasGradient,\n onChange\n}) => {\n const angle = gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;\n const onAngleChange = newAngle => {\n onChange(serializeGradient({\n ...gradientAST,\n orientation: {\n type: 'angular',\n value: `${newAngle}`\n }\n }));\n };\n return /*#__PURE__*/_jsx(AnglePickerControl, {\n onChange: onAngleChange,\n value: hasGradient ? angle : ''\n });\n};\nconst GradientTypePicker = ({\n gradientAST,\n hasGradient,\n onChange\n}) => {\n const {\n type\n } = gradientAST;\n const lastLinearOrientationAngle = useRef(Number(HORIZONTAL_GRADIENT_ORIENTATION.value));\n if (type === 'linear-gradient' && gradientAST.orientation) {\n lastLinearOrientationAngle.current = Number(gradientAST.orientation.value);\n }\n const onSetLinearGradient = () => {\n onChange(serializeGradient({\n ...gradientAST,\n orientation: {\n type: 'angular',\n value: `${lastLinearOrientationAngle.current}`\n },\n type: 'linear-gradient'\n }));\n };\n const onSetRadialGradient = () => {\n const {\n orientation,\n ...restGradientAST\n } = gradientAST;\n onChange(serializeGradient({\n ...restGradientAST,\n type: 'radial-gradient'\n }));\n };\n const handleOnChange = next => {\n if (next === 'linear-gradient') {\n onSetLinearGradient();\n }\n if (next === 'radial-gradient') {\n onSetRadialGradient();\n }\n };\n return /*#__PURE__*/_jsx(SelectControl, {\n className: \"components-custom-gradient-picker__type-picker\",\n label: __('Type'),\n labelPosition: \"top\",\n onChange: handleOnChange,\n options: GRADIENT_OPTIONS,\n size: \"__unstable-large\",\n value: hasGradient ? type : undefined\n });\n};\n\n/**\n * CustomGradientPicker is a React component that renders a UI for specifying\n * linear or radial gradients. Radial gradients are displayed in the picker as\n * a slice of the gradient from the center to the outside.\n *\n * ```jsx\n * import { CustomGradientPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCustomGradientPicker = () => {\n * const [ gradient, setGradient ] = useState();\n *\n * return (\n * <CustomGradientPicker\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ setGradient }\n * />\n * );\n * };\n * ```\n */\nexport function CustomGradientPicker({\n value,\n onChange,\n enableAlpha = true,\n __experimentalIsRenderedInSidebar = false\n}) {\n const {\n gradientAST,\n hasGradient\n } = getGradientAstWithDefault(value);\n\n // On radial gradients the bar should display a linear gradient.\n // On radial gradients the bar represents a slice of the gradient from the center until the outside.\n // On liner gradients the bar represents the color stops from left to right independently of the angle.\n const background = getLinearGradientRepresentation(gradientAST);\n\n // Control points color option may be hex from presets, custom colors will be rgb.\n // The position should always be a percentage.\n const controlPoints = gradientAST.colorStops.map(colorStop => {\n return {\n color: getStopCssColor(colorStop),\n // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,\n // TypeScript doesn't know that `colorStop.length` is not undefined here.\n // @ts-expect-error\n position: parseInt(colorStop.length.value)\n };\n });\n return /*#__PURE__*/_jsxs(VStack, {\n spacing: 4,\n className: \"components-custom-gradient-picker\",\n children: [/*#__PURE__*/_jsx(CustomGradientBar, {\n __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n disableAlpha: !enableAlpha,\n background: background,\n hasGradient: hasGradient,\n value: controlPoints,\n onChange: newControlPoints => {\n onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints)));\n }\n }), /*#__PURE__*/_jsxs(Flex, {\n gap: 3,\n className: \"components-custom-gradient-picker__ui-line\",\n children: [/*#__PURE__*/_jsx(SelectWrapper, {\n children: /*#__PURE__*/_jsx(GradientTypePicker, {\n gradientAST: gradientAST,\n hasGradient: hasGradient,\n onChange: onChange\n })\n }), /*#__PURE__*/_jsx(AccessoryWrapper, {\n children: gradientAST.type === 'linear-gradient' && /*#__PURE__*/_jsx(GradientAnglePicker, {\n gradientAST: gradientAST,\n hasGradient: hasGradient,\n onChange: onChange\n })\n })]\n })]\n });\n}\nexport default CustomGradientPicker;"],
"mappings": "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",
"names": []
}