gab-social/app/javascript/gabsocial/components/modal/modal_root.js

145 lines
5.1 KiB
JavaScript
Raw Normal View History

2020-02-28 15:20:47 +00:00
import { closeModal } from '../../actions/modal'
import { cancelReplyCompose } from '../../actions/compose'
2020-02-24 21:56:07 +00:00
import Bundle from '../../features/ui/util/bundle'
2020-02-28 15:20:47 +00:00
import {
MuteModal,
ReportModal,
EmbedModal,
// ListEditor,
// ListAdder,
2020-03-27 22:57:03 +00:00
StatusRevisionsModal,
2020-03-25 03:08:43 +00:00
} from '../../features/ui/util/async_components'
2020-03-24 04:39:12 +00:00
2020-02-28 15:20:47 +00:00
import ModalBase from './modal_base'
2020-02-24 21:56:07 +00:00
import BundleModalError from '../bundle_modal_error'
2020-03-24 04:39:12 +00:00
2020-02-24 23:25:55 +00:00
import ActionsModal from './actions_modal'
2020-03-24 04:39:12 +00:00
import BlockAccountModal from './block_account_modal'
import BlockDomainModal from './block_domain_modal'
2020-02-24 23:25:55 +00:00
import BoostModal from './boost_modal'
2020-03-25 03:08:43 +00:00
import CommunityTimelineSettingsModal from './community_timeline_settings_modal'
2020-03-24 04:39:12 +00:00
import ComposeModal from './compose_modal'
2020-02-24 23:25:55 +00:00
import ConfirmationModal from './confirmation_modal'
2020-04-02 04:17:21 +01:00
import GifPickerModal from './gif_picker_modal'
2020-03-25 03:08:43 +00:00
import GroupCreateModal from './group_create_modal'
import GroupDeleteModal from './group_delete_modal'
2020-03-24 04:39:12 +00:00
import GroupEditorModal from './group_editor_modal'
2020-03-26 03:11:32 +00:00
import HashtagTimelineSettingsModal from './hashtag_timeline_settings_modal'
2020-03-24 04:39:12 +00:00
import HomeTimelineSettingsModal from './home_timeline_settings_modal'
2020-02-24 23:25:55 +00:00
import HotkeysModal from './hotkeys_modal'
2020-03-25 03:08:43 +00:00
import ListCreateModal from './list_create_modal'
import ListDeleteModal from './list_delete_modal'
2020-03-24 04:39:12 +00:00
import ListEditorModal from './list_editor_modal'
2020-03-25 03:08:43 +00:00
import ListTimelineSettingsModal from './list_timeline_settings_modal'
2020-03-24 04:39:12 +00:00
import MediaModal from './media_modal'
2020-02-24 23:25:55 +00:00
import ModalLoading from './modal_loading'
2020-03-24 04:39:12 +00:00
import ProUpgradeModal from './pro_upgrade_modal'
import VideoModal from './video_modal'
import UnauthorizedModal from './unauthorized_modal'
import UnfollowModal from './unfollow_modal'
2019-07-02 08:10:25 +01:00
const MODAL_COMPONENTS = {
2020-03-24 04:39:12 +00:00
ACTIONS: () => Promise.resolve({ default: ActionsModal }),
BLOCK_ACCOUNT: () => Promise.resolve({ default: BlockAccountModal }),
BLOCK_DOMAIN: () => Promise.resolve({ default: BlockDomainModal }),
BOOST: () => Promise.resolve({ default: BoostModal }),
2020-03-25 03:08:43 +00:00
COMMUNITY_TIMELINE_SETTINGS: () => Promise.resolve({ default: CommunityTimelineSettingsModal }),
2020-03-24 04:39:12 +00:00
COMPOSE: () => Promise.resolve({ default: ComposeModal }),
CONFIRM: () => Promise.resolve({ default: ConfirmationModal }),
EMBED: () => Promise.resolve({ default: EmbedModal }),
2020-04-02 04:17:21 +01:00
GIF_PICKER: () => Promise.resolve({ default: GifPickerModal }),
2020-03-25 03:08:43 +00:00
GROUP_CREATE: () => Promise.resolve({ default: GroupCreateModal }),
GROUP_DELETE: () => Promise.resolve({ default: GroupDeleteModal }),
2020-03-24 04:39:12 +00:00
GROUP_EDITOR: () => Promise.resolve({ default: GroupEditorModal }),
2020-03-26 03:11:32 +00:00
HASHTAG_TIMELINE_SETTINGS: () => Promise.resolve({ default: HashtagTimelineSettingsModal }),
2020-03-24 04:39:12 +00:00
HOME_TIMELINE_SETTINGS: () => Promise.resolve({ default: HomeTimelineSettingsModal }),
HOTKEYS: () => Promise.resolve({ default: HotkeysModal }),
2020-03-25 03:08:43 +00:00
LIST_CREATE: () => Promise.resolve({ default: ListCreateModal }),
LIST_DELETE: () => Promise.resolve({ default: ListDeleteModal }),
2020-03-24 04:39:12 +00:00
LIST_EDITOR: () => Promise.resolve({ default: ListEditorModal }),
2020-03-25 03:08:43 +00:00
LIST_TIMELINE_SETTINGS: () => Promise.resolve({ default: ListTimelineSettingsModal }),
2020-03-24 04:39:12 +00:00
MEDIA: () => Promise.resolve({ default: MediaModal }),
2020-03-27 22:57:03 +00:00
MUTE: MuteModal,
2020-03-24 04:39:12 +00:00
PRO_UPGRADE: () => Promise.resolve({ default: ProUpgradeModal }),
REPORT: ReportModal,
2020-03-27 22:57:03 +00:00
STATUS_REVISIONS: StatusRevisionsModal,
2020-03-24 04:39:12 +00:00
UNAUTHORIZED: () => Promise.resolve({ default: UnauthorizedModal }),
UNFOLLOW: () => Promise.resolve({ default: UnfollowModal }),
VIDEO: () => Promise.resolve({ default: VideoModal }),
2020-02-24 21:56:07 +00:00
}
2019-07-02 08:10:25 +01:00
2020-02-28 15:20:47 +00:00
const mapStateToProps = state => ({
type: state.get('modal').modalType,
props: state.get('modal').modalProps,
})
const mapDispatchToProps = (dispatch) => ({
2020-03-24 04:39:12 +00:00
onClose(optionalType) {
2020-02-28 15:20:47 +00:00
if (optionalType === 'COMPOSE') {
2020-03-24 04:39:12 +00:00
dispatch(cancelReplyCompose())
2020-02-28 15:20:47 +00:00
}
dispatch(closeModal())
},
})
export default
@connect(mapStateToProps, mapDispatchToProps)
class ModalRoot extends PureComponent {
2019-07-02 08:10:25 +01:00
static propTypes = {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired,
2020-02-24 21:56:07 +00:00
}
2019-07-02 08:10:25 +01:00
2020-03-24 04:39:12 +00:00
getSnapshotBeforeUpdate() {
2020-02-24 21:56:07 +00:00
return { visible: !!this.props.type }
2019-07-02 08:10:25 +01:00
}
2020-03-24 04:39:12 +00:00
componentDidUpdate(prevProps, prevState, { visible }) {
2019-07-02 08:10:25 +01:00
if (visible) {
2020-02-24 21:56:07 +00:00
document.body.classList.add('with-modals--active')
2019-07-02 08:10:25 +01:00
} else {
2020-02-24 21:56:07 +00:00
document.body.classList.remove('with-modals--active')
2019-07-02 08:10:25 +01:00
}
}
renderLoading = modalId => () => {
2020-02-24 21:56:07 +00:00
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null
2019-07-02 08:10:25 +01:00
}
renderError = (props) => {
2020-02-24 21:56:07 +00:00
return <BundleModalError {...props} onClose={this.onClickClose} />
2019-07-02 08:10:25 +01:00
}
onClickClose = () => {
2020-02-24 21:56:07 +00:00
const { onClose, type } = this.props
onClose(type)
2019-07-02 08:10:25 +01:00
}
2020-03-24 04:39:12 +00:00
render() {
2020-02-24 21:56:07 +00:00
const { type, props } = this.props
const visible = !!type
2019-07-02 08:10:25 +01:00
return (
2020-02-24 21:56:07 +00:00
<ModalBase 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>
2020-02-24 21:56:07 +00:00
}
</ModalBase>
)
2019-07-02 08:10:25 +01:00
}
}