test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 11:28:30 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

添加 Modal>Header, Title, Body, Footer 相关组件

Browse Source
This commit is contained in:
2betop 2020-05-26 09:36:49 +08:00
parent a3abce8ef4
commit 6b13871f7d
1 changed files with 98 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Modal.tsx
View File

@ -11,11 +11,11 @@ import Transition, {
EXITING
} from 'react-transition-group/Transition';
import {Portal} from 'react-overlays';
import cx from 'classnames';
import {current, addModal, removeModal} from './ModalManager';
import {ClassNamesFn, themeable} from '../theme';
import {ClassNamesFn, themeable, ThemeProps} from '../theme';
import {Icon} from './icons';
export interface ModalProps {
export interface ModalProps extends ThemeProps {
className?: string;
contentClassName?: string;
size?: any;
@ -25,8 +25,6 @@ export interface ModalProps {
container?: any;
show?: boolean;
disabled?: boolean;
classPrefix: string;
classnames: ClassNamesFn;
onExited?: () => void;
onEntered?: () => void;
}
@ -45,6 +43,88 @@ export class Modal extends React.Component<ModalProps, ModalState> {
overlay: true
};
static Header = themeable(
({
classnames: cx,
className,
showCloseButton,
onClose,
children,
classPrefix,
...rest
}: ThemeProps & {
className?: string;
showCloseButton?: boolean;
onClose?: () => void;
children?: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>) => (
<div {...rest} className={cx('Modal-header', className)}>
{showCloseButton !== false ? (
<a
data-tooltip="关闭弹窗"
data-position="left"
onClick={onClose}
className={cx('Modal-close')}
>
<Icon icon="close" className="icon" />
</a>
) : null}
{children}
</div>
)
);
static Title = themeable(
({
classnames: cx,
className,
children,
classPrefix,
...rest
}: ThemeProps & {
className?: string;
children?: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>) => (
<div {...rest} className={cx('Modal-title', className)}>
{children}
</div>
)
);
static Body = themeable(
({
classnames: cx,
className,
children,
classPrefix,
...rest
}: ThemeProps & {
className?: string;
children?: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>) => (
<div {...rest} className={cx('Modal-body', className)}>
{children}
</div>
)
);
static Footer = themeable(
({
classnames: cx,
className,
children,
classPrefix,
...rest
}: ThemeProps & {
className?: string;
children?: React.ReactNode;
} & React.HTMLAttributes<HTMLDivElement>) => (
<div {...rest} className={cx('Modal-footer', className)}>
{children}
</div>
)
);
componentDidMount() {
if (this.props.show) {
this.handleEntered();
@ -90,7 +170,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
show,
size,
overlay,
classPrefix: ns
classnames: cx
} = this.props;
return (
@ -109,19 +189,19 @@ export class Modal extends React.Component<ModalProps, ModalState> {
ref={this.modalRef}
role="dialog"
className={cx(
`amis-dialog-widget ${ns}Modal`,
`amis-dialog-widget Modal`,
{
[`${ns}Modal--${size}`]: size
[`Modal--${size}`]: size
},
className
)}
>
{overlay ? (
<div className={cx(`${ns}Modal-overlay`, fadeStyles[status])} />
<div className={cx(`Modal-overlay`, fadeStyles[status])} />
) : null}
<div
className={cx(
`${ns}Modal-content`,
`Modal-content`,
contentClassName,
fadeStyles[status]
)}
@ -136,4 +216,11 @@ export class Modal extends React.Component<ModalProps, ModalState> {
}
}
export default themeable(Modal);
const themedModal = themeable(Modal);
export default themedModal as typeof themedModal & {
Header: typeof Modal.Header;
Title: typeof Modal.Title;
Body: typeof Modal.Body;
Footer: typeof Modal.Footer;
};