wix-style-react/src/Modal/docs/Modal.demo.js

wix-style-react

import React from 'react';
import Checkbox from '../../Checkbox';
import MessageModalLayout from '../../MessageModalLayout';
import Text from '../../Text';
import Button from '../../Button';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';
import * as Icons from 'wix-ui-icons-common';
import Modal from '..';

export default () => {
  const [isModalOpened, setModalOpened] = React.useState(false);
  const [checked, setChecked] = React.useState(false);

  const openModal = () => setModalOpened(true);
  const closeModal = () => setModalOpened(false);

  const renderModalContent = () => (
    <MessageModalLayout
      onCloseButtonClick={() => closeModal()}
      primaryButtonOnClick={() => closeModal()}
      secondaryButtonOnClick={() => closeModal()}
      primaryButtonText={'Discard'}
      secondaryButtonText={'Cancel'}
      title={'Discard Changes?'}
      sideActions={
        <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
          Don't show this again
        </Checkbox>
      }
    >
      <Text>
        Are you sure you want to leave this page? Your changes won't be saved.
      </Text>
    </MessageModalLayout>
  );

  return (
    <StorybookComponents.Stack>
      <Button onClick={openModal} prefixIcon={<Icons.OpenModal />}>
        Open Modal
      </Button>
      <Modal isOpen={isModalOpened} onRequestClose={closeModal}>
        {renderModalContent()}
      </Modal>
    </StorybookComponents.Stack>
  );
};