{queue.map((notice, index) => {
return (
{
+ onClose={(noticeId) => {
this.removeNotice(noticeId)
notice.onClose && notice.onClose()
}}
diff --git a/components/notification/style/index.scss b/components/notification/style/index.scss
index d2b4a96f5..b1cdd899a 100755
--- a/components/notification/style/index.scss
+++ b/components/notification/style/index.scss
@@ -1,6 +1,15 @@
@import '@hi-ui/core-css/index.scss';
@import '../../style/icon/index.scss';
+$theme-colors-notice: (
+ 'orange': #ffefea,
+ 'cyan': #ecf8f4 ,
+ 'magenta': #ffeef1,
+ 'lavender': #f7edfb,
+ 'blue': #ebf6fe,
+ 'purple': #8a8acb
+) !default;
+
.hi-notification__container {
position: fixed;
top: 20px;
@@ -138,11 +147,6 @@
@each $key, $value in $theme-colors {
.hi-notification__container {
.theme__#{$key}.hi-notification.hi-notification--info {
- background-color:
- rgba(
- map-get(get-palette(get-color($palette-primary, $key)), '50'),
- 0.1
- );
border:
1px
solid
@@ -163,3 +167,11 @@
}
}
}
+
+@each $key, $value in $theme-colors-notice {
+ .hi-notification__container {
+ .theme__#{$key}.hi-notification.hi-notification--info {
+ background-color: $value;
+ }
+ }
+}
diff --git a/components/pagination/Pagination.js b/components/pagination/Pagination.js
index aae5c6804..d5e530d21 100644
--- a/components/pagination/Pagination.js
+++ b/components/pagination/Pagination.js
@@ -113,8 +113,10 @@ class Pagination extends Component {
this.setState({
pageSize
}, () => {
- onPageSizeChange && onPageSizeChange(pageSize, current)
- this.handleChange(current)
+ const triggerOnchange = onPageSizeChange && onPageSizeChange(pageSize, current)
+ if (triggerOnchange !== false) {
+ this.handleChange(current)
+ }
})
}
diff --git a/components/popper/index.js b/components/popper/index.js
index 15013bd2a..c26f5c1c1 100644
--- a/components/popper/index.js
+++ b/components/popper/index.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { render } from 'react-dom'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import _ from 'lodash'
import './style/index'
export default class Popper extends Component {
@@ -32,6 +33,9 @@ export default class Popper extends Component {
}
componentDidUpdate (prevProps) {
+ if (!_.isEqual(prevProps.children.props, this.props.children.props)) {
+ this.forceUpdate()
+ }
if (prevProps.show !== this.props.show || this.props.show) {
render(this.renderChildren(), this.container)
}
diff --git a/components/select/Select.js b/components/select/Select.js
index a9a439b03..d5417fadc 100644
--- a/components/select/Select.js
+++ b/components/select/Select.js
@@ -190,7 +190,7 @@ class Select extends Component {
selectedItems.push(item)
}
})
- return reviceSelectedItems.concat(selectedItems)
+ return _.uniqBy(reviceSelectedItems.concat(selectedItems), 'id')
}
onEnterSelect () {
diff --git a/components/select/SelectDropdown.js b/components/select/SelectDropdown.js
index 82c95b790..02d14497b 100644
--- a/components/select/SelectDropdown.js
+++ b/components/select/SelectDropdown.js
@@ -68,7 +68,7 @@ class SelectDropdown extends Component {
_keyword = searchbarValue.includes('(') ? _keyword.replace(/\(/gi, '\\(') : _keyword
_keyword = searchbarValue.includes(')') ? _keyword.replace(/\)/gi, '\\)') : _keyword
- let parts = text.split(new RegExp(`(${_keyword})`, 'gi'))
+ let parts = text.toString().split(new RegExp(`(${_keyword})`, 'gi'))
return (
this.state.searchbarValue.length > 0 ?
- { showSub &&
- }
-}
diff --git a/components/timeline/index.js b/components/timeline/index.js
index 62b0312eb..b5e0e5aca 100644
--- a/components/timeline/index.js
+++ b/components/timeline/index.js
@@ -2,115 +2,182 @@ import React, { Component } from 'react'
import classNames from 'classnames'
import Provider from '../context'
import './style/index'
-import FoldingItem from './FoldingItem'
import Icon from '../icon'
-const Time = props => {
- return (
-
- {layout === 'normal' && type === 'default' && (
-
+
)
@@ -244,80 +243,55 @@ const source = {
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()
- }
+ return { sourceItem: props.item, originalExpandStatus: props.expanded, sourceLevel: props.level }
}
}
const target = {
drop (props, monitor) {
- const { sourceItem, originalExpandStatus } = monitor.getItem()
+ const { sourceItem, originalExpandStatus, sourceLevel } = monitor.getItem()
const {
item: targetItem,
dropNode,
- removeDraggingNode,
expandTreeNode,
- removeTargetNode,
- dropDividerPosition
+ direction,
+ level
} = props
-
// 先看下是不是在最近得组件
if (monitor.isOver({ shallow: true })) {
if (
sourceItem.id === targetItem.id ||
(targetItem.children &&
targetItem.children.map(t => t.id).includes(sourceItem.id) &&
- dropDividerPosition === 'sub')
+ direction === 'sub')
) {
// 如果源节点就是目的节点或者源节点是目的节点的子节点（直系）再或者源节点是目的节点的父节点，那么什么都不做
// 如果什么都不做，原来展开则现在还展开
if (originalExpandStatus) {
expandTreeNode(sourceItem.id)
}
- removeDraggingNode()
- removeTargetNode()
} else {
// 移动节点到相应位置
- dropNode(sourceItem, targetItem, dropDividerPosition)
- removeDraggingNode()
- removeTargetNode()
+ dropNode(sourceItem, targetItem, direction, {before: sourceLevel, after: level})
}
}
},
hover (props, monitor, component) {
- const { sourceItem } = monitor.getItem()
const {
- item: targetItem,
- setDraggingNode,
- setTargetNode,
- positionX,
- positionY,
- setPosition
+ setDirection
} = 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 / 3) {
- setTargetNode(targetItem.id, 'up')
- } else if (
- targetComponent.y + targetComponent.height / 3 < sourcePosition.y &&
- sourcePosition.y <= targetComponent.y + (targetComponent.height * 2) / 3
- ) {
- setTargetNode(targetItem.id, 'sub')
- } else {
- setTargetNode(targetItem.id, 'down')
- }
- setDraggingNode(sourceItem.id)
+ if (sourcePosition.y <= targetComponent.y + targetComponent.height / 3) {
+ setDirection('up')
+ } else if (
+ targetComponent.y + targetComponent.height / 3 < sourcePosition.y &&
+ sourcePosition.y <= targetComponent.y + (targetComponent.height * 2) / 3
+ ) {
+ setDirection('sub')
+ } else {
+ setDirection('down')
}
}
}
@@ -331,7 +305,7 @@ function sourceCollect (connect, monitor) {
function targetCollect (connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
- isOver: monitor.isOver()
+ isOver: monitor.isOver({ shallow: true })
}
}
@@ -340,11 +314,15 @@ const DraggableTreeItem = DropTarget(Types['TreeNode'], target, targetCollect)(
)
const HOCTreeItem = TreeItemComponent => {
return class WrapperTreeItem extends Component {
+ state={direction: null}
+ setDirection = (direction) => {
+ this.setState({direction})
+ }
render () {
const { draggable } = this.props
return draggable ? (
- {
- menu.onClick ? menu.onClick(item, this) : this.editNode(item)
+ const node = findNode(item.id, this.state.dataCache)
+ menu.onClick ? menu.onClick(node, this) : this.editNode(node)
this.closeRightClickMenu()
}}>{menu.title || edit}
},
- 'addChildNode': (item, menu, index) => {
+ 'addChildNode': (item, menu, index, level) => {
return {
menu.onClick ? menu.onClick(item, this) : this.addChildNode(item)
this.closeRightClickMenu()
}}>{menu.title || addChildNode}
},
- 'addSiblingNode': (item, menu, index) => {
+ 'addSiblingNode': (item, menu, index, level) => {
return {
menu.onClick ? menu.onClick(item, this) : this.addSiblingNode(item.id)
this.closeRightClickMenu()
}}>{menu.title || addNode}
},
- 'deleteNode': (item, menu, index) => {
+ 'deleteNode': (item, menu, index, level) => {
return {
- menu.onClick ? menu.onClick(item, this) : this.deleteNode(item)
+ menu.onClick ? menu.onClick(item, this) : this.deleteNode(item, level)
this.closeRightClickMenu()
}}
>
@@ -92,15 +85,6 @@ class TreeNode extends Component {
}
return state
}
- setPosition = (x, y) => {
- const { positionX, positionY } = this.state
- if (!(x === positionX && y === positionY)) {
- this.setState({
- positionX: x,
- positionY: y
- })
- }
- }
// 高亮检索值
highlightData = (data, highlightValue) => {
@@ -158,18 +142,6 @@ class TreeNode extends Component {
return
}
- // 设置拖拽中的节点
- setDraggingNode = itemId => {
- this.setState({
- draggingNode: itemId
- })
- }
- // 移除拖拽中的节点
- removeDraggingNode = () => {
- this.setState({
- draggingNode: null
- })
- }
// 添加兄弟节点
_addSibNode = (itemId, data, editingNodes) => {
data.forEach((d, index) => {
@@ -236,8 +208,8 @@ class TreeNode extends Component {
this._addChildNode(item.id, _dataCache, _editingNodes)
this.setState({ dataCache: _dataCache, editingNodes: _editingNodes })
}
- deleteNode = item => {
- this.setCurrentDeleteNode(item.id)
+ deleteNode = (item, level) => {
+ this.setCurrentDeleteNode({id: item.id, level})
this.openModal()
}
// 编辑节点
@@ -296,18 +268,29 @@ class TreeNode extends Component {
}
})
}
- saveEditNode = itemId => {
+ saveEditNode = (itemId, level) => {
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)
+ if (this.props.onBeforeSave) {
+ const result = this.props.onBeforeSave(nodeEdited, {before: dataCache, after: _dataCache}, level)
+ if (result === true) {
+ this.setState({
+ dataCache: _dataCache,
+ editNodes: editNodes.filter(node => node.id !== itemId),
+ editingNodes: editingNodes.filter(node => node.id !== itemId)
+ })
+ this.props.onSave(nodeEdited, _dataCache)
+ }
+ } else {
+ this.setState({
+ dataCache: _dataCache,
+ editNodes: editNodes.filter(node => node.id !== itemId),
+ editingNodes: editingNodes.filter(node => node.id !== itemId)
+ })
+ this.props.onSave(nodeEdited, _dataCache)
+ }
}
// 删除拖动的节点
_delDragNode = (itemId, data) => {
@@ -394,7 +377,7 @@ class TreeNode extends Component {
}
})
}
- dropNode = (sourceItem, targetItem, dropDividerPosition) => {
+ dropNode = (sourceItem, targetItem, dropDividerPosition, {before, after}) => {
const { dataCache } = this.state
const _dataCache = cloneDeep(dataCache)
this._delDragNode(sourceItem.id, _dataCache)
@@ -407,14 +390,14 @@ class TreeNode extends Component {
const _sourceItem = findNode(sourceItem.id, dataCache)
const _targetItem = findNode(targetItem.id, dataCache)
if (this.props.onDrop) {
- if (this.props.onDrop(_sourceItem, _targetItem)) {
- this.props.onDropEnd(_sourceItem, _targetItem)
+ if (this.props.onDrop(_sourceItem, _targetItem, {before: dataCache, after: _dataCache}, {before, after: dropDividerPosition === 'sub' ? after + 1 : after})) {
+ this.props.onDropEnd(_sourceItem, _targetItem, dropDividerPosition)
this.setState({
dataCache: _dataCache
})
}
} else {
- this.props.onDropEnd(_sourceItem, _targetItem)
+ this.props.onDropEnd(_sourceItem, _targetItem, dropDividerPosition)
this.setState({
dataCache: _dataCache
})
@@ -432,20 +415,28 @@ class TreeNode extends Component {
}
})
}
- _deleteNode = itemId => {
+ _deleteNode = (delNode) => {
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)
+ const node = findNode(delNode.id, dataCache)
+ this.__deleteNode(delNode.id, _dataCache)
+ if (this.props.onBeforeDelete) {
+ const result = this.props.onBeforeDelete(node, {before: dataCache, after: _dataCache}, delNode.level)
+ if (result === true) {
+ this.setState({ dataCache: _dataCache })
+ this.props.onDelete(node, _dataCache)
+ }
+ } else {
+ this.setState({ dataCache: _dataCache })
+ this.props.onDelete(node, _dataCache)
+ }
}
onSetHighlight = item => {
this.setState({
highlight: item.id
})
}
- showRightClickMenu = (item, e) => {
+ showRightClickMenu = (item, e, level) => {
const rect = e.target ? e.target.getBoundingClientRect() : {left: 0, top: 0, width: 0}
const _st = document.documentElement.scrollTop || document.body.scrollTop
const { contextMenu } = this.props
@@ -458,7 +449,7 @@ class TreeNode extends Component {
_cm = contextMenu
}
if (type === '[object Function]') {
- _cm = contextMenu(item)
+ _cm = contextMenu(item, level)
if (!_cm) {
return
}
@@ -469,15 +460,15 @@ class TreeNode extends Component {
_cm.length > 0
? _cm.map((cm, index) => {
if (cm.type && this.defaultEditNodeMenu[cm.type]) {
- return this.defaultEditNodeMenu[cm.type](item, cm, index)
+ return this.defaultEditNodeMenu[cm.type](item, cm, index, level)
} else {
- return this.defaultEditNodeMenu['customer'](item, cm, index)
+ return this.defaultEditNodeMenu['customer'](item, cm, index, level)
}
}) : Object.keys(this.defaultEditNodeMenu).map((key, index) => {
if (key === 'customer') {
return null
}
- return this.defaultEditNodeMenu[key](item, {}, index)
+ return this.defaultEditNodeMenu[key](item, {}, index, level)
})
}
@@ -493,23 +484,17 @@ class TreeNode extends Component {
showRightClickMenu: null
})
}
- setTargetNode = (id, position) => {
- this.setState({ targetNode: id, dropDividerPosition: position })
- }
- removeTargetNode = () => {
- this.setState({ targetNode: null })
- }
openModal = () => {
this.setState({
showModal: true
})
}
- setCurrentDeleteNode = nodeId => {
+ setCurrentDeleteNode =(node) => {
this.setState({
- currentDeleteNode: nodeId
+ currentDeleteNode: node
})
}
- renderTree = (data, allData = []) => {
+ renderTree = (data, allData = [], level) => {
const {
draggable,
prefixCls,
@@ -533,12 +518,7 @@ class TreeNode extends Component {
const {
highlight,
editNodes,
- editingNodes,
- draggingNode,
- targetNode,
- dropDividerPosition,
- positionX,
- positionY
+ editingNodes
} = this.state
return (
}
diff --git a/components/upload/UploadPhoto.js b/components/upload/UploadPhoto.js
index 64217ab7c..975897d8b 100644
--- a/components/upload/UploadPhoto.js
+++ b/components/upload/UploadPhoto.js
@@ -48,7 +48,8 @@ class UploadPhoto extends Upload {
disabled,
accept,
localeDatas,
- theme
+ theme,
+ photoSize = 'default'
} = this.props
const images = fileList.map(file => {
return {
@@ -70,7 +71,11 @@ class UploadPhoto extends Upload {
{fileList.map((file, index) => {
if (file.uploadState === 'loading') {
return (
-
+
this.previewImage(file, index)}>
+ this.previewImage(file, index)}
+ >
{
onRemove && {
@@ -100,7 +113,13 @@ class UploadPhoto extends Upload {
}
})}
{
- !fileCountLimted &&
+ !fileCountLimted &&
{ parts.map((part, i) => diff --git a/components/stepper/Stepper.js b/components/stepper/Stepper.js index 82bf59712..2f6036a42 100644 --- a/components/stepper/Stepper.js +++ b/components/stepper/Stepper.js @@ -1,8 +1,9 @@ import React from 'react' -import Provider from '../context' import classnames from 'classnames' import PropTypes from 'prop-types' +import Provider from '../context' +import Icon from '../icon' /** * Props * @prop id {string} id @@ -21,6 +22,7 @@ import PropTypes from 'prop-types' */ class Stepper extends React.Component { renderNode (arg, info) { + const { icon } = info const { itemLayout, current } = this.props const _c = classnames( 'hi-stepper__item', @@ -32,8 +34,12 @@ class Stepper extends React.Component {
- {info.icon ? (
- info.icon
+ {icon ? (
+ typeof icon === 'string' ? (
+ this.handleClick(item, e)}
+ onClick={(e) => this.handleClick(item, e)}
title={tabTitle}
>
{tabTitle}
- {
- type === 'desc' &&
- {tabDesc}
- }
- {
- editable && closeable &&
+ {type === 'desc' && {tabDesc}}
+ {editable && closeable && (
- this.deleteTab(e, tabId, index)} name='close' />
+ this.deleteTab(e, tabId, index)} name='close' />
- }
+ )}
)
})}
- {
- hiddenTabItems.length > 0 &&
-
{this.renderStepperBar()}
+ return (
+
+ {this.renderStepperBar()}
+
+ )
}
}
@@ -82,11 +92,13 @@ Stepper.propTypes = {
className: PropTypes.string,
placement: PropTypes.oneOf(['vertical', 'horizontal']),
itemLayout: PropTypes.oneOf(['vertical', 'horizontal']),
- data: PropTypes.arrayOf(PropTypes.shape({
- title: PropTypes.any,
- content: PropTypes.any,
- icon: PropTypes.any
- })),
+ data: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.any,
+ content: PropTypes.any,
+ icon: PropTypes.any
+ })
+ ),
current: PropTypes.number,
style: PropTypes.object
}
diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js
index be3a59352..6083a3ad4 100644
--- a/components/tabs/Tabs.js
+++ b/components/tabs/Tabs.js
@@ -9,7 +9,7 @@ const noop = () => {}
class Tabs extends Component {
static propTypes = {
- type: PropTypes.oneOf(['desc', 'card', 'button', 'editable']),
+ type: PropTypes.oneOf(['desc', 'card', 'button', 'editable', 'line']),
placement: PropTypes.oneOf(['horizontal', 'vertical']),
activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
defaultActiveId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -38,13 +38,13 @@ class Tabs extends Component {
super(props)
const { defaultActiveId, activeId } = props
- const {
- showTabItems,
- hiddenTabItems
- } = this.getTabItems(this.props)
+ const { showTabItems, hiddenTabItems } = this.getTabItems(this.props)
this.state = {
- activeId: activeId !== undefined ? activeId : (defaultActiveId || (showTabItems && showTabItems[0] && showTabItems[0].tabId)),
+ activeId:
+ activeId !== undefined
+ ? activeId
+ : defaultActiveId || (showTabItems && showTabItems[0] && showTabItems[0].tabId),
showTabItems,
hiddenTabItems,
defaultActiveId
@@ -52,10 +52,7 @@ class Tabs extends Component {
}
componentWillReceiveProps (nextProps) {
- const {
- showTabItems,
- hiddenTabItems
- } = this.getTabItems(nextProps)
+ const { showTabItems, hiddenTabItems } = this.getTabItems(nextProps)
this.setState({
showTabItems,
hiddenTabItems
@@ -70,22 +67,25 @@ class Tabs extends Component {
this.setState({ activeId: nextProps.children[0] && nextProps.children[0].props.tabId })
}
- if (this.props.children.length > nextProps.children.length && this.deletetabId && this.deletetabId === this.state.activeId) { // 删除的是当前激活的tab，需重置激活tab
- this.setState({
- activeId: (nextProps.children[0] && nextProps.children[0].props.tabId) || undefined
- }, () => {
- this.deletetabId = null
- })
+ if (
+ this.props.children.length > nextProps.children.length &&
+ this.deletetabId &&
+ this.deletetabId === this.state.activeId
+ ) {
+ // 删除的是当前激活的tab，需重置激活tab
+ this.setState(
+ {
+ activeId: (nextProps.children[0] && nextProps.children[0].props.tabId) || undefined
+ },
+ () => {
+ this.deletetabId = null
+ }
+ )
}
}
getTabItems (props) {
- const {
- children,
- type,
- placement,
- max
- } = props
+ const { children, type, placement, max } = props
const showTabItems = []
const hiddenTabItems = []
@@ -94,14 +94,15 @@ class Tabs extends Component {
const { tabTitle, tabId, tabDesc, disabled, closeable } = child.props
const item = { tabTitle, tabId, tabDesc, disabled, closeable }
- if (type === 'card' && placement === 'horizontal' && showTabItems.length >= max) { // 卡片式标签超过max时，其余标签的隐藏
+ if (type === 'card' && placement === 'horizontal' && showTabItems.length >= max) {
+ // 卡片式标签超过max时，其余标签的隐藏
hiddenTabItems.push(item)
} else {
showTabItems.push(item)
}
}
})
- return {showTabItems, hiddenTabItems}
+ return { showTabItems, hiddenTabItems }
}
handleClick (tab, e) {
@@ -113,20 +114,17 @@ class Tabs extends Component {
onTabClick(tab.tabId, e)
const activeId = this.props.activeId
- activeId !== undefined || this.setState({
- activeId: tab.tabId
- })
+ activeId !== undefined ||
+ this.setState({
+ activeId: tab.tabId
+ })
}
addTab () {
- const {
- onEdit,
- editable,
- children
- } = this.props
+ const { onEdit, editable, children } = this.props
if (editable) {
- onEdit('add', (children.length + 1))
+ onEdit('add', children.length + 1)
}
}
@@ -134,10 +132,7 @@ class Tabs extends Component {
e.stopPropagation()
this.deletetabId = tabId
- const {
- onEdit,
- editable
- } = this.props
+ const { onEdit, editable } = this.props
if (editable) {
onEdit('delete', index, tabId)
@@ -145,10 +140,7 @@ class Tabs extends Component {
}
checkEditable () {
- const {
- editable,
- type
- } = this.props
+ const { editable, type } = this.props
return editable && type === 'editable'
}
@@ -165,9 +157,15 @@ class Tabs extends Component {
const { activeId, showTabItems, hiddenTabItems, defaultActiveId } = this.state
const { prefixCls, type, placement, children, className, theme } = this.props
const editable = this.checkEditable()
- const tabsClasses = classNames(prefixCls, className, `${prefixCls}--${type}`, `theme__${theme}`, {
- [`${prefixCls}--${placement}`]: type === 'card'
- })
+ const tabsClasses = classNames(
+ prefixCls,
+ className,
+ `${prefixCls}--${type}`,
+ `theme__${theme}`,
+ {
+ [`${prefixCls}--${placement}`]: type === 'card'
+ }
+ )
let activeTabInHiddenItems = true
return (
@@ -187,28 +185,24 @@ class Tabs extends Component {
0 && (
+
- {
- editable &&
+ {editable && (
- {React.Children.map(children, item => {
+ {React.Children.map(children, (item) => {
return item && this.renderTabContent(item)
})}
diff --git a/components/tabs/style/index.scss b/components/tabs/style/index.scss
index f85f2fc84..78cd6c8ad 100644
--- a/components/tabs/style/index.scss
+++ b/components/tabs/style/index.scss
@@ -47,26 +47,73 @@ $prefix: 'hi-tabs' !default;
font-size: 16px;
}
- &--card {
- .#{$prefix}__nav {
- display: flex;
- flex-wrap: nowrap;
- }
+ &--line {
+ & > .#{$prefix}__header {
+ .#{$prefix}__nav {
+ display: flex;
+ flex-wrap: nowrap;
+ border-bottom: 1px solid #e6e7e8;
+ }
- .#{$prefix}__item {
- height: 48px;
- line-height: 46px;
- padding: 0 16px;
- box-sizing: border-box;
+ .#{$prefix}__item {
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+ margin-right: 32px;
+ box-sizing: border-box;
+ border: none;
+ transition: color 0.5s linear;
+
+ &::after {
+ display: inline-block;
+ position: absolute;
+ content: '';
+ height: 2px;
+ width: 100%;
+ background: #4284f5;
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ transition: opacity 0.5s linear;
+ }
+
+ &:hover {
+ color: #4284f5;
+ }
+
+ &--active {
+ &::after {
+ opacity: 1;
+ }
+
+ color: #4284f5;
+ }
+ }
+ }
+ }
- &:hover {
- color: #4284f5;
+ &--card {
+ & > .#{$prefix}__header {
+ .#{$prefix}__nav {
+ display: flex;
+ flex-wrap: nowrap;
}
- &--active {
- border: 1px solid #e6e7e8;
- border-radius: 2px;
- color: #4284f5;
+ .#{$prefix}__item {
+ height: 48px;
+ line-height: 46px;
+ padding: 0 16px;
+ box-sizing: border-box;
+
+ &:hover {
+ color: #4284f5;
+ }
+
+ &--active {
+ border: 1px solid #e6e7e8;
+ border-radius: 2px;
+ color: #4284f5;
+ }
}
}
}
@@ -113,126 +160,130 @@ $prefix: 'hi-tabs' !default;
}
&--editable {
- .#{$prefix}__nav {
- display: flex;
- flex-wrap: nowrap;
- overflow: hidden;
- margin-bottom: -1px;
- margin-right: 40px;
- min-height: 40px;
- }
-
- .#{$prefix}__header {
+ & > .#{$prefix}__header {
border-bottom: 1px solid #e6e7e8;
- }
- .#{$prefix}__item {
- height: 40px;
- min-width: 48px;
- line-height: 40px;
- margin-right: 4px;
- padding: 0 8px;
- background: #fafafa;
- border-radius: 2px 2px 0 0;
- border: 1px solid #e6e7e8;
- text-align: center;
- box-sizing: border-box;
-
- &:last-child {
- margin-right: 0;
+ .#{$prefix}__nav {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow: hidden;
+ margin-bottom: -1px;
+ margin-right: 40px;
+ min-height: 40px;
}
- &:hover:not(.#{$prefix}__item--active) {
- background-color: #f0f0f0;
- }
+ .#{$prefix}__item {
+ height: 40px;
+ min-width: 48px;
+ line-height: 40px;
+ margin-right: 4px;
+ padding: 0 8px;
+ background: #fafafa;
+ border-radius: 2px 2px 0 0;
+ border: 1px solid #e6e7e8;
+ text-align: center;
+ box-sizing: border-box;
- &--active {
- background-color: #fff;
- border-bottom-color: #fff;
- color: #4284f5;
+ &:last-child {
+ margin-right: 0;
+ }
+
+ &:hover:not(.#{$prefix}__item--active) {
+ background-color: #f0f0f0;
+ }
+
+ &--active {
+ background-color: #fff;
+ border-bottom-color: #fff;
+ color: #4284f5;
+ }
}
- }
- .#{$prefix}__add {
- right: 4px;
- bottom: 12px;
+ .#{$prefix}__add {
+ right: 4px;
+ bottom: 12px;
+ }
}
}
&--desc {
- .#{$prefix}__nav {
- display: flex;
- flex-wrap: nowrap;
- overflow: hidden;
- }
-
- .#{$prefix}__item {
- flex: none;
- display: flex;
- flex-direction: column;
- padding: 16px 20px;
- text-align: center;
- border: 1px solid #e6e7e8;
- box-sizing: border-box;
-
- &:not(:first-child) {
- margin-left: -1px;
+ & > .#{$prefix}__header {
+ .#{$prefix}__nav {
+ display: flex;
+ flex-wrap: nowrap;
+ overflow: hidden;
}
- &:hover {
- color: #4284f5;
+ .#{$prefix}__item {
+ flex: none;
+ display: flex;
+ flex-direction: column;
+ padding: 16px 20px;
+ text-align: center;
+ border: 1px solid #e6e7e8;
+ box-sizing: border-box;
- .#{$prefix}__item-desc {
- color: #4284f5;
+ &:not(:first-child) {
+ margin-left: -1px;
}
- }
- &--active {
- color: #4284f5;
- border-color: #4284f5;
- z-index: 1;
+ &:hover {
+ color: #4284f5;
+
+ .#{$prefix}__item-desc {
+ color: #4284f5;
+ }
+ }
- .#{$prefix}__item-desc {
+ &--active {
color: #4284f5;
+ border-color: #4284f5;
+ z-index: 1;
+
+ .#{$prefix}__item-desc {
+ color: #4284f5;
+ }
}
- }
- &-name {
- margin-top: 4px;
- }
+ &-name {
+ margin-top: 4px;
+ }
- &-desc {
- font-size: 12px;
- color: #999;
+ &-desc {
+ font-size: 12px;
+ color: #999;
+ }
}
}
}
&--button {
- .#{$prefix}__nav {
- display: flex;
- flex-wrap: wrap;
- }
-
- .#{$prefix}__item {
- flex: none;
- height: 36px;
- line-height: 34px;
- padding: 0 23px;
- box-sizing: border-box;
- margin-right: 24px;
- border: 1px solid #d8d8d8;
- border-radius: 18px;
-
- &:hover:not(.hi-tabs__item--active) {
- color: #4284f5;
- border: 1px solid #4284f5;
+ & > .#{$prefix}__header {
+ .#{$prefix}__nav {
+ display: flex;
+ flex-wrap: wrap;
}
- &--active {
- color: #fff;
- background-color: #4284f5;
- border: 1px solid #4284f5;
+ .#{$prefix}__item {
+ flex: none;
+ height: 36px;
+ line-height: 34px;
+ padding: 0 23px;
+ box-sizing: border-box;
+ margin-right: 24px;
+ border: 1px solid #d8d8d8;
+ border-radius: 18px;
+
+ &:hover:not(.hi-tabs__item--active) {
+ color: #4284f5;
+ border: 1px solid #4284f5;
+ }
+
+ &--active {
+ color: #fff;
+ background-color: #4284f5;
+ border: 1px solid #4284f5;
+ }
}
}
}
@@ -277,56 +328,64 @@ $prefix: 'hi-tabs' !default;
@each $key, $value in $theme-colors {
.theme__#{$key}.#{$prefix} {
&--card {
- .#{$prefix}__item {
- &:hover {
- color: $value;
- }
+ & > .#{$prefix}__header {
+ .#{$prefix}__item {
+ &:hover {
+ color: $value;
+ }
- &--active {
- color: $value;
+ &--active {
+ color: $value;
+ }
}
}
}
&--editable {
- .#{$prefix}__item {
- &--active {
- color: $value;
+ & > .#{$prefix}__header {
+ .#{$prefix}__item {
+ &--active {
+ color: $value;
+ }
}
}
}
&--desc {
- .#{$prefix}__item {
- &:hover {
- color: $value;
-
- .#{$prefix}__item-desc {
+ & > .#{$prefix}__header {
+ .#{$prefix}__item {
+ &:hover {
color: $value;
- }
- }
- &--active {
- color: $value;
- border-color: $value;
+ .#{$prefix}__item-desc {
+ color: $value;
+ }
+ }
- .#{$prefix}__item-desc {
+ &--active {
color: $value;
+ border-color: $value;
+
+ .#{$prefix}__item-desc {
+ color: $value;
+ }
}
}
}
}
&--button {
- .#{$prefix}__item {
- &:hover:not(.hi-tabs__item--active) {
- color: $value;
- border: 1px solid $value;
- }
+ & > .#{$prefix}__header {
+ .#{$prefix}__item {
+ &:hover:not(.hi-tabs__item--active) {
+ color: $value;
+ border: 1px solid $value;
+ }
- &--active {
- background-color: $value;
- border: 1px solid $value;
+ &--active {
+ background-color: $value;
+ border: 1px solid $value;
+ }
}
}
}
diff --git a/components/tag/style/index.scss b/components/tag/style/index.scss
index f0404159c..83fac0e0b 100644
--- a/components/tag/style/index.scss
+++ b/components/tag/style/index.scss
@@ -2,6 +2,7 @@
$prefix: 'hi-tag' !default;
$primary: get-color($palette-primary, 'hiui-blue') !default;
+$normal: #999 !default;
.#{$prefix} {
&__container {
@@ -24,6 +25,10 @@ $primary: get-color($palette-primary, 'hiui-blue') !default;
background: $primary;
color: $white;
+ &.#{$prefix}__container--normal {
+ background: $normal;
+ }
+
@each $key in 'success', 'danger', 'warning' {
&.#{$prefix}__container--#{$key} {
$status-color: map-get(get-palette(get-color($palette-secondary, $key)), '50');
@@ -40,6 +45,11 @@ $primary: get-color($palette-primary, 'hiui-blue') !default;
padding: 0 5px;
line-height: $line-height-size-normal - 2;
+ &.#{$prefix}__container--normal {
+ border: 1px solid $normal;
+ color: $normal;
+ }
+
@each $key in 'success', 'danger', 'warning' {
&.#{$prefix}__container--#{$key} {
$status-color: map-get(get-palette(get-color($palette-secondary, $key)), '50');
diff --git a/components/timeline/FoldingItem.js b/components/timeline/FoldingItem.js
deleted file mode 100644
index bc84590ff..000000000
--- a/components/timeline/FoldingItem.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import Icon from '../icon'
-
-export default class FoldingItem extends React.Component {
- constructor (props) {
- super(props)
- this.state = {
- showSub: false
- }
- }
- render () {
- const { showSub } = this.state
- const { texts } = this.props
- let text = showSub ? texts.collapse : texts.expand
- let iconName = showSub ? 'up' : 'down'
- return - {this.props.subChildren}
- {props.groupTitle && (
+class Timeline extends Component {
+ state = { expanded: false }
+ renderGroup = (item, index, isLast) => {
+ return (
+
- )
-}
-class Timeline extends Component {
- /**
- * 渲染列表项
- * @param {*} item 原始数据
- * @param {*} index 用于是否渲染 groupTitle 的条件
- * @param {*} groupTitle 分组标题
- * @param {*} isSub 是否是子项，只支持一级
- */
- renderItem (item, index, groupTitle, isSub) {
- const { layout, type } = this.props
- // TODO: dot 废弃，使用 icon
- const dot = item.dot
- const icon = item.icon
- let dotEl = isSub ? (
-
- ) : (
-
+
)
- if (dot && typeof dot === 'object') {
- dotEl =
- {props.groupTitle}
+ {item.groupTitle}
+ {index !== 0 && }
- )}
- {props.item.timestamp}
- {{props.item.extraTime}
}
-
+ {item.children.map((i, idx) => {
+ const isFirst = index === 0 && idx === 0
+ const _isLast = isLast && idx === item.children.length - 1
+ return this.renderItem(i, idx, _isLast, isFirst)
+ })}
+
+ {dot}
+ }
+
+ renderItem = (item, index, isLast, isFirst) => {
+ if (this.props.type === 'default') {
+ return this.renderDefault(item, index, isLast, isFirst)
}
- if (icon && typeof icon === 'string') {
- dotEl = (
-
-
- )
- } else if (icon && React.isValidElement(icon)) {
- dotEl = {icon}
+ if (this.props.type === 'right') {
+ return this.renderRight(item, index, isLast, isFirst)
+ }
+ if (this.props.type === 'cross') {
+ return this.renderCross(item, index, isLast, isFirst)
}
- const itemCls = classNames('hi-timeline__item', isSub && 'hi-timeline__item--sub')
+ }
+
+ renderRight = (item, index, isLast, isFirst) => {
return (
-
+
diff --git a/components/tree/TreeItem.js b/components/tree/TreeItem.js
index fa6af872c..151cc557c 100644
--- a/components/tree/TreeItem.js
+++ b/components/tree/TreeItem.js
@@ -18,9 +18,10 @@ class TreeItem extends Component {
}
render () {
const {
+ level,
editable,
draggable,
- dropDividerPosition,
+ direction,
checked,
expanded,
highlight,
@@ -31,7 +32,6 @@ class TreeItem extends Component {
onClick,
highlightable,
item,
- draggingNode,
checkable,
itemStyle,
onExpanded,
@@ -47,7 +47,7 @@ class TreeItem extends Component {
connectDragSource,
connectDropTarget,
isOver,
- targetNode,
+ isDragging,
saveEditNode,
origin,
loadChildren,
@@ -79,7 +79,7 @@ class TreeItem extends Component {
}
)}
>
- {targetNode === item.id && dropDividerPosition === 'up' && isOver && (
+ { direction === 'up' && isOver && (
{item.title}
+ {item.content}
+
+ {item.timestamp} {item.extraTime}
+
+
+ {(item.icon && {item.icon}
) || (
+
)}
-
- {((layout === 'cross' && type === 'default') || type === 'cross') && }
-
+ )
+ }
+ renderCollapse = (subItems) => {
+ return (
+
-
+
+ {item.title}
- {/* TODO: description 废弃，使用 content */}
- {item.content || item.description}
- {((layout === 'right' && type === 'default') || type === 'right') && (
- {item.timestamp}
- )}
-
+ {this.state.expanded === true &&
+ subItems.map((c, idx) => {
+ return this.renderSub(c, idx)
+ })}
+
)
}
- /**
- * 渲染列表，被递归调用
- * @param {Array} datas 数据
- * @param {String | React.ReactNode} groupTitle 分组标题
- * @param {Number} originIndex 原始索引，用于判断是否为第一个分组标题
- */
- renderItems (data, groupTitle, isSub) {
- const { layout, localeDatas, type } = this.props
- return data.map((item, index) => {
- const { groupTitle: gt } = item
- if (gt) {
- // 渲染分组
- return this.renderItems(item.children, gt)
- }
- if (item.children && layout !== 'cross' && type !== 'cross') {
- // 子项 含 收起按钮
- const foldingEl = (
- {
+ this.setState({ expanded: !this.state.expanded })
+ }}
+ >
+ {this.state.expanded === true ? '收起' : '展开'}
+
-
- {dotEl}
-
+
+
+ )
+ }
+ renderCross = (item, index, isLast, isFirst) => {
+ return (
+
+
+ {item.icon || }
+
+ {item.timestamp}
+ {item.extraTime}
+
+
+ {item.title}
+ {item.content}
+
+
+ )
}
+ renderDefault = (item, index, isLast, isFirst) => {
+ return [
+
+
+ {(item.icon && {item.timestamp}
+ {item.extraTime}
+ {item.icon}
) || (
+
+ )}
+
+
+
+ {item.title}
+ {item.content}
+
+
,
+ item.children && this.renderCollapse(item.children)
+ ]
+ }
render () {
const { layout, type, list, data, theme } = this.props
const _layout = type === 'default' ? layout : type
- const rootCls = classNames('hi-timeline', `theme__${theme}`, `hi-timeline--${_layout}`)
+ const rootCls = classNames(
+ 'hi-timeline',
+ `theme__${theme}`,
+ `hi-timeline--${['normal', 'default'].includes(_layout) ? 'default' : _layout}`
+ )
return (
+
+ {(item.icon && {item.timestamp}
+ {item.extraTime}
+ {item.icon}
) || (
+
+ )}
+
+
+
+ {item.title}
+ {item.content}
+
-
)
}
diff --git a/components/timeline/style/index.scss b/components/timeline/style/index.scss
index 96171ee57..fb3a8ca29 100755
--- a/components/timeline/style/index.scss
+++ b/components/timeline/style/index.scss
@@ -2,248 +2,411 @@
.hi-timeline {
position: relative;
- padding: 8px;
+ padding: 4px;
ul {
margin: 0 !important;
padding: 0 !important;
}
- &__item {
- margin: 0;
- padding: 0;
- list-style: none;
- display: flex;
- position: relative;
- padding-bottom: 10px;
+ &--cross {
+ .timeline__item {
+ position: relative;
+ margin-bottom: 20px;
+ display: flex;
+
+ &--last {
+ margin-bottom: 0;
- &:last-child {
- .hi-timeline__line {
- display: none;
+ .item__line {
+ height: 7px !important;
+ }
}
- }
- &--folding {
- position: relative;
- padding-bottom: 20px;
- display: block;
- margin-top: 0 !important;
+ &--first {
+ .item__line {
+ top: 7px;
+ height: calc(100% + 20px - 7px) !important;
+ }
+ }
- .hi-timeline__line {
- z-index: 1;
+ &--left {
+ width: calc(50% - 20px);
+ margin-right: calc(50% + 20px);
+ flex-direction: row-reverse;
+
+ .item__dot {
+ width: 8px;
+ height: 8px;
+ border: 2px solid #4284f5;
+ background: #fff;
+ border-radius: 50%;
+ box-sizing: border-box;
+ position: absolute;
+ top: 7px;
+ right: -20px;
+ transform: translateX(50%);
+ z-index: 2;
+ }
+
+ .item__icon {
+ position: absolute;
+ background: #fff;
+ top: 7px;
+ right: -20px;
+ transform: translateX(50%);
+ z-index: 2;
+ }
+
+ .item__line {
+ position: absolute;
+ right: -20px;
+ width: 2px;
+ background: rgb(242, 242, 242);
+ height: calc(100% + 20px);
+ transform: translateX(50%);
+ }
+
+ .item--left {
+ text-align: right;
+ width: calc(30% - 20px);
+ margin-left: 20px;
+
+ .item__time {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
+ }
+
+ .item__extra {
+ color: rgb(158, 158, 158);
+ font-size: 12px;
+ line-height: 20px;
+ }
+ }
+
+ .item--right {
+ text-align: right;
+ width: 70%;
+
+ .item__title {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
+ }
+
+ .item__content {
+ color: rgb(158, 158, 158);
+ font-size: 12px;
+ line-height: 20px;
+ }
+ }
}
- }
- &--sub {
- &:last-child {
- padding-bottom: 40px;
+ &--right {
+ width: calc(50% - 20px);
+ margin-left: calc(50% + 20px);
+
+ .item__dot {
+ width: 8px;
+ height: 8px;
+ border: 2px solid #4284f5;
+ background: #fff;
+ border-radius: 50%;
+ box-sizing: border-box;
+ position: absolute;
+ top: 7px;
+ left: -20px;
+ transform: translateX(-50%);
+ z-index: 2;
+ }
+
+ .item__line {
+ position: absolute;
+ left: -20px;
+ width: 2px;
+ background: rgb(242, 242, 242);
+ height: calc(100% + 20px);
+ transform: translateX(-50%);
+ }
- .hi-timeline__line {
- display: block;
+ .item--left {
+ width: calc(30% - 20px);
+ margin-right: 20px;
+
+ .item__time {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
+ }
+
+ .item__extra {
+ color: rgb(158, 158, 158);
+ font-size: 12px;
+ line-height: 20px;
+ }
+ }
+
+ .item--right {
+ width: 70%;
+
+ .item__title {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
+ }
+
+ .item__content {
+ color: rgb(158, 158, 158);
+ font-size: 12px;
+ line-height: 20px;
+ }
}
}
}
}
- &__arrow {
- position: absolute;
- left: 74px;
- bottom: 8px;
- cursor: pointer;
- }
+ &--right {
+ .timeline__item {
+ position: relative;
+ margin-bottom: 20px;
+ margin-left: 24px;
- &__row {
- margin-left: 40px;
- display: flex;
- }
+ .item__title {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
+ }
- &__content-container {
- display: inline-block;
- }
+ .item__content {
+ color: #666;
+ font-size: 12px;
+ line-height: 20px;
+ margin-bottom: 6px;
+ }
- &__time {
- flex: 0 0 36px;
- text-align: right;
- display: inline-block;
- vertical-align: top;
-
- &--extra {
- width: auto;
- text-align: left;
- font-size: 12px;
- color: #999;
- margin-top: 6px;
- }
- }
+ .item__time {
+ color: #999;
+ font-size: 12px;
+ line-height: 20px;
+ }
- &__extra-time {
- font-size: 12px;
- color: #666;
- margin-top: 2px;
- }
+ &--last {
+ &.timeline__item {
+ margin-bottom: 0;
- &__title {
- font-size: 14px;
- color: #333;
- text-align: left;
- }
+ .item__line {
+ height: 7px;
+ }
+ }
+ }
- &__desc {
- margin-top: 8px;
- font-size: 12px;
- color: #666;
- }
+ &--first {
+ &.timeline__item {
+ .item__line {
+ top: 7px;
+ height: calc(100% + 20px - 7px);
+ }
+ }
+ }
- &__line {
- position: absolute;
- top: 0.75em;
- height: 100%;
- width: 2px;
- background: rgba(242, 242, 242, 1);
- left: 55px;
- // border-left: 2px solid #e8e8e8;
- }
+ .item__dot {
+ width: 8px;
+ height: 8px;
+ border: 2px solid #4284f5;
+ background: #fff;
+ border-radius: 50%;
+ box-sizing: border-box;
+ position: absolute;
+ top: 7px;
+ left: -20px;
+ transform: translateX(-50%);
+ z-index: 2;
+ }
- &__dot {
- width: 8px;
- height: 8px;
- border: 2px solid #4284f5;
- border-radius: 50%;
- box-sizing: border-box;
- position: absolute;
- top: 0.5em;
- left: 52px;
- z-index: 2;
-
- &--sub {
- width: 6px;
- height: 6px;
- border: 0;
- background: #4284f5;
- left: 53px;
- }
+ .item__icon {
+ position: absolute;
+ background: #fff;
+ top: 7px;
+ left: -20px;
+ transform: translateX(-50%);
+ z-index: 2;
+ }
- &--custom {
- border: none;
- border-radius: 0;
- font-size: 12px;
- width: auto;
- height: auto;
- // left: 4px;
- background: #fff;
- transform: translate(-50%, -30%);
+ .item__line {
+ position: absolute;
+ left: -22px;
+ top: 0;
+ width: 2px;
+ background: rgb(242, 242, 242);
+ height: calc(100% + 20px);
+ transform: translateX(50%);
+ }
}
}
- &--right {
- .hi-timeline__line {
- left: 3px;
- }
+ &--default {
+ .timeline__collapse {
+ margin-bottom: 24px;
- .hi-timeline__row {
- margin-left: 24px;
- }
-
- .hi-timeline__dot {
- left: 0;
+ .collapse-opt {
+ font-size: 12px;
+ margin-left: calc(30% + 20px);
+ cursor: pointer;
+ position: relative;
+ }
- &--custom {
- left: 4px;
+ .item__line {
+ position: absolute;
+ top: 0;
+ left: -20px;
+ width: 2px;
+ background: #f2f2f2;
+ height: calc(100% + 24px);
+ transform: translateX(-50%);
}
- &--sub {
- left: 1px;
+ .item__dot {
+ width: 4px !important;
+ height: 4px !important;
+ background: #4284f5 !important;
+ border-radius: 50%;
+ top: 9px !important;
}
}
- .hi-timeline__arrow {
- left: 40px;
- }
- }
+ .timeline__group-title {
+ text-align: right;
+ width: calc(30% - 20px);
+ margin-right: 20px;
+ margin-bottom: 10px;
+ color: rgb(0, 0, 0);
+ font-weight: bolder;
+ position: relative;
- &--normal {
- .hi-timeline__dot {
- &--custom {
- left: 56px;
+ .item__line {
+ position: absolute;
+ top: 0;
+ left: calc(100% + 20px);
+ right: 0;
+ width: 2px;
+ background: #f2f2f2;
+ height: calc(100% + 10px);
+ transform: translateX(-50%);
}
}
- }
- &--cross {
- .hi-timeline__row {
- width: 50%;
- }
+ .timeline__item {
+ display: flex;
+ position: relative;
+ margin-bottom: 20px;
- .hi-timeline__item:nth-child(even) {
- .hi-timeline__row {
- margin-left: -19px;
+ .item--left {
text-align: right;
- display: inline-block;
+ width: calc(30% - 20px);
+ margin-right: 20px;
- .hi-timeline__time {
- float: right;
+ .item__time {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
}
- }
- .hi-timeline__content-container {
- margin-right: 20px;
+ .item__extra {
+ color: rgb(158, 158, 158);
+ font-size: 12px;
+ line-height: 20px;
+ }
}
- .hi-timeline__title {
- text-align: right;
+ .item__dot {
+ width: 8px;
+ height: 8px;
+ border: 2px solid #4284f5;
+ background: #fff;
+ border-radius: 50%;
+ box-sizing: border-box;
+ position: absolute;
+ top: 7px;
+ left: 30%;
+ transform: translateX(-50%);
+ z-index: 2;
}
- }
- .hi-timeline__item:nth-child(odd) {
- .hi-timeline__row {
- margin-left: 50%;
- padding-left: 19px;
- text-align: left;
-
- .hi-timeline__time {
- text-align: left;
- }
+ .item__icon {
+ position: absolute;
+ background: #fff;
+ top: 7px;
+ left: 30%;
+ transform: translateX(-50%);
+ z-index: 2;
}
- .hi-timeline__content-container {
- margin-left: 20px;
+ .item__line {
+ position: absolute;
+ left: 30%;
+ width: 2px;
+ background: rgb(242, 242, 242);
+ height: calc(100% + 20px);
+ transform: translateX(-50%);
}
- }
- .hi-timeline__line {
- left: 50%;
- transform: translateX(-1px);
- }
+ .item--right {
+ width: calc(70% - 20px);
+ margin-left: 20px;
- .hi-timeline__dot {
- left: 50%;
- transform: translateX(-4px);
+ .item__title {
+ color: rgb(51, 51, 51);
+ font-size: 14px;
+ line-height: 22px;
+ margin-bottom: 2px;
+ }
- &--custom {
- transform: translate(-50%, -30%);
+ .item__content {
+ color: rgb(158, 158, 158);
+ font-size: 12px;
+ line-height: 20px;
+ }
}
- }
- }
-
- &__group-title {
- font-size: 12px;
- color: #666;
- margin-bottom: 4px;
- }
-}
-@each $key, $value in $theme-colors {
- .theme__#{$key}.hi-timeline {
- .hi-timeline__dot {
- border: 2px solid $value;
+ &--last {
+ .item--right {
+ margin-bottom: 0;
+ }
- &.hi-timeline__dot--custom {
- border: none;
+ .item__line {
+ height: 7px;
+ }
}
- &--sub {
- background: $value;
+ &--first {
+ .item__line {
+ top: 7px;
+ height: calc(100% + 20px - 7px);
+ }
}
}
}
}
+
+// @each $key, $value in $theme-colors {
+// .theme__#{$key}.hi-timeline {
+// .hi-timeline__dot {
+// border: 2px solid $value;
+
+// &.hi-timeline__dot--custom {
+// border: none;
+// }
+
+// &--sub {
+// background: $value;
+// }
+// }
+// }
+// }
diff --git a/components/tree/Tree.js b/components/tree/Tree.js
index 7314a88dd..48ed60313 100644
--- a/components/tree/Tree.js
+++ b/components/tree/Tree.js
@@ -181,7 +181,9 @@ export class Tree extends Component {
onDrop,
onDropEnd,
onDelete,
+ onBeforeDelete,
onSave,
+ onBeforeSave,
onClick,
apperance,
contextMenu,
@@ -222,7 +224,9 @@ export class Tree extends Component {
onDrop={onDrop}
onDropEnd={onDropEnd}
onDelete={onDelete}
+ onBeforeDelete={onBeforeDelete}
onSave={onSave}
+ onBeforeSave={onBeforeSave}
contextMenu={contextMenu}
/>
- {this.renderItems(data || list)}
-
+ {(data || list).map((item, index) => {
+ if (item.groupTitle) {
+ const isLast = index === (data || list).length - 1
+ return this.renderGroup(item, index, isLast)
+ } else {
+ const isLast = index === (data || list).length - 1
+ const isFirst = index === 0
+ return this.renderItem(item, index, isLast, isFirst)
+ }
+ })}
+
{(!item.children || (item.children && !expanded)) &&
- targetNode === item.id &&
- dropDividerPosition === 'down' &&
+ direction === 'down' &&
isOver &&
- {item.children && item.children.length > 0 && expanded ? renderTree(item.children) : null}
+ {item.children && item.children.length > 0 && expanded ? renderTree(item.children, [], level + 1) : null}
{item.children &&
expanded &&
- targetNode === item.id &&
- dropDividerPosition === 'down' &&
+
+ direction === 'down' &&
isOver && -
@@ -548,10 +528,10 @@ class TreeNode extends Component {
origin={origin}
showLine={showLine}
key={item.id}
+ level={level}
isRoot={allData.some(d => d.id === item.id)}
isLevelLast={index === data.length - 1}
editable={editable}
- dropDividerPosition={dropDividerPosition}
prefixCls={prefixCls}
draggable={draggable}
onDragStart={onDragStart}
@@ -569,13 +549,9 @@ class TreeNode extends Component {
onExpanded={onExpanded}
onValueChange={this.onValueChange}
renderTree={this.renderTree}
- setPosition={this.setPosition}
- positionX={positionX}
- positionY={positionY}
renderSwitcher={this.renderSwitcher}
cancelAddSiblingNode={this.cancelAddSiblingNode}
apperance={apperance}
- // renderRightClickMenu={this.renderRightClickMenu}
onCheckChange={onCheckChange}
saveEditNode={this.saveEditNode}
onClick={onClick}
@@ -583,13 +559,7 @@ class TreeNode extends Component {
showRightClickMenu={this.showRightClickMenu}
closeRightClickMenu={this.closeRightClickMenu}
dropNode={this.dropNode}
- setDraggingNode={this.setDraggingNode}
- removeDraggingNode={this.removeDraggingNode}
- draggingNode={draggingNode}
closeExpandedTreeNode={closeExpandedTreeNode}
- setTargetNode={this.setTargetNode}
- targetNode={targetNode}
- removeTargetNode={this.removeTargetNode}
cancelEditNode={this.cancelEditNode}
item={item}
loadChildren={this.loadChildren}
@@ -631,8 +601,8 @@ class TreeNode extends Component {
)}
{searchable
- ? this.renderTree(this.highlightData(cloneDeep(dataCache), searchValue), dataCache)
- : this.renderTree(cloneDeep(dataCache), dataCache)}
+ ? this.renderTree(this.highlightData(cloneDeep(dataCache), searchValue), dataCache, 0)
+ : this.renderTree(cloneDeep(dataCache), dataCache, 0)}
{file.progressNumber ? (file.progressNumber < 100 ? (file.progressNumber + '%') : localeDatas.upload.uploadSuccess) : (0 + '%')}
@@ -82,7 +87,15 @@ class UploadPhoto extends Upload { ) } else { return ( -