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

View File

@@ -8,7 +8,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
import { useState } from 'react';
import { IconButton } from '../components/IconButton';
import { Panel } from '../components/Panel';
import { VIEW_ICON_MAP } from './constant';
import { VIEW_LIST } from './constant';
import { PanelItem } from './styles';
export const AddViewMenu = () => {
@@ -61,26 +61,23 @@ export const AddViewMenu = () => {
</PanelItem>
<PanelItem>
{Object.entries(VIEW_ICON_MAP).map(
([name, icon]) => (
<IconButton
key={name}
active={
viewType === (name as RecastScene)
{VIEW_LIST.map(({ name, icon, scene }) => (
<IconButton
key={name}
active={viewType === scene}
onClick={() => {
if (scene === RecastScene.Table) {
// The table view is under progress
return;
}
onClick={() => {
if (name === 'table') {
// The table view is under progress
return;
}
setViewType(name as RecastScene);
}}
>
{VIEW_ICON_MAP[name as RecastScene]}
{name.toUpperCase()}
</IconButton>
)
)}
setViewType(scene);
}}
style={{ textTransform: 'uppercase' }}
>
{icon}
{name}
</IconButton>
))}
</PanelItem>
</Panel>
)}

View File

@@ -9,7 +9,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
import { useState } from 'react';
import { IconButton } from '../components/IconButton';
import { Panel } from '../components/Panel';
import { VIEW_ICON_MAP } from './constant';
import { VIEW_LIST } from './constant';
import { PanelItem } from './styles';
export const ViewsMenu = () => {
@@ -65,9 +65,8 @@ export const ViewsMenu = () => {
e.preventDefault();
}}
>
{VIEW_ICON_MAP[view.type]}
{VIEW_LIST.find(v => view.type === v.scene)?.icon}
<span style={{ userSelect: 'none' }}>{view.name}</span>
{activeView === view && (
<Panel>
<PanelItem>
@@ -95,29 +94,23 @@ export const ViewsMenu = () => {
</PanelItem>
<PanelItem>
{Object.entries(VIEW_ICON_MAP).map(
([name, icon]) => (
<IconButton
key={name}
active={
viewType ===
(name as RecastScene)
{VIEW_LIST.map(({ name, icon, scene }) => (
<IconButton
key={name}
active={viewType === scene}
onClick={() => {
if (scene === RecastScene.Table) {
// The table view is under progress
return;
}
onClick={() => {
if (name === 'table') {
// The table view is under progress
return;
}
setViewType(
name as RecastScene
);
}}
>
{VIEW_ICON_MAP[name as RecastScene]}
{name.toUpperCase()}
</IconButton>
)
)}
setViewType(scene);
}}
style={{ textTransform: 'uppercase' }}
>
{icon}
{name}
</IconButton>
))}
</PanelItem>
</Panel>
)}

View File

@@ -1,13 +1,24 @@
import { RecastView } from '@toeverything/components/editor-core';
import { RecastScene } from '@toeverything/components/editor-core';
import {
KanBanIcon,
TableIcon,
TodoListIcon,
} from '@toeverything/components/icons';
import type { ReactElement } from 'react';
export const VIEW_ICON_MAP: Record<RecastView['type'], ReactElement> = {
page: <TodoListIcon fontSize="small" />,
kanban: <KanBanIcon fontSize="small" />,
table: <TableIcon fontSize="small" />,
};
export const VIEW_LIST = [
{
name: 'Text',
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;