Merge pull request #912 from XiaoMi/feature/opt-ue

Feature/opt ue

CHANGELOG.md

@@ -1,5 +1,19 @@
 # 更新日志
 
+## 2.7.0
+
+- 新增 `<Checkbox />` 垂直样式 [#883](https://github.com/XiaoMi/hiui/issues/883)
+- 新增 `<Dropdown />` placement 可选项 'bottom-end' 和 'top-end' [#891](https://github.com/XiaoMi/hiui/issues/891)
+- 新增 `<Upload />` withCredentials 属性 [#905](https://github.com/XiaoMi/hiui/issues/905)
+- 新增 `<Tree />` 文件夹样式 [#913](https://github.com/XiaoMi/hiui/issues/913)
+- 优化 `<Menu />` 水平模式交互 [#884](https://github.com/XiaoMi/hiui/issues/884)
+- 优化 `<Select />` 异步单选和异步多选交互模式 [#903](https://github.com/XiaoMi/hiui/issues/903)
+- 优化 `<Upload />` 预览交互 [#893](https://github.com/XiaoMi/hiui/issues/893)
+- 优化 `<Transfer />` 可搜索时清除按钮的出现交互 [#890](https://github.com/XiaoMi/hiui/issues/890)
+- 优化 `<Tree />` 编辑节点的交互，输入为空时不可保存 [#889](https://github.com/XiaoMi/hiui/issues/889)
+- 优化 `<Transfer />` 多选未选中时的展示效果 [#888](https://github.com/XiaoMi/hiui/issues/888)
+- 优化若干视觉还原问题：[#841](https://github.com/XiaoMi/hiui/issues/841) [#842](https://github.com/XiaoMi/hiui/issues/842) [#843](https://github.com/XiaoMi/hiui/issues/843) [#844](https://github.com/XiaoMi/hiui/issues/844) [#845](https://github.com/XiaoMi/hiui/issues/845) [#848](https://github.com/XiaoMi/hiui/issues/848) [#851](https://github.com/XiaoMi/hiui/issues/851) [#852](https://github.com/XiaoMi/hiui/issues/852) [#853](https://github.com/XiaoMi/hiui/issues/853) [#854](https://github.com/XiaoMi/hiui/issues/854) [#855](https://github.com/XiaoMi/hiui/issues/855) [#856](https://github.com/XiaoMi/hiui/issues/856) [#857](https://github.com/XiaoMi/hiui/issues/857) [#858](https://github.com/XiaoMi/hiui/issues/858) [#859](https://github.com/XiaoMi/hiui/issues/859) [#862](https://github.com/XiaoMi/hiui/issues/862) [#869](https://github.com/XiaoMi/hiui/issues/869) [#875](https://github.com/XiaoMi/hiui/issues/875) [#876](https://github.com/XiaoMi/hiui/issues/876) [#886](https://github.com/XiaoMi/hiui/issues/886) [#895](https://github.com/XiaoMi/hiui/issues/895) [#896](https://github.com/XiaoMi/hiui/issues/896) [#897](https://github.com/XiaoMi/hiui/issues/897) [#898](https://github.com/XiaoMi/hiui/issues/898) [#899](https://github.com/XiaoMi/hiui/issues/899) [#900](https://github.com/XiaoMi/hiui/issues/900) [#901](https://github.com/XiaoMi/hiui/issues/901)
+
 ## 2.6.4
 
 - 修复 `<Table />` 多级表头和多选同时使用的问题 [#867](https://github.com/XiaoMi/hiui/issues/867)

components/alert/Alert.js

@@ -28,16 +28,16 @@ class Alert extends Component {
 
     switch (type) {
       case 'warning':
-        type = 'info-circle-o'
+        type = 'jinggao'
         break
       case 'error':
-        type = 'close-circle-o'
+        type = 'shibai'
         break
       case 'success':
-        type = 'check-circle-o'
+        type = 'chenggong'
         break
       default:
-        type = 'info-circle-o'
+        type = 'tishi'
     }
 
     return (

components/alert/style/index.scss

@@ -35,9 +35,11 @@
     top: 12px;
     right: 12px;
     cursor: pointer;
+    height: 16px;
+    line-height: 16px;
 
     .hi-icon {
-      font-size: 14px;
+      font-size: 16px;
       color: #999;
     }
   }

components/breadcrumb/index.js

@@ -25,7 +25,7 @@ Breadcrumb.propTypes = {
   onClick: PropTypes.func
 }
 Breadcrumb.defaultProps = {
-  separator: '|',
+  separator: '/',
   data: [],
   onClick: () => {}
 }

components/checkbox/Group.js

@@ -39,9 +39,9 @@ class Group extends Component {
     hasValue(this.props) || this.setState({ data: newData })
   }
   render () {
-    const { className, name, disabled, style } = this.props
+    const { className, name, disabled, style, placement } = this.props
     const { data } = this.state
-    const groupCls = classNames(prefixCls, className)
+    const groupCls = classNames(prefixCls, className, placement === 'vertical' && `${prefixCls}--vertical`)
     return (
       <div className={groupCls} style={{...style}}>
         {data.map(({ label, value, checked, disabled: itemDisabled }, idx) => (
@@ -91,6 +91,7 @@ const PropTypesArrayOfStringOrNumber = PropTypes.oneOfType([
 
 Group.propTypes = {
   className: PropTypes.string,
+  placement: PropTypes.string,
   data: PropTypes.arrayOf(
     PropTypes.oneOfType([
       PropTypes.string,
@@ -112,6 +113,7 @@ Group.propTypes = {
 
 Group.defaultProps = {
   data: [],
+  placement: 'horizontal',
   defaultValue: []
 }
 

components/checkbox/style/index.scss

@@ -114,6 +114,11 @@ $prefixCls: '.hi-checkbox' !default;
 
   &-group {
     display: inline-block;
+
+    &--vertical {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   @include hi-checkbox-style();

components/collapse/index.js

@@ -103,7 +103,7 @@ class CollapsePanel extends Component {
       'collapse-item--show': isActive,
       'collapse-item--disabled': disabled
     })
-    const collapseIcon = classNames('collapse-item__icon', 'hi-icon', 'icon-right')
+    const collapseIcon = classNames('collapse-item__icon', 'hi-icon', 'icon-down')
     return (
       <div className={classnames}>
         <div className='collapse-item__head' onClick={() => onClickPanel(key)}>

components/collapse/style/index.scss

@@ -44,7 +44,7 @@
 
     &--show {
       > .collapse-item__head > .collapse-item__icon {
-        transform: rotate(-90deg);
+        transform: rotate(-180deg);
       }
 
       > .collapse-item__content {

components/dropdown/Dropdown.jsx

@@ -34,7 +34,7 @@ export default class Dropdown extends React.Component {
     this.eventHandler(event)
     this.timerHideMenu = setTimeout(() => {
       this.setState({ visible: false })
-    }, 200)
+    }, 100)
   }
   getPopperShowHandler = () => {
     const { disabled } = this.props
@@ -78,17 +78,17 @@ export default class Dropdown extends React.Component {
   handleChildMenuMouseLeave = () => {
     getIsTriggerEqualHover(this.props) && this.setPopperDelayHide()
   }
-  handleMenuItemClick = (data) => {
+  handleMenuItemClick = (data, isLinkOrNoChildren) => {
     const { onClick } = this.props
-    this.setPopperDelayHide()
+    if (isLinkOrNoChildren || onClick) {
+      this.setPopperDelayHide()
+    }
+
     onClick && onClick(data)
   }
   handleDocumentClick = () => {
     this.setState({ visible: false })
   }
-  componentDidMount () {
-    document.addEventListener('click', this.handleDocumentClick)
-  }
   componentWillUnmount () {
     document.removeEventListener('click', this.handleDocumentClick)
   }
@@ -140,7 +140,7 @@ Dropdown.propTypes = {
 }
 
 Dropdown.defaultProps = {
-  placement: 'bottom-start',
+  placement: 'top-bottom-start',
   trigger: 'hover',
   width: 240
 }

components/dropdown/DropdownMenuItem.jsx

@@ -29,7 +29,7 @@ export default class DropdownMenuItem extends React.Component {
       this.setState({
         visible: false
       })
-    }, 200)
+    }, 100)
   }
   handleMenuItemMouseEnter = () => {
     clearTimeout(this.timerHideDropdownMenu)
@@ -52,8 +52,8 @@ export default class DropdownMenuItem extends React.Component {
   }
 
   handleMenuItemClick = () => {
-    const { onMenuItemClick, id } = this.props
-    onMenuItemClick(id)
+    const { onMenuItemClick, id, children, href } = this.props
+    onMenuItemClick(id, (href || !children))
   }
   render () {
     const {

components/input/Input.js

@@ -79,7 +79,8 @@ class Input extends Component {
    */
   renderText () {
     let { hover, active, value } = this.state
-    let { disabled, type, id, placeholder, clearable } = this.props
+    // clearableTrigger 为内部预留，主要表示清除按钮的触发形态，类型分为 'hover' 和 ‘always’
+    let { disabled, type, id, placeholder, clearable, clearableTrigger = 'hover' } = this.props
     let { prefix, suffix, prepend, append } = this.state
 
     const noClear = ['textarea']
@@ -180,7 +181,7 @@ class Input extends Component {
             suffix === '' &&
             (value !== '' && clearable) && (
               <span
-                className={`hi-input__fix-box ${hover && !disabled ? '' : 'invisible'}`}
+                className={`hi-input__fix-box ${(hover || clearableTrigger === 'always') && !disabled ? '' : 'invisible'}`}
                 onClick={() => {
                   this._Input.focus()
 

components/menu/SubMenu.js

@@ -106,8 +106,10 @@ class SubMenu extends Component {
       'hi-submenu--fat': fatMenu
     })
     let toggleIcon
-    if (deepSubmenu && (mode === 'horizontal' || mini)) {
-      toggleIcon = isExpand ? 'left' : 'right'
+    if (mode === 'horizontal' && !deepSubmenu) {
+      toggleIcon = 'down'
+    } else if (deepSubmenu && (mode === 'horizontal' || mini)) {
+      toggleIcon = 'right'
     } else {
       toggleIcon = isExpand ? 'up' : 'down'
     }

components/popper/index.js

@@ -61,7 +61,6 @@ export default class Popper extends Component {
     let left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft)
     width = width === false ? undefined : (width === undefined ? rect.width : width)
     let placement = this.getPlacement(rect)
-
     switch (placement) {
       case 'bottom':
         top = top + topGap + rect.height
@@ -71,7 +70,10 @@ export default class Popper extends Component {
         top = top + topGap + rect.height
         left = left + leftGap
         break
-
+      case 'bottom-end':
+        top = top + topGap + rect.height
+        left = left + leftGap - width + rect.width
+        break
       case 'top':
         top = top - topGap
         left = left + leftGap + rect.width / 2
@@ -81,6 +83,11 @@ export default class Popper extends Component {
         left = left + leftGap
         break
 
+      case 'top-end':
+        top = top - topGap
+        left = left + leftGap - width + rect.width
+        break
+
       case 'left':
         top = top + rect.height / 2
         left = left - leftGap

components/popper/style/index.scss

@@ -24,6 +24,10 @@
       bottom: 0;
     }
 
+    &--top-end {
+      bottom: 0;
+    }
+
     &--right {
       // left: 100%;
       // top: 50%;