88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
import {
|
|
RecastScene,
|
|
useRecastView,
|
|
} from '@toeverything/components/editor-core';
|
|
import { AddViewIcon, DoneIcon } from '@toeverything/components/icons';
|
|
import { Input, MuiClickAwayListener } from '@toeverything/components/ui';
|
|
import type { ChangeEvent, KeyboardEvent } from 'react';
|
|
import { useState } from 'react';
|
|
import { IconButton } from '../components/IconButton';
|
|
import { Panel } from '../components/Panel';
|
|
import { VIEW_LIST } from './constant';
|
|
import { PanelItem } from './styles';
|
|
|
|
export const AddViewMenu = () => {
|
|
const [viewName, setViewName] = useState('');
|
|
const [viewType, setViewType] = useState<RecastScene>(RecastScene.Page);
|
|
const [activePanel, setActivePanel] = useState(false);
|
|
const { addView, setCurrentView } = useRecastView();
|
|
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
setViewName(e.target.value.trim());
|
|
};
|
|
|
|
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
|
|
if (event.key !== 'Enter') {
|
|
return;
|
|
}
|
|
handleAddView();
|
|
};
|
|
|
|
const handleAddView = async () => {
|
|
const newView = await addView({ name: viewName, type: viewType });
|
|
await setCurrentView(newView);
|
|
setActivePanel(false);
|
|
};
|
|
|
|
return (
|
|
<MuiClickAwayListener onClickAway={() => setActivePanel(false)}>
|
|
<IconButton
|
|
active={activePanel}
|
|
onClick={() => setActivePanel(!activePanel)}
|
|
>
|
|
<AddViewIcon fontSize="small" />
|
|
<span style={{ userSelect: 'none' }}>Add View</span>
|
|
{activePanel && (
|
|
<Panel>
|
|
<PanelItem>
|
|
<Input
|
|
placeholder="View Name"
|
|
autoFocus
|
|
style={{ flex: 1 }}
|
|
onChange={handleChange}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
<IconButton
|
|
aria-label="done"
|
|
onClick={handleAddView}
|
|
>
|
|
<DoneIcon />
|
|
</IconButton>
|
|
</PanelItem>
|
|
|
|
<PanelItem>
|
|
{VIEW_LIST.map(({ name, icon, scene }) => (
|
|
<IconButton
|
|
key={name}
|
|
active={viewType === scene}
|
|
onClick={() => {
|
|
// if (scene === RecastScene.Table) {
|
|
// // The table view is under progress
|
|
// return;
|
|
// }
|
|
setViewType(scene);
|
|
}}
|
|
style={{ textTransform: 'uppercase' }}
|
|
>
|
|
{icon}
|
|
{name}
|
|
</IconButton>
|
|
))}
|
|
</PanelItem>
|
|
</Panel>
|
|
)}
|
|
</IconButton>
|
|
</MuiClickAwayListener>
|
|
);
|
|
};
|