Changed location of react components to .../assets/js/react/components

assets/js/react/components/DimensionValueControl.js

@@ -0,0 +1,96 @@
+import { __ } from '@wordpress/i18n';
+import { BaseControl, __experimentalNumberControl as NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
+import { useState, useEffect } from 'react';
+
+/**
+ * Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
+ * Accepts a default value as a string (e.g., "15px", "10rem", etc.).
+ * Includes an optional 'auto' unit if includeAuto is true, and handles autoReturnsNull behavior.
+ */
+export function DimensionValueControl({ value = '10px', onChange, includeAuto = false, autoReturnsNull = false }) {
+    // Options for select control (CSS units) including 'auto' if enabled
+    const unitOptions = [
+        { label: __('px'), value: 'px' },
+        { label: __('%'), value: '%' },
+        { label: __('em'), value: 'em' },
+        { label: __('rem'), value: 'rem' },
+        { label: __('vw'), value: 'vw' },
+        { label: __('vh'), value: 'vh' },
+        ...(includeAuto ? [{ label: __('auto'), value: 'auto' }] : []), // Add 'auto' option if includeAuto is true
+    ];
+
+    // Parse the value string into a number and unit
+    const parseValue = (value) => {
+        const regex = /([0-9]+)([a-zA-Z%]+)?/;  // Capture the number and the unit
+        const match = value.match(regex);
+        if (match) {
+            return {
+                numberValue: parseInt(match[1], 10), // Number part
+                unitValue: match[2] || 'px'          // Unit part (default to 'px' if no unit found)
+            };
+        }
+        return { numberValue: 0, unitValue: 'px' }; // Fallback if invalid format
+    };
+
+    // Use the parsed value to set initial state
+    const { numberValue: initialNumber, unitValue: initialUnit } = parseValue(value);
+    const [numberValue, setNumberValue] = useState(initialNumber);
+    const [unitValue, setUnitValue] = useState(initialUnit);
+
+    // Combine the number and unit into a string like "15px"
+    const dimensionValue = `${numberValue}${unitValue}`;
+
+    // Handle number change
+    const onNumberChange = (newValue) => {
+        setNumberValue(newValue);
+        if (onChange && unitValue !== 'auto') {
+            onChange(`${newValue}${unitValue}`);  // Pass updated value back to parent
+        }
+    };
+
+    // Handle unit change
+    const onUnitChange = (newUnit) => {
+        if (newUnit === 'auto') {
+            setNumberValue(null); // Reset the number value when 'auto' is selected
+        }
+        setUnitValue(newUnit);
+        if (onChange) {
+            const updatedValue = newUnit === 'auto' 
+                ? (autoReturnsNull ? null : 'auto') 
+                : `${numberValue}${newUnit}`; // Pass 'auto' or null or updated value back to parent
+            onChange(updatedValue);
+        }
+    };
+
+    // Effect to handle when value prop changes (useful for syncing)
+    useEffect(() => {
+        const { numberValue, unitValue } = parseValue(value);
+        setNumberValue(numberValue);
+        setUnitValue(unitValue);
+    }, [value]);
+
+    return (
+        <BaseControl className="lcp-dimension-value-control">
+            <HStack>
+                {/* Number input control, disabled when 'auto' is selected */}
+                <NumberControl
+                    className="lcp-number-control"
+                    value={numberValue || ''}
+                    onChange={onNumberChange}
+                    min={0}
+                    step={0.1}
+                    spinControls={'none'}
+                    disabled={unitValue === 'auto'} // Disable number input if 'auto' is selected
+                />
+
+                {/* Select dropdown control for units */}
+                <SelectControl
+                    className="lcp-select-control"
+                    value={unitValue}
+                    options={unitOptions}
+                    onChange={onUnitChange}
+                />
+            </HStack>
+        </BaseControl>
+    );
+}