Dialog

import { Button, Dialog } from '@gympass/yoga';

render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen}>Dialog with one action</Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>We couldn't confirm your eligibility</Dialog.Header>
        <Dialog.Content>
          Double check your info and company selection. If it still doesn’t
          work, contact your HR team.
        </Dialog.Content>
        <Dialog.Footer>
          <Button onClick={handleOnClose}>Ok, I understand</Button>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});
render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen}>Dialog with one action</Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>We couldn't confirm your eligibility</Dialog.Header>
        <Dialog.Content>
          Double check your info and company selection. If it still doesn’t
          work, contact your HR team.
        </Dialog.Content>
        <Dialog.Footer>
          <Button onClick={handleOnClose}>Ok, I understand</Button>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});

import { Button, Dialog } from '@gympass/yoga';

render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with two actions
      </Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>
          Are you sure you want to downgrade to a Platinum plan?
        </Dialog.Header>
        <Dialog.Content>
          Double check your info and company selection. If it still doesn’t
          work, contact your HR team.
        </Dialog.Content>
        <Dialog.Footer>
          <Button>Yes, downgrade</Button>
          <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});
render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with two actions
      </Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>
          Are you sure you want to downgrade to a Platinum plan?
        </Dialog.Header>
        <Dialog.Content>
          Double check your info and company selection. If it still doesn’t
          work, contact your HR team.
        </Dialog.Content>
        <Dialog.Footer>
          <Button>Yes, downgrade</Button>
          <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});

import { Button, Dialog } from '@gympass/yoga';

render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen}>Dialog with close button</Button>

      <Dialog isOpen={isOpen} closeLabel="Close" onClose={handleOnClose}>
        <Dialog.Header>
          Are you sure you want to downgrade to a Platinum plan?
        </Dialog.Header>
        <Dialog.Content>
          The change will happen at the end of your billing cycle on March, 28.
          Until then, enjoy your Black plan - you’ve already paid for it.
        </Dialog.Content>
        <Dialog.Footer>
          <Button>Yes, downgrade</Button>
          <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});
render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen}>Dialog with close button</Button>

      <Dialog isOpen={isOpen} closeLabel="Close" onClose={handleOnClose}>
        <Dialog.Header>
          Are you sure you want to downgrade to a Platinum plan?
        </Dialog.Header>
        <Dialog.Content>
          The change will happen at the end of your billing cycle on March, 28.
          Until then, enjoy your Black plan - you’ve already paid for it.
        </Dialog.Content>
        <Dialog.Footer>
          <Button>Yes, downgrade</Button>
          <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});

import { Button, Dialog } from '@gympass/yoga';

render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with only title
      </Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>
          Are you sure you want to downgrade to a Platinum plan?
        </Dialog.Header>
        <Dialog.Footer>
          <Button>Yes, downgrade</Button>
          <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});
render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with only title
      </Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>
          Are you sure you want to downgrade to a Platinum plan?
        </Dialog.Header>
        <Dialog.Footer>
          <Button>Yes, downgrade</Button>
          <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});

import { Button, Dialog } from '@gympass/yoga';

const { useRef, useEffect } = React;

render(() => {
  const [isOpen, setIsOpen] = useState(false);
  const dialogRef = useRef(null);
  const buttonRef = useRef(null);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  useEffect(() => {
    if (isOpen && dialogRef.current && buttonRef.current) {
      buttonRef.current.focus();
    }
  }, [dialogRef, buttonRef, isOpen]);

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with custom ref
      </Button>

      <Dialog isOpen={isOpen} ref={dialogRef}>
        <Dialog.Header>
          I am an example on how a custom ref option can be used
        </Dialog.Header>
        <Dialog.Footer>
          <Button ref={buttonRef}>I am auto focused</Button>
          <Button.Text onClick={handleOnClose}>Close</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});
const { useRef, useEffect } = React;

render(() => {
  const [isOpen, setIsOpen] = useState(false);
  const dialogRef = useRef(null);
  const buttonRef = useRef(null);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  useEffect(() => {
    if (isOpen && dialogRef.current && buttonRef.current) {
      buttonRef.current.focus();
    }
  }, [dialogRef, buttonRef, isOpen]);

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with custom ref
      </Button>

      <Dialog isOpen={isOpen} ref={dialogRef}>
        <Dialog.Header>
          I am an example on how a custom ref option can be used
        </Dialog.Header>
        <Dialog.Footer>
          <Button ref={buttonRef}>I am auto focused</Button>
          <Button.Text onClick={handleOnClose}>Close</Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});

import { Button, Dialog } from '@gympass/yoga';

const { useRef, useEffect } = React;

render(() => {
  const [isOpen, setIsOpen] = useState(false);
  const [isNestedOpen, setIsNestedOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with custom id
      </Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>
          With a custom id I can open an isolated dialog
        </Dialog.Header>

        <Dialog.Footer>
          <Button onClick={() => setIsNestedOpen(true)}>
            Open second dialog
          </Button>
          <Button.Text onClick={handleOnClose}>Close</Button.Text>
        </Dialog.Footer>
      </Dialog>

      <Dialog isOpen={isNestedOpen} dialogId="nested-id">
        <Dialog.Header>I am a nested dialog</Dialog.Header>

        <Dialog.Footer>
          <Button.Text onClick={() => setIsNestedOpen(false)}>
            Close
          </Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});
const { useRef, useEffect } = React;

render(() => {
  const [isOpen, setIsOpen] = useState(false);
  const [isNestedOpen, setIsNestedOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <Button onClick={handleOpen} secondary>
        Dialog with custom id
      </Button>

      <Dialog isOpen={isOpen}>
        <Dialog.Header>
          With a custom id I can open an isolated dialog
        </Dialog.Header>

        <Dialog.Footer>
          <Button onClick={() => setIsNestedOpen(true)}>
            Open second dialog
          </Button>
          <Button.Text onClick={handleOnClose}>Close</Button.Text>
        </Dialog.Footer>
      </Dialog>

      <Dialog isOpen={isNestedOpen} dialogId="nested-id">
        <Dialog.Header>I am a nested dialog</Dialog.Header>

        <Dialog.Footer>
          <Button.Text onClick={() => setIsNestedOpen(false)}>
            Close
          </Button.Text>
        </Dialog.Footer>
      </Dialog>
    </>
  );
});