Large update for all components
reorganization, linting, updating file imports, consolidation warning: there will be errors in this commit todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*
This commit is contained in:
mgabdev
@@ -1,137 +1 @@
|
||||
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { cancelReplyCompose } from '../../actions/compose';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
const messages = defineMessages({
|
||||
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
composeText: state.getIn(['compose', 'text']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenModal(type, opts) {
|
||||
dispatch(openModal(type, opts));
|
||||
},
|
||||
onCancelReplyCompose() {
|
||||
dispatch(cancelReplyCompose());
|
||||
},
|
||||
});
|
||||
|
||||
class ModalRoot extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onOpenModal: PropTypes.func.isRequired,
|
||||
onCancelReplyCompose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
composeText: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
};
|
||||
|
||||
state = {
|
||||
revealed: !!this.props.children,
|
||||
};
|
||||
|
||||
activeElement = this.state.revealed ? document.activeElement : null;
|
||||
|
||||
handleKeyUp = (e) => {
|
||||
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
||||
&& !!this.props.children) {
|
||||
this.handleOnClose();
|
||||
}
|
||||
}
|
||||
|
||||
handleOnClose = () => {
|
||||
const { onOpenModal, composeText, onClose, intl, type, onCancelReplyCompose } = this.props;
|
||||
|
||||
if (composeText && type === 'COMPOSE') {
|
||||
onOpenModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
|
||||
confirm: intl.formatMessage(messages.confirm),
|
||||
onConfirm: () => onCancelReplyCompose(),
|
||||
onCancel: () => onOpenModal('COMPOSE'),
|
||||
});
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('keyup', this.handleKeyUp, false);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!!nextProps.children && !this.props.children) {
|
||||
this.activeElement = document.activeElement;
|
||||
|
||||
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
|
||||
} else if (!nextProps.children) {
|
||||
this.setState({ revealed: false });
|
||||
}
|
||||
|
||||
if (!nextProps.children && !!this.props.children) {
|
||||
this.activeElement.focus();
|
||||
this.activeElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
if (!this.props.children && !!prevProps.children) {
|
||||
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
|
||||
}
|
||||
|
||||
if (this.props.children) {
|
||||
requestAnimationFrame(() => {
|
||||
this.setState({ revealed: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('keyup', this.handleKeyUp);
|
||||
}
|
||||
|
||||
getSiblings = () => {
|
||||
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
|
||||
}
|
||||
|
||||
setRef = ref => {
|
||||
this.node = ref;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
const { revealed } = this.state;
|
||||
const visible = !!children;
|
||||
|
||||
if (!visible) {
|
||||
return (
|
||||
<div className='modal-root modal-root--hidden' ref={this.setRef} />
|
||||
);
|
||||
}
|
||||
|
||||
const classes = classNames('modal-root', {
|
||||
'modal-root--hidden': !revealed,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={classes} ref={this.setRef}>
|
||||
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
|
||||
<div role='presentation' className='modal-root__overlay' onClick={() => this.handleOnClose()} />
|
||||
<div role='dialog' className='modal-root__container'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ModalRoot));
|
||||
export { default } from './modal_root';
|
||||
@@ -1,34 +0,0 @@
|
||||
.modal-root {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: fixed;
|
||||
background: rgba($base-overlay-background, 0.7);
|
||||
|
||||
@include abs-position(0, 0, 0, 0, false);
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: fixed;
|
||||
align-content: space-around;
|
||||
z-index: 9999;
|
||||
|
||||
@include size(100%);
|
||||
@include flex(center, center, column);
|
||||
@include abs-position(0, auto, auto, 0, false);
|
||||
@include unselectable;
|
||||
}
|
||||
}
|
||||
|
||||
// .modal-root__modal {
|
||||
// pointer-events: auto;
|
||||
// display: flex;
|
||||
// z-index: 9999;
|
||||
// max-height: 100%;
|
||||
// overflow-y: hidden;
|
||||
// }
|
||||
90
app/javascript/gabsocial/components/modal_root/modal_root.js
Normal file
90
app/javascript/gabsocial/components/modal_root/modal_root.js
Normal file
@@ -0,0 +1,90 @@
|
||||
import Base from '../modal_base';
|
||||
import Bundle from '../../features/ui/util/bundle';
|
||||
import BundleModalError from '../bundle_modal_error';
|
||||
import {
|
||||
ModalLoading,
|
||||
ActionsModal,
|
||||
MediaModal,
|
||||
VideoModal,
|
||||
BoostModal,
|
||||
ConfirmationModal,
|
||||
FocalPointModal,
|
||||
HotkeysModal,
|
||||
ComposeModal,
|
||||
UnauthorizedModal,
|
||||
} from '../modal';
|
||||
|
||||
import {
|
||||
MuteModal,
|
||||
ReportModal,
|
||||
EmbedModal,
|
||||
ListEditor,
|
||||
ListAdder,
|
||||
} from '../../features/ui/util/async-components';
|
||||
|
||||
const MODAL_COMPONENTS = {
|
||||
'MEDIA': () => Promise.resolve({ default: MediaModal }),
|
||||
'VIDEO': () => Promise.resolve({ default: VideoModal }),
|
||||
'BOOST': () => Promise.resolve({ default: BoostModal }),
|
||||
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
|
||||
'MUTE': MuteModal,
|
||||
'REPORT': ReportModal,
|
||||
'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
|
||||
'EMBED': EmbedModal,
|
||||
'LIST_EDITOR': ListEditor,
|
||||
'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }),
|
||||
'LIST_ADDER':ListAdder,
|
||||
'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
|
||||
'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
|
||||
'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
|
||||
};
|
||||
|
||||
export default class ModalRoot extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
type: PropTypes.string,
|
||||
props: PropTypes.object,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
getSnapshotBeforeUpdate () {
|
||||
return { visible: !!this.props.type };
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps, prevState, { visible }) {
|
||||
if (visible) {
|
||||
document.body.classList.add('with-modals--active');
|
||||
} else {
|
||||
document.body.classList.remove('with-modals--active');
|
||||
}
|
||||
}
|
||||
|
||||
renderLoading = modalId => () => {
|
||||
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
|
||||
}
|
||||
|
||||
renderError = (props) => {
|
||||
return <BundleModalError {...props} onClose={this.onClickClose} />;
|
||||
}
|
||||
|
||||
onClickClose = () => {
|
||||
const { onClose, type } = this.props;
|
||||
onClose(type);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { type, props } = this.props;
|
||||
const visible = !!type;
|
||||
|
||||
return (
|
||||
<Base onClose={this.onClickClose} type={type}>
|
||||
{visible && (
|
||||
<Bundle fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
|
||||
{(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />}
|
||||
</Bundle>
|
||||
)}
|
||||
</Base>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user