mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 03:29:39 +08:00
commit
2a35f74d74
@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library.
|
||||
|
||||
[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
|
||||
|
||||
English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md)
|
||||
English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
|
||||
|
||||
## ✨ Features
|
||||
|
||||
|
@ -22,19 +22,19 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
|
||||
| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - | |
|
||||
| bodyStyle | Style of the drawer content part | object | - | |
|
||||
| bodyStyle | Style of the drawer content part | CSSProperties | - | |
|
||||
| className | The class name of the container of the Drawer dialog | string | - | |
|
||||
| closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true | |
|
||||
| closeIcon | Custom close icon | ReactNode | <CloseOutlined /> | |
|
||||
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | |
|
||||
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |
|
||||
| drawerStyle | Style of the popup layer element | object | - | |
|
||||
| drawerStyle | Style of the popup layer element | CSSProperties | - | |
|
||||
| extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
|
||||
| footer | The footer for Drawer | ReactNode | - | |
|
||||
| footerStyle | Style of the drawer footer part | CSSProperties | - | |
|
||||
| forceRender | Prerender Drawer component forcely | boolean | false | |
|
||||
| getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
||||
| headerStyle | Style of the drawer header part | object | - | |
|
||||
| headerStyle | Style of the drawer header part | CSSProperties | - | |
|
||||
| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 378 | |
|
||||
| keyboard | Whether support press esc to close | boolean | true | |
|
||||
| mask | Whether to show mask or not | boolean | true | |
|
||||
|
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import RcDrawer from 'rc-drawer';
|
||||
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigContext, DirectionType } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { tuple } from '../_util/type';
|
||||
import useForceUpdate from '../_util/hooks/useForceUpdate';
|
||||
|
||||
@ -64,22 +64,13 @@ export interface DrawerProps {
|
||||
footer?: React.ReactNode;
|
||||
footerStyle?: React.CSSProperties;
|
||||
level?: string | string[] | null | undefined;
|
||||
levelMove?:
|
||||
| ILevelMove
|
||||
| ((e: { target: HTMLElement; open: boolean }) => ILevelMove);
|
||||
}
|
||||
|
||||
export interface IDrawerState {
|
||||
push?: boolean;
|
||||
}
|
||||
|
||||
interface InternalDrawerProps extends DrawerProps {
|
||||
direction: DirectionType;
|
||||
levelMove?: ILevelMove | ((e: { target: HTMLElement; open: boolean }) => ILevelMove);
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const defaultPushState: PushState = { distance: 180 };
|
||||
|
||||
const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
|
||||
const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
|
||||
(
|
||||
{
|
||||
width,
|
||||
@ -95,9 +86,7 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
|
||||
closeIcon = <CloseOutlined />,
|
||||
bodyStyle,
|
||||
drawerStyle,
|
||||
prefixCls,
|
||||
className,
|
||||
direction,
|
||||
visible,
|
||||
children,
|
||||
zIndex,
|
||||
@ -108,6 +97,8 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
|
||||
onClose,
|
||||
footer,
|
||||
footerStyle,
|
||||
prefixCls: customizePrefixCls,
|
||||
getContainer: customizeGetContainer,
|
||||
extra,
|
||||
...rest
|
||||
},
|
||||
@ -118,6 +109,14 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
|
||||
const parentDrawer = React.useContext(DrawerContext);
|
||||
const destroyClose = React.useRef<boolean>(false);
|
||||
|
||||
const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
|
||||
const getContainer =
|
||||
// 有可能为 false,所以不能直接判断
|
||||
customizeGetContainer === undefined && getPopupContainer
|
||||
? () => getPopupContainer(document.body)
|
||||
: customizeGetContainer;
|
||||
|
||||
React.useEffect(() => {
|
||||
// fix: delete drawer in child and re-render, no push started.
|
||||
// <Drawer>{show && <Drawer />}</Drawer>
|
||||
@ -320,6 +319,7 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
|
||||
showMask={mask}
|
||||
style={getRcDrawerStyle()}
|
||||
className={drawerClassName}
|
||||
getContainer={getContainer}
|
||||
>
|
||||
{renderBody()}
|
||||
</RcDrawer>
|
||||
@ -330,30 +330,4 @@ const Drawer = React.forwardRef<DrawerRef, InternalDrawerProps>(
|
||||
|
||||
Drawer.displayName = 'Drawer';
|
||||
|
||||
const DrawerWrapper: React.FC<DrawerProps> = React.forwardRef<DrawerRef, DrawerProps>(
|
||||
(props, ref) => {
|
||||
const { prefixCls: customizePrefixCls, getContainer: customizeGetContainer } = props;
|
||||
const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
|
||||
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
|
||||
const getContainer =
|
||||
// 有可能为 false,所以不能直接判断
|
||||
customizeGetContainer === undefined && getPopupContainer
|
||||
? () => getPopupContainer(document.body)
|
||||
: customizeGetContainer;
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
{...props}
|
||||
ref={ref}
|
||||
prefixCls={prefixCls}
|
||||
getContainer={getContainer}
|
||||
direction={direction}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
DrawerWrapper.displayName = 'DrawerWrapper';
|
||||
|
||||
export default DrawerWrapper;
|
||||
export default Drawer;
|
||||
|
@ -113,7 +113,7 @@ export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
|
||||
defaultFilteredValue?: FilterValue | null;
|
||||
filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
|
||||
filterMode?: 'menu' | 'tree';
|
||||
filterSearch?: boolean;
|
||||
filterSearch?: FilterSearchType;
|
||||
onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
|
||||
filterDropdownVisible?: boolean;
|
||||
onFilterDropdownVisibleChange?: (visible: boolean) => void;
|
||||
|
Loading…
Reference in New Issue
Block a user