Permalink
Browse files

add onAddImageClick, selectable, onImageClick props for ImagePicker #297

  • Loading branch information...
pingan1927 committed Oct 13, 2016
1 parent 11050de commit bb7e461eea71bb8ffdd2477b1b17a714beb21eb1
@@ -7,6 +7,9 @@ interface ImagePickerPropTypes {
/* web only */
prefixCls?: string;
className?: string;
onImageClick?: (index?: number, files?: Array<{}>) => void;
onAddImageClick?: () => void;
selectable?: boolean;
}

export default ImagePickerPropTypes;
@@ -1,37 +1,22 @@
---
order: 0
title: 图片选择
title: 简单的图片选择组件
-----------

简单的图片选择组件
---------

````jsx
import { ImagePicker, WhiteSpace } from 'antd-mobile';
import { ImagePicker } from 'antd-mobile';

const ImagePickerExample = React.createClass({
getInitialState() {
return {
files: [{
url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
id: '2121',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
id: '2122',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
id: '2123',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
id: '2124',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
id: '2125',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/WCxfiPKoDDHwLBM.png',
id: '2126',
}],
files2: [],
};
},
render() {
@@ -46,19 +31,11 @@ const ImagePickerExample = React.createClass({
files,
});
}}
files={this.state.files}
/>
<WhiteSpace />
<ImagePicker
onChange={(files2, type, index) => {
console.log(files2);
console.log(type);
onImageClick={(index, files) => {
console.log(index);
this.setState({
files2,
});
console.log(files);
}}
files={this.state.files2}
files={this.state.files}
/>
</div>
);
@@ -0,0 +1,54 @@
---
order: 0
title: 自定义图片选择的方法
-----------

````jsx
import { ImagePicker } from 'antd-mobile';

const ImagePickerExample = React.createClass({
getInitialState() {
return {
files: [{
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
id: '2121',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
id: '2122',
}],
};
},
render() {
return (
<div>
<ImagePicker
onChange={(files, type, index) => {
console.log(files);
console.log(type);
console.log(index);
this.setState({
files,
});
}}
onImageClick={(index, files) => {
console.log(index);
console.log(files);
}}
files={this.state.files}
onAddImageClick={() => {
alert(111);
this.setState({
files: this.state.files.concat({
url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
id: '3',
}),
});
}}
/>
</div>
);
},
});

ReactDOM.render(<ImagePickerExample />, mountNode);
````
@@ -0,0 +1,46 @@
---
order: 0
title: 添加按钮不显示
-----------

````jsx
import { ImagePicker } from 'antd-mobile';

const ImagePickerExample = React.createClass({
getInitialState() {
return {
files: [{
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
id: '2121',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
id: '2122',
}],
};
},
render() {
return (
<div>
<ImagePicker
onChange={(files, type, index) => {
console.log(files);
console.log(type);
console.log(index);
this.setState({
files,
});
}}
onImageClick={(index, files) => {
console.log(index);
console.log(files);
}}
files={this.state.files}
selectable={false}
/>
</div>
);
},
});

ReactDOM.render(<ImagePickerExample />, mountNode);
````
@@ -13,8 +13,10 @@ english: ImagePicker

## API

### TabItem
| 成员 | 说明 | 类型 | 可选值 | 默认值 |
|------------|----------------|--------------------|--------------|
| files | 图片文件数组,元素为对象,包含属性url(必选),可能还有id, orientation,以及业务需要的其它属性 | Array | | [] |
| onChange | files值发生变化触发的回调, operationType操作类型有添加(add),移除(remove),如果是移除操作,则第三个参数代表的是移除图片的索引 | Function(files, operationType, index) | | |
| onImageClick(`web only`) | 点击图片触发的回调 | Function(index, files) | | |
| onAddImageClick(`web only`) | 自定义选择图片的方法 | Function | | |
| selectable(`web only`) | 是否显示添加按钮 | boolean | | |
@@ -13,6 +13,8 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
prefixCls: 'am-image-picker',
files: [],
onChange: noop,
onImageClick: noop,
selectable: true,
};

// http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
@@ -72,6 +74,10 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
this.props.onChange(newImages, 'add');
};

onImageClick = (index) => {
this.props.onImageClick(index, this.props.files);
};

onFileChange = () => {
const fileSelectorEl = (this.refs as any).fileSelectorInput;
if (fileSelectorEl.files && fileSelectorEl.files.length) {
@@ -103,7 +109,7 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
};

render() {
const { prefixCls, style, className, files } = this.props;
const { prefixCls, style, className, files, selectable, onAddImageClick } = this.props;
const dpr = window.devicePixelRatio || 1;
const imgItemList = [];
const customWidth = ((document.documentElement.clientWidth - 18 * dpr - 6 * dpr * 3) / 4);
@@ -120,8 +126,15 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
files.forEach((image: any, index: number) => {
imgItemList.push(
<div key={index} className={`${prefixCls}-item`} style={itemStyle}>
<div className={`${prefixCls}-item-remove`} onClick={this.removeImage.bind(this, index)} />
<div className={`${prefixCls}-item-content`} style={{ backgroundImage: `url(${image.url})` }} />
<div
className={`${prefixCls}-item-remove`}
onClick={() => { this.removeImage(index); }}
/>
<div
className={`${prefixCls}-item-content`}
onClick={() => { this.onImageClick(index); }}
style={{ backgroundImage: `url(${image.url})` }}
/>
</div>
);
});
@@ -132,15 +145,23 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
<WingBlank size="md">
<Flex wrap="wrap">
{imgItemList}
<div className={`${prefixCls}-item ${prefixCls}-upload-btn`} style={itemStyle}>
<input
{selectable && <div
className={`${prefixCls}-item ${prefixCls}-upload-btn`}
style={itemStyle}
onClick={() => {
if (onAddImageClick) {
onAddImageClick();
}
}}
>
{!onAddImageClick ? <input
style={itemStyle}
ref="fileSelectorInput"
type="file"
accept="image/jpg,image/jpeg,image/png,image/gif"
onChange={this.onFileChange}
/>
</div>
onChange={() => { this.onFileChange(); }}
/> : null}
</div>}
</Flex>
</WingBlank>
</div>

0 comments on commit bb7e461

Please sign in to comment.