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