first commit
This commit is contained in:
rayd1o
276
frontend/node_modules/rc-drawer/lib/DrawerPopup.js
generated
vendored
Normal file
276
frontend/node_modules/rc-drawer/lib/DrawerPopup.js
generated
vendored
Normal file
@@ -0,0 +1,276 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
||||
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
||||
var _classnames = _interopRequireDefault(require("classnames"));
|
||||
var _rcMotion = _interopRequireDefault(require("rc-motion"));
|
||||
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
|
||||
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _context = _interopRequireDefault(require("./context"));
|
||||
var _DrawerPanel = _interopRequireDefault(require("./DrawerPanel"));
|
||||
var _util = require("./util");
|
||||
var sentinelStyle = {
|
||||
width: 0,
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
outline: 'none',
|
||||
position: 'absolute'
|
||||
};
|
||||
function DrawerPopup(props, ref) {
|
||||
var _ref, _pushConfig$distance, _pushConfig;
|
||||
var prefixCls = props.prefixCls,
|
||||
open = props.open,
|
||||
placement = props.placement,
|
||||
inline = props.inline,
|
||||
push = props.push,
|
||||
forceRender = props.forceRender,
|
||||
autoFocus = props.autoFocus,
|
||||
keyboard = props.keyboard,
|
||||
drawerClassNames = props.classNames,
|
||||
rootClassName = props.rootClassName,
|
||||
rootStyle = props.rootStyle,
|
||||
zIndex = props.zIndex,
|
||||
className = props.className,
|
||||
id = props.id,
|
||||
style = props.style,
|
||||
motion = props.motion,
|
||||
width = props.width,
|
||||
height = props.height,
|
||||
children = props.children,
|
||||
mask = props.mask,
|
||||
maskClosable = props.maskClosable,
|
||||
maskMotion = props.maskMotion,
|
||||
maskClassName = props.maskClassName,
|
||||
maskStyle = props.maskStyle,
|
||||
afterOpenChange = props.afterOpenChange,
|
||||
onClose = props.onClose,
|
||||
onMouseEnter = props.onMouseEnter,
|
||||
onMouseOver = props.onMouseOver,
|
||||
onMouseLeave = props.onMouseLeave,
|
||||
onClick = props.onClick,
|
||||
onKeyDown = props.onKeyDown,
|
||||
onKeyUp = props.onKeyUp,
|
||||
styles = props.styles,
|
||||
drawerRender = props.drawerRender;
|
||||
|
||||
// ================================ Refs ================================
|
||||
var panelRef = React.useRef();
|
||||
var sentinelStartRef = React.useRef();
|
||||
var sentinelEndRef = React.useRef();
|
||||
React.useImperativeHandle(ref, function () {
|
||||
return panelRef.current;
|
||||
});
|
||||
var onPanelKeyDown = function onPanelKeyDown(event) {
|
||||
var keyCode = event.keyCode,
|
||||
shiftKey = event.shiftKey;
|
||||
switch (keyCode) {
|
||||
// Tab active
|
||||
case _KeyCode.default.TAB:
|
||||
{
|
||||
if (keyCode === _KeyCode.default.TAB) {
|
||||
if (!shiftKey && document.activeElement === sentinelEndRef.current) {
|
||||
var _sentinelStartRef$cur;
|
||||
(_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 || _sentinelStartRef$cur.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
} else if (shiftKey && document.activeElement === sentinelStartRef.current) {
|
||||
var _sentinelEndRef$curre;
|
||||
(_sentinelEndRef$curre = sentinelEndRef.current) === null || _sentinelEndRef$curre === void 0 || _sentinelEndRef$curre.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Close
|
||||
case _KeyCode.default.ESC:
|
||||
{
|
||||
if (onClose && keyboard) {
|
||||
event.stopPropagation();
|
||||
onClose(event);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ========================== Control ===========================
|
||||
// Auto Focus
|
||||
React.useEffect(function () {
|
||||
if (open && autoFocus) {
|
||||
var _panelRef$current;
|
||||
(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// ============================ Push ============================
|
||||
var _React$useState = React.useState(false),
|
||||
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
||||
pushed = _React$useState2[0],
|
||||
setPushed = _React$useState2[1];
|
||||
var parentContext = React.useContext(_context.default);
|
||||
|
||||
// Merge push distance
|
||||
var pushConfig;
|
||||
if (typeof push === 'boolean') {
|
||||
pushConfig = push ? {} : {
|
||||
distance: 0
|
||||
};
|
||||
} else {
|
||||
pushConfig = push || {};
|
||||
}
|
||||
var pushDistance = (_ref = (_pushConfig$distance = (_pushConfig = pushConfig) === null || _pushConfig === void 0 ? void 0 : _pushConfig.distance) !== null && _pushConfig$distance !== void 0 ? _pushConfig$distance : parentContext === null || parentContext === void 0 ? void 0 : parentContext.pushDistance) !== null && _ref !== void 0 ? _ref : 180;
|
||||
var mergedContext = React.useMemo(function () {
|
||||
return {
|
||||
pushDistance: pushDistance,
|
||||
push: function push() {
|
||||
setPushed(true);
|
||||
},
|
||||
pull: function pull() {
|
||||
setPushed(false);
|
||||
}
|
||||
};
|
||||
}, [pushDistance]);
|
||||
|
||||
// ========================= ScrollLock =========================
|
||||
// Tell parent to push
|
||||
React.useEffect(function () {
|
||||
if (open) {
|
||||
var _parentContext$push;
|
||||
parentContext === null || parentContext === void 0 || (_parentContext$push = parentContext.push) === null || _parentContext$push === void 0 || _parentContext$push.call(parentContext);
|
||||
} else {
|
||||
var _parentContext$pull;
|
||||
parentContext === null || parentContext === void 0 || (_parentContext$pull = parentContext.pull) === null || _parentContext$pull === void 0 || _parentContext$pull.call(parentContext);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// Clean up
|
||||
React.useEffect(function () {
|
||||
return function () {
|
||||
var _parentContext$pull2;
|
||||
parentContext === null || parentContext === void 0 || (_parentContext$pull2 = parentContext.pull) === null || _parentContext$pull2 === void 0 || _parentContext$pull2.call(parentContext);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ============================ Mask ============================
|
||||
var maskNode = /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
|
||||
key: "mask"
|
||||
}, maskMotion, {
|
||||
visible: mask && open
|
||||
}), function (_ref2, maskRef) {
|
||||
var motionMaskClassName = _ref2.className,
|
||||
motionMaskStyle = _ref2.style;
|
||||
return /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _classnames.default)("".concat(prefixCls, "-mask"), motionMaskClassName, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.mask, maskClassName),
|
||||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, motionMaskStyle), maskStyle), styles === null || styles === void 0 ? void 0 : styles.mask),
|
||||
onClick: maskClosable && open ? onClose : undefined,
|
||||
ref: maskRef
|
||||
});
|
||||
});
|
||||
|
||||
// =========================== Panel ============================
|
||||
var motionProps = typeof motion === 'function' ? motion(placement) : motion;
|
||||
var wrapperStyle = {};
|
||||
if (pushed && pushDistance) {
|
||||
switch (placement) {
|
||||
case 'top':
|
||||
wrapperStyle.transform = "translateY(".concat(pushDistance, "px)");
|
||||
break;
|
||||
case 'bottom':
|
||||
wrapperStyle.transform = "translateY(".concat(-pushDistance, "px)");
|
||||
break;
|
||||
case 'left':
|
||||
wrapperStyle.transform = "translateX(".concat(pushDistance, "px)");
|
||||
break;
|
||||
default:
|
||||
wrapperStyle.transform = "translateX(".concat(-pushDistance, "px)");
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (placement === 'left' || placement === 'right') {
|
||||
wrapperStyle.width = (0, _util.parseWidthHeight)(width);
|
||||
} else {
|
||||
wrapperStyle.height = (0, _util.parseWidthHeight)(height);
|
||||
}
|
||||
var eventHandlers = {
|
||||
onMouseEnter: onMouseEnter,
|
||||
onMouseOver: onMouseOver,
|
||||
onMouseLeave: onMouseLeave,
|
||||
onClick: onClick,
|
||||
onKeyDown: onKeyDown,
|
||||
onKeyUp: onKeyUp
|
||||
};
|
||||
var panelNode = /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
|
||||
key: "panel"
|
||||
}, motionProps, {
|
||||
visible: open,
|
||||
forceRender: forceRender,
|
||||
onVisibleChanged: function onVisibleChanged(nextVisible) {
|
||||
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(nextVisible);
|
||||
},
|
||||
removeOnLeave: false,
|
||||
leavedClassName: "".concat(prefixCls, "-content-wrapper-hidden")
|
||||
}), function (_ref3, motionRef) {
|
||||
var motionClassName = _ref3.className,
|
||||
motionStyle = _ref3.style;
|
||||
var content = /*#__PURE__*/React.createElement(_DrawerPanel.default, (0, _extends2.default)({
|
||||
id: id,
|
||||
containerRef: motionRef,
|
||||
prefixCls: prefixCls,
|
||||
className: (0, _classnames.default)(className, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.content),
|
||||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), styles === null || styles === void 0 ? void 0 : styles.content)
|
||||
}, (0, _pickAttrs.default)(props, {
|
||||
aria: true
|
||||
}), eventHandlers), children);
|
||||
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
|
||||
className: (0, _classnames.default)("".concat(prefixCls, "-content-wrapper"), drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.wrapper, motionClassName),
|
||||
style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, wrapperStyle), motionStyle), styles === null || styles === void 0 ? void 0 : styles.wrapper)
|
||||
}, (0, _pickAttrs.default)(props, {
|
||||
data: true
|
||||
})), drawerRender ? drawerRender(content) : content);
|
||||
});
|
||||
|
||||
// =========================== Render ===========================
|
||||
var containerStyle = (0, _objectSpread2.default)({}, rootStyle);
|
||||
if (zIndex) {
|
||||
containerStyle.zIndex = zIndex;
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(_context.default.Provider, {
|
||||
value: mergedContext
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
className: (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(placement), rootClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-open"), open), "".concat(prefixCls, "-inline"), inline)),
|
||||
style: containerStyle,
|
||||
tabIndex: -1,
|
||||
ref: panelRef,
|
||||
onKeyDown: onPanelKeyDown
|
||||
}, maskNode, /*#__PURE__*/React.createElement("div", {
|
||||
tabIndex: 0,
|
||||
ref: sentinelStartRef,
|
||||
style: sentinelStyle,
|
||||
"aria-hidden": "true",
|
||||
"data-sentinel": "start"
|
||||
}), panelNode, /*#__PURE__*/React.createElement("div", {
|
||||
tabIndex: 0,
|
||||
ref: sentinelEndRef,
|
||||
style: sentinelStyle,
|
||||
"aria-hidden": "true",
|
||||
"data-sentinel": "end"
|
||||
})));
|
||||
}
|
||||
var RefDrawerPopup = /*#__PURE__*/React.forwardRef(DrawerPopup);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
RefDrawerPopup.displayName = 'DrawerPopup';
|
||||
}
|
||||
var _default = exports.default = RefDrawerPopup;
|
||||
Reference in New Issue
Block a user