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

/** @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;