45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { isEqual, isNil } from 'lodash-es';
|
|
import { useState } from 'react';
|
|
import { Tab } from '../../components/Tab';
|
|
import { MaterialDesign3DynamicSchemeStorage } from '../../material-3-scheme';
|
|
import { SchemeContent } from '../../models';
|
|
import { isNilOrEmpty } from '../../utls';
|
|
import { SchemeExport } from './Export';
|
|
import { M3DynamicSchemeBuilder } from './m3-dynamic-scheme/Builder';
|
|
import { M3SchemePreview } from './m3-scheme/Preview';
|
|
|
|
const tabOptions = [
|
|
{ title: 'Overview', id: 'overview' },
|
|
{ title: 'Builder', id: 'builder' },
|
|
{ title: 'Exports', id: 'export' },
|
|
];
|
|
|
|
type M3SchemeProps = {
|
|
scheme: SchemeContent<MaterialDesign3DynamicSchemeStorage>;
|
|
};
|
|
|
|
export function M3DynamicScheme({ scheme }: M3SchemeProps) {
|
|
const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
|
|
isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Tab
|
|
tabs={tabOptions}
|
|
activeTab={activeTab}
|
|
onActive={(v) => setActiveTab(v as string)}
|
|
disabled={{
|
|
overview: isNilOrEmpty(scheme.schemeStorage?.scheme),
|
|
export: isNilOrEmpty(scheme.schemeStorage?.cssVariables),
|
|
}}
|
|
/>
|
|
{isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
|
|
{isEqual(activeTab, 'builder') && (
|
|
<M3DynamicSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
|
|
)}
|
|
{isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
|
|
</>
|
|
);
|
|
}
|