pro-comp-x 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -12
- package/compiled/@ant-design/icons/index.js +1 -0
- package/compiled/@ant-design/icons/package.json +1 -0
- package/compiled/antd/index.d.ts +482 -0
- package/compiled/antd/index.js +29 -0
- package/compiled/antd/package.json +1 -0
- package/compiled/classnames/index.js +7 -0
- package/compiled/classnames/package.json +1 -0
- package/compiled/dayjs/index.js +1 -0
- package/compiled/dayjs/package.json +1 -0
- package/dist/404.html +36 -0
- package/dist/esm/antd-alias/antd.less +30 -0
- package/dist/esm/antd-alias/button.d.ts +2 -0
- package/dist/esm/antd-alias/button.js +2 -0
- package/dist/esm/antd-alias/cascader.d.ts +2 -0
- package/dist/esm/antd-alias/cascader.js +2 -0
- package/dist/esm/antd-alias/checkbox.d.ts +2 -0
- package/dist/esm/antd-alias/checkbox.js +2 -0
- package/dist/esm/antd-alias/col.d.ts +2 -0
- package/dist/esm/antd-alias/col.js +2 -0
- package/dist/esm/antd-alias/config-provider.d.ts +2 -0
- package/dist/esm/antd-alias/config-provider.js +2 -0
- package/dist/esm/antd-alias/date-picker.d.ts +2 -0
- package/dist/esm/antd-alias/date-picker.js +2 -0
- package/dist/esm/antd-alias/form.d.ts +2 -0
- package/dist/esm/antd-alias/form.js +2 -0
- package/dist/esm/antd-alias/index.d.ts +36 -0
- package/dist/esm/antd-alias/index.js +48 -0
- package/dist/esm/antd-alias/input-number.d.ts +2 -0
- package/dist/esm/antd-alias/input-number.js +2 -0
- package/dist/esm/antd-alias/input.d.ts +2 -0
- package/dist/esm/antd-alias/input.js +2 -0
- package/dist/esm/antd-alias/mentions.d.ts +2 -0
- package/dist/esm/antd-alias/mentions.js +2 -0
- package/dist/esm/antd-alias/modal.d.ts +2 -0
- package/dist/esm/antd-alias/modal.js +2 -0
- package/dist/esm/antd-alias/pagination.d.ts +2 -0
- package/dist/esm/antd-alias/pagination.js +2 -0
- package/dist/esm/antd-alias/popover.d.ts +2 -0
- package/dist/esm/antd-alias/popover.js +2 -0
- package/dist/esm/antd-alias/radio.d.ts +2 -0
- package/dist/esm/antd-alias/radio.js +2 -0
- package/dist/esm/antd-alias/row.d.ts +2 -0
- package/dist/esm/antd-alias/row.js +2 -0
- package/dist/esm/antd-alias/select.d.ts +2 -0
- package/dist/esm/antd-alias/select.js +2 -0
- package/dist/esm/antd-alias/slider.d.ts +2 -0
- package/dist/esm/antd-alias/slider.js +2 -0
- package/dist/esm/antd-alias/spin.d.ts +2 -0
- package/dist/esm/antd-alias/spin.js +2 -0
- package/dist/esm/antd-alias/switch.d.ts +2 -0
- package/dist/esm/antd-alias/switch.js +2 -0
- package/dist/esm/antd-alias/table.d.ts +2 -0
- package/dist/esm/antd-alias/table.js +2 -0
- package/dist/esm/antd-alias/tabs.d.ts +2 -0
- package/dist/esm/antd-alias/tabs.js +2 -0
- package/dist/esm/antd-alias/time-picker.d.ts +2 -0
- package/dist/esm/antd-alias/time-picker.js +2 -0
- package/dist/esm/antd-alias/tooltip.d.ts +2 -0
- package/dist/esm/antd-alias/tooltip.js +2 -0
- package/dist/esm/antd-alias/tree-select.d.ts +2 -0
- package/dist/esm/antd-alias/tree-select.js +2 -0
- package/dist/esm/antd-alias/upload.d.ts +2 -0
- package/dist/esm/antd-alias/upload.js +2 -0
- package/dist/esm/components/ComponentExtends/DatePicker/index.d.ts +9 -0
- package/dist/esm/components/ComponentExtends/DatePicker/index.js +5 -12
- package/dist/esm/components/ComponentExtends/InputBox/index.d.ts +31 -0
- package/dist/esm/components/ComponentExtends/InputBox/index.js +3 -4
- package/dist/esm/components/ComponentExtends/InputSearch/index.d.ts +9 -0
- package/dist/esm/components/ComponentExtends/InputSearch/index.js +3 -10
- package/dist/esm/components/ComponentExtends/InputTooltip/index.d.ts +11 -0
- package/dist/esm/components/ComponentExtends/InputTooltip/index.js +18 -28
- package/dist/esm/components/ComponentExtends/Modal/index.d.ts +15 -0
- package/dist/esm/components/ComponentExtends/Modal/index.js +4 -13
- package/dist/esm/components/ComponentExtends/NumberRange/index.d.ts +13 -0
- package/dist/esm/components/ComponentExtends/NumberRange/index.js +21 -30
- package/dist/esm/components/ComponentExtends/Raido/index.d.ts +10 -0
- package/dist/esm/components/ComponentExtends/Raido/index.js +3 -10
- package/dist/esm/components/ComponentExtends/SelectQuery/index.d.ts +32 -0
- package/dist/esm/components/ComponentExtends/SelectQuery/index.js +40 -51
- package/dist/esm/components/ComponentExtends/TableEditCell/index.d.ts +20 -0
- package/dist/esm/components/ComponentExtends/TableEditCell/index.js +5 -19
- package/dist/esm/components/ComponentExtends/Tabs/index.d.ts +8 -0
- package/dist/esm/components/ComponentExtends/Tabs/index.js +11 -16
- package/dist/esm/components/ComponentExtends/Text/index.d.ts +4 -0
- package/dist/esm/components/ComponentExtends/Text/index.js +1 -4
- package/dist/esm/components/ComponentExtends/TimePicker/index.d.ts +6 -0
- package/dist/esm/components/ComponentExtends/TimePicker/index.js +5 -12
- package/dist/esm/components/ComponentExtends/UploadImages/index.d.ts +8 -0
- package/dist/esm/components/ComponentExtends/UploadImages/index.js +10 -23
- package/dist/esm/components/ComponentExtends/index.d.ts +15 -0
- package/dist/esm/components/DndProvider/index.d.ts +7 -0
- package/dist/esm/components/DndProvider/index.js +15 -0
- package/dist/esm/components/DraggableBodyRow/DraggableBodyRow.less +16 -14
- package/dist/esm/components/DraggableBodyRow/index.d.ts +18 -0
- package/dist/esm/components/DraggableBodyRow/index.js +2 -2
- package/dist/esm/components/DraggableCell/index.d.ts +40 -0
- package/dist/esm/components/DraggableCell/index.js +23 -10
- package/dist/esm/components/DraggableTabNode/index.d.ts +7 -0
- package/dist/esm/components/DraggableTabNode/index.js +3 -5
- package/dist/esm/components/DraggableTable/DraggableTable.less +31 -0
- package/dist/esm/components/DraggableTable/index.d.ts +23 -0
- package/dist/esm/components/DraggableTable/index.js +170 -0
- package/dist/esm/components/PageList/FilterForm/index.d.ts +53 -0
- package/dist/esm/components/PageList/FilterForm/index.js +52 -66
- package/dist/esm/components/PageList/index.d.ts +76 -0
- package/dist/esm/components/PageList/index.js +148 -138
- package/dist/esm/components/PageWraper/index.d.ts +13 -0
- package/dist/esm/components/PageWraper/index.js +8 -13
- package/dist/esm/components/Panel/Panel.less +2 -0
- package/dist/esm/components/Panel/index.d.ts +20 -0
- package/dist/esm/components/Panel/index.js +17 -27
- package/dist/esm/components/ProConfigProvider/context.d.ts +17 -0
- package/dist/esm/components/ProConfigProvider/context.js +6 -1
- package/dist/esm/components/ProConfigProvider/index.d.ts +10 -0
- package/dist/esm/components/ProConfigProvider/index.js +4 -9
- package/dist/esm/components/RenderForm/RenderForm.less +19 -0
- package/dist/esm/components/RenderForm/index.d.ts +64 -0
- package/dist/esm/components/RenderForm/index.js +106 -103
- package/dist/esm/index.d.ts +25 -0
- package/dist/esm/index.js +4 -17
- package/dist/esm/styles/antd-custom.less +5 -0
- package/dist/esm/styles/base.less +3 -6
- package/dist/esm/styles/dumi.less +17 -0
- package/dist/esm/styles/index.less +1 -0
- package/dist/esm/utils/getClassPrefix.d.ts +2 -0
- package/dist/index.css +26895 -0
- package/dist/index.html +36 -0
- package/dist/pro-components-dark.css +1 -0
- package/dist/pro-components-default.css +1 -0
- package/dist/umi.css +2 -0
- package/dist/umi.js +1 -0
- package/package.json +29 -30
- package/public/pro-components-dark.css +19 -0
- package/public/pro-components-default.css +23 -0
- package/dist/esm/components/ActionConfigForm/index.js +0 -129
- package/dist/esm/components/ColorPalette/ColorPalette.less +0 -9
- package/dist/esm/components/ColorPalette/index.js +0 -88
- package/dist/esm/components/MarkdownView/MarkdownView.less +0 -93
- package/dist/esm/components/MarkdownView/index.js +0 -142
- package/dist/esm/components/MdPlainText/MdPlainText.less +0 -118
- package/dist/esm/components/MdPlainText/constants.js +0 -2
- package/dist/esm/components/MdPlainText/index.js +0 -717
- package/dist/esm/components/MdPlainText/planinShortcuts.js +0 -18
- package/dist/esm/components/MdPlainText/textContent.js +0 -4
- package/dist/esm/components/MdPlainText/utils.js +0 -159
- package/dist/esm/components/PlainText/index.js +0 -122
- package/dist/esm/components/PlainTextBox/PlainTextBox.less +0 -94
- package/dist/esm/components/PlainTextBox/index.js +0 -264
|
@@ -1,21 +1,14 @@
|
|
|
1
|
-
function
|
|
2
|
-
import "antd/es/time-picker/style";
|
|
3
|
-
import _TimePicker from "antd/es/time-picker";
|
|
4
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
7
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
8
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
9
2
|
// @ts-nocheck
|
|
10
3
|
import React, { useMemo } from 'react';
|
|
4
|
+
import { TimePicker as AntdTimePicker } from 'antd';
|
|
11
5
|
import dayjs from 'dayjs';
|
|
12
|
-
|
|
13
|
-
var AntdRanePicker = _TimePicker.RangePicker;
|
|
6
|
+
var AntdRanePicker = AntdTimePicker.RangePicker;
|
|
14
7
|
var TimePicker = function TimePicker(props) {
|
|
15
8
|
var _values = useMemo(function () {
|
|
16
9
|
return props !== null && props !== void 0 && props.value ? dayjs(props === null || props === void 0 ? void 0 : props.value) : null;
|
|
17
10
|
}, [props === null || props === void 0 ? void 0 : props.value]);
|
|
18
|
-
return /*#__PURE__*/
|
|
11
|
+
return /*#__PURE__*/React.createElement(AntdTimePicker, _extends({}, props, {
|
|
19
12
|
value: _values
|
|
20
13
|
}));
|
|
21
14
|
};
|
|
@@ -26,7 +19,7 @@ var RangeTimePicker = function RangeTimePicker(props) {
|
|
|
26
19
|
}
|
|
27
20
|
return [];
|
|
28
21
|
}, [props === null || props === void 0 ? void 0 : props.value]);
|
|
29
|
-
return /*#__PURE__*/
|
|
22
|
+
return /*#__PURE__*/React.createElement(AntdRanePicker, _extends({}, props, {
|
|
30
23
|
value: _values
|
|
31
24
|
}));
|
|
32
25
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type UploadProps, UploadFile } from 'antd';
|
|
2
|
+
export interface UploadImagesProps extends Omit<UploadProps, 'onChange'> {
|
|
3
|
+
value?: UploadFile[];
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
onChange?: (fileList: UploadFile[]) => void;
|
|
6
|
+
}
|
|
7
|
+
declare const UploadImages: ({ accept, listType, loading, className, value, onChange, maxCount, ...otherProps }: UploadImagesProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default UploadImages;
|
|
@@ -1,12 +1,5 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
import "antd/es/upload/style";
|
|
3
|
-
import _Upload from "antd/es/upload";
|
|
4
1
|
var _excluded = ["accept", "listType", "loading", "className", "value", "onChange", "maxCount"];
|
|
5
|
-
function
|
|
6
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
10
3
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
11
4
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
5
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
@@ -20,10 +13,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
20
13
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
21
14
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
22
15
|
import React, { useEffect, useState } from 'react';
|
|
16
|
+
import { Upload } from 'antd';
|
|
23
17
|
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
|
24
18
|
import classnames from 'classnames';
|
|
25
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
26
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
19
|
var UploadImages = function UploadImages(_ref) {
|
|
28
20
|
var _ref$accept = _ref.accept,
|
|
29
21
|
accept = _ref$accept === void 0 ? 'image/gif,image/jpeg,image/jpg,image/png' : _ref$accept,
|
|
@@ -45,7 +37,7 @@ var UploadImages = function UploadImages(_ref) {
|
|
|
45
37
|
setImagesList(value);
|
|
46
38
|
}
|
|
47
39
|
}, [value]);
|
|
48
|
-
return /*#__PURE__*/
|
|
40
|
+
return /*#__PURE__*/React.createElement(Upload, _extends({
|
|
49
41
|
accept: accept,
|
|
50
42
|
listType: listType,
|
|
51
43
|
fileList: imagesList,
|
|
@@ -61,17 +53,12 @@ var UploadImages = function UploadImages(_ref) {
|
|
|
61
53
|
_onChange(nowList);
|
|
62
54
|
}
|
|
63
55
|
}
|
|
64
|
-
}, otherProps),
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
},
|
|
72
|
-
children: "\u4E0A\u4F20"
|
|
73
|
-
})]
|
|
74
|
-
})
|
|
75
|
-
}));
|
|
56
|
+
}, otherProps), /*#__PURE__*/React.createElement("div", null, loading ? /*#__PURE__*/React.createElement(LoadingOutlined, {
|
|
57
|
+
spin: true
|
|
58
|
+
}) : /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
style: {
|
|
60
|
+
marginTop: 4
|
|
61
|
+
}
|
|
62
|
+
}, "\u4E0A\u4F20")));
|
|
76
63
|
};
|
|
77
64
|
export default UploadImages;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import DatePicker, { RangePicker, type DatePickerProps, type RangePickerProps } from './DatePicker';
|
|
2
|
+
import TimePicker, { RangeTimePicker, type TimePickerProps, type TimeRangePickerProps } from './TimePicker';
|
|
3
|
+
import InputToolTip, { type InputToolTipProps } from './InputTooltip';
|
|
4
|
+
import TableEditCell, { type TableEditCellProps } from './TableEditCell';
|
|
5
|
+
import NumberRange, { type NumberRangeProps } from './NumberRange';
|
|
6
|
+
import Modal, { type ModalProps } from './Modal';
|
|
7
|
+
import Radio, { type RadioProps } from './Raido';
|
|
8
|
+
import SelectQuery, { type SelectQueryProps } from './SelectQuery';
|
|
9
|
+
import InputSearch, { type InputSearchProps } from './InputSearch';
|
|
10
|
+
import UploadImages, { type UploadImagesProps } from './UploadImages';
|
|
11
|
+
import Tabs, { type TabsProps, TabPaneProps } from './Tabs';
|
|
12
|
+
import InputBox, { type InputBoxProps, InputBoxRef } from './InputBox';
|
|
13
|
+
import Text from './Text';
|
|
14
|
+
export type { DatePickerProps, RangePickerProps, TimePickerProps, TimeRangePickerProps, InputToolTipProps, TableEditCellProps, NumberRangeProps, ModalProps, RadioProps, InputSearchProps, SelectQueryProps, UploadImagesProps, TabsProps, TabPaneProps, InputBoxProps, InputBoxRef, };
|
|
15
|
+
export { DatePicker, RangePicker, TimePicker, RangeTimePicker, InputToolTip, TableEditCell, NumberRange, Modal, Radio, InputSearch, SelectQuery, UploadImages, Tabs, InputBox, Text, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type DndProviderProps } from 'react-dnd';
|
|
2
|
+
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
3
|
+
export type XDndProviderProps = Omit<DndProviderProps<unknown, unknown>, 'backend'> & {
|
|
4
|
+
backend?: typeof HTML5Backend;
|
|
5
|
+
};
|
|
6
|
+
declare const XDndProvider: ({ children, ...otherProps }: XDndProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default XDndProvider;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
var _excluded = ["children"];
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { DndProvider } from 'react-dnd';
|
|
7
|
+
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
8
|
+
var XDndProvider = function XDndProvider(_ref) {
|
|
9
|
+
var children = _ref.children,
|
|
10
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
11
|
+
return /*#__PURE__*/React.createElement(DndProvider, _extends({
|
|
12
|
+
backend: HTML5Backend
|
|
13
|
+
}, otherProps), children);
|
|
14
|
+
};
|
|
15
|
+
export default XDndProvider;
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
@DragTableRowPrefix: ~'@{pro-prefix}-drag-table-row';
|
|
2
2
|
|
|
3
|
-
.@{DragTableRowPrefix}
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
.@{DragTableRowPrefix} {
|
|
4
|
+
&-above,
|
|
5
|
+
&-middle,
|
|
6
|
+
&-below {
|
|
7
|
+
td {
|
|
8
|
+
border-bottom: 1px dashed @primary-color;
|
|
9
|
+
background: @primary-1;
|
|
10
|
+
}
|
|
9
11
|
}
|
|
10
|
-
}
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
&-above {
|
|
14
|
+
td {
|
|
15
|
+
border-top: 2px solid @primary-color;
|
|
16
|
+
}
|
|
15
17
|
}
|
|
16
|
-
}
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
&-below {
|
|
20
|
+
td {
|
|
21
|
+
border-bottom: 2px solid @primary-color;
|
|
22
|
+
}
|
|
21
23
|
}
|
|
22
24
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type onMoveRowOptionsType = {
|
|
3
|
+
dragIndex: number;
|
|
4
|
+
hoverIndex: number;
|
|
5
|
+
dragRecord: any;
|
|
6
|
+
hoverRecord: any;
|
|
7
|
+
hoverPosition: string;
|
|
8
|
+
};
|
|
9
|
+
type onMoveRowType = (options: onMoveRowOptionsType) => void;
|
|
10
|
+
export interface DraggableBodyRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
11
|
+
prefixCls?: string;
|
|
12
|
+
record: any;
|
|
13
|
+
index: number;
|
|
14
|
+
type: string;
|
|
15
|
+
moveRow: onMoveRowType;
|
|
16
|
+
}
|
|
17
|
+
declare const DraggableBodyRow: ({ prefixCls, record, index, moveRow, className, style, type, ...restProps }: DraggableBodyRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default DraggableBodyRow;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
2
|
var _excluded = ["prefixCls", "record", "index", "moveRow", "className", "style", "type"];
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
6
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -18,7 +19,6 @@ import { useDrag, useDrop } from 'react-dnd';
|
|
|
18
19
|
import { ConfigContext } from 'antd/es/config-provider';
|
|
19
20
|
import getClassPrefix from "../../utils/getClassPrefix";
|
|
20
21
|
import classnames from 'classnames';
|
|
21
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
22
|
var DraggableBodyRow = function DraggableBodyRow(_ref) {
|
|
23
23
|
var prefixCls = _ref.prefixCls,
|
|
24
24
|
record = _ref.record,
|
|
@@ -105,7 +105,7 @@ var DraggableBodyRow = function DraggableBodyRow(_ref) {
|
|
|
105
105
|
_useDrag2 = _slicedToArray(_useDrag, 2),
|
|
106
106
|
drag = _useDrag2[1];
|
|
107
107
|
drop(drag(ref));
|
|
108
|
-
return /*#__PURE__*/
|
|
108
|
+
return /*#__PURE__*/React.createElement("tr", _extends({
|
|
109
109
|
ref: ref,
|
|
110
110
|
className: classnames(className, isOver ? dropClassName : ''),
|
|
111
111
|
style: _objectSpread({
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React, { type CSSProperties } from 'react';
|
|
2
|
+
export declare const dndDefType = "dragAndDrop";
|
|
3
|
+
export type allowedDropEffectType = 'copy' | 'move' | 'any';
|
|
4
|
+
export type DropResultProps = {
|
|
5
|
+
index?: number;
|
|
6
|
+
record?: any;
|
|
7
|
+
dropEffect?: allowedDropEffectType;
|
|
8
|
+
};
|
|
9
|
+
export type dropOptionsType = {
|
|
10
|
+
dragIndex: number;
|
|
11
|
+
hoverIndex: number;
|
|
12
|
+
dragRecord: any;
|
|
13
|
+
hoverRecord: any;
|
|
14
|
+
hoverVertical?: string;
|
|
15
|
+
hoverHorizontal?: string;
|
|
16
|
+
};
|
|
17
|
+
export type draggableInfoType = dropOptionsType & {
|
|
18
|
+
isActive: boolean;
|
|
19
|
+
isDragging: boolean;
|
|
20
|
+
};
|
|
21
|
+
export type DraggableCellProps = {
|
|
22
|
+
type?: string;
|
|
23
|
+
index?: number;
|
|
24
|
+
record?: any;
|
|
25
|
+
className?: string;
|
|
26
|
+
style?: CSSProperties;
|
|
27
|
+
children?: string | React.ReactNode | ((options: draggableInfoType, dragEvent: {
|
|
28
|
+
active: boolean;
|
|
29
|
+
dragging: boolean;
|
|
30
|
+
dragHolder?: any;
|
|
31
|
+
dragPreview?: any;
|
|
32
|
+
}) => React.ReactNode);
|
|
33
|
+
canDrag?: boolean;
|
|
34
|
+
canDrop?: (record: any, monitor: any) => boolean;
|
|
35
|
+
onClick?: (record: any) => void;
|
|
36
|
+
onDrop?: (options: dropOptionsType) => void;
|
|
37
|
+
onHover?: (options: dropOptionsType) => void;
|
|
38
|
+
};
|
|
39
|
+
declare const DraggableCell: ({ record, style, className, children, onClick, onDrop, onHover, index, type, canDrop: cellCanDrop, canDrag: cellCanDrag, }: DraggableCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export default DraggableCell;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
3
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
4
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
@@ -8,12 +10,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
8
10
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
11
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
-
import React, { useRef,
|
|
13
|
+
import React, { useRef, useState, Fragment } from 'react';
|
|
12
14
|
import { useDrag, useDrop } from 'react-dnd';
|
|
13
15
|
import classnames from 'classnames';
|
|
14
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
17
|
export var dndDefType = 'dragAndDrop';
|
|
16
|
-
var DraggableCell =
|
|
18
|
+
var DraggableCell = function DraggableCell(_ref) {
|
|
17
19
|
var record = _ref.record,
|
|
18
20
|
style = _ref.style,
|
|
19
21
|
className = _ref.className,
|
|
@@ -145,11 +147,12 @@ var DraggableCell = /*#__PURE__*/forwardRef(function (_ref) {
|
|
|
145
147
|
}
|
|
146
148
|
};
|
|
147
149
|
}, [hoverVertical, hoverHorizontal, record, index]),
|
|
148
|
-
_useDrag2 = _slicedToArray(_useDrag,
|
|
150
|
+
_useDrag2 = _slicedToArray(_useDrag, 3),
|
|
149
151
|
_useDrag2$ = _useDrag2[0],
|
|
150
152
|
item = _useDrag2$.item,
|
|
151
153
|
isDragging = _useDrag2$.isDragging,
|
|
152
|
-
drag = _useDrag2[1]
|
|
154
|
+
drag = _useDrag2[1],
|
|
155
|
+
preview = _useDrag2[2];
|
|
153
156
|
drop(drag(ref));
|
|
154
157
|
var isActive = canDrop && isOver && isOverCurrent; // 是否在目标元素上
|
|
155
158
|
|
|
@@ -163,8 +166,7 @@ var DraggableCell = /*#__PURE__*/forwardRef(function (_ref) {
|
|
|
163
166
|
hoverIndex: index,
|
|
164
167
|
hoverRecord: record
|
|
165
168
|
};
|
|
166
|
-
|
|
167
|
-
ref: ref,
|
|
169
|
+
var dragDivProps = {
|
|
168
170
|
style: style,
|
|
169
171
|
className: classnames(className, _defineProperty(_defineProperty({
|
|
170
172
|
active: isActive,
|
|
@@ -176,8 +178,19 @@ var DraggableCell = /*#__PURE__*/forwardRef(function (_ref) {
|
|
|
176
178
|
if (_onClick) {
|
|
177
179
|
_onClick(record);
|
|
178
180
|
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
return typeof children === 'function' ? /*#__PURE__*/_jsx(Fragment, {
|
|
184
|
+
children: children(draggableInfo, {
|
|
185
|
+
active: isActive,
|
|
186
|
+
dragging: isDragging,
|
|
187
|
+
dragHolder: ref,
|
|
188
|
+
dragPreview: preview
|
|
189
|
+
})
|
|
190
|
+
}) : /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
|
|
191
|
+
ref: ref
|
|
192
|
+
}, dragDivProps), {}, {
|
|
193
|
+
children: children
|
|
194
|
+
}));
|
|
195
|
+
};
|
|
183
196
|
export default DraggableCell;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
index: React.Key;
|
|
4
|
+
moveNode: (dragIndex: React.Key, hoverIndex: React.Key) => void;
|
|
5
|
+
}
|
|
6
|
+
declare const DraggableTabNode: ({ index, children, moveNode }: DraggableTabPaneProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default DraggableTabNode;
|
|
@@ -6,7 +6,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import React, { useRef } from 'react';
|
|
8
8
|
import { useDrag, useDrop } from 'react-dnd';
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
9
|
var type = 'DraggableTabNode';
|
|
11
10
|
var DraggableTabNode = function DraggableTabNode(_ref) {
|
|
12
11
|
var index = _ref.index,
|
|
@@ -49,10 +48,9 @@ var DraggableTabNode = function DraggableTabNode(_ref) {
|
|
|
49
48
|
_useDrag2 = _slicedToArray(_useDrag, 2),
|
|
50
49
|
drag = _useDrag2[1];
|
|
51
50
|
drop(drag(ref));
|
|
52
|
-
return /*#__PURE__*/
|
|
51
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
52
|
ref: ref,
|
|
54
|
-
className: isOver ? dropClassName : ''
|
|
55
|
-
|
|
56
|
-
});
|
|
53
|
+
className: isOver ? dropClassName : ''
|
|
54
|
+
}, children);
|
|
57
55
|
};
|
|
58
56
|
export default DraggableTabNode;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@DraggableTablePrefix: ~'@{pro-prefix}-draggable-table';
|
|
2
|
+
|
|
3
|
+
.@{DraggableTablePrefix} {
|
|
4
|
+
&-sort-handle {
|
|
5
|
+
&,
|
|
6
|
+
& > * {
|
|
7
|
+
cursor: move;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&-row-up,
|
|
12
|
+
&-row-middle,
|
|
13
|
+
&-row-down {
|
|
14
|
+
td {
|
|
15
|
+
border-bottom: 1px dashed @primary-color;
|
|
16
|
+
background: @primary-1;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-row-up {
|
|
21
|
+
td {
|
|
22
|
+
border-top: 2px solid @primary-color;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&-row-down {
|
|
27
|
+
td {
|
|
28
|
+
border-bottom: 2px solid @primary-color;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TableProps } from 'antd';
|
|
3
|
+
type onMoveRowOptionsType = {
|
|
4
|
+
dragIndex: number;
|
|
5
|
+
hoverIndex: number;
|
|
6
|
+
dragRecord: any;
|
|
7
|
+
hoverRecord: any;
|
|
8
|
+
hoverPosition: string;
|
|
9
|
+
};
|
|
10
|
+
export type DraggableTableProps = TableProps<any> & {
|
|
11
|
+
draggableSort?: boolean;
|
|
12
|
+
type: string;
|
|
13
|
+
};
|
|
14
|
+
type onMoveRowType = (options: onMoveRowOptionsType) => void;
|
|
15
|
+
export type DraggableBodyRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
|
|
16
|
+
prefixCls?: string;
|
|
17
|
+
record: any;
|
|
18
|
+
index: number;
|
|
19
|
+
type: string;
|
|
20
|
+
moveRow: onMoveRowType;
|
|
21
|
+
};
|
|
22
|
+
declare const DraggableTable: React.NamedExoticComponent<DraggableTableProps>;
|
|
23
|
+
export default DraggableTable;
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["draggableSort", "prefixCls", "className", "type", "components", "columns", "dataSource"],
|
|
3
|
+
_excluded2 = ["record", "index", "moveRow", "className", "style", "children"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
7
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
8
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
9
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
11
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
12
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
14
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
16
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
|
+
import React, { useState, memo, useCallback, useMemo, useRef } from 'react';
|
|
18
|
+
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
|
19
|
+
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
20
|
+
import { Button } from 'antd';
|
|
21
|
+
import { HolderOutlined } from '@ant-design/icons';
|
|
22
|
+
import classnames from 'classnames';
|
|
23
|
+
import { ConfigContext } from 'antd/es/config-provider';
|
|
24
|
+
import getClassPrefix from "../../utils/getClassPrefix";
|
|
25
|
+
import { Table } from 'antd';
|
|
26
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
|
+
var DraggableTable = /*#__PURE__*/memo(function (_ref) {
|
|
29
|
+
var draggableSort = _ref.draggableSort,
|
|
30
|
+
prefixCls = _ref.prefixCls,
|
|
31
|
+
className = _ref.className,
|
|
32
|
+
_ref$type = _ref.type,
|
|
33
|
+
type = _ref$type === void 0 ? 'draggableTable' : _ref$type,
|
|
34
|
+
components = _ref.components,
|
|
35
|
+
columns = _ref.columns,
|
|
36
|
+
dataSource = _ref.dataSource,
|
|
37
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
+
var _React$useContext = React.useContext(ConfigContext),
|
|
39
|
+
antGetPrefixCls = _React$useContext.getPrefixCls;
|
|
40
|
+
var antPrefixCls = antGetPrefixCls(prefixCls);
|
|
41
|
+
var clsPrefix = getClassPrefix(antPrefixCls, 'draggable-table');
|
|
42
|
+
var canSort = draggableSort && Array.isArray(columns) && columns.length > 0 && Array.isArray(dataSource) && dataSource.length > 0;
|
|
43
|
+
var tableColumns = useMemo(function () {
|
|
44
|
+
if (Array.isArray(columns)) {
|
|
45
|
+
if (draggableSort && Array.isArray(dataSource) && dataSource.length > 0) {
|
|
46
|
+
columns.push({
|
|
47
|
+
key: 'tableSort',
|
|
48
|
+
title: '排序',
|
|
49
|
+
width: 46
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
return columns;
|
|
53
|
+
}
|
|
54
|
+
return [];
|
|
55
|
+
}, [columns, dataSource, draggableSort]);
|
|
56
|
+
var TableRow = useCallback(function (_ref2) {
|
|
57
|
+
var record = _ref2.record,
|
|
58
|
+
index = _ref2.index,
|
|
59
|
+
moveRow = _ref2.moveRow,
|
|
60
|
+
className = _ref2.className,
|
|
61
|
+
style = _ref2.style,
|
|
62
|
+
children = _ref2.children,
|
|
63
|
+
restProps = _objectWithoutProperties(_ref2, _excluded2);
|
|
64
|
+
var _useState = useState(''),
|
|
65
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
66
|
+
hoverPosition = _useState2[0],
|
|
67
|
+
setHoverPosition = _useState2[1];
|
|
68
|
+
var tolerance = 10; // 容差值
|
|
69
|
+
var holderRef = useRef(null);
|
|
70
|
+
var _useDrop = useDrop({
|
|
71
|
+
accept: type,
|
|
72
|
+
collect: function collect(monitor) {
|
|
73
|
+
var _ref3 = monitor.getItem() || {},
|
|
74
|
+
dragIndex = _ref3.index;
|
|
75
|
+
if (dragIndex === index) {
|
|
76
|
+
return {};
|
|
77
|
+
}
|
|
78
|
+
return {
|
|
79
|
+
isOver: monitor.isOver(),
|
|
80
|
+
dropClassName: hoverPosition ? "".concat(clsPrefix, "-row-").concat(hoverPosition) : ''
|
|
81
|
+
};
|
|
82
|
+
},
|
|
83
|
+
drop: function drop(item, monitor) {
|
|
84
|
+
moveRow({
|
|
85
|
+
dragIndex: item.index,
|
|
86
|
+
hoverIndex: index,
|
|
87
|
+
dragRecord: item.record,
|
|
88
|
+
hoverRecord: record,
|
|
89
|
+
hoverPosition: hoverPosition
|
|
90
|
+
});
|
|
91
|
+
},
|
|
92
|
+
hover: function hover(item, monitor) {
|
|
93
|
+
var _holderRef$current;
|
|
94
|
+
/**
|
|
95
|
+
* 获取目标元素的边界
|
|
96
|
+
* 上方: up
|
|
97
|
+
* 中间: middle
|
|
98
|
+
* 下方: down
|
|
99
|
+
*/
|
|
100
|
+
var watchClientRectNode = (holderRef === null || holderRef === void 0 || (_holderRef$current = holderRef.current) === null || _holderRef$current === void 0 ? void 0 : _holderRef$current.parentElement) || (holderRef === null || holderRef === void 0 ? void 0 : holderRef.current);
|
|
101
|
+
var hoverBoundingRect = watchClientRectNode === null || watchClientRectNode === void 0 ? void 0 : watchClientRectNode.getBoundingClientRect();
|
|
102
|
+
var clientOffset = monitor.getClientOffset();
|
|
103
|
+
if (hoverBoundingRect && clientOffset) {
|
|
104
|
+
var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
|
105
|
+
var hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
|
106
|
+
if (hoverClientY < hoverMiddleY - tolerance) {
|
|
107
|
+
setHoverPosition('up');
|
|
108
|
+
} else if (hoverClientY > hoverBoundingRect.height - hoverMiddleY + tolerance) {
|
|
109
|
+
setHoverPosition('down');
|
|
110
|
+
} else {
|
|
111
|
+
setHoverPosition('middle');
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}),
|
|
116
|
+
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
117
|
+
_useDrop2$ = _useDrop2[0],
|
|
118
|
+
isOver = _useDrop2$.isOver,
|
|
119
|
+
dropClassName = _useDrop2$.dropClassName,
|
|
120
|
+
drop = _useDrop2[1];
|
|
121
|
+
var _useDrag = useDrag({
|
|
122
|
+
type: type,
|
|
123
|
+
item: {
|
|
124
|
+
index: index,
|
|
125
|
+
record: record
|
|
126
|
+
},
|
|
127
|
+
collect: function collect(monitor) {
|
|
128
|
+
return {
|
|
129
|
+
isDragging: monitor.isDragging()
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
}),
|
|
133
|
+
_useDrag2 = _slicedToArray(_useDrag, 3),
|
|
134
|
+
drag = _useDrag2[1],
|
|
135
|
+
preview = _useDrag2[2];
|
|
136
|
+
drop(drag(holderRef));
|
|
137
|
+
return /*#__PURE__*/_jsxs("tr", _objectSpread(_objectSpread({
|
|
138
|
+
ref: preview,
|
|
139
|
+
className: classnames(className, isOver ? dropClassName : ''),
|
|
140
|
+
style: style
|
|
141
|
+
}, restProps), {}, {
|
|
142
|
+
children: [Array.isArray(children) && children.length > 0 && draggableSort ? children.slice(0, -1) : children, draggableSort && /*#__PURE__*/_jsx("td", {
|
|
143
|
+
ref: holderRef,
|
|
144
|
+
className: "".concat(clsPrefix, "-sort-handle"),
|
|
145
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
146
|
+
size: "small",
|
|
147
|
+
type: "text",
|
|
148
|
+
shape: "circle",
|
|
149
|
+
icon: /*#__PURE__*/_jsx(HolderOutlined, {})
|
|
150
|
+
})
|
|
151
|
+
})]
|
|
152
|
+
}));
|
|
153
|
+
}, []);
|
|
154
|
+
return /*#__PURE__*/_jsx(DndProvider, {
|
|
155
|
+
backend: HTML5Backend,
|
|
156
|
+
children: /*#__PURE__*/_jsx(Table, _objectSpread({
|
|
157
|
+
className: classnames(clsPrefix, className),
|
|
158
|
+
components: canSort ? {
|
|
159
|
+
table: components === null || components === void 0 ? void 0 : components.table,
|
|
160
|
+
header: components === null || components === void 0 ? void 0 : components.header,
|
|
161
|
+
body: _objectSpread({
|
|
162
|
+
row: TableRow
|
|
163
|
+
}, (components === null || components === void 0 ? void 0 : components.body) || {})
|
|
164
|
+
} : components,
|
|
165
|
+
columns: tableColumns,
|
|
166
|
+
dataSource: dataSource
|
|
167
|
+
}, otherProps))
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
export default DraggableTable;
|