From 31c8747f33afe3f40e368aa530e2e66f739f7066 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Thu, 28 Jul 2022 16:53:02 +0800
Subject: [PATCH] chore: update view text

---
 .../blocks/group/group-menu/AddViewMenu.tsx   | 37 ++++++++--------
 .../src/blocks/group/group-menu/ViewsMenu.tsx | 43 ++++++++-----------
 .../src/blocks/group/group-menu/constant.tsx  | 25 ++++++++---
 .../editor-core/src/recast-block/view.ts      |  2 +-
 4 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx b/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx
index 8eda3c1c48..a376785b52 100644
--- a/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/group-menu/AddViewMenu.tsx
@@ -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>
                 )}
diff --git a/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx b/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx
index 8989f4ea80..1fee99465e 100644
--- a/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/group-menu/ViewsMenu.tsx
@@ -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>
                     )}
diff --git a/libs/components/editor-blocks/src/blocks/group/group-menu/constant.tsx b/libs/components/editor-blocks/src/blocks/group/group-menu/constant.tsx
index 3645d50bb2..0f2a1887d4 100644
--- a/libs/components/editor-blocks/src/blocks/group/group-menu/constant.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/group-menu/constant.tsx
@@ -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;
diff --git a/libs/components/editor-core/src/recast-block/view.ts b/libs/components/editor-core/src/recast-block/view.ts
index e26b38bb32..c14ef93267 100644
--- a/libs/components/editor-core/src/recast-block/view.ts
+++ b/libs/components/editor-core/src/recast-block/view.ts
@@ -20,7 +20,7 @@ const genViewId = () => nanoid(16) as RecastViewId; // This is a safe type cast
 const DEFAULT_VIEWS: RecastView[] = [
     {
         id: genViewId(),
-        name: 'Text View',
+        name: 'Text',
         type: RecastScene.Page,
     },
     {