完成M3 Scheme构建页面的功能。
This commit is contained in:
徐涛
parent
14d775e956
commit
1553c51621
46
src/page-components/scheme/m3-scheme/Builder.module.css
Normal file
46
src/page-components/scheme/m3-scheme/Builder.module.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@layer pages {
|
||||
.builder_layout {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.3em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 200px);
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
.label {
|
||||
max-width: 200px;
|
||||
grid-column: 1;
|
||||
padding-inline-end: var(--spacing-m);
|
||||
text-align: right;
|
||||
}
|
||||
.segment_title {
|
||||
grid-column: 1 / span 2;
|
||||
text-align: center;
|
||||
}
|
||||
.color_picker_row {
|
||||
grid-column: 2 / span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
.error_msg {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
.delete_btn {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-yuebai);
|
||||
background-color: oklch(from var(--color-danger) l c h / 0.25);
|
||||
&:hover {
|
||||
background-color: oklch(from var(--color-danger-hover) l c h / 0.65);
|
||||
}
|
||||
&:active {
|
||||
background-color: oklch(from var(--color-danger-active) l c h / 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
150
src/page-components/scheme/m3-scheme/Builder.tsx
Normal file
150
src/page-components/scheme/m3-scheme/Builder.tsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import { includes, isEmpty, isNil } from 'lodash-es';
|
||||
import { useActionState, useCallback, useMemo, useState } from 'react';
|
||||
import { useColorFunction } from '../../../ColorFunctionContext';
|
||||
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
|
||||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import { MaterialDesign3SchemeStorage } from '../../../material-3-scheme';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import { useUpdateScheme } from '../../../stores/schemes';
|
||||
import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
|
||||
import styles from './Builder.module.css';
|
||||
|
||||
type M3SchemeBuilderProps = {
|
||||
scheme: SchemeContent<MaterialDesign3SchemeStorage>;
|
||||
onBuildCompleted?: () => void;
|
||||
};
|
||||
|
||||
export function M3SchemeBuilder({ scheme, onBuildCompleted }: M3SchemeBuilderProps) {
|
||||
const { colorFn } = useColorFunction();
|
||||
const updateScheme = useUpdateScheme(scheme.id);
|
||||
const originalColors = useMemo(() => {
|
||||
return Object.entries(scheme.schemeStorage.source?.custom_colors ?? {}).map(
|
||||
([name, color], index) => ({ id: `oc_${index}`, name, color } as IdenticalColorEntry),
|
||||
);
|
||||
}, [scheme.schemeStorage.source]);
|
||||
const [newColors, setNewColors] = useState<IdenticalColorEntry[]>([]);
|
||||
const [deleted, setDeleted] = useState<string[]>([]);
|
||||
const addEntryAction = useCallback(() => {
|
||||
setNewColors((prev) => [...prev, { id: `nc_${prev.length}`, name: '', color: '' }]);
|
||||
}, []);
|
||||
const colorKeys = useMemo(
|
||||
() =>
|
||||
[...originalColors, ...newColors]
|
||||
.map((color) => color.id)
|
||||
.filter((c) => !includes(deleted, c)),
|
||||
[originalColors, newColors, deleted],
|
||||
);
|
||||
|
||||
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
|
||||
const errMsg = new Map<string, string>();
|
||||
|
||||
try {
|
||||
const sourceColor = formData.get('source');
|
||||
if (isNil(sourceColor) || isEmpty(sourceColor)) {
|
||||
errMsg.set('source', 'Source color is required');
|
||||
}
|
||||
const errorColor = formData.get('error');
|
||||
if (isNil(errorColor) || isEmpty(errorColor)) {
|
||||
errMsg.set('error', 'Error color is required');
|
||||
}
|
||||
if (!isEmpty(errMsg)) return errMsg;
|
||||
|
||||
const customColors: Record<string, string> = {};
|
||||
for (const key of colorKeys) {
|
||||
const name = formData.get(`name_${key}`) as string;
|
||||
const color = formData.get(`color_${key}`) as string;
|
||||
if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
|
||||
customColors[name] = color;
|
||||
}
|
||||
|
||||
const generatedScheme = colorFn?.generate_material_design_3_scheme(
|
||||
sourceColor,
|
||||
errorColor,
|
||||
customColors,
|
||||
);
|
||||
updateScheme((prev) => {
|
||||
prev.schemeStorage.source = {
|
||||
source: sourceColor as string,
|
||||
error: errorColor as string,
|
||||
custom_colors: customColors,
|
||||
};
|
||||
prev.schemeStorage.scheme = generatedScheme[0];
|
||||
prev.schemeStorage.cssVariables = generatedScheme[1];
|
||||
prev.schemeStorage.scssVariables = generatedScheme[2];
|
||||
prev.schemeStorage.jsVariables = generatedScheme[3];
|
||||
return prev;
|
||||
});
|
||||
|
||||
onBuildCompleted?.();
|
||||
} catch (e) {
|
||||
console.error('[generate m3 scheme]', e);
|
||||
}
|
||||
|
||||
return errMsg;
|
||||
}, new Map<string, string>());
|
||||
|
||||
return (
|
||||
<ScrollArea enableY>
|
||||
<form action={handleSubmitAction} className={styles.builder_layout}>
|
||||
<h5 className={styles.segment_title}>Required Colors</h5>
|
||||
<label className={styles.label}>Source Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="source"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.source) ||
|
||||
isEmpty(scheme.schemeStorage.source?.source)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source?.source
|
||||
}
|
||||
/>
|
||||
{errMsg.has('source') && <span className={styles.error_msg}>{errMsg.get('source')}</span>}
|
||||
</div>
|
||||
<label className={styles.label}>Error Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker
|
||||
name="error"
|
||||
color={
|
||||
isNil(scheme.schemeStorage.source?.error) ||
|
||||
isEmpty(scheme.schemeStorage.source.error)
|
||||
? undefined
|
||||
: scheme.schemeStorage.source.error
|
||||
}
|
||||
/>
|
||||
{errMsg.has('error') && <span className={styles.error_msg}>{errMsg.get('error')}</span>}
|
||||
</div>
|
||||
<h5 className={styles.segment_title}>Custom Colors</h5>
|
||||
<label style={{ gridColumn: 1 }}>Name</label>
|
||||
<label>Color</label>
|
||||
<div>
|
||||
<button type="button" className="small" onClick={addEntryAction}>
|
||||
Add Color
|
||||
</button>
|
||||
</div>
|
||||
{originalColors
|
||||
.filter((color) => !includes(deleted, color.id))
|
||||
.map((color) => (
|
||||
<ColorEntry
|
||||
key={color.id}
|
||||
entry={color}
|
||||
onDelete={(index) => setDeleted((prev) => [...prev, index])}
|
||||
/>
|
||||
))}
|
||||
{newColors
|
||||
.filter((color) => !includes(deleted, color.id))
|
||||
.map((color) => (
|
||||
<ColorEntry
|
||||
key={color.id}
|
||||
entry={color}
|
||||
onDelete={(index) => setDeleted((prev) => [...prev, index])}
|
||||
/>
|
||||
))}
|
||||
<div style={{ gridColumn: '2 / span 2' }}>
|
||||
<button type="submit" className="primary">
|
||||
Build Scheme
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user