From e120d468b4f970fb4fefb00f85a5288dcb683b3d Mon Sep 17 00:00:00 2001 From: qingyi Date: Thu, 19 Nov 2020 18:41:24 +0800 Subject: [PATCH] feat: compoent ui opti compoent ui opti --- src/components/collapse/style.scss | 4 +- src/components/tree/index.tsx | 1 - src/components/tree/style.scss | 22 +---- src/extensions/explore/explore.tsx | 8 +- src/extensions/explore/tree.tsx | 121 ++++++++++++++++++++++---- src/extensions/explore/treeMock.ts | 52 +++++++++++ stories/components/4-Tree.stories.tsx | 2 +- 7 files changed, 164 insertions(+), 46 deletions(-) create mode 100644 src/extensions/explore/treeMock.ts diff --git a/src/components/collapse/style.scss b/src/components/collapse/style.scss index 9cc07746f..788e1f09b 100644 --- a/src/components/collapse/style.scss +++ b/src/components/collapse/style.scss @@ -48,12 +48,10 @@ cursor: not-allowed; } .rc-collapse-content { - overflow: hidden; - // padding: 0 16px; + overflow: auto; } .rc-collapse-content > .rc-collapse-content-box { font-size: 12px; - margin-top: 8px; margin-bottom: 8px; } .rc-collapse-content-inactive { diff --git a/src/components/tree/index.tsx b/src/components/tree/index.tsx index 26322bda1..560a06586 100644 --- a/src/components/tree/index.tsx +++ b/src/components/tree/index.tsx @@ -7,7 +7,6 @@ import { prefixClaName, classNames } from 'mo/common/className'; export interface ITree {} interface ITreeProps extends TreeProps { - prefixCls: any; } export const Tree: React.FunctionComponent = ( diff --git a/src/components/tree/style.scss b/src/components/tree/style.scss index 215924eec..3cd69fade 100644 --- a/src/components/tree/style.scss +++ b/src/components/tree/style.scss @@ -13,7 +13,6 @@ margin: 0; padding: 0 0 0 8px; line-height: 22px; - // border: 1px solid red; height: 22px; white-space: nowrap; list-style: none; @@ -57,7 +56,6 @@ display: inline-block; height: 22px; margin: 0; - // padding: 1px 3px 0 0; text-decoration: none; vertical-align: top; cursor: pointer; @@ -82,7 +80,8 @@ .rc-tree .rc-tree-treenode span.rc-tree-iconEle.rc-tree-icon__customize { background-image: none; .codicon { - margin-top: 3px; + margin-top: 4px; + transform: scale(0.8); } } .rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher-noop { @@ -91,21 +90,13 @@ } .rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_open { transform: rotate(90deg); + margin-top: -2px; } .rc-tree .rc-tree-treenode span.rc-tree-switcher.rc-tree-switcher_close { } .rc-tree:not(.rc-tree-show-line) .rc-tree-treenode .rc-tree-switcher-noop { background: none; } - .rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > ul { - background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y; - } - .rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) > .rc-tree-switcher-noop { - background-position: -56px -18px; - } - .rc-tree.rc-tree-show-line .rc-tree-treenode:last-child > .rc-tree-switcher-noop { - background-position: -56px -36px; - } .rc-tree-child-tree { display: none; } @@ -121,11 +112,6 @@ .rc-tree-treenode-active { background: rgba(0, 0, 0, 0.1); } - .rc-tree-node-selected { - background-color: #ffe6b0; - border: 1px #ffb951 solid; - opacity: 0.8; - } .rc-tree-icon__open { margin-right: 2px; vertical-align: top; @@ -134,12 +120,10 @@ .rc-tree-icon__close { margin-right: 2px; vertical-align: top; - background-position: -110px 0; } .rc-tree-icon__docu { margin-right: 2px; vertical-align: top; - background-position: -110px -32px; } .rc-tree-icon__customize { margin-right: 2px; diff --git a/src/extensions/explore/explore.tsx b/src/extensions/explore/explore.tsx index 929fc52f2..47ba6a1bf 100644 --- a/src/extensions/explore/explore.tsx +++ b/src/extensions/explore/explore.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { useState } from 'react'; import Collapse, { Panel } from 'mo/components/collapse'; -import { TreeView } from './tree'; +import TreeView from './tree'; import Toolbar from 'mo/components/toolbar'; import { IActionBarItem } from 'mo/components/actionbar'; -import { prefixClaName } from 'mo/common/className'; +import { prefixClaName, codIcon } from 'mo/common/className'; import { Header, Content } from 'mo/workbench/sidebar'; -import { codIcon } from 'mo/common/className'; +import { data } from './treeMock' interface IExplorerProps { isActive?: boolean; } @@ -82,7 +82,7 @@ const initState = { }, ], renderPanel: () => { - return + return } }, { diff --git a/src/extensions/explore/tree.tsx b/src/extensions/explore/tree.tsx index 46fcd88b8..a91b2b0e9 100644 --- a/src/extensions/explore/tree.tsx +++ b/src/extensions/explore/tree.tsx @@ -1,35 +1,120 @@ import * as React from 'react'; -// import { useState } from 'react'; +import { memo, useEffect, useState } from 'react'; import Tree, { TreeNode } from 'mo/components/tree'; -import { prefixClaName } from 'mo/common/className'; -import { codIcon } from 'mo/common/className'; +import { IMenuItem } from 'mo/components/menu'; +import { prefixClaName, codIcon } from 'mo/common/className'; import './style.scss'; + +export interface ITreeNodeItem { + title?: string; + key?: string; + type?: string; + contextMenu?: IMenuItem[] + children?: ITreeNodeItem[] + readonly id?: string; + icon?: string | React.ReactNode; +} interface ITreeProps { - isActive?: boolean; + data: ITreeNodeItem[] } - -// const initState = { -// } -export const TreeView: React.FunctionComponent = ( - ITreeProps +const TreeView: React.FunctionComponent = ( + props: ITreeProps ) => { + const { + data, + } = props; + const [treeData, setTreeData] = useState(data) + + /** + * Refer to antd for details + */ + const onDrop = info => { + console.log(info); + const dropKey = info.node.props.eventKey; + const dragKey = info.dragNode.props.eventKey; + const dropPos = info.node.props.pos.split('-'); + const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); + + const loopTree = (data, key, callback) => { + data.forEach((item, index, arr) => { + if (item.key === key) { + return callback(item, index, arr); + } + if (item.children) { + return loopTree(item.children, key, callback); + } + }); + }; + const data = [...treeData]; + + // Find dragObject + let dragObj; + loopTree(data, dragKey, (item, index, arr) => { + arr.splice(index, 1); + dragObj = item; + }); + + if (!info.dropToGap) { + // Drop on the content + loopTree(data, dropKey, item => { + item.children = item.children || []; + item.children.push(dragObj); + }); + } else if ( + (info.node.props.children || []).length > 0 && + info.node.props.expanded && + dropPosition === 1 + ) { + loopTree(data, dropKey, item => { + item.children = item.children || []; + item.children.unshift(dragObj); + }); + } else { + let ar, i; + loopTree(data, dropKey, (item, index, arr) => { + ar = arr; i = index; + }); + if (dropPosition === -1) { + ar.splice(i, 0, dragObj); + } else { + ar.splice(i + 1, 0, dragObj); + } + } + console.log('data', data) + setTreeData(data); + }; + + useEffect(() => { + return () => { + console.log('clean effect') + } + }, data) + + const renderTreeNodes = data => + data?.map(item => { + return + {item.children && renderTreeNodes(item.children)} + + }); return ( + /** + * TODO: contextMenu、line + */
{ + console.log('onRightClick', event, node) + }} + // onSelect={onClickItem} > - - - - codIcon('codicon-symbol-file')} title='child5' key='child5'> - - - - - + {renderTreeNodes(treeData)}
); }; + +export default memo(TreeView) diff --git a/src/extensions/explore/treeMock.ts b/src/extensions/explore/treeMock.ts new file mode 100644 index 000000000..7c1218495 --- /dev/null +++ b/src/extensions/explore/treeMock.ts @@ -0,0 +1,52 @@ +export const data = [ + { + title: 'folder', + key: 'folder', + type: 'folder', + id: 'abc', + children: [ + { + // id: 'abc', + title: 'abccccccccc', + key: 'abccccccccc', + contextMenu: [ + { + id: 'CommandPalette', + name: 'Command Palette...', + title: 'Command Palette', + }, + { + id: 'Settings', + name: 'Settings', + title: 'Settings', + }, + { + id: 'ColorTheme', + name: 'Color Theme', + title: 'Color Theme', + } + ], + children: [ + { title: 'test.txt', key: 'test.txt', type: 'file', icon: 'codicon-symbol-file' }, + { title: 'test.js', key: 'test.js', type: 'file', icon: 'codicon-file-binary' }, + { title: 'test.html', key: 'test.html', type: 'file', icon: 'codicon-file-code' }, + ], + }, + { + title: 'xyz', + key: 'xyz', + type: 'folder', + children: [ + { title: 'test.pdf', key: 'test.pdf', type: 'file', icon: 'codicon-file-pdf' }, + { title: 'test.media', key: 'test.media', type: 'file', icon: 'codicon-file-media' }, + { title: 'test.zip', key: 'test.zip', type: 'file', icon: 'codicon-file-zip' }, + ], + }, + { + title: 'file.yaml', + key: 'file.yaml', + type: 'file', + }, + ], + } +]; diff --git a/stories/components/4-Tree.stories.tsx b/stories/components/4-Tree.stories.tsx index 45eeff210..a1da4150d 100644 --- a/stories/components/4-Tree.stories.tsx +++ b/stories/components/4-Tree.stories.tsx @@ -10,7 +10,7 @@ export const Basic = () => ( prefixCls='rc-tree' draggable /** - * TODO: 精灵图... + * TODO: antd 用的精灵图... */ // showLine showIcon