/** @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 (
{children}
{data.label}
); }; const Sidebar = ({ graph }: SidebarProps): JSX.Element => { const generalRef = useRef(null); const gistRef = useRef(null); useEffect(() => { const generalContainer = generalRef.current; patchDnd(generalContainer, graph, generals); const gistContainer = gistRef.current; patchDnd(gistContainer, graph, gists); }); return (
{generals.map((cell) => { const Cell = Cells[cell.type]; return ( ); })}
{gists.map((cell) => { const Cell = Cells[cell.type]; return ( ); })}
); }; export default Sidebar;