@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 12.5 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/box-control/input-control.tsx"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n const allowedSides = getAllowedSides(sides);\n let modifiedSides = [];\n switch (side) {\n case 'all':\n modifiedSides = ['top', 'bottom', 'left', 'right'];\n break;\n case 'horizontal':\n modifiedSides = ['left', 'right'];\n break;\n case 'vertical':\n modifiedSides = ['top', 'bottom'];\n break;\n default:\n modifiedSides = [side];\n }\n if (isAlt) {\n switch (side) {\n case 'top':\n modifiedSides.push('bottom');\n break;\n case 'bottom':\n modifiedSides.push('top');\n break;\n case 'left':\n modifiedSides.push('left');\n break;\n case 'right':\n modifiedSides.push('right');\n break;\n }\n }\n return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n __next40pxDefaultSize,\n onChange = noop,\n onFocus = noop,\n values,\n selectedUnits,\n setSelectedUnits,\n sides,\n side,\n min = 0,\n presets,\n presetKey,\n ...props\n}) {\n const defaultValuesToModify = getSidesToModify(side, sides);\n const handleOnFocus = event => {\n onFocus(event, {\n side\n });\n };\n const handleOnChange = nextValues => {\n onChange(nextValues);\n };\n const handleRawOnValueChange = next => {\n const nextValues = {\n ...values\n };\n defaultValuesToModify.forEach(modifiedSide => {\n nextValues[modifiedSide] = next;\n });\n handleOnChange(nextValues);\n };\n const handleOnValueChange = (next, extra) => {\n const nextValues = {\n ...values\n };\n const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n const nextValue = isNumeric ? next : undefined;\n const modifiedSides = getSidesToModify(side, sides,\n /**\n * Supports changing pair sides. For example, holding the ALT key\n * when changing the TOP will also update BOTTOM.\n */\n // @ts-expect-error - TODO: event.altKey is only present when the change event was\n // triggered by a keyboard event. Should this feature be implemented differently so\n // it also works with drag events?\n !!extra?.event.altKey);\n modifiedSides.forEach(modifiedSide => {\n nextValues[modifiedSide] = nextValue;\n });\n handleOnChange(nextValues);\n };\n const handleOnUnitChange = next => {\n const newUnits = {\n ...selectedUnits\n };\n defaultValuesToModify.forEach(modifiedSide => {\n newUnits[modifiedSide] = next;\n });\n setSelectedUnits(newUnits);\n };\n const mergedValue = getMergedValue(values, defaultValuesToModify);\n const hasValues = isValuesDefined(values);\n const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n const inputId = [generatedId, side].join('-');\n const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n const hasPresets = presets && presets.length > 0 && presetKey;\n const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n const marks = hasPresets ? [{\n value: 0,\n label: '',\n tooltip: __('None')\n }, ...presets.map((preset, index) => ({\n value: index + 1,\n label: '',\n tooltip: preset.name ?? preset.slug\n }))] : [];\n return /*#__PURE__*/_jsxs(InputWrapper, {\n expanded: true,\n children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n side: side,\n sides: sides\n }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(Tooltip, {\n placement: \"top-end\",\n text: LABELS[side],\n children: /*#__PURE__*/_jsx(StyledUnitControl, {\n ...props,\n min: min,\n __shouldNotWarnDeprecated36pxSize: true,\n __next40pxDefaultSize: __next40pxDefaultSize,\n className: \"component-box-control__unit-control\",\n id: inputId,\n isPressEnterToChange: true,\n disableUnits: isMixed || isMixedUnit,\n value: usedValue,\n onChange: handleOnValueChange,\n onUnitChange: handleOnUnitChange,\n onFocus: handleOnFocus,\n label: LABELS[side],\n placeholder: mixedPlaceholder,\n hideLabelFromVision: true\n })\n }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n __next40pxDefaultSize: __next40pxDefaultSize,\n __shouldNotWarnDeprecated36pxSize: true,\n \"aria-controls\": inputId,\n label: LABELS[side],\n hideLabelFromVision: true,\n onChange: newValue => {\n handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n },\n min: isFinite(min) ? min : 0,\n max: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.max ?? 10,\n step: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.step ?? 0.1,\n value: parsedQuantity ?? 0,\n withInputField: false\n })]\n }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n __next40pxDefaultSize: true,\n className: \"spacing-sizes-control__range-control\",\n value: presetIndex !== undefined ? presetIndex + 1 : 0,\n onChange: newIndex => {\n const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n handleRawOnValueChange(newValue);\n },\n withInputField: false,\n \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n min: 0,\n max: marks.length - 1,\n marks: marks,\n label: LABELS[side],\n hideLabelFromVision: true\n }), hasPresets && /*#__PURE__*/_jsx(Button, {\n label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n icon: settings,\n onClick: () => {\n setShowCustomValueControl(!showCustomValueControl);\n },\n isPressed: showCustomValueControl,\n size: \"small\",\n iconSize: 24\n })]\n }, `box-control-${side}`);\n}"],
"mappings": "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",
"names": ["import_utils", "_jsxs", "_jsx", "_Fragment", "Tooltip", "Button"]
}