Merge pull request #728 from XiaoMi/hotfix/#712

Hotfix/#712
XiaoMi · Oct 17, 2019 · 76e59a2 · 76e59a2
2 parents b98ca2d + 15fae60
commit 76e59a2
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 99 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,14 +4,18 @@
 
 - 修复 `<Input />` defaultValue 设置无效的问题 [#717](https://github.com/XiaoMi/hiui/issues/717)
 - 修复 `<Upload />` 拖拽上传场景下，删除文件不正确的问题 [#705](https://github.com/XiaoMi/hiui/issues/705)
-- 修复 `<Menu />` showAllSubMenus 对传入 data 的容错问题  [#687](https://github.com/XiaoMi/hiui/issues/687)
+- 修复 `<Menu />` showAllSubMenus 对传入 data 的容错问题 [#687](https://github.com/XiaoMi/hiui/issues/687)
+- 修复 `<DatePicker />` format 后格式不符合预期的问题 [#712](https://github.com/XiaoMi/hiui/issues/712)
+- 修复 `<TimePicker />` 清空后再次打开面板清空无效的问题 [#722](https://github.com/XiaoMi/hiui/issues/722)
 - 修复 `<Popover />` 在某些场景下显示、隐藏的顺序不正确的问题 [#706](https://github.com/XiaoMi/hiui/issues/706)
+- 修复 `<Tree />` 国际化支持不完全的问题 [#729](https://github.com/XiaoMi/hiui/issues/729)
+- 修复 `<Dropdown />` 数据项 href 仅点击文字才能跳转的问题 [#726](https://github.com/XiaoMi/hiui/issues/726)
 
 ## 2.5.0
 
 - 新增 `<Cascader />` filterOption 属性支持自定义搜索 [#704](https://github.com/XiaoMi/hiui/issues/704)
 - 修复 `<Cascader />` 刷新后 value 不能正确显示的问题 [#667](https://github.com/XiaoMi/hiui/issues/667)
-- 修复 `<Pagination />` pageSizeOptions 写法兼容性问题  [#703](https://github.com/XiaoMi/hiui/issues/703)
+- 修复 `<Pagination />` pageSizeOptions 写法兼容性问题 [#703](https://github.com/XiaoMi/hiui/issues/703)
 - 修复 `<Carousel />` 第一张图向前翻页跳转不正确的问题 [#696](https://github.com/XiaoMi/hiui/issues/696)
 - 修复 兼容属性 legacy 造成的组件污染问题 [#708](https://github.com/XiaoMi/hiui/issues/708)
 - 修复 `<DatePicker />` 传入字符串值时控制台抛出的警告问题 [#709](https://github.com/XiaoMi/hiui/issues/709)
@@ -24,7 +28,7 @@
 
 - 修复 `<Select />` 没有适配主题色的问题 [#257](https://github.com/XiaoMi/hiui/issues/257)
 - 修复 `<Tabs />` 空状态下报错的问题 [#674](https://github.com/XiaoMi/hiui/issues/674)
-- 修复 `<Radio />`  非受控状态下切换失效的问题 [#683](https://github.com/XiaoMi/hiui/issues/683)
+- 修复 `<Radio />` 非受控状态下切换失效的问题 [#683](https://github.com/XiaoMi/hiui/issues/683)
 - 修复 `<Cascader />` 清空搜索展示不正确的问题 [#333](https://github.com/XiaoMi/hiui/issues/333)
 - 修复 `<Collpase />` disabled 没有样式区分的问题 [#483](https://github.com/XiaoMi/hiui/issues/483)
 - 修复 `<Checkbox />` 非受控情况下 onChange 参数不全的问题 [#688](https://github.com/XiaoMi/hiui/issues/688)
@@ -75,7 +79,6 @@
 - 修复 `<Upload />` 中的自定义上传结合 maxCount 不能上传的问题 [#582](https://github.com/XiaoMi/hiui/issues/582)
 - 修复 `<Input />` type 为 textarea 时的底部的样式问题 [#584](https://github.com/XiaoMi/hiui/issues/584)
 
-
 ## 2.1.0
 
 - 新增 `<Breadcrumb />` 面包屑组件 [#573](https://github.com/XiaoMi/hiui/issues/573)

diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js
@@ -85,24 +85,39 @@ class BasePicker extends Component {
       return word.toLowerCase()
     })
   }
-
-  _parseProps (props) {
-    let {value, defaultValue, showTime, type, format, localeDatas, weekOffset, timeInterval = 240} = props
+  getFormatString () {
+    let { format } = this.props
+    let { format: stateFormat } = this.state
+    format = stateFormat || format
+    return format
+  }
+  callFormatterDate (date) {
+    let { type, showTime, localeDatas, weekOffset } = this.props
+    let format = this.getFormatString()
+    let isFormat = !!format
     format = this.compatibleFormatString(format || FORMATS[type])
+    this.setState({
+      format
+    })
+    return formatterDate(type, date, format, showTime, localeDatas, weekOffset, isFormat)
+  }
+  _parseProps (props) {
+    let {value, defaultValue, type, timeInterval = 240} = props
     let _value = value || defaultValue
     let start
     let end
     let date
     let leftText = ''
     let rightText = ''
+    const format = this.compatibleFormatString(this.getFormatString() || FORMATS[type])
     if (_value) {
       if (Object.prototype.toString.call(_value) === '[object Object]') {
-        start = compatibleToDate(_value.start) || null
-        end = compatibleToDate(_value.end) || new Date()
+        start = compatibleToDate(_value.start, format) || null
+        end = compatibleToDate(_value.end, format) || new Date()
       } else {
-        start = compatibleToDate(_value)
+        start = compatibleToDate(_value, format)
         if (type.includes('range')) {
-          end = compatibleToDate(start)
+          end = compatibleToDate(start, format)
           if (type === 'weekrange') {
             start = startOfWeek(start)
             end = endOfWeek(end)
@@ -117,26 +132,23 @@ class BasePicker extends Component {
       }
     }
     date = {
-      startDate: compatibleToDate(start),
-      endDate: compatibleToDate(end)
+      startDate: compatibleToDate(start, format),
+      endDate: compatibleToDate(end, format)
     }
-    leftText = isValid(date.startDate) ? formatterDate(type, date.startDate, format, showTime, localeDatas, weekOffset) : ''
-    rightText = isValid(date.endDate) ? formatterDate(type, date.endDate, format, showTime, localeDatas, weekOffset) : ''
+    leftText = isValid(date.startDate) ? this.callFormatterDate(date.startDate) : ''
+    rightText = isValid(date.endDate) ? this.callFormatterDate(date.endDate) : ''
     this.setState({
       texts: [leftText, rightText],
-      date,
-      format
+      date
     })
   }
   onPick (date, showPanel) {
     if (!date.startDate) {
       date = {startDate: date, endDate: undefined}
     }
-    const {type, showTime, localeDatas, weekOffset} = this.props
-    const {format} = this.state
     this.setState({
       date,
-      texts: [formatterDate(type, date.startDate, format, showTime, localeDatas, weekOffset), formatterDate(type, date.endDate, format, showTime, localeDatas, weekOffset)],
+      texts: [this.callFormatterDate(date.startDate), this.callFormatterDate(date.endDate)],
       showPanel
     }, () => {
       if (!showPanel) {
@@ -145,8 +157,8 @@ class BasePicker extends Component {
     })
   }
   callback () {
-    const {type, onChange} = this.props
-    const {date} = this.state
+    const { type, onChange } = this.props
+    const { date, format } = this.state
     if (onChange) {
       let {startDate, endDate} = date
       startDate = isValid(startDate) ? startDate : ''
@@ -157,23 +169,22 @@ class BasePicker extends Component {
       }
 
       if (type === 'time') {
-        onChange(startDate, dateFormat(startDate, this.state.format))
+        onChange(startDate, dateFormat(startDate, format))
         return
       }
       if (['timerange', 'timeperiod', 'daterange'].includes(type)) {
-        onChange({start: startDate, end: endDate})
+        onChange({start: startDate, end: endDate}, {start: dateFormat(startDate, format), end: dateFormat(endDate, format)})
         return
       }
-      onChange(startDate)
+      onChange(startDate, startDate ? dateFormat(startDate, format) : '')
     }
   }
   timeConfirm (date, onlyTime) {
-    const {type, showTime, onChange, localeDatas, weekOffset} = this.props
-    let {format} = this.state
-    onlyTime && (format = FORMATS['time'])
+    const { onChange } = this.props
+
     this.setState({
       date: date,
-      texts: [formatterDate(type, date.startDate || date, format, showTime, localeDatas, weekOffset), formatterDate(type, date.endDate, format, showTime, localeDatas, weekOffset)],
+      texts: [this.callFormatterDate(date.startDate || date), this.callFormatterDate(date.endDate)],
       showPanel: false,
       isFocus: false
     })
@@ -186,11 +197,8 @@ class BasePicker extends Component {
     }
   }
   timeCancel () {
-    const {format, date} = this.state
-    const {type, showTime, localeDatas, weekOffset} = this.props
     this.setState({
       showPanel: false,
-      texts: [formatterDate(type, date.startDate || date, format, showTime, localeDatas, weekOffset), formatterDate(type, date.endDate, format, showTime, localeDatas, weekOffset)],
       isFocus: false
     })
   }
@@ -200,11 +208,20 @@ class BasePicker extends Component {
     let endDate = parse(texts[1], format, new Date())
     if (startDate && isValid(startDate)) {
       date.startDate ? date.startDate = startDate : date = startDate
+      this.setState({date})
     }
     if (endDate && isValid(endDate)) {
       date.endDate && (date.endDate = endDate)
+      this.setState({date})
+    }
+    if (texts[0].trim().length === 0) {
+      date.startDate = null
+      this.setState({date})
+    }
+    if (texts[1].trim().length === 0) {
+      date.endDate = null
+      this.setState({date})
     }
-    this.setState({date})
   }
   clickOutSide (e) {
     const tar = e.target
@@ -251,13 +268,7 @@ class BasePicker extends Component {
     )
   }
   _clear () {
-    const {onChange, type} = this.props
-    if (onChange) {
-      onChange(
-        (type.includes('range') || type === 'timeperiod') ? {start: '', end: ''} : ''
-      )
-    }
-    this.setState({date: {startDate: null, endDate: null}, texts: ['', ''], isFocus: false})
+    this.setState({date: {startDate: null, endDate: null}, texts: ['', ''], isFocus: false}, () => { this.callback() })
   }
   _icon () {
     const {isFocus} = this.state

diff --git a/components/date-picker/Time.js b/components/date-picker/Time.js
@@ -40,18 +40,21 @@ class Time extends Component {
   }
   selectedEvent (type, value, arrow) {
     const { date } = this.state
+    const cDate = new Date(date.getTime())
     const disabledList = this._getDsiabledList()[type]
     if (disabledList.includes(value) && arrow) {
       value = this.whenDisableChange(disabledList, value, arrow)
     }
     if (type === 'hours') {
-      date.setHours(value)
+      cDate.setHours(value)
     } else if (type === 'minutes') {
-      date.setMinutes(value)
+      cDate.setMinutes(value)
     } else if (type === 'seconds') {
-      date.setSeconds(value)
+      cDate.setSeconds(value)
+    }
+    if (cDate.getTime() !== date.getTime()) {
+      this.callback(cDate)
     }
-    this.callback(date)
   }
 
   isShowHMS () {

diff --git a/components/date-picker/TimeList.js b/components/date-picker/TimeList.js
@@ -27,15 +27,15 @@ export default class TimeList extends Component {
     const dVal = 32
     this.listRef.current && (this.listRef.current.scrollTop = value * dVal)
   }
+  componentDidUpdate () {
+    this.scrollTo()
+  }
   componentDidMount () {
+    this.listRef.current.addEventListener('scroll', this.scrollEvent)
     setTimeout(() => {
-      this.addListener()
       this.scrollTo()
     }, 0)
   }
-  componentDidUpdate () {
-    this.scrollTo()
-  }
   componentWillUnmount () {
     window.clearTimeout(this.timer)
     this.listRef.current.removeEventListener('scroll', this.scrollEvent)
@@ -126,7 +126,7 @@ export default class TimeList extends Component {
         }
         {this.liSuffix}
       </ul>
-      {showArrow && this.renderArrow('hours')}
+      {showArrow && this.renderArrow(type)}
     </div>
   }
 }
diff --git a/components/date-picker/constants.js b/components/date-picker/constants.js
@@ -20,7 +20,7 @@ export const FORMATS = {
 export const isVaildDate = (date) => {
   return date && (date instanceof Date || date.startDate || typeof date === 'number')
 }
-export const formatterDate = (type, date, formatter, showTime, localeDatas, weekOffset = 0) => {
+export const formatterDate = (type, date, formatter, showTime, localeDatas, weekOffset = 0, isFormat = false) => {
   if (!isValid(date)) {
     return ''
   }
@@ -44,7 +44,7 @@ export const formatterDate = (type, date, formatter, showTime, localeDatas, week
       str = localeDatas.datePicker.weekrange(date.getFullYear(), getYearWeek(date, weekOffset).weekNum)
       break
     default:
-      str = dateFormat(date, `${formatter}${showTime ? ' HH:mm:ss' : ''}`)
+      str = dateFormat(date, `${formatter}${(!isFormat && showTime) ? ' HH:mm:ss' : ''}`)
       break
   }
 

diff --git a/components/date-picker/dateUtil.js b/components/date-picker/dateUtil.js
@@ -11,7 +11,7 @@ import parse from 'date-fns/parse'
 import toDate from 'date-fns/toDate'
 import startOfWeek from 'date-fns/startOfWeek'
 import endOfWeek from 'date-fns/endOfWeek'
-import dateFormat from 'date-fns/format'
+import format from 'date-fns/format'
 import addMonths from 'date-fns/addMonths'
 import isSameMonth from 'date-fns/isSameMonth'
 import getYear from 'date-fns/getYear'
@@ -46,12 +46,15 @@ const getStartDate = (dateObj) => {
 const getEndDate = (dateObj) => {
   return getValidDate(dateObj.endDate)
 }
-const compatibleToDate = (value) => {
+const compatibleToDate = (value, format) => {
   if (typeof value === 'string') {
-    return parseISO(value)
+    return parse(value, format, new Date())
   }
   return toDate(value)
 }
+const dateFormat = (value, formatStr) => {
+  return isValid(value) ? format(value, formatStr) : ''
+}
 export {
   getDaysInMonth, // 获取当月的天数
   subMonths, // 月份减法

diff --git a/docs/demo/date-picker/section-ban-date.jsx b/docs/demo/date-picker/section-ban-date.jsx
@@ -17,8 +17,8 @@ class Demo extends React.Component {
         value={this.state.date}
         min={new Date()}
         max={new Date().getTime() + 30 * 24 * 60 * 60 * 1000}
-        onChange={(date) => {
-          console.log(date)
+        onChange={(date, dateStr) => {
+          console.log(date, dateStr)
           this.setState({date})
         }}
       />

diff --git a/docs/demo/date-picker/section-date-time-check.jsx b/docs/demo/date-picker/section-date-time-check.jsx
@@ -10,7 +10,7 @@ class Demo extends React.Component {
       <DatePicker
         type="timeperiod"
         value={new Date()}
-        onChange={(d) => {console.log('sec', d)}}
+        onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
       />
     )
   }

diff --git a/docs/demo/date-picker/section-date-time-scope.jsx b/docs/demo/date-picker/section-date-time-scope.jsx
@@ -11,7 +11,7 @@ class Demo extends React.Component {
         type='daterange'
         value={new Date()}
         showTime={true}
-        onChange={(d) => {console.log('last', d)}}
+        onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
       />
     )
   }

diff --git a/docs/demo/date-picker/section-date-time.jsx b/docs/demo/date-picker/section-date-time.jsx
@@ -10,7 +10,8 @@ class Demo extends React.Component {
       <DatePicker
         value={new Date()}
         showTime={true}
-        onChange={(d) => {console.log('sec', d)}}
+        format='yyyy-MM-dd HH:mm:ss'
+        onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
       />
     )
   }

diff --git a/docs/demo/date-picker/section-fast-check.jsx b/docs/demo/date-picker/section-fast-check.jsx
@@ -10,7 +10,7 @@ class Demo extends React.Component {
       <DatePicker
         type='daterange'
         shortcuts={['近一周','近一月','近三月','近一年']}
-        onChange={(d) => {console.log(d)}}
+        onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
       />
     )
   }

diff --git a/docs/demo/date-picker/section-modal.jsx b/docs/demo/date-picker/section-modal.jsx
@@ -37,16 +37,12 @@ class Demo extends React.Component {
         >
           <DatePicker
             value={this.state.date}
-            onChange={(d) => {
-              console.log(DatePicker.format(d, 'yyyy-MM E'))
-            }}
+            onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
           />
           <DatePicker
             type='daterange'
             value={this.state.rangeDate}
-            onChange={(d) => {
-              console.log(d)
-            }}
+            onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
           />
         </Modal>
        }

diff --git a/docs/demo/date-picker/section-month.jsx b/docs/demo/date-picker/section-month.jsx
@@ -7,9 +7,7 @@ import DatePicker from '@hi-ui/hiui/es/date-picker'\n
 class Demo extends React.Component {
   render () {
     return (
-      <DatePicker type='month'  onChange={(d) => {
-          console.log('选择月份', d)
-        }}/>
+      <DatePicker type='month'  onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}/>
     )
   }
 }`

diff --git a/docs/demo/date-picker/section-normal.jsx b/docs/demo/date-picker/section-normal.jsx
@@ -16,9 +16,7 @@ class Demo extends React.Component {
       <div style={{display:'flex', flexWrap: 'wrap'}}>
         <DatePicker
           value={this.state.date}
-          onChange={(d) => {
-            console.log('返回值', d)
-          }}
+          onChange={(date, dateStr) => {console.log('onChange', date, dateStr)}}
         />
       </div>
     )