Skip to content

Commit

Permalink
refactor(ImagePicker): remove clientWidth to support ssr (ant-design#…
Browse files Browse the repository at this point in the history 
…1122)

* refactor(ImagePicker): remove clientWidth to support ssr

* fix style
  • Loading branch information
@paranoidjk @pingan1927
paranoidjk authored and pingan1927 committed Apr 11, 2017
1 parent 15ae2c6 commit 6bf4abb
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 89 deletions.
118 changes: 70 additions & 48 deletions components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,53 @@ exports[`renders ./components/image-picker/demo/basic.md correctly 1`] = `
class="am-wingblank am-wingblank-md"
>
<div
class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
class="am-flexbox am-flexbox-align-middle"
>
<div
class="am-image-picker-item"
style="width:-9px;height:-9px;"
class="am-flexbox-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);transform:rotate(0deg);"
/>
class="am-image-picker-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);transform:rotate(0deg);"
/>
</div>
</div>
<div
class="am-image-picker-item"
style="width:-9px;height:-9px;"
class="am-flexbox-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);transform:rotate(0deg);"
/>
class="am-image-picker-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);transform:rotate(0deg);"
/>
</div>
</div>
<div
class="am-image-picker-item am-image-picker-upload-btn"
style="width:-9px;height:-9px;"
class="am-flexbox-item"
>
<input
accept="image/jpg,image/jpeg,image/png,image/gif"
style="width:-9px;height:-9px;"
type="file"
/>
<div
class="am-image-picker-item am-image-picker-upload-btn"
>
<input
accept="image/jpg,image/jpeg,image/png,image/gif"
type="file"
/>
</div>
</div>
<div
class="am-flexbox-item"
/>
</div>
</div>
</div>
Expand All @@ -67,42 +78,53 @@ exports[`renders ./components/image-picker/demo/custom.md correctly 1`] = `
class="am-wingblank am-wingblank-md"
>
<div
class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
class="am-flexbox am-flexbox-align-middle"
>
<div
class="am-image-picker-item"
style="width:-9px;height:-9px;"
class="am-flexbox-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);transform:rotate(0deg);"
/>
class="am-image-picker-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg);transform:rotate(0deg);"
/>
</div>
</div>
<div
class="am-image-picker-item"
style="width:-9px;height:-9px;"
class="am-flexbox-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);transform:rotate(0deg);"
/>
class="am-image-picker-item"
>
<div
class="am-image-picker-item-remove"
/>
<div
class="am-image-picker-item-content"
style="background-image:url(https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg);transform:rotate(0deg);"
/>
</div>
</div>
<div
class="am-image-picker-item am-image-picker-upload-btn"
style="width:-9px;height:-9px;"
class="am-flexbox-item"
>
<input
accept="image/jpg,image/jpeg,image/png,image/gif"
style="width:-9px;height:-9px;"
type="file"
/>
<div
class="am-image-picker-item am-image-picker-upload-btn"
>
<input
accept="image/jpg,image/jpeg,image/png,image/gif"
type="file"
/>
</div>
</div>
<div
class="am-flexbox-item"
/>
</div>
</div>
</div>
Expand Down
78 changes: 44 additions & 34 deletions components/image-picker/index.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Toast from '../toast';
import { ImagePickerPropTypes } from './PropsType';
import Touchable from 'rc-touchable';

const Item = Flex.Item;
function noop() { }

export default class ImagePicker extends React.Component<ImagePickerPropTypes, any> {
Expand Down Expand Up @@ -135,65 +136,74 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
render() {
const { prefixCls, style, className, files = [],
selectable, onAddImageClick } = this.props;
const dpr = window.devicePixelRatio || 1;
const imgItemList: any[] = [];
const customWidth = ((document.documentElement.clientWidth - 18 * dpr - 6 * dpr * 3) / 4);

const wrapCls = classNames({
[`${prefixCls}`]: true,
[className as string]: className,
});

const itemStyle = {
width: `${customWidth}px`,
height: `${customWidth}px`,
};
files.forEach((image: any, index: number) => {
const imgStyle = {
backgroundImage: `url(${image.url})`,
transform: `rotate(${this.getRotation(image.orientation)}deg)`,
};
imgItemList.push(
<div key={index} className={`${prefixCls}-item`} style={itemStyle}>
<div
className={`${prefixCls}-item-remove`}
onClick={() => { this.removeImage(index); }}
/>
<div
className={`${prefixCls}-item-content`}
onClick={() => { this.onImageClick(index); }}
style={imgStyle}
/>
</div>,
<Item>
<div key={index} className={`${prefixCls}-item`} >
<div
className={`${prefixCls}-item-remove`}
onClick={() => { this.removeImage(index); }}
/>
<div
className={`${prefixCls}-item-content`}
onClick={() => { this.onImageClick(index); }}
style={imgStyle}
/>
</div>
</Item>,
);
});

const selectEl = (
<Touchable activeClassName={`${prefixCls}-upload-btn-active`}>
<div
className={`${prefixCls}-item ${prefixCls}-upload-btn`}
style={itemStyle}
onClick={onAddImageClick}
>
<input
style={itemStyle}
ref="fileSelectorInput"
type="file"
accept="image/jpg,image/jpeg,image/png,image/gif"
onChange={() => { this.onFileChange(); }}
/>
</div>
<Item>
<div
className={`${prefixCls}-item ${prefixCls}-upload-btn`}
onClick={onAddImageClick}
>
<input
ref="fileSelectorInput"
type="file"
accept="image/jpg,image/jpeg,image/png,image/gif"
onChange={() => { this.onFileChange(); }}
/>
</div>
</Item>
</Touchable>
);

let allEl = selectable ? imgItemList.concat([selectEl]) : imgItemList;
const length = allEl.length;
if (length !== 0 && length % 4 !== 0) {
const fillBlankEl = new Array(4 - length % 4).fill(<Item/>);
allEl = allEl.concat(fillBlankEl);
}
const flexEl: Array<Array<any>> = [];
for (let i = 0; i < allEl.length / 4; i++) {
const rowEl = allEl.slice(i * 4, i * 4 + 4);
flexEl.push(rowEl);
}
const renderEl = flexEl.map((item) => (
<Flex>
{item}
</Flex>
));
return (
<div className={wrapCls} style={style}>
<div className={`${prefixCls}-list`}>
<WingBlank size="md">
<Flex wrap="wrap">
{imgItemList}
{selectable && selectEl}
</Flex>
{renderEl}
</WingBlank>
</div>
</div>
Expand Down
29 changes: 22 additions & 7 deletions components/image-picker/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,31 @@
@imagePickerPrefixCls: am-image-picker;

.@{imagePickerPrefixCls} {
& &-list {
&-list {
padding-top: @v-spacing-md;
margin-bottom: @h-spacing-lg;
.@{imagePickerPrefixCls}-item {
position: relative;
margin-right: @h-spacing-sm;
margin-bottom: @v-spacing-sm;
&:nth-child(4n) {
margin-right: 0;
.am-flexbox {
.am-flexbox-item {
position: relative;
margin-right: @h-spacing-sm;
margin-left: 0;
&:after {
display: block;
content: ' ';
padding-bottom: 100%;
}
&:nth-child(4n) {
margin-right: 0;
}
}
margin-bottom: @v-spacing-sm;
}
.@{imagePickerPrefixCls}-item {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
.@{imagePickerPrefixCls}-item-remove {
width: @icon-size-xxs;
height: @icon-size-xxs;
Expand Down

0 comments on commit 6bf4abb

Please sign in to comment.