PendingStatus: display placeholder attachments See merge request soapbox-pub/soapbox-fe!922merge-requests/924/merge
commit
280210ebe5
@ -0,0 +1,96 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in new issue