| 1 |
/** |
| 2 |
* WordPress Dependencies |
| 3 |
*/ |
| 4 |
import { __ } from "@wordpress/i18n"; |
| 5 |
import { |
| 6 |
useBlockEditContext, |
| 7 |
__experimentalBorderRadiusControl as RadiusControl, |
| 8 |
} from "@wordpress/block-editor"; |
| 9 |
import { __experimentalToolsPanelItem as ToolsPanelItem } from "@wordpress/components"; |
| 10 |
|
| 11 |
interface BorderRadiusControlPropTypes { |
| 12 |
label: string; |
| 13 |
value: any; |
| 14 |
hasValue: () => boolean; |
| 15 |
onChange: (newBorder: any) => any; |
| 16 |
resetAllFilter?: () => any; |
| 17 |
onDeselect: () => any; |
| 18 |
isShownByDefault?: boolean; |
| 19 |
} |
| 20 |
|
| 21 |
function BorderRadiusControl({ |
| 22 |
label, |
| 23 |
isShownByDefault = true, |
| 24 |
value, |
| 25 |
hasValue, |
| 26 |
onChange = () => {}, |
| 27 |
resetAllFilter, |
| 28 |
onDeselect = () => {}, |
| 29 |
}: BorderRadiusControlPropTypes) { |
| 30 |
const { clientId } = useBlockEditContext(); |
| 31 |
|
| 32 |
if (!resetAllFilter) { |
| 33 |
resetAllFilter = onDeselect; |
| 34 |
} |
| 35 |
|
| 36 |
const handleChange = (value: any) => { |
| 37 |
if (typeof value === "string") { |
| 38 |
onChange({ |
| 39 |
topLeft: value, |
| 40 |
topRight: value, |
| 41 |
bottomLeft: value, |
| 42 |
bottomRight: value, |
| 43 |
}); |
| 44 |
return; |
| 45 |
} |
| 46 |
onChange(value); |
| 47 |
}; |
| 48 |
|
| 49 |
return ( |
| 50 |
<ToolsPanelItem |
| 51 |
panelId={clientId} |
| 52 |
isShownByDefault={isShownByDefault} |
| 53 |
resetAllFilter={resetAllFilter} |
| 54 |
hasValue={hasValue} |
| 55 |
label={label} |
| 56 |
onDeselect={onDeselect} |
| 57 |
> |
| 58 |
<RadiusControl onChange={handleChange} values={value} /> |
| 59 |
</ToolsPanelItem> |
| 60 |
); |
| 61 |
} |
| 62 |
|
| 63 |
export default BorderRadiusControl; |
| 64 |
|
