- {this.renderTreeNodes(this.state.data)}
+
+ item.semi).map(item => item.id)}
+ expanded={this.state.hasExpanded}
+ closeExpandedTreeNode={this.closeExpandedTreeNode}
+ expandTreeNode={this.expandTreeNode}
+ setExpandTreeNodes={this.setExpandTreeNodes}
+ onCheckChange={this.onCheckChange}
+ hightLightNodes={this.props.hightLightNodes}
+ onHightLightChange={this.props.onHightLightChange}
+ onExpanded={this.onExpanded}
+ data={data}
+ prefixCls={prefixCls}
+ checkable={checkable}
+ highlightable={highlightable}
+ editable={editable}
+ searchable={searchable}
+ openIcon={openIcon}
+ closeIcon={closeIcon}
+ draggable={draggable}
+ onDragStart={onDragStart}
+ onDrop={onDrop}
+ onDelete={onDelete}
+ onSave={onSave}
+ />
)
}
}
+
+const HOCTree = TreeComponent => {
+ return class WrapperTree extends Component {
+ render () {
+ const { draggable } = this.props
+ const DraggableTree = withDragDropContext(Tree)
+ return draggable ?
:
+ }
+ }
+}
+export default HOCTree(Tree)
diff --git a/components/tree/TreeDivider.js b/components/tree/TreeDivider.js
new file mode 100644
index 000000000..3b3633e33
--- /dev/null
+++ b/components/tree/TreeDivider.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import ClassNames from 'classnames'
+const TreeDivider = props => {
+ return (
+
+ )
+}
+
+export default TreeDivider
diff --git a/components/tree/TreeItem.js b/components/tree/TreeItem.js
new file mode 100644
index 000000000..2c1c43fc2
--- /dev/null
+++ b/components/tree/TreeItem.js
@@ -0,0 +1,284 @@
+import React, { Component } from 'react'
+import Checkbox from '../table/checkbox/index'
+import { DragSource, DropTarget } from 'react-dnd'
+import Input from '../input'
+import { findDOMNode } from 'react-dom'
+import TreeDivider from './TreeDivider'
+const Types = {
+ TreeNode: 'treeNode'
+}
+class TreeItem extends Component {
+ render () {
+ const {
+ editable,
+ draggable,
+ dropDividerPosition,
+ checked,
+ expanded,
+ highlight,
+ editNodes,
+ editingNodes,
+ prefixCls,
+ semiChecked,
+ onNodeClick,
+ onClick,
+ highlightable,
+ item,
+ draggingNode,
+ checkable,
+ itemStyle,
+ onExpanded,
+ onValueChange,
+ cancelEditNode,
+ cancelAddSiblingNode,
+ renderTree,
+ renderRightClickMenu,
+ onCheckChange,
+ onSetHighlight,
+ showRightClickMenu,
+ closeRightClickMenu,
+ renderSwitcher,
+ connectDragSource,
+ connectDropTarget,
+ isOver,
+ targetNode,
+ saveEditNode,
+ origin,
+ loadChildren
+ } = this.props
+ const treeItem = (
+
+
+ {targetNode === item.id && dropDividerPosition === 'down' && isOver && (
+
+ )}
+ {
+
{
+ onExpanded(expanded, item)
+ if (origin) {
+ loadChildren(item.id)
+ }
+ }}
+ className={`${prefixCls}_item-icon`}
+ >
+ {((item.children && item.children.length > 0) || (origin && !expanded)) &&
+ renderSwitcher(expanded)}
+
+ }
+ {checkable ? (
+
onCheckChange(checked, item)}
+ onTitleClick={e => {
+ onNodeClick && onNodeClick(item)
+ onClick && onClick(item)
+ highlightable && onSetHighlight(item)
+ e.stopPropagation()
+ }}
+ highlight={highlight === item.id}
+ text={item.title}
+ disabled={item.disabled}
+ />
+ ) : item.status === 'editable' || editNodes.map(node => node.id).includes(item.id) ? (
+
+ node.id === item.id) || {}).title}
+ onChange={e => {
+ onValueChange(e.target.value, item.id)
+ }}
+ />
+ {
+ saveEditNode(item.id)
+ }}
+ >
+ 确定
+
+ {
+ if (editNodes.map(node => node.id).includes(item.id)) {
+ cancelEditNode(item.id)
+ } else {
+ cancelAddSiblingNode(item.id)
+ }
+ }}
+ >
+ 取消
+
+
+ ) : draggable ? (
+ connectDragSource(
+ {
+ if (editable) {
+ e.preventDefault()
+ showRightClickMenu(item)
+ }
+ }}
+ onClick={e => {
+ closeRightClickMenu()
+ onNodeClick && onNodeClick(item)
+ onClick && onClick(item)
+ highlightable && onSetHighlight(item)
+ e.stopPropagation()
+ }}
+ >
+ {item.title}
+ {renderRightClickMenu(item)}
+ {targetNode === item.id && dropDividerPosition === 'sub' && isOver && (
+
+ )}
+
+ )
+ ) : (
+ {
+ if (this.props.editable) {
+ e.preventDefault()
+ showRightClickMenu(item)
+ }
+ }}
+ onClick={e => {
+ closeRightClickMenu()
+ onNodeClick && onNodeClick(item)
+ onClick && onClick(item)
+ highlightable && onSetHighlight(item)
+ e.stopPropagation()
+ }}
+ >
+ {item.title}
+ {renderRightClickMenu(item)}
+
+ )}
+
+ )
+ return draggable ? connectDropTarget(treeItem) : treeItem
+ }
+}
+const source = {
+ beginDrag (props) {
+ // 开始拖拽前，如果已经展开，则需要收起
+ if (props.expanded) {
+ props.closeExpandedTreeNode(props.item.id)
+ }
+ props.onDragStart(props.item)
+ return { sourceItem: props.item, originalExpandStatus: props.expanded }
+ },
+ endDrag (props, monitor) {
+ const dropResult = monitor.getDropResult()
+ if (!dropResult) {
+ const { removeTargetNode, removeDraggingNode } = props
+ removeDraggingNode()
+ removeTargetNode()
+ }
+ }
+}
+const target = {
+ drop (props, monitor) {
+ const { sourceItem, originalExpandStatus } = monitor.getItem()
+ const {
+ item: targetItem,
+ dropNode,
+ removeDraggingNode,
+ expandTreeNode,
+ removeTargetNode,
+ dropDividerPosition
+ } = props
+
+ // 先看下是不是在最近得组件
+ if (monitor.isOver({ shallow: true })) {
+ if (
+ sourceItem.id === targetItem.id ||
+ (targetItem.children && targetItem.children.map(t => t.id).includes(sourceItem.id))
+ ) {
+ // 如果源节点就是目的节点或者源节点是目的节点的子节点（直系）再或者源节点是目的节点的父节点，那么什么都不做
+ // 如果什么都不做，原来展开则现在还展开
+ if (originalExpandStatus) {
+ expandTreeNode(sourceItem.id)
+ }
+ removeDraggingNode()
+ removeTargetNode()
+ } else {
+ // 移动节点到相应位置
+ dropNode(sourceItem, targetItem, dropDividerPosition)
+ removeDraggingNode()
+ removeTargetNode()
+ }
+ }
+ },
+ hover (props, monitor, component) {
+ const { sourceItem } = monitor.getItem()
+ const {
+ item: targetItem,
+ setDraggingNode,
+ setTargetNode,
+ positionX,
+ positionY,
+ setPosition
+ } = props
+ // 先看下是不是在最近得组件
+ if (monitor.isOver({ shallow: true })) {
+ const sourcePosition = monitor.getClientOffset()
+ const targetComponent = findDOMNode(component).getBoundingClientRect()
+ if (!(sourcePosition.x === positionX && sourcePosition.y === positionY)) {
+ setPosition(sourcePosition.x, sourcePosition.y)
+ // 如果在节点的上半部分，则为移动其内部，如果为下半部分，则为节点下方
+ if (sourcePosition.y <= targetComponent.y + targetComponent.height / 2) {
+ setTargetNode(targetItem.id, 'sub')
+ } else {
+ setTargetNode(targetItem.id, 'down')
+ }
+ setDraggingNode(sourceItem.id)
+ }
+ }
+ }
+}
+function sourceCollect (connect, monitor) {
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ }
+}
+function targetCollect (connect, monitor) {
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver()
+ }
+}
+
+const DraggableTreeItem = DropTarget(Types['TreeNode'], target, targetCollect)(
+ DragSource(Types['TreeNode'], source, sourceCollect)(TreeItem)
+)
+const HOCTreeItem = TreeItemComponent => {
+ return class WrapperTreeItem extends Component {
+ render () {
+ const { draggable } = this.props
+
+ return draggable ? (
+
+ ) : (
+
+ )
+ }
+ }
+}
+export default HOCTreeItem(TreeItem)
diff --git a/components/tree/TreeNode.js b/components/tree/TreeNode.js
index 3824a58f9..2b4c5ca3e 100644
--- a/components/tree/TreeNode.js
+++ b/components/tree/TreeNode.js
@@ -1,144 +1,579 @@
import React, { Component } from 'react'
-import Checkbox from '../table/checkbox/index'
import classNames from 'classnames'
+import isEqual from 'lodash/isEqual'
+import cloneDeep from 'lodash/cloneDeep'
+import Input from '../input'
+import Icon from '../icon'
+import uuidv4 from 'uuid/v4'
+import TreeItem from './TreeItem'
+import Modal from '../modal'
+import { collectExpandId, findNode } from './util'
+import { handleNotificate } from '../notification'
+import axios from 'axios'
+import qs from 'qs'
export default class TreeNode extends Component {
constructor (props) {
super(props)
this.state = {
- highlight: null
+ highlight: null,
+ showRightClickMenu: null,
+ dataCache: [],
+ prevData: [],
+ // 存储编辑节点编辑前的状态
+ editNodes: [],
+ // 存储编辑节点的状态
+ editingNodes: [],
+ // 处于拖拽状态的节点
+ draggingNode: null,
+ // 处于目标状态的节点
+ targetNode: null,
+ // 放置线的位置,分为下线和子线，下线则放置在该节点下侧，子线为放置在该节点内部
+ dropDividerPosition: null,
+ searchValue: '',
+ showModal: false,
+ currentDeleteNode: null,
+ // 总共高亮的项
+ highlightNum: 0,
+ positionX: null,
+ positionY: null
+ }
+ }
+ static getDerivedStateFromProps (props, state) {
+ if (!isEqual(props.data, state.prevData)) {
+ return {
+ ...state,
+ prevData: props.data,
+ dataCache: props.data
+ }
+ }
+ return state
+ }
+ setPosition = (x, y) => {
+ const { positionX, positionY } = this.state
+ if (!(x === positionX && y === positionY)) {
+ this.setState({
+ positionX: x,
+ positionY: y
+ })
}
}
- onDragEnter (item, data, e) {
- this.props.onDragEnter(e, item, data)
+ setHighlightNum = () => {
+ this.setState({
+ highlightNum: this.state.highlightNum + 1
+ })
}
- onDragOver (item, data, e) {
- this.props.onDragOver(e, item, data)
+ // 高亮检索值
+ highlightData = (data, highlightValue) => {
+ return data.map(item => {
+ if (typeof item.title === 'string' && item.title.includes(highlightValue)) {
+ const index = item.title.indexOf(highlightValue)
+ const beforeStr = item.title.substr(0, index)
+ const afterStr = item.title.substr(index + highlightValue.length)
+ item.title = (
+
+ {beforeStr}
+ {highlightValue}
+ {afterStr}
+
+ )
+ }
+ if (item.children) {
+ this.highlightData(item.children, highlightValue)
+ }
+ return item
+ })
}
- onDragLeave (item, data, e) {
- this.props.onDragLeave(e, item, data)
+ // 统计高亮项
+ recordHighlight = (data, highlightValue, count) => {
+ data.forEach(item => {
+ if (typeof item.title === 'string' && item.title.includes(highlightValue)) {
+ count = count + 1
+ }
+ if (item.children) {
+ this.recordHighlight(item.children, highlightValue, count)
+ }
+ })
+ return count
}
- onDrop (item, data, e) {
- this.props.onDrop(e, item, data)
+ renderSwitcher = expanded => {
+ const { prefixCls } = this.props
+ const switcherClsName = classNames(
+ `${prefixCls}-switcher`,
+ 'hi-icon',
+ `icon-${expanded ? 'down' : 'right'}`
+ )
+ return
}
- onDragStart (item, data, e) {
- this.props.onDragStart(e, item, data)
+
+ renderItemIcon = () => {
+ const { prefixCls, itemIcon } = this.props
+ const switcherClsName = classNames(
+ `${prefixCls}-switcher`,
+ 'hi-icon',
+ `icon-${itemIcon || 'document'}`
+ )
+ return
}
- getItem (name, treeItem) {
- let has = false
- this.props[name].map((item) => {
- if (treeItem.id === item) {
- has = true
+ // 设置拖拽中的节点
+ setDraggingNode = itemId => {
+ this.setState({
+ draggingNode: itemId
+ })
+ }
+ // 移除拖拽中的节点
+ removeDraggingNode = () => {
+ this.setState({
+ draggingNode: null
+ })
+ }
+ // 添加兄弟节点
+ _addSibNode = (itemId, data, editingNodes) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ const addNode = { id: uuidv4(), title: '', status: 'editable' }
+ data.splice(index + 1, 0, addNode)
+ editingNodes.push(addNode)
+ } else {
+ if (d.children) {
+ this._addSibNode(itemId, d.children, editingNodes)
+ }
}
})
- return has
}
-
- onCheckChange (checked, item) {
- this.props.onCheckChange(checked, item)
+ addSiblingNode = itemId => {
+ const { dataCache, editingNodes } = this.state
+ const _dataCache = cloneDeep(dataCache)
+ const _editingNodes = [...editingNodes]
+ this._addSibNode(itemId, _dataCache, _editingNodes)
+ this.setState({ dataCache: _dataCache, editingNodes: _editingNodes })
}
- onExpanded (expanded, item) {
- this.props.onExpanded(expanded, item)
+ // 取消添加节点
+ _cancelAddSiblingNode = (itemId, data) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ data.splice(index, 1)
+ } else {
+ if (d.children) {
+ this._cancelAddSiblingNode(itemId, d.children)
+ }
+ }
+ })
}
- nodeClick = (item) => {
- this.props.onNodeClick(item)
+ cancelAddSiblingNode = itemId => {
+ const { dataCache } = this.state
+ const _dataCache = cloneDeep(dataCache)
+ this._cancelAddSiblingNode(itemId, _dataCache)
+ this.setState({ dataCache: _dataCache })
}
-
- renderSwitcher = (expanded) => {
- const { prefixCls, openIcon, closeIcon } = this.props
- const switcherClsName = classNames(`${prefixCls}-switcher`, 'hi-icon', `icon-${expanded ? (closeIcon || 'minus') : (openIcon || 'plus')}`)
- return (
-
- )
+ // 添加子节点
+ _addChildNode = (itemId, data, editingNodes) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ if (!d.children) {
+ d.children = []
+ }
+ const addNode = { id: uuidv4(), title: '', status: 'editable' }
+ d.children.push(addNode)
+ editingNodes.push(addNode)
+ } else {
+ if (d.children) {
+ this._addChildNode(itemId, d.children, editingNodes)
+ }
+ }
+ })
}
-
- renderItemIcon = () => {
- const { prefixCls, itemIcon } = this.props
- const switcherClsName = classNames(`${prefixCls}-switcher`, 'hi-icon', `icon-${itemIcon || 'document'}`)
+ addChildNode = item => {
+ const { dataCache, editingNodes } = this.state
+ const { expandTreeNode } = this.props
+ expandTreeNode(item.id)
+ const _dataCache = cloneDeep(dataCache)
+ const _editingNodes = [...editingNodes]
+ this._addChildNode(item.id, _dataCache, _editingNodes)
+ this.setState({ dataCache: _dataCache, editingNodes: _editingNodes })
+ }
+ // 编辑节点
+ editNode = item => {
+ const _editNodes = [...this.state.editNodes]
+ const _editingNodes = [...this.state.editingNodes]
+ _editNodes.push(item)
+ _editingNodes.push(item)
+ this.setState({ editNodes: _editNodes, editingNodes: _editingNodes })
+ }
+ // 同步编辑值
+ onValueChange = (value, itemId) => {
+ this.setState({
+ editingNodes: this.state.editingNodes
+ .filter(item => item.id !== itemId)
+ .concat(
+ Object.assign({}, this.state.editingNodes.find(item => item.id === itemId), {
+ title: value
+ })
+ )
+ })
+ }
+ // 取消编辑节点
+ _cancelEditNode = (itemId, data, nodeBeforeEdit) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ d.title = nodeBeforeEdit.title
+ } else {
+ if (d.children) {
+ this._cancelEditNode(itemId, d.children, nodeBeforeEdit)
+ }
+ }
+ })
+ }
+ cancelEditNode = itemId => {
+ const { editNodes, dataCache, editingNodes } = this.state
+ const nodeBeforeEdit = editNodes.find(node => node.id === itemId)
+ const _dataCache = cloneDeep(dataCache)
+ this._cancelEditNode(itemId, _dataCache, nodeBeforeEdit)
+ this.setState({
+ dataCache: _dataCache,
+ editNodes: editNodes.filter(node => node.id !== itemId),
+ editingNodes: editingNodes.filter(node => node.id !== itemId)
+ })
+ }
+ // 保存编辑
+ _saveEditNode = (itemId, data, nodeEdited) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ d.title = nodeEdited.title
+ delete d.status
+ } else {
+ if (d.children) {
+ this._saveEditNode(itemId, d.children, nodeEdited)
+ }
+ }
+ })
+ }
+ saveEditNode = itemId => {
+ const { editNodes, dataCache, editingNodes } = this.state
+ const nodeEdited = editingNodes.find(node => node.id === itemId)
+ const _dataCache = cloneDeep(dataCache)
+ this._saveEditNode(itemId, _dataCache, nodeEdited)
+ this.setState({
+ dataCache: _dataCache,
+ editNodes: editNodes.filter(node => node.id !== itemId),
+ editingNodes: editingNodes.filter(node => node.id !== itemId)
+ })
+ const node = findNode(itemId, dataCache)
+ this.props.onSave(node, _dataCache)
+ }
+ // 删除拖动的节点
+ _delDragNode = (itemId, data) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ data.splice(index, 1)
+ } else {
+ if (d.children) {
+ this._delDragNode(itemId, d.children)
+ }
+ }
+ })
+ }
+ // 新增放置的节点
+ _addDropNode = (targetItemId, sourceItemId, data, allData) => {
+ data.forEach((d, index) => {
+ if (d.id === targetItemId) {
+ const sourceNode = findNode(sourceItemId, allData)
+ if (!d.children) {
+ d.children = []
+ }
+ d.children.push(sourceNode)
+ } else {
+ if (d.children) {
+ this._addDropNode(targetItemId, sourceItemId, d.children, allData)
+ }
+ }
+ })
+ }
+ // 异步加载子节点
+ loadChildren = itemId => {
+ const { origin } = this.props
+ const { method, url, headers, data, params, func, errorHandler } = origin
+ const { dataCache } = this.state
+ const that = this
+ axios({
+ method: method,
+ url: url,
+ headers,
+ data,
+ params,
+ paramsSerializer: function (params) {
+ return qs.stringify(params, { arrayFormat: 'brackets' })
+ }
+ })
+ .then(function (res) {
+ const _dataCache = cloneDeep(dataCache)
+ const node = findNode(itemId, _dataCache)
+ if (!node.children) {
+ node.children = func(res.data)
+ that.setState({
+ dataCache: _dataCache
+ })
+ }
+ })
+ .catch(error => {
+ if (errorHandler) {
+ errorHandler(error)
+ } else {
+ handleNotificate({
+ type: 'error',
+ showClose: true,
+ autoClose: true,
+ title: 'Error',
+ duration: 5000,
+ message: error
+ })
+ }
+ })
+ }
+ switchDropNode = (targetItemId, sourceItemId, data, allData) => {
+ data.forEach(item => {
+ if (item.children) {
+ if (item.children.some(e => e.id === targetItemId)) {
+ const index = item.children.findIndex(i => i.id === targetItemId)
+ const sourceNode = findNode(sourceItemId, allData)
+ item.children.splice(index + 1, 0, sourceNode)
+ } else {
+ this.switchDropNode(targetItemId, sourceItemId, item.children, allData)
+ }
+ }
+ })
+ }
+ dropNode = (sourceItem, targetItem, dropDividerPosition) => {
+ const { dataCache } = this.state
+ const _dataCache = cloneDeep(dataCache)
+ this._delDragNode(sourceItem.id, _dataCache)
+ if (dropDividerPosition === 'sub') {
+ // 这里为什么用 sourceItem.id不用 sourceItem 是因为 sourceItem 有可能是 highlight 过得
+ this._addDropNode(targetItem.id, sourceItem.id, _dataCache, dataCache)
+ } else {
+ this.switchDropNode(targetItem.id, sourceItem.id, _dataCache, dataCache)
+ }
+ const _sourceItem = findNode(sourceItem.id, dataCache)
+ const _targetItem = findNode(targetItem.id, dataCache)
+ this.props.onDrop(_sourceItem, _targetItem)
+ this.setState({
+ dataCache: _dataCache
+ })
+ }
+ // 删除节点
+ _deleteNode = (itemId, data) => {
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ data.splice(index, 1)
+ } else {
+ if (d.children) {
+ this._deleteNode(itemId, d.children)
+ }
+ }
+ })
+ }
+ deleteNode = itemId => {
+ const { dataCache } = this.state
+ const _dataCache = cloneDeep(dataCache)
+ this._deleteNode(itemId, _dataCache)
+ this.setState({ dataCache: _dataCache })
+ const node = findNode(itemId, dataCache)
+ this.props.onDelete(node, _dataCache)
+ }
+ // 渲染右键菜单
+ renderRightClickMenu = item => {
return (
-
+ item.id === this.state.showRightClickMenu && (
+
+ - this.addSiblingNode(item.id)}>添加节点
+ - this.addChildNode(item)}>添加子节点
+ - this.editNode(item)}>编辑
+ - {
+ this.setCurrentDeleteNode(item.id)
+ this.openModal()
+ }}
+ >
+ 删除
+
+
+ )
)
}
+ onSetHighlight = item => {
+ this.setState({
+ highlight: item.id
+ })
+ }
+ showRightClickMenu = item => {
+ this.setState({
+ showRightClickMenu: item.id,
+ highlight: item.id
+ })
+ }
+ closeRightClickMenu = () => {
+ this.setState({
+ showRightClickMenu: null
+ })
+ }
+ setTargetNode = (id, position) => {
+ this.setState({ targetNode: id, dropDividerPosition: position })
+ }
+ removeTargetNode = () => {
+ this.setState({ targetNode: null })
+ }
+ openModal = () => {
+ this.setState({
+ showModal: true
+ })
+ }
+ setCurrentDeleteNode = nodeId => {
+ this.setState({
+ currentDeleteNode: nodeId
+ })
+ }
+ renderTree = data => {
+ const {
+ draggable,
+ prefixCls,
+ semiChecked,
+ onNodeClick,
+ onClick,
+ highlightable,
+ checkable,
+ closeExpandedTreeNode,
+ expandTreeNode,
+ onCheckChange,
+ onExpanded,
+ editable,
+ checked,
+ expanded,
+ origin,
+ onDragStart
+ // onDrop
+ } = this.props
+ const {
+ highlight,
+ editNodes,
+ editingNodes,
+ draggingNode,
+ targetNode,
+ dropDividerPosition,
+ positionX,
+ positionY
+ } = this.state
- renderTree (data) {
- const {draggable, prefixCls, dragNodePosition, dragNode, withLine, semiChecked, onNodeClick, onClick, highlightable} = this.props
- const {highlight} = this.state
return (
{data.map(item => {
- const checked = this.getItem('checked', item)
- const expanded = this.getItem('expanded', item)
-
- const itemStyle = classNames(
- dragNode === item.id && dragNodePosition === 0 && 'dragTo',
- dragNode === item.id && dragNodePosition === -1 && 'dragToGapTop',
- dragNode === item.id && dragNodePosition === 1 && 'dragToGapBottom',
- this.props.checkable && 'has_checkbox'
- )
-
- const itemContainerStyle = classNames(
- withLine && 'with-line'
+ return (
+
)
-
- return (-
- this.onExpanded(expanded, item)} className={`${prefixCls}_item-icon`}>{item.children && item.children.length > 0 ? this.renderSwitcher(expanded) : (withLine && this.renderItemIcon())}
-
- {this.props.checkable ? this.onCheckChange(checked, item)}
- onTitleClick={(e) => {
- onNodeClick && onNodeClick(item)
- onClick && onClick(item)
- highlightable && this.setState({
- highlight: item.id
- })
- e.stopPropagation()
- }}
- highlight={highlight === item.id}
- text={item.title}
- disabled={item.disabled} />
- : {
- onNodeClick && onNodeClick(item)
- onClick && onClick(item)
- highlightable && this.setState({
- highlight: item.id
- })
- e.stopPropagation()
- }}
- >{this.renderText(item.title)}
- }
- {item.children && item.children.length > 0 && expanded ? this.renderTree(item.children) : null}
-
)
})}
)
}
- renderText (text) {
- return text
- }
render () {
- const {data} = this.props
+ const { dataCache, searchValue, highlightNum } = this.state
+ const { searchable } = this.props
return (
- {this.renderTree(data)}
+ {searchable && (
+
+
{
+ this.setState({
+ searchValue: e.target.value,
+ highlightNum: this.recordHighlight(dataCache, e.target.value, 0)
+ })
+
+ this.props.setExpandTreeNodes(
+ collectExpandId(dataCache, e.target.value, [], dataCache)
+ )
+ }}
+ append={
}
+ style={{ width: '272px' }}
+ />
+ {highlightNum === 0 && searchValue !== '' && (
+
未找到搜索结果
+ )}
+
+ )}
+
+ {searchable
+ ? this.renderTree(this.highlightData(cloneDeep(dataCache), searchValue))
+ : this.renderTree(cloneDeep(dataCache))}
+
+
{
+ this.deleteNode(this.state.currentDeleteNode)
+ this.setState({
+ showModal: false
+ })
+ }}
+ onCancel={() => {
+ this.setState({
+ showModal: false
+ })
+ }}
+ >
+ 删除节点将删除所有子节点，确定删除吗？
+
)
}
diff --git a/components/tree/style/index.scss b/components/tree/style/index.scss
index 2bc6969e8..fb403b8e1 100644
--- a/components/tree/style/index.scss
+++ b/components/tree/style/index.scss
@@ -4,6 +4,62 @@ $tree: 'hi-tree' !default;
.hi-tree {
font-size: 14px;
+ .hi-tree__searcher {
+ position: relative;
+ padding-left: 15px;
+ margin-bottom: 24px;
+
+ .hi-tree__searcher--empty {
+ position: absolute;
+ top: 34px;
+ color: #999;
+ left: 39;
+ font-size: 12;
+ }
+
+ .hi-input__inner {
+ flex: 1;
+ }
+
+ .hi-input--append {
+ line-height: 32px;
+
+ .hi-input__append {
+ width: 32px;
+ text-align: center;
+ }
+ }
+ }
+
+ .hi-tree__divider {
+ position: absolute;
+ display: flex;
+ width: 100%;
+ align-items: center;
+
+ &--top {
+ top: 21px;
+ }
+
+ &--bottom {
+ bottom: -2px;
+ }
+
+ .divider-line {
+ flex: 1;
+ height: 1px;
+ background-color: rgba(66, 132, 245, 1);
+ }
+
+ .divider-circle {
+ flex: 0 0 5px;
+ height: 5px;
+ border: 1px solid rgba(66, 132, 245, 1);
+ border-radius: 2.5px;
+ box-sizing: border-box;
+ }
+ }
+
ul,
li {
margin: 0;
@@ -26,7 +82,7 @@ $tree: 'hi-tree' !default;
li {
// padding: 6px 0;
position: relative;
-
+ // display: flex;
&.with-line {
&::before {
content: ' ';
@@ -39,6 +95,16 @@ $tree: 'hi-tree' !default;
}
}
+ .editing {
+ display: flex;
+ align-items: center;
+
+ .hi-input {
+ width: 240px;
+ margin-right: 20px;
+ }
+ }
+
.hi-checkbox-label {
display: none;
}
@@ -63,9 +129,12 @@ $tree: 'hi-tree' !default;
}
&_item-text {
- width: calc(100% - 18px);
+ // width: calc(100% - 18px);
+ cursor: pointer;
display: inline-block;
vertical-align: middle;
+ padding: 0 4px;
+ position: relative;
&.dragTo {
background-color: #4284f5;
@@ -84,12 +153,47 @@ $tree: 'hi-tree' !default;
padding-left: 4px;
}
+ transition: background 0.3s;
+
&:hover {
background-color: rgba(66, 133, 244, 0.08);
+ color: rgba(56, 62, 71, 1);
+ }
+
+ &.dragging {
+ background-color: rgba(246, 246, 246, 1);
+ color: rgba(204, 204, 204, 1);
}
&.highlight {
- color: #4284f5;
+ color: #fff;
+ background-color: #4285f4;
+ }
+
+ .right-click-menu {
+ color: #333;
+ position: absolute;
+ top: 0;
+ left: calc(100% + 5px);
+ z-index: 1;
+ width: 120px;
+ background: #fff;
+ border: 1px solid #e6e7e8;
+ border-radius: 2px;
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+ box-sizing: border-box;
+ padding: 4px 1px;
+
+ li {
+ padding-left: 15px;
+ height: 36px;
+ line-height: 36px;
+ transition: background 0.3s;
+
+ &:hover {
+ background: rgba(66, 133, 244, 0.08);
+ }
+ }
}
}
@@ -97,6 +201,7 @@ $tree: 'hi-tree' !default;
display: inline-block;
vertical-align: middle;
width: 18px;
+ cursor: pointer;
}
.#{$tree} {
diff --git a/components/tree/util.js b/components/tree/util.js
index c2e0c515b..674717088 100644
--- a/components/tree/util.js
+++ b/components/tree/util.js
@@ -85,8 +85,8 @@ export function getOffset (ele) {
* @param {ele} tar 目标节点
*/
export function insBefore (cur, tar) {
- const current = cur.parentNode.parentNode// li
- const target = tar.parentNode// li
+ const current = cur.parentNode.parentNode // li
+ const target = tar.parentNode // li
target.parentNode.insertBefore(current, target)
}
/**
@@ -95,8 +95,8 @@ export function insBefore (cur, tar) {
* @param {ele} tar 目标节点
*/
export function insAfter (cur, tar) {
- const current = cur.parentNode.parentNode// li
- const target = tar.parentNode// li
+ const current = cur.parentNode.parentNode // li
+ const target = tar.parentNode // li
if (target.parentNode.lastChild === target) {
target.parentNode.appendChild(current)
} else {
@@ -109,8 +109,8 @@ export function insAfter (cur, tar) {
* @param {ele} tar 目标节点
*/
export function insChild (cur, tar) {
- const current = cur.parentNode.parentNode// li
- const target = tar.parentNode.parentNode// li
+ const current = cur.parentNode.parentNode // li
+ const target = tar.parentNode.parentNode // li
if (current === target) return
if (target.childNodes.length > 1) {
tar.parentNode.nextSibling.appendChild(current)
@@ -141,12 +141,12 @@ export function deepClone (arr) {
return Object.assign({}, arr)
}
return arr
-};
+}
export function deepMap (data, parent) {
let arr = []
for (let key in data) {
- let item = {...data[key]}
+ let item = { ...data[key] }
if (parent) {
item.parent = parent
} else {
@@ -181,29 +181,34 @@ export function getChild (data, id) {
export function getSemi (data, checks) {
let all = deepMap(data)
- let arr = all.map(item => {
- item.child = getChild(all, item.id)
- item.family = item.parent.concat(item.child)
- item.semi = false
- let num = 0
- checks.forEach(c => {
- if (item.child.includes(c)) {
- num = num + 1
- }
+ let arr = all
+ .map(item => {
+ item.child = getChild(all, item.id)
+ item.family = item.parent.concat(item.child)
+ item.semi = false
+ let num = 0
+ checks.forEach(c => {
+ if (item.child.includes(c)) {
+ num = num + 1
+ }
+ })
+ item.num = num
+ item.semi = num !== 0 && num !== item.child.length
+ return item
})
- item.num = num
- item.semi = num !== 0 && num !== item.child.length
- return item
- }).filter(item => item.semi).map(item => item.id)
+ .filter(item => item.semi)
+ .map(item => item.id)
return arr
}
export function getChildren (data, id) {
let all = deepMap(data)
- return all.map(item => {
- item.child = getChild(all, item.id)
- return item
- }).find(item => item.id === id).child
+ return all
+ .map(item => {
+ item.child = getChild(all, item.id)
+ return item
+ })
+ .find(item => item.id === id).child
}
export function getDisabled (data) {
@@ -233,3 +238,82 @@ export function getAll (data, checkedKeys) {
})
return all
}
+
+export const dealData = (data, tempData = {}, parent = null) => {
+ if (data.length === 0) {
+ return data
+ }
+ data.map(item => {
+ tempData[item.id] = { ...item }
+ if (parent) {
+ tempData[item.id].parent = parent
+ }
+ if (item.children && item.children.length > 0) {
+ const tempArr = []
+ item.children.map(i => {
+ tempArr.push(i.id)
+ })
+ tempData[item.id].children = tempArr
+ dealData(item.children, tempData, item.id)
+ }
+ })
+}
+
+// 寻找某一节点的父节点
+export const getParentId = (id, data) => {
+ let parentId
+ data.forEach(item => {
+ if (item.children) {
+ if (item.children.some(item => item.id === id)) {
+ parentId = item.id
+ } else if (getParentId(id, item.children)) {
+ parentId = getParentId(id, item.children)
+ }
+ }
+ })
+ return parentId
+}
+// 寻找某一节点的所有子节点
+export const getChildrenIds = (node, arr = []) => {
+ if (node.children) {
+ arr = node.children.map(i => i.id).concat(arr)
+ }
+ node.children.forEach(c => getChildrenIds(c, arr))
+ return arr
+}
+// 寻找某一节点的所有祖先节点
+export const getAncestorIds = (id, data, arr = []) => {
+ if (getParentId(id, data)) {
+ arr.push(getParentId(id, data))
+ getAncestorIds(getParentId(id, data), data, arr)
+ }
+ return arr
+}
+
+// 收集所有需要展开的节点 id
+export const collectExpandId = (data, searchValue, collection = [], allData) => {
+ data.forEach(item => {
+ if (item.title.includes(searchValue)) {
+ const parentIds = getAncestorIds(item.id, allData, [])
+ collection.splice(collection.length - 1, 0, ...parentIds)
+ }
+ if (item.children) {
+ collectExpandId(item.children, searchValue, collection, allData)
+ }
+ })
+ return collection
+}
+// 给定一个结合，根据 id 寻找节点
+export const findNode = (itemId, data) => {
+ let node
+ data.forEach((d, index) => {
+ if (d.id === itemId) {
+ node = d
+ } else {
+ if (d.children && findNode(itemId, d.children)) {
+ node = findNode(itemId, d.children)
+ }
+ }
+ })
+ return node
+}
diff --git a/components/upload/style/index.scss b/components/upload/style/index.scss
index 9ad458241..b1dae4bb9 100644
--- a/components/upload/style/index.scss
+++ b/components/upload/style/index.scss
@@ -140,6 +140,7 @@
}
}
}
+
.hasborder {
border: 1px dotted #bcbcbc;
}
@@ -585,20 +586,24 @@
&__mask--bottom {
position: absolute;
background: #000;
- opacity: .2;
+ opacity: 0.2;
z-index: 1;
}
+
&__mask--top {
top: 0;
left: 0;
right: 0;
}
+
&__mask--left {
left: 0;
}
+
&__mask--right {
right: 0;
}
+
&__mask--bottom {
bottom: 0;
left: 0;
diff --git a/docs/en-US/components/button.md b/docs/en-US/components/button.md
index 1f554b699..3e9f34e77 100644
--- a/docs/en-US/components/button.md
+++ b/docs/en-US/components/button.md
@@ -1,12 +1,12 @@
## Button
-Commonly used button
+Commonly used button.
### Standard Button
-:::demo
+:::demo
-Button component provides 7 themes by default. Defined by the `type` attribute, default is `default`。
+Button component provides 7 themes by default. Defined by the `type` attribute, default is `default`.
```js
render() {
@@ -16,30 +16,27 @@ render() {
-
-
-
-
)
}
```
+
:::
### Status Button
@@ -52,24 +49,15 @@ render() {
const Col = Grid.Col
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
)
}
```
+
:::
### Button Size
@@ -78,27 +66,19 @@ render() {
```js
render() {
- const Row = Grid.Row
- const Col = Grid.Col
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
)
}
```
+
:::
### Link Button
@@ -111,73 +91,108 @@ render() {
const Col = Grid.Col
return (
-
-
-
-
-
)
}
```
+
:::
### Button Group
-:::demo
+:::demo
```js
render() {
- const Row = Grid.Row
- const Col = Grid.Col
return (
-
-
-
+
+
+
+
+
+ )
+}
+```
+
+:::
-
-
-
-
-
+### Loading Button
-
-
+:::demo
+
+```js
+constructor() {
+ super()
+ Object.assign(this, {
+ state: {
+ showLoading: false
+ },
+ handleButtonClick() {
+ this.setState({
+ showLoading: true
+ }, () => {
+ setTimeout(() => {
+ this.setState({
+ showLoading: false
+ })
+ }, 3000)
+ })
+ }
+ })
+ this.handleButtonClick = this.handleButtonClick.bind(this)
+}
+render() {
+ return (
+
+
+
+
+
+
+
+
+
+
)
}
```
+
:::
### Attributes
-| Attribute | Description | Type | Options | Default |
-| -------- | ----- | ---- | ---- | ---- |
-| type | button type | string | primary，line, success，danger, default | default |
-| appearance | display type | string | button, link | button |
-| size | button size | string | large, normal, small | normal |
-| className | custom class | string | - | - |
-
+| Attribute | Description | Type | Options | Default |
+| ---------- | ------------- | ------- | ---------------------------------------------- | ------- |
+| type | button type | string | primary \| line \| success \|danger \| default | default |
+| href | target link | string | - | - |
+| appearance | display type | string | button \| link | button |
+| size | button size | string | large\| normal \| small | normal |
+| icon | icon button | string | see [`
`](/#/en-US/docs/icon) component | - |
+| className | custom class | string | - | - |
+| style | custom styles | object | - | - |
+| loading | show loading | boolean | true \| false | false |
### Events
-| Event Name | Description | Parameters
-| -------- | ----- | ----
-| onClick | triggers when the Button clicked | -
+
+| Event Name | Description | Parameters |
+| ---------- | -------------------------------- | ---------- |
+| onClick | triggers when the Button clicked | Event |
diff --git a/docs/en-US/components/card.md b/docs/en-US/components/card.md
new file mode 100644
index 000000000..e0ce5f2f8
--- /dev/null
+++ b/docs/en-US/components/card.md
@@ -0,0 +1,407 @@
+
+
+## Card 卡片
+
+
+### 基础
+
+:::demo
+
+Card 组件
+
+```js
+render() {
+ const Row = Grid.Row
+ const Col = Grid.Col
+ return (
+
+
+ 普通 Card
+
+
+
+ 无标题
+ 鼠标移入悬浮效果
+ 其它额外内容
+
+
+
+ 禁用状态
+
+
+
+ 无标题,禁用状态
+
+
+ )
+}
+```
+:::
+
+
+### 不同大小
+
+:::demo
+
+Card 组件
+
+```js
+render() {
+ return (
+
+
+ 自定义宽度：200px
+ 其它额外内容
+
+
+
+ size = small
+ 无标题
+ 其它额外内容
+
+
+
+ size = middle
+ 无标题
+ 其它额外内容
+
+
+
+ size = large
+ 无标题
+ 其它额外内容
+
+
+ )
+}
+```
+:::
+
+### 额外按钮
+
+:::demo
+
+Card 组件
+
+```js
+render() {
+ return (
+
+ , ]}
+ extraShow='stay'
+ title='这里是标题这里是标题这里是标题'
+ >
+ 包含额外扩展按钮
+ 扩展按钮常驻
+
+
+ , ]}
+ extraShow='hover'
+ >
+ 有扩展按钮，无标题
+ 扩展按钮移入后显示
+ 其它剩余内容；其它剩余内容；其它剩余内容；其它剩余内容；其它剩余内容；
+
+
+ )
+}
+```
+:::
+
+
+### 图片卡片
+
+:::demo
+
+Card 组件
+
+```js
+render() {
+ return (
+
+ }
+ title='图片展示'
+ description='图片信息描述：size=small;width:276px'
+ size='small'
+ >
+
+ }
+ title='图片展示'
+ description='图片信息描述：size=middle;width:376px'
+ size='middle'
+ >
+
+
+ }
+ title='图片展示'
+ description='图片信息描述：size=large;width:576px'
+ size='large'
+ >
+
+ )
+}
+```
+:::
+
+
+### 简易卡片
+
+:::demo
+
+Card 组件
+
+```js
+render() {
+ return (
+
+
+ 简易卡片
+
+
+
+ 简易卡片
+
+
+
+ 简易卡片
+
+
+
+ 简易卡片
+
+
+ )
+}
+```
+:::
+
+### 配合 Gird 布局 - 图片排版
+
+:::demo
+
+配合 Grid 布局实现更加简单
+
+```js
+render() {
+ const {Row, Col} = Grid
+ return (
+
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+ }
+ title='图片展示'
+ description='这是图片描述'
+ >
+
+
+
+ )
+}
+```
+:::
+
+### 配合 Gird 布局 - 展示
+
+:::demo
+
+配合 Grid 布局实现更加简单
+
+```js
+render() {
+ const {Row, Col} = Grid
+ return (
+
+
+
+
+ 简易卡片
+
+
+
+
+ 简易卡片
+
+
+
+
+ 简易卡片
+
+
+
+
+ 简易卡片
+
+
+
+
+ 简易卡片
+
+
+
+
+ 简易卡片
+
+
+
+
+ )
+}
+```
+:::
+
+
+### 配合 Gird 布局 - 自定义展示
+
+:::demo
+
+配合 Grid 布局实现更加简单
+
+```js
+render() {
+ const {Row, Col} = Grid
+ const colors = ['#46bc99', '#37d5fa', '#b450de', '#fadb14']
+ const cols = colors.map((color, index) => {
+ return (
+
+
+ 无标题
+ 鼠标移入悬浮效果
+ 其它额外内容
+
+
+ )
+ })
+ return (
+
+
+ {cols}
+
+
+ )
+}
+```
+:::
+
+
+### Card Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| title | 卡片标题 | String \| Element | - | - |
+| size | 卡片大小
small -> 276px
middle -> 376px
large -> 576px
不传入 size 将占100%宽度| String | small \| middle \| large | 100% |
+| type | 卡片类型 | String | simple | - |
+| style | 自定义样式 | Object | - | - |
+| hoverable | 鼠标移入卡片是否显示浮起效果 | Boolean | true \| false | false |
+| extra | 卡片右上的扩展按钮 | Array[Elemnt] \| Element | - | - |
+| extraShow | 扩展按钮的显示模式 | String | stay \| hover | stay |
+| cover | 图片卡片 | ImgElement | - | - |
+| description | 图片卡片的信息描述 | String \| Element | - | - |
+| disabled | 是否禁用卡片 | Boolean | true \| false | - |
diff --git a/docs/en-US/components/form.md b/docs/en-US/components/form.md
index 17c3f8974..3a65595ea 100644
--- a/docs/en-US/components/form.md
+++ b/docs/en-US/components/form.md
@@ -1,12 +1,8 @@
## Form
-
-
### Align
-:::demo
-
-
+:::demo
```js
@@ -64,13 +60,12 @@ render(){
)
}
```
+
:::
### Inline
-:::demo
-
-
+:::demo
```js
@@ -90,13 +85,12 @@ render(){
)
}
```
+
:::
### Form Validation
-:::demo
-
-
+:::demo
```js
@@ -107,9 +101,9 @@ constructor(props) {
form: {
name: '',
region: '',
- count: ''
+ count: '',
+ type: []
},
- checkedIndex: -1,
rules: {
name: [
{
@@ -120,15 +114,17 @@ constructor(props) {
],
region: [
{
+ required: true,
message: 'select area',
- trigger: 'change'
+ type: 'number',
+ trigger: 'onChange'
}
],
count: [
{
required: true,
message: 'input count',
- trigger: 'change'
+ trigger: 'onChange'
},
{
validator: (rule, value, cb) => {
@@ -149,7 +145,6 @@ constructor(props) {
}
handleSubmit() {
-
this.form.current.validate(valid => {
if(valid) {
console.log(this.state.form)
@@ -166,9 +161,7 @@ handleChange(key, e, value, index) {
this.setState({
form: Object.assign({}, this.state.form, {[key]: value})
})
-
if(index !== undefined) {
-
this.setState({
checkedIndex: index
})
@@ -177,7 +170,6 @@ handleChange(key, e, value, index) {
render(){
const {form, checkedIndex} = this.state
-
return (
@@ -136,4 +137,4 @@ render () {
| size | Size | string | large default small | default |
| tip | Text | string | - | |
| full | Whether full screen | bool | - | false |
-| show | Whether to display the loading animation | boolean | true false | false |
\ No newline at end of file
+| show | Whether to display the loading animation | boolean | true false | false |
diff --git a/docs/en-US/components/rate.md b/docs/en-US/components/rate.md
new file mode 100644
index 000000000..b4e31cadd
--- /dev/null
+++ b/docs/en-US/components/rate.md
@@ -0,0 +1,117 @@
+## Rate
+
+The rate component.
+
+### Basic
+
+:::demo
+
+```js
+render() {
+ return (
+
+ )
+}
+```
+
+:::
+
+### Advanced
+
+:::demo
+
+```js
+constructor() {
+ super()
+ this.state = {
+ value: 3
+ }
+ this.tooltips = ['terrible', 'bad', 'normal', 'good', 'wonderful']
+}
+
+render() {
+ const { value } = this.state
+ return (
+
+ )
+}
+```
+
+:::
+
+### Use emoji
+
+:::demo
+
+```js
+constructor() {
+ super()
+ this.tooltips = ['terrible', 'bad', 'normal', 'good', 'wonderful']
+}
+
+render() {
+ return (
+
+ )
+}
+```
+
+:::
+
+### Rate Attributes
+
+| Property | Description | Type | Options | Default |
+| ------------ | --------------------------------------- | -------- | ------- | ------- |
+| allowClear | whether to allow clear when click again | boolean | - | true |
+| allowHalf | whether to allow semi selection | boolean | - | true |
+| useEmoji | whether to use emoji | boolean | - | false |
+| className | custom class name of rate | string | - | - |
+| count | star count, not work whem use emoji | number | - | 5 |
+| defaultValue | default value | number | - | 0 |
+| disabled | read only, unable to interact | boolean | - | false |
+| style | custom style object of rate | object | - | - |
+| tooltips | custom tooltip by each character | string[] | - | - |
+| value | current value | number | - | - |
+
+### Rate Events
+
+| Attribute | Description | Parameters |
+| --------- | -------------- | --------------- |
+| onChange | click callback | (value: number) |
diff --git a/docs/en-US/components/select.md b/docs/en-US/components/select.md
index 2d791ecbf..c6040043f 100644
--- a/docs/en-US/components/select.md
+++ b/docs/en-US/components/select.md
@@ -34,8 +34,8 @@ render () {
placeholder='Please Select'
style={{width: '200px'}}
value={'3'}
- onChange={(item) => {
- console.log('Result', item)
+ onChange={(item, changedItem) => {
+ console.log('Result', item, changedItem)
}}
/>