1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13 |
|
14 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
15 |
|
16 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17 |
|
18 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
19 |
|
20 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
21 |
|
22 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
23 |
|
24 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
25 |
|
26 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
27 |
|
28 | var _react = _interopRequireWildcard(require("react"));
|
29 |
|
30 | var _reactDom = require("react-dom");
|
31 |
|
32 | var _classnames = _interopRequireDefault(require("classnames"));
|
33 |
|
34 | var _noop = _interopRequireDefault(require("lodash/noop"));
|
35 |
|
36 | var _checkbox = _interopRequireDefault(require("../checkbox"));
|
37 |
|
38 | var _search = _interopRequireDefault(require("./search"));
|
39 |
|
40 | var _item = _interopRequireDefault(require("./item"));
|
41 |
|
42 | var _triggerEvent = _interopRequireDefault(require("../_util/triggerEvent"));
|
43 |
|
44 | var _animate = _interopRequireDefault(require("../animate"));
|
45 |
|
46 | var _PureRenderMixin = _interopRequireDefault(require("../rc-components/util/PureRenderMixin"));
|
47 |
|
48 | function _createSuper(Derived) {
|
49 | function isNativeReflectConstruct() {
|
50 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
51 | if (Reflect.construct.sham) return false;
|
52 | if (typeof Proxy === "function") return true;
|
53 |
|
54 | try {
|
55 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
56 | return true;
|
57 | } catch (e) {
|
58 | return false;
|
59 | }
|
60 | }
|
61 |
|
62 | return function () {
|
63 | var Super = (0, _getPrototypeOf2["default"])(Derived),
|
64 | result;
|
65 |
|
66 | if (isNativeReflectConstruct()) {
|
67 | var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
|
68 | result = Reflect.construct(Super, arguments, NewTarget);
|
69 | } else {
|
70 | result = Super.apply(this, arguments);
|
71 | }
|
72 |
|
73 | return (0, _possibleConstructorReturn2["default"])(this, result);
|
74 | };
|
75 | }
|
76 |
|
77 | function isRenderResultPlainObject(result) {
|
78 | return result && !(0, _react.isValidElement)(result) && Object.prototype.toString.call(result) === '[object Object]';
|
79 | }
|
80 |
|
81 | var TransferList =
|
82 |
|
83 | function (_Component) {
|
84 | (0, _inherits2["default"])(TransferList, _Component);
|
85 |
|
86 | var _super = _createSuper(TransferList);
|
87 |
|
88 | function TransferList() {
|
89 | var _this;
|
90 |
|
91 | (0, _classCallCheck2["default"])(this, TransferList);
|
92 | _this = _super.apply(this, arguments);
|
93 | _this.state = {
|
94 | mounted: false
|
95 | };
|
96 |
|
97 | _this.handleSelect = function (selectedItem) {
|
98 | var _this$props = _this.props,
|
99 | checkedKeys = _this$props.checkedKeys,
|
100 | handleSelect = _this$props.handleSelect;
|
101 | var result = checkedKeys.some(function (key) {
|
102 | return key === selectedItem.key;
|
103 | });
|
104 | handleSelect(selectedItem, !result);
|
105 | };
|
106 |
|
107 | _this.handleFilter = function (e) {
|
108 | var _this$props2 = _this.props,
|
109 | handleFilter = _this$props2.handleFilter,
|
110 | prefixCls = _this$props2.prefixCls;
|
111 | handleFilter(e);
|
112 |
|
113 | if (!e.target.value) {
|
114 | return;
|
115 | }
|
116 |
|
117 |
|
118 | _this.triggerScrollTimer = window.setTimeout(function () {
|
119 | var listNode = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this)).querySelectorAll("".concat(prefixCls, "-content"))[0];
|
120 |
|
121 | if (listNode) {
|
122 | (0, _triggerEvent["default"])(listNode, 'scroll');
|
123 | }
|
124 | }, 0);
|
125 | };
|
126 |
|
127 | _this.handleClear = function () {
|
128 | var handleClear = _this.props.handleClear;
|
129 | handleClear();
|
130 | };
|
131 |
|
132 | _this.matchFilter = function (text, item) {
|
133 | var _this$props3 = _this.props,
|
134 | filter = _this$props3.filter,
|
135 | filterOption = _this$props3.filterOption;
|
136 |
|
137 | if (filterOption) {
|
138 | return filterOption(filter, item);
|
139 | }
|
140 |
|
141 | return text.indexOf(filter) >= 0;
|
142 | };
|
143 |
|
144 | _this.renderItem = function (item) {
|
145 | var _this$props$render = _this.props.render,
|
146 | render = _this$props$render === void 0 ? _noop["default"] : _this$props$render;
|
147 | var renderResult = render(item);
|
148 |
|
149 | if (isRenderResultPlainObject(renderResult)) {
|
150 | return {
|
151 | renderedText: renderResult.value,
|
152 | renderedEl: renderResult.label
|
153 | };
|
154 | }
|
155 |
|
156 | return {
|
157 | renderedText: renderResult,
|
158 | renderedEl: renderResult
|
159 | };
|
160 | };
|
161 |
|
162 | return _this;
|
163 | }
|
164 |
|
165 | (0, _createClass2["default"])(TransferList, [{
|
166 | key: "componentDidMount",
|
167 | value: function componentDidMount() {
|
168 | var _this2 = this;
|
169 |
|
170 | this.timer = window.setTimeout(function () {
|
171 | _this2.setState({
|
172 | mounted: true
|
173 | });
|
174 | }, 0);
|
175 | }
|
176 | }, {
|
177 | key: "componentWillUnmount",
|
178 | value: function componentWillUnmount() {
|
179 | clearTimeout(this.timer);
|
180 | clearTimeout(this.triggerScrollTimer);
|
181 | }
|
182 | }, {
|
183 | key: "shouldComponentUpdate",
|
184 | value: function shouldComponentUpdate() {
|
185 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
186 | args[_key] = arguments[_key];
|
187 | }
|
188 |
|
189 | return _PureRenderMixin["default"].shouldComponentUpdate.apply(this, args);
|
190 | }
|
191 | }, {
|
192 | key: "getCheckStatus",
|
193 | value: function getCheckStatus(filteredDataSource) {
|
194 | var checkedKeys = this.props.checkedKeys;
|
195 |
|
196 | if (checkedKeys.length === 0) {
|
197 | return 'none';
|
198 | }
|
199 |
|
200 | if (filteredDataSource.every(function (item) {
|
201 | return checkedKeys.indexOf(item.key) >= 0;
|
202 | })) {
|
203 | return 'all';
|
204 | }
|
205 |
|
206 | return 'part';
|
207 | }
|
208 | }, {
|
209 | key: "render",
|
210 | value: function render() {
|
211 | var _this3 = this;
|
212 |
|
213 | var _this$props4 = this.props,
|
214 | prefixCls = _this$props4.prefixCls,
|
215 | dataSource = _this$props4.dataSource,
|
216 | titleText = _this$props4.titleText,
|
217 | checkedKeys = _this$props4.checkedKeys,
|
218 | lazy = _this$props4.lazy,
|
219 | _this$props4$body = _this$props4.body,
|
220 | body = _this$props4$body === void 0 ? _noop["default"] : _this$props4$body,
|
221 | _this$props4$footer = _this$props4.footer,
|
222 | footer = _this$props4$footer === void 0 ? _noop["default"] : _this$props4$footer,
|
223 | showSearch = _this$props4.showSearch,
|
224 | style = _this$props4.style,
|
225 | filter = _this$props4.filter,
|
226 | searchPlaceholder = _this$props4.searchPlaceholder,
|
227 | notFoundContent = _this$props4.notFoundContent,
|
228 | itemUnit = _this$props4.itemUnit,
|
229 | itemsUnit = _this$props4.itemsUnit,
|
230 | onScroll = _this$props4.onScroll,
|
231 | handleSelectAll = _this$props4.handleSelectAll;
|
232 | var mounted = this.state.mounted;
|
233 |
|
234 | var footerDom = footer((0, _objectSpread2["default"])({}, this.props));
|
235 | var bodyDom = body((0, _objectSpread2["default"])({}, this.props));
|
236 | var listCls = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-with-footer"), !!footerDom));
|
237 | var filteredDataSource = [];
|
238 | var totalDataSource = [];
|
239 | var showItems = dataSource.map(function (item) {
|
240 | var _this3$renderItem = _this3.renderItem(item),
|
241 | renderedText = _this3$renderItem.renderedText,
|
242 | renderedEl = _this3$renderItem.renderedEl;
|
243 |
|
244 | if (filter && filter.trim() && !_this3.matchFilter(renderedText, item)) {
|
245 | return null;
|
246 | }
|
247 |
|
248 |
|
249 | totalDataSource.push(item);
|
250 |
|
251 | if (!item.disabled) {
|
252 |
|
253 | filteredDataSource.push(item);
|
254 | }
|
255 |
|
256 | var checked = checkedKeys.indexOf(item.key) >= 0;
|
257 | return _react["default"].createElement(_item["default"], {
|
258 | key: item.key,
|
259 | item: item,
|
260 | lazy: lazy,
|
261 | renderedText: renderedText,
|
262 | renderedEl: renderedEl,
|
263 | checked: checked,
|
264 | prefixCls: prefixCls,
|
265 | onClick: _this3.handleSelect
|
266 | });
|
267 | });
|
268 | var unit = dataSource.length > 1 ? itemsUnit : itemUnit;
|
269 | var search = showSearch ? _react["default"].createElement("div", {
|
270 | className: "".concat(prefixCls, "-body-search-wrapper")
|
271 | }, _react["default"].createElement(_search["default"], {
|
272 | prefixCls: "".concat(prefixCls, "-search"),
|
273 | onChange: this.handleFilter,
|
274 | handleClear: this.handleClear,
|
275 | placeholder: searchPlaceholder,
|
276 | value: filter
|
277 | })) : null;
|
278 |
|
279 | var listBody = bodyDom || _react["default"].createElement("div", {
|
280 | className: showSearch ? "".concat(prefixCls, "-body ").concat(prefixCls, "-body-with-search") : "".concat(prefixCls, "-body")
|
281 | }, search, _react["default"].createElement(_animate["default"], {
|
282 | component: "ul",
|
283 | componentProps: {
|
284 | onScroll: onScroll
|
285 | },
|
286 | className: "".concat(prefixCls, "-content"),
|
287 | transitionName: mounted ? "".concat(prefixCls, "-content-item-highlight") : '',
|
288 | transitionLeave: false
|
289 | }, showItems), _react["default"].createElement("div", {
|
290 | className: "".concat(prefixCls, "-body-not-found")
|
291 | }, notFoundContent));
|
292 |
|
293 | var listFooter = footerDom ? _react["default"].createElement("div", {
|
294 | className: "".concat(prefixCls, "-footer")
|
295 | }, footerDom) : null;
|
296 | var checkStatus = this.getCheckStatus(filteredDataSource);
|
297 | var checkedAll = checkStatus === 'all';
|
298 |
|
299 | var checkAllCheckbox = _react["default"].createElement(_checkbox["default"], {
|
300 | checked: checkedAll,
|
301 | indeterminate: checkStatus === 'part',
|
302 | onChange: function onChange() {
|
303 | return handleSelectAll(filteredDataSource, checkedAll);
|
304 | }
|
305 | });
|
306 |
|
307 | return _react["default"].createElement("div", {
|
308 | className: listCls,
|
309 | style: style
|
310 | }, _react["default"].createElement("div", {
|
311 | className: "".concat(prefixCls, "-header")
|
312 | }, checkAllCheckbox, _react["default"].createElement("span", {
|
313 | className: "".concat(prefixCls, "-header-selected")
|
314 | }, _react["default"].createElement("span", null, (checkedKeys.length > 0 ? "".concat(checkedKeys.length, "/") : '') + totalDataSource.length, ' ', unit), _react["default"].createElement("span", {
|
315 | className: "".concat(prefixCls, "-header-title")
|
316 | }, titleText))), listBody, listFooter);
|
317 | }
|
318 | }]);
|
319 | return TransferList;
|
320 | }(_react.Component);
|
321 |
|
322 | exports["default"] = TransferList;
|
323 | TransferList.displayName = 'TransferList';
|
324 | TransferList.defaultProps = {
|
325 | dataSource: [],
|
326 | titleText: '',
|
327 | showSearch: false,
|
328 | render: _noop["default"],
|
329 | lazy: {}
|
330 | };
|
331 |
|