Merge pull request #762 from XiaoMi/hotfix/#760#756#749#746

Hotfix/#760#756#749#746

CHANGELOG.md

@@ -1,5 +1,12 @@
 # 更新日志
 
+## 2.5.3
+- 修复 `<Select />` 异步多选在输入关键字时会清除已选择项的问题 [#746](https://github.com/XiaoMi/hiui/issues/746)
+- 修复 `<Loading />` 在某些情况下导致页面布局发生变化的问题 [#749](https://github.com/XiaoMi/hiui/issues/749)
+- 修改 `<Upload />` photo 模式、drag 模式下超出数量限制的展现形式 [#756](https://github.com/XiaoMi/hiui/issues/756)
+- 修复 `<Rate />`  组件的控制台警告 [#760](https://github.com/XiaoMi/hiui/issues/760)
+- 变更 `<Select />`、`<Tree />`、`<Table />` 的远程 Mock 数据地址
+
 ## 2.5.2
 
 - 修复 `<Tabs />` 编辑模式下删除最后一个 tab 报错的问题 [#735](https://github.com/XiaoMi/hiui/issues/735)

components/loading/Loading.js

@@ -60,8 +60,10 @@ function PortalWrapper ({ mountNode, children }) {
 function open (target, { content, key, duration, size } = {}) {
   let renderNode = document.createElement('div')
   const mountNode = target || document.body
-  window.getComputedStyle(mountNode).position === 'absolute' ||
+  mountNode.nodeName !== 'BODY' && (
+    window.getComputedStyle(mountNode).position === 'absolute' ||
     mountNode.style.setProperty('position', 'relative')
+  )
   const full = !target
   ReactDOM.render(
     <Loading {...{ content, full, visible: true, target: mountNode, size }} />,
@@ -79,8 +81,10 @@ function open (target, { content, key, duration, size } = {}) {
 function deprecatedOpen ({ target, tip } = {}) {
   let renderNode = document.createElement('div')
   const mountNode = target || document.body
-  window.getComputedStyle(mountNode).position === 'absolute' ||
+  mountNode.nodeName !== 'BODY' && (
+    window.getComputedStyle(mountNode).position === 'absolute' ||
     mountNode.style.setProperty('position', 'relative')
+  )
   const full = !target
   ReactDOM.render(
     <Loading {...{ tip, full, show: true, target: mountNode }} />,

components/locales/en-US.js

@@ -57,6 +57,7 @@ export default {
     delete: 'Delete',
     drag: 'Drag and drop files for uploading',
     dragTips: 'Please click or drag and drop file upload',
+    dragTipsLimited: 'The number has reached the upper limit',
     preview: 'Preview'
   },
   modal: {

components/locales/zh-CN.js

@@ -58,6 +58,7 @@ export default {
     delete: '删除',
     drag: '拖拽文件上传',
     dragTips: '请点击或拖拽文件上传',
+    dragTipsLimited: '数量已达上限',
     preview: '预览'
   },
   modal: {

components/rate/Rate.js

@@ -18,6 +18,7 @@ class Rate extends Component {
         value
       }
     }
+    return null
   }
   state = {
     value: 0,

components/select/Select.js

@@ -70,7 +70,7 @@ class Select extends Component {
     const { data, value, defaultValue } = props
     const dropdownItems = cloneDeep(data)
     const initialValue = value === undefined ? defaultValue : value
-    const selectedItems = this.resetSelectedItems(initialValue, dropdownItems)
+    const selectedItems = this.resetSelectedItems(initialValue, dropdownItems, [])
     const searchable = this.getSearchable()
     this.debouncedFilterItems = debounce(this.onFilterItems.bind(this), 300)
     this.clickOutsideHandel = this.clickOutside.bind(this)
@@ -124,7 +124,7 @@ class Select extends Component {
       const selectedItems = this.resetSelectedItems(
         nextProps.value || this.state.selectedItems,
         nextProps.data,
-        true
+        this.state.selectedItems
       )
       this.setState({
         selectedItems,
@@ -162,19 +162,19 @@ class Select extends Component {
   }
 
   isRemote () {
-    const { dataSource } = this.props
-    return dataSource && !!dataSource.url
+    const { dataSource, onSearch } = this.props
+    return onSearch || (dataSource && !!dataSource.url)
   }
 
-  resetSelectedItems (value, dropdownItems = [], listChanged = false) {
+  resetSelectedItems (value, dropdownItems = [], reviceSelectedItems = []) {
     const values = this.parseValue(value)
     let selectedItems = []
     dropdownItems.forEach((item) => {
       if (values.includes(item.id)) {
         selectedItems.push(item)
       }
     })
-    return selectedItems
+    return reviceSelectedItems.concat(selectedItems)
   }
 
   addOption (option) {
@@ -328,65 +328,75 @@ class Select extends Component {
   }
 
   remoteSearch (keyword) {
-    let {
-      url,
-      transformResponse,
-      error,
-      params,
-      headers,
-      mode,
-      data = {},
-      type = 'GET',
-      key,
-      jsonpCallback = 'callback',
-      ...options
-    } = this.props.dataSource
-    keyword =
-      !keyword && this.autoloadFlag && this.props.autoload
-        ? this.props.dataSource.keyword
+    const {onSearch, dataSource, autoload} = this.props
+    if (onSearch && typeof onSearch === 'function') {
+      this.setState({
+        fetching: true
+      })
+      onSearch(keyword).finally(() => {
+        this.setState({fetching: false})
+      })
+    } else {
+      let {
+        url,
+        transformResponse,
+        error,
+        params,
+        headers,
+        mode,
+        data = {},
+        type = 'GET',
+        key,
+        jsonpCallback = 'callback',
+        ...options
+      } = dataSource
+      keyword =
+      !keyword && this.autoloadFlag && autoload
+        ? dataSource.keyword
         : keyword
-    this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词
+      this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词
 
-    const queryParams = qs.stringify(
-      Object.assign({}, params, key && { [key]: keyword })
-    )
-    url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}`
-
-    if (type.toUpperCase() === 'POST') {
-      options.body = JSON.stringify(data)
-    }
-    this.setState({
-      fetching: true
-    })
+      const queryParams = qs.stringify(
+        Object.assign({}, params, key && { [key]: keyword })
+      )
+      url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}`
 
-    if (type.toUpperCase() === 'JSONP') {
-      const _o = {
-        jsonpCallback: jsonpCallback,
-        jsonpCallbackFunction: jsonpCallback
+      if (type.toUpperCase() === 'POST') {
+        options.body = JSON.stringify(data)
       }
-      fetchJsonp(url, _o)
-        .then((res) => res.json())
-        .then((json) => {
-          this._setDropdownItems(json, transformResponse)
-        })
-    } else {
-      /* eslint-disable */
-      fetch(url, {
-        method: type,
-        ...options
+      this.setState({
+        fetching: true
       })
-        .then((response) => response.json())
-        .then(
-          (res) => {
-            this._setDropdownItems(res, transformResponse)
-          },
-          (err) => {
-            error && error(err)
-            this.setState({
-              fetching: false
-            })
-          }
-        )
+
+      if (type.toUpperCase() === 'JSONP') {
+        const _o = {
+          jsonpCallback: jsonpCallback,
+          jsonpCallbackFunction: jsonpCallback
+        }
+        fetchJsonp(url, _o)
+          .then((res) => res.json())
+          .then((json) => {
+            this._setDropdownItems(json, transformResponse)
+          })
+      } else {
+        /* eslint-disable */
+        fetch(url, {
+          method: type,
+          ...options
+        })
+          .then((response) => response.json())
+          .then(
+            (res) => {
+              this._setDropdownItems(res, transformResponse)
+            },
+            (err) => {
+              error && error(err)
+              this.setState({
+                fetching: false
+              })
+            }
+          )
+      }
     }
   }
   _setDropdownItems(res, func) {
@@ -400,7 +410,7 @@ class Select extends Component {
       const selectedItems = this.resetSelectedItems(
         this.props.value,
         dropdownItems,
-        true
+        this.state.selectedItems
       )
       this.setState({
         dropdownItems,
@@ -412,20 +422,23 @@ class Select extends Component {
     })
   }
   onFilterItems(keyword) {
+    const { onSearch, dataSource, autoload } = this.props
     this.setState(
       {
         keyword: keyword
       },
       () => this.resetFocusedIndex()
     )
 
-    if (this.props.dataSource && this.props.dataSource.key) {
+    if (dataSource && dataSource.key) {
       if (
-        this.props.autoload ||
+        autoload ||
         keyword.toString().length >= this.state.queryLength
       ) {
         this.remoteSearch(keyword)
       }
+    } else if(onSearch) {
+      this.remoteSearch(keyword)
     }
   }
 

components/upload/UploadDrag.js

@@ -111,7 +111,7 @@ class UploadDrag extends Upload {
             fileList.length > 0 && <li className='hi-upload__item hi-upload__item-tips'>
               <Icon name='comment-circle-o' />
               <span className='hi-upload__tips--exist'>
-                {localeDatas.upload.dragTips}
+                {fileCountLimted ? localeDatas.upload.dragTipsLimited : localeDatas.upload.dragTips}
               </span>
             </li>
           }

components/upload/UploadPhoto.js

@@ -93,21 +93,23 @@ class UploadPhoto extends Upload {
               )
             }
           })}
-          <li className='hi-upload__item hi-upload__item--upload'>
-            <label style={{display: 'block'}}>
-              <input
-                ref={node => {
-                  this.uploadRef = node
-                }}
-                type='file'
-                accept={accept}
-                disabled={(disabled || fileCountLimted) && 'disabled'}
-                onChange={e => this.uploadFiles(e.target.files)}
-                hidden
-              />
-              <Icon name='plus' />
-            </label>
-          </li>
+          {
+            !fileCountLimted && <li className='hi-upload__item hi-upload__item--upload'>
+              <label style={{display: 'block'}}>
+                <input
+                  ref={node => {
+                    this.uploadRef = node
+                  }}
+                  type='file'
+                  accept={accept}
+                  disabled={(disabled || fileCountLimted) && 'disabled'}
+                  onChange={e => this.uploadFiles(e.target.files)}
+                  hidden
+                />
+                <Icon name='plus' />
+              </label>
+            </li>
+          }
         </ul>
         {
           showModal && <Preview