Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:(imagePicker) add config disableDelete #3185

Merged
merged 4 commits into from
Apr 28, 2019
Merged

feat:(imagePicker) add config disableDelete #3185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8185e19
feat:(imagePicker) add config disableDelete
Apr 22, 2019
0b276d4
fix:增加单测
likezero Apr 22, 2019
81119ed
Merge branch 'master' into add-delete
likezero Apr 24, 2019
9c409f6
chore:优化说明文案
likezero Apr 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/image-picker/PropsType.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export interface ImagePickerPropTypes {
accept?: string;
length?: number | string;
capture?: any; // 本应该是boolean | string; 但是因为@types/react中interface InputHTMLAttributes<T>定义问题，写成any跳过ts检查
disableDelete?: boolean, // 是否隐藏删除按钮，默认false
}
10 changes: 0 additions & 10 deletions components/image-picker/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,11 +268,6 @@ exports[`renders ./components/image-picker/demo/length.md correctly 1`] = `
<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"
Expand All @@ -287,11 +282,6 @@ exports[`renders ./components/image-picker/demo/length.md correctly 1`] = `
<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"
Expand Down
20 changes: 20 additions & 0 deletions components/image-picker/__tests__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,26 @@ describe('ImagePicker', () => {
expect(wrapper.find('.am-image-picker-upload-btn').length).toBe(1);
});

it('disableDelete', () => {
const files = [{
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
id: '2121',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
id: '2122',
}, {
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
id: '2123',
}];
const wrapperCant = mount(
<ImagePicker
files={files}
disableDelete
/>,
);
// have no delect icon
expect(wrapperCant.find('.am-image-picker-item-remove').length).toBe(0);
});
it('renders length', () => {
const files = [{
url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
Expand Down
1 change: 1 addition & 0 deletions components/image-picker/demo/length.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class ImagePickerExample extends React.Component {
onImageClick={(index, fs) => console.log(index, fs)}
selectable={files.length < 7}
onAddImageClick={this.onAddImageClick}
disableDelete
/>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion components/image-picker/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,5 @@ Properties | Descrition | Type | Default
| multiple | whether support choose multi images at once | boolean | false |
| accept | File type accept | string | image/* |
| length | Number of images in line | string \| number | 4 |
| capture | Image capture setting, please refer to the description of capture in [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input) | boolean \| string | false |
| capture | Image capture setting, please refer to the description of capture in [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input) | boolean \| string | false |
| disableDelete | whether to hide delete icon | boolean | false |
6 changes: 4 additions & 2 deletions components/image-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default class ImagePicker extends React.Component<
multiple: false,
accept: 'image/*',
length: 4,
disableDelete: false,
};

fileSelectorInput: HTMLInputElement | null;
Expand Down Expand Up @@ -173,6 +174,7 @@ export default class ImagePicker extends React.Component<
multiple,
accept,
capture,
disableDelete,
} = this.props;

const imgItemList: any[] = [];
Expand All @@ -196,15 +198,15 @@ export default class ImagePicker extends React.Component<
style={itemStyle}
>
<div key={index} className={`${prefixCls}-item`}>
<div
{ !disableDelete && <div
className={`${prefixCls}-item-remove`}
role="button"
aria-label="Click and Remove this image"
// tslint:disable-next-line:jsx-no-multiline-js
onClick={() => {
this.removeImage(index);
}}
/>
/>}
<div
className={`${prefixCls}-item-content`}
role="button"
Expand Down
3 changes: 2 additions & 1 deletion components/image-picker/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,5 @@ subtitle: 图片选择器
| multiple | 是否支持多选 | boolean | false |
| accept | 图片类型 | string | image/* |
| length | 单行的图片数量 | string \| number | 4 |
| capture | 图片捕获设置, 具体请参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)中关于capture的说明 | boolean \| string | false |
| capture | 图片捕获设置, 具体请参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)中关于capture的说明 | boolean \| string | false |
| disableDelete | 是否隐藏删除按钮 | boolean | false |