Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(view): migrate group menu

Browse Source
This commit is contained in:
lawvs
2022-07-26 16:25:51 +08:00
parent 2846e464d9
commit 502a7c87a5
2 changed files with 23 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
libs/components/editor-blocks/src/blocks/group/GroupMenu.tsx
View File

@@ -3,8 +3,7 @@ import {
mergeToPreviousGroup,
RecastScene,
RecastView,
useRecastBlockScene,
useRecastKanbanGroupBy,
useCurrentView,
useRecastView,
} from '@toeverything/components/editor-core';
import {
@@ -29,7 +28,7 @@ import { GroupPanel } from './components/group-panel/GroupPanel';
import { IconButton } from './components/IconButton';
import { Line } from './components/Line';
import { Sorter } from './components/sorter';
import { PANEL_CONFIG, SCENE_CONFIG } from './config';
import { PANEL_CONFIG } from './config';
import type { ActivePanel } from './types';
const VIEW_ICON_MAP: Record<RecastView['type'], ReactElement> = {
@@ -39,14 +38,14 @@ const VIEW_ICON_MAP: Record<RecastView['type'], ReactElement> = {
};
const ViewsMenu = () => {
const { currentView, recastViews, changeView } = useRecastView();
const { currentView, recastViews, setCurrentView } = useRecastView();
return (
<>
{recastViews.map(view => (
<IconButton
key={view.id}
active={view.id === currentView.id}
onClick={() => changeView(view)}
onClick={() => setCurrentView(view)}
>
{VIEW_ICON_MAP[view.type]}
{view.name}
@@ -67,24 +66,21 @@ const GroupMenuWrapper = ({
}) => {
/* feature flag: sprint14 close Filter、Sort feature */
const filterSorterFlag = useFlag('FilterSorter', false);
const { scene, setPage, setKanban, setTable } = useRecastBlockScene();
const { groupBy } = useRecastKanbanGroupBy();
const [currentView] = useCurrentView();
const theme = useTheme();
/* state: add active-style */
const [activePanel, setActivePanel] = useState<ActivePanel>(
const [activePanel, setActivePanel] = useState<ActivePanel | null>(
PANEL_CONFIG.GROUP_BY
);
/* state: open panel */
const [openPanel, setOpenPanel] = useState<ActivePanel>(null);
const [openPanel, setOpenPanel] = useState<ActivePanel | null>(null);
/**
* close panel state/active state
*/
const closePanel = () => {
if (!groupBy?.id) {
setActivePanel(null);
}
setActivePanel(null);
setOpenPanel(null);
};
@@ -108,21 +104,6 @@ const GroupMenuWrapper = ({
zIndex={theme.affine.zIndex.header - 1}
content={
<GroupPanel>
<IconButton
active={scene === SCENE_CONFIG.PAGE}
onClick={setPage}
>
<TodoListIcon fontSize="small" />
<span>Text View</span>
</IconButton>
<IconButton
active={scene === SCENE_CONFIG.KANBAN}
onClick={setKanban}
>
<KanBanIcon fontSize="small" />
Kanban
</IconButton>
<ViewsMenu />
<IconButton
active={activePanel === PANEL_CONFIG.ADD_VIEW}
@@ -146,38 +127,26 @@ const GroupMenuWrapper = ({
// </IconButton>
// )
<CommingSoon>
<IconButton
active={scene === SCENE_CONFIG.TABLE}
style={{ cursor: 'not-allowed' }}
>
<IconButton style={{ cursor: 'not-allowed' }}>
<TableIcon fontSize="small" />
Table
</IconButton>
</CommingSoon>
}
<CommingSoon>
<IconButton
active={scene === SCENE_CONFIG.TABLE}
style={{ cursor: 'not-allowed' }}
>
<IconButton style={{ cursor: 'not-allowed' }}>
<KanBanIcon fontSize="small" />
Calendar
</IconButton>
</CommingSoon>
<CommingSoon>
<IconButton
active={scene === SCENE_CONFIG.TABLE}
style={{ cursor: 'not-allowed' }}
>
<IconButton style={{ cursor: 'not-allowed' }}>
<TableIcon fontSize="small" />
Timeline
</IconButton>
</CommingSoon>
<CommingSoon>
<IconButton
active={scene === SCENE_CONFIG.TABLE}
style={{ cursor: 'not-allowed' }}
>
<IconButton style={{ cursor: 'not-allowed' }}>
<KanBanIcon fontSize="small" />
BI
</IconButton>
@@ -227,9 +196,9 @@ const GroupMenuWrapper = ({
)
}
{scene === RecastScene.Kanban && (
{currentView.type === RecastScene.Kanban && (
<IconButton
active={activePanel === PANEL_CONFIG.GROUP_BY}
active={true}
onClick={() => onPanelChange(PANEL_CONFIG.GROUP_BY)}
>
<GroupByIcon fontSize="small" />

18
libs/components/editor-blocks/src/blocks/group/GroupView.tsx
View File

@@ -1,17 +1,17 @@
import {
addNewGroup,
RecastScene,
useCurrentView,
useOnSelect,
useRecastBlockScene,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import type { CreateView } from '@toeverything/framework/virgo';
import type { ComponentType, FC } from 'react';
import { useState } from 'react';
import { GroupMenuWrapper } from './GroupMenu';
import { SceneKanban } from './scene-kanban';
import { ScenePage } from './ScenePage';
import { SceneTable } from './SceneTable';
import { GroupMenuWrapper } from './GroupMenu';
import { styled } from '@toeverything/components/ui';
import { useState } from 'react';
import type { FC, ComponentType } from 'react';
import type { CreateView } from '@toeverything/framework/virgo';
const SceneMap: Record<RecastScene, ComponentType<CreateView>> = {
page: ScenePage,
@@ -78,7 +78,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
export const GroupView: FC<CreateView> = props => {
const { block, editor } = props;
const { scene } = useRecastBlockScene();
const [currentView] = useCurrentView();
const [groupIsSelect, setGroupIsSelect] = useState(false);
useOnSelect(block.id, (groupIsSelect: boolean) => {
@@ -89,9 +89,9 @@ export const GroupView: FC<CreateView> = props => {
addNewGroup(editor, block, true);
};
const View = SceneMap[scene];
const View = SceneMap[currentView.type];
if (!View) {
return <>Group scene not found: {scene}!</>;
return <>Group scene not found: {currentView.type}!</>;
}
return (