Added error, loading modal and popover components
• Added: - error, loading modal components - error, loading popover components • Removed: - ModalLoading from async_components • Updated: - ModalRoot to use new components
This commit is contained in:
mgabdev
parent
7ea07d4a2b
commit
87f85131b7
@ -1,51 +0,0 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import Button from './button';
|
||||
|
||||
const messages = defineMessages({
|
||||
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
|
||||
retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
|
||||
close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class BundleModalError extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onRetry: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.props.onRetry();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { onClose, intl: { formatMessage } } = this.props;
|
||||
|
||||
// Keep the markup in sync with <ModalLoading />
|
||||
// (make sure they have the same dimensions)
|
||||
return (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
<Button title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
|
||||
{formatMessage(messages.error)}
|
||||
</div>
|
||||
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className='error-modal__nav onboarding-modal__skip'
|
||||
>
|
||||
{formatMessage(messages.close)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import ConfirmationModal from './confirmation_modal'
|
||||
|
||||
const messages = defineMessages({
|
||||
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
|
||||
retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
|
||||
title: { id: 'bundle_modal_error.error', defaultMessage: 'Error' },
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class BundleErrorModal extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onRetry: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.props.onRetry()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { onClose, intl } = this.props
|
||||
|
||||
return (
|
||||
<ConfirmationModal
|
||||
title={intl.formatMessage(messages.title)}
|
||||
message={intl.formatMessage(messages.error)}
|
||||
confirm={intl.formatMessage(messages.retry)}
|
||||
onConfirm={this.handleRetry}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
22
app/javascript/gabsocial/components/modal/loading_modal.js
Normal file
22
app/javascript/gabsocial/components/modal/loading_modal.js
Normal file
@ -0,0 +1,22 @@
|
||||
import Block from '../block'
|
||||
import ColumnIndicator from '../column_indicator'
|
||||
|
||||
export default class LoadingModal extends PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={_s.width330PX}>
|
||||
<Block>
|
||||
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
|
||||
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
|
||||
<ColumnIndicator type='loading' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import ColumnIndicator from '../column_indicator';
|
||||
|
||||
// Keep the markup in sync with <BundleModalError />
|
||||
// (make sure they have the same dimensions)
|
||||
export default class ModalLoading extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
<ColumnIndicator type='loading' />
|
||||
</div>
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button className='error-modal__nav onboarding-modal__skip' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
import { Fragment } from 'react'
|
||||
import { closeModal } from '../../actions/modal'
|
||||
import { cancelReplyCompose } from '../../actions/compose'
|
||||
import Bundle from '../../features/ui/util/bundle'
|
||||
import ModalBase from './modal_base'
|
||||
import BundleModalError from '../bundle_modal_error'
|
||||
import BundleErrorModal from './bundle_error_modal'
|
||||
import LoadingModal from './loading_modal'
|
||||
import {
|
||||
MODAL_BLOCK_ACCOUNT,
|
||||
MODAL_BOOST,
|
||||
@ -152,11 +152,11 @@ class ModalRoot extends PureComponent {
|
||||
}
|
||||
|
||||
renderLoading = () => {
|
||||
return null
|
||||
return <LoadingModal />
|
||||
}
|
||||
|
||||
renderError = () => {
|
||||
return <BundleModalError {...this.props} onClose={this.onClickClose} />
|
||||
return <BundleErrorModal {...this.props} onClose={this.onClickClose} />
|
||||
}
|
||||
|
||||
onClickClose = () => {
|
||||
@ -179,7 +179,7 @@ class ModalRoot extends PureComponent {
|
||||
fetchComponent={MODAL_COMPONENTS[type]}
|
||||
loading={this.renderLoading}
|
||||
error={this.renderError}
|
||||
renderDelay={200}
|
||||
renderDelay={150}
|
||||
>
|
||||
{
|
||||
(Component) => <Component {...props} onClose={this.onClickClose} />
|
||||
|
||||
22
app/javascript/gabsocial/components/popover/error_popover.js
Normal file
22
app/javascript/gabsocial/components/popover/error_popover.js
Normal file
@ -0,0 +1,22 @@
|
||||
import Block from '../block'
|
||||
import ColumnIndicator from '../column_indicator'
|
||||
|
||||
export default class ErrorPopover extends PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={_s.width250PX}>
|
||||
<Block>
|
||||
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
|
||||
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
|
||||
<ColumnIndicator type='error' message='Error loading popover' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
import Block from '../block'
|
||||
import ColumnIndicator from '../column_indicator'
|
||||
|
||||
export default class LoadingPopover extends PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={_s.width250PX}>
|
||||
<Block>
|
||||
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
|
||||
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
|
||||
<ColumnIndicator type='loading' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@ -35,6 +35,8 @@ import { getWindowDimension } from '../../utils/is_mobile'
|
||||
import Bundle from '../../features/ui/util/bundle'
|
||||
import ModalBase from '../modal/modal_base'
|
||||
import PopoverBase from './popover_base'
|
||||
import ErrorPopover from './error_popover'
|
||||
import LoadingPopover from './loading_popover'
|
||||
|
||||
const initialState = getWindowDimension()
|
||||
|
||||
@ -102,8 +104,12 @@ class PopoverRoot extends PureComponent {
|
||||
this.setState({ width })
|
||||
}
|
||||
|
||||
renderEmpty = () => {
|
||||
return <div />
|
||||
renderLoading = () => {
|
||||
return <LoadingPopover />
|
||||
}
|
||||
|
||||
renderError = () => {
|
||||
return <ErrorPopover />
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -130,9 +136,9 @@ class PopoverRoot extends PureComponent {
|
||||
visible &&
|
||||
<Bundle
|
||||
fetchComponent={POPOVER_COMPONENTS[type]}
|
||||
loading={this.renderEmpty}
|
||||
error={this.renderEmpty}
|
||||
renderDelay={200}
|
||||
loading={this.renderLoading}
|
||||
error={this.renderError}
|
||||
renderDelay={150}
|
||||
>
|
||||
{
|
||||
(Component) => <Component isXS={isXS} {...props} />
|
||||
|
||||
@ -54,7 +54,6 @@ export function ListTimeline() { return import(/* webpackChunkName: "features/li
|
||||
export function ListTimelineSettingsModal() { return import(/* webpackChunkName: "components/list_timeline_settings_modal" */'../../../components/modal/list_timeline_settings_modal') }
|
||||
export function MediaGallery() { return import(/* webpackChunkName: "components/media_gallery" */'../../../components/media_gallery') }
|
||||
export function MediaModal() { return import(/* webpackChunkName: "components/media_modal" */'../../../components/modal/media_modal') }
|
||||
export function ModalLoading() { return import(/* webpackChunkName: "components/modal_loading" */'../../../components/modal/modal_loading') }
|
||||
export function Mutes() { return import(/* webpackChunkName: "features/mutes" */'../../mutes') }
|
||||
export function MuteModal() { return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/mute_modal') }
|
||||
export function NavSettingsPopover() { return import(/* webpackChunkName: "modals/nav_settings_popover" */'../../../components/popover/nav_settings_popover') }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user