Bdtjtk

Making a modal dynamic without too much code duplication. How do I go about this?

I've used render props to separate the state from the layout.

interface State {

    open: boolean;

}



interface InjectedModalProps {

    onCloseModal: () => void;

    onOpenModal: () => void;

    open: boolean;

}



interface ModalProps {

    children(props: InjectedModalProps): ReactNode;

}

class ModalProvider extends Component<ModalProps, State> {

    state: State = {

        open: false

    };

    onOpenModal = () => {

        this.setState({ open: true });

    };



    onCloseModal = () => {

        this.setState({ open: false });

    };



    render() {

        const { open } = this.state;

        const { children } = this.props;

        return (

            <Fragment>

                {children({

                    onCloseModal: this.onCloseModal,

                    onOpenModal: this.onOpenModal,

                    open

                })}

            </Fragment>

        );

    }

}



const BathroomModal: FunctionComponent<Props> = ({ edit }) => (

    <ModalProvider>

        {({ onCloseModal, open, onOpenModal }) => {

            return (

                <Fragment>

                    <Modal open={open} center onClose={onCloseModal}>

                        <Container>

                            <h1>Badkamer toevoegen</h1>

                            {edit && <DeleteButton>Verwijderen</DeleteButton>}

                            <Divider />

                            <p>

                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolores incidunt ipsa,

                                earum nobis beatae facilis, dolore harum vitae nihil molestias repudiandae non quisquam

                                ab. Omnis unde atque voluptate ipsa!

                            </p>

                            <ContentBlock>

                                <h4>Type</h4>

                                <BathroomInputTypes />

                                <h4>Toilet</h4>

                                <Field name="toilet" options={[0, 1, 2, 3, 4, 5]} component={InputWithToggle} />

                                <h4>Douche</h4>

                                <Field name="shower" options={[0, 1, 2, 3, 4, 5]} component={InputWithToggle} />

                                <h4>Bad</h4>

                                <Field name="bath" options={[0, 1, 2, 3, 4, 5]} component={InputWithToggle} />

                            </ContentBlock>

                            <Divider />

                            <PrimaryButton onClick={onCloseModal} type="button">

                                {!edit ? 'Badkamer toevoegen' : 'Wijzigingen opslaan'}

                            </PrimaryButton>

                        </Container>

                    </Modal>

                    <SecondaryButton onClick={onOpenModal} type="button">

                        Badkamer toevoegen

                    </SecondaryButton>

                </Fragment>

            );

        }}

    </ModalProvider>

);

So this is what I've come up with. But I think it can be more reusable by extracting the Modal component into the ModalProvider. I could also put the trigger button in there as well. However, I also want the trigger button to be dynamic so I can for example use an icon instead of a button to open the modal.

I think this is a good start. I would suggest that you think about all of the things a modal generally has (in the same places) and put them into the ModalProvider. As you suggested, I would add the close button as well as a conditional "OK" button or something like that in the bottom right corner if you need a Dialog style modal with an action button.

The text for these buttons, can be changed through props, but they should always be buttons. Even if it's an icon, it should probably be in a button component to maintain semantic HTML. You can pass in the close button value as a prop to the modal provider as something like this:

<ModalProvider buttonText={<Icon type='close' {...props} />}>

  {... modal contents ...}

</ModalProvider>