import { __ } from "@wordpress/i18n"; import { useState } from "@wordpress/element"; import { Spacing, ButtonGroup, ColorPicker, Popover } from "@easy-accordion/components"; import { borderStyles } from "@easy-accordion/constants"; import "./editor.scss"; const Border = ({ attributes, attributesKey, setAttributes, defaultValue = { unit: "px", value: { top: "0", right: "0", bottom: "0", left: "0", }, }, label = __("Border", "easy-accordion-free"), }) => { const { border, borderWidth } = attributes; const [activeState, setActiveState] = useState("color"); const borderColor = (newColor) => { setAttributes({ [attributesKey.border]: { ...attributes?.border, [activeState]: newColor, }, }); }; const borderOptions = { color: "Default", hoverColor: "Hover", activeColor: "Active", }; const borderColorOptions = Object.entries(borderOptions).reduce( (acc, [key, l]) => (key === "color" || key in border ? [...acc, { label: l, value: key }] : acc), [] ); return (
{ setAttributes({ [attributesKey.border]: { ...attributes.border, style: newStyle, }, }); }} />
{/* Border Color */} {borderColorOptions?.length > 1 && (
setActiveState(value)} /> )}
); }; export default Border;