96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import { Map as ImmutableMap } from 'immutable';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export default class PlaceholderMediaGallery extends React.Component {
|
|
|
|
static propTypes = {
|
|
media: ImmutablePropTypes.map.isRequired,
|
|
defaultWidth: PropTypes.number,
|
|
}
|
|
|
|
state = {
|
|
width: this.props.defaultWidth,
|
|
};
|
|
|
|
handleRef = (node) => {
|
|
if (node) {
|
|
this.setState({
|
|
width: node.offsetWidth,
|
|
});
|
|
}
|
|
}
|
|
|
|
getSizeData = size => {
|
|
const { defaultWidth } = this.props;
|
|
const width = this.state.width || defaultWidth;
|
|
|
|
const style = {};
|
|
let itemsDimensions = [];
|
|
|
|
if (size === 1) {
|
|
style.height = width * 9 / 16;
|
|
|
|
itemsDimensions = [
|
|
{ w: '100%', h: '100%' },
|
|
];
|
|
} else if (size === 2) {
|
|
style.height = width / 2;
|
|
|
|
itemsDimensions = [
|
|
{ w: '50%', h: '100%', r: '2px' },
|
|
{ w: '50%', h: '100%', l: '2px' },
|
|
];
|
|
} else if (size === 3) {
|
|
style.height = width;
|
|
|
|
itemsDimensions = [
|
|
{ w: '50%', h: '50%', b: '2px', r: '2px' },
|
|
{ w: '50%', h: '50%', b: '2px', l: '2px' },
|
|
{ w: '100%', h: '50%', t: '2px' },
|
|
];
|
|
} else if (size >= 4) {
|
|
style.height = width;
|
|
|
|
itemsDimensions = [
|
|
{ w: '50%', h: '50%', b: '2px', r: '2px' },
|
|
{ w: '50%', h: '50%', b: '2px', l: '2px' },
|
|
{ w: '50%', h: '50%', t: '2px', r: '2px' },
|
|
{ w: '50%', h: '50%', t: '2px', l: '2px' },
|
|
];
|
|
}
|
|
|
|
return ImmutableMap({
|
|
style,
|
|
itemsDimensions,
|
|
size,
|
|
width,
|
|
});
|
|
}
|
|
|
|
renderItem = (dimensions, i) => {
|
|
const width = dimensions.w;
|
|
const height = dimensions.h;
|
|
const top = dimensions.t || 'auto';
|
|
const right = dimensions.r || 'auto';
|
|
const bottom = dimensions.b || 'auto';
|
|
const left = dimensions.l || 'auto';
|
|
const float = dimensions.float || 'left';
|
|
const position = dimensions.pos || 'relative';
|
|
|
|
return <div key={i} className='media-gallery__item' style={{ position, float, left, top, right, bottom, height, width }} />;
|
|
}
|
|
|
|
render() {
|
|
const { media } = this.props;
|
|
const sizeData = this.getSizeData(media.size);
|
|
|
|
return (
|
|
<div className='media-gallery media-gallery--placeholder' style={sizeData.get('style')} ref={this.handleRef}>
|
|
{media.take(4).map((_, i) => this.renderItem(sizeData.get('itemsDimensions')[i], i))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|