import BaseFoundation, { DefaultAdapter } from '../base/foundation'; import isPromise from "../utils/isPromise"; export type OKType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; export type Size = 'small' | 'medium' | 'large' | 'full-width'; export interface ModalAdapter extends DefaultAdapter { disabledBodyScroll: () => void; enabledBodyScroll: () => void; notifyCancel: (e: any) => void | Promise; notifyOk: (e: any) => void | Promise; notifyClose: () => void; toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void; notifyFullScreen: (isFullScreen: boolean) => void; getProps: () => ModalProps } export interface ModalProps { afterClose?: () => void; bodyStyle?: Record; cancelButtonProps?: any; cancelText?: string; centered?: boolean; className?: string; closable?: boolean; confirmLoading?: boolean; cancelLoading?: boolean; content?: any; footer?: any; hasCancel?: boolean; header?: any; height?: string | number; mask?: boolean; maskClosable?: boolean; maskStyle?: Record; maskFixed?: boolean; motion?: boolean; okButtonProps?: any; okText?: string; okType?: OKType; onCancel?: (e: any) => void | Promise; onOk?: (e: any) => void | Promise; style?: Record; title?: any; visible?: boolean; width?: string | number; zIndex?: number; icon?: any; getPopupContainer?: () => HTMLElement; closeIcon?: any; closeOnEsc?: boolean; size?: Size; lazyRender?: boolean; keepDOM?: boolean; direction?: any; fullScreen?: boolean; preventScroll?: boolean } export interface ModalState { displayNone: boolean; isFullScreen: boolean; onOKReturnPromiseStatus?:"pending"|"fulfilled"|"rejected"; onCancelReturnPromiseStatus?:"pending"|"fulfilled"|"rejected" } export default class ModalFoundation extends BaseFoundation { constructor(adapter: ModalAdapter) { super({ ...adapter, }); } destroy() { this.afterHide(); } handleCancel(e: any) { const result = this._adapter.notifyCancel(e); if (isPromise(result)) { this._adapter.setState({ onCancelReturnPromiseStatus: "pending" }); (result as Promise)?.then(()=>{ this._adapter.setState({ onCancelReturnPromiseStatus: "fulfilled" }); })?.catch(e=>{ this._adapter.setState({ onCancelReturnPromiseStatus: "rejected" }); throw e; }); } } handleOk(e: any) { const result = this._adapter.notifyOk(e); if (isPromise(result)){ this._adapter.setState({ onOKReturnPromiseStatus: "pending" }); (result as Promise)?.then(()=>{ this._adapter.setState({ onOKReturnPromiseStatus: "fulfilled" }); })?.catch(e=>{ this._adapter.setState({ onOKReturnPromiseStatus: "rejected" }); throw e; }); } } beforeShow() { this._adapter.disabledBodyScroll(); } afterHide() { this._adapter.enabledBodyScroll(); this._adapter.notifyClose(); } // afterClose() { // this._adapter.notifyClose(); // } toggleDisplayNone = (displayNone: boolean, callback?: (displayNone: boolean) => void) => { this._adapter.toggleDisplayNone(displayNone, callback); }; // // eslint-disable-next-line max-len // mergeMotionProp = (motion: Motion, prop: string, cb: () => void) => { // const mergedMotion = typeof (motion) === 'undefined' || motion ? { // ...(motion as { [key: string]: (() => void) | boolean }), // [prop]: (...args: any) => { // const curr = get(motion, prop); // if (typeof curr === 'function') { // curr(...args); // } // cb(); // } // } : false; // return mergedMotion; // }; // // getMergedMotion() { // let { motion } = this._adapter.getProps(); // const { keepDOM } = this._adapter.getProps(); // motion = this.mergeMotionProp(motion, 'didLeave', this.afterClose.bind(this)); // if (!keepDOM) { // return motion; // } // const mergedMotion = this.mergeMotionProp(motion, 'didLeave', this.toggleHidden.bind(this, true)); // return mergedMotion; // } }