82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
 
|
import React, { useCallback, CSSProperties } from 'react';
|
||
|
|
import { useEditor } from '@craftjs/core';
|
||
|
|
import {
|
||
|
|
TEXT_COLORS,
|
||
|
|
FONT_FAMILIES,
|
||
|
|
TEXT_SIZES,
|
||
|
|
FONT_WEIGHTS,
|
||
|
|
} from '../../../constants/presets';
|
||
|
|
import {
|
||
|
|
StylePanelProps,
|
||
|
|
SectionLabel,
|
||
|
|
ColorSwatchGrid,
|
||
|
|
PresetButtonGrid,
|
||
|
|
} from './shared';
|
||
|
|
|
||
|
|
/* ---------- TEXT ---------- */
|
||
|
|
export const TextStylePanel: 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>Text Color</SectionLabel>
|
||
|
|
<ColorSwatchGrid
|
||
|
|
colors={TEXT_COLORS}
|
||
|
|
activeValue={style.color as string}
|
||
|
|
onSelect={(v) => setPropStyle('color', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Font Family</SectionLabel>
|
||
|
|
<PresetButtonGrid
|
||
|
|
presets={FONT_FAMILIES}
|
||
|
|
activeValue={style.fontFamily as string}
|
||
|
|
onSelect={(v) => setPropStyle('fontFamily', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Text Size</SectionLabel>
|
||
|
|
<PresetButtonGrid
|
||
|
|
presets={TEXT_SIZES}
|
||
|
|
activeValue={style.fontSize as string}
|
||
|
|
onSelect={(v) => setPropStyle('fontSize', v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="guided-section">
|
||
|
|
<SectionLabel>Font Weight</SectionLabel>
|
||
|
|
<PresetButtonGrid
|
||
|
|
presets={FONT_WEIGHTS}
|
||
|
|
activeValue={String(style.fontWeight || '')}
|
||
|
|
onSelect={(v) => setPropStyle('fontWeight', 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>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|