ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
203 lines (202 loc) • 9.03 kB
TypeScript
import React from 'react';
import { DragPanelClass, DragPanelClassProps } from './drag-pabel-helper';
import { Children } from '../utils/props';
export interface ModalRequiredProps {
/** 当前 modal 是否打开 */
isOpen: boolean;
/** 关闭 modal */
onCloseModal: () => void;
}
export interface ModalOptions extends DragPanelClassProps {
/** style */
style?: React.CSSProperties;
/** 动画的持续时间 */
duration?: number;
/** title */
title?: string;
/** id */
id?: string | number;
/** class name */
className?: string;
/** 当 modal 打开是，挂载在 document.body 的 class */
topClassName?: string;
/** 宽度 */
width?: string | number;
/** 当前 modal 的 index */
idx?: string | number;
/** marginTop */
marginTop?: string | number;
/** 是否需要动画效果 */
animation?: boolean;
/** 是否点击背景关闭 modal */
clickBgToClose?: boolean;
/** 是否可拖拽模式的 modal */
draggable?: boolean;
/** 是否需要 mask 背景 */
needMask?: boolean;
/** 是否渲染关闭 modal 的按钮 */
showCloseBtn?: boolean;
/** 是否需要最大化按钮 */
needMaxBtn?: boolean;
/** 是否需要最小化按钮 */
needMinBtn?: boolean;
/** 是否需要头部 */
needHeader?: boolean;
/** 是否关闭 modal content 的最大高度 80vh */
maxHeightable?: boolean;
/** 是否使用 esc 按键关闭 modal */
shouldCloseOnEsc?: boolean;
/** 是否最小化 */
isMinimize?: boolean;
/** 是否使用 esc 按键关闭 modal */
modalType?: 'normal' | 'side';
/** modeType == 'side' 时弹出的方向 */
position?: 'left' | 'right' | 'top' | 'bottom';
/** 用于嵌入 Modal 之中的模版 */
template?: (modalProps: ModalProps) => Children;
/** 头部插件，传入未事例化的组件 */
Header?: (modalProps: {}) => Children;
/** 关闭 modal 时的回调 */
onClose?: (modalProps: {}) => void;
/** 替代默认的 layout */
modalLayoutDOM?: Children;
/** children */
children?: Children;
/** 多窗口模式的 sectionId */
sectionId?: string | number;
/** 响应最小化的事件的接口 */
minimizeWindow?: (sectionId: string | number) => void;
/** 多窗口模式下的选择窗口的接口 */
selectWindow?: (sectionId: string | number) => void;
}
export interface ModalProps extends ModalOptions, ModalRequiredProps {
/** style */
style?: React.CSSProperties;
/** 动画的持续时间 */
duration?: number;
/** title */
title?: string;
/** id */
id?: string | number;
/** class name */
className?: string;
/** 当 modal 打开是，挂载在 document.body 的 class */
topClassName?: string;
/** 宽度 */
width?: string | number;
/** 当前 modal 的 index */
idx?: string | number;
/** marginTop */
marginTop?: string | number;
/** 是否需要动画效果 */
animation?: boolean;
/** 是否点击背景关闭 modal */
clickBgToClose?: boolean;
/** 是否可拖拽模式的 modal */
draggable?: boolean;
/** 是否需要 mask 背景 */
needMask?: boolean;
/** 是否渲染关闭 modal 的按钮 */
showCloseBtn?: boolean;
/** 是否需要最大化按钮 */
needMaxBtn?: boolean;
/** 是否需要最小化按钮 */
needMinBtn?: boolean;
/** 是否需要头部 */
needHeader?: boolean;
/** 是否关闭 modal content 的最大高度 80vh */
maxHeightable?: boolean;
/** 是否使用 esc 按键关闭 modal */
shouldCloseOnEsc?: boolean;
/** 是否最小化 */
isMinimize?: boolean;
/** 是否使用 esc 按键关闭 modal */
modalType?: 'normal' | 'side';
/** modeType == 'side' 时弹出的方向 */
position?: 'left' | 'right' | 'top' | 'bottom';
/** 用于嵌入 Modal 之中的模版 */
template?: (modalProps?: {}) => Children;
/** 头部插件，传入未事例化的组件 */
Header?: (modalProps?: {}) => Children;
/** 关闭 modal 时的回调 */
onClose?: (modalProps?: {}) => void;
/** 替代默认的 layout */
modalLayoutDOM?: Children;
/** children */
children?: Children;
/** 多窗口模式的 sectionId */
sectionId?: string | number;
/** 响应最小化的事件的接口 */
minimizeWindow?: (sectionId: string | number) => void;
/** 多窗口模式下的选择窗口的接口 */
selectWindow?: (sectionId: string | number) => void;
}
export default class Modal extends DragPanelClass<ModalRequiredProps & ModalProps> {
static animateTypeFilter: (props: any) => any;
static defaultProps: {
shouldCloseOnEsc: boolean;
showCloseBtn: boolean;
needMaxBtn: boolean;
needMinBtn: boolean;
needHeader: boolean;
animation: boolean;
needMask: boolean;
draggable: boolean;
duration: number;
marginTop: string;
modalType: string;
title: string;
className: string;
children: null;
topClassName: string;
maxHeightable: boolean;
};
state: any;
__mount: any;
ukeLayout: any;
componentDidMount(): void;
shouldComponentUpdate(nextProps: any, nextState: any, nextContext: any): boolean;
componentWillUnmount(): void;
componentDidUpdate(preProps: any): void;
toggleTopClass: (isAdd: any) => void;
setContentFocus: () => void;
handleKeyDown: (event: any) => void;
wrapPropsForTMPL: () => {
isOpen: boolean;
onCloseModal: () => void;
style?: React.CSSProperties | undefined;
duration?: number | undefined;
title?: string | undefined;
id?: string | number | undefined;
className?: string | undefined;
topClassName?: string | undefined;
width?: string | number | undefined;
idx?: string | number | undefined;
marginTop?: string | number | undefined;
animation?: boolean | undefined;
clickBgToClose?: boolean | undefined;
draggable?: boolean | undefined;
needMask?: boolean | undefined;
showCloseBtn?: boolean | undefined;
needMaxBtn?: boolean | undefined;
needMinBtn?: boolean | undefined;
needHeader?: boolean | undefined;
maxHeightable?: boolean | undefined;
shouldCloseOnEsc?: boolean | undefined;
isMinimize?: boolean | undefined;
modalType?: "normal" | "side" | undefined;
position?: "left" | "right" | "bottom" | "top" | undefined;
template?: ((modalProps?: {} | undefined) => Children) | undefined;
Header?: ((modalProps?: {} | undefined) => Children) | undefined;
onClose?: ((modalProps?: {} | undefined) => void) | undefined;
modalLayoutDOM?: Children;
children?: string | boolean | JSX.Element | JSX.Element[] | (string & {}) | (string & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (string & React.ReactNodeArray) | (string & React.ReactPortal) | (false & {}) | (false & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (false & React.ReactNodeArray) | (false & React.ReactPortal) | (true & {}) | (true & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (true & React.ReactNodeArray) | (true & React.ReactPortal) | (JSX.Element & string) | (JSX.Element & number) | (JSX.Element & false) | (JSX.Element & true) | (JSX.Element & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (JSX.Element & React.ReactNodeArray) | (JSX.Element & React.ReactPortal) | (JSX.Element[] & string) | (JSX.Element[] & number) | (JSX.Element[] & false) | (JSX.Element[] & true) | (JSX.Element[] & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (JSX.Element[] & React.ReactNodeArray) | (JSX.Element[] & React.ReactPortal) | null | undefined;
sectionId?: string | number | undefined;
minimizeWindow?: ((sectionId: React.ReactText) => void) | undefined;
selectWindow?: ((sectionId: React.ReactText) => void) | undefined;
topLimit?: number | undefined;
};
maximinzeWindow: (isMaximize: any) => void;
closeModal: () => void;
render(): any;
}