Image picker feature, add file accept (ant-design#2269)

* add file accept in image-picker * add file accept in image-picker * add file accept in image-picker
lixiaoyang1992 · Apr 26, 2018 · d43e38f · d43e38f
1 parent 9645e86
commit d43e38f
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 2 deletions.
diff --git a/components/image-picker/PropsType.tsx b/components/image-picker/PropsType.tsx
@@ -9,4 +9,5 @@ export interface ImagePickerPropTypes {
   onFail?: (msg: string) => void;
   selectable?: boolean;
   multiple?: boolean;
+  accept?: string;
 }
diff --git a/components/image-picker/__tests__/__snapshots__/demo.test.js.snap b/components/image-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -1,5 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/image-picker/demo/accept.md correctly 1`] = `
+<div>
+  <div
+    class="am-image-picker"
+  >
+    <div
+      class="am-image-picker-list"
+      role="group"
+    >
+      <div
+        class="am-flexbox am-flexbox-align-center"
+      >
+        <div
+          class="am-flexbox-item"
+        >
+          <div
+            class="am-image-picker-item"
+          >
+            <div
+              aria-label="Click and Remove this image"
+              class="am-image-picker-item-remove"
+              role="button"
+            />
+            <div
+              aria-label="Image can be clicked"
+              class="am-image-picker-item-content"
+              role="button"
+              style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);transform:rotate(0deg)"
+            />
+          </div>
+        </div>
+        <div
+          class="am-flexbox-item"
+        >
+          <div
+            class="am-image-picker-item"
+          >
+            <div
+              aria-label="Click and Remove this image"
+              class="am-image-picker-item-remove"
+              role="button"
+            />
+            <div
+              aria-label="Image can be clicked"
+              class="am-image-picker-item-content"
+              role="button"
+              style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);transform:rotate(0deg)"
+            />
+          </div>
+        </div>
+        <div
+          class="am-flexbox-item"
+        >
+          <div
+            aria-label="Choose and add image"
+            class="am-image-picker-item am-image-picker-upload-btn"
+            role="button"
+          >
+            <input
+              accept="image/gif,image/jpeg,image/jpg,image/png"
+              type="file"
+            />
+          </div>
+        </div>
+        <div
+          class="am-flexbox-item"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/image-picker/demo/basic.md correctly 1`] = `
 <div
   class="am-wingblank am-wingblank-lg"

diff --git a/components/image-picker/demo/accept.md b/components/image-picker/demo/accept.md
@@ -0,0 +1,47 @@
+---
+order: 2
+title:
+  zh-CN: 自定义文件类型
+  en-US: 'Cutom file accept'
+---
+
+````jsx
+import { ImagePicker } from 'antd-mobile';
+
+const data = [{
+  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
+  id: '2121',
+}, {
+  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
+  id: '2122',
+}];
+
+class ImagePickerExample extends React.Component {
+  state = {
+    files: data,
+  }
+  onChange = (files, type, index) => {
+    console.log(files, type, index);
+    this.setState({
+      files,
+    });
+  }
+
+  render() {
+    const { files } = this.state;
+    return (
+      <div>
+        <ImagePicker
+          files={files}
+          onChange={this.onChange}
+          onImageClick={(index, fs) => console.log(index, fs)}
+          selectable={files.length < 5}
+          accept="image/gif,image/jpeg,image/jpg,image/png"
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<ImagePickerExample />, mountNode);
+````
diff --git a/components/image-picker/index.en-US.md b/components/image-picker/index.en-US.md
@@ -20,5 +20,6 @@ Properties | Descrition | Type | Default
 | onFail | Callback is called when canceled image selection(`RN`) or failed selection(`WEB`)  | (msg: string): void |   |
 | selectable | whether to show selector button  | boolean |  true |
 | multiple| whether support choose multi images at once  | boolean |  false |
+| accept| File type accept  | string |  image/* |
 
 > Note: Only return assets-library type for RN, if you want to upload files, see https://github.com/facebook/react-native/issues/201
diff --git a/components/image-picker/index.tsx b/components/image-picker/index.tsx
@@ -22,6 +22,7 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
     onFail: noop,
     selectable: true,
     multiple: false,
+    accept: 'image/*',
   };
 
   fileSelectorInput: any;
@@ -147,7 +148,7 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
   }
   render() {
     const {
-      prefixCls, style, className, files = [], selectable, onAddImageClick, multiple,
+      prefixCls, style, className, files = [], selectable, onAddImageClick, multiple, accept,
     } = this.props;
 
     const imgItemList: any[] = [];
@@ -192,7 +193,7 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
             <input
               ref={(input) => { this.fileSelectorInput = input; }}
               type="file"
-              accept="image/*"
+              accept={accept}
               onChange={() => { this.onFileChange(); }}
               multiple={multiple}
             />

diff --git a/components/image-picker/index.zh-CN.md b/components/image-picker/index.zh-CN.md
@@ -21,6 +21,7 @@ subtitle: 图片选择器
 | onFail | 选择失败(`WEB`)或者取消回调(`RN`)  | (msg: string): void |   |
 | selectable| 是否显示添加按钮  | boolean |  true |
 | multiple| 是否支持多选  | boolean |  false |
+| accept| 图片类型  | string |  image/* |
 
 
 > 注: RN 版本回传 assets-library (性能考虑)，需要使用 native 模块进行上传，可参考 https://github.com/facebook/react-native/issues/201