127 lines
5.3 KiB
JavaScript
127 lines
5.3 KiB
JavaScript
import { useState } from '@wordpress/element';
|
|
import {
|
|
BaseControl,
|
|
Button,
|
|
__experimentalUnitControl as UnitControl,
|
|
RangeControl,
|
|
__experimentalHStack as HStack,
|
|
__experimentalVStack as VStack,
|
|
} from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { link, linkOff } from '@wordpress/icons';
|
|
|
|
export default function BorderRadiusControl({ label, value = { radius: '0px' }, onChange }) {
|
|
// Determine if value is advanced initially
|
|
const initialAdvanced = value.topLeft || value.topRight || value.bottomLeft || value.bottomRight ? true : false;
|
|
const [advanced, setAdvanced] = useState(initialAdvanced);
|
|
|
|
const parseValue = (val) => {
|
|
if (!val) return 0;
|
|
if (typeof val === 'string') return parseInt(val);
|
|
if (val.radius) return parseInt(val.radius);
|
|
return 0;
|
|
};
|
|
|
|
// Flat handlers
|
|
const handleFlatChange = (val) => {
|
|
const newValue = { radius: val };
|
|
console.log('Flat change →', newValue);
|
|
onChange(newValue);
|
|
};
|
|
const handleFlatRangeChange = (val) => {
|
|
const currentUnit = value.radius?.replace(/[0-9]/g, '') || 'px';
|
|
const newValue = { radius: `${val}${currentUnit}` };
|
|
console.log('Flat range change →', newValue);
|
|
onChange(newValue);
|
|
};
|
|
|
|
// Advanced handlers
|
|
const handleCornerChange = (corner, val) => {
|
|
// Always return a full object with all four corners
|
|
const newValue = {
|
|
topLeft: corner === 'topLeft' ? val : value.topLeft || '0px',
|
|
topRight: corner === 'topRight' ? val : value.topRight || '0px',
|
|
bottomRight: corner === 'bottomRight' ? val : value.bottomRight || '0px',
|
|
bottomLeft: corner === 'bottomLeft' ? val : value.bottomLeft || '0px',
|
|
};
|
|
console.log('Corner change →', newValue);
|
|
onChange(newValue);
|
|
};
|
|
|
|
return (
|
|
<BaseControl label={label}>
|
|
<HStack gap={8} align="flex-start">
|
|
{/* Left column: controls */}
|
|
<VStack gap={8} style={{ flex: 1 }}>
|
|
{!advanced && (
|
|
<HStack gap={8} align="center">
|
|
<UnitControl
|
|
value={value.radius || '0px'}
|
|
onChange={handleFlatChange}
|
|
label={__('Radius', 'directory-listings')}
|
|
min={0}
|
|
max={500}
|
|
style={{ flex: '0 0 auto' }}
|
|
/>
|
|
<div style={{ flex: 1 }}>
|
|
<RangeControl
|
|
value={parseValue(value)}
|
|
withInputField={false}
|
|
onChange={handleFlatRangeChange}
|
|
min={0}
|
|
max={500}
|
|
/>
|
|
</div>
|
|
</HStack>
|
|
)}
|
|
|
|
{advanced && (
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
|
|
<UnitControl
|
|
label={__('Top Left', 'directory-listings')}
|
|
value={value.topLeft || '0px'}
|
|
onChange={(val) => handleCornerChange('topLeft', val)}
|
|
min={0}
|
|
max={500}
|
|
/>
|
|
<UnitControl
|
|
label={__('Top Right', 'directory-listings')}
|
|
value={value.topRight || '0px'}
|
|
onChange={(val) => handleCornerChange('topRight', val)}
|
|
min={0}
|
|
max={500}
|
|
/>
|
|
|
|
<UnitControl
|
|
label={__('Bottom Left', 'directory-listings')}
|
|
value={value.bottomLeft || '0px'}
|
|
onChange={(val) => handleCornerChange('bottomLeft', val)}
|
|
min={0}
|
|
max={500}
|
|
/>
|
|
<UnitControl
|
|
label={__('Bottom Right', 'directory-listings')}
|
|
value={value.bottomRight || '0px'}
|
|
onChange={(val) => handleCornerChange('bottomRight', val)}
|
|
min={0}
|
|
max={500}
|
|
/>
|
|
</div>
|
|
)}
|
|
</VStack>
|
|
|
|
{/* Right column: toggle button */}
|
|
<VStack>
|
|
<Button
|
|
icon={advanced ? linkOff : link}
|
|
iconSize={24}
|
|
isSecondary
|
|
onClick={() => setAdvanced(!advanced)}
|
|
aria-label={__('Toggle advanced border radius', 'directory-listings')}
|
|
/>
|
|
</VStack>
|
|
</HStack>
|
|
</BaseControl>
|
|
);
|
|
}
|