dlt-for-react 2.0.16 → 2.1.0
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 +8 -4
- package/lib/components/KyTable/action.js +40 -50
- package/lib/components/KyUpload/index.js +1 -1
- package/lib/components/NHSelector/ListSort/index.js +411 -0
- package/lib/components/NHSelector/index.js +636 -0
- package/lib/components/NHSelector/resultview/index.js +408 -0
- package/lib/components/NHSelector/selectormodal/index.js +303 -0
- package/lib/components/NHSelector/table/index.js +784 -0
- package/lib/components/NHSelector/tree/index.js +554 -0
- package/lib/utils/toFormFillingPage.js +3 -11
- package/package.json +1 -1
- package/lib/utils/createUuid.js +0 -40
- package/lib/utils/getLoginUser.js +0 -10
- package/lib/utils/getSize.js +0 -27
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ npm publish
|
|
|
8
8
|
|
|
9
9
|
## 前端 dlt-for-react 依赖包版本更新记录
|
|
10
10
|
|
|
11
|
-
##### 当前最新版本:2.0
|
|
11
|
+
##### 当前最新版本:2.1.0
|
|
12
12
|
|
|
13
13
|
##### 安装依赖
|
|
14
14
|
|
|
@@ -16,17 +16,21 @@ npm publish
|
|
|
16
16
|
|
|
17
17
|
##### 版本修改记录
|
|
18
18
|
|
|
19
|
+
#### V2.1.0—2024 年 6 月 3 日
|
|
20
|
+
|
|
21
|
+
1. 新增 isEqual 函数
|
|
22
|
+
|
|
19
23
|
#### V2.0.16—2024 年 5 月 15 日
|
|
20
24
|
|
|
21
|
-
1. 修改列表操作列buildTitle~titleFun父函数
|
|
25
|
+
1. 修改列表操作列 buildTitle~titleFun 父函数
|
|
22
26
|
|
|
23
27
|
#### V2.0.15—2024 年 5 月 7 日
|
|
24
28
|
|
|
25
|
-
1. 修改附件删除updateDel接口传参
|
|
29
|
+
1. 修改附件删除 updateDel 接口传参
|
|
26
30
|
|
|
27
31
|
#### V2.0.14—2024 年 5 月 7 日
|
|
28
32
|
|
|
29
|
-
1. toFormFillingPage追加传参
|
|
33
|
+
1. toFormFillingPage 追加传参
|
|
30
34
|
|
|
31
35
|
#### V2.0.13—2024 年 4 月 22 日
|
|
32
36
|
|
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = undefined;
|
|
7
7
|
|
|
8
|
-
var _dropdown = require(
|
|
8
|
+
var _dropdown = require('antd/lib/dropdown');
|
|
9
9
|
|
|
10
10
|
var _dropdown2 = _interopRequireDefault(_dropdown);
|
|
11
11
|
|
|
12
|
-
var _icon = require(
|
|
12
|
+
var _icon = require('antd/lib/icon');
|
|
13
13
|
|
|
14
14
|
var _icon2 = _interopRequireDefault(_icon);
|
|
15
15
|
|
|
16
|
-
var _menu = require(
|
|
16
|
+
var _menu = require('antd/lib/menu');
|
|
17
17
|
|
|
18
18
|
var _menu2 = _interopRequireDefault(_menu);
|
|
19
19
|
|
|
20
|
-
var _divider = require(
|
|
20
|
+
var _divider = require('antd/lib/divider');
|
|
21
21
|
|
|
22
22
|
var _divider2 = _interopRequireDefault(_divider);
|
|
23
23
|
|
|
24
|
-
var _getPrototypeOf = require(
|
|
24
|
+
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
|
25
25
|
|
|
26
26
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
|
27
27
|
|
|
28
|
-
var _classCallCheck2 = require(
|
|
28
|
+
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
29
29
|
|
|
30
30
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
31
31
|
|
|
32
|
-
var _createClass2 = require(
|
|
32
|
+
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
33
33
|
|
|
34
34
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
35
35
|
|
|
36
|
-
var _possibleConstructorReturn2 = require(
|
|
36
|
+
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
37
37
|
|
|
38
38
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
39
39
|
|
|
40
|
-
var _inherits2 = require(
|
|
40
|
+
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
41
41
|
|
|
42
42
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
43
43
|
|
|
44
|
-
require(
|
|
44
|
+
require('antd/lib/dropdown/style');
|
|
45
45
|
|
|
46
|
-
require(
|
|
46
|
+
require('antd/lib/icon/style');
|
|
47
47
|
|
|
48
|
-
require(
|
|
48
|
+
require('antd/lib/menu/style');
|
|
49
49
|
|
|
50
|
-
require(
|
|
50
|
+
require('antd/lib/divider/style');
|
|
51
51
|
|
|
52
|
-
var _react = require(
|
|
52
|
+
var _react = require('react');
|
|
53
53
|
|
|
54
54
|
var _react2 = _interopRequireDefault(_react);
|
|
55
55
|
|
|
56
|
-
var _NHCore = require(
|
|
56
|
+
var _NHCore = require('../../utils/NHCore');
|
|
57
57
|
|
|
58
58
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
59
59
|
|
|
@@ -65,14 +65,6 @@ var Action = function (_React$Component) {
|
|
|
65
65
|
|
|
66
66
|
var _this = (0, _possibleConstructorReturn3.default)(this, (Action.__proto__ || (0, _getPrototypeOf2.default)(Action)).call(this, props));
|
|
67
67
|
|
|
68
|
-
_this.buildTitle = function (action) {
|
|
69
|
-
var record = _this.props.record;
|
|
70
|
-
if (action.titleFun) {
|
|
71
|
-
return action.titleFun(record);
|
|
72
|
-
}
|
|
73
|
-
return action.title || "";
|
|
74
|
-
};
|
|
75
|
-
|
|
76
68
|
_this.buildAction = function (action, length) {
|
|
77
69
|
for (var _len = arguments.length, restProps = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
|
|
78
70
|
restProps[_key - 2] = arguments[_key];
|
|
@@ -83,7 +75,7 @@ var Action = function (_React$Component) {
|
|
|
83
75
|
|
|
84
76
|
var _loop = function _loop(i) {
|
|
85
77
|
resDiv.push(!action[i].isTextBtn ? _react2.default.createElement(
|
|
86
|
-
|
|
78
|
+
'a',
|
|
87
79
|
{
|
|
88
80
|
key: (0, _NHCore.createUuid)(),
|
|
89
81
|
onClick: function onClick(e) {
|
|
@@ -93,14 +85,14 @@ var Action = function (_React$Component) {
|
|
|
93
85
|
}
|
|
94
86
|
}
|
|
95
87
|
},
|
|
96
|
-
|
|
88
|
+
action[i].title || ''
|
|
97
89
|
) : _react2.default.createElement(
|
|
98
|
-
|
|
90
|
+
'span',
|
|
99
91
|
{ key: (0, _NHCore.createUuid)() },
|
|
100
|
-
|
|
92
|
+
action[i].title || ''
|
|
101
93
|
));
|
|
102
94
|
if (i < length - 1) {
|
|
103
|
-
resDiv.push(_react2.default.createElement(_divider2.default, { key: (0, _NHCore.createUuid)(), type:
|
|
95
|
+
resDiv.push(_react2.default.createElement(_divider2.default, { key: (0, _NHCore.createUuid)(), type: 'vertical' }));
|
|
104
96
|
}
|
|
105
97
|
};
|
|
106
98
|
|
|
@@ -118,10 +110,8 @@ var Action = function (_React$Component) {
|
|
|
118
110
|
}
|
|
119
111
|
|
|
120
112
|
(0, _createClass3.default)(Action, [{
|
|
121
|
-
key:
|
|
113
|
+
key: 'render',
|
|
122
114
|
value: function render() {
|
|
123
|
-
var _this2 = this;
|
|
124
|
-
|
|
125
115
|
var initAction = this.props.action;
|
|
126
116
|
var record = this.props.record;
|
|
127
117
|
var actionLength = this.props.actionLength || 2; //表格action显示的个数
|
|
@@ -136,10 +126,10 @@ var Action = function (_React$Component) {
|
|
|
136
126
|
var actionHtml = [];
|
|
137
127
|
if (action.length === 1) {
|
|
138
128
|
actionHtml.push(_react2.default.createElement(
|
|
139
|
-
|
|
129
|
+
'div',
|
|
140
130
|
{ key: (0, _NHCore.createUuid)() },
|
|
141
131
|
!action[0].isTextBtn ? _react2.default.createElement(
|
|
142
|
-
|
|
132
|
+
'a',
|
|
143
133
|
{
|
|
144
134
|
onClick: function onClick(e) {
|
|
145
135
|
e.stopPropagation();
|
|
@@ -148,16 +138,16 @@ var Action = function (_React$Component) {
|
|
|
148
138
|
}
|
|
149
139
|
}
|
|
150
140
|
},
|
|
151
|
-
|
|
141
|
+
action[0].title || ''
|
|
152
142
|
) : _react2.default.createElement(
|
|
153
|
-
|
|
143
|
+
'span',
|
|
154
144
|
null,
|
|
155
|
-
|
|
145
|
+
action[0].title || ''
|
|
156
146
|
)
|
|
157
147
|
));
|
|
158
148
|
} else if (action.length <= actionLength && action.length > 0) {
|
|
159
149
|
actionHtml.push(_react2.default.createElement(
|
|
160
|
-
|
|
150
|
+
'div',
|
|
161
151
|
{ key: (0, _NHCore.createUuid)() },
|
|
162
152
|
this.buildAction(action, action.length)
|
|
163
153
|
));
|
|
@@ -169,9 +159,9 @@ var Action = function (_React$Component) {
|
|
|
169
159
|
_menu2.default.Item,
|
|
170
160
|
{ key: _i },
|
|
171
161
|
!action[_i].isTextBtn ? _react2.default.createElement(
|
|
172
|
-
|
|
162
|
+
'a',
|
|
173
163
|
{
|
|
174
|
-
style: { color:
|
|
164
|
+
style: { color: 'var(--primary-color)' },
|
|
175
165
|
onClick: function onClick(e) {
|
|
176
166
|
e.stopPropagation();
|
|
177
167
|
if (action[_i].onClick) {
|
|
@@ -179,12 +169,12 @@ var Action = function (_React$Component) {
|
|
|
179
169
|
}
|
|
180
170
|
}
|
|
181
171
|
},
|
|
182
|
-
|
|
172
|
+
action[_i].title || ''
|
|
183
173
|
) : _react2.default.createElement(
|
|
184
|
-
|
|
174
|
+
'span',
|
|
185
175
|
null,
|
|
186
|
-
|
|
187
|
-
|
|
176
|
+
' ',
|
|
177
|
+
action[_i].title || ''
|
|
188
178
|
)
|
|
189
179
|
));
|
|
190
180
|
};
|
|
@@ -202,21 +192,21 @@ var Action = function (_React$Component) {
|
|
|
202
192
|
_dropdown2.default,
|
|
203
193
|
{ overlay: menu },
|
|
204
194
|
_react2.default.createElement(
|
|
205
|
-
|
|
195
|
+
'a',
|
|
206
196
|
null,
|
|
207
|
-
|
|
208
|
-
_react2.default.createElement(_icon2.default, { type:
|
|
197
|
+
'\u66F4\u591A ',
|
|
198
|
+
_react2.default.createElement(_icon2.default, { type: 'down' })
|
|
209
199
|
)
|
|
210
200
|
);
|
|
211
201
|
};
|
|
212
202
|
actionHtml.push(_react2.default.createElement(
|
|
213
|
-
|
|
203
|
+
'div',
|
|
214
204
|
{ key: (0, _NHCore.createUuid)() },
|
|
215
|
-
this.buildAction(action, actionLength - 1, _react2.default.createElement(_divider2.default, { type:
|
|
205
|
+
this.buildAction(action, actionLength - 1, _react2.default.createElement(_divider2.default, { type: 'vertical', key: (0, _NHCore.createUuid)() }), _react2.default.createElement(MoreBtn, { key: (0, _NHCore.createUuid)() }))
|
|
216
206
|
));
|
|
217
207
|
}
|
|
218
208
|
return _react2.default.createElement(
|
|
219
|
-
|
|
209
|
+
'div',
|
|
220
210
|
null,
|
|
221
211
|
actionHtml
|
|
222
212
|
);
|
|
@@ -877,7 +877,7 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
877
877
|
fileList = _this5.filterCurrentFile(e.fileList, e.file);
|
|
878
878
|
} else if (e.file.status === "removed") {
|
|
879
879
|
//删除
|
|
880
|
-
(0, _index.NHFetch)(_this5.state.xtglUrl + "/dynamic/updateDel", "POST",
|
|
880
|
+
(0, _index.NHFetch)(_this5.state.xtglUrl + "/dynamic/updateDel", "POST", e.file.uid).then(function (res) {
|
|
881
881
|
if (res && res.code === 200) {
|
|
882
882
|
_this5.getResult(fileList);
|
|
883
883
|
} else {
|
|
@@ -0,0 +1,411 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = undefined;
|
|
7
|
+
|
|
8
|
+
var _extends2 = require('babel-runtime/helpers/extends');
|
|
9
|
+
|
|
10
|
+
var _extends3 = _interopRequireDefault(_extends2);
|
|
11
|
+
|
|
12
|
+
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
|
13
|
+
|
|
14
|
+
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
|
15
|
+
|
|
16
|
+
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
17
|
+
|
|
18
|
+
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
19
|
+
|
|
20
|
+
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
21
|
+
|
|
22
|
+
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
23
|
+
|
|
24
|
+
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
25
|
+
|
|
26
|
+
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
27
|
+
|
|
28
|
+
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
29
|
+
|
|
30
|
+
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
31
|
+
|
|
32
|
+
var _react = require('react');
|
|
33
|
+
|
|
34
|
+
var _react2 = _interopRequireDefault(_react);
|
|
35
|
+
|
|
36
|
+
var _reactDom = require('react-dom');
|
|
37
|
+
|
|
38
|
+
var _reactDom2 = _interopRequireDefault(_reactDom);
|
|
39
|
+
|
|
40
|
+
var _rcTweenOne = require('rc-tween-one');
|
|
41
|
+
|
|
42
|
+
var _rcTweenOne2 = _interopRequireDefault(_rcTweenOne);
|
|
43
|
+
|
|
44
|
+
var _rcQueueAnim = require('rc-queue-anim');
|
|
45
|
+
|
|
46
|
+
var _rcQueueAnim2 = _interopRequireDefault(_rcQueueAnim);
|
|
47
|
+
|
|
48
|
+
var _propTypes = require('prop-types');
|
|
49
|
+
|
|
50
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
51
|
+
|
|
52
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
53
|
+
|
|
54
|
+
function toArrayChildren(children) {
|
|
55
|
+
var ret = [];
|
|
56
|
+
_react2.default.Children.forEach(children, function (c) {
|
|
57
|
+
ret.push(c);
|
|
58
|
+
});
|
|
59
|
+
return ret;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function findChildInChildrenByKey(children, key) {
|
|
63
|
+
var ret = null;
|
|
64
|
+
if (children) {
|
|
65
|
+
children.forEach(function (c) {
|
|
66
|
+
if (ret || !c) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
if (c.key === key) {
|
|
70
|
+
ret = c;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
return ret;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function mergeChildren(prev, next) {
|
|
78
|
+
var ret = [];
|
|
79
|
+
// 保存更改后的顺序,新增的在新增时的位置插入。
|
|
80
|
+
prev.forEach(function (c) {
|
|
81
|
+
if (!c) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
var newChild = findChildInChildrenByKey(next, c.key);
|
|
85
|
+
if (newChild) {
|
|
86
|
+
ret.push(newChild);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
next.forEach(function (c, i) {
|
|
91
|
+
if (!c) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
var newChild = findChildInChildrenByKey(prev, c.key);
|
|
95
|
+
if (!newChild) {
|
|
96
|
+
ret.splice(i, 0, c);
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
return ret;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
var ListSort = function (_React$Component) {
|
|
103
|
+
(0, _inherits3.default)(ListSort, _React$Component);
|
|
104
|
+
|
|
105
|
+
function ListSort(props) {
|
|
106
|
+
(0, _classCallCheck3.default)(this, ListSort);
|
|
107
|
+
|
|
108
|
+
var _this = (0, _possibleConstructorReturn3.default)(this, (ListSort.__proto__ || (0, _getPrototypeOf2.default)(ListSort)).call(this, props));
|
|
109
|
+
|
|
110
|
+
_this.onMouseDown = function (i, e) {
|
|
111
|
+
if (_this.isDrage) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
var rect = _this.dom.getBoundingClientRect();
|
|
115
|
+
var mouseX = e.touches === undefined ? e.clientX : e.touches[0].clientX;
|
|
116
|
+
//如果是点击在了右边20px的访问之内,不能进行推拖拉排序
|
|
117
|
+
if (mouseX + 20 > rect.x + rect.width) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
document.body.style.overflow = 'hidden';
|
|
121
|
+
_this.props.onEventChange(e, 'down');
|
|
122
|
+
var style = {
|
|
123
|
+
height: rect.height + 'px',
|
|
124
|
+
userSelect: 'none',
|
|
125
|
+
WebkitUserSelect: 'none',
|
|
126
|
+
MozUserSelect: 'none',
|
|
127
|
+
MsUserSelect: 'none'
|
|
128
|
+
};
|
|
129
|
+
_this.children = Array.prototype.slice.call(_this.dom.children);
|
|
130
|
+
_this.childStyle = [];
|
|
131
|
+
var childStyle = _this.children.map(function (item, ii) {
|
|
132
|
+
var cItem = _this.children[ii + 1];
|
|
133
|
+
var marginHeight = void 0;
|
|
134
|
+
var marginWidth = void 0;
|
|
135
|
+
if (cItem) {
|
|
136
|
+
marginHeight = cItem.offsetTop - item.offsetTop - item.clientHeight;
|
|
137
|
+
marginWidth = cItem.offsetLeft - item.offsetLeft - item.clientWidth;
|
|
138
|
+
} else {
|
|
139
|
+
var parentHeight = item.parentNode.clientHeight - parseFloat(getComputedStyle(item.parentNode).getPropertyValue('padding-bottom'));
|
|
140
|
+
var parentWidth = item.parentNode.clientWidth - parseFloat(getComputedStyle(item.parentNode).getPropertyValue('padding-right'));
|
|
141
|
+
marginHeight = parentHeight - item.offsetTop - item.clientHeight;
|
|
142
|
+
marginWidth = parentWidth - item.offsetLeft - item.clientWidth;
|
|
143
|
+
}
|
|
144
|
+
var d = {
|
|
145
|
+
width: item.clientWidth,
|
|
146
|
+
height: item.clientHeight,
|
|
147
|
+
top: item.offsetTop,
|
|
148
|
+
left: item.offsetLeft,
|
|
149
|
+
margin: 'auto',
|
|
150
|
+
marginHeight: marginHeight,
|
|
151
|
+
marginWidth: marginWidth,
|
|
152
|
+
position: 'absolute',
|
|
153
|
+
zIndex: ii === i ? 1 : 0
|
|
154
|
+
};
|
|
155
|
+
_this.childStyle.push((0, _extends3.default)({}, d));
|
|
156
|
+
return d;
|
|
157
|
+
});
|
|
158
|
+
var animation = _this.children.map(function (item, ii) {
|
|
159
|
+
return i === ii && (!_this.props.dragClassName ? { scale: 1.2, boxShadow: '0 10px 10px rgba(0,0,0,0.15)' } : null) || null;
|
|
160
|
+
});
|
|
161
|
+
_this.index = i;
|
|
162
|
+
_this.swapIndex = i;
|
|
163
|
+
_this.mouseXY = {
|
|
164
|
+
startX: e.touches === undefined ? e.clientX : e.touches[0].clientX,
|
|
165
|
+
startY: e.touches === undefined ? e.clientY : e.touches[0].clientY,
|
|
166
|
+
top: childStyle[i].top,
|
|
167
|
+
left: childStyle[i].left
|
|
168
|
+
};
|
|
169
|
+
if (_this.props.dragClassName) {
|
|
170
|
+
_this.listDom = e.currentTarget;
|
|
171
|
+
_this.listDom.className = _this.listDom.className.replace(_this.props.dragClassName, '').trim() + ' ' + _this.props.dragClassName;
|
|
172
|
+
}
|
|
173
|
+
_this.isDrage = true;
|
|
174
|
+
_this.setState({
|
|
175
|
+
style: style,
|
|
176
|
+
childStyle: childStyle,
|
|
177
|
+
animation: animation
|
|
178
|
+
});
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
_this.onMouseUp = function (e) {
|
|
182
|
+
if (!_this.mouseXY) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
_this.mouseXY = null;
|
|
186
|
+
document.body.style.overflow = null;
|
|
187
|
+
_this.props.onEventChange(e, 'up');
|
|
188
|
+
var animation = _this.state.animation.map(function (item, i) {
|
|
189
|
+
if (_this.index === i) {
|
|
190
|
+
var animate = {};
|
|
191
|
+
var height = 0;
|
|
192
|
+
if (_this.props.animType === 'y') {
|
|
193
|
+
if (_this.swapIndex > _this.index) {
|
|
194
|
+
var start = _this.index + 1;
|
|
195
|
+
var end = _this.swapIndex + 1;
|
|
196
|
+
_this.childStyle.slice(start, end).forEach(function (_item) {
|
|
197
|
+
height += _item.height + _item.marginHeight;
|
|
198
|
+
});
|
|
199
|
+
animate.top = height + _this.childStyle[_this.index].top;
|
|
200
|
+
} else {
|
|
201
|
+
animate.top = _this.childStyle[_this.swapIndex].top;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
var dragScale = !_this.props.dragClassName && {
|
|
205
|
+
scale: 1,
|
|
206
|
+
boxShadow: '0 0px 0px rgba(0,0,0,0)'
|
|
207
|
+
};
|
|
208
|
+
return (0, _extends3.default)({}, dragScale, animate, {
|
|
209
|
+
onComplete: function onComplete() {
|
|
210
|
+
var children = _this.sortArray(_this.state.children, _this.swapIndex, _this.index);
|
|
211
|
+
var callbackBool = _this.index !== _this.swapIndex;
|
|
212
|
+
_this.index = null;
|
|
213
|
+
_this.childStyle = [];
|
|
214
|
+
_this.swapIndex = null;
|
|
215
|
+
_this.setState({
|
|
216
|
+
style: {},
|
|
217
|
+
childStyle: [],
|
|
218
|
+
children: children,
|
|
219
|
+
animation: []
|
|
220
|
+
}, function () {
|
|
221
|
+
_this.isDrage = false;
|
|
222
|
+
if (callbackBool) {
|
|
223
|
+
_this.props.onChange(children);
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
return item;
|
|
230
|
+
});
|
|
231
|
+
if (_this.props.dragClassName) {
|
|
232
|
+
_this.listDom.className = '' + _this.listDom.className.replace(_this.props.dragClassName, '').trim();
|
|
233
|
+
}
|
|
234
|
+
_this.setState({ animation: animation });
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
_this.onMouseMove = function (e) {
|
|
238
|
+
if (!_this.mouseXY) {
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
_this.mouseXY.x = e.touches === undefined ? e.clientX : e.touches[0].clientX;
|
|
242
|
+
_this.mouseXY.y = e.touches === undefined ? e.clientY : e.touches[0].clientY;
|
|
243
|
+
var childStyle = _this.state.childStyle;
|
|
244
|
+
var animation = _this.state.animation;
|
|
245
|
+
|
|
246
|
+
if (_this.props.animType === 'x') {
|
|
247
|
+
// 懒得写现在没用。。。做成组件后加
|
|
248
|
+
childStyle[_this.index].left = _this.mouseXY.x - _this.mouseXY.startX + _this.mouseXY.left;
|
|
249
|
+
} else {
|
|
250
|
+
childStyle[_this.index].top = _this.mouseXY.y - _this.mouseXY.startY + _this.mouseXY.top;
|
|
251
|
+
_this.swapIndex = childStyle[_this.index].top < _this.childStyle[_this.index].top ? 0 : _this.index;
|
|
252
|
+
_this.swapIndex = childStyle[_this.index].top > _this.childStyle[_this.index].top + _this.childStyle[_this.index].height ? childStyle.length - 1 : _this.swapIndex;
|
|
253
|
+
|
|
254
|
+
var top = childStyle[_this.index].top;
|
|
255
|
+
_this.childStyle.forEach(function (item, i) {
|
|
256
|
+
var cTop = item.top;
|
|
257
|
+
var cHeight = item.height + item.marginHeight;
|
|
258
|
+
if (top > cTop && top < cTop + cHeight) {
|
|
259
|
+
_this.swapIndex = i;
|
|
260
|
+
}
|
|
261
|
+
});
|
|
262
|
+
animation = animation.map(function (item, i) {
|
|
263
|
+
// 到顶端
|
|
264
|
+
var height = _this.childStyle[_this.index].height;
|
|
265
|
+
if (_this.index < _this.swapIndex) {
|
|
266
|
+
if (i > _this.index && i <= _this.swapIndex && _this.swapIndex !== _this.index) {
|
|
267
|
+
var start = _this.index + 1;
|
|
268
|
+
var end = i;
|
|
269
|
+
height = 0;
|
|
270
|
+
_this.childStyle.slice(start, end).forEach(function (_item) {
|
|
271
|
+
height += _item.height + _item.marginHeight;
|
|
272
|
+
});
|
|
273
|
+
return { top: _this.childStyle[_this.index].top + height };
|
|
274
|
+
} else if ((i > _this.swapIndex || _this.swapIndex === _this.index) && i !== _this.index) {
|
|
275
|
+
return { top: _this.childStyle[i].top };
|
|
276
|
+
}
|
|
277
|
+
} else if (_this.index > _this.swapIndex) {
|
|
278
|
+
if (i < _this.index && i >= _this.swapIndex && _this.swapIndex !== _this.index) {
|
|
279
|
+
height = _this.childStyle[_this.index].height + _this.childStyle[_this.index].marginHeight;
|
|
280
|
+
return { top: _this.childStyle[i].top + height };
|
|
281
|
+
} else if ((i < _this.swapIndex || _this.swapIndex === _this.index) && i !== _this.index) {
|
|
282
|
+
return { top: _this.childStyle[i].top };
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
if (i !== _this.index) {
|
|
286
|
+
return { top: _this.childStyle[i].top };
|
|
287
|
+
}
|
|
288
|
+
if (item == null) {
|
|
289
|
+
return {};
|
|
290
|
+
}
|
|
291
|
+
return item;
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
_this.setState({ childStyle: childStyle, animation: animation });
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
_this.getChildren = function (item, i) {
|
|
298
|
+
var onMouseDown = _this.onMouseDown.bind(_this, i);
|
|
299
|
+
var style = (0, _extends3.default)({}, _this.state.childStyle[i]);
|
|
300
|
+
return _react2.default.createElement(_rcTweenOne2.default, (0, _extends3.default)({}, item.props, {
|
|
301
|
+
onMouseDown: onMouseDown,
|
|
302
|
+
onTouchStart: onMouseDown,
|
|
303
|
+
style: (0, _extends3.default)({}, item.style, style),
|
|
304
|
+
key: item.key,
|
|
305
|
+
animation: _this.state.animation[i],
|
|
306
|
+
component: item.type
|
|
307
|
+
}));
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
_this.sortArray = function (_array, nextNum, num) {
|
|
311
|
+
var current = _array[num];
|
|
312
|
+
var array = _array.map(function (item) {
|
|
313
|
+
return item;
|
|
314
|
+
});
|
|
315
|
+
array.splice(num, 1);
|
|
316
|
+
array.splice(nextNum, 0, current);
|
|
317
|
+
return array;
|
|
318
|
+
};
|
|
319
|
+
|
|
320
|
+
_this.state = {
|
|
321
|
+
children: _this.props.children,
|
|
322
|
+
style: {},
|
|
323
|
+
childStyle: [],
|
|
324
|
+
animation: []
|
|
325
|
+
};
|
|
326
|
+
_this.index = null;
|
|
327
|
+
_this.swapIndex = null;
|
|
328
|
+
_this.mouseXY = null;
|
|
329
|
+
_this.childStyle = [];
|
|
330
|
+
_this.children = [];
|
|
331
|
+
_this.isDrage = false;
|
|
332
|
+
return _this;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
(0, _createClass3.default)(ListSort, [{
|
|
336
|
+
key: 'componentDidMount',
|
|
337
|
+
value: function componentDidMount() {
|
|
338
|
+
this.dom = _reactDom2.default.findDOMNode(this);
|
|
339
|
+
|
|
340
|
+
if (window.addEventListener) {
|
|
341
|
+
window.addEventListener('mousemove', this.onMouseMove);
|
|
342
|
+
window.addEventListener('touchmove', this.onMouseMove);
|
|
343
|
+
window.addEventListener('mouseup', this.onMouseUp);
|
|
344
|
+
window.addEventListener('touchend', this.onMouseUp);
|
|
345
|
+
} else {
|
|
346
|
+
window.attachEvent('onmousemove', this.onMouseMove);
|
|
347
|
+
window.attachEvent('ontouchmove', this.onMouseMove);
|
|
348
|
+
window.attachEvent('onmouseup', this.onMouseUp);
|
|
349
|
+
window.attachEvent('ontouchend', this.onMouseUp);
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
}, {
|
|
353
|
+
key: 'UNSAFE_componentWillReceiveProps',
|
|
354
|
+
value: function UNSAFE_componentWillReceiveProps(nextProps) {
|
|
355
|
+
var currentChildren = this.state.children;
|
|
356
|
+
var nextChildren = nextProps.children;
|
|
357
|
+
var newChildren = mergeChildren(currentChildren, nextChildren);
|
|
358
|
+
this.setState({ children: newChildren });
|
|
359
|
+
}
|
|
360
|
+
}, {
|
|
361
|
+
key: 'componentWillUnmount',
|
|
362
|
+
value: function componentWillUnmount() {
|
|
363
|
+
if (window.addEventListener) {
|
|
364
|
+
window.removeEventListener('mousemove', this.onMouseMove);
|
|
365
|
+
window.removeEventListener('touchmove', this.onMouseMove);
|
|
366
|
+
window.removeEventListener('mouseup', this.onMouseUp);
|
|
367
|
+
window.removeEventListener('touchend', this.onMouseUp);
|
|
368
|
+
} else {
|
|
369
|
+
window.detachEvent('onmousemove', this.onMouseMove);
|
|
370
|
+
window.detachEvent('ontouchmove', this.onMouseMove);
|
|
371
|
+
window.detachEvent('onmouseup', this.onMouseUp);
|
|
372
|
+
window.detachEvent('ontouchend', this.onMouseUp);
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
}, {
|
|
376
|
+
key: 'render',
|
|
377
|
+
value: function render() {
|
|
378
|
+
var childrenToRender = toArrayChildren(this.state.children).map(this.getChildren);
|
|
379
|
+
var props = (0, _extends3.default)({}, this.props);
|
|
380
|
+
['component', 'animType', 'dragClassName', 'appearAnim', 'onEventChange'].forEach(function (key) {
|
|
381
|
+
return delete props[key];
|
|
382
|
+
});
|
|
383
|
+
if (this.props.appearAnim) {
|
|
384
|
+
return _react2.default.createElement(_rcQueueAnim2.default, (0, _extends3.default)({}, props, this.props.appearAnim, {
|
|
385
|
+
style: (0, _extends3.default)({}, this.state.style)
|
|
386
|
+
}), childrenToRender);
|
|
387
|
+
}
|
|
388
|
+
return _react2.default.createElement(this.props.component, (0, _extends3.default)({}, props, {
|
|
389
|
+
style: (0, _extends3.default)({}, this.state.style)
|
|
390
|
+
}), childrenToRender);
|
|
391
|
+
}
|
|
392
|
+
}]);
|
|
393
|
+
return ListSort;
|
|
394
|
+
}(_react2.default.Component);
|
|
395
|
+
|
|
396
|
+
ListSort.propTypes = {
|
|
397
|
+
component: _propTypes2.default.any,
|
|
398
|
+
children: _propTypes2.default.any,
|
|
399
|
+
animType: _propTypes2.default.string,
|
|
400
|
+
onChange: _propTypes2.default.any,
|
|
401
|
+
dragClassName: _propTypes2.default.string,
|
|
402
|
+
appearAnim: _propTypes2.default.object,
|
|
403
|
+
onEventChange: _propTypes2.default.any
|
|
404
|
+
};
|
|
405
|
+
ListSort.defaultProps = {
|
|
406
|
+
component: 'div',
|
|
407
|
+
animType: 'y',
|
|
408
|
+
onChange: function onChange() {},
|
|
409
|
+
onEventChange: function onEventChange() {}
|
|
410
|
+
};
|
|
411
|
+
exports.default = ListSort;
|