zent
Version:
一套前端设计语言和基于React的实现
50 lines (49 loc) • 2.94 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback, useRef } from 'react';
import cx from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { TransitionTimeOut, StyleMap } from '../../constants';
import { renderHeader } from './Header';
import { renderFooter } from './Footer';
import { renderCloseBtn } from './CloseBtn';
import { addEventListener } from '../../../utils/component/event-handler';
var DrawerContent = function (_a) {
var _b;
var mask = _a.mask, visible = _a.visible, title = _a.title, children = _a.children, footer = _a.footer, placement = _a.placement, closeBtn = _a.closeBtn, onClose = _a.onClose, onExited = _a.onExited, rest = __rest(_a, ["mask", "visible", "title", "children", "footer", "placement", "closeBtn", "onClose", "onExited"]);
var width = 'width' in rest && rest.width;
var height = 'height' in rest && rest.height;
var unsubscribePageClickRef = useRef();
var drawerEl = useRef();
var onDrawerOpened = useCallback(function () {
if (!mask) {
unsubscribePageClickRef.current = addEventListener(document, 'click', function (e) {
var _a;
var target = e.target;
if (document.contains(target) &&
!((_a = drawerEl.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
onClose();
}
});
}
}, [onClose, mask]);
var onDrawerExit = useCallback(function () {
var _a;
if (!mask) {
(_a = unsubscribePageClickRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribePageClickRef);
}
}, [mask]);
var customWH = useMemo(function () {
var handleNumber = function (data) {
return typeof data === 'number' ? data + "px" : data;
};
if ('left' === placement || 'right' === placement) {
return { width: handleNumber(width) };
}
return { height: handleNumber(height) };
}, [placement, width, height]);
return (_jsx(CSSTransition, __assign({ appear: true, mountOnEnter: true, unmountOnExit: true, in: visible, timeout: TransitionTimeOut, classNames: "zent-drawer-transition-" + placement, onEntered: onDrawerOpened, onExit: onDrawerExit, onExited: onExited }, { children: _jsxs("div", __assign({ ref: drawerEl, className: cx('zent-drawer-content', (_b = {},
_b["zent-drawer-content--transparent"] = !mask,
_b)), style: __assign(__assign({}, StyleMap[placement]), customWH), "data-zv": '10.0.17' }, { children: [renderCloseBtn(closeBtn, onClose), renderHeader(title), _jsx("div", __assign({ className: "zent-drawer-body", "data-zv": '10.0.17' }, { children: children }), void 0), renderFooter(footer)] }), void 0) }), void 0));
};
export default DrawerContent;