Merge pull request #1094 from XiaoMi/develop

2.13.0
XiaoMi · Jun 17, 2020 · ba09a5a · ba09a5a
2 parents 7e76256 + 686c74f
commit ba09a5a
Show file tree

Hide file tree

Showing 79 changed files with 2,298 additions and 1,173 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,44 @@
 # 更新日志
 
+## 2.13.0
+
+- 修复 `<Checkbox />` 行高不正确问题 [#1061](https://github.com/XiaoMi/hiui/issues/1061)
+- 修复 `<Select />` title 为 nubmer 类型时的问题 [#1077](https://github.com/XiaoMi/hiui/issues/1077)
+- 修复 `<Select />` 在单选情况下受控时清空报错的问题 [#1070](https://github.com/XiaoMi/hiui/issues/1070)
+- 修复 `<Select />` 优化弹窗位置计算触发机制 [#1072](https://github.com/XiaoMi/hiui/issues/1072)
+- 修复 `<Select />` 受控模式的异步多选,默认选项消失的问题 [#1047](https://github.com/XiaoMi/hiui/issues/1047)
+- 修复 `<Form />` validate 验证不通过回调函数没有调用的问题 [#1059](https://github.com/XiaoMi/hiui/issues/1059)
+- 修复 `<Form />` 校验不通过时的样式问题 [#1042](https://github.com/XiaoMi/hiui/issues/1042) [#1036](https://github.com/XiaoMi/hiui/issues/1036)
+- 修复 `<Cascader />` 高度不正确问题 [#1053](https://github.com/XiaoMi/hiui/issues/1053)
+- 修复 `<Cascader />` 同时展开多个的问题 [#1066](https://github.com/XiaoMi/hiui/issues/1066)
+- 修复 `<Notification />`、`<Message />` 白色背景的问题 [#1049](https://github.com/XiaoMi/hiui/issues/1049)
+- 修复 `<Upload />` 上传过程中 maxCount 不起作用的问题 [#1032](https://github.com/XiaoMi/hiui/issues/1032)
+- 修复 `<Upload />` 拖拽上传时，tips 展示不正确的问题 [#1041](https://github.com/XiaoMi/hiui/issues/1041)
+- 修复 `<DatePicker />` 点击每月 31 号，输入框显示异常的问题 [#1039](https://github.com/XiaoMi/hiui/issues/1039)
+- 修复 `<DatePicker />` 在 type 为 date 时执行了农历方法的问题 [#1050](https://github.com/XiaoMi/hiui/issues/1050)
+- 修复 `<DatePicker />` 切换月异常的问题 [#1079](https://github.com/XiaoMi/hiui/issues/1079)
+- 修复 `<Select />` 异步多选受控时，选中项会重复添加的问题 [#1044](https://github.com/XiaoMi/hiui/issues/1044)
+- 修复 `<Tabs />` 嵌套使用 type 不生效的问题 [#1046](https://github.com/XiaoMi/hiui/issues/1046)
+- 修复 `<Menu />` activeId 发生改变时展开选中项 [#1029](https://github.com/XiaoMi/hiui/issues/1029)
+- 修复 `<Menu />` 异步获取数据时，activeId 失效的问题 [#1027](https://github.com/XiaoMi/hiui/issues/1027)
+- 修复 `<Tree />` editable 和 searchable 不同同时使用的问题 [#1023](https://github.com/XiaoMi/hiui/issues/1023)
+- 优化 `<WaterMark />` 展示效果 [#1024](https://github.com/XiaoMi/hiui/issues/1024)
+- 优化 `<Timeline />` 展示效果 [#1086](https://github.com/XiaoMi/hiui/issues/1086)[#1048](https://github.com/XiaoMi/hiui/issues/1048)
+- 优化 `<Tree />` 拖拽性能 [#1087](https://github.com/XiaoMi/hiui/issues/1087)
+- 新增 `<Tree />` onBeforeSave onBeforeDelete 函数 [#1093](https://github.com/XiaoMi/hiui/issues/1093)
+- 新增 `<Tag />` 普通模式配色 [#1060](https://github.com/XiaoMi/hiui/issues/1060)
+- 新增 `<Tabs />` 线性模式 [#1088](https://github.com/XiaoMi/hiui/issues/1088)
+- 新增 `<Menu />` 支持单独选中父级菜单 [#1038](https://github.com/XiaoMi/hiui/issues/1038)
+- 新增 `<Modal />` confirm 调用方式 [#1090](https://github.com/XiaoMi/hiui/issues/1090)
+- 新增 `<Datepicker />` 支持宽度调整 [#1033](https://github.com/XiaoMi/hiui/issues/1033)
+- 新增 `<Datepicker />` 增加月范围选择和年范围选择面板 [#1074](https://github.com/XiaoMi/hiui/issues/1074)
+- 新增 `<Datepicker />` 快捷方式「近半年」 [#1063](https://github.com/XiaoMi/hiui/issues/1063)
+- 新增 `<Cascader />` trigger 属性配置选项展开的触发方式 [#1092](https://github.com/XiaoMi/hiui/issues/1092)
+- 新增 `<Pagination />` onPageSizeChange 可通过返回 false 来防止触发 onChange [#1091](https://github.com/XiaoMi/hiui/issues/1091)
+- 新增 `<Stepper />` 支持通过 icon 配置 HiUI icon [#1064](https://github.com/XiaoMi/hiui/issues/1064)
+- 新增 `<Tree />` contextMenu 增加层级回调参数 [#1021](https://github.com/XiaoMi/hiui/issues/1021)
+- 新增多语言繁体支持 [#1062](https://github.com/XiaoMi/hiui/issues/1062)
+
 ## 2.12.0
 
 - 新增 `<Watermark />` 水印组件 [#121](https://github.com/XiaoMi/hiui/issues/121)

diff --git a/components/cascader/Cascader.js b/components/cascader/Cascader.js
@@ -39,7 +39,8 @@ class Cascader extends Component {
     disabled: false,
     changeOnSelect: false,
     onActiveItemChange: () => {},
-    onChange: () => {}
+    onChange: () => {},
+    trigger: 'click'
   }
 
   constructor (props) {
@@ -145,7 +146,7 @@ class Cascader extends Component {
     this.onChangeValue([], false)
   }
 
-  onChangeValue (value, hasChildren) {
+  onChangeValue = (value, hasChildren) => {
     const {
       onChange,
       onActiveItemChange,
@@ -170,6 +171,28 @@ class Cascader extends Component {
     })
   }
 
+  onHoverSelect = (value) => {
+    this.setState({
+      filterOptions: false,
+      keyword: '',
+      cascaderValue: value
+    })
+  }
+
+  onHoverClick = (value, hasChildren) => {
+    const { onChange, changeOnSelect } = this.props
+    if (changeOnSelect || !hasChildren) {
+      this.setState(
+        {
+          cacheValue: value,
+          cascaderLabel: this.getCascaderLabel(value)
+        },
+        () => onChange(value)
+      )
+      this.hidePopper()
+    }
+  }
+
   onKeywordChange () {
     const {
       data
@@ -350,7 +373,8 @@ class Cascader extends Component {
       searchable,
       clearable,
       style,
-      theme
+      theme,
+      trigger
     } = this.props
     const {
       cascaderValue,
@@ -406,7 +430,10 @@ class Cascader extends Component {
             theme={theme}
             isFiltered={filterOptions}
             filterOptionWidth={this.hiCascader.current && this.hiCascader.current.clientWidth}
-            onSelect={this.onChangeValue.bind(this)}
+            onSelect={this.onChangeValue}
+            onHoverSelect={this.onHoverSelect}
+            onHoverClick={this.onHoverClick}
+            trigger={trigger}
           />
         </Popper>
       </div>

diff --git a/components/cascader/Menu.js b/components/cascader/Menu.js
@@ -22,14 +22,17 @@ class Menu extends Component {
     }
   }
 
-  renderMenus () {
+  renderMenus = () => {
     const {
       value,
       options,
       onSelect,
       isFiltered,
       filterOptionWidth,
-      theme
+      theme,
+      trigger,
+      onHoverSelect,
+      onHoverClick
     } = this.props
     const root = this.root()
     const menus = []
@@ -66,11 +69,20 @@ class Menu extends Component {
                     'hi-cascader-menu__item-expanded': hasChildren,
                     'hi-cascader-menu__item-disabled': !!option.disabled,
                     'hi-cascader-menu__item-active': currentValue === optionValue
-                  }
-                  )}
+                  })}
+                  onMouseEnter={(e) => {
+                    if (trigger === 'hover') {
+                      e.stopPropagation()
+                      !option.disabled && onHoverSelect(optionValues, hasChildren)
+                    }
+                  }}
                   onClick={(e) => {
                     e.stopPropagation()
-                    !option.disabled && onSelect(optionValues, hasChildren)
+                    if (trigger === 'click') {
+                      !option.disabled && onSelect(optionValues, hasChildren)
+                    } else {
+                      !option.disabled && onHoverClick(optionValues, hasChildren)
+                    }
                   }}
                   key={optionValue + index}
                 >

diff --git a/components/cascader/style/cascader.scss b/components/cascader/style/cascader.scss
@@ -35,7 +35,7 @@ $cascader: 'hi-cascader' !default;
   &__input-container {
     display: flex;
     align-items: center;
-    padding: 5px 12px;
+    padding: 4px 12px;
     border: 1px solid #d8d8d8;
   }
 

diff --git a/components/checkbox/style/index.scss b/components/checkbox/style/index.scss
@@ -41,7 +41,7 @@ $prefixCls: '.hi-checkbox' !default;
   height: 32px;
   vertical-align: middle;
 
-  @include component-reset();
+  // @include component-reset();
 
   input {
     position: absolute;
@@ -100,7 +100,7 @@ $prefixCls: '.hi-checkbox' !default;
 
   &__text {
     padding: 0 32px 0 8px;
-    line-height: unset;
+    line-height: 32px;
   }
 
   &--disabled {

diff --git a/components/confirm/index.js b/components/confirm/index.js
@@ -7,12 +7,12 @@ import './style/index'
 
 class Confirm extends Component {
   render () {
-    let {tip, onOk, onCancel} = this.props
+    let {content, onOk, onCancel, title} = this.props
 
     return (
       <div className='hi-confirm'>
         <Modal
-          title=''
+          title={title}
           ref='hi-confirm'
           show
           size='small'
@@ -23,27 +23,31 @@ class Confirm extends Component {
           confirmType='default'
           cancelType='danger'
           onConfirm={() => (function () {
-            onOk()
+            if (onOk) {
+              onOk()
+            }
 
             confirmInstance.destroy()
           }())}
           onCancel={() => (function () {
-            onCancel()
+            if (onCancel) {
+              onCancel()
+            }
 
             confirmInstance.destroy()
           }())}
         >
-          {tip}
+          {content}
 
         </Modal>
       </div>
 
     )
   }
 
-  componentDidMount () {
-    Modal.show.call(this, 'hi-confirm')
-  }
+  // componentDidMount () {
+  //   Modal.show.call(this, 'hi-confirm')
+  // }
 }
 
 Confirm.propTypes = {

diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react'
+import _ from 'lodash'
 import Modal from './Modal'
 import classNames from 'classnames'
 import {formatterDate, FORMATS} from './constants'
@@ -25,8 +26,9 @@ class BasePicker extends Component {
     this.input = null
     this.rInput = null
   }
-  setPlaceholder () {
-    const {placeholder, localeDatas, type, showTime} = this.props
+  setPlaceholder (_props) {
+    const {placeholder} = _props
+    const {localeDatas, type, showTime} = this.props
     const typePlaceholder = localeDatas.datePicker.placeholders[type]
     const tempPlaceholder = showTime
       ? localeDatas.datePicker.placeholderTimeperiod
@@ -59,7 +61,7 @@ class BasePicker extends Component {
   }
   componentDidMount () {
     this._parseProps(this.props)
-    this.setPlaceholder()
+    this.setPlaceholder(this.props)
     let rect = this.inputRoot.current.getBoundingClientRect()
     this.calcPanelPos(rect)
   }
@@ -96,6 +98,9 @@ class BasePicker extends Component {
     if (nextProps.value !== this.props.value) {
       this._parseProps(nextProps)
     }
+    if (!_.isEqual(nextProps.placeholder, this.props.placeholder)) {
+      this.setPlaceholder(nextProps)
+    }
   }
 
   getFormatString (props) {
@@ -140,6 +145,7 @@ class BasePicker extends Component {
         end = new Date(startTime)
       }
     }
+
     date = {
       startDate: compatibleToDate(start, format),
       endDate: compatibleToDate(end, format)
@@ -182,7 +188,7 @@ class BasePicker extends Component {
         onChange(startDate, dateFormat(startDate, format))
         return
       }
-      if (['timerange', 'timeperiod', 'daterange'].includes(type)) {
+      if (['timerange', 'timeperiod', 'daterange', 'yearrange', 'monthrange'].includes(type)) {
         onChange({start: startDate, end: endDate}, {start: dateFormat(startDate, format), end: dateFormat(endDate, format)})
         return
       }
@@ -287,11 +293,14 @@ class BasePicker extends Component {
       localeDatas,
       disabled,
       showTime,
-      type
+      type,
+      width,
+      theme
     } = this.props
     const {isFocus} = this.state
     const _cls = classNames(
       'hi-datepicker__input',
+      `theme__${theme}`,
       isFocus && 'hi-datepicker__input--focus',
       `hi-datepicker__input--${type}`,
       'hi-datepicker__input--range',
@@ -301,6 +310,7 @@ class BasePicker extends Component {
     return (
       <div
         className={_cls}
+        style={{width: width}}
         onMouseEnter={() => {
           this.setState({ isFocus: true })
         }}
@@ -319,12 +329,15 @@ class BasePicker extends Component {
     const {
       disabled,
       showTime,
-      type
+      type,
+      width,
+      theme
     } = this.props
     const {isFocus} = this.state
 
     const _cls = classNames(
       'hi-datepicker__input',
+      `theme__${theme}`,
       isFocus && 'hi-datepicker__input--focus',
       `hi-datepicker__input--${type}`,
       disabled && 'hi-datepicker__input--disabled',
@@ -333,6 +346,7 @@ class BasePicker extends Component {
     return (
       <div
         className={_cls}
+        style={{width: width}}
         onMouseEnter={() => {
           this.setState({ isFocus: true })
         }}
@@ -350,9 +364,9 @@ class BasePicker extends Component {
     )
   }
   render () {
-    const {type, showTime} = this.props
+    const {type, showTime, width} = this.props
     return (
-      <span ref={this.inputRoot} className='hi-datepicker__input-root'>
+      <span ref={this.inputRoot} className='hi-datepicker__input-root' style={{width: width}}>
         {
           (type.indexOf('range') !== -1 || type === 'timeperiod') ? this.renderRangeInput() : this.renderNormalInput()
         }