ant-design/components/modal/PurePanel.tsx
2023-06-06 09:54:14 +08:00

84 lines
2.1 KiB
TypeScript

/* eslint-disable react/jsx-no-useless-fragment */
import classNames from 'classnames';
import { Panel } from 'rc-dialog';
import type { PanelProps } from 'rc-dialog/lib/Dialog/Content/Panel';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import { ConfirmContent } from './ConfirmDialog';
import type { ModalFuncProps } from './interface';
import { Footer, renderCloseIcon } from './shared';
import useStyle from './style';
export interface PurePanelProps
extends Omit<PanelProps, 'prefixCls'>,
Pick<ModalFuncProps, 'type'> {
prefixCls?: string;
style?: React.CSSProperties;
}
const PurePanel: React.FC<PurePanelProps> = (props) => {
const {
prefixCls: customizePrefixCls,
className,
closeIcon,
closable,
type,
title,
children,
...restProps
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
const prefixCls = customizePrefixCls || getPrefixCls('modal');
const [, hashId] = useStyle(prefixCls);
const confirmPrefixCls = `${prefixCls}-confirm`;
// Choose target props by confirm mark
let additionalProps: Partial<PanelProps> = {};
if (type) {
additionalProps = {
closable: closable ?? false,
title: '',
footer: '',
children: (
<ConfirmContent
{...props}
confirmPrefixCls={confirmPrefixCls}
rootPrefixCls={rootPrefixCls}
content={children}
/>
),
};
} else {
additionalProps = {
closable: closable ?? true,
title,
footer: props.footer === undefined ? <Footer {...props} /> : props.footer,
children,
};
}
return (
<Panel
prefixCls={prefixCls}
className={classNames(
hashId,
`${prefixCls}-pure-panel`,
type && confirmPrefixCls,
type && `${confirmPrefixCls}-${type}`,
className,
)}
{...restProps}
closeIcon={renderCloseIcon(prefixCls, closeIcon)}
closable={closable}
{...additionalProps}
/>
);
};
export default PurePanel;