UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 11.5 kB
{ "version": 3, "sources": ["../../../src/components/border-radius-control/index.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useState, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport LinkedButton from './linked-button';\nimport { useSettings } from '../use-settings';\nimport { hasDefinedValues, hasMixedValues, getAllValue } from './utils';\nimport PresetInputControl from '../preset-input-control';\nimport {\n\tRANGE_CONTROL_MAX_SIZE,\n\tEMPTY_ARRAY,\n\tCORNERS,\n\tICONS,\n\tMIN_BORDER_RADIUS_VALUE,\n} from './constants';\n\nfunction useBorderRadiusSizes( presets ) {\n\tconst defaultSizes = presets?.default ?? EMPTY_ARRAY;\n\tconst customSizes = presets?.custom ?? EMPTY_ARRAY;\n\tconst themeSizes = presets?.theme ?? EMPTY_ARRAY;\n\n\treturn useMemo( () => {\n\t\tconst sizes = [\n\t\t\t{ name: __( 'None' ), slug: '0', size: 0 },\n\t\t\t...customSizes,\n\t\t\t...themeSizes,\n\t\t\t...defaultSizes,\n\t\t];\n\n\t\treturn sizes.length > RANGE_CONTROL_MAX_SIZE\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: __( 'Default' ),\n\t\t\t\t\t\tslug: 'default',\n\t\t\t\t\t\tsize: undefined,\n\t\t\t\t\t},\n\t\t\t\t\t...sizes,\n\t\t\t ]\n\t\t\t: sizes;\n\t}, [ customSizes, themeSizes, defaultSizes ] );\n}\n\n/**\n * Gets the value for a specific corner from the values object.\n *\n * @param {Object|string} values Border radius values.\n * @param {string} corner Corner name ('all', 'topLeft', etc.).\n *\n * @return {string|undefined} The corner value.\n */\nfunction getCornerValue( values, corner ) {\n\tif ( corner === 'all' ) {\n\t\treturn getAllValue( values );\n\t}\n\n\t// Handle string values (shorthand)\n\tif ( typeof values === 'string' ) {\n\t\treturn values;\n\t}\n\n\t// Handle object values (longhand)\n\treturn values?.[ corner ];\n}\n\n/**\n * Gets the selected unit for a specific corner.\n *\n * @param {Object} selectedUnits Units object.\n * @param {string} corner Corner name.\n *\n * @return {string} The selected unit.\n */\nfunction getCornerUnit( selectedUnits, corner ) {\n\tif ( corner === 'all' ) {\n\t\treturn selectedUnits.flat;\n\t}\n\treturn selectedUnits[ corner ];\n}\n\n/**\n * Creates an onChange handler for a specific corner.\n *\n * @param {string} corner Corner name.\n * @param {Object} values Current values.\n * @param {Function} onChange Original onChange callback.\n *\n * @return {Function} Corner-specific onChange handler.\n */\nfunction createCornerChangeHandler( corner, values, onChange ) {\n\treturn ( newValue ) => {\n\t\tif ( corner === 'all' ) {\n\t\t\tonChange( {\n\t\t\t\ttopLeft: newValue,\n\t\t\t\ttopRight: newValue,\n\t\t\t\tbottomLeft: newValue,\n\t\t\t\tbottomRight: newValue,\n\t\t\t} );\n\t\t} else {\n\t\t\t// For shorthand style & backwards compatibility, handle flat string value.\n\t\t\tconst currentValues =\n\t\t\t\ttypeof values !== 'string'\n\t\t\t\t\t? values || {}\n\t\t\t\t\t: {\n\t\t\t\t\t\t\ttopLeft: values,\n\t\t\t\t\t\t\ttopRight: values,\n\t\t\t\t\t\t\tbottomLeft: values,\n\t\t\t\t\t\t\tbottomRight: values,\n\t\t\t\t\t };\n\n\t\t\tonChange( {\n\t\t\t\t...currentValues,\n\t\t\t\t[ corner ]: newValue,\n\t\t\t} );\n\t\t}\n\t};\n}\n\n/**\n * Creates a unit change handler for a specific corner.\n *\n * @param {string} corner Corner name.\n * @param {Object} selectedUnits Current selected units.\n * @param {Function} setSelectedUnits Unit setter function.\n *\n * @return {Function} Corner-specific unit change handler.\n */\nfunction createCornerUnitChangeHandler(\n\tcorner,\n\tselectedUnits,\n\tsetSelectedUnits\n) {\n\treturn ( newUnit ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tif ( corner === 'all' ) {\n\t\t\tnewUnits.flat = newUnit;\n\t\t\tnewUnits.topLeft = newUnit;\n\t\t\tnewUnits.topRight = newUnit;\n\t\t\tnewUnits.bottomLeft = newUnit;\n\t\t\tnewUnits.bottomRight = newUnit;\n\t\t} else {\n\t\t\tnewUnits[ corner ] = newUnit;\n\t\t}\n\t\tsetSelectedUnits( newUnits );\n\t};\n}\n\n/**\n * Control to display border radius options.\n *\n * @param {Object} props Component props.\n * @param {Function} props.onChange Callback to handle onChange.\n * @param {Object} props.values Border radius values.\n * @param {Object} props.presets Border radius presets.\n *\n * @return {Element} Custom border radius control.\n */\nexport default function BorderRadiusControl( { onChange, values, presets } ) {\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasDefinedValues( values ) || ! hasMixedValues( values )\n\t);\n\tconst options = useBorderRadiusSizes( presets );\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS unit only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\tflat:\n\t\t\ttypeof values === 'string'\n\t\t\t\t? parseQuantityAndUnitFromRawValue( values )[ 1 ]\n\t\t\t\t: undefined,\n\t\ttopLeft: parseQuantityAndUnitFromRawValue( values?.topLeft )[ 1 ],\n\t\ttopRight: parseQuantityAndUnitFromRawValue( values?.topRight )[ 1 ],\n\t\tbottomLeft: parseQuantityAndUnitFromRawValue( values?.bottomLeft )[ 1 ],\n\t\tbottomRight: parseQuantityAndUnitFromRawValue(\n\t\t\tvalues?.bottomRight\n\t\t)[ 1 ],\n\t} );\n\n\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: availableUnits || [ 'px', 'em', 'rem' ],\n\t} );\n\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\treturn (\n\t\t<fieldset className=\"components-border-radius-control\">\n\t\t\t<HStack className=\"components-border-radius-control__header\">\n\t\t\t\t<BaseControl.VisualLabel as=\"legend\">\n\t\t\t\t\t{ __( 'Radius' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />\n\t\t\t</HStack>\n\t\t\t{ isLinked ? (\n\t\t\t\t<PresetInputControl\n\t\t\t\t\tariaLabel={ CORNERS.all }\n\t\t\t\t\tclassName=\"components-border-radius-control\"\n\t\t\t\t\ticon={ ICONS.all }\n\t\t\t\t\tminimumCustomValue={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\tonChange={ createCornerChangeHandler(\n\t\t\t\t\t\t'all',\n\t\t\t\t\t\tvalues,\n\t\t\t\t\t\tonChange\n\t\t\t\t\t) }\n\t\t\t\t\tonUnitChange={ createCornerUnitChangeHandler(\n\t\t\t\t\t\t'all',\n\t\t\t\t\t\tselectedUnits,\n\t\t\t\t\t\tsetSelectedUnits\n\t\t\t\t\t) }\n\t\t\t\t\tpresets={ options }\n\t\t\t\t\tpresetType=\"border-radius\"\n\t\t\t\t\tselectedUnit={ getCornerUnit( selectedUnits, 'all' ) }\n\t\t\t\t\tshowTooltip\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tvalue={ getCornerValue( values, 'all' ) }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<VStack>\n\t\t\t\t\t{ [\n\t\t\t\t\t\t'topLeft',\n\t\t\t\t\t\t'topRight',\n\t\t\t\t\t\t'bottomLeft',\n\t\t\t\t\t\t'bottomRight',\n\t\t\t\t\t].map( ( corner ) => (\n\t\t\t\t\t\t<PresetInputControl\n\t\t\t\t\t\t\tkey={ corner }\n\t\t\t\t\t\t\tariaLabel={ CORNERS[ corner ] }\n\t\t\t\t\t\t\tclassName=\"components-border-radius-control\"\n\t\t\t\t\t\t\ticon={ ICONS[ corner ] }\n\t\t\t\t\t\t\tminimumCustomValue={ MIN_BORDER_RADIUS_VALUE }\n\t\t\t\t\t\t\tonChange={ createCornerChangeHandler(\n\t\t\t\t\t\t\t\tcorner,\n\t\t\t\t\t\t\t\tvalues,\n\t\t\t\t\t\t\t\tonChange\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonUnitChange={ createCornerUnitChangeHandler(\n\t\t\t\t\t\t\t\tcorner,\n\t\t\t\t\t\t\t\tselectedUnits,\n\t\t\t\t\t\t\t\tsetSelectedUnits\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tpresets={ options }\n\t\t\t\t\t\t\tpresetType=\"border-radius\"\n\t\t\t\t\t\t\tselectedUnit={ getCornerUnit(\n\t\t\t\t\t\t\t\tselectedUnits,\n\t\t\t\t\t\t\t\tcorner\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t\tvalue={ getCornerValue( values, corner ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</VStack>\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n"], "mappings": "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", "names": [] }