feat(Upload): support single select

close #225

Author: ZxBing0066

src/components/Upload/Upload.jsx

@@ -126,6 +126,27 @@ class Upload extends PureComponent {
         /* eslint-enable no-console */
     };
 
+    /** 单选 */
+    onSingleSelect = files => {
+        const { onAdd, onRemove } = this.props;
+        if (!files.length) return;
+
+        let fileList = this.getFileList();
+        if (fileList.length) {
+            const file = fileList[0];
+            if (onRemove(file, 0) === false) {
+                return;
+            }
+        }
+
+        fileList = [files[0]];
+        if (onAdd(fileList) === false) {
+            return;
+        }
+
+        this.onChange(fileList, () => this.handleFilesUpload(fileList));
+        return;
+    };
     /** 处理添加文件 */
     onAdd = files => {
         const { maxCount, onAdd } = this.props;
@@ -216,7 +237,7 @@ class Upload extends PureComponent {
         return (
             <div {...rest}>
                 <Selector
-                    onSelect={this.onAdd}
+                    onSelect={multiple ? this.onAdd : this.onSingleSelect}
                     onError={this.onError}
                     disabled={disabled}
                     multiple={multiple}

src/components/Upload/Upload.md

@@ -3,6 +3,8 @@
 *   传入其它原生的 props 会自动附加到最外层的 div 上，如 style、className 等
 *   是否受控由一开始是否传入 fileList 决定，如果想要受控但是一开始未传入可能会导致逻辑性的错误。受控情况下需要自行处理所有数据。
 *   选择文件的事件触发顺序为 打开文件选择框 - 选择文件 - 检查文件类型（有错误会中断，触发 onError） - 检查文件大小（有错误会中断，触发 onError） - 调用 onAdd（没有则跳过，返回 false 则中断） - 检查文件数量（有错误会中断，触发 onError） - 更新文件列表并触发 onChange - 有 handleUpload 时开始更新文件 status 为 uploading 并开始上传文件，触发 onChange - 文件上传成功或失败时更新文件 status 并触发 onChange
+*   单选时选中文件将会直接将已有文件替换
+*   为单选时在调用 onAdd 之前如已存在选择文件将会先调用 onRemove 检查可否移除已有文件，然后调用 onAdd，并不会触发文件数量错误
 
 ### 演示
 
@@ -21,6 +23,11 @@
 ```js {"codepath": "multiple.jsx"}
 ```
 
+*   支持单选
+
+```js {"codepath": "single.jsx"}
+```
+
 *   限制文件数量
 
 ```js {"codepath": "maxCount.jsx"}

src/components/Upload/__demo__/accept.jsx

@@ -7,6 +7,7 @@ const Demo = () => (
         onChange={fileList => console.log(fileList)}
         onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
         accept="image/* , .pdf"
+        multiple
     />
 );
 // demo end

src/components/Upload/__demo__/base.jsx

@@ -6,6 +6,7 @@ const Demo = () => (
     <Upload
         onChange={fileList => console.log(fileList)}
         onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
+        multiple
     />
 );
 // demo end

src/components/Upload/__demo__/controlled.jsx

@@ -42,6 +42,7 @@ class Demo extends React.Component {
                         );
                     }
                 }}
+                multiple
                 onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
                 fileList={state.fileList}
             />

src/components/Upload/__demo__/disabled.jsx

@@ -7,6 +7,7 @@ const Demo = () => (
         onChange={fileList => console.log(fileList)}
         onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
         disabled
+        multiple
     />
 );
 // demo end

src/components/Upload/__demo__/listType.jsx

@@ -7,6 +7,7 @@ const Demo = () => (
         onChange={fileList => console.log(fileList)}
         onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
         listType="none"
+        multiple
     />
 );
 // demo end

src/components/Upload/__demo__/maxSize.jsx

@@ -7,6 +7,7 @@ const Demo = () => (
         onChange={fileList => console.log(fileList)}
         onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
         maxSize={1024 * 1024}
+        multiple
     />
 );
 // demo end

src/components/Upload/__demo__/readFile.jsx

@@ -19,6 +19,7 @@ const Demo = () => (
         onChange={fileList => console.log(fileList)}
         onAdd={handleOnAdd}
         onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
+        multiple
     />
 );
 // demo end

src/components/Upload/__demo__/selector.jsx

@@ -8,6 +8,7 @@ const Demo = () => (
             onChange={fileList => console.log(fileList)}
             onError={({ message, name }) => alert(`there is an error of ${name}: ${message}`)}
             selector={<button>点我点我选</button>}
+            multiple
         />
     </div>
 );