|
|
"use strict";
|
|
|
(self["webpackChunk"] = self["webpackChunk"] || []).push([[38255,43428],{
|
|
|
|
|
|
/***/ 88996:
|
|
|
/*!************************************************************************************************************!*\
|
|
|
!*** ./node_modules/_@ant-design_icons@5.3.6@@ant-design/icons/es/icons/PlusCircleOutlined.js + 1 modules ***!
|
|
|
\************************************************************************************************************/
|
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
|
|
|
|
|
// EXPORTS
|
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
|
Z: function() { return /* binding */ icons_PlusCircleOutlined; }
|
|
|
});
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.24.4@@babel/runtime/helpers/esm/extends.js
|
|
|
var esm_extends = __webpack_require__(24931);
|
|
|
// EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/index.js
|
|
|
var _react_17_0_2_react = __webpack_require__(59301);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_@ant-design_icons-svg@4.4.2@@ant-design/icons-svg/es/asn/PlusCircleOutlined.js
|
|
|
// This icon file is generated automatically.
|
|
|
var PlusCircleOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z" } }, { "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" } }] }, "name": "plus-circle", "theme": "outlined" };
|
|
|
/* harmony default export */ var asn_PlusCircleOutlined = (PlusCircleOutlined);
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_@ant-design_icons@5.3.6@@ant-design/icons/es/components/AntdIcon.js + 3 modules
|
|
|
var AntdIcon = __webpack_require__(99194);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_@ant-design_icons@5.3.6@@ant-design/icons/es/icons/PlusCircleOutlined.js
|
|
|
|
|
|
// GENERATE BY ./scripts/generate.ts
|
|
|
// DON NOT EDIT IT MANUALLY
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var PlusCircleOutlined_PlusCircleOutlined = function PlusCircleOutlined(props, ref) {
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(AntdIcon/* default */.Z, (0,esm_extends/* default */.Z)({}, props, {
|
|
|
ref: ref,
|
|
|
icon: asn_PlusCircleOutlined
|
|
|
}));
|
|
|
};
|
|
|
|
|
|
/** */
|
|
|
var RefIcon = /*#__PURE__*/_react_17_0_2_react.forwardRef(PlusCircleOutlined_PlusCircleOutlined);
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var icons_PlusCircleOutlined = (RefIcon);
|
|
|
|
|
|
/***/ }),
|
|
|
|
|
|
/***/ 28103:
|
|
|
/*!***********************************************************************!*\
|
|
|
!*** ./node_modules/_antd@5.9.0@antd/es/divider/index.js + 1 modules ***!
|
|
|
\***********************************************************************/
|
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
|
|
|
|
|
// EXPORTS
|
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
|
Z: function() { return /* binding */ divider; }
|
|
|
});
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_classnames@2.5.1@classnames/index.js
|
|
|
var _classnames_2_5_1_classnames = __webpack_require__(92310);
|
|
|
var _classnames_2_5_1_classnames_default = /*#__PURE__*/__webpack_require__.n(_classnames_2_5_1_classnames);
|
|
|
// EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/index.js
|
|
|
var _react_17_0_2_react = __webpack_require__(59301);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/config-provider/context.js
|
|
|
var context = __webpack_require__(36355);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/style/index.js
|
|
|
var style = __webpack_require__(17313);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/theme/util/genComponentStyleHook.js
|
|
|
var genComponentStyleHook = __webpack_require__(83116);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/theme/util/statistic.js
|
|
|
var statistic = __webpack_require__(37613);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.9.0@antd/es/divider/style/index.js
|
|
|
|
|
|
|
|
|
// ============================== Shared ==============================
|
|
|
const genSharedDividerStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
sizePaddingEdgeHorizontal,
|
|
|
colorSplit,
|
|
|
lineWidth,
|
|
|
textPaddingInline,
|
|
|
orientationMargin,
|
|
|
verticalMarginInline
|
|
|
} = token;
|
|
|
return {
|
|
|
[componentCls]: Object.assign(Object.assign({}, (0,style/* resetComponent */.Wf)(token)), {
|
|
|
borderBlockStart: `${lineWidth}px solid ${colorSplit}`,
|
|
|
// vertical
|
|
|
'&-vertical': {
|
|
|
position: 'relative',
|
|
|
top: '-0.06em',
|
|
|
display: 'inline-block',
|
|
|
height: '0.9em',
|
|
|
marginInline: verticalMarginInline,
|
|
|
marginBlock: 0,
|
|
|
verticalAlign: 'middle',
|
|
|
borderTop: 0,
|
|
|
borderInlineStart: `${lineWidth}px solid ${colorSplit}`
|
|
|
},
|
|
|
'&-horizontal': {
|
|
|
display: 'flex',
|
|
|
clear: 'both',
|
|
|
width: '100%',
|
|
|
minWidth: '100%',
|
|
|
margin: `${token.dividerHorizontalGutterMargin}px 0`
|
|
|
},
|
|
|
[`&-horizontal${componentCls}-with-text`]: {
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
|
|
|
color: token.colorTextHeading,
|
|
|
fontWeight: 500,
|
|
|
fontSize: token.fontSizeLG,
|
|
|
whiteSpace: 'nowrap',
|
|
|
textAlign: 'center',
|
|
|
borderBlockStart: `0 ${colorSplit}`,
|
|
|
'&::before, &::after': {
|
|
|
position: 'relative',
|
|
|
width: '50%',
|
|
|
borderBlockStart: `${lineWidth}px solid transparent`,
|
|
|
// Chrome not accept `inherit` in `border-top`
|
|
|
borderBlockStartColor: 'inherit',
|
|
|
borderBlockEnd: 0,
|
|
|
transform: 'translateY(50%)',
|
|
|
content: "''"
|
|
|
}
|
|
|
},
|
|
|
[`&-horizontal${componentCls}-with-text-left`]: {
|
|
|
'&::before': {
|
|
|
width: `${orientationMargin * 100}%`
|
|
|
},
|
|
|
'&::after': {
|
|
|
width: `${100 - orientationMargin * 100}%`
|
|
|
}
|
|
|
},
|
|
|
[`&-horizontal${componentCls}-with-text-right`]: {
|
|
|
'&::before': {
|
|
|
width: `${100 - orientationMargin * 100}%`
|
|
|
},
|
|
|
'&::after': {
|
|
|
width: `${orientationMargin * 100}%`
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-inner-text`]: {
|
|
|
display: 'inline-block',
|
|
|
paddingBlock: 0,
|
|
|
paddingInline: textPaddingInline
|
|
|
},
|
|
|
'&-dashed': {
|
|
|
background: 'none',
|
|
|
borderColor: colorSplit,
|
|
|
borderStyle: 'dashed',
|
|
|
borderWidth: `${lineWidth}px 0 0`
|
|
|
},
|
|
|
[`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
|
|
|
'&::before, &::after': {
|
|
|
borderStyle: 'dashed none none'
|
|
|
}
|
|
|
},
|
|
|
[`&-vertical${componentCls}-dashed`]: {
|
|
|
borderInlineStartWidth: lineWidth,
|
|
|
borderInlineEnd: 0,
|
|
|
borderBlockStart: 0,
|
|
|
borderBlockEnd: 0
|
|
|
},
|
|
|
[`&-plain${componentCls}-with-text`]: {
|
|
|
color: token.colorText,
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: token.fontSize
|
|
|
},
|
|
|
[`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]: {
|
|
|
'&::before': {
|
|
|
width: 0
|
|
|
},
|
|
|
'&::after': {
|
|
|
width: '100%'
|
|
|
},
|
|
|
[`${componentCls}-inner-text`]: {
|
|
|
paddingInlineStart: sizePaddingEdgeHorizontal
|
|
|
}
|
|
|
},
|
|
|
[`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]: {
|
|
|
'&::before': {
|
|
|
width: '100%'
|
|
|
},
|
|
|
'&::after': {
|
|
|
width: 0
|
|
|
},
|
|
|
[`${componentCls}-inner-text`]: {
|
|
|
paddingInlineEnd: sizePaddingEdgeHorizontal
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
};
|
|
|
};
|
|
|
// ============================== Export ==============================
|
|
|
/* harmony default export */ var divider_style = ((0,genComponentStyleHook/* default */.Z)('Divider', token => {
|
|
|
const dividerToken = (0,statistic/* merge */.TS)(token, {
|
|
|
dividerHorizontalWithTextGutterMargin: token.margin,
|
|
|
dividerHorizontalGutterMargin: token.marginLG,
|
|
|
sizePaddingEdgeHorizontal: 0
|
|
|
});
|
|
|
return [genSharedDividerStyle(dividerToken)];
|
|
|
}, token => ({
|
|
|
textPaddingInline: '1em',
|
|
|
orientationMargin: 0.05,
|
|
|
verticalMarginInline: token.marginXS
|
|
|
})));
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.9.0@antd/es/divider/index.js
|
|
|
"use client";
|
|
|
|
|
|
var __rest = undefined && undefined.__rest || function (s, e) {
|
|
|
var t = {};
|
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
|
}
|
|
|
return t;
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Divider = props => {
|
|
|
const {
|
|
|
getPrefixCls,
|
|
|
direction,
|
|
|
divider
|
|
|
} = _react_17_0_2_react.useContext(context/* ConfigContext */.E_);
|
|
|
const {
|
|
|
prefixCls: customizePrefixCls,
|
|
|
type = 'horizontal',
|
|
|
orientation = 'center',
|
|
|
orientationMargin,
|
|
|
className,
|
|
|
rootClassName,
|
|
|
children,
|
|
|
dashed,
|
|
|
plain,
|
|
|
style
|
|
|
} = props,
|
|
|
restProps = __rest(props, ["prefixCls", "type", "orientation", "orientationMargin", "className", "rootClassName", "children", "dashed", "plain", "style"]);
|
|
|
const prefixCls = getPrefixCls('divider', customizePrefixCls);
|
|
|
const [wrapSSR, hashId] = divider_style(prefixCls);
|
|
|
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
|
|
|
const hasChildren = !!children;
|
|
|
const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
|
|
|
const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
|
|
|
const classString = _classnames_2_5_1_classnames_default()(prefixCls, divider === null || divider === void 0 ? void 0 : divider.className, hashId, `${prefixCls}-${type}`, {
|
|
|
[`${prefixCls}-with-text`]: hasChildren,
|
|
|
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
|
|
|
[`${prefixCls}-dashed`]: !!dashed,
|
|
|
[`${prefixCls}-plain`]: !!plain,
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
[`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
|
|
|
[`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight
|
|
|
}, className, rootClassName);
|
|
|
const memoizedOrientationMargin = _react_17_0_2_react.useMemo(() => {
|
|
|
if (typeof orientationMargin === 'number') {
|
|
|
return orientationMargin;
|
|
|
}
|
|
|
if (/^\d+$/.test(orientationMargin)) {
|
|
|
return Number(orientationMargin);
|
|
|
}
|
|
|
return orientationMargin;
|
|
|
}, [orientationMargin]);
|
|
|
const innerStyle = Object.assign(Object.assign({}, hasCustomMarginLeft && {
|
|
|
marginLeft: memoizedOrientationMargin
|
|
|
}), hasCustomMarginRight && {
|
|
|
marginRight: memoizedOrientationMargin
|
|
|
});
|
|
|
// Warning children not work in vertical mode
|
|
|
if (false) {}
|
|
|
return wrapSSR( /*#__PURE__*/_react_17_0_2_react.createElement("div", Object.assign({
|
|
|
className: classString,
|
|
|
style: Object.assign(Object.assign({}, divider === null || divider === void 0 ? void 0 : divider.style), style)
|
|
|
}, restProps, {
|
|
|
role: "separator"
|
|
|
}), children && type !== 'vertical' && /*#__PURE__*/_react_17_0_2_react.createElement("span", {
|
|
|
className: `${prefixCls}-inner-text`,
|
|
|
style: innerStyle
|
|
|
}, children)));
|
|
|
};
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var divider = (Divider);
|
|
|
|
|
|
/***/ }),
|
|
|
|
|
|
/***/ 43428:
|
|
|
/*!**********************************************************************!*\
|
|
|
!*** ./node_modules/_antd@5.9.0@antd/es/drawer/index.js + 9 modules ***!
|
|
|
\**********************************************************************/
|
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
|
|
|
|
|
// EXPORTS
|
|
|
__webpack_require__.d(__webpack_exports__, {
|
|
|
Z: function() { return /* binding */ drawer; }
|
|
|
});
|
|
|
|
|
|
// EXTERNAL MODULE: ./node_modules/_classnames@2.5.1@classnames/index.js
|
|
|
var _classnames_2_5_1_classnames = __webpack_require__(92310);
|
|
|
var _classnames_2_5_1_classnames_default = /*#__PURE__*/__webpack_require__.n(_classnames_2_5_1_classnames);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.24.4@@babel/runtime/helpers/esm/objectSpread2.js
|
|
|
var objectSpread2 = __webpack_require__(92158);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.24.4@@babel/runtime/helpers/esm/slicedToArray.js + 1 modules
|
|
|
var slicedToArray = __webpack_require__(69553);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@rc-component_portal@1.1.2@@rc-component/portal/es/index.js + 6 modules
|
|
|
var es = __webpack_require__(43403);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.39.1@rc-util/es/hooks/useLayoutEffect.js
|
|
|
var useLayoutEffect = __webpack_require__(92420);
|
|
|
// EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/index.js
|
|
|
var _react_17_0_2_react = __webpack_require__(59301);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-drawer@6.4.1@rc-drawer/es/context.js
|
|
|
|
|
|
var DrawerContext = /*#__PURE__*/_react_17_0_2_react.createContext(null);
|
|
|
var RefContext = /*#__PURE__*/_react_17_0_2_react.createContext({});
|
|
|
/* harmony default export */ var context = (DrawerContext);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.24.4@@babel/runtime/helpers/esm/defineProperty.js
|
|
|
var defineProperty = __webpack_require__(84957);
|
|
|
// EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.24.4@@babel/runtime/helpers/esm/extends.js
|
|
|
var esm_extends = __webpack_require__(24931);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-motion@2.9.0@rc-motion/es/index.js + 12 modules
|
|
|
var _rc_motion_2_9_0_rc_motion_es = __webpack_require__(44516);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.39.1@rc-util/es/KeyCode.js
|
|
|
var KeyCode = __webpack_require__(81331);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.39.1@rc-util/es/pickAttrs.js
|
|
|
var pickAttrs = __webpack_require__(90339);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.39.1@rc-util/es/index.js
|
|
|
var _rc_util_5_39_1_rc_util_es = __webpack_require__(9487);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-drawer@6.4.1@rc-drawer/es/DrawerPanel.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var DrawerPanel = function DrawerPanel(props) {
|
|
|
var prefixCls = props.prefixCls,
|
|
|
className = props.className,
|
|
|
style = props.style,
|
|
|
children = props.children,
|
|
|
containerRef = props.containerRef,
|
|
|
id = props.id,
|
|
|
onMouseEnter = props.onMouseEnter,
|
|
|
onMouseOver = props.onMouseOver,
|
|
|
onMouseLeave = props.onMouseLeave,
|
|
|
onClick = props.onClick,
|
|
|
onKeyDown = props.onKeyDown,
|
|
|
onKeyUp = props.onKeyUp;
|
|
|
var eventHandlers = {
|
|
|
onMouseEnter: onMouseEnter,
|
|
|
onMouseOver: onMouseOver,
|
|
|
onMouseLeave: onMouseLeave,
|
|
|
onClick: onClick,
|
|
|
onKeyDown: onKeyDown,
|
|
|
onKeyUp: onKeyUp
|
|
|
};
|
|
|
var _React$useContext = _react_17_0_2_react.useContext(RefContext),
|
|
|
panelRef = _React$useContext.panel;
|
|
|
var mergedRef = (0,_rc_util_5_39_1_rc_util_es.useComposeRef)(panelRef, containerRef);
|
|
|
|
|
|
// =============================== Render ===============================
|
|
|
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(_react_17_0_2_react.Fragment, null, /*#__PURE__*/_react_17_0_2_react.createElement("div", (0,esm_extends/* default */.Z)({
|
|
|
id: id,
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-content"), className),
|
|
|
style: (0,objectSpread2/* default */.Z)({}, style),
|
|
|
"aria-modal": "true",
|
|
|
role: "dialog",
|
|
|
ref: mergedRef
|
|
|
}, eventHandlers), children));
|
|
|
};
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var es_DrawerPanel = (DrawerPanel);
|
|
|
// EXTERNAL MODULE: ./node_modules/_rc-util@5.39.1@rc-util/es/warning.js
|
|
|
var es_warning = __webpack_require__(8098);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-drawer@6.4.1@rc-drawer/es/util.js
|
|
|
|
|
|
|
|
|
function parseWidthHeight(value) {
|
|
|
if (typeof value === 'string' && String(Number(value)) === value) {
|
|
|
(0,es_warning/* default */.ZP)(false, 'Invalid value type of `width` or `height` which should be number type instead.');
|
|
|
return Number(value);
|
|
|
}
|
|
|
return value;
|
|
|
}
|
|
|
function warnCheck(props) {
|
|
|
warning(!('wrapperClassName' in props), "'wrapperClassName' is removed. Please use 'rootClassName' instead.");
|
|
|
warning(canUseDom() || !props.open, "Drawer with 'open' in SSR is not work since no place to createPortal. Please move to 'useEffect' instead.");
|
|
|
}
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-drawer@6.4.1@rc-drawer/es/DrawerPopup.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var sentinelStyle = {
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
overflow: 'hidden',
|
|
|
outline: 'none',
|
|
|
position: 'absolute'
|
|
|
};
|
|
|
function DrawerPopup(props, ref) {
|
|
|
var _ref, _pushConfig$distance, _pushConfig, _classNames;
|
|
|
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,
|
|
|
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,
|
|
|
contentWrapperStyle = props.contentWrapperStyle,
|
|
|
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;
|
|
|
|
|
|
// ================================ Refs ================================
|
|
|
var panelRef = _react_17_0_2_react.useRef();
|
|
|
var sentinelStartRef = _react_17_0_2_react.useRef();
|
|
|
var sentinelEndRef = _react_17_0_2_react.useRef();
|
|
|
_react_17_0_2_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 */.Z.TAB:
|
|
|
{
|
|
|
if (keyCode === KeyCode/* default */.Z.TAB) {
|
|
|
if (!shiftKey && document.activeElement === sentinelEndRef.current) {
|
|
|
var _sentinelStartRef$cur;
|
|
|
(_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 ? 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 ? void 0 : _sentinelEndRef$curre.focus({
|
|
|
preventScroll: true
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
// Close
|
|
|
case KeyCode/* default */.Z.ESC:
|
|
|
{
|
|
|
if (onClose && keyboard) {
|
|
|
event.stopPropagation();
|
|
|
onClose(event);
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// ========================== Control ===========================
|
|
|
// Auto Focus
|
|
|
_react_17_0_2_react.useEffect(function () {
|
|
|
if (open && autoFocus) {
|
|
|
var _panelRef$current;
|
|
|
(_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.focus({
|
|
|
preventScroll: true
|
|
|
});
|
|
|
}
|
|
|
}, [open]);
|
|
|
|
|
|
// ============================ Push ============================
|
|
|
var _React$useState = _react_17_0_2_react.useState(false),
|
|
|
_React$useState2 = (0,slicedToArray/* default */.Z)(_React$useState, 2),
|
|
|
pushed = _React$useState2[0],
|
|
|
setPushed = _React$useState2[1];
|
|
|
var parentContext = _react_17_0_2_react.useContext(context);
|
|
|
|
|
|
// Merge push distance
|
|
|
var pushConfig;
|
|
|
if (push === false) {
|
|
|
pushConfig = {
|
|
|
distance: 0
|
|
|
};
|
|
|
} else if (push === true) {
|
|
|
pushConfig = {};
|
|
|
} 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_17_0_2_react.useMemo(function () {
|
|
|
return {
|
|
|
pushDistance: pushDistance,
|
|
|
push: function push() {
|
|
|
setPushed(true);
|
|
|
},
|
|
|
pull: function pull() {
|
|
|
setPushed(false);
|
|
|
}
|
|
|
};
|
|
|
}, [pushDistance]);
|
|
|
|
|
|
// ========================= ScrollLock =========================
|
|
|
// Tell parent to push
|
|
|
_react_17_0_2_react.useEffect(function () {
|
|
|
if (open) {
|
|
|
var _parentContext$push;
|
|
|
parentContext === null || parentContext === void 0 ? void 0 : (_parentContext$push = parentContext.push) === null || _parentContext$push === void 0 ? void 0 : _parentContext$push.call(parentContext);
|
|
|
} else {
|
|
|
var _parentContext$pull;
|
|
|
parentContext === null || parentContext === void 0 ? void 0 : (_parentContext$pull = parentContext.pull) === null || _parentContext$pull === void 0 ? void 0 : _parentContext$pull.call(parentContext);
|
|
|
}
|
|
|
}, [open]);
|
|
|
|
|
|
// Clean up
|
|
|
_react_17_0_2_react.useEffect(function () {
|
|
|
return function () {
|
|
|
var _parentContext$pull2;
|
|
|
parentContext === null || parentContext === void 0 ? void 0 : (_parentContext$pull2 = parentContext.pull) === null || _parentContext$pull2 === void 0 ? void 0 : _parentContext$pull2.call(parentContext);
|
|
|
};
|
|
|
}, []);
|
|
|
|
|
|
// ============================ Mask ============================
|
|
|
var maskNode = mask && /*#__PURE__*/_react_17_0_2_react.createElement(_rc_motion_2_9_0_rc_motion_es["default"], (0,esm_extends/* default */.Z)({
|
|
|
key: "mask"
|
|
|
}, maskMotion, {
|
|
|
visible: open
|
|
|
}), function (_ref2, maskRef) {
|
|
|
var motionMaskClassName = _ref2.className,
|
|
|
motionMaskStyle = _ref2.style;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-mask"), motionMaskClassName, maskClassName),
|
|
|
style: (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, motionMaskStyle), maskStyle),
|
|
|
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 = parseWidthHeight(width);
|
|
|
} else {
|
|
|
wrapperStyle.height = parseWidthHeight(height);
|
|
|
}
|
|
|
var eventHandlers = {
|
|
|
onMouseEnter: onMouseEnter,
|
|
|
onMouseOver: onMouseOver,
|
|
|
onMouseLeave: onMouseLeave,
|
|
|
onClick: onClick,
|
|
|
onKeyDown: onKeyDown,
|
|
|
onKeyUp: onKeyUp
|
|
|
};
|
|
|
var panelNode = /*#__PURE__*/_react_17_0_2_react.createElement(_rc_motion_2_9_0_rc_motion_es["default"], (0,esm_extends/* default */.Z)({
|
|
|
key: "panel"
|
|
|
}, motionProps, {
|
|
|
visible: open,
|
|
|
forceRender: forceRender,
|
|
|
onVisibleChanged: function onVisibleChanged(nextVisible) {
|
|
|
afterOpenChange === null || afterOpenChange === void 0 ? void 0 : afterOpenChange(nextVisible);
|
|
|
},
|
|
|
removeOnLeave: false,
|
|
|
leavedClassName: "".concat(prefixCls, "-content-wrapper-hidden")
|
|
|
}), function (_ref3, motionRef) {
|
|
|
var motionClassName = _ref3.className,
|
|
|
motionStyle = _ref3.style;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", (0,esm_extends/* default */.Z)({
|
|
|
className: _classnames_2_5_1_classnames_default()("".concat(prefixCls, "-content-wrapper"), motionClassName),
|
|
|
style: (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, wrapperStyle), motionStyle), contentWrapperStyle)
|
|
|
}, (0,pickAttrs/* default */.Z)(props, {
|
|
|
data: true
|
|
|
})), /*#__PURE__*/_react_17_0_2_react.createElement(es_DrawerPanel, (0,esm_extends/* default */.Z)({
|
|
|
id: id,
|
|
|
containerRef: motionRef,
|
|
|
prefixCls: prefixCls,
|
|
|
className: className,
|
|
|
style: style
|
|
|
}, eventHandlers), children));
|
|
|
});
|
|
|
|
|
|
// =========================== Render ===========================
|
|
|
var containerStyle = (0,objectSpread2/* default */.Z)({}, rootStyle);
|
|
|
if (zIndex) {
|
|
|
containerStyle.zIndex = zIndex;
|
|
|
}
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(context.Provider, {
|
|
|
value: mergedContext
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: _classnames_2_5_1_classnames_default()(prefixCls, "".concat(prefixCls, "-").concat(placement), rootClassName, (_classNames = {}, (0,defineProperty/* default */.Z)(_classNames, "".concat(prefixCls, "-open"), open), (0,defineProperty/* default */.Z)(_classNames, "".concat(prefixCls, "-inline"), inline), _classNames)),
|
|
|
style: containerStyle,
|
|
|
tabIndex: -1,
|
|
|
ref: panelRef,
|
|
|
onKeyDown: onPanelKeyDown
|
|
|
}, maskNode, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
tabIndex: 0,
|
|
|
ref: sentinelStartRef,
|
|
|
style: sentinelStyle,
|
|
|
"aria-hidden": "true",
|
|
|
"data-sentinel": "start"
|
|
|
}), panelNode, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
tabIndex: 0,
|
|
|
ref: sentinelEndRef,
|
|
|
style: sentinelStyle,
|
|
|
"aria-hidden": "true",
|
|
|
"data-sentinel": "end"
|
|
|
})));
|
|
|
}
|
|
|
var RefDrawerPopup = /*#__PURE__*/_react_17_0_2_react.forwardRef(DrawerPopup);
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var es_DrawerPopup = (RefDrawerPopup);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-drawer@6.4.1@rc-drawer/es/Drawer.js
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var Drawer = function Drawer(props) {
|
|
|
var _props$open = props.open,
|
|
|
open = _props$open === void 0 ? false : _props$open,
|
|
|
_props$prefixCls = props.prefixCls,
|
|
|
prefixCls = _props$prefixCls === void 0 ? 'rc-drawer' : _props$prefixCls,
|
|
|
_props$placement = props.placement,
|
|
|
placement = _props$placement === void 0 ? 'right' : _props$placement,
|
|
|
_props$autoFocus = props.autoFocus,
|
|
|
autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
|
|
|
_props$keyboard = props.keyboard,
|
|
|
keyboard = _props$keyboard === void 0 ? true : _props$keyboard,
|
|
|
_props$width = props.width,
|
|
|
width = _props$width === void 0 ? 378 : _props$width,
|
|
|
_props$mask = props.mask,
|
|
|
mask = _props$mask === void 0 ? true : _props$mask,
|
|
|
_props$maskClosable = props.maskClosable,
|
|
|
maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
|
|
|
getContainer = props.getContainer,
|
|
|
forceRender = props.forceRender,
|
|
|
afterOpenChange = props.afterOpenChange,
|
|
|
destroyOnClose = props.destroyOnClose,
|
|
|
onMouseEnter = props.onMouseEnter,
|
|
|
onMouseOver = props.onMouseOver,
|
|
|
onMouseLeave = props.onMouseLeave,
|
|
|
onClick = props.onClick,
|
|
|
onKeyDown = props.onKeyDown,
|
|
|
onKeyUp = props.onKeyUp,
|
|
|
panelRef = props.panelRef;
|
|
|
var _React$useState = _react_17_0_2_react.useState(false),
|
|
|
_React$useState2 = (0,slicedToArray/* default */.Z)(_React$useState, 2),
|
|
|
animatedVisible = _React$useState2[0],
|
|
|
setAnimatedVisible = _React$useState2[1];
|
|
|
|
|
|
// ============================= Warn =============================
|
|
|
if (false) {}
|
|
|
|
|
|
// ============================= Open =============================
|
|
|
var _React$useState3 = _react_17_0_2_react.useState(false),
|
|
|
_React$useState4 = (0,slicedToArray/* default */.Z)(_React$useState3, 2),
|
|
|
mounted = _React$useState4[0],
|
|
|
setMounted = _React$useState4[1];
|
|
|
(0,useLayoutEffect/* default */.Z)(function () {
|
|
|
setMounted(true);
|
|
|
}, []);
|
|
|
var mergedOpen = mounted ? open : false;
|
|
|
|
|
|
// ============================ Focus =============================
|
|
|
var popupRef = _react_17_0_2_react.useRef();
|
|
|
var lastActiveRef = _react_17_0_2_react.useRef();
|
|
|
(0,useLayoutEffect/* default */.Z)(function () {
|
|
|
if (mergedOpen) {
|
|
|
lastActiveRef.current = document.activeElement;
|
|
|
}
|
|
|
}, [mergedOpen]);
|
|
|
|
|
|
// ============================= Open =============================
|
|
|
var internalAfterOpenChange = function internalAfterOpenChange(nextVisible) {
|
|
|
var _popupRef$current;
|
|
|
setAnimatedVisible(nextVisible);
|
|
|
afterOpenChange === null || afterOpenChange === void 0 ? void 0 : afterOpenChange(nextVisible);
|
|
|
if (!nextVisible && lastActiveRef.current && !((_popupRef$current = popupRef.current) !== null && _popupRef$current !== void 0 && _popupRef$current.contains(lastActiveRef.current))) {
|
|
|
var _lastActiveRef$curren;
|
|
|
(_lastActiveRef$curren = lastActiveRef.current) === null || _lastActiveRef$curren === void 0 ? void 0 : _lastActiveRef$curren.focus({
|
|
|
preventScroll: true
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// =========================== Context ============================
|
|
|
var refContext = _react_17_0_2_react.useMemo(function () {
|
|
|
return {
|
|
|
panel: panelRef
|
|
|
};
|
|
|
}, [panelRef]);
|
|
|
|
|
|
// ============================ Render ============================
|
|
|
if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
|
|
|
return null;
|
|
|
}
|
|
|
var eventHandlers = {
|
|
|
onMouseEnter: onMouseEnter,
|
|
|
onMouseOver: onMouseOver,
|
|
|
onMouseLeave: onMouseLeave,
|
|
|
onClick: onClick,
|
|
|
onKeyDown: onKeyDown,
|
|
|
onKeyUp: onKeyUp
|
|
|
};
|
|
|
var drawerPopupProps = (0,objectSpread2/* default */.Z)((0,objectSpread2/* default */.Z)({}, props), {}, {
|
|
|
open: mergedOpen,
|
|
|
prefixCls: prefixCls,
|
|
|
placement: placement,
|
|
|
autoFocus: autoFocus,
|
|
|
keyboard: keyboard,
|
|
|
width: width,
|
|
|
mask: mask,
|
|
|
maskClosable: maskClosable,
|
|
|
inline: getContainer === false,
|
|
|
afterOpenChange: internalAfterOpenChange,
|
|
|
ref: popupRef
|
|
|
}, eventHandlers);
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement(RefContext.Provider, {
|
|
|
value: refContext
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement(es/* default */.Z, {
|
|
|
open: mergedOpen || forceRender || animatedVisible,
|
|
|
autoDestroy: false,
|
|
|
getContainer: getContainer,
|
|
|
autoLock: mask && (mergedOpen || animatedVisible)
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement(es_DrawerPopup, drawerPopupProps)));
|
|
|
};
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var es_Drawer = (Drawer);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_rc-drawer@6.4.1@rc-drawer/es/index.js
|
|
|
// export this package's api
|
|
|
|
|
|
/* harmony default export */ var _rc_drawer_6_4_1_rc_drawer_es = (es_Drawer);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/_util/motion.js
|
|
|
var motion = __webpack_require__(62892);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/config-provider/context.js
|
|
|
var config_provider_context = __webpack_require__(36355);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/form/context.js
|
|
|
var form_context = __webpack_require__(32441);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/_util/hooks/useClosable.js
|
|
|
var useClosable = __webpack_require__(47729);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.9.0@antd/es/drawer/DrawerPanel.js
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const DrawerPanel_DrawerPanel = props => {
|
|
|
const {
|
|
|
prefixCls,
|
|
|
title,
|
|
|
footer,
|
|
|
extra,
|
|
|
closeIcon,
|
|
|
closable,
|
|
|
onClose,
|
|
|
headerStyle,
|
|
|
drawerStyle,
|
|
|
bodyStyle,
|
|
|
footerStyle,
|
|
|
children
|
|
|
} = props;
|
|
|
const customCloseIconRender = _react_17_0_2_react.useCallback(icon => /*#__PURE__*/_react_17_0_2_react.createElement("button", {
|
|
|
type: "button",
|
|
|
onClick: onClose,
|
|
|
"aria-label": "Close",
|
|
|
className: `${prefixCls}-close`
|
|
|
}, icon), [onClose]);
|
|
|
const [mergedClosable, mergedCloseIcon] = (0,useClosable/* default */.Z)(closable, closeIcon, customCloseIconRender, undefined, true);
|
|
|
const headerNode = _react_17_0_2_react.useMemo(() => {
|
|
|
if (!title && !mergedClosable) {
|
|
|
return null;
|
|
|
}
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
style: headerStyle,
|
|
|
className: _classnames_2_5_1_classnames_default()(`${prefixCls}-header`, {
|
|
|
[`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra
|
|
|
})
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: `${prefixCls}-header-title`
|
|
|
}, mergedCloseIcon, title && /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: `${prefixCls}-title`
|
|
|
}, title)), extra && /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: `${prefixCls}-extra`
|
|
|
}, extra));
|
|
|
}, [mergedClosable, mergedCloseIcon, extra, headerStyle, prefixCls, title]);
|
|
|
const footerNode = _react_17_0_2_react.useMemo(() => {
|
|
|
if (!footer) {
|
|
|
return null;
|
|
|
}
|
|
|
const footerClassName = `${prefixCls}-footer`;
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: footerClassName,
|
|
|
style: footerStyle
|
|
|
}, footer);
|
|
|
}, [footer, footerStyle, prefixCls]);
|
|
|
return /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: `${prefixCls}-wrapper-body`,
|
|
|
style: drawerStyle
|
|
|
}, headerNode, /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: `${prefixCls}-body`,
|
|
|
style: bodyStyle
|
|
|
}, children), footerNode);
|
|
|
};
|
|
|
/* harmony default export */ var drawer_DrawerPanel = (DrawerPanel_DrawerPanel);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/space/Compact.js
|
|
|
var Compact = __webpack_require__(33234);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/theme/util/genComponentStyleHook.js
|
|
|
var genComponentStyleHook = __webpack_require__(83116);
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/theme/util/statistic.js
|
|
|
var statistic = __webpack_require__(37613);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.9.0@antd/es/drawer/style/motion.js
|
|
|
const genMotionStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
motionDurationSlow
|
|
|
} = token;
|
|
|
const sharedPanelMotion = {
|
|
|
'&-enter, &-appear, &-leave': {
|
|
|
'&-start': {
|
|
|
transition: 'none'
|
|
|
},
|
|
|
'&-active': {
|
|
|
transition: `all ${motionDurationSlow}`
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
[componentCls]: {
|
|
|
// ======================== Mask ========================
|
|
|
[`${componentCls}-mask-motion`]: {
|
|
|
'&-enter, &-appear, &-leave': {
|
|
|
'&-active': {
|
|
|
transition: `all ${motionDurationSlow}`
|
|
|
}
|
|
|
},
|
|
|
'&-enter, &-appear': {
|
|
|
opacity: 0,
|
|
|
'&-active': {
|
|
|
opacity: 1
|
|
|
}
|
|
|
},
|
|
|
'&-leave': {
|
|
|
opacity: 1,
|
|
|
'&-active': {
|
|
|
opacity: 0
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// ======================= Panel ========================
|
|
|
[`${componentCls}-panel-motion`]: {
|
|
|
// Left
|
|
|
'&-left': [sharedPanelMotion, {
|
|
|
'&-enter, &-appear': {
|
|
|
'&-start': {
|
|
|
transform: 'translateX(-100%) !important'
|
|
|
},
|
|
|
'&-active': {
|
|
|
transform: 'translateX(0)'
|
|
|
}
|
|
|
},
|
|
|
'&-leave': {
|
|
|
transform: 'translateX(0)',
|
|
|
'&-active': {
|
|
|
transform: 'translateX(-100%)'
|
|
|
}
|
|
|
}
|
|
|
}],
|
|
|
// Right
|
|
|
'&-right': [sharedPanelMotion, {
|
|
|
'&-enter, &-appear': {
|
|
|
'&-start': {
|
|
|
transform: 'translateX(100%) !important'
|
|
|
},
|
|
|
'&-active': {
|
|
|
transform: 'translateX(0)'
|
|
|
}
|
|
|
},
|
|
|
'&-leave': {
|
|
|
transform: 'translateX(0)',
|
|
|
'&-active': {
|
|
|
transform: 'translateX(100%)'
|
|
|
}
|
|
|
}
|
|
|
}],
|
|
|
// Top
|
|
|
'&-top': [sharedPanelMotion, {
|
|
|
'&-enter, &-appear': {
|
|
|
'&-start': {
|
|
|
transform: 'translateY(-100%) !important'
|
|
|
},
|
|
|
'&-active': {
|
|
|
transform: 'translateY(0)'
|
|
|
}
|
|
|
},
|
|
|
'&-leave': {
|
|
|
transform: 'translateY(0)',
|
|
|
'&-active': {
|
|
|
transform: 'translateY(-100%)'
|
|
|
}
|
|
|
}
|
|
|
}],
|
|
|
// Bottom
|
|
|
'&-bottom': [sharedPanelMotion, {
|
|
|
'&-enter, &-appear': {
|
|
|
'&-start': {
|
|
|
transform: 'translateY(100%) !important'
|
|
|
},
|
|
|
'&-active': {
|
|
|
transform: 'translateY(0)'
|
|
|
}
|
|
|
},
|
|
|
'&-leave': {
|
|
|
transform: 'translateY(0)',
|
|
|
'&-active': {
|
|
|
transform: 'translateY(100%)'
|
|
|
}
|
|
|
}
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
/* harmony default export */ var style_motion = (genMotionStyle);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.9.0@antd/es/drawer/style/index.js
|
|
|
|
|
|
|
|
|
// =============================== Base ===============================
|
|
|
const genDrawerStyle = token => {
|
|
|
const {
|
|
|
componentCls,
|
|
|
zIndexPopup,
|
|
|
colorBgMask,
|
|
|
colorBgElevated,
|
|
|
motionDurationSlow,
|
|
|
motionDurationMid,
|
|
|
padding,
|
|
|
paddingLG,
|
|
|
fontSizeLG,
|
|
|
lineHeightLG,
|
|
|
lineWidth,
|
|
|
lineType,
|
|
|
colorSplit,
|
|
|
marginSM,
|
|
|
colorIcon,
|
|
|
colorIconHover,
|
|
|
colorText,
|
|
|
fontWeightStrong,
|
|
|
footerPaddingBlock,
|
|
|
footerPaddingInline
|
|
|
} = token;
|
|
|
const wrapperCls = `${componentCls}-content-wrapper`;
|
|
|
return {
|
|
|
[componentCls]: {
|
|
|
position: 'fixed',
|
|
|
inset: 0,
|
|
|
zIndex: zIndexPopup,
|
|
|
pointerEvents: 'none',
|
|
|
'&-pure': {
|
|
|
position: 'relative',
|
|
|
background: colorBgElevated,
|
|
|
[`&${componentCls}-left`]: {
|
|
|
boxShadow: token.boxShadowDrawerLeft
|
|
|
},
|
|
|
[`&${componentCls}-right`]: {
|
|
|
boxShadow: token.boxShadowDrawerRight
|
|
|
},
|
|
|
[`&${componentCls}-top`]: {
|
|
|
boxShadow: token.boxShadowDrawerUp
|
|
|
},
|
|
|
[`&${componentCls}-bottom`]: {
|
|
|
boxShadow: token.boxShadowDrawerDown
|
|
|
}
|
|
|
},
|
|
|
'&-inline': {
|
|
|
position: 'absolute'
|
|
|
},
|
|
|
// ====================== Mask ======================
|
|
|
[`${componentCls}-mask`]: {
|
|
|
position: 'absolute',
|
|
|
inset: 0,
|
|
|
zIndex: zIndexPopup,
|
|
|
background: colorBgMask,
|
|
|
pointerEvents: 'auto'
|
|
|
},
|
|
|
// ==================== Content =====================
|
|
|
[wrapperCls]: {
|
|
|
position: 'absolute',
|
|
|
zIndex: zIndexPopup,
|
|
|
maxWidth: '100vw',
|
|
|
transition: `all ${motionDurationSlow}`,
|
|
|
'&-hidden': {
|
|
|
display: 'none'
|
|
|
}
|
|
|
},
|
|
|
// Placement
|
|
|
[`&-left > ${wrapperCls}`]: {
|
|
|
top: 0,
|
|
|
bottom: 0,
|
|
|
left: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
boxShadow: token.boxShadowDrawerLeft
|
|
|
},
|
|
|
[`&-right > ${wrapperCls}`]: {
|
|
|
top: 0,
|
|
|
right: {
|
|
|
_skip_check_: true,
|
|
|
value: 0
|
|
|
},
|
|
|
bottom: 0,
|
|
|
boxShadow: token.boxShadowDrawerRight
|
|
|
},
|
|
|
[`&-top > ${wrapperCls}`]: {
|
|
|
top: 0,
|
|
|
insetInline: 0,
|
|
|
boxShadow: token.boxShadowDrawerUp
|
|
|
},
|
|
|
[`&-bottom > ${wrapperCls}`]: {
|
|
|
bottom: 0,
|
|
|
insetInline: 0,
|
|
|
boxShadow: token.boxShadowDrawerDown
|
|
|
},
|
|
|
[`${componentCls}-content`]: {
|
|
|
width: '100%',
|
|
|
height: '100%',
|
|
|
overflow: 'auto',
|
|
|
background: colorBgElevated,
|
|
|
pointerEvents: 'auto'
|
|
|
},
|
|
|
// ===================== Panel ======================
|
|
|
[`${componentCls}-wrapper-body`]: {
|
|
|
display: 'flex',
|
|
|
flexDirection: 'column',
|
|
|
width: '100%',
|
|
|
height: '100%'
|
|
|
},
|
|
|
// Header
|
|
|
[`${componentCls}-header`]: {
|
|
|
display: 'flex',
|
|
|
flex: 0,
|
|
|
alignItems: 'center',
|
|
|
padding: `${padding}px ${paddingLG}px`,
|
|
|
fontSize: fontSizeLG,
|
|
|
lineHeight: lineHeightLG,
|
|
|
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
|
|
|
'&-title': {
|
|
|
display: 'flex',
|
|
|
flex: 1,
|
|
|
alignItems: 'center',
|
|
|
minWidth: 0,
|
|
|
minHeight: 0
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-extra`]: {
|
|
|
flex: 'none'
|
|
|
},
|
|
|
[`${componentCls}-close`]: {
|
|
|
display: 'inline-block',
|
|
|
marginInlineEnd: marginSM,
|
|
|
color: colorIcon,
|
|
|
fontWeight: fontWeightStrong,
|
|
|
fontSize: fontSizeLG,
|
|
|
fontStyle: 'normal',
|
|
|
lineHeight: 1,
|
|
|
textAlign: 'center',
|
|
|
textTransform: 'none',
|
|
|
textDecoration: 'none',
|
|
|
background: 'transparent',
|
|
|
border: 0,
|
|
|
outline: 0,
|
|
|
cursor: 'pointer',
|
|
|
transition: `color ${motionDurationMid}`,
|
|
|
textRendering: 'auto',
|
|
|
'&:focus, &:hover': {
|
|
|
color: colorIconHover,
|
|
|
textDecoration: 'none'
|
|
|
}
|
|
|
},
|
|
|
[`${componentCls}-title`]: {
|
|
|
flex: 1,
|
|
|
margin: 0,
|
|
|
color: colorText,
|
|
|
fontWeight: token.fontWeightStrong,
|
|
|
fontSize: fontSizeLG,
|
|
|
lineHeight: lineHeightLG
|
|
|
},
|
|
|
// Body
|
|
|
[`${componentCls}-body`]: {
|
|
|
flex: 1,
|
|
|
minWidth: 0,
|
|
|
minHeight: 0,
|
|
|
padding: paddingLG,
|
|
|
overflow: 'auto'
|
|
|
},
|
|
|
// Footer
|
|
|
[`${componentCls}-footer`]: {
|
|
|
flexShrink: 0,
|
|
|
padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
|
|
|
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`
|
|
|
},
|
|
|
// ====================== RTL =======================
|
|
|
'&-rtl': {
|
|
|
direction: 'rtl'
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
};
|
|
|
// ============================== Export ==============================
|
|
|
/* harmony default export */ var drawer_style = ((0,genComponentStyleHook/* default */.Z)('Drawer', token => {
|
|
|
const drawerToken = (0,statistic/* merge */.TS)(token, {});
|
|
|
return [genDrawerStyle(drawerToken), style_motion(drawerToken)];
|
|
|
}, token => ({
|
|
|
zIndexPopup: token.zIndexPopupBase,
|
|
|
footerPaddingBlock: token.paddingXS,
|
|
|
footerPaddingInline: token.padding
|
|
|
})));
|
|
|
// EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/watermark/context.js
|
|
|
var watermark_context = __webpack_require__(11575);
|
|
|
;// CONCATENATED MODULE: ./node_modules/_antd@5.9.0@antd/es/drawer/index.js
|
|
|
"use client";
|
|
|
|
|
|
var __rest = undefined && undefined.__rest || function (s, e) {
|
|
|
var t = {};
|
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
|
}
|
|
|
return t;
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// CSSINJS
|
|
|
|
|
|
|
|
|
|
|
|
const SizeTypes = (/* unused pure expression or super */ null && (['default', 'large']));
|
|
|
const defaultPushState = {
|
|
|
distance: 180
|
|
|
};
|
|
|
const drawer_Drawer = props => {
|
|
|
var _a;
|
|
|
const {
|
|
|
rootClassName,
|
|
|
width,
|
|
|
height,
|
|
|
size = 'default',
|
|
|
mask = true,
|
|
|
push = defaultPushState,
|
|
|
open,
|
|
|
afterOpenChange,
|
|
|
onClose,
|
|
|
prefixCls: customizePrefixCls,
|
|
|
getContainer: customizeGetContainer,
|
|
|
style,
|
|
|
className,
|
|
|
// Deprecated
|
|
|
visible,
|
|
|
afterVisibleChange
|
|
|
} = props,
|
|
|
rest = __rest(props, ["rootClassName", "width", "height", "size", "mask", "push", "open", "afterOpenChange", "onClose", "prefixCls", "getContainer", "style", "className", "visible", "afterVisibleChange"]);
|
|
|
const {
|
|
|
getPopupContainer,
|
|
|
getPrefixCls,
|
|
|
direction,
|
|
|
drawer
|
|
|
} = _react_17_0_2_react.useContext(config_provider_context/* ConfigContext */.E_);
|
|
|
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
|
|
|
// Style
|
|
|
const [wrapSSR, hashId] = drawer_style(prefixCls);
|
|
|
const getContainer =
|
|
|
// 有可能为 false，所以不能直接判断
|
|
|
customizeGetContainer === undefined && getPopupContainer ? () => getPopupContainer(document.body) : customizeGetContainer;
|
|
|
const drawerClassName = _classnames_2_5_1_classnames_default()({
|
|
|
'no-mask': !mask,
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl'
|
|
|
}, rootClassName, hashId);
|
|
|
// ========================== Warning ===========================
|
|
|
if (false) {}
|
|
|
// ============================ Size ============================
|
|
|
const mergedWidth = _react_17_0_2_react.useMemo(() => width !== null && width !== void 0 ? width : size === 'large' ? 736 : 378, [width, size]);
|
|
|
const mergedHeight = _react_17_0_2_react.useMemo(() => height !== null && height !== void 0 ? height : size === 'large' ? 736 : 378, [height, size]);
|
|
|
// =========================== Motion ===========================
|
|
|
const maskMotion = {
|
|
|
motionName: (0,motion/* getTransitionName */.m)(prefixCls, 'mask-motion'),
|
|
|
motionAppear: true,
|
|
|
motionEnter: true,
|
|
|
motionLeave: true,
|
|
|
motionDeadline: 500
|
|
|
};
|
|
|
const panelMotion = motionPlacement => ({
|
|
|
motionName: (0,motion/* getTransitionName */.m)(prefixCls, `panel-motion-${motionPlacement}`),
|
|
|
motionAppear: true,
|
|
|
motionEnter: true,
|
|
|
motionLeave: true,
|
|
|
motionDeadline: 500
|
|
|
});
|
|
|
// ============================ Refs ============================
|
|
|
// Select `ant-modal-content` by `panelRef`
|
|
|
const panelRef = (0,watermark_context/* usePanelRef */.H)();
|
|
|
// =========================== Render ===========================
|
|
|
return wrapSSR( /*#__PURE__*/_react_17_0_2_react.createElement(Compact/* NoCompactStyle */.BR, null, /*#__PURE__*/_react_17_0_2_react.createElement(form_context/* NoFormStyle */.Ux, {
|
|
|
status: true,
|
|
|
override: true
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement(_rc_drawer_6_4_1_rc_drawer_es, Object.assign({
|
|
|
prefixCls: prefixCls,
|
|
|
onClose: onClose,
|
|
|
maskMotion: maskMotion,
|
|
|
motion: panelMotion
|
|
|
}, rest, {
|
|
|
open: open !== null && open !== void 0 ? open : visible,
|
|
|
mask: mask,
|
|
|
push: push,
|
|
|
width: mergedWidth,
|
|
|
height: mergedHeight,
|
|
|
style: Object.assign(Object.assign({}, drawer === null || drawer === void 0 ? void 0 : drawer.style), style),
|
|
|
className: _classnames_2_5_1_classnames_default()(drawer === null || drawer === void 0 ? void 0 : drawer.className, className),
|
|
|
rootClassName: drawerClassName,
|
|
|
getContainer: getContainer,
|
|
|
afterOpenChange: afterOpenChange !== null && afterOpenChange !== void 0 ? afterOpenChange : afterVisibleChange,
|
|
|
panelRef: panelRef
|
|
|
}), /*#__PURE__*/_react_17_0_2_react.createElement(drawer_DrawerPanel, Object.assign({
|
|
|
prefixCls: prefixCls
|
|
|
}, rest, {
|
|
|
onClose: onClose
|
|
|
}))))));
|
|
|
};
|
|
|
/** @private Internal Component. Do not use in your production. */
|
|
|
const PurePanel = props => {
|
|
|
const {
|
|
|
prefixCls: customizePrefixCls,
|
|
|
style,
|
|
|
className,
|
|
|
placement = 'right'
|
|
|
} = props,
|
|
|
restProps = __rest(props, ["prefixCls", "style", "className", "placement"]);
|
|
|
const {
|
|
|
getPrefixCls
|
|
|
} = _react_17_0_2_react.useContext(config_provider_context/* ConfigContext */.E_);
|
|
|
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
|
|
|
// Style
|
|
|
const [wrapSSR, hashId] = drawer_style(prefixCls);
|
|
|
const cls = _classnames_2_5_1_classnames_default()(prefixCls, `${prefixCls}-pure`, `${prefixCls}-${placement}`, hashId, className);
|
|
|
return wrapSSR( /*#__PURE__*/_react_17_0_2_react.createElement("div", {
|
|
|
className: cls,
|
|
|
style: style
|
|
|
}, /*#__PURE__*/_react_17_0_2_react.createElement(drawer_DrawerPanel, Object.assign({
|
|
|
prefixCls: prefixCls
|
|
|
}, restProps))));
|
|
|
};
|
|
|
drawer_Drawer._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
|
|
if (false) {}
|
|
|
/* harmony default export */ var drawer = (drawer_Drawer);
|
|
|
|
|
|
/***/ }),
|
|
|
|
|
|
/***/ 39180:
|
|
|
/*!************************************************************!*\
|
|
|
!*** ./node_modules/_array-move@3.0.1@array-move/index.js ***!
|
|
|
\************************************************************/
|
|
|
/***/ (function(module) {
|
|
|
|
|
|
|
|
|
|
|
|
const arrayMoveMutate = (array, from, to) => {
|
|
|
const startIndex = from < 0 ? array.length + from : from;
|
|
|
|
|
|
if (startIndex >= 0 && startIndex < array.length) {
|
|
|
const endIndex = to < 0 ? array.length + to : to;
|
|
|
|
|
|
const [item] = array.splice(from, 1);
|
|
|
array.splice(endIndex, 0, item);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const arrayMove = (array, from, to) => {
|
|
|
array = [...array];
|
|
|
arrayMoveMutate(array, from, to);
|
|
|
return array;
|
|
|
};
|
|
|
|
|
|
module.exports = arrayMove;
|
|
|
module.exports.mutate = arrayMoveMutate;
|
|
|
|
|
|
|
|
|
/***/ }),
|
|
|
|
|
|
/***/ 44589:
|
|
|
/*!***************************************************************************************************!*\
|
|
|
!*** ./node_modules/_react-sortable-hoc@1.11.0@react-sortable-hoc/dist/react-sortable-hoc.esm.js ***!
|
|
|
\***************************************************************************************************/
|
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
|
/* harmony export */ JN: function() { return /* binding */ sortableContainer; },
|
|
|
/* harmony export */ W8: function() { return /* binding */ sortableElement; }
|
|
|
/* harmony export */ });
|
|
|
/* unused harmony exports sortableContainer, sortableElement, SortableHandle, sortableHandle, arrayMove */
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ 24931);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @babel/runtime/helpers/esm/slicedToArray */ 69553);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_objectSpread__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectSpread */ 923);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/helpers/esm/classCallCheck */ 70057);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @babel/runtime/helpers/esm/createClass */ 3643);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @babel/runtime/helpers/esm/possibleConstructorReturn */ 39010);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @babel/runtime/helpers/esm/getPrototypeOf */ 32837);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @babel/runtime/helpers/esm/inherits */ 61471);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babel/runtime/helpers/esm/assertThisInitialized */ 6961);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babel/runtime/helpers/esm/defineProperty */ 84957);
|
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ 59301);
|
|
|
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! prop-types */ 12708);
|
|
|
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_8__);
|
|
|
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ 4676);
|
|
|
/* harmony import */ var invariant__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! invariant */ 44520);
|
|
|
/* harmony import */ var invariant__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(invariant__WEBPACK_IMPORTED_MODULE_2__);
|
|
|
/* harmony import */ var _babel_runtime_helpers_esm_toConsumableArray__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @babel/runtime/helpers/esm/toConsumableArray */ 12101);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var Manager = function () {
|
|
|
function Manager() {
|
|
|
(0,_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(this, Manager);
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(this, "refs", {});
|
|
|
}
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z)(Manager, [{
|
|
|
key: "add",
|
|
|
value: function add(collection, ref) {
|
|
|
if (!this.refs[collection]) {
|
|
|
this.refs[collection] = [];
|
|
|
}
|
|
|
|
|
|
this.refs[collection].push(ref);
|
|
|
}
|
|
|
}, {
|
|
|
key: "remove",
|
|
|
value: function remove(collection, ref) {
|
|
|
var index = this.getIndex(collection, ref);
|
|
|
|
|
|
if (index !== -1) {
|
|
|
this.refs[collection].splice(index, 1);
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
key: "isActive",
|
|
|
value: function isActive() {
|
|
|
return this.active;
|
|
|
}
|
|
|
}, {
|
|
|
key: "getActive",
|
|
|
value: function getActive() {
|
|
|
var _this = this;
|
|
|
|
|
|
return this.refs[this.active.collection].find(function (_ref) {
|
|
|
var node = _ref.node;
|
|
|
return node.sortableInfo.index == _this.active.index;
|
|
|
});
|
|
|
}
|
|
|
}, {
|
|
|
key: "getIndex",
|
|
|
value: function getIndex(collection, ref) {
|
|
|
return this.refs[collection].indexOf(ref);
|
|
|
}
|
|
|
}, {
|
|
|
key: "getOrderedRefs",
|
|
|
value: function getOrderedRefs() {
|
|
|
var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection;
|
|
|
return this.refs[collection].sort(sortByIndex);
|
|
|
}
|
|
|
}]);
|
|
|
|
|
|
return Manager;
|
|
|
}();
|
|
|
|
|
|
function sortByIndex(_ref2, _ref3) {
|
|
|
var index1 = _ref2.node.sortableInfo.index;
|
|
|
var index2 = _ref3.node.sortableInfo.index;
|
|
|
return index1 - index2;
|
|
|
}
|
|
|
|
|
|
function arrayMove(array, from, to) {
|
|
|
if (false) {}
|
|
|
|
|
|
array = array.slice();
|
|
|
array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
|
|
|
return array;
|
|
|
}
|
|
|
function omit(obj, keysToOmit) {
|
|
|
return Object.keys(obj).reduce(function (acc, key) {
|
|
|
if (keysToOmit.indexOf(key) === -1) {
|
|
|
acc[key] = obj[key];
|
|
|
}
|
|
|
|
|
|
return acc;
|
|
|
}, {});
|
|
|
}
|
|
|
var events = {
|
|
|
end: ['touchend', 'touchcancel', 'mouseup'],
|
|
|
move: ['touchmove', 'mousemove'],
|
|
|
start: ['touchstart', 'mousedown']
|
|
|
};
|
|
|
var vendorPrefix = function () {
|
|
|
if (typeof window === 'undefined' || typeof document === 'undefined') {
|
|
|
return '';
|
|
|
}
|
|
|
|
|
|
var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe'];
|
|
|
var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1];
|
|
|
|
|
|
switch (pre) {
|
|
|
case 'ms':
|
|
|
return 'ms';
|
|
|
|
|
|
default:
|
|
|
return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : '';
|
|
|
}
|
|
|
}();
|
|
|
function setInlineStyles(node, styles) {
|
|
|
Object.keys(styles).forEach(function (key) {
|
|
|
node.style[key] = styles[key];
|
|
|
});
|
|
|
}
|
|
|
function setTranslate3d(node, translate) {
|
|
|
node.style["".concat(vendorPrefix, "Transform")] = translate == null ? '' : "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
|
|
|
}
|
|
|
function setTransitionDuration(node, duration) {
|
|
|
node.style["".concat(vendorPrefix, "TransitionDuration")] = duration == null ? '' : "".concat(duration, "ms");
|
|
|
}
|
|
|
function closest(el, fn) {
|
|
|
while (el) {
|
|
|
if (fn(el)) {
|
|
|
return el;
|
|
|
}
|
|
|
|
|
|
el = el.parentNode;
|
|
|
}
|
|
|
|
|
|
return null;
|
|
|
}
|
|
|
function limit(min, max, value) {
|
|
|
return Math.max(min, Math.min(value, max));
|
|
|
}
|
|
|
|
|
|
function getPixelValue(stringValue) {
|
|
|
if (stringValue.substr(-2) === 'px') {
|
|
|
return parseFloat(stringValue);
|
|
|
}
|
|
|
|
|
|
return 0;
|
|
|
}
|
|
|
|
|
|
function getElementMargin(element) {
|
|
|
var style = window.getComputedStyle(element);
|
|
|
return {
|
|
|
bottom: getPixelValue(style.marginBottom),
|
|
|
left: getPixelValue(style.marginLeft),
|
|
|
right: getPixelValue(style.marginRight),
|
|
|
top: getPixelValue(style.marginTop)
|
|
|
};
|
|
|
}
|
|
|
function provideDisplayName(prefix, Component$$1) {
|
|
|
var componentName = Component$$1.displayName || Component$$1.name;
|
|
|
return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix;
|
|
|
}
|
|
|
function getScrollAdjustedBoundingClientRect(node, scrollDelta) {
|
|
|
var boundingClientRect = node.getBoundingClientRect();
|
|
|
return {
|
|
|
top: boundingClientRect.top + scrollDelta.top,
|
|
|
left: boundingClientRect.left + scrollDelta.left
|
|
|
};
|
|
|
}
|
|
|
function getPosition(event) {
|
|
|
if (event.touches && event.touches.length) {
|
|
|
return {
|
|
|
x: event.touches[0].pageX,
|
|
|
y: event.touches[0].pageY
|
|
|
};
|
|
|
} else if (event.changedTouches && event.changedTouches.length) {
|
|
|
return {
|
|
|
x: event.changedTouches[0].pageX,
|
|
|
y: event.changedTouches[0].pageY
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
|
x: event.pageX,
|
|
|
y: event.pageY
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
function isTouchEvent(event) {
|
|
|
return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length;
|
|
|
}
|
|
|
function getEdgeOffset(node, parent) {
|
|
|
var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
|
|
left: 0,
|
|
|
top: 0
|
|
|
};
|
|
|
|
|
|
if (!node) {
|
|
|
return undefined;
|
|
|
}
|
|
|
|
|
|
var nodeOffset = {
|
|
|
left: offset.left + node.offsetLeft,
|
|
|
top: offset.top + node.offsetTop
|
|
|
};
|
|
|
|
|
|
if (node.parentNode === parent) {
|
|
|
return nodeOffset;
|
|
|
}
|
|
|
|
|
|
return getEdgeOffset(node.parentNode, parent, nodeOffset);
|
|
|
}
|
|
|
function getTargetIndex(newIndex, prevIndex, oldIndex) {
|
|
|
if (newIndex < oldIndex && newIndex > prevIndex) {
|
|
|
return newIndex - 1;
|
|
|
} else if (newIndex > oldIndex && newIndex < prevIndex) {
|
|
|
return newIndex + 1;
|
|
|
} else {
|
|
|
return newIndex;
|
|
|
}
|
|
|
}
|
|
|
function getLockPixelOffset(_ref) {
|
|
|
var lockOffset = _ref.lockOffset,
|
|
|
width = _ref.width,
|
|
|
height = _ref.height;
|
|
|
var offsetX = lockOffset;
|
|
|
var offsetY = lockOffset;
|
|
|
var unit = 'px';
|
|
|
|
|
|
if (typeof lockOffset === 'string') {
|
|
|
var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset);
|
|
|
invariant__WEBPACK_IMPORTED_MODULE_2___default()(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset);
|
|
|
offsetX = parseFloat(lockOffset);
|
|
|
offsetY = parseFloat(lockOffset);
|
|
|
unit = match[1];
|
|
|
}
|
|
|
|
|
|
invariant__WEBPACK_IMPORTED_MODULE_2___default()(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset);
|
|
|
|
|
|
if (unit === '%') {
|
|
|
offsetX = offsetX * width / 100;
|
|
|
offsetY = offsetY * height / 100;
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
x: offsetX,
|
|
|
y: offsetY
|
|
|
};
|
|
|
}
|
|
|
function getLockPixelOffsets(_ref2) {
|
|
|
var height = _ref2.height,
|
|
|
width = _ref2.width,
|
|
|
lockOffset = _ref2.lockOffset;
|
|
|
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
|
|
|
invariant__WEBPACK_IMPORTED_MODULE_2___default()(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
|
|
|
|
|
|
var _offsets = (0,_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(offsets, 2),
|
|
|
minLockOffset = _offsets[0],
|
|
|
maxLockOffset = _offsets[1];
|
|
|
|
|
|
return [getLockPixelOffset({
|
|
|
height: height,
|
|
|
lockOffset: minLockOffset,
|
|
|
width: width
|
|
|
}), getLockPixelOffset({
|
|
|
height: height,
|
|
|
lockOffset: maxLockOffset,
|
|
|
width: width
|
|
|
})];
|
|
|
}
|
|
|
|
|
|
function isScrollable(el) {
|
|
|
var computedStyle = window.getComputedStyle(el);
|
|
|
var overflowRegex = /(auto|scroll)/;
|
|
|
var properties = ['overflow', 'overflowX', 'overflowY'];
|
|
|
return properties.find(function (property) {
|
|
|
return overflowRegex.test(computedStyle[property]);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function getScrollingParent(el) {
|
|
|
if (!(el instanceof HTMLElement)) {
|
|
|
return null;
|
|
|
} else if (isScrollable(el)) {
|
|
|
return el;
|
|
|
} else {
|
|
|
return getScrollingParent(el.parentNode);
|
|
|
}
|
|
|
}
|
|
|
function getContainerGridGap(element) {
|
|
|
var style = window.getComputedStyle(element);
|
|
|
|
|
|
if (style.display === 'grid') {
|
|
|
return {
|
|
|
x: getPixelValue(style.gridColumnGap),
|
|
|
y: getPixelValue(style.gridRowGap)
|
|
|
};
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
};
|
|
|
}
|
|
|
var KEYCODE = {
|
|
|
TAB: 9,
|
|
|
ESC: 27,
|
|
|
SPACE: 32,
|
|
|
LEFT: 37,
|
|
|
UP: 38,
|
|
|
RIGHT: 39,
|
|
|
DOWN: 40
|
|
|
};
|
|
|
var NodeType = {
|
|
|
Anchor: 'A',
|
|
|
Button: 'BUTTON',
|
|
|
Canvas: 'CANVAS',
|
|
|
Input: 'INPUT',
|
|
|
Option: 'OPTION',
|
|
|
Textarea: 'TEXTAREA',
|
|
|
Select: 'SELECT'
|
|
|
};
|
|
|
function cloneNode(node) {
|
|
|
var selector = 'input, textarea, select, canvas, [contenteditable]';
|
|
|
var fields = node.querySelectorAll(selector);
|
|
|
var clonedNode = node.cloneNode(true);
|
|
|
|
|
|
var clonedFields = (0,_babel_runtime_helpers_esm_toConsumableArray__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z)(clonedNode.querySelectorAll(selector));
|
|
|
|
|
|
clonedFields.forEach(function (field, i) {
|
|
|
if (field.type !== 'file') {
|
|
|
field.value = fields[i].value;
|
|
|
}
|
|
|
|
|
|
if (field.type === 'radio' && field.name) {
|
|
|
field.name = "__sortableClone__".concat(field.name);
|
|
|
}
|
|
|
|
|
|
if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) {
|
|
|
var destCtx = field.getContext('2d');
|
|
|
destCtx.drawImage(fields[i], 0, 0);
|
|
|
}
|
|
|
});
|
|
|
return clonedNode;
|
|
|
}
|
|
|
|
|
|
function sortableHandle(WrappedComponent) {
|
|
|
var _class, _temp;
|
|
|
|
|
|
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
|
withRef: false
|
|
|
};
|
|
|
return _temp = _class = function (_React$Component) {
|
|
|
_inherits(WithSortableHandle, _React$Component);
|
|
|
|
|
|
function WithSortableHandle() {
|
|
|
_classCallCheck(this, WithSortableHandle);
|
|
|
|
|
|
return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableHandle).apply(this, arguments));
|
|
|
}
|
|
|
|
|
|
_createClass(WithSortableHandle, [{
|
|
|
key: "componentDidMount",
|
|
|
value: function componentDidMount() {
|
|
|
var node = findDOMNode(this);
|
|
|
node.sortableHandle = true;
|
|
|
}
|
|
|
}, {
|
|
|
key: "getWrappedInstance",
|
|
|
value: function getWrappedInstance() {
|
|
|
invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
|
|
|
return this.refs.wrappedInstance;
|
|
|
}
|
|
|
}, {
|
|
|
key: "render",
|
|
|
value: function render() {
|
|
|
var ref = config.withRef ? 'wrappedInstance' : null;
|
|
|
return createElement(WrappedComponent, _extends({
|
|
|
ref: ref
|
|
|
}, this.props));
|
|
|
}
|
|
|
}]);
|
|
|
|
|
|
return WithSortableHandle;
|
|
|
}(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
|
|
|
}
|
|
|
function isSortableHandle(node) {
|
|
|
return node.sortableHandle != null;
|
|
|
}
|
|
|
|
|
|
var AutoScroller = function () {
|
|
|
function AutoScroller(container, onScrollCallback) {
|
|
|
(0,_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(this, AutoScroller);
|
|
|
|
|
|
this.container = container;
|
|
|
this.onScrollCallback = onScrollCallback;
|
|
|
}
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z)(AutoScroller, [{
|
|
|
key: "clear",
|
|
|
value: function clear() {
|
|
|
if (this.interval == null) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
clearInterval(this.interval);
|
|
|
this.interval = null;
|
|
|
}
|
|
|
}, {
|
|
|
key: "update",
|
|
|
value: function update(_ref) {
|
|
|
var _this = this;
|
|
|
|
|
|
var translate = _ref.translate,
|
|
|
minTranslate = _ref.minTranslate,
|
|
|
maxTranslate = _ref.maxTranslate,
|
|
|
width = _ref.width,
|
|
|
height = _ref.height;
|
|
|
var direction = {
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
};
|
|
|
var speed = {
|
|
|
x: 1,
|
|
|
y: 1
|
|
|
};
|
|
|
var acceleration = {
|
|
|
x: 10,
|
|
|
y: 10
|
|
|
};
|
|
|
var _this$container = this.container,
|
|
|
scrollTop = _this$container.scrollTop,
|
|
|
scrollLeft = _this$container.scrollLeft,
|
|
|
scrollHeight = _this$container.scrollHeight,
|
|
|
scrollWidth = _this$container.scrollWidth,
|
|
|
clientHeight = _this$container.clientHeight,
|
|
|
clientWidth = _this$container.clientWidth;
|
|
|
var isTop = scrollTop === 0;
|
|
|
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
|
|
|
var isLeft = scrollLeft === 0;
|
|
|
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
|
|
|
|
|
|
if (translate.y >= maxTranslate.y - height / 2 && !isBottom) {
|
|
|
direction.y = 1;
|
|
|
speed.y = acceleration.y * Math.abs((maxTranslate.y - height / 2 - translate.y) / height);
|
|
|
} else if (translate.x >= maxTranslate.x - width / 2 && !isRight) {
|
|
|
direction.x = 1;
|
|
|
speed.x = acceleration.x * Math.abs((maxTranslate.x - width / 2 - translate.x) / width);
|
|
|
} else if (translate.y <= minTranslate.y + height / 2 && !isTop) {
|
|
|
direction.y = -1;
|
|
|
speed.y = acceleration.y * Math.abs((translate.y - height / 2 - minTranslate.y) / height);
|
|
|
} else if (translate.x <= minTranslate.x + width / 2 && !isLeft) {
|
|
|
direction.x = -1;
|
|
|
speed.x = acceleration.x * Math.abs((translate.x - width / 2 - minTranslate.x) / width);
|
|
|
}
|
|
|
|
|
|
if (this.interval) {
|
|
|
this.clear();
|
|
|
this.isAutoScrolling = false;
|
|
|
}
|
|
|
|
|
|
if (direction.x !== 0 || direction.y !== 0) {
|
|
|
this.interval = setInterval(function () {
|
|
|
_this.isAutoScrolling = true;
|
|
|
var offset = {
|
|
|
left: speed.x * direction.x,
|
|
|
top: speed.y * direction.y
|
|
|
};
|
|
|
_this.container.scrollTop += offset.top;
|
|
|
_this.container.scrollLeft += offset.left;
|
|
|
|
|
|
_this.onScrollCallback(offset);
|
|
|
}, 5);
|
|
|
}
|
|
|
}
|
|
|
}]);
|
|
|
|
|
|
return AutoScroller;
|
|
|
}();
|
|
|
|
|
|
function defaultGetHelperDimensions(_ref) {
|
|
|
var node = _ref.node;
|
|
|
return {
|
|
|
height: node.offsetHeight,
|
|
|
width: node.offsetWidth
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function defaultShouldCancelStart(event) {
|
|
|
var interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
|
|
|
|
|
|
if (interactiveElements.indexOf(event.target.tagName) !== -1) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
if (closest(event.target, function (el) {
|
|
|
return el.contentEditable === 'true';
|
|
|
})) {
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
var propTypes = {
|
|
|
axis: prop_types__WEBPACK_IMPORTED_MODULE_8___default().oneOf(['x', 'y', 'xy']),
|
|
|
contentWindow: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().any),
|
|
|
disableAutoscroll: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool),
|
|
|
distance: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().number),
|
|
|
getContainer: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
getHelperDimensions: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
helperClass: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().string),
|
|
|
helperContainer: prop_types__WEBPACK_IMPORTED_MODULE_8___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_8___default().func), typeof HTMLElement === 'undefined' ? (prop_types__WEBPACK_IMPORTED_MODULE_8___default().any) : prop_types__WEBPACK_IMPORTED_MODULE_8___default().instanceOf(HTMLElement)]),
|
|
|
hideSortableGhost: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool),
|
|
|
keyboardSortingTransitionDuration: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().number),
|
|
|
lockAxis: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().string),
|
|
|
lockOffset: prop_types__WEBPACK_IMPORTED_MODULE_8___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_8___default().number), (prop_types__WEBPACK_IMPORTED_MODULE_8___default().string), prop_types__WEBPACK_IMPORTED_MODULE_8___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_8___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_8___default().number), (prop_types__WEBPACK_IMPORTED_MODULE_8___default().string)]))]),
|
|
|
lockToContainerEdges: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool),
|
|
|
onSortEnd: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
onSortMove: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
onSortOver: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
onSortStart: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
pressDelay: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().number),
|
|
|
pressThreshold: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().number),
|
|
|
keyCodes: prop_types__WEBPACK_IMPORTED_MODULE_8___default().shape({
|
|
|
lift: prop_types__WEBPACK_IMPORTED_MODULE_8___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_8___default().number)),
|
|
|
drop: prop_types__WEBPACK_IMPORTED_MODULE_8___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_8___default().number)),
|
|
|
cancel: prop_types__WEBPACK_IMPORTED_MODULE_8___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_8___default().number)),
|
|
|
up: prop_types__WEBPACK_IMPORTED_MODULE_8___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_8___default().number)),
|
|
|
down: prop_types__WEBPACK_IMPORTED_MODULE_8___default().arrayOf((prop_types__WEBPACK_IMPORTED_MODULE_8___default().number))
|
|
|
}),
|
|
|
shouldCancelStart: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
transitionDuration: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().number),
|
|
|
updateBeforeSortStart: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().func),
|
|
|
useDragHandle: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool),
|
|
|
useWindowAsScrollContainer: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool)
|
|
|
};
|
|
|
var defaultKeyCodes = {
|
|
|
lift: [KEYCODE.SPACE],
|
|
|
drop: [KEYCODE.SPACE],
|
|
|
cancel: [KEYCODE.ESC],
|
|
|
up: [KEYCODE.UP, KEYCODE.LEFT],
|
|
|
down: [KEYCODE.DOWN, KEYCODE.RIGHT]
|
|
|
};
|
|
|
var defaultProps = {
|
|
|
axis: 'y',
|
|
|
disableAutoscroll: false,
|
|
|
distance: 0,
|
|
|
getHelperDimensions: defaultGetHelperDimensions,
|
|
|
hideSortableGhost: true,
|
|
|
lockOffset: '50%',
|
|
|
lockToContainerEdges: false,
|
|
|
pressDelay: 0,
|
|
|
pressThreshold: 5,
|
|
|
keyCodes: defaultKeyCodes,
|
|
|
shouldCancelStart: defaultShouldCancelStart,
|
|
|
transitionDuration: 300,
|
|
|
useWindowAsScrollContainer: false
|
|
|
};
|
|
|
var omittedProps = Object.keys(propTypes);
|
|
|
function validateProps(props) {
|
|
|
invariant__WEBPACK_IMPORTED_MODULE_2___default()(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
|
|
|
}
|
|
|
|
|
|
function _finallyRethrows(body, finalizer) {
|
|
|
try {
|
|
|
var result = body();
|
|
|
} catch (e) {
|
|
|
return finalizer(true, e);
|
|
|
}
|
|
|
|
|
|
if (result && result.then) {
|
|
|
return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
|
|
|
}
|
|
|
|
|
|
return finalizer(false, value);
|
|
|
}
|
|
|
function sortableContainer(WrappedComponent) {
|
|
|
var _class, _temp;
|
|
|
|
|
|
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
|
withRef: false
|
|
|
};
|
|
|
return _temp = _class = function (_React$Component) {
|
|
|
(0,_babel_runtime_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_9__/* ["default"] */ .Z)(WithSortableContainer, _React$Component);
|
|
|
|
|
|
function WithSortableContainer(props) {
|
|
|
var _this;
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(this, WithSortableContainer);
|
|
|
|
|
|
_this = (0,_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .Z)(this, (0,_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .Z)(WithSortableContainer).call(this, props));
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "state", {});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleStart", function (event) {
|
|
|
var _this$props = _this.props,
|
|
|
distance = _this$props.distance,
|
|
|
shouldCancelStart = _this$props.shouldCancelStart;
|
|
|
|
|
|
if (event.button === 2 || shouldCancelStart(event)) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
_this.touched = true;
|
|
|
_this.position = getPosition(event);
|
|
|
var node = closest(event.target, function (el) {
|
|
|
return el.sortableInfo != null;
|
|
|
});
|
|
|
|
|
|
if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) {
|
|
|
var useDragHandle = _this.props.useDragHandle;
|
|
|
var _node$sortableInfo = node.sortableInfo,
|
|
|
index = _node$sortableInfo.index,
|
|
|
collection = _node$sortableInfo.collection,
|
|
|
disabled = _node$sortableInfo.disabled;
|
|
|
|
|
|
if (disabled) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (useDragHandle && !closest(event.target, isSortableHandle)) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
_this.manager.active = {
|
|
|
collection: collection,
|
|
|
index: index
|
|
|
};
|
|
|
|
|
|
if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) {
|
|
|
event.preventDefault();
|
|
|
}
|
|
|
|
|
|
if (!distance) {
|
|
|
if (_this.props.pressDelay === 0) {
|
|
|
_this.handlePress(event);
|
|
|
} else {
|
|
|
_this.pressTimer = setTimeout(function () {
|
|
|
return _this.handlePress(event);
|
|
|
}, _this.props.pressDelay);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "nodeIsChild", function (node) {
|
|
|
return node.sortableInfo.manager === _this.manager;
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleMove", function (event) {
|
|
|
var _this$props2 = _this.props,
|
|
|
distance = _this$props2.distance,
|
|
|
pressThreshold = _this$props2.pressThreshold;
|
|
|
|
|
|
if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) {
|
|
|
var position = getPosition(event);
|
|
|
var delta = {
|
|
|
x: _this.position.x - position.x,
|
|
|
y: _this.position.y - position.y
|
|
|
};
|
|
|
var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y);
|
|
|
_this.delta = delta;
|
|
|
|
|
|
if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) {
|
|
|
clearTimeout(_this.cancelTimer);
|
|
|
_this.cancelTimer = setTimeout(_this.cancel, 0);
|
|
|
} else if (distance && combinedDelta >= distance && _this.manager.isActive()) {
|
|
|
_this.handlePress(event);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleEnd", function () {
|
|
|
_this.touched = false;
|
|
|
|
|
|
_this.cancel();
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "cancel", function () {
|
|
|
var distance = _this.props.distance;
|
|
|
var sorting = _this.state.sorting;
|
|
|
|
|
|
if (!sorting) {
|
|
|
if (!distance) {
|
|
|
clearTimeout(_this.pressTimer);
|
|
|
}
|
|
|
|
|
|
_this.manager.active = null;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handlePress", function (event) {
|
|
|
try {
|
|
|
var active = _this.manager.getActive();
|
|
|
|
|
|
var _temp6 = function () {
|
|
|
if (active) {
|
|
|
var _temp7 = function _temp7() {
|
|
|
var index = _node.sortableInfo.index;
|
|
|
var margin = getElementMargin(_node);
|
|
|
var gridGap = getContainerGridGap(_this.container);
|
|
|
|
|
|
var containerBoundingRect = _this.scrollContainer.getBoundingClientRect();
|
|
|
|
|
|
var dimensions = _getHelperDimensions({
|
|
|
index: index,
|
|
|
node: _node,
|
|
|
collection: _collection
|
|
|
});
|
|
|
|
|
|
_this.node = _node;
|
|
|
_this.margin = margin;
|
|
|
_this.gridGap = gridGap;
|
|
|
_this.width = dimensions.width;
|
|
|
_this.height = dimensions.height;
|
|
|
_this.marginOffset = {
|
|
|
x: _this.margin.left + _this.margin.right + _this.gridGap.x,
|
|
|
y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y)
|
|
|
};
|
|
|
_this.boundingClientRect = _node.getBoundingClientRect();
|
|
|
_this.containerBoundingRect = containerBoundingRect;
|
|
|
_this.index = index;
|
|
|
_this.newIndex = index;
|
|
|
_this.axis = {
|
|
|
x: _axis.indexOf('x') >= 0,
|
|
|
y: _axis.indexOf('y') >= 0
|
|
|
};
|
|
|
_this.offsetEdge = getEdgeOffset(_node, _this.container);
|
|
|
|
|
|
if (_isKeySorting) {
|
|
|
_this.initialOffset = getPosition((0,_babel_runtime_helpers_esm_objectSpread__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .Z)({}, event, {
|
|
|
pageX: _this.boundingClientRect.left,
|
|
|
pageY: _this.boundingClientRect.top
|
|
|
}));
|
|
|
} else {
|
|
|
_this.initialOffset = getPosition(event);
|
|
|
}
|
|
|
|
|
|
_this.initialScroll = {
|
|
|
left: _this.scrollContainer.scrollLeft,
|
|
|
top: _this.scrollContainer.scrollTop
|
|
|
};
|
|
|
_this.initialWindowScroll = {
|
|
|
left: window.pageXOffset,
|
|
|
top: window.pageYOffset
|
|
|
};
|
|
|
_this.helper = _this.helperContainer.appendChild(cloneNode(_node));
|
|
|
setInlineStyles(_this.helper, {
|
|
|
boxSizing: 'border-box',
|
|
|
height: "".concat(_this.height, "px"),
|
|
|
left: "".concat(_this.boundingClientRect.left - margin.left, "px"),
|
|
|
pointerEvents: 'none',
|
|
|
position: 'fixed',
|
|
|
top: "".concat(_this.boundingClientRect.top - margin.top, "px"),
|
|
|
width: "".concat(_this.width, "px")
|
|
|
});
|
|
|
|
|
|
if (_isKeySorting) {
|
|
|
_this.helper.focus();
|
|
|
}
|
|
|
|
|
|
if (_hideSortableGhost) {
|
|
|
_this.sortableGhost = _node;
|
|
|
setInlineStyles(_node, {
|
|
|
opacity: 0,
|
|
|
visibility: 'hidden'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
_this.minTranslate = {};
|
|
|
_this.maxTranslate = {};
|
|
|
|
|
|
if (_isKeySorting) {
|
|
|
var _ref = _useWindowAsScrollContainer ? {
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
width: _this.contentWindow.innerWidth,
|
|
|
height: _this.contentWindow.innerHeight
|
|
|
} : _this.containerBoundingRect,
|
|
|
containerTop = _ref.top,
|
|
|
containerLeft = _ref.left,
|
|
|
containerWidth = _ref.width,
|
|
|
containerHeight = _ref.height;
|
|
|
|
|
|
var containerBottom = containerTop + containerHeight;
|
|
|
var containerRight = containerLeft + containerWidth;
|
|
|
|
|
|
if (_this.axis.x) {
|
|
|
_this.minTranslate.x = containerLeft - _this.boundingClientRect.left;
|
|
|
_this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width);
|
|
|
}
|
|
|
|
|
|
if (_this.axis.y) {
|
|
|
_this.minTranslate.y = containerTop - _this.boundingClientRect.top;
|
|
|
_this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height);
|
|
|
}
|
|
|
} else {
|
|
|
if (_this.axis.x) {
|
|
|
_this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
|
|
|
_this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2;
|
|
|
}
|
|
|
|
|
|
if (_this.axis.y) {
|
|
|
_this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2;
|
|
|
_this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (_helperClass) {
|
|
|
_helperClass.split(' ').forEach(function (className) {
|
|
|
return _this.helper.classList.add(className);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
_this.listenerNode = event.touches ? _node : _this.contentWindow;
|
|
|
|
|
|
if (_isKeySorting) {
|
|
|
_this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true);
|
|
|
|
|
|
_this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true);
|
|
|
|
|
|
_this.listenerNode.addEventListener('keydown', _this.handleKeyDown);
|
|
|
} else {
|
|
|
events.move.forEach(function (eventName) {
|
|
|
return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
|
|
|
});
|
|
|
events.end.forEach(function (eventName) {
|
|
|
return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
_this.setState({
|
|
|
sorting: true,
|
|
|
sortingIndex: index
|
|
|
});
|
|
|
|
|
|
if (_onSortStart) {
|
|
|
_onSortStart({
|
|
|
node: _node,
|
|
|
index: index,
|
|
|
collection: _collection,
|
|
|
isKeySorting: _isKeySorting,
|
|
|
nodes: _this.manager.getOrderedRefs(),
|
|
|
helper: _this.helper
|
|
|
}, event);
|
|
|
}
|
|
|
|
|
|
if (_isKeySorting) {
|
|
|
_this.keyMove(0);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
var _this$props3 = _this.props,
|
|
|
_axis = _this$props3.axis,
|
|
|
_getHelperDimensions = _this$props3.getHelperDimensions,
|
|
|
_helperClass = _this$props3.helperClass,
|
|
|
_hideSortableGhost = _this$props3.hideSortableGhost,
|
|
|
updateBeforeSortStart = _this$props3.updateBeforeSortStart,
|
|
|
_onSortStart = _this$props3.onSortStart,
|
|
|
_useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer;
|
|
|
var _node = active.node,
|
|
|
_collection = active.collection;
|
|
|
var _isKeySorting = _this.manager.isKeySorting;
|
|
|
|
|
|
var _temp8 = function () {
|
|
|
if (typeof updateBeforeSortStart === 'function') {
|
|
|
_this._awaitingUpdateBeforeSortStart = true;
|
|
|
|
|
|
var _temp9 = _finallyRethrows(function () {
|
|
|
var index = _node.sortableInfo.index;
|
|
|
return Promise.resolve(updateBeforeSortStart({
|
|
|
collection: _collection,
|
|
|
index: index,
|
|
|
node: _node,
|
|
|
isKeySorting: _isKeySorting
|
|
|
}, event)).then(function () {});
|
|
|
}, function (_wasThrown, _result) {
|
|
|
_this._awaitingUpdateBeforeSortStart = false;
|
|
|
if (_wasThrown) throw _result;
|
|
|
return _result;
|
|
|
});
|
|
|
|
|
|
if (_temp9 && _temp9.then) return _temp9.then(function () {});
|
|
|
}
|
|
|
}();
|
|
|
|
|
|
return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
|
|
|
}
|
|
|
}();
|
|
|
|
|
|
return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0);
|
|
|
} catch (e) {
|
|
|
return Promise.reject(e);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleSortMove", function (event) {
|
|
|
var onSortMove = _this.props.onSortMove;
|
|
|
|
|
|
if (typeof event.preventDefault === 'function') {
|
|
|
event.preventDefault();
|
|
|
}
|
|
|
|
|
|
_this.updateHelperPosition(event);
|
|
|
|
|
|
_this.animateNodes();
|
|
|
|
|
|
_this.autoscroll();
|
|
|
|
|
|
if (onSortMove) {
|
|
|
onSortMove(event);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleSortEnd", function (event) {
|
|
|
var _this$props4 = _this.props,
|
|
|
hideSortableGhost = _this$props4.hideSortableGhost,
|
|
|
onSortEnd = _this$props4.onSortEnd;
|
|
|
var _this$manager = _this.manager,
|
|
|
collection = _this$manager.active.collection,
|
|
|
isKeySorting = _this$manager.isKeySorting;
|
|
|
|
|
|
var nodes = _this.manager.getOrderedRefs();
|
|
|
|
|
|
if (_this.listenerNode) {
|
|
|
if (isKeySorting) {
|
|
|
_this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true);
|
|
|
|
|
|
_this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true);
|
|
|
|
|
|
_this.listenerNode.removeEventListener('keydown', _this.handleKeyDown);
|
|
|
} else {
|
|
|
events.move.forEach(function (eventName) {
|
|
|
return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
|
|
|
});
|
|
|
events.end.forEach(function (eventName) {
|
|
|
return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
_this.helper.parentNode.removeChild(_this.helper);
|
|
|
|
|
|
if (hideSortableGhost && _this.sortableGhost) {
|
|
|
setInlineStyles(_this.sortableGhost, {
|
|
|
opacity: '',
|
|
|
visibility: ''
|
|
|
});
|
|
|
}
|
|
|
|
|
|
for (var i = 0, len = nodes.length; i < len; i++) {
|
|
|
var _node2 = nodes[i];
|
|
|
var el = _node2.node;
|
|
|
_node2.edgeOffset = null;
|
|
|
_node2.boundingClientRect = null;
|
|
|
setTranslate3d(el, null);
|
|
|
setTransitionDuration(el, null);
|
|
|
_node2.translate = null;
|
|
|
}
|
|
|
|
|
|
_this.autoScroller.clear();
|
|
|
|
|
|
_this.manager.active = null;
|
|
|
_this.manager.isKeySorting = false;
|
|
|
|
|
|
_this.setState({
|
|
|
sorting: false,
|
|
|
sortingIndex: null
|
|
|
});
|
|
|
|
|
|
if (typeof onSortEnd === 'function') {
|
|
|
onSortEnd({
|
|
|
collection: collection,
|
|
|
newIndex: _this.newIndex,
|
|
|
oldIndex: _this.index,
|
|
|
isKeySorting: isKeySorting,
|
|
|
nodes: nodes
|
|
|
}, event);
|
|
|
}
|
|
|
|
|
|
_this.touched = false;
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "autoscroll", function () {
|
|
|
var disableAutoscroll = _this.props.disableAutoscroll;
|
|
|
var isKeySorting = _this.manager.isKeySorting;
|
|
|
|
|
|
if (disableAutoscroll) {
|
|
|
_this.autoScroller.clear();
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (isKeySorting) {
|
|
|
var translate = (0,_babel_runtime_helpers_esm_objectSpread__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .Z)({}, _this.translate);
|
|
|
|
|
|
var scrollX = 0;
|
|
|
var scrollY = 0;
|
|
|
|
|
|
if (_this.axis.x) {
|
|
|
translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x));
|
|
|
scrollX = _this.translate.x - translate.x;
|
|
|
}
|
|
|
|
|
|
if (_this.axis.y) {
|
|
|
translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y));
|
|
|
scrollY = _this.translate.y - translate.y;
|
|
|
}
|
|
|
|
|
|
_this.translate = translate;
|
|
|
setTranslate3d(_this.helper, _this.translate);
|
|
|
_this.scrollContainer.scrollLeft += scrollX;
|
|
|
_this.scrollContainer.scrollTop += scrollY;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
_this.autoScroller.update({
|
|
|
height: _this.height,
|
|
|
maxTranslate: _this.maxTranslate,
|
|
|
minTranslate: _this.minTranslate,
|
|
|
translate: _this.translate,
|
|
|
width: _this.width
|
|
|
});
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "onAutoScroll", function (offset) {
|
|
|
_this.translate.x += offset.left;
|
|
|
_this.translate.y += offset.top;
|
|
|
|
|
|
_this.animateNodes();
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleKeyDown", function (event) {
|
|
|
var keyCode = event.keyCode;
|
|
|
var _this$props5 = _this.props,
|
|
|
shouldCancelStart = _this$props5.shouldCancelStart,
|
|
|
_this$props5$keyCodes = _this$props5.keyCodes,
|
|
|
customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes;
|
|
|
|
|
|
var keyCodes = (0,_babel_runtime_helpers_esm_objectSpread__WEBPACK_IMPORTED_MODULE_13__/* ["default"] */ .Z)({}, defaultKeyCodes, customKeyCodes);
|
|
|
|
|
|
if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
event.stopPropagation();
|
|
|
event.preventDefault();
|
|
|
|
|
|
if (keyCodes.lift.includes(keyCode) && !_this.manager.active) {
|
|
|
_this.keyLift(event);
|
|
|
} else if (keyCodes.drop.includes(keyCode) && _this.manager.active) {
|
|
|
_this.keyDrop(event);
|
|
|
} else if (keyCodes.cancel.includes(keyCode)) {
|
|
|
_this.newIndex = _this.manager.active.index;
|
|
|
|
|
|
_this.keyDrop(event);
|
|
|
} else if (keyCodes.up.includes(keyCode)) {
|
|
|
_this.keyMove(-1);
|
|
|
} else if (keyCodes.down.includes(keyCode)) {
|
|
|
_this.keyMove(1);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "keyLift", function (event) {
|
|
|
var target = event.target;
|
|
|
var node = closest(target, function (el) {
|
|
|
return el.sortableInfo != null;
|
|
|
});
|
|
|
var _node$sortableInfo2 = node.sortableInfo,
|
|
|
index = _node$sortableInfo2.index,
|
|
|
collection = _node$sortableInfo2.collection;
|
|
|
_this.initialFocusedNode = target;
|
|
|
_this.manager.isKeySorting = true;
|
|
|
_this.manager.active = {
|
|
|
index: index,
|
|
|
collection: collection
|
|
|
};
|
|
|
|
|
|
_this.handlePress(event);
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "keyMove", function (shift) {
|
|
|
var nodes = _this.manager.getOrderedRefs();
|
|
|
|
|
|
var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index;
|
|
|
var newIndex = _this.newIndex + shift;
|
|
|
var prevIndex = _this.newIndex;
|
|
|
|
|
|
if (newIndex < 0 || newIndex > lastIndex) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
_this.prevIndex = prevIndex;
|
|
|
_this.newIndex = newIndex;
|
|
|
var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index);
|
|
|
var target = nodes.find(function (_ref2) {
|
|
|
var node = _ref2.node;
|
|
|
return node.sortableInfo.index === targetIndex;
|
|
|
});
|
|
|
var targetNode = target.node;
|
|
|
var scrollDelta = _this.containerScrollDelta;
|
|
|
var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta);
|
|
|
var targetTranslate = target.translate || {
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
};
|
|
|
var targetPosition = {
|
|
|
top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top,
|
|
|
left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left
|
|
|
};
|
|
|
var shouldAdjustForSize = prevIndex < newIndex;
|
|
|
var sizeAdjustment = {
|
|
|
x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0,
|
|
|
y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0
|
|
|
};
|
|
|
|
|
|
_this.handleSortMove({
|
|
|
pageX: targetPosition.left + sizeAdjustment.x,
|
|
|
pageY: targetPosition.top + sizeAdjustment.y,
|
|
|
ignoreTransition: shift === 0
|
|
|
});
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "keyDrop", function (event) {
|
|
|
_this.handleSortEnd(event);
|
|
|
|
|
|
if (_this.initialFocusedNode) {
|
|
|
_this.initialFocusedNode.focus();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "handleKeyEnd", function (event) {
|
|
|
if (_this.manager.active) {
|
|
|
_this.keyDrop(event);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)((0,_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_12__/* ["default"] */ .Z)(_this)), "isValidSortingTarget", function (event) {
|
|
|
var useDragHandle = _this.props.useDragHandle;
|
|
|
var target = event.target;
|
|
|
var node = closest(target, function (el) {
|
|
|
return el.sortableInfo != null;
|
|
|
});
|
|
|
return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo);
|
|
|
});
|
|
|
|
|
|
validateProps(props);
|
|
|
_this.manager = new Manager();
|
|
|
_this.events = {
|
|
|
end: _this.handleEnd,
|
|
|
move: _this.handleMove,
|
|
|
start: _this.handleStart
|
|
|
};
|
|
|
return _this;
|
|
|
}
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z)(WithSortableContainer, [{
|
|
|
key: "getChildContext",
|
|
|
value: function getChildContext() {
|
|
|
return {
|
|
|
manager: this.manager
|
|
|
};
|
|
|
}
|
|
|
}, {
|
|
|
key: "componentDidMount",
|
|
|
value: function componentDidMount() {
|
|
|
var _this2 = this;
|
|
|
|
|
|
var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer;
|
|
|
var container = this.getContainer();
|
|
|
Promise.resolve(container).then(function (containerNode) {
|
|
|
_this2.container = containerNode;
|
|
|
_this2.document = _this2.container.ownerDocument || document;
|
|
|
var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window;
|
|
|
_this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
|
|
|
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container) || _this2.container;
|
|
|
_this2.autoScroller = new AutoScroller(_this2.scrollContainer, _this2.onAutoScroll);
|
|
|
Object.keys(_this2.events).forEach(function (key) {
|
|
|
return events[key].forEach(function (eventName) {
|
|
|
return _this2.container.addEventListener(eventName, _this2.events[key], false);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
_this2.container.addEventListener('keydown', _this2.handleKeyDown);
|
|
|
});
|
|
|
}
|
|
|
}, {
|
|
|
key: "componentWillUnmount",
|
|
|
value: function componentWillUnmount() {
|
|
|
var _this3 = this;
|
|
|
|
|
|
if (this.helper && this.helper.parentNode) {
|
|
|
this.helper.parentNode.removeChild(this.helper);
|
|
|
}
|
|
|
|
|
|
if (!this.container) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
Object.keys(this.events).forEach(function (key) {
|
|
|
return events[key].forEach(function (eventName) {
|
|
|
return _this3.container.removeEventListener(eventName, _this3.events[key]);
|
|
|
});
|
|
|
});
|
|
|
this.container.removeEventListener('keydown', this.handleKeyDown);
|
|
|
}
|
|
|
}, {
|
|
|
key: "updateHelperPosition",
|
|
|
value: function updateHelperPosition(event) {
|
|
|
var _this$props6 = this.props,
|
|
|
lockAxis = _this$props6.lockAxis,
|
|
|
lockOffset = _this$props6.lockOffset,
|
|
|
lockToContainerEdges = _this$props6.lockToContainerEdges,
|
|
|
transitionDuration = _this$props6.transitionDuration,
|
|
|
_this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration,
|
|
|
keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard;
|
|
|
var isKeySorting = this.manager.isKeySorting;
|
|
|
var ignoreTransition = event.ignoreTransition;
|
|
|
var offset = getPosition(event);
|
|
|
var translate = {
|
|
|
x: offset.x - this.initialOffset.x,
|
|
|
y: offset.y - this.initialOffset.y
|
|
|
};
|
|
|
translate.y -= window.pageYOffset - this.initialWindowScroll.top;
|
|
|
translate.x -= window.pageXOffset - this.initialWindowScroll.left;
|
|
|
this.translate = translate;
|
|
|
|
|
|
if (lockToContainerEdges) {
|
|
|
var _getLockPixelOffsets = getLockPixelOffsets({
|
|
|
height: this.height,
|
|
|
lockOffset: lockOffset,
|
|
|
width: this.width
|
|
|
}),
|
|
|
_getLockPixelOffsets2 = (0,_babel_runtime_helpers_esm_slicedToArray__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(_getLockPixelOffsets, 2),
|
|
|
minLockOffset = _getLockPixelOffsets2[0],
|
|
|
maxLockOffset = _getLockPixelOffsets2[1];
|
|
|
|
|
|
var minOffset = {
|
|
|
x: this.width / 2 - minLockOffset.x,
|
|
|
y: this.height / 2 - minLockOffset.y
|
|
|
};
|
|
|
var maxOffset = {
|
|
|
x: this.width / 2 - maxLockOffset.x,
|
|
|
y: this.height / 2 - maxLockOffset.y
|
|
|
};
|
|
|
translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x);
|
|
|
translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y);
|
|
|
}
|
|
|
|
|
|
if (lockAxis === 'x') {
|
|
|
translate.y = 0;
|
|
|
} else if (lockAxis === 'y') {
|
|
|
translate.x = 0;
|
|
|
}
|
|
|
|
|
|
if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) {
|
|
|
setTransitionDuration(this.helper, keyboardSortingTransitionDuration);
|
|
|
}
|
|
|
|
|
|
setTranslate3d(this.helper, translate);
|
|
|
}
|
|
|
}, {
|
|
|
key: "animateNodes",
|
|
|
value: function animateNodes() {
|
|
|
var _this$props7 = this.props,
|
|
|
transitionDuration = _this$props7.transitionDuration,
|
|
|
hideSortableGhost = _this$props7.hideSortableGhost,
|
|
|
onSortOver = _this$props7.onSortOver;
|
|
|
var containerScrollDelta = this.containerScrollDelta,
|
|
|
windowScrollDelta = this.windowScrollDelta;
|
|
|
var nodes = this.manager.getOrderedRefs();
|
|
|
var sortingOffset = {
|
|
|
left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left,
|
|
|
top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top
|
|
|
};
|
|
|
var isKeySorting = this.manager.isKeySorting;
|
|
|
var prevIndex = this.newIndex;
|
|
|
this.newIndex = null;
|
|
|
|
|
|
for (var i = 0, len = nodes.length; i < len; i++) {
|
|
|
var _node3 = nodes[i].node;
|
|
|
var index = _node3.sortableInfo.index;
|
|
|
var width = _node3.offsetWidth;
|
|
|
var height = _node3.offsetHeight;
|
|
|
var offset = {
|
|
|
height: this.height > height ? height / 2 : this.height / 2,
|
|
|
width: this.width > width ? width / 2 : this.width / 2
|
|
|
};
|
|
|
var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex;
|
|
|
var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex;
|
|
|
var translate = {
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
};
|
|
|
var edgeOffset = nodes[i].edgeOffset;
|
|
|
|
|
|
if (!edgeOffset) {
|
|
|
edgeOffset = getEdgeOffset(_node3, this.container);
|
|
|
nodes[i].edgeOffset = edgeOffset;
|
|
|
|
|
|
if (isKeySorting) {
|
|
|
nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
var nextNode = i < nodes.length - 1 && nodes[i + 1];
|
|
|
var prevNode = i > 0 && nodes[i - 1];
|
|
|
|
|
|
if (nextNode && !nextNode.edgeOffset) {
|
|
|
nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container);
|
|
|
|
|
|
if (isKeySorting) {
|
|
|
nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (index === this.index) {
|
|
|
if (hideSortableGhost) {
|
|
|
this.sortableGhost = _node3;
|
|
|
setInlineStyles(_node3, {
|
|
|
opacity: 0,
|
|
|
visibility: 'hidden'
|
|
|
});
|
|
|
}
|
|
|
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
if (transitionDuration) {
|
|
|
setTransitionDuration(_node3, transitionDuration);
|
|
|
}
|
|
|
|
|
|
if (this.axis.x) {
|
|
|
if (this.axis.y) {
|
|
|
if (mustShiftForward || index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
|
|
|
translate.x = this.width + this.marginOffset.x;
|
|
|
|
|
|
if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) {
|
|
|
if (nextNode) {
|
|
|
translate.x = nextNode.edgeOffset.left - edgeOffset.left;
|
|
|
translate.y = nextNode.edgeOffset.top - edgeOffset.top;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (this.newIndex === null) {
|
|
|
this.newIndex = index;
|
|
|
}
|
|
|
} else if (mustShiftBackward || index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
|
|
|
translate.x = -(this.width + this.marginOffset.x);
|
|
|
|
|
|
if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) {
|
|
|
if (prevNode) {
|
|
|
translate.x = prevNode.edgeOffset.left - edgeOffset.left;
|
|
|
translate.y = prevNode.edgeOffset.top - edgeOffset.top;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
this.newIndex = index;
|
|
|
}
|
|
|
} else {
|
|
|
if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
|
|
|
translate.x = -(this.width + this.marginOffset.x);
|
|
|
this.newIndex = index;
|
|
|
} else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
|
|
|
translate.x = this.width + this.marginOffset.x;
|
|
|
|
|
|
if (this.newIndex == null) {
|
|
|
this.newIndex = index;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} else if (this.axis.y) {
|
|
|
if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
|
|
|
translate.y = -(this.height + this.marginOffset.y);
|
|
|
this.newIndex = index;
|
|
|
} else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
|
|
|
translate.y = this.height + this.marginOffset.y;
|
|
|
|
|
|
if (this.newIndex == null) {
|
|
|
this.newIndex = index;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setTranslate3d(_node3, translate);
|
|
|
nodes[i].translate = translate;
|
|
|
}
|
|
|
|
|
|
if (this.newIndex == null) {
|
|
|
this.newIndex = this.index;
|
|
|
}
|
|
|
|
|
|
if (isKeySorting) {
|
|
|
this.newIndex = prevIndex;
|
|
|
}
|
|
|
|
|
|
var oldIndex = isKeySorting ? this.prevIndex : prevIndex;
|
|
|
|
|
|
if (onSortOver && this.newIndex !== oldIndex) {
|
|
|
onSortOver({
|
|
|
collection: this.manager.active.collection,
|
|
|
index: this.index,
|
|
|
newIndex: this.newIndex,
|
|
|
oldIndex: oldIndex,
|
|
|
isKeySorting: isKeySorting,
|
|
|
nodes: nodes,
|
|
|
helper: this.helper
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
key: "getWrappedInstance",
|
|
|
value: function getWrappedInstance() {
|
|
|
invariant__WEBPACK_IMPORTED_MODULE_2___default()(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call');
|
|
|
return this.refs.wrappedInstance;
|
|
|
}
|
|
|
}, {
|
|
|
key: "getContainer",
|
|
|
value: function getContainer() {
|
|
|
var getContainer = this.props.getContainer;
|
|
|
|
|
|
if (typeof getContainer !== 'function') {
|
|
|
return (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.findDOMNode)(this);
|
|
|
}
|
|
|
|
|
|
return getContainer(config.withRef ? this.getWrappedInstance() : undefined);
|
|
|
}
|
|
|
}, {
|
|
|
key: "render",
|
|
|
value: function render() {
|
|
|
var ref = config.withRef ? 'wrappedInstance' : null;
|
|
|
return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(WrappedComponent, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)({
|
|
|
ref: ref
|
|
|
}, omit(this.props, omittedProps)));
|
|
|
}
|
|
|
}, {
|
|
|
key: "helperContainer",
|
|
|
get: function get() {
|
|
|
var helperContainer = this.props.helperContainer;
|
|
|
|
|
|
if (typeof helperContainer === 'function') {
|
|
|
return helperContainer();
|
|
|
}
|
|
|
|
|
|
return this.props.helperContainer || this.document.body;
|
|
|
}
|
|
|
}, {
|
|
|
key: "containerScrollDelta",
|
|
|
get: function get() {
|
|
|
var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer;
|
|
|
|
|
|
if (useWindowAsScrollContainer) {
|
|
|
return {
|
|
|
left: 0,
|
|
|
top: 0
|
|
|
};
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
left: this.scrollContainer.scrollLeft - this.initialScroll.left,
|
|
|
top: this.scrollContainer.scrollTop - this.initialScroll.top
|
|
|
};
|
|
|
}
|
|
|
}, {
|
|
|
key: "windowScrollDelta",
|
|
|
get: function get() {
|
|
|
return {
|
|
|
left: this.contentWindow.pageXOffset - this.initialWindowScroll.left,
|
|
|
top: this.contentWindow.pageYOffset - this.initialWindowScroll.top
|
|
|
};
|
|
|
}
|
|
|
}]);
|
|
|
|
|
|
return WithSortableContainer;
|
|
|
}(react__WEBPACK_IMPORTED_MODULE_0__.Component), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "defaultProps", defaultProps), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "propTypes", propTypes), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "childContextTypes", {
|
|
|
manager: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().object).isRequired
|
|
|
}), _temp;
|
|
|
}
|
|
|
|
|
|
var propTypes$1 = {
|
|
|
index: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().number).isRequired,
|
|
|
collection: prop_types__WEBPACK_IMPORTED_MODULE_8___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_8___default().number), (prop_types__WEBPACK_IMPORTED_MODULE_8___default().string)]),
|
|
|
disabled: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool)
|
|
|
};
|
|
|
var omittedProps$1 = Object.keys(propTypes$1);
|
|
|
function sortableElement(WrappedComponent) {
|
|
|
var _class, _temp;
|
|
|
|
|
|
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
|
withRef: false
|
|
|
};
|
|
|
return _temp = _class = function (_React$Component) {
|
|
|
(0,_babel_runtime_helpers_esm_inherits__WEBPACK_IMPORTED_MODULE_9__/* ["default"] */ .Z)(WithSortableElement, _React$Component);
|
|
|
|
|
|
function WithSortableElement() {
|
|
|
(0,_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(this, WithSortableElement);
|
|
|
|
|
|
return (0,_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .Z)(this, (0,_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_11__/* ["default"] */ .Z)(WithSortableElement).apply(this, arguments));
|
|
|
}
|
|
|
|
|
|
(0,_babel_runtime_helpers_esm_createClass__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z)(WithSortableElement, [{
|
|
|
key: "componentDidMount",
|
|
|
value: function componentDidMount() {
|
|
|
this.register();
|
|
|
}
|
|
|
}, {
|
|
|
key: "componentDidUpdate",
|
|
|
value: function componentDidUpdate(prevProps) {
|
|
|
if (this.node) {
|
|
|
if (prevProps.index !== this.props.index) {
|
|
|
this.node.sortableInfo.index = this.props.index;
|
|
|
}
|
|
|
|
|
|
if (prevProps.disabled !== this.props.disabled) {
|
|
|
this.node.sortableInfo.disabled = this.props.disabled;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (prevProps.collection !== this.props.collection) {
|
|
|
this.unregister(prevProps.collection);
|
|
|
this.register();
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
key: "componentWillUnmount",
|
|
|
value: function componentWillUnmount() {
|
|
|
this.unregister();
|
|
|
}
|
|
|
}, {
|
|
|
key: "register",
|
|
|
value: function register() {
|
|
|
var _this$props = this.props,
|
|
|
collection = _this$props.collection,
|
|
|
disabled = _this$props.disabled,
|
|
|
index = _this$props.index;
|
|
|
var node = (0,react_dom__WEBPACK_IMPORTED_MODULE_1__.findDOMNode)(this);
|
|
|
node.sortableInfo = {
|
|
|
collection: collection,
|
|
|
disabled: disabled,
|
|
|
index: index,
|
|
|
manager: this.context.manager
|
|
|
};
|
|
|
this.node = node;
|
|
|
this.ref = {
|
|
|
node: node
|
|
|
};
|
|
|
this.context.manager.add(collection, this.ref);
|
|
|
}
|
|
|
}, {
|
|
|
key: "unregister",
|
|
|
value: function unregister() {
|
|
|
var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection;
|
|
|
this.context.manager.remove(collection, this.ref);
|
|
|
}
|
|
|
}, {
|
|
|
key: "getWrappedInstance",
|
|
|
value: function getWrappedInstance() {
|
|
|
invariant__WEBPACK_IMPORTED_MODULE_2___default()(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call');
|
|
|
return this.refs.wrappedInstance;
|
|
|
}
|
|
|
}, {
|
|
|
key: "render",
|
|
|
value: function render() {
|
|
|
var ref = config.withRef ? 'wrappedInstance' : null;
|
|
|
return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(WrappedComponent, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)({
|
|
|
ref: ref
|
|
|
}, omit(this.props, omittedProps$1)));
|
|
|
}
|
|
|
}]);
|
|
|
|
|
|
return WithSortableElement;
|
|
|
}(react__WEBPACK_IMPORTED_MODULE_0__.Component), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "contextTypes", {
|
|
|
manager: (prop_types__WEBPACK_IMPORTED_MODULE_8___default().object).isRequired
|
|
|
}), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "propTypes", propTypes$1), (0,_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)(_class, "defaultProps", {
|
|
|
collection: 0
|
|
|
}), _temp;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/***/ })
|
|
|
|
|
|
}]); |
