Modals

Library: https://github.com/davidtheclark/react-aria-modal

Version: 3.0.1

Code:

Main file: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/index.js

Modal Directory: https://github.com/benetech/MathShare/tree/development/src/components/ModalContainer/components

Usage / Quirks:

1. Focus on opening modal

By default the first child in the modal is focused when the modal opens, but it can be customized (ref - https://github.com/davidtheclark/react-aria-modal#initialfocus). Currently we are manually focusing the header from within redux saga, it can be changed to use this option to avoid any conflicts with the library.

2. Focus trap in modal

react-aria-modal uses focus-trap (https://github.com/davidtheclark/focus-trap) library to trap focus within the modal, it can be disabled using the following option (https://github.com/davidtheclark/react-aria-modal#focustrappaused)

Current modals in MathShare

1. Confirmation modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/ConfirmationModal/index.js Shown when user tries to move away from current page when it has unsaved work.

2. New Problem Set Share Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/NewProblemSetShareModal/index.js This modal is deprecated, it was used to show share link of new problem set.

3. Palette Chooser Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/Home/components/ButtonsPaletteChooser/index.js This modal is shown to select the available palettes, while creating a new problem set.

4. Personalisation Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/PersonalizationModal/index.js This modal is only available for logged in users and is used to personalize user settings.

5. Problem Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/ProblemModal/index.js This modal is deprecated, it was used to show the problem title and math in a modal.

6. Share Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/ProblemSetShareModal/index.js This is a common modal used to share Problem Set and Solution by copying its link or sharing it on integrated 3rd party services like Google Classroom or Microsoft Teams

7. Save Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/SaveModal/index.js This modal is deprecated, it was used to show edit link of new problem set.

8. Old Share Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/ShareModal/index.js This modal is deprecated, it was used to show share link of solution set.

9. SignIn Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/SignInModal/index.js This is 'Sign In' prompt shown to users who are not logged in.

10. Title Edit Modal

Code: https://github.com/benetech/MathShare/blob/development/src/components/ModalContainer/components/TitleEditModal/index.js This modal is available on the Problem Set edit view, it is used to edit the Problem Set title