chore: update view text

This commit is contained in:
lawvs
2022-07-28 16:53:02 +08:00
parent b5d2d063a5
commit 31c8747f33
4 changed files with 54 additions and 53 deletions
@@ -8,7 +8,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { IconButton } from '../components/IconButton'; import { IconButton } from '../components/IconButton';
import { Panel } from '../components/Panel'; import { Panel } from '../components/Panel';
import { VIEW_ICON_MAP } from './constant'; import { VIEW_LIST } from './constant';
import { PanelItem } from './styles'; import { PanelItem } from './styles';
export const AddViewMenu = () => { export const AddViewMenu = () => {
@@ -61,26 +61,23 @@ export const AddViewMenu = () => {
</PanelItem> </PanelItem>
<PanelItem> <PanelItem>
{Object.entries(VIEW_ICON_MAP).map( {VIEW_LIST.map(({ name, icon, scene }) => (
([name, icon]) => ( <IconButton
<IconButton key={name}
key={name} active={viewType === scene}
active={ onClick={() => {
viewType === (name as RecastScene) if (scene === RecastScene.Table) {
// The table view is under progress
return;
} }
onClick={() => { setViewType(scene);
if (name === 'table') { }}
// The table view is under progress style={{ textTransform: 'uppercase' }}
return; >
} {icon}
setViewType(name as RecastScene); {name}
}} </IconButton>
> ))}
{VIEW_ICON_MAP[name as RecastScene]}
{name.toUpperCase()}
</IconButton>
)
)}
</PanelItem> </PanelItem>
</Panel> </Panel>
)} )}
@@ -9,7 +9,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { IconButton } from '../components/IconButton'; import { IconButton } from '../components/IconButton';
import { Panel } from '../components/Panel'; import { Panel } from '../components/Panel';
import { VIEW_ICON_MAP } from './constant'; import { VIEW_LIST } from './constant';
import { PanelItem } from './styles'; import { PanelItem } from './styles';
export const ViewsMenu = () => { export const ViewsMenu = () => {
@@ -65,9 +65,8 @@ export const ViewsMenu = () => {
e.preventDefault(); e.preventDefault();
}} }}
> >
{VIEW_ICON_MAP[view.type]} {VIEW_LIST.find(v => view.type === v.scene)?.icon}
<span style={{ userSelect: 'none' }}>{view.name}</span> <span style={{ userSelect: 'none' }}>{view.name}</span>
{activeView === view && ( {activeView === view && (
<Panel> <Panel>
<PanelItem> <PanelItem>
@@ -95,29 +94,23 @@ export const ViewsMenu = () => {
</PanelItem> </PanelItem>
<PanelItem> <PanelItem>
{Object.entries(VIEW_ICON_MAP).map( {VIEW_LIST.map(({ name, icon, scene }) => (
([name, icon]) => ( <IconButton
<IconButton key={name}
key={name} active={viewType === scene}
active={ onClick={() => {
viewType === if (scene === RecastScene.Table) {
(name as RecastScene) // The table view is under progress
return;
} }
onClick={() => { setViewType(scene);
if (name === 'table') { }}
// The table view is under progress style={{ textTransform: 'uppercase' }}
return; >
} {icon}
setViewType( {name}
name as RecastScene </IconButton>
); ))}
}}
>
{VIEW_ICON_MAP[name as RecastScene]}
{name.toUpperCase()}
</IconButton>
)
)}
</PanelItem> </PanelItem>
</Panel> </Panel>
)} )}
@@ -1,13 +1,24 @@
import { RecastView } from '@toeverything/components/editor-core'; import { RecastScene } from '@toeverything/components/editor-core';
import { import {
KanBanIcon, KanBanIcon,
TableIcon, TableIcon,
TodoListIcon, TodoListIcon,
} from '@toeverything/components/icons'; } from '@toeverything/components/icons';
import type { ReactElement } from 'react';
export const VIEW_ICON_MAP: Record<RecastView['type'], ReactElement> = { export const VIEW_LIST = [
page: <TodoListIcon fontSize="small" />, {
kanban: <KanBanIcon fontSize="small" />, name: 'Text',
table: <TableIcon fontSize="small" />, scene: RecastScene.Page,
}; icon: <TodoListIcon fontSize="small" />,
},
{
name: 'Kanban',
scene: RecastScene.Kanban,
icon: <KanBanIcon fontSize="small" />,
},
{
name: 'Table',
scene: RecastScene.Table,
icon: <TableIcon fontSize="small" />,
},
] as const;
@@ -20,7 +20,7 @@ const genViewId = () => nanoid(16) as RecastViewId; // This is a safe type cast
const DEFAULT_VIEWS: RecastView[] = [ const DEFAULT_VIEWS: RecastView[] = [
{ {
id: genViewId(), id: genViewId(),
name: 'Text View', name: 'Text',
type: RecastScene.Page, type: RecastScene.Page,
}, },
{ {