避免Scheme在构建之前点击预览和导出。

This commit is contained in:
徐涛 2025-02-17 10:10:10 +08:00
parent e980eeec3d
commit 639b6b223e
5 changed files with 50 additions and 5 deletions

View File

@ -3,6 +3,7 @@ import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { MaterialDesign2SchemeStorage } from '../../material-2-scheme';
import { SchemeContent } from '../../models';
import { isNilOrEmpty } from '../../utls';
import { SchemeExport } from './Export';
import { M2SchemeBuilder } from './m2-scheme/Builder';
import { M2SchemePreview } from './m2-scheme/Preview';
@ -24,7 +25,15 @@ export function M2Scheme({ scheme }: M2SchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
<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') && <M2SchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<M2SchemeBuilder scheme={scheme} onBuildComplete={() => setActiveTab('overview')} />

View File

@ -3,6 +3,7 @@ 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';
@ -24,7 +25,15 @@ export function M3DynamicScheme({ scheme }: M3SchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
<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')} />

View File

@ -3,6 +3,7 @@ import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
import { SchemeContent } from '../../models';
import { isNilOrEmpty } from '../../utls';
import { SchemeExport } from './Export';
import { M3SchemeBuilder } from './m3-scheme/Builder';
import { M3SchemePreview } from './m3-scheme/Preview';
@ -24,7 +25,15 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
<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') && (
<M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

View File

@ -3,6 +3,7 @@ import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { SchemeContent } from '../../models';
import { QSchemeStorage } from '../../q-scheme';
import { isNilOrEmpty } from '../../utls';
import { SchemeExport } from './Export';
import { QSchemeBuilder } from './q-scheme/Builder';
import { QSchemePreview } from './q-scheme/Preview';
@ -24,7 +25,15 @@ export function QScheme({ scheme }: QSchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
<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') && <QSchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<QSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />

View File

@ -3,6 +3,7 @@ import { useState } from 'react';
import { Tab } from '../../components/Tab';
import { SchemeContent } from '../../models';
import { SwatchSchemeStorage } from '../../swatch_scheme';
import { isNilOrEmpty } from '../../utls';
import { SchemeExport } from './Export';
import { SwatchSchemeBuilder } from './swatch-scheme/Builder';
import { SwatchSchemePreview } from './swatch-scheme/Preview';
@ -24,7 +25,15 @@ export function SwatchScheme({ scheme }: SwatchSchemeProps) {
return (
<>
<Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
<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') && <SwatchSchemePreview scheme={scheme} />}
{isEqual(activeTab, 'builder') && (
<SwatchSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />