Change media modals look in web UI

Port 1e89e2ed98 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2020-11-27 03:24:11 +01:00
committed by Claire
parent d30dd5b1db
commit 50b100df00
13 changed files with 332 additions and 143 deletions

View File

@ -55,6 +55,10 @@ export default class ModalRoot extends React.PureComponent {
onClose: PropTypes.func.isRequired,
};
state = {
backgroundColor: null,
};
getSnapshotBeforeUpdate () {
return { visible: !!this.props.type };
}
@ -69,6 +73,10 @@ export default class ModalRoot extends React.PureComponent {
}
}
setBackgroundColor = color => {
this.setState({ backgroundColor: color });
}
renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
}
@ -81,13 +89,14 @@ export default class ModalRoot extends React.PureComponent {
render () {
const { type, props, onClose } = this.props;
const { backgroundColor } = this.state;
const visible = !!type;
return (
<Base onClose={onClose} noEsc={props ? props.noEsc : false}>
<Base backgroundColor={backgroundColor} onClose={onClose} noEsc={props ? props.noEsc : false}>
{visible && (
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
{(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={onClose} />}
</BundleContainer>
)}
</Base>