108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
import { useState } from '@wordpress/element';
|
|
import {
|
|
Dropdown,
|
|
Button,
|
|
__experimentalHStack as HStack,
|
|
} from '@wordpress/components';
|
|
import { solidLine } from '@wordpress/icons';
|
|
|
|
export default function BoxShadowControl({
|
|
label = 'Box Shadow',
|
|
value = '',
|
|
onSelect,
|
|
}) {
|
|
const boxShadows = [
|
|
'rgba(0, 0, 0, 0.1) 0px 0px 10px 0px',
|
|
'0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)',
|
|
'0 10px 15px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1)',
|
|
'0 20px 25px rgba(0,0,0,0.3), 0 10px 10px rgba(0,0,0,0.2)',
|
|
'0 0 10px rgba(0,0,0,0.5)',
|
|
];
|
|
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
<Dropdown
|
|
className="box-shadow-control"
|
|
style={{ width: '100%' }}
|
|
popoverProps={{ placement: 'bottom-start' }}
|
|
renderToggle={({ isOpen, onToggle }) => (
|
|
<HStack
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={onToggle}
|
|
onKeyDown={(e) => e.key === 'Enter' && onToggle()}
|
|
gap={6}
|
|
align="center"
|
|
style={{
|
|
width: '100%', // full width toggle
|
|
padding: '6px 10px',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
}}
|
|
>
|
|
<span>{label}</span>
|
|
|
|
{value && (
|
|
<Button
|
|
icon={solidLine}
|
|
isSecondary
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
onSelect(''); // clear the shadow
|
|
}}
|
|
aria-label="Clear box shadow"
|
|
style={{ marginLeft: 'auto' }} // optional: push to right
|
|
/>
|
|
)}
|
|
</HStack>
|
|
)}
|
|
renderContent={() => (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
{boxShadows.map((shadow, index) => (
|
|
<Button
|
|
key={index}
|
|
style={{
|
|
width: '60px',
|
|
height: '40px',
|
|
backgroundColor: 'white',
|
|
boxShadow: shadow,
|
|
border: '1px solid #ddd',
|
|
}}
|
|
onClick={() => onSelect(shadow)}
|
|
/>
|
|
))}
|
|
|
|
<Button
|
|
isSecondary
|
|
style={{
|
|
width: '60px',
|
|
height: '40px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '12px',
|
|
border: '1px solid #ddd',
|
|
}}
|
|
onClick={() => onSelect('')}
|
|
>
|
|
None
|
|
</Button>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
}
|