Merge pull request #88 from XiaoMi/hotfix/1.3.2

Hotfix/1.3.2

components/form/item.js

@@ -162,7 +162,7 @@ class FormItem extends Component {
         }
         <div className={'hi-form-item' + '__content'} style={{ 'marginLeft': this.labelWidth }}>
           {
-            Array.isArray(children)
+            (Array.isArray(children) || !children)
               ? children
               : React.cloneElement(children, {
                 onChange: (...args) => {

components/select/Select.js

@@ -23,14 +23,16 @@ class Select extends Component {
       PropTypes.bool,
       PropTypes.number
     ]),
+    showCheckAll: PropTypes.bool,
     autoload: PropTypes.bool,
     searchable: PropTypes.bool,
     clearable: PropTypes.bool,
     disabled: PropTypes.bool,
     placeholder: PropTypes.string,
     noFoundTip: PropTypes.string,
     style: PropTypes.object,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    dropdownRender: PropTypes.func
   }
 
   static defaultProps = {
@@ -41,7 +43,8 @@ class Select extends Component {
     value: '',
     autoload: false,
     placeholder: '请选择',
-    noFoundTip: '无内容'
+    noFoundTip: '无内容',
+    showCheckAll: false
   }
 
   constructor (props) {
@@ -102,7 +105,7 @@ class Select extends Component {
 
   componentWillReceiveProps (props) {
     if (!shallowEqual(props.value, this.props.value)) {
-      const selectedItems = this.resetSelectedItems(props.value, props.list)
+      const selectedItems = this.resetSelectedItems(props.value, this.state.dropdownItems) // 异步获取时会从内部改变dropdownItems，所以不能从list取
 
       this.setState({
         selectedItems
@@ -193,6 +196,30 @@ class Select extends Component {
     this.props.onChange && this.props.onChange(selectedItems)
   }
 
+  checkAll (e) { // 全选
+    e && e.stopPropagation()
+
+    const {
+      dropdownItems
+    } = this.state
+    let selectedItems = this.state.selectedItems.concat()
+
+    dropdownItems.forEach(item => {
+      if (!item.disabled && this.matchFilter(item)) {
+        let itemIndex = selectedItems.findIndex((sItem) => {
+          return sItem.id === item.id
+        })
+        itemIndex === -1 && selectedItems.push(item)
+      }
+    })
+    this.setState({
+      selectedItems
+    }, () => {
+      this.selectInput.focus()
+      this.onChange()
+    })
+  }
+
   onClickOption (item, index) {
     if (!item || item.disabled) return
 
@@ -435,14 +462,16 @@ class Select extends Component {
   render () {
     const {
       mode,
+      showCheckAll,
       className,
       disabled,
       clearable,
       style,
       children,
       noFoundTip,
       optionWidth,
-      selectedShowMode
+      selectedShowMode,
+      dropdownRender
     } = this.props
     const placeholder = this.localeDatasProps('placeholder')
     const {
@@ -493,13 +522,16 @@ class Select extends Component {
           <SelectDropdown
             noFoundTip={noFoundTip}
             mode={mode}
+            showCheckAll={showCheckAll}
+            checkAll={this.checkAll.bind(this)}
             loading={fetching}
             focusedIndex={focusedIndex}
             matchFilter={this.matchFilter.bind(this)}
             setFocusedIndex={this.setFocusedIndex.bind(this)}
             optionWidth={optionWidth}
             dropdownItems={dropdownItems}
             selectedItems={selectedItems}
+            dropdownRender={dropdownRender}
             onClickOption={this.onClickOption.bind(this)}
           />
         </Popper>

components/select/SelectDropdown.js

@@ -7,9 +7,7 @@ import Loading from '../loading'
 
 export default class SelectDropdown extends Component {
   onClickOption (e, item, index) {
-    if (e) {
-      e.stopPropagation()
-    }
+    e && e.stopPropagation()
     if (item.disabled) {
       return
     }
@@ -30,6 +28,9 @@ export default class SelectDropdown extends Component {
     if (item.children) {
       return item.children
     }
+    if (this.props.dropdownRender) {
+      return this.props.dropdownRender(item, isSelected)
+    }
     return (
       <React.Fragment>
         {
@@ -59,12 +60,16 @@ export default class SelectDropdown extends Component {
       matchFilter,
       noFoundTip,
       loading,
-      optionWidth
+      optionWidth,
+      showCheckAll,
+      checkAll,
+      dropdownRender
     } = this.props
     let matched = 0
     const style = optionWidth && {
       width: optionWidth
     }
+
     return (
       <div className='hi-select__dropdown' onClick={this.props.onClick} style={style}>
         {
@@ -85,7 +90,7 @@ export default class SelectDropdown extends Component {
                   const isDisabled = item.disabled
                   return (
                     <li
-                      className={classNames('hi-select__dropdown--item', {'is-active': isSelected, 'is-disabled': isDisabled, 'hi-select__dropdown--item-default': !item.children})}
+                      className={classNames('hi-select__dropdown--item', {'is-active': isSelected, 'is-disabled': isDisabled, 'hi-select__dropdown--item-default': !item.children && !dropdownRender})}
                       onClick={e => this.onClickOption(e, item, index)}
                       key={index}
                       data-focused={focusedIndex === index}
@@ -110,6 +115,12 @@ export default class SelectDropdown extends Component {
             }
           </ul>
         }
+        {
+          mode === 'multiple' && showCheckAll &&
+          <div className='hi-select__dropdown-check-all' onClick={checkAll}>
+            全选
+          </div>
+        }
       </div>
     )
   }

components/select/style/select-dropdown.scss

@@ -27,6 +27,13 @@
     // margin-right: -17px;
   }
 
+  &-check-all {
+    padding: 8px 12px;
+    font-size: 12px;
+    color: #4284f5;
+    cursor: pointer;
+  }
+
   &--item {
     flex: none;
     display: block;

components/table/index.js

@@ -868,19 +868,6 @@ class Table extends Component {
   }
 
   shouldComponentUpdate (nextProps, nextState, nextContext) {
-    let preData = nextProps.data
-    let nextData = nextState.dataSource
-    if (nextData.length === preData.length) {
-      let bool = false
-      preData.forEach((p, i) => {
-        for (let key in p) {
-          if (p[key] !== nextData[i][key]) {
-            bool = true
-          }
-        }
-      })
-      return bool
-    }
     return true
   }
 

components/upload/Upload.js

@@ -77,6 +77,7 @@ export default class Upload extends Component {
 
     switch (ext) {
       case 'jpg':
+      case 'jpeg':
       case 'gif':
       case 'png':
       case 'bmp':
@@ -205,6 +206,11 @@ export default class Upload extends Component {
       headers,
       uploadAction
     } = this.props
+    const onerror = () => {
+      file.uploadState = 'error'
+      this.setState({ fileList })
+      this.onUpload(file, fileList, {})
+    }
 
     if (file.fileType === 'img') { // 用来图片预览
       if (dataUrl) {
@@ -243,13 +249,13 @@ export default class Upload extends Component {
       if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           this.onUpload(file, fileList, JSON.parse(xhr.response))
+        } else {
+          onerror()
         }
       }
     }
     xhr.upload.onerror = () => {
-      file.uploadState = 'error'
-      this.setState({ fileList })
-      this.onUpload(file, fileList, {})
+      onerror()
     }
     xhr.upload.onprogress = event => {
       var e = event || window.event

docs/zh-CN/select.md

@@ -113,22 +113,20 @@ render () {
 				placeholder='请选择种类'
 				style={{width: '200px'}}
 				value={'3'}
+				list={this.state.singleList}
 				searchable={true}
 				onChange={(item) => {
 						console.log('单选结果', item)
 				}}
-			>
-				{
-	        this.state.singleList.map(item => {
-	          return (
-	            <Select.Option key={item.id} name={item.name} id={item.id} disabled={item.disabled}>
-	              <span style={{float: 'left'}}>{item.name}</span>
-	              <span style={{float: 'right', color: '#999', fontSize: 14}}>{item.id}</span>
-	            </Select.Option>
-	          )
-	        })
-	      }
-			</Select>
+				dropdownRender={(item, isSelected) => {
+					return (
+						<React.Fragment>
+							<span style={{float: 'left'}}>{item.name}</span>
+							<span style={{float: 'right', color: '#999', fontSize: 14}}>{item.id}</span>
+						</React.Fragment>
+					)
+				}}
+			/>
 		</div>
 	)
 }
@@ -204,10 +202,11 @@ render () {
 					mode='multiple'
 					style={{width: '300px'}}
 					list={this.state.multipleList}
-					value={['4', '5']}
+					value={['5']}
 					searchable={true}
 					placeholder='请选择...'
 					noFoundTip='无匹配数据'
+					showCheckAll={true}
 					onChange={(item) => {
 							console.log('多选结果', item)
 					}}
@@ -281,6 +280,7 @@ render () {
 | list | 下拉框选项，一般为 {name: '', id: ''} 形式。可以加入 'disabled' 属性，表示是否禁止选择 | array | - | - |
 | origin | 异步选择配置，详见下表 | object | - | - |
 | value | 默认值被选中项，值与被选中的id相同，多个以,分割或者传递数组| string,number,array | - | - |
+| showCheckAll | 是否显示全选，只对多选生效 | bool | true, false | false |
 | searchable | 是否可以筛选 | bool | true, false | false |
 | clearable | 是否可以清空 | bool | true, false | true |
 | autoload | origin从远端获取数据，初始时是否自动加载 | bool | true, false | false |
@@ -304,6 +304,7 @@ render () {
 
 
 ### Select.Option Attributes
+**已废弃，自定义模板使用dropdownRender**
 
 | 参数 | 说明 | 类型 | 可选值 |默认值 |
 | -------- | ----- | ---- | ---- | ---- |

docs/zh-CN/upload.md

@@ -19,7 +19,7 @@ render () {
 		<div>
 			<Upload
 				type="normal"
-				uploadAction= "http://10.236.91.199:3005/upload"
+				uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 				headers={{name: 'mi'}}
 				buttonText="上传文件"
 				param={param}
@@ -54,7 +54,7 @@ render () {
 		<div>
 			<Upload
 				type="normal"
-				uploadAction= "http://10.236.91.199:3005/upload"
+				uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 				buttonText="上传文件"
 				param={param}
 				name={'files[]'}
@@ -94,7 +94,7 @@ render () {
 	return (
 		<Upload
 			type="normal"
-			uploadAction= "http://10.236.91.199:3005/upload"
+			uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 			buttonText="上传文件"
 			param={{id:'uid',channel:'youpin'}}
 			disabled={true}
@@ -116,7 +116,7 @@ render () {
 	return (
 		<Upload
 			type="drag"
-			uploadAction= "http://10.236.91.199:3005/upload"
+			uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 			headers={{name: 'mi'}}
 			onChange = {(file, fileList, response) => {
 				console.log('upload callback', file, fileList, response)
@@ -142,7 +142,7 @@ render () {
 	return (
 		<Upload
 			type="photo"
-			uploadAction= "http://10.236.91.199:3005/upload"
+			uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 			onChange = {(file, fileList, response) => {
 				file.id = 'file唯一标识'
 				console.log('upload callback', file, fileList, response)
@@ -187,7 +187,7 @@ render () {
 			type="avatar"
 			width={180}
 			height={180}
-			uploadAction= "http://10.236.91.199:3005/upload"
+			uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 			headers={{name: 'mi'}}
 			param={{id:'uid',channel:'youpin'}}
 			onChange = {(file, fileList, response) => {
@@ -212,7 +212,7 @@ render () {
 	return (
 		<Upload
 			type="pictureCard"
-			uploadAction= "http://10.236.91.199:3005/upload"
+			uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload"
 			headers={{name: 'mi'}}
 			onChange = {(file, fileList, response) => {
 				console.log('upload callback', file, fileList, response)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "1.3.2",
+  "version": "1.3.3-beta.1",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",