| 1 |
import { Placeholder } from "@wordpress/components"; |
| 2 |
import { presetLayerArray } from "./containerConstant"; |
| 3 |
|
| 4 |
const LayoutPreset = ({ setAttributes }) => { |
| 5 |
const handleClick = (item) => { |
| 6 |
setAttributes({ |
| 7 |
containerLayer: item.layer, |
| 8 |
containerFlexDirection: { |
| 9 |
device: { |
| 10 |
Desktop: item.flexDirection, |
| 11 |
Tablet: item.flexDirection, |
| 12 |
Mobile: item.flexDirection, |
| 13 |
}, |
| 14 |
}, |
| 15 |
columns: item?.columns, |
| 16 |
layerLayoutNo: item.indexNo ? item.indexNo : "", |
| 17 |
// containerFlexWrap: { |
| 18 |
// device: { |
| 19 |
// Desktop: item.flexWrap, |
| 20 |
// Tablet: item.flexWrap, |
| 21 |
// Mobile: "wrap", |
| 22 |
// }, |
| 23 |
// }, |
| 24 |
layout: item.layout ? item.layout : "", |
| 25 |
}); |
| 26 |
}; |
| 27 |
|
| 28 |
return ( |
| 29 |
<Placeholder |
| 30 |
label="Container" |
| 31 |
instructions="Customizable containers with endless creation possibilities. Select a container layout to start with." |
| 32 |
className="sp-smart-post-container-variation-picker-wrapper sp-smart-post-container-preset-layout" |
| 33 |
> |
| 34 |
<div className="sp-smart-post-container-variation-layouts-grid"> |
| 35 |
<ul> |
| 36 |
{presetLayerArray.map((item, index) => ( |
| 37 |
<li key={index}> |
| 38 |
<span |
| 39 |
onClick={() => handleClick(item)} |
| 40 |
role="button" |
| 41 |
tabIndex={0} |
| 42 |
onKeyDown={() => handleClick(item)} |
| 43 |
> |
| 44 |
<span className="sp-container-preset-item"> |
| 45 |
{item.icon} |
| 46 |
<span className="sp-container-preset-label">{item.label}</span> |
| 47 |
</span> |
| 48 |
</span> |
| 49 |
</li> |
| 50 |
))} |
| 51 |
</ul> |
| 52 |
</div> |
| 53 |
</Placeholder> |
| 54 |
); |
| 55 |
}; |
| 56 |
|
| 57 |
export default LayoutPreset; |
| 58 |
|
