Merge pull request #1240 from XiaoMi/develop

2.15.0

.babelrc

@@ -15,5 +15,7 @@
     // "stage-0",
     // "react"
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
 }

CHANGELOG.md

@@ -1,5 +1,21 @@
 # 更新日志
 
+## 2.15.0
+
+- 优化 `<Tree />` onBeforeSave 、 onDragStart 支持返回 Promise [#1179](https://github.com/XiaoMi/hiui/issues/1179)
+- 优化 `<DatePicker />` 新增属性 inputReadOnly 设置输入框为只读形态 [#1203](https://github.com/XiaoMi/hiui/issues/1203)
+- 优化 `<TimePicker />` 新增属性 inputReadOnly 设置输入框为只读形态 [#1203](https://github.com/XiaoMi/hiui/issues/1203)
+- 优化 `<TimePicker />` 新增 hourStep、minuteStep、secondStep 等时分秒间隔选项 [#1194](https://github.com/XiaoMi/hiui/issues/1195)
+- 优化 `<Form />` 当只有一个输入框时，阻止在该输入框中按下回车提交该表单行为 [#1205](https://github.com/XiaoMi/hiui/issues/1205)
+- 优化 `<Upload />` uploadAction 支持返回 Promise [#1198](https://github.com/XiaoMi/hiui/issues/1198)
+- 修复 `<Carousel />` Children 节点添加点击事件后，点击回调 index 异常问题 [#1201](https://github.com/XiaoMi/hiui/issues/1201)
+- 修复 `<Cascader />` value 为 null 时导致功能使用异常问题 [#1218](https://github.com/XiaoMi/hiui/issues/1218)
+- 修复 `<Input />` ref 属性无效问题 [#1192](https://github.com/XiaoMi/hiui/issues/1192)
+- 修复 `<TimePicker />` type 为 timerange 时，时间范围选择问题 [#1188](https://github.com/XiaoMi/hiui/issues/1188)
+- 修复 `<TimePicker />` 切换按键无效问题 [#1210](https://github.com/XiaoMi/hiui/issues/1210)
+- 修复 `<Upload />` type 为 photo 时，上传时样式问题 [#1186](https://github.com/XiaoMi/hiui/issues/1186)
+- 修复 `<Select />` 输入框宽度随内容自动撑宽问题 [#1172](https://github.com/XiaoMi/hiui/issues/1172)
+
 ## 2.14.0
 
 - 优化 `<Menu />` 垂直模式收起后没有配置 icon 的展示效果 [#1167](https://github.com/XiaoMi/hiui/issues/1167)

README.md

@@ -64,7 +64,7 @@ $ npm start
 
 Open http://localhost:4200
 
-### Unit Testing 
+### Unit Testing
 
 ```sh
 # require node version >= 10

components/carousel/index.js

@@ -94,6 +94,7 @@ class Carousel extends Component {
               key: index,
               style: {
                 position: 'relative',
+                zIndex:active === index ? 2 : 1,
                 opacity: active === index ? 1 : 0,
                 transition: 'opacity 300ms ease 0s',
                 left: -(rootWidth * index),

components/carousel/style/index.scss

@@ -18,6 +18,7 @@
     transform: translateX(-50%);
     max-width: 50%;
     display: flex;
+    z-index: 2;
   }
 
   &__dot {
@@ -51,7 +52,8 @@
     display: flex;
     justify-content: space-between;
     visibility: hidden;
-
+    height: 0;
+    z-index: 2;
     &--show {
       visibility: visible;
     }
@@ -91,5 +93,6 @@
     text-align: center;
     user-select: none;
     opacity: 0.5;
+    z-index: 2;
   }
 }

components/cascader/Cascader.js

@@ -45,8 +45,8 @@ class Cascader extends Component {
 
   constructor (props) {
     super(props)
-    const cascaderValue = this.props.value
-    const cacheValue = this.props.value
+    const cascaderValue = this.props.value || []
+    const cacheValue = this.props.value || []
     const cascaderLabel = this.getCascaderLabel(cascaderValue)
     this.hiCascader = React.createRef()
     this.debouncedKeywordChange = debounce(this.onKeywordChange.bind(this), 300)
@@ -70,7 +70,7 @@ class Cascader extends Component {
     if (!shallowequal(nextProps.value, this.props.value) || !isEqual(nextProps.data, this.props.data)) {
       const cascaderLabel = this.getCascaderLabel(nextProps.value, nextProps.data)
       this.setState({
-        cacheValue: nextProps.value, // 缓存原始value，用户可能点击option但是没选中，用于恢复初始value
+        cacheValue: nextProps.value || [], // 缓存原始value，用户可能点击option但是没选中，用于恢复初始value
         cascaderLabel
       })
     }

components/date-picker/BasePicker.js

@@ -7,7 +7,7 @@ import {showLargeCalendar, getInRangeDate} from './util'
 import PropTypes from 'prop-types'
 import DatePickerType from './Type'
 
-import { dateFormat, isValid, startOfWeek, endOfWeek, parse, compatibleToDate, compatibleFormatString } from './dateUtil'
+import { dateFormat, isValid, startOfWeek, endOfWeek, parse, compatibleToDate, compatibleFormatString, toDate } from './dateUtil'
 class BasePicker extends Component {
   constructor (props) {
     super(props)
@@ -20,7 +20,8 @@ class BasePicker extends Component {
       placeholder: '',
       leftPlaceholder: '',
       rightPlaceholder: '',
-      format: this.getFormatString(props)
+      format: this.getFormatString(props),
+      rangeInputIsError: false
     }
     this.inputRoot = React.createRef()
     this.input = null
@@ -184,43 +185,50 @@ class BasePicker extends Component {
     const { date, format } = this.state
     if (onChange && !disabled) {
       let {startDate, endDate} = getInRangeDate(_.cloneDeep(date.startDate), _.cloneDeep(date.endDate), max, min)
+
       startDate = isValid(startDate) ? startDate : ''
       endDate = isValid(endDate) ? endDate : ''
       if (type === 'week' || type === 'weekrange') {
         this.setState({
-          texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)]
+          texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)],
+          showPanel: false
         })
         onChange(date)
         return
       }
 
       if (type === 'time') {
         this.setState({
-          texts: [this.callFormatterDate(startDate), '']
+          texts: [this.callFormatterDate(startDate), ''],
+          showPanel: false
         })
         onChange(startDate, dateFormat(startDate, format))
         return
       }
       if (['timerange', 'timeperiod', 'daterange', 'yearrange', 'monthrange'].includes(type)) {
+        const isError = Date.parse(toDate(startDate)) > Date.parse(toDate(endDate))
+
         this.setState({
-          texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)]
+          rangeInputIsError: isError,
+          texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)],
+          showPanel: isError
         })
-        onChange({start: startDate, end: endDate}, {start: dateFormat(startDate, format), end: dateFormat(endDate, format)})
+        !isError && onChange({start: startDate, end: endDate}, {start: dateFormat(startDate, format), end: dateFormat(endDate, format)})
 
         return
       }
 
       if (isValid(startDate) || startDate === '') {
         this.setState({
-          texts: [this.callFormatterDate(startDate), '']
+          texts: [this.callFormatterDate(startDate), ''],
+          showPanel: false
         })
         onChange(startDate, startDate ? dateFormat(startDate, format) : '')
       }
     }
   }
   timeCancel () {
     this.setState({
-      showPanel: false,
       isFocus: false
     })
   }
@@ -259,10 +267,9 @@ class BasePicker extends Component {
     }
     if (tar !== this.input && tar !== this.rInput) {
       let { texts } = this.state
-
       let {startDate, endDate} = getInRangeDate(texts[0], texts[1], max, min)
-
       texts = [this.callFormatterDate(startDate), this.callFormatterDate(endDate)]
+
       this.setState({
         texts
       }, () => {
@@ -272,7 +279,7 @@ class BasePicker extends Component {
     }
   }
   _input (text, ref, placeholder) {
-    const {disabled} = this.props
+    const {disabled, hourStep, minuteStep, secondStep, inputReadOnly} = this.props
     const { texts } = this.state
     return (
       <input
@@ -281,6 +288,7 @@ class BasePicker extends Component {
         placeholder={placeholder}
         className={disabled ? 'disabled' : ''}
         disabled={disabled}
+        readOnly={(hourStep || minuteStep || secondStep) || inputReadOnly ? 'readOnly' : false}
         onChange={e => {
           ref === 'input' ? (texts[0] = e.target.value) : (texts[1] = e.target.value)
           this.setState({
@@ -331,15 +339,16 @@ class BasePicker extends Component {
       width,
       theme
     } = this.props
-    const {isFocus} = this.state
+    const {isFocus,rangeInputIsError} = this.state
     const _cls = classNames(
       'hi-datepicker__input',
       `theme__${theme}`,
       isFocus && 'hi-datepicker__input--focus',
       `hi-datepicker__input--${type}`,
       'hi-datepicker__input--range',
       (showTime || type === 'timeperiod') && 'hi-datepicker__input--range-time',
-      disabled && 'hi-datepicker__input--disabled'
+      disabled && 'hi-datepicker__input--disabled',
+      rangeInputIsError && 'hi-datepicker__input--error'
     )
     return (
       <div

components/date-picker/DateRangePanel.js

@@ -395,6 +395,7 @@ class DateRangePanel extends Component {
         {
           showMask && (
             <TimeRangePanel
+              isCheckTime={false}
               {...this.props}
               style={{
                 position: 'absolute',

components/date-picker/Time.js

@@ -8,6 +8,7 @@ class Time extends Component {
     super(props)
     this.state = {
       date: getValidDate(props.date),
+      endDate: '',
       prefix: {
         hours: 0,
         minutes: 0,
@@ -22,6 +23,7 @@ class Time extends Component {
     this.props.onPick(date, true)
   }
   componentWillReceiveProps (props) {
+
     if (!isSameDay(props.date, this.state.date)) {
       this.setState({
         date: getValidDate(props.date)
@@ -52,6 +54,7 @@ class Time extends Component {
     if (cDate.getTime() !== date.getTime()) {
       this.callback(cDate)
     }
+
   }
 
   isShowHMS () {
@@ -62,10 +65,69 @@ class Time extends Component {
       seconds: format.indexOf('s') > -1
     }
   }
+  // 设置Date的选中状态
+  setDisableTime (type,i,disabledTime) {
+    const { timeRangePanelType, startDate, date } = this.props
+    let isDisabled = disabledTime.includes(i)
+
+    if (this.props.isCheckTime) {
+      if (timeRangePanelType === 'right') {
+        const { hours, minutes, seconds } = deconstructDate(startDate)
+        const { hours: endHours, minutes: endMinutes } = date ? deconstructDate(date) : deconstructDate(new Date())
+        isDisabled = type === 'hours' && hours > i
+        if (type === 'minutes') {
+          if (endHours === hours) {
+            isDisabled = minutes > i
+          }
+          if (endHours < hours) {
+            isDisabled = true
+          }
+        }
+
+        if (type === 'seconds') {
+          if (endHours === hours) {
+            isDisabled = endMinutes === minutes && seconds > i
+            if (endMinutes < minutes) {
+              isDisabled = true
+            }
+          }
+          if (endHours < hours) {
+            isDisabled = true
+          }
+        }
+      }
+    }
+
+    return isDisabled
+  }
+
+  getStep(type){
+    const {hourStep,minuteStep,secondStep} = this.props
+    let step = 1
+    const directionStep = 1
+    switch (type) {
+      case 'hours':
+        step = hourStep || directionStep
+        break;
+      case 'minutes':
+        step = minuteStep || directionStep
+        break;
+      case 'seconds':
+        step = secondStep || directionStep
+        break;
+      default:
+        step = 1
+        break;
+    }
+    return step
+  }
+
   generateDatas (type) {
+
     let count
     let datas = []
     const currentDate = deconstructDate(this.state.date)
+    const step = this.getStep(type)
     const disabledList = this._getDsiabledList()
     const disabledTime = disabledList[type]
     if (type === 'hours') {
@@ -76,15 +138,19 @@ class Time extends Component {
       count = 60
     }
     for (let i = 0; i < count; i += 1) {
-      datas.push({
-        value: i,
-        text: i < 10 ? '0' + i : i.toString(),
-        disabled: disabledTime.includes(i),
-        current: i === currentDate[type]
-      })
+
+      if(i%step === 0 || i === 0){
+        datas.push({
+          value: i,
+          text: i < 10 ? '0' + i : i.toString(),
+          disabled: this.setDisableTime(type,i,disabledTime),
+          current: i === currentDate[type]
+        })
+      }
     }
     return datas
   }
+
   _getDsiabledList () {
     const { disabledHours, disabledMinutes, disabledSeconds } = this.props
     const currentDate = deconstructDate(this.state.date)
@@ -106,6 +172,7 @@ class Time extends Component {
       onlyTime={this.props.onlyTime}
       datas={this.generateDatas(type)}
       disabledList={disabledList[type]}
+      timeRangePanelType={this.props.timeRangePanelType}
       hourStep={hourStep}
       minuteStep={minuteStep}
       secondStep={secondStep}
@@ -120,6 +187,8 @@ class Time extends Component {
       minutes: showMinute,
       seconds: showSecond
     } = this.isShowHMS()
+
+
     return (
       <div className='hi-timepicker__body'>
         <div className='hi-timepicker__timeheader'>