Refactor subuser modal and fix to be less of a code monstrosity; closes #2583
This commit is contained in:
Dane Everitt
parent
21d4402a55
commit
39dddba1d6
6 changed files with 228 additions and 233 deletions
|
|
@ -10,7 +10,7 @@ export default () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{visible && <EditSubuserModal appear visible onDismissed={() => setVisible(false)}/>}
|
||||
<EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/>
|
||||
<Button onClick={() => setVisible(true)}>
|
||||
<FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
import React, { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
|
||||
import React, { useContext, useEffect, useRef } from 'react';
|
||||
import { Subuser } from '@/state/server/subusers';
|
||||
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
|
||||
import { Form, Formik } from 'formik';
|
||||
import { array, object, string } from 'yup';
|
||||
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
||||
import Field from '@/components/elements/Field';
|
||||
import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||
import Checkbox from '@/components/elements/Checkbox';
|
||||
import styled from 'styled-components/macro';
|
||||
import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
|
|
@ -17,104 +13,33 @@ import { usePermissions } from '@/plugins/usePermissions';
|
|||
import { useDeepCompareMemo } from '@/plugins/useDeepCompareMemo';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Label from '@/components/elements/Label';
|
||||
import Input from '@/components/elements/Input';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import PermissionTitleBox from '@/components/server/users/PermissionTitleBox';
|
||||
import asModal from '@/hoc/asModal';
|
||||
import PermissionRow from '@/components/server/users/PermissionRow';
|
||||
import ModalContext from '@/context/ModalContext';
|
||||
|
||||
type Props = {
|
||||
subuser?: Subuser;
|
||||
} & RequiredModalProps;
|
||||
};
|
||||
|
||||
interface Values {
|
||||
email: string;
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
const PermissionLabel = styled.label`
|
||||
${tw`flex items-center border border-transparent rounded md:p-2 transition-colors duration-75`};
|
||||
text-transform: none;
|
||||
const EditSubuserModal = ({ subuser }: Props) => {
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const { dismiss, toggleSpinner } = useContext(ModalContext);
|
||||
|
||||
&:not(.disabled) {
|
||||
${tw`cursor-pointer`};
|
||||
|
||||
&:hover {
|
||||
${tw`border-neutral-500 bg-neutral-800`};
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
${tw`mt-4 sm:mt-2`};
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
${tw`opacity-50`};
|
||||
|
||||
& input[type="checkbox"]:not(:checked) {
|
||||
${tw`border-0`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface TitleProps {
|
||||
isEditable: boolean;
|
||||
permission: string;
|
||||
permissions: string[];
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PermissionTitledBox = memo(({ isEditable, permission, permissions, className, children }: TitleProps) => {
|
||||
const { values, setFieldValue } = useFormikContext<Values>();
|
||||
|
||||
const onCheckboxClicked = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
console.log(e.currentTarget.checked, [
|
||||
...values.permissions,
|
||||
...permissions.filter(p => !values.permissions.includes(p)),
|
||||
]);
|
||||
|
||||
if (e.currentTarget.checked) {
|
||||
setFieldValue('permissions', [
|
||||
...values.permissions,
|
||||
...permissions.filter(p => !values.permissions.includes(p)),
|
||||
]);
|
||||
} else {
|
||||
setFieldValue('permissions', [
|
||||
...values.permissions.filter(p => !permissions.includes(p)),
|
||||
]);
|
||||
}
|
||||
}, [ permissions, values.permissions ]);
|
||||
|
||||
return (
|
||||
<TitledGreyBox
|
||||
title={
|
||||
<div css={tw`flex items-center`}>
|
||||
<p css={tw`text-sm uppercase flex-1`}>{permission}</p>
|
||||
{isEditable &&
|
||||
<Input
|
||||
type={'checkbox'}
|
||||
checked={permissions.every(p => values.permissions.includes(p))}
|
||||
onChange={onCheckboxClicked}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</TitledGreyBox>
|
||||
);
|
||||
}, isEqual);
|
||||
|
||||
const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...props }, ref) => {
|
||||
const { isSubmitting } = useFormikContext<Values>();
|
||||
const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
|
||||
const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
|
||||
const permissions = useStoreState(state => state.permissions.data);
|
||||
|
||||
const user = useStoreState(state => state.user.data!);
|
||||
|
||||
// The currently logged in user's permissions. We're going to filter out any permissions
|
||||
// that they should not need.
|
||||
const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);
|
||||
const [ canEditUser ] = usePermissions(subuser ? [ 'user.update' ] : [ 'user.create' ]);
|
||||
|
||||
// The permissions that can be modified by this user.
|
||||
const editablePermissions = useDeepCompareMemo(() => {
|
||||
|
|
@ -123,111 +48,25 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
|
|||
|
||||
const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));
|
||||
|
||||
if (user.rootAdmin || (loggedInPermissions.length === 1 && loggedInPermissions[0] === '*')) {
|
||||
if (isRootAdmin || (loggedInPermissions.length === 1 && loggedInPermissions[0] === '*')) {
|
||||
return list;
|
||||
}
|
||||
|
||||
return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
|
||||
}, [ permissions, loggedInPermissions ]);
|
||||
}, [ isRootAdmin, permissions, loggedInPermissions ]);
|
||||
|
||||
return (
|
||||
<Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
|
||||
<h2 css={tw`text-2xl`} ref={ref}>
|
||||
{subuser ?
|
||||
`${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
|
||||
:
|
||||
'Create new subuser'
|
||||
}
|
||||
</h2>
|
||||
<FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
|
||||
{(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
|
||||
<div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
|
||||
<p css={tw`text-sm text-neutral-300`}>
|
||||
Only permissions which your account is currently assigned may be selected when creating or
|
||||
modifying other users.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{!subuser &&
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
name={'email'}
|
||||
label={'User Email'}
|
||||
description={'Enter the email address of the user you wish to invite as a subuser for this server.'}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div css={tw`my-6`}>
|
||||
{Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => {
|
||||
const group = Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`);
|
||||
|
||||
return (
|
||||
<PermissionTitledBox
|
||||
key={`permission_${key}`}
|
||||
isEditable={canEditUser}
|
||||
permission={key}
|
||||
permissions={group}
|
||||
css={index > 0 ? tw`mt-4` : undefined}
|
||||
>
|
||||
<p css={tw`text-sm text-neutral-400 mb-4`}>
|
||||
{permissions[key].description}
|
||||
</p>
|
||||
{Object.keys(permissions[key].keys).map(pkey => (
|
||||
<PermissionLabel
|
||||
key={`permission_${key}_${pkey}`}
|
||||
htmlFor={`permission_${key}_${pkey}`}
|
||||
className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
|
||||
>
|
||||
<div css={tw`p-2`}>
|
||||
<Checkbox
|
||||
id={`permission_${key}_${pkey}`}
|
||||
name={'permissions'}
|
||||
value={`${key}.${pkey}`}
|
||||
css={tw`w-5 h-5 mr-2`}
|
||||
disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`flex-1`}>
|
||||
<Label as={'p'} css={tw`font-medium`}>{pkey}</Label>
|
||||
{permissions[key].keys[pkey].length > 0 &&
|
||||
<p css={tw`text-xs text-neutral-400 mt-1`}>
|
||||
{permissions[key].keys[pkey]}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</PermissionLabel>
|
||||
))}
|
||||
</PermissionTitledBox>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Can action={subuser ? 'user.update' : 'user.create'}>
|
||||
<div css={tw`pb-6 flex justify-end`}>
|
||||
<Button type={'submit'} css={tw`w-full sm:w-auto`}>
|
||||
{subuser ? 'Save' : 'Invite User'}
|
||||
</Button>
|
||||
</div>
|
||||
</Can>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
export default ({ subuser, ...props }: Props) => {
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
const submit = (values: Values) => {
|
||||
toggleSpinner(true);
|
||||
clearFlashes('user:edit');
|
||||
|
||||
createOrUpdateSubuser(uuid, values, subuser)
|
||||
.then(subuser => {
|
||||
appendSubuser(subuser);
|
||||
props.onDismissed();
|
||||
dismiss();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
setSubmitting(false);
|
||||
toggleSpinner(false);
|
||||
clearAndAddHttpError({ key: 'user:edit', error });
|
||||
|
||||
if (ref.current) {
|
||||
|
|
@ -236,10 +75,8 @@ export default ({ subuser, ...props }: Props) => {
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearFlashes('user:edit');
|
||||
};
|
||||
useEffect(() => () => {
|
||||
clearFlashes('user:edit');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -258,8 +95,61 @@ export default ({ subuser, ...props }: Props) => {
|
|||
})}
|
||||
>
|
||||
<Form>
|
||||
<EditSubuserModal ref={ref} subuser={subuser} {...props}/>
|
||||
<h2 css={tw`text-2xl`} ref={ref}>
|
||||
{subuser ? `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}` : 'Create new subuser'}
|
||||
</h2>
|
||||
<FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
|
||||
{(!isRootAdmin && loggedInPermissions[0] !== '*') &&
|
||||
<div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
|
||||
<p css={tw`text-sm text-neutral-300`}>
|
||||
Only permissions which your account is currently assigned may be selected when creating or
|
||||
modifying other users.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{!subuser &&
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
name={'email'}
|
||||
label={'User Email'}
|
||||
description={'Enter the email address of the user you wish to invite as a subuser for this server.'}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div css={tw`my-6`}>
|
||||
{Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => (
|
||||
<PermissionTitleBox
|
||||
key={`permission_${key}`}
|
||||
title={key}
|
||||
isEditable={canEditUser}
|
||||
permissions={Object.keys(permissions[key].keys).map(pkey => `${key}.${pkey}`)}
|
||||
css={index > 0 ? tw`mt-4` : undefined}
|
||||
>
|
||||
<p css={tw`text-sm text-neutral-400 mb-4`}>
|
||||
{permissions[key].description}
|
||||
</p>
|
||||
{Object.keys(permissions[key].keys).map(pkey => (
|
||||
<PermissionRow
|
||||
key={`permission_${key}.${pkey}`}
|
||||
permission={`${key}.${pkey}`}
|
||||
disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
|
||||
/>
|
||||
))}
|
||||
</PermissionTitleBox>
|
||||
))}
|
||||
</div>
|
||||
<Can action={subuser ? 'user.update' : 'user.create'}>
|
||||
<div css={tw`pb-6 flex justify-end`}>
|
||||
<Button type={'submit'} css={tw`w-full sm:w-auto`}>
|
||||
{subuser ? 'Save' : 'Invite User'}
|
||||
</Button>
|
||||
</div>
|
||||
</Can>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default asModal<Props>({
|
||||
top: false,
|
||||
})(EditSubuserModal);
|
||||
|
|
|
|||
65
resources/scripts/components/server/users/PermissionRow.tsx
Normal file
65
resources/scripts/components/server/users/PermissionRow.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import Checkbox from '@/components/elements/Checkbox';
|
||||
import React from 'react';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
import Label from '@/components/elements/Label';
|
||||
|
||||
const Container = styled.label`
|
||||
${tw`flex items-center border border-transparent rounded md:p-2 transition-colors duration-75`};
|
||||
text-transform: none;
|
||||
|
||||
&:not(.disabled) {
|
||||
${tw`cursor-pointer`};
|
||||
|
||||
&:hover {
|
||||
${tw`border-neutral-500 bg-neutral-800`};
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
${tw`mt-4 sm:mt-2`};
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
${tw`opacity-50`};
|
||||
|
||||
& input[type="checkbox"]:not(:checked) {
|
||||
${tw`border-0`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
permission: string;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
const PermissionRow = ({ permission, disabled }: Props) => {
|
||||
const [ key, pkey ] = permission.split('.', 2);
|
||||
const permissions = useStoreState(state => state.permissions.data);
|
||||
|
||||
return (
|
||||
<Container htmlFor={`permission_${permission}`} className={disabled ? 'disabled' : undefined}>
|
||||
<div css={tw`p-2`}>
|
||||
<Checkbox
|
||||
id={`permission_${permission}`}
|
||||
name={'permissions'}
|
||||
value={permission}
|
||||
css={tw`w-5 h-5 mr-2`}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`flex-1`}>
|
||||
<Label as={'p'} css={tw`font-medium`}>{pkey}</Label>
|
||||
{permissions[key].keys[pkey].length > 0 &&
|
||||
<p css={tw`text-xs text-neutral-400 mt-1`}>
|
||||
{permissions[key].keys[pkey]}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default PermissionRow;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React, { memo, useCallback } from 'react';
|
||||
import { useField } from 'formik';
|
||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||
import tw from 'twin.macro';
|
||||
import Input from '@/components/elements/Input';
|
||||
import isEqual from 'react-fast-compare';
|
||||
|
||||
interface Props {
|
||||
isEditable: boolean;
|
||||
title: string;
|
||||
permissions: string[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissions, className, children }) => {
|
||||
const [ { value }, , { setValue } ] = useField<string[]>('permissions');
|
||||
|
||||
const onCheckboxClicked = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
setValue([
|
||||
...value,
|
||||
...permissions.filter(p => !value.includes(p)),
|
||||
]);
|
||||
} else {
|
||||
setValue(value.filter(p => !permissions.includes(p)));
|
||||
}
|
||||
}, [ permissions, value ]);
|
||||
|
||||
return (
|
||||
<TitledGreyBox
|
||||
title={
|
||||
<div css={tw`flex items-center`}>
|
||||
<p css={tw`text-sm uppercase flex-1`}>{title}</p>
|
||||
{isEditable &&
|
||||
<Input
|
||||
type={'checkbox'}
|
||||
checked={permissions.every(p => value.includes(p))}
|
||||
onChange={onCheckboxClicked}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</TitledGreyBox>
|
||||
);
|
||||
}, isEqual);
|
||||
|
||||
export default PermissionTitleBox;
|
||||
|
|
@ -19,14 +19,11 @@ export default ({ subuser }: Props) => {
|
|||
|
||||
return (
|
||||
<GreyRowBox css={tw`mb-2`}>
|
||||
{visible &&
|
||||
<EditSubuserModal
|
||||
appear
|
||||
visible
|
||||
subuser={subuser}
|
||||
onDismissed={() => setVisible(false)}
|
||||
visible={visible}
|
||||
onModalDismissed={() => setVisible(false)}
|
||||
/>
|
||||
}
|
||||
<div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden hidden md:block`}>
|
||||
<img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import Modal, { ModalProps } from '@/components/elements/Modal';
|
||||
import ModalContext from '@/context/ModalContext';
|
||||
import isEqual from 'react-fast-compare';
|
||||
|
||||
export interface AsModalProps {
|
||||
visible: boolean;
|
||||
|
|
@ -13,7 +12,7 @@ type ExtendedModalProps = Omit<ModalProps, 'appear' | 'visible' | 'onDismissed'>
|
|||
interface State {
|
||||
render: boolean;
|
||||
visible: boolean;
|
||||
modalProps: ExtendedModalProps | undefined;
|
||||
showSpinnerOverlay?: boolean;
|
||||
}
|
||||
|
||||
type ExtendedComponentType<T> = (C: React.ComponentType<T>) => React.ComponentType<T & AsModalProps>;
|
||||
|
|
@ -30,17 +29,18 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
|
|||
this.state = {
|
||||
render: props.visible,
|
||||
visible: props.visible,
|
||||
modalProps: typeof modalProps === 'function' ? modalProps(this.props) : modalProps,
|
||||
showSpinnerOverlay: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
get modalProps () {
|
||||
return {
|
||||
...(typeof modalProps === 'function' ? modalProps(this.props) : modalProps),
|
||||
showSpinnerOverlay: this.state.showSpinnerOverlay,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps: Readonly<P & AsModalProps>) {
|
||||
const mapped = typeof modalProps === 'function' ? modalProps(this.props) : modalProps;
|
||||
if (!isEqual(this.state.modalProps, mapped)) {
|
||||
// noinspection JSPotentiallyInvalidUsageOfThis
|
||||
this.setState({ modalProps: mapped });
|
||||
}
|
||||
|
||||
if (prevProps.visible && !this.props.visible) {
|
||||
// noinspection JSPotentiallyInvalidUsageOfThis
|
||||
this.setState({ visible: false });
|
||||
|
|
@ -52,39 +52,32 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
|
|||
|
||||
dismiss = () => this.setState({ visible: false });
|
||||
|
||||
toggleSpinner = (value?: boolean) => this.setState(s => ({
|
||||
modalProps: {
|
||||
...s.modalProps,
|
||||
showSpinnerOverlay: value || false,
|
||||
},
|
||||
}));
|
||||
toggleSpinner = (value?: boolean) => this.setState({ showSpinnerOverlay: value });
|
||||
|
||||
render () {
|
||||
return (
|
||||
<ModalContext.Provider
|
||||
value={{
|
||||
dismiss: this.dismiss.bind(this),
|
||||
toggleSpinner: this.toggleSpinner.bind(this),
|
||||
}}
|
||||
>
|
||||
{
|
||||
this.state.render ?
|
||||
<Modal
|
||||
appear
|
||||
visible={this.state.visible}
|
||||
onDismissed={() => this.setState({ render: false }, () => {
|
||||
if (typeof this.props.onModalDismissed === 'function') {
|
||||
this.props.onModalDismissed();
|
||||
}
|
||||
})}
|
||||
{...this.state.modalProps}
|
||||
>
|
||||
<Component {...this.props}/>
|
||||
</Modal>
|
||||
:
|
||||
null
|
||||
}
|
||||
</ModalContext.Provider>
|
||||
this.state.render ?
|
||||
<Modal
|
||||
appear
|
||||
visible={this.state.visible}
|
||||
onDismissed={() => this.setState({ render: false }, () => {
|
||||
if (typeof this.props.onModalDismissed === 'function') {
|
||||
this.props.onModalDismissed();
|
||||
}
|
||||
})}
|
||||
{...this.modalProps}
|
||||
>
|
||||
<ModalContext.Provider
|
||||
value={{
|
||||
dismiss: this.dismiss.bind(this),
|
||||
toggleSpinner: this.toggleSpinner.bind(this),
|
||||
}}
|
||||
>
|
||||
<Component {...this.props}/>
|
||||
</ModalContext.Provider>
|
||||
</Modal>
|
||||
:
|
||||
null
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue