You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.0 KiB
130 lines
3.0 KiB
/** @jsx jsx */
|
|
import { useRef, useEffect, ReactNode } from 'react';
|
|
import { jsx, css } from '@emotion/core';
|
|
import styled from '@emotion/styled';
|
|
import { Graph } from '@antv/x6';
|
|
import { Collapse } from 'antd';
|
|
import { generals, gists, DataItem } from '../data/cells';
|
|
import patchDnd from '../utils/patch-dnd';
|
|
import Cells from './cells';
|
|
import 'antd/lib/collapse/style';
|
|
|
|
const { Panel } = Collapse;
|
|
|
|
const ToolCollapse = styled(Collapse)`
|
|
border: none;
|
|
|
|
> .ant-collapse-item > .ant-collapse-header {
|
|
height: 36px;
|
|
line-height: 12px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
`;
|
|
|
|
const ToolPanel = styled(Panel)`
|
|
margin-right: -1px;
|
|
|
|
.ant-collapse-content-box {
|
|
margin-bottom: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
`;
|
|
|
|
interface SidebarProps {
|
|
graph: Graph;
|
|
}
|
|
|
|
const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode }): JSX.Element => {
|
|
return (
|
|
<div
|
|
css={css`
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
padding: 10px 5px;
|
|
width: 50%;
|
|
height: 80px;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
border-right: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
:hover {
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
`}
|
|
>
|
|
<div
|
|
css={css`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
`}
|
|
>
|
|
{children}
|
|
</div>
|
|
<span
|
|
css={css`
|
|
font-size: 11px;
|
|
line-height: 19px;
|
|
`}
|
|
>
|
|
{data.label}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Sidebar = ({ graph }: SidebarProps): JSX.Element => {
|
|
const generalRef = useRef<HTMLDivElement>(null);
|
|
const gistRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const generalContainer = generalRef.current;
|
|
patchDnd(generalContainer, graph, generals);
|
|
|
|
const gistContainer = gistRef.current;
|
|
patchDnd(gistContainer, graph, gists);
|
|
});
|
|
|
|
return (
|
|
<div
|
|
css={css`
|
|
height: 100%;
|
|
overflow: auto;
|
|
border-right: 1px solid #ddd;
|
|
`}
|
|
>
|
|
<ToolCollapse defaultActiveKey={['general', 'gist']}>
|
|
<ToolPanel header="General" key="general">
|
|
<div ref={generalRef}>
|
|
{generals.map((cell) => {
|
|
const Cell = Cells[cell.type];
|
|
return (
|
|
<CellWrapper key={cell.type} data={cell}>
|
|
<Cell />
|
|
</CellWrapper>
|
|
);
|
|
})}
|
|
</div>
|
|
</ToolPanel>
|
|
<ToolPanel header="业务元件" key="gist">
|
|
<div ref={gistRef}>
|
|
{gists.map((cell) => {
|
|
const Cell = Cells[cell.type];
|
|
return (
|
|
<CellWrapper key={`${cell.type}${cell.label}`} data={cell}>
|
|
<Cell />
|
|
</CellWrapper>
|
|
);
|
|
})}
|
|
</div>
|
|
</ToolPanel>
|
|
</ToolCollapse>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|
|
|