ant-design/components/modal/PurePanel.tsx
MadCcc 1ac0bcaa60
Some checks are pending
Publish Any Commit / build (push) Waiting to run
✅ test v6 / lint (push) Waiting to run
✅ test v6 / test-react-legacy (18, 1/2) (push) Waiting to run
✅ test v6 / test-react-legacy (18, 2/2) (push) Waiting to run
✅ test v6 / test-node (push) Waiting to run
✅ test v6 / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test v6 / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test v6 / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test v6 / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test v6 / test-coverage (push) Blocked by required conditions
✅ test v6 / build (push) Waiting to run
✅ test v6 / test lib/es module (es, 1/2) (push) Waiting to run
✅ test v6 / test lib/es module (es, 2/2) (push) Waiting to run
✅ test v6 / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test v6 / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: use cssVar by default (#52671)
* feat: use cssVar by default

* chore: update deps

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* chore: test

* chore: update

* chore: update scripts

* chore: UPDATE TEST

* feat: add root

* chore: update snapshot

* chore: fix test case

* chore: fix cycle deps

* feat: rm legacy css variables configuration

* chore: update test case

* chore: update

* chore: fix test

* chore: update overrides

* chore: bump cssinjs

* chore: add test case
2025-02-24 15:35:29 +08:00

89 lines
2.3 KiB
TypeScript

import * as React from 'react';
import classNames from 'classnames';
import { Panel } from '@rc-component/dialog';
import type { PanelProps } from '@rc-component/dialog/lib/Dialog/Content/Panel';
import { withPureRenderTheme } from '../_util/PurePanel';
import { ConfigContext } from '../config-provider';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
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' | 'footer'>,
Pick<ModalFuncProps, 'type' | 'footer'> {
prefixCls?: string;
style?: React.CSSProperties;
}
const PurePanel: React.FC<PurePanelProps> = (props) => {
const {
prefixCls: customizePrefixCls,
className,
closeIcon,
closable,
type,
title,
children,
footer,
...restProps
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
const prefixCls = customizePrefixCls || getPrefixCls('modal');
const rootCls = useCSSVarCls(rootPrefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
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}
prefixCls={prefixCls}
confirmPrefixCls={confirmPrefixCls}
rootPrefixCls={rootPrefixCls}
content={children}
/>
),
};
} else {
additionalProps = {
closable: closable ?? true,
title,
footer: footer !== null && <Footer {...props} />,
children,
};
}
return (
<Panel
prefixCls={prefixCls}
className={classNames(
hashId,
`${prefixCls}-pure-panel`,
type && confirmPrefixCls,
type && `${confirmPrefixCls}-${type}`,
className,
cssVarCls,
rootCls,
)}
{...restProps}
closeIcon={renderCloseIcon(prefixCls, closeIcon)}
closable={closable}
{...additionalProps}
/>
);
};
export default withPureRenderTheme(PurePanel);