-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #77 from idrawjs/dev-v0.4
feat: add editMode
- Loading branch information
Showing
37 changed files
with
1,304 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| // @import "../variable.less"; | ||
|
|
||
| @base-page-tree: ~'@{prefix}-base-page-tree'; | ||
|
|
||
| .@{base-page-tree} { | ||
| // fix antd style | ||
| &.ant-tree { | ||
| .ant-tree-iconEle { | ||
| display: none; | ||
| } | ||
|
|
||
| .ant-tree-title { | ||
| display: flex; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .ant-tree-switcher { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| } | ||
|
|
||
| .@{base-page-tree}-node { | ||
| position: relative; | ||
| display: flex; | ||
| width: 100%; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .@{base-page-tree}-node-title { | ||
| position: relative; | ||
| display: -webkit-box; | ||
| float: inline-start; | ||
| overflow: hidden; | ||
| height: 24px; | ||
| padding-left: 24px; | ||
| white-space: initial; | ||
| text-overflow: ellipsis; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-line-clamp: 1; | ||
| } | ||
|
|
||
| .@{base-page-tree}-node-title-input { | ||
| background: ~'var(--@{prefix}-bg-color)'; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| display: inline-flex; | ||
| // display: none; | ||
| float: inline-start; | ||
| // overflow: hidden; | ||
| // white-space: nowrap; | ||
| // text-overflow: ellipsis; | ||
|
|
||
| // &.@{base-page-tree}-node-title-input-active { | ||
| // display: flex; | ||
| // } | ||
| } | ||
|
|
||
| .@{base-page-tree}-node-title-icon { | ||
| position: absolute; | ||
| top: 6px; | ||
| left: 6px; | ||
| font-size: 14px; | ||
| display: inline-flex; | ||
| width: 14px; | ||
| margin-right: 6px; | ||
| } | ||
|
|
||
| .@{base-page-tree}-node-action { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| display: inline-flex; | ||
| float: inline-end; | ||
| padding: 0 8px; | ||
| background: ~'var(--@{prefix}-bg-color)'; | ||
| } | ||
|
|
||
| .@{base-page-tree}-node-icon { | ||
| font-size: 12px; | ||
| margin-left: 4px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .@{base-page-tree}-node-selected { | ||
| .@{base-page-tree}-node-action { | ||
| background: ~'var(--@{prefix}-common-primary-color)'; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React from 'react'; | ||
| import { IconWrapper } from './util'; | ||
| import type { IconWrapperProps } from './util'; | ||
|
|
||
| const Icon = (props: IconWrapperProps) => { | ||
| return ( | ||
| <IconWrapper {...props}> | ||
| <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor"> | ||
| <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-696 72h136v656H184V184z m656 656H384V384h456v456zM384 320V184h456v136H384z"></path> | ||
| </svg> | ||
| </IconWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default Icon; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React, { useMemo } from 'react'; | ||
| import classnames from 'classnames'; | ||
| import { Tree } from 'antd'; | ||
| import type { CSSProperties } from 'react'; | ||
| import type { TreeProps } from 'antd'; | ||
| import type { ElementPosition } from 'idraw'; | ||
| import { wrapTreeViewData } from './wrap'; | ||
| import type { TreeNodeProps } from './tree-node'; | ||
| import type { PageTreeData } from '../../types'; | ||
| import { IconDown } from '../../icons'; | ||
| import { generateClassName } from '../../css'; | ||
|
|
||
| const { DirectoryTree } = Tree; | ||
| const modName = 'base-page-tree'; | ||
|
|
||
| export type PageTreeProps = Pick<TreeNodeProps, 'onTitleChange' | 'onOperationToggle'> & { | ||
| height: number; | ||
| className?: string; | ||
| style?: CSSProperties; | ||
| treeData?: PageTreeData; | ||
| selectedKeys?: string[]; | ||
| defaultExpandedKeys?: string[]; | ||
| expandedKeys?: string[]; | ||
| onSelect?: (e: { uuids: string[]; positions: ElementPosition[] }) => void; | ||
| onDrop?: (e: { from: ElementPosition; to: ElementPosition }) => void; | ||
| onDelete?: (e: { uuid: string }) => void; | ||
| }; | ||
|
|
||
| const treePosToElementPosition = (pos: string) => { | ||
| const elemPos: ElementPosition = pos.split('-').map((i) => parseInt(i)); | ||
| elemPos.shift(); | ||
| return elemPos; | ||
| }; | ||
|
|
||
| export const PageTree = React.forwardRef((props: PageTreeProps, ref: any) => { | ||
| const { height, className, style, treeData, onTitleChange, onOperationToggle, onSelect, selectedKeys, onDrop, defaultExpandedKeys, expandedKeys, onDelete } = | ||
| props; | ||
| const onSelectNode: TreeProps['onSelect'] = (selectedKeys, info) => { | ||
| const pos = treePosToElementPosition(info.node.pos); | ||
| const positions: ElementPosition[] = [pos]; | ||
| const uuids = [selectedKeys[0]] as string[]; | ||
| onSelect?.({ uuids, positions }); | ||
| }; | ||
|
|
||
| const onElementDelete: PageTreeProps['onDelete'] = ({ uuid }) => { | ||
| onDelete?.({ uuid }); | ||
| }; | ||
|
|
||
| return useMemo(() => { | ||
| const wrappedTreeData = wrapTreeViewData(treeData || [], { | ||
| parentModName: modName, | ||
| generateClassName, | ||
| onTitleChange, | ||
| onOperationToggle, | ||
| onDelete: onElementDelete, | ||
| position: [], | ||
| selectedKeys: selectedKeys || [] | ||
| }); | ||
|
|
||
| return ( | ||
| <DirectoryTree | ||
| ref={ref} | ||
| height={height} | ||
| style={style} | ||
| className={classnames(generateClassName(modName), className)} | ||
| showLine | ||
| blockNode | ||
| // multiple | ||
| selectedKeys={selectedKeys} | ||
| switcherIcon={<IconDown />} | ||
| // icon={(props: any) => { | ||
| // const type: ElementType | undefined = props?.data?.title?.props?.type; | ||
| // return getIcon(type); | ||
| // }} | ||
| icon={null} | ||
| onSelect={onSelectNode} | ||
| treeData={wrappedTreeData} | ||
| defaultExpandedKeys={defaultExpandedKeys} | ||
| expandedKeys={expandedKeys} | ||
| draggable={{ | ||
| icon: false, | ||
| nodeDraggable: () => true | ||
| }} | ||
| onDrop={(info) => { | ||
| const { dragNode, node, dropToGap, dropPosition } = info; | ||
| const from: ElementPosition = treePosToElementPosition(dragNode.pos); | ||
| const to: ElementPosition = treePosToElementPosition(node.pos); | ||
| if (dropToGap === true && dropPosition >= 0) { | ||
| to[to.length - 1] = dropPosition; | ||
| } else if (node.dragOverGapBottom === true) { | ||
| to[to.length - 1] = to[to.length - 1] + 1; | ||
| } else if (node.dragOverGapTop === true) { | ||
| to[to.length - 1] = Math.max(0, to[to.length - 1] - 1); | ||
| } else if (node.dragOver === true) { | ||
| to.push(0); | ||
| } | ||
| onDrop?.({ from, to }); | ||
| }} | ||
| /> | ||
| ); | ||
| }, [className, style, onSelectNode, treeData, selectedKeys]); | ||
| }); |
Oops, something went wrong.