Merge pull request #1177 from XiaoMi/develop

2.14.0

CHANGELOG.md

@@ -1,5 +1,25 @@
 # 更新日志
 
+## 2.14.0
+
+- 优化 `<Menu />` 垂直模式收起后没有配置 icon 的展示效果 [#1167](https://github.com/XiaoMi/hiui/issues/1167)
+- 优化 `<Modal />` 国际化适配 [#1142](https://github.com/XiaoMi/hiui/issues/1142)
+- 修复 `<Progress />` 环形边框颜色问题 [#1165](https://github.com/XiaoMi/hiui/issues/1165)
+- 新增 `<Transfer />` onDragStart/onDragEnd/onDrop 回调函数 [#1162](https://github.com/XiaoMi/hiui/issues/1162)
+- 修复 `<Upload />` 设置 maxCount 后导致上传交互异常问题 [#1158](https://github.com/XiaoMi/hiui/issues/1158)
+- 修复 `<Input />` 设置 clearable 属性控制台警告问题 [#1143](https://github.com/XiaoMi/hiui/issues/1143)
+- 修复 `<Input />` type 为 amount 类型时的问题 [#1150](https://github.com/XiaoMi/hiui/issues/1150)
+- 修复 `<Progress />` placement 为 inside 内容显示折断问题 [#1146](https://github.com/XiaoMi/hiui/issues/1146)
+- 修复 `<Icon />` 部分图标字号问题 [#1145](https://github.com/XiaoMi/hiui/issues/1145)
+- 修复 `<Tabs />` type 非 editable 时，title 属性控制台警告问题 [#1144](https://github.com/XiaoMi/hiui/issues/1144)
+- 修复 `<Rate />` useEmoji 为 true 时，设置 value > 5 报错问题 [#1137](https://github.com/XiaoMi/hiui/issues/1137)
+- 修复 `<Select />` 支持 withCredentials 跨域携带 cookie 属性 [#1128](https://github.com/XiaoMi/hiui/issues/1128)
+- 修复 `<Counter />` 在不设置 min 属性时，只可选中到 -1 问题 [#1108](https://github.com/XiaoMi/hiui/issues/1108)
+- 修复 `<DatePicker />` 手动输入日期相关问题 [#1106](https://github.com/XiaoMi/hiui/issues/1106)
+- 修复 `<DatePicker />` 在禁用状态下，可清空问题 [#1099](https://github.com/XiaoMi/hiui/issues/1099)
+- 修复 `<DatePicker />` DatePicker 在浏览器右侧时，弹出位置显示异常问题 [#1098](https://github.com/XiaoMi/hiui/issues/1098)
+- 优化国际化中简体中文 [#1125](https://github.com/XiaoMi/hiui/issues/1125)
+
 ## 2.13.0
 
 - 修复 `<Checkbox />` 行高不正确问题 [#1061](https://github.com/XiaoMi/hiui/issues/1061)

components/confirm/index.js

@@ -1,17 +1,18 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 
 import Modal from '../modal'
 import './style/index'
+import Provider from '../context'
 
 class Confirm extends Component {
   render () {
-    let {content, onOk, onCancel, title} = this.props
+    let { content, onOk, onCancel, title, localeDatas } = this.props
 
     return (
       <div className='hi-confirm'>
         <Modal
+          localeDatas={localeDatas}
           title={title}
           ref='hi-confirm'
           show
@@ -22,45 +23,32 @@ class Confirm extends Component {
           showFooter
           confirmType='default'
           cancelType='danger'
-          onConfirm={() => (function () {
+          onConfirm={() => {
             if (onOk) {
               onOk()
             }
-
             confirmInstance.destroy()
-          }())}
-          onCancel={() => (function () {
+          }}
+          onCancel={() => {
             if (onCancel) {
               onCancel()
             }
 
             confirmInstance.destroy()
-          }())}
+          }}
         >
           {content}
-
         </Modal>
       </div>
-
     )
   }
-
-  // componentDidMount () {
-  //   Modal.show.call(this, 'hi-confirm')
-  // }
 }
-
-Confirm.propTypes = {
-  tip: PropTypes.string,
-  onOk: PropTypes.function,
-  onCancel: PropTypes.function
-}
-
+Confirm.IS_HIUI_CONFIRM = true
 Confirm.newInstance = function newNotificationInstance (properties) {
   let props = properties || {}
   let div = document.createElement('div')
   document.body.appendChild(div)
-  ReactDOM.render(React.createElement(Confirm, props), div)
+  ReactDOM.render(React.createElement(Provider(Confirm), props), div)
   return {
     destroy () {
       ReactDOM.unmountComponentAtNode(div)

components/context/index.js

@@ -2,44 +2,42 @@ import React, { Component, forwardRef } from 'react'
 import locales from '../locales'
 
 export const ThemeContext = React.createContext('hiui-blue')
-export const LocaleContext = React.createContext('zh-CN')
+export const LocaleContext = React.createContext('zh-Hans')
 /**
  * 临时解决 notice组件获取不到theme的问题
  */
 let noticeTheme = ''
-export default WrappedComponent => {
+let confirmLocale = ''
+export default (WrappedComponent) => {
   class WrapperComponent extends Component {
     static displayName = WrappedComponent.name
     render () {
       const { theme, locale, innerRef, ...restProps } = this.props
       let ConsumerComponent = (
         <ThemeContext.Consumer>
-          {contextTheme => {
+          {(contextTheme) => {
             noticeTheme = noticeTheme || contextTheme
             return (
               <LocaleContext.Consumer>
-                {contextLocale => (
-                  <WrappedComponent
-                    theme={
-                      WrappedComponent.IS_HIUI_NOTICE
-                        ? noticeTheme
-                        : contextTheme
-                    }
-                    locale={contextLocale}
-                    localeDatas={locales[contextLocale]}
-                    ref={innerRef}
-                    innerRef={innerRef}
-                    {...restProps}
-                  />
-                )}
+                {(contextLocale) => {
+                  confirmLocale = confirmLocale || contextLocale
+                  return (
+                    <WrappedComponent
+                      theme={WrappedComponent.IS_HIUI_NOTICE ? noticeTheme : contextTheme}
+                      locale={WrappedComponent.IS_HIUI_CONFIRM ? confirmLocale : contextLocale}
+                      localeDatas={WrappedComponent.IS_HIUI_CONFIRM ? locales[confirmLocale] : locales[contextLocale]}
+                      ref={innerRef}
+                      innerRef={innerRef}
+                      {...restProps}
+                    />
+                  )
+                }}
               </LocaleContext.Consumer>
             )
           }}
         </ThemeContext.Consumer>
       )
-      return wrapProvider(theme, ThemeContext)(locale, LocaleContext)(
-        ConsumerComponent
-      )
+      return wrapProvider(theme, ThemeContext)(locale, LocaleContext)(ConsumerComponent)
     }
   }
   return forwardRef((props, ref) => {
@@ -57,12 +55,8 @@ function wrapProvider (value, context) {
   }
   if (!context) {
     let component = value
-    wrapProvider.Providers.reverse().map(obj => {
-      component = (
-        <obj.context.Provider value={obj.value}>
-          {component}
-        </obj.context.Provider>
-      )
+    wrapProvider.Providers.reverse().map((obj) => {
+      component = <obj.context.Provider value={obj.value}>{component}</obj.context.Provider>
     })
     wrapProvider.Providers = []
     return component

components/counter/Counter.js

@@ -211,17 +211,13 @@ class Counter extends React.Component {
   }
 
   getInputNumber () {
-    const { max = Infinity, min = 0 } = this.props
+    const { max, min } = this.props
     let value = this.valueTrue
     if (isNaN(value)) {
-      value = min
-    }
-    if (value - max >= 0) {
-      value = max
-    }
-    if (value - min <= 0) {
-      value = min
+      value = 0
     }
+    value = max && value - max >= 0 ? max : value
+    value = min && value - min <= 0 ? min : value
     return value
   }
 

components/date-picker/BasePicker.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import Modal from './Modal'
 import classNames from 'classnames'
 import {formatterDate, FORMATS} from './constants'
-import {showLargeCalendar} from './util'
+import {showLargeCalendar, getInRangeDate} from './util'
 import PropTypes from 'prop-types'
 import DatePickerType from './Type'
 
@@ -68,6 +68,10 @@ class BasePicker extends Component {
   calcPanelPos (rect) {
     const {showTime, type} = this.props
     let _w = type.indexOf('range') !== -1 ? 578 : 288
+    if (type === 'timerange') {
+      _w = 400
+    }
+
     let _h = 298
     if (type === 'daterange' && showTime) {
       _h = 344
@@ -80,6 +84,7 @@ class BasePicker extends Component {
     const _st = document.documentElement.scrollTop || document.body.scrollTop
     let {left, width, top, height} = rect
     let _top = rect.top + rect.height + _st + 4
+
     if (left + _w > _cw) {
       left = left + width - _w
     }
@@ -172,27 +177,45 @@ class BasePicker extends Component {
       }
     })
   }
+
   callback () {
-    const { type, onChange } = this.props
+    const { type, onChange, disabled, max, min } = this.props
+
     const { date, format } = this.state
-    if (onChange) {
-      let {startDate, endDate} = date
+    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)]
+        })
         onChange(date)
         return
       }
 
       if (type === 'time') {
+        this.setState({
+          texts: [this.callFormatterDate(startDate), '']
+        })
         onChange(startDate, dateFormat(startDate, format))
         return
       }
       if (['timerange', 'timeperiod', 'daterange', 'yearrange', 'monthrange'].includes(type)) {
+        this.setState({
+          texts: [this.callFormatterDate(startDate), this.callFormatterDate(endDate)]
+        })
         onChange({start: startDate, end: endDate}, {start: dateFormat(startDate, format), end: dateFormat(endDate, format)})
+
         return
       }
-      onChange(startDate, startDate ? dateFormat(startDate, format) : '')
+
+      if (isValid(startDate) || startDate === '') {
+        this.setState({
+          texts: [this.callFormatterDate(startDate), '']
+        })
+        onChange(startDate, startDate ? dateFormat(startDate, format) : '')
+      }
     }
   }
   timeCancel () {
@@ -223,6 +246,7 @@ class BasePicker extends Component {
     }
   }
   clickOutSide (e) {
+    const {max, min} = this.props
     const tar = e.target
     this.inputChangeEvent()
 
@@ -234,8 +258,17 @@ class BasePicker extends Component {
       return false
     }
     if (tar !== this.input && tar !== this.rInput) {
-      this.timeCancel()
-      this.callback()
+      let { texts } = this.state
+
+      let {startDate, endDate} = getInRangeDate(texts[0], texts[1], max, min)
+
+      texts = [this.callFormatterDate(startDate), this.callFormatterDate(endDate)]
+      this.setState({
+        texts
+      }, () => {
+        this.timeCancel()
+        this.callback()
+      })
     }
   }
   _input (text, ref, placeholder) {
@@ -268,19 +301,20 @@ class BasePicker extends Component {
     )
   }
   _clear () {
-    this.setState({date: {startDate: null, endDate: null}, texts: ['', ''], isFocus: false}, () => { this.callback() })
+    const { disabled } = this.props
+    !disabled && this.setState({date: {startDate: null, endDate: null}, texts: ['', ''], isFocus: false}, () => { this.callback() })
   }
   _icon () {
     const {isFocus, texts} = this.state
-    const { clearable, type, showTime } = this.props
+    const { clearable, type, showTime, disabled } = this.props
     const iconCls = classNames(
       'hi-datepicker__input-icon',
       'hi-icon',
-      (texts[0].length && isFocus && clearable)
+      (texts[0].length && isFocus && clearable && !disabled)
         ? 'icon-close-circle clear'
         : ((type.includes('time') || showTime) ? 'icon-time' : 'icon-date')
     )
-    return (isFocus && clearable)
+    return (texts[0].length && isFocus && clearable)
       ? <span className={iconCls} onClick={this._clear.bind(this)} />
       : <span className={iconCls} onClick={(e) => {
         if (this.props.disabled) return

components/date-picker/DateRangePanel.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import Calender from './Calender'
-import { deconstructDate, nextMonth, showLargeCalendar, colDisabled } from './util'
+import { deconstructDate, nextMonth, showLargeCalendar, colDisabled, getInRangeDate } from './util'
+
 import { DAY_MILLISECONDS } from './constants'
 import Icon from '../icon'
 import classNames from 'classnames'
@@ -170,7 +171,7 @@ class DateRangePanel extends Component {
     })
   }
   shortcutsClickEvent (e) {
-    const { localeDatas } = this.props
+    const { localeDatas, max, min } = this.props
     const {range} = this.state
     const _date = new Date()
     const val = e.target.innerText
@@ -193,8 +194,9 @@ class DateRangePanel extends Component {
         break
     }
     const nDate = new Date((endOfDay(_date).getTime() + 1) - days * DAY_MILLISECONDS)
-    range.startDate = nDate
-    range.endDate = _date
+    const {startDate, endDate} = getInRangeDate(nDate, _date, max, min)
+    range.startDate = startDate
+    range.endDate = endDate
     this.props.onPick(range)
   }
   renderShortcut (shortcuts) {

components/date-picker/util.js

@@ -1,5 +1,5 @@
 import request from 'axios'
-import { addMonths, getDay, subDays, differenceInDays, startOfWeek, endOfWeek, getYear, getMonth } from './dateUtil'
+import { addMonths, getDay, subDays, differenceInDays, startOfWeek, endOfWeek, getYear, getMonth, toDate, isValid } from './dateUtil'
 const holiday = {
   PRCHoliday: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/PRCHoliday.json?',
   PRCLunar: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/PRCLunar.json?',
@@ -80,3 +80,24 @@ export const getPRCDate = (api) => {
   }
   return url ? request.create().request(options) : null
 }
+
+// 处理输入不在该范围内的处理
+export const getInRangeDate = (startDate, endDate, max, min) => {
+  let _startDate = isValid(startDate) ? startDate : ''
+  let _endDate = isValid(endDate) ? endDate : ''
+  if (min && isValid(startDate)) {
+    const minTimestamp = Date.parse(toDate(min))
+    const startDateTimestamp = Date.parse(startDate)
+    const endDateTimestamp = Date.parse(endDate)
+    _startDate = startDateTimestamp < minTimestamp ? new Date(minTimestamp) : new Date(startDate)
+    _endDate = endDateTimestamp < minTimestamp ? new Date(minTimestamp) : new Date(endDate)
+  }
+  if (max && isValid(startDate)) {
+    const maxTimestamp = Date.parse(toDate(max))
+    const startDateTimestamp = Date.parse(_startDate)
+    const endDateTimestamp = Date.parse(_endDate)
+    _startDate = startDateTimestamp > maxTimestamp ? new Date(maxTimestamp) : new Date(_startDate)
+    _endDate = endDateTimestamp > maxTimestamp ? new Date(maxTimestamp) : new Date(_endDate)
+  }
+  return {startDate: _startDate, endDate: _endDate}
+}