antd
Version:
An enterprise-class UI design language and React components implementation
237 lines (236 loc) • 8.02 kB
JavaScript
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _drawer = _interopRequireDefault(require("@rc-component/drawer"));
var _ref = require("@rc-component/util/lib/ref");
var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
var _clsx = require("clsx");
var _ContextIsolator = _interopRequireDefault(require("../_util/ContextIsolator"));
var _hooks = require("../_util/hooks");
var _motion = require("../_util/motion");
var _warning = require("../_util/warning");
var _zindexContext = _interopRequireDefault(require("../_util/zindexContext"));
var _configProvider = require("../config-provider");
var _context = require("../config-provider/context");
var _context2 = require("../watermark/context");
var _DrawerPanel = _interopRequireDefault(require("./DrawerPanel"));
var _style = _interopRequireDefault(require("./style"));
const _SizeTypes = ['default', 'large'];
const defaultPushState = {
distance: 180
};
const DEFAULT_SIZE = 378;
const Drawer = props => {
const {
rootClassName,
size,
defaultSize = DEFAULT_SIZE,
height,
width,
mask: drawerMask,
push = defaultPushState,
open,
afterOpenChange,
onClose,
prefixCls: customizePrefixCls,
getContainer: customizeGetContainer,
panelRef = null,
style,
className,
resizable,
'aria-labelledby': ariaLabelledby,
// Deprecated
maskStyle,
drawerStyle,
contentWrapperStyle,
destroyOnClose,
destroyOnHidden,
...rest
} = props;
const {
placement
} = rest;
const id = (0, _useId.default)();
const ariaId = rest.title ? id : undefined;
const {
getPopupContainer,
getPrefixCls,
direction,
className: contextClassName,
style: contextStyle,
classNames: contextClassNames,
styles: contextStyles,
mask: contextMask
} = (0, _context.useComponentConfig)('drawer');
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
const getContainer =
// 有可能为 false，所以不能直接判断
customizeGetContainer === undefined && getPopupContainer ? () => getPopupContainer(document.body) : customizeGetContainer;
// ========================== Warning ===========================
if (process.env.NODE_ENV !== 'production') {
const warning = (0, _warning.devUseWarning)('Drawer');
[['headerStyle', 'styles.header'], ['bodyStyle', 'styles.body'], ['footerStyle', 'styles.footer'], ['contentWrapperStyle', 'styles.wrapper'], ['maskStyle', 'styles.mask'], ['drawerStyle', 'styles.section'], ['destroyInactivePanel', 'destroyOnHidden'], ['width', 'size'], ['height', 'size']].forEach(([deprecatedName, newName]) => {
warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
});
if (getContainer !== undefined && props.style?.position === 'absolute') {
process.env.NODE_ENV !== "production" ? warning(false, 'breaking', '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.') : void 0;
}
}
// ============================ Size ============================
const drawerSize = React.useMemo(() => {
if (typeof size === 'number') {
return size;
}
if (size === 'large') {
return 736;
}
if (size === 'default') {
return DEFAULT_SIZE;
}
if (!placement || placement === 'left' || placement === 'right') {
return width;
}
return height;
}, [size, placement, width, height]);
// =========================== Motion ===========================
const maskMotion = {
motionName: (0, _motion.getTransitionName)(prefixCls, 'mask-motion'),
motionAppear: true,
motionEnter: true,
motionLeave: true,
motionDeadline: 500
};
const panelMotion = motionPlacement => ({
motionName: (0, _motion.getTransitionName)(prefixCls, `panel-motion-${motionPlacement}`),
motionAppear: true,
motionEnter: true,
motionLeave: true,
motionDeadline: 500
});
// ============================ Refs ============================
// Select `ant-drawer-content` by `panelRef`
const innerPanelRef = (0, _context2.usePanelRef)();
const mergedPanelRef = (0, _ref.composeRef)(panelRef, innerPanelRef);
// ============================ zIndex ============================
const [zIndex, contextZIndex] = (0, _hooks.useZIndex)('Drawer', rest.zIndex);
// =========================== Render ===========================
const {
classNames,
styles,
rootStyle
} = rest;
const [mergedMask, maskBlurClassName] = (0, _hooks.useMergedMask)(drawerMask, contextMask, prefixCls);
const mergedProps = {
...props,
zIndex,
panelRef,
mask: mergedMask,
defaultSize,
push
};
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
props: mergedProps
});
const drawerClassName = (0, _clsx.clsx)({
'no-mask': !mergedMask,
[`${prefixCls}-rtl`]: direction === 'rtl'
}, rootClassName, hashId, cssVarCls, mergedClassNames.root);
return /*#__PURE__*/React.createElement(_ContextIsolator.default, {
form: true,
space: true
}, /*#__PURE__*/React.createElement(_zindexContext.default.Provider, {
value: contextZIndex
}, /*#__PURE__*/React.createElement(_drawer.default, {
prefixCls: prefixCls,
onClose: onClose,
maskMotion: maskMotion,
motion: panelMotion,
...rest,
classNames: {
mask: (0, _clsx.clsx)(mergedClassNames.mask, maskBlurClassName.mask),
section: mergedClassNames.section,
wrapper: mergedClassNames.wrapper,
dragger: mergedClassNames.dragger
},
styles: {
mask: {
...mergedStyles.mask,
...maskStyle
},
section: {
...mergedStyles.section,
...drawerStyle
},
wrapper: {
...mergedStyles.wrapper,
...contentWrapperStyle
},
dragger: mergedStyles.dragger
},
open: open,
mask: mergedMask,
push: push,
size: drawerSize,
defaultSize: defaultSize,
style: {
...contextStyle,
...style
},
rootStyle: {
...rootStyle,
...mergedStyles.root
},
className: (0, _clsx.clsx)(contextClassName, className),
rootClassName: drawerClassName,
getContainer: getContainer,
afterOpenChange: afterOpenChange,
panelRef: mergedPanelRef,
zIndex: zIndex,
...(resizable ? {
resizable
} : {}),
"aria-labelledby": ariaLabelledby ?? ariaId,
destroyOnHidden: destroyOnHidden ?? destroyOnClose
}, /*#__PURE__*/React.createElement(_DrawerPanel.default, {
prefixCls: prefixCls,
size: size,
...rest,
ariaId: ariaId,
onClose: onClose
}))));
};
/** @private Internal Component. Do not use in your production. */
const PurePanel = props => {
const {
prefixCls: customizePrefixCls,
style,
className,
placement = 'right',
...restProps
} = props;
const {
getPrefixCls
} = React.useContext(_configProvider.ConfigContext);
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
const cls = (0, _clsx.clsx)(prefixCls, `${prefixCls}-pure`, `${prefixCls}-${placement}`, hashId, cssVarCls, className);
return /*#__PURE__*/React.createElement("div", {
className: cls,
style: style
}, /*#__PURE__*/React.createElement(_DrawerPanel.default, {
prefixCls: prefixCls,
...restProps
}));
};
Drawer._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
if (process.env.NODE_ENV !== 'production') {
Drawer.displayName = 'Drawer';
}
var _default = exports.default = Drawer;