modalContentFoundation.ts 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import BaseFoundation, { DefaultAdapter } from '../base/foundation';
  2. import KeyCode from '../utils/keyCode';
  3. import { ModalProps } from '../modal/modalFoundation';
  4. export interface ModalContentProps extends ModalProps {
  5. onClose: (e: any) => void;
  6. getContainerContext: () => any;
  7. isFullScreen?: boolean;
  8. contentClassName?: string;
  9. maskClassName?: string;
  10. onAnimationEnd?: (e:any) => void;
  11. maskExtraProps?:Record<string, any>;
  12. contentExtraProps?:Record<string, any>
  13. }
  14. export interface ModalContentState {
  15. dialogMouseDown: boolean;
  16. prevFocusElement: HTMLElement
  17. }
  18. export interface ModalContentAdapter extends DefaultAdapter<ModalContentProps, ModalContentState> {
  19. notifyClose: (e: any) => void;
  20. notifyDialogMouseDown: () => void;
  21. notifyDialogMouseUp: () => void;
  22. addKeyDownEventListener: () => void;
  23. removeKeyDownEventListener: () => void;
  24. getMouseState: () => boolean;
  25. modalDialogFocus: () => void;
  26. modalDialogBlur: () => void;
  27. prevFocusElementReFocus: () => void
  28. }
  29. export default class ModalContentFoundation extends BaseFoundation<ModalContentAdapter> {
  30. constructor(adapter: ModalContentAdapter) {
  31. super({ ...ModalContentFoundation.defaultAdapter, ...adapter });
  32. }
  33. destroy() {
  34. this.handleKeyDownEventListenerUnmount();
  35. this.modalDialogBlur();
  36. this.prevFocusElementReFocus();
  37. }
  38. handleDialogMouseDown() {
  39. this._adapter.notifyDialogMouseDown();
  40. }
  41. handleMaskMouseUp() {
  42. this._adapter.notifyDialogMouseUp();
  43. }
  44. handleKeyDown = (e: any) => {
  45. const { closeOnEsc } = this.getProps();
  46. if (closeOnEsc && e.keyCode === KeyCode.ESC) {
  47. e.stopPropagation();
  48. this.close(e);
  49. return;
  50. }
  51. }
  52. handleKeyDownEventListenerMount() {
  53. this._adapter.addKeyDownEventListener();
  54. }
  55. handleKeyDownEventListenerUnmount() {
  56. this._adapter.removeKeyDownEventListener();
  57. }
  58. getMouseState() {
  59. this._adapter.getMouseState();
  60. }
  61. handleMaskClick(e: any) {
  62. const { dialogMouseDown } = this.getStates();
  63. if (e.target === e.currentTarget && !dialogMouseDown) {
  64. this.close(e);
  65. }
  66. }
  67. close(e: any) {
  68. this._adapter.notifyClose(e);
  69. }
  70. modalDialogFocus() {
  71. this._adapter.modalDialogFocus();
  72. }
  73. modalDialogBlur() {
  74. this._adapter.modalDialogBlur();
  75. }
  76. prevFocusElementReFocus() {
  77. this._adapter.prevFocusElementReFocus();
  78. }
  79. }