81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
 
|
import React, { useCallback, CSSProperties } from 'react';
|
||
|
|
import { useEditor } from '@craftjs/core';
|
||
|
|
import {
|
||
|
|
BG_COLORS,
|
||
|
|
SPACING_PRESETS,
|
||
|
|
RADIUS_PRESETS,
|
||
|
|
} from '../../../constants/presets';
|
||
|
|
import {
|
||
|
|
StylePanelProps,
|
||
|
|
SectionLabel,
|
||
|
|
ColorSwatchGrid,
|
||
|
|
GradientSwatchGrid,
|
||
|
|
PresetButtonGrid,
|
||
|
|
} from './shared';
|
||
|
|
|
||
|
|
/* ---------- CONTAINER / SECTION ---------- */
|
||
|
|
export const ContainerStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||
|
|
const { actions } = useEditor();
|
||
|
|
const style: CSSProperties = nodeProps.style || {};
|
||
|
|
|
||
|
|
const setPropStyle = useCallback(
|
||
|
|
(property: string, value: string) => {
|
||
|
|
actions.setProp(selectedId, (props: any) => {
|
||
|
|
props.style = { ...props.style, [property]: value };
|
||
|
|
});
|
||
|
|
},
|
||
|
|
[actions, selectedId],
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Background Color</SectionLabel>
|
||
|
|
<ColorSwatchGrid
|
||
|
|
colors={BG_COLORS}
|
||
|
|
activeValue={style.backgroundColor as string}
|
||
|
|
onSelect={(v) => setPropStyle('backgroundColor', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Background Gradient</SectionLabel>
|
||
|
|
<GradientSwatchGrid
|
||
|
|
activeValue={style.background as string}
|
||
|
|
onSelect={(v) => setPropStyle('background', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Padding</SectionLabel>
|
||
|
|
<PresetButtonGrid
|
||
|
|
presets={SPACING_PRESETS}
|
||
|
|
activeValue={style.padding as string}
|
||
|
|
onSelect={(v) => setPropStyle('padding', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Border Radius</SectionLabel>
|
||
|
|
<PresetButtonGrid
|
||
|
|
presets={RADIUS_PRESETS}
|
||
|
|
activeValue={style.borderRadius as string}
|
||
|
|
onSelect={(v) => setPropStyle('borderRadius', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Alignment</SectionLabel>
|
||
|
|
<div className="preset-grid align-grid">
|
||
|
|
{(['left', 'center', 'right', 'justify'] as const).map((a) => (
|
||
|
|
<button
|
||
|
|
key={a}
|
||
|
|
className={`preset-btn ${style.textAlign === a ? 'active' : ''}`}
|
||
|
|
onClick={() => setPropStyle('textAlign', a)}
|
||
|
|
title={a}
|
||
|
|
>
|
||
|
|
<i className={`fa fa-align-${a}`} />
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|