th-design 1.0.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 +34 -0
- package/dist/esm/assets/images/close-icon.png +0 -0
- package/dist/esm/assets/images/delete-icon.png +0 -0
- package/dist/esm/assets/images/search-suffix.png +0 -0
- package/dist/esm/components/ThSelect/index.d.ts +5 -0
- package/dist/esm/components/ThSelect/index.js +1125 -0
- package/dist/esm/components/ThSelect/index.less +360 -0
- package/dist/esm/components/ThSelect/selectCache.d.ts +20 -0
- package/dist/esm/components/ThSelect/selectCache.js +100 -0
- package/dist/esm/components/ThSelect/service.d.ts +4 -0
- package/dist/esm/components/ThSelect/service.js +122 -0
- package/dist/esm/components/ThSelect/typing.d.ts +131 -0
- package/dist/esm/components/ThSelect/typing.js +1 -0
- package/dist/esm/components/ThTable/index.d.ts +8 -0
- package/dist/esm/components/ThTable/index.js +232 -0
- package/dist/esm/components/ThTable/index.less +337 -0
- package/dist/esm/components/ThTable/typing.d.ts +59 -0
- package/dist/esm/components/ThTable/typing.js +1 -0
- package/dist/esm/components/ThTable/utils.d.ts +12 -0
- package/dist/esm/components/ThTable/utils.js +108 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/typings.d.ts +20 -0
- package/package.json +75 -0
|
@@ -0,0 +1,1125 @@
|
|
|
1
|
+
var _excluded = ["dataSource", "columns", "pagination"];
|
|
2
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
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."); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
7
|
+
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); }
|
|
8
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
9
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
10
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
11
|
+
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."); }
|
|
12
|
+
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); }
|
|
13
|
+
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; }
|
|
14
|
+
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; } }
|
|
15
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
18
|
+
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; }
|
|
19
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
20
|
+
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); }
|
|
21
|
+
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; }
|
|
22
|
+
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; }
|
|
23
|
+
/*
|
|
24
|
+
* @Author: luohq luohq@2345.com
|
|
25
|
+
* @Date: 2025-10-14 14:02:00
|
|
26
|
+
* @LastEditors: luohq luohq@2345.com
|
|
27
|
+
* @LastEditTime: 2026-01-07 16:32:28
|
|
28
|
+
* @FilePath: /tellhowComponent/src/components/ThSelect/index.tsx
|
|
29
|
+
* @Description: 选择器组件
|
|
30
|
+
*/
|
|
31
|
+
import CloseIcon from "../../assets/images/close-icon.png";
|
|
32
|
+
import DeleteIcon from "../../assets/images/delete-icon.png";
|
|
33
|
+
import SearchSuffix from "../../assets/images/search-suffix.png";
|
|
34
|
+
import { CloseCircleFilled, DownOutlined } from '@ant-design/icons';
|
|
35
|
+
import { useUpdateEffect } from 'ahooks';
|
|
36
|
+
import { Button, Input, Pagination, Table } from 'antd';
|
|
37
|
+
import { memo, useEffect, useRef, useState } from 'react';
|
|
38
|
+
import { createPortal } from 'react-dom';
|
|
39
|
+
import { useLocation } from 'react-router-dom';
|
|
40
|
+
import "./index.less";
|
|
41
|
+
import customSelectCache from "./selectCache";
|
|
42
|
+
import { getList } from "./service";
|
|
43
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
44
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
45
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
46
|
+
var defaultPagination = {
|
|
47
|
+
current: 1,
|
|
48
|
+
pageSize: 10,
|
|
49
|
+
hideOnSinglePage: true
|
|
50
|
+
};
|
|
51
|
+
var ThSelect = function ThSelect(props) {
|
|
52
|
+
var cacheKey = props.cacheKey,
|
|
53
|
+
name = props.name,
|
|
54
|
+
value = props.value,
|
|
55
|
+
_props$placeholder = props.placeholder,
|
|
56
|
+
placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
|
|
57
|
+
_props$showRightPanel = props.showRightPanel,
|
|
58
|
+
showRightPanel = _props$showRightPanel === void 0 ? true : _props$showRightPanel,
|
|
59
|
+
_props$disabled = props.disabled,
|
|
60
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
61
|
+
_props$showSearch = props.showSearch,
|
|
62
|
+
showSearch = _props$showSearch === void 0 ? false : _props$showSearch,
|
|
63
|
+
searchBar = props.searchBar,
|
|
64
|
+
onChange = props.onChange,
|
|
65
|
+
className = props.className,
|
|
66
|
+
_props$direction = props.direction,
|
|
67
|
+
direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
|
|
68
|
+
_props$fieldNames = props.fieldNames,
|
|
69
|
+
fieldNames = _props$fieldNames === void 0 ? {
|
|
70
|
+
name: 'name',
|
|
71
|
+
value: 'value'
|
|
72
|
+
} : _props$fieldNames,
|
|
73
|
+
_props$width = props.width,
|
|
74
|
+
width = _props$width === void 0 ? 500 : _props$width,
|
|
75
|
+
_props$height = props.height,
|
|
76
|
+
height = _props$height === void 0 ? 400 : _props$height,
|
|
77
|
+
_props$mode = props.mode,
|
|
78
|
+
mode = _props$mode === void 0 ? 'multiple' : _props$mode,
|
|
79
|
+
_props$label = props.label,
|
|
80
|
+
label = _props$label === void 0 ? '' : _props$label,
|
|
81
|
+
_props$showClear = props.showClear,
|
|
82
|
+
showClear = _props$showClear === void 0 ? true : _props$showClear,
|
|
83
|
+
_props$maxDisplayCoun = props.maxDisplayCount,
|
|
84
|
+
maxDisplayCount = _props$maxDisplayCoun === void 0 ? 2 : _props$maxDisplayCoun,
|
|
85
|
+
_props$labelStyle = props.labelStyle,
|
|
86
|
+
labelStyle = _props$labelStyle === void 0 ? {} : _props$labelStyle,
|
|
87
|
+
tableProps = props.tableProps,
|
|
88
|
+
_props$requestProps = props.requestProps,
|
|
89
|
+
requestProps = _props$requestProps === void 0 ? {
|
|
90
|
+
method: 'post',
|
|
91
|
+
params: {},
|
|
92
|
+
url: ''
|
|
93
|
+
} : _props$requestProps,
|
|
94
|
+
_props$responseField = props.responseField,
|
|
95
|
+
responseField = _props$responseField === void 0 ? 'records' : _props$responseField,
|
|
96
|
+
_props$needInput = props.needInput,
|
|
97
|
+
needInput = _props$needInput === void 0 ? false : _props$needInput;
|
|
98
|
+
var _tableProps$dataSourc = tableProps.dataSource,
|
|
99
|
+
dataSource = _tableProps$dataSourc === void 0 ? [] : _tableProps$dataSourc,
|
|
100
|
+
_tableProps$columns = tableProps.columns,
|
|
101
|
+
columns = _tableProps$columns === void 0 ? [] : _tableProps$columns,
|
|
102
|
+
paginationProp = tableProps.pagination,
|
|
103
|
+
restProps = _objectWithoutProperties(tableProps, _excluded);
|
|
104
|
+
var pagination = paginationProp === false ? false : _objectSpread(_objectSpread({}, defaultPagination), paginationProp || {});
|
|
105
|
+
var location = useLocation();
|
|
106
|
+
// 下拉框是否展开
|
|
107
|
+
var _useState = useState(false),
|
|
108
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
109
|
+
open = _useState2[0],
|
|
110
|
+
setOpen = _useState2[1];
|
|
111
|
+
// 动画状态管理
|
|
112
|
+
var _useState3 = useState('exited'),
|
|
113
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
114
|
+
animationState = _useState4[0],
|
|
115
|
+
setAnimationState = _useState4[1];
|
|
116
|
+
// 下拉框位置
|
|
117
|
+
var _useState5 = useState({
|
|
118
|
+
vertical: 'bottom',
|
|
119
|
+
horizontal: 'left'
|
|
120
|
+
}),
|
|
121
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
122
|
+
dropdownPlacement = _useState6[0],
|
|
123
|
+
setDropdownPlacement = _useState6[1];
|
|
124
|
+
var selectRef = useRef(null);
|
|
125
|
+
var searchInputRef = useRef(null);
|
|
126
|
+
var dropdownRef = useRef(null);
|
|
127
|
+
var selectValueRef = useRef(null); // 选择器值容器
|
|
128
|
+
// 表格数据
|
|
129
|
+
var _useState7 = useState([]),
|
|
130
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
131
|
+
dataList = _useState8[0],
|
|
132
|
+
setDataList = _useState8[1];
|
|
133
|
+
// 搜索参数
|
|
134
|
+
var _useState9 = useState({
|
|
135
|
+
keyword: ''
|
|
136
|
+
}),
|
|
137
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
138
|
+
searchParams = _useState10[0],
|
|
139
|
+
setSearchParams = _useState10[1];
|
|
140
|
+
// 双击检测相关状态
|
|
141
|
+
var _useState11 = useState(0),
|
|
142
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
143
|
+
lastClickTime = _useState12[0],
|
|
144
|
+
setLastClickTime = _useState12[1];
|
|
145
|
+
var _useState13 = useState(null),
|
|
146
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
147
|
+
lastClickedRecord = _useState14[0],
|
|
148
|
+
setLastClickedRecord = _useState14[1];
|
|
149
|
+
// 分页参数
|
|
150
|
+
var _useState15 = useState(pagination),
|
|
151
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
152
|
+
paginationData = _useState16[0],
|
|
153
|
+
setPaginationData = _useState16[1];
|
|
154
|
+
// 用于存储分页参数的ref,避免循环依赖
|
|
155
|
+
var paginationRef = useRef(pagination);
|
|
156
|
+
var _useState17 = useState(false),
|
|
157
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
158
|
+
loading = _useState18[0],
|
|
159
|
+
setLoading = _useState18[1];
|
|
160
|
+
var _useState19 = useState([]),
|
|
161
|
+
_useState20 = _slicedToArray(_useState19, 2),
|
|
162
|
+
selectedRows = _useState20[0],
|
|
163
|
+
setSelectedRows = _useState20[1];
|
|
164
|
+
// 选中标签名
|
|
165
|
+
var _useState21 = useState(''),
|
|
166
|
+
_useState22 = _slicedToArray(_useState21, 2),
|
|
167
|
+
selectedLabels = _useState22[0],
|
|
168
|
+
setSelectedLabels = _useState22[1];
|
|
169
|
+
var searchBarRef = useRef(null);
|
|
170
|
+
// 搜索区域高度
|
|
171
|
+
var _useState23 = useState(0),
|
|
172
|
+
_useState24 = _slicedToArray(_useState23, 2),
|
|
173
|
+
searchBarHeight = _useState24[0],
|
|
174
|
+
setSearchBarHeight = _useState24[1];
|
|
175
|
+
var _useState25 = useState({
|
|
176
|
+
top: 0,
|
|
177
|
+
left: 0
|
|
178
|
+
}),
|
|
179
|
+
_useState26 = _slicedToArray(_useState25, 2),
|
|
180
|
+
dropdownPosition = _useState26[0],
|
|
181
|
+
setDropdownPosition = _useState26[1];
|
|
182
|
+
// value -> name 的缓存,避免外部去更新name字段,name由组件内部接管
|
|
183
|
+
var _useState27 = useState(function () {
|
|
184
|
+
return new Map();
|
|
185
|
+
}),
|
|
186
|
+
_useState28 = _slicedToArray(_useState27, 2),
|
|
187
|
+
labelCache = _useState28[0],
|
|
188
|
+
setLabelCache = _useState28[1];
|
|
189
|
+
// 缓存初始值,避免重置后初始值丢失
|
|
190
|
+
var initValueRef = useRef(null);
|
|
191
|
+
var scopeKey = location.pathname;
|
|
192
|
+
var _useState29 = useState(false),
|
|
193
|
+
_useState30 = _slicedToArray(_useState29, 2),
|
|
194
|
+
isEditing = _useState30[0],
|
|
195
|
+
setIsEditing = _useState30[1];
|
|
196
|
+
var inputEditRef = useRef(null);
|
|
197
|
+
var _useState31 = useState(''),
|
|
198
|
+
_useState32 = _slicedToArray(_useState31, 2),
|
|
199
|
+
inputEditValue = _useState32[0],
|
|
200
|
+
setInputEditValue = _useState32[1];
|
|
201
|
+
// 悬停状态,用于切换下拉箭头与清除图标
|
|
202
|
+
var _useState33 = useState(false),
|
|
203
|
+
_useState34 = _slicedToArray(_useState33, 2),
|
|
204
|
+
hovered = _useState34[0],
|
|
205
|
+
setHovered = _useState34[1];
|
|
206
|
+
// 下拉框placeholder
|
|
207
|
+
var selectPlaceholder = placeholder ? placeholder : needInput ? '请选择(双击)' : '请选择';
|
|
208
|
+
var _useState35 = useState(false),
|
|
209
|
+
_useState36 = _slicedToArray(_useState35, 2),
|
|
210
|
+
isSelectValueOverflow = _useState36[0],
|
|
211
|
+
setIsSelectValueOverflow = _useState36[1]; // 选择器容器文本是否超出
|
|
212
|
+
|
|
213
|
+
useEffect(function () {
|
|
214
|
+
if (typeof value === 'string') {
|
|
215
|
+
if (name && value) {
|
|
216
|
+
initValueRef.current = [_defineProperty(_defineProperty({}, fieldNames.name || 'name', name), (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value', value)];
|
|
217
|
+
}
|
|
218
|
+
} else {
|
|
219
|
+
initValueRef.current = value;
|
|
220
|
+
}
|
|
221
|
+
}, [value, name]);
|
|
222
|
+
useEffect(function () {
|
|
223
|
+
if (dataSource !== null && dataSource !== void 0 && dataSource.length && open) {
|
|
224
|
+
setDataList(dataSource);
|
|
225
|
+
}
|
|
226
|
+
}, [dataSource, open]);
|
|
227
|
+
var getTableListFromServer = /*#__PURE__*/function () {
|
|
228
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
229
|
+
var _requestProps$method;
|
|
230
|
+
var currentPagination, query, pages, res, responseData, _res$result, _res$result2, _res$result3, newTotal;
|
|
231
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
232
|
+
while (1) switch (_context.prev = _context.next) {
|
|
233
|
+
case 0:
|
|
234
|
+
currentPagination = paginationRef.current || paginationData;
|
|
235
|
+
query = {};
|
|
236
|
+
if (((_requestProps$method = requestProps.method) === null || _requestProps$method === void 0 ? void 0 : _requestProps$method.toUpperCase()) === 'POST') {
|
|
237
|
+
pages = currentPagination === false ? {} : {
|
|
238
|
+
page: (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.current) || 1,
|
|
239
|
+
limit: (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.pageSize) || 10
|
|
240
|
+
};
|
|
241
|
+
query = _objectSpread(_objectSpread({}, pages), {}, {
|
|
242
|
+
queryParams: _objectSpread(_objectSpread({}, searchParams), requestProps.params)
|
|
243
|
+
});
|
|
244
|
+
} else {
|
|
245
|
+
query = _objectSpread(_objectSpread({}, searchParams), requestProps.params);
|
|
246
|
+
}
|
|
247
|
+
_context.next = 5;
|
|
248
|
+
return getList(requestProps, query);
|
|
249
|
+
case 5:
|
|
250
|
+
res = _context.sent;
|
|
251
|
+
if (res.code === Number(200)) {
|
|
252
|
+
if (Array.isArray(res === null || res === void 0 ? void 0 : res.result)) {
|
|
253
|
+
responseData = (res === null || res === void 0 ? void 0 : res.result) || [];
|
|
254
|
+
} else {
|
|
255
|
+
responseData = Array.isArray(res === null || res === void 0 || (_res$result = res.result) === null || _res$result === void 0 ? void 0 : _res$result[responseField]) ? (res === null || res === void 0 || (_res$result2 = res.result) === null || _res$result2 === void 0 ? void 0 : _res$result2[responseField]) || [] : [];
|
|
256
|
+
}
|
|
257
|
+
if (paginationData === false) {
|
|
258
|
+
if (!searchParams.keyword) {
|
|
259
|
+
// 非搜索的情况下,缓存数据
|
|
260
|
+
customSelectCache.setNonPagedData(scopeKey, cacheKey, responseData);
|
|
261
|
+
}
|
|
262
|
+
} else {
|
|
263
|
+
// 使用函数式更新避免依赖当前的paginationData状态,只在total变化时更新
|
|
264
|
+
newTotal = Number(((_res$result3 = res.result) === null || _res$result3 === void 0 ? void 0 : _res$result3.total) || 0);
|
|
265
|
+
setPaginationData(function (prevPaginationData) {
|
|
266
|
+
if (_typeof(prevPaginationData) === 'object' && prevPaginationData.total !== newTotal) {
|
|
267
|
+
return _objectSpread(_objectSpread({}, prevPaginationData), {}, {
|
|
268
|
+
total: newTotal
|
|
269
|
+
});
|
|
270
|
+
}
|
|
271
|
+
return prevPaginationData;
|
|
272
|
+
});
|
|
273
|
+
if (!searchParams.keyword) {
|
|
274
|
+
// 缓存数据分页
|
|
275
|
+
customSelectCache.setDataByPage(scopeKey, cacheKey, currentPagination !== false ? (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.current) || 1 : 1, responseData, newTotal);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
setDataList(responseData);
|
|
279
|
+
setLoading(false);
|
|
280
|
+
} else {
|
|
281
|
+
setLoading(false);
|
|
282
|
+
}
|
|
283
|
+
case 7:
|
|
284
|
+
case "end":
|
|
285
|
+
return _context.stop();
|
|
286
|
+
}
|
|
287
|
+
}, _callee);
|
|
288
|
+
}));
|
|
289
|
+
return function getTableListFromServer() {
|
|
290
|
+
return _ref2.apply(this, arguments);
|
|
291
|
+
};
|
|
292
|
+
}();
|
|
293
|
+
|
|
294
|
+
// 获取表格数据
|
|
295
|
+
var getTableList = /*#__PURE__*/function () {
|
|
296
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
297
|
+
var currentPagination, cacheData, _cacheData, paginationInfo;
|
|
298
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
299
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
300
|
+
case 0:
|
|
301
|
+
setLoading(true);
|
|
302
|
+
currentPagination = paginationRef.current || paginationData;
|
|
303
|
+
if (!(!!cacheKey && !!scopeKey && !searchParams.keyword && !requestProps.params)) {
|
|
304
|
+
_context2.next = 27;
|
|
305
|
+
break;
|
|
306
|
+
}
|
|
307
|
+
if (!(currentPagination === false)) {
|
|
308
|
+
_context2.next = 14;
|
|
309
|
+
break;
|
|
310
|
+
}
|
|
311
|
+
// 不分页
|
|
312
|
+
cacheData = customSelectCache.getNonPagedData(scopeKey, cacheKey);
|
|
313
|
+
if (!cacheData) {
|
|
314
|
+
_context2.next = 10;
|
|
315
|
+
break;
|
|
316
|
+
}
|
|
317
|
+
setDataList(cacheData);
|
|
318
|
+
setLoading(false);
|
|
319
|
+
_context2.next = 12;
|
|
320
|
+
break;
|
|
321
|
+
case 10:
|
|
322
|
+
_context2.next = 12;
|
|
323
|
+
return getTableListFromServer();
|
|
324
|
+
case 12:
|
|
325
|
+
_context2.next = 25;
|
|
326
|
+
break;
|
|
327
|
+
case 14:
|
|
328
|
+
// 分页
|
|
329
|
+
_cacheData = customSelectCache.getDataByPage(scopeKey, cacheKey, (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.current) || 1);
|
|
330
|
+
paginationInfo = customSelectCache.getPagination(scopeKey, cacheKey);
|
|
331
|
+
if (!_cacheData) {
|
|
332
|
+
_context2.next = 23;
|
|
333
|
+
break;
|
|
334
|
+
}
|
|
335
|
+
setDataList(_cacheData);
|
|
336
|
+
setPaginationData(_objectSpread(_objectSpread(_objectSpread({}, paginationData), paginationInfo), {}, {
|
|
337
|
+
current: (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.current) || 1
|
|
338
|
+
}));
|
|
339
|
+
paginationRef.current = _objectSpread(_objectSpread(_objectSpread({}, paginationRef.current), paginationInfo), {}, {
|
|
340
|
+
current: (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.current) || 1
|
|
341
|
+
});
|
|
342
|
+
setLoading(false);
|
|
343
|
+
_context2.next = 25;
|
|
344
|
+
break;
|
|
345
|
+
case 23:
|
|
346
|
+
_context2.next = 25;
|
|
347
|
+
return getTableListFromServer();
|
|
348
|
+
case 25:
|
|
349
|
+
_context2.next = 29;
|
|
350
|
+
break;
|
|
351
|
+
case 27:
|
|
352
|
+
_context2.next = 29;
|
|
353
|
+
return getTableListFromServer();
|
|
354
|
+
case 29:
|
|
355
|
+
case "end":
|
|
356
|
+
return _context2.stop();
|
|
357
|
+
}
|
|
358
|
+
}, _callee2);
|
|
359
|
+
}));
|
|
360
|
+
return function getTableList() {
|
|
361
|
+
return _ref3.apply(this, arguments);
|
|
362
|
+
};
|
|
363
|
+
}();
|
|
364
|
+
useEffect(function () {
|
|
365
|
+
if (!(dataSource !== null && dataSource !== void 0 && dataSource.length) && requestProps.url && open) {
|
|
366
|
+
// 当外部过滤参数变化时,重置页码到第一页
|
|
367
|
+
setPaginationData(function (prev) {
|
|
368
|
+
return _typeof(prev) === 'object' ? _objectSpread(_objectSpread({}, prev), {}, {
|
|
369
|
+
current: 1
|
|
370
|
+
}) : prev;
|
|
371
|
+
});
|
|
372
|
+
paginationRef.current = _typeof(paginationData) === 'object' ? _objectSpread(_objectSpread({}, paginationData), {}, {
|
|
373
|
+
current: 1
|
|
374
|
+
}) : paginationData;
|
|
375
|
+
getTableList();
|
|
376
|
+
}
|
|
377
|
+
}, [dataSource.length, open, requestProps.url, searchParams.keyword, requestProps.params]);
|
|
378
|
+
|
|
379
|
+
// 监听搜索区域高度变化
|
|
380
|
+
useEffect(function () {
|
|
381
|
+
if (!searchBarRef.current) {
|
|
382
|
+
setSearchBarHeight(0);
|
|
383
|
+
return;
|
|
384
|
+
}
|
|
385
|
+
var updateHeight = function updateHeight() {
|
|
386
|
+
var _searchBarRef$current;
|
|
387
|
+
var searchHeight = ((_searchBarRef$current = searchBarRef.current) === null || _searchBarRef$current === void 0 ? void 0 : _searchBarRef$current.offsetHeight) || 0;
|
|
388
|
+
setSearchBarHeight(searchHeight);
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
// 初始化高度
|
|
392
|
+
updateHeight();
|
|
393
|
+
|
|
394
|
+
// 使用ResizeObserver监听高度变化
|
|
395
|
+
var resizeObserver = new ResizeObserver(function () {
|
|
396
|
+
updateHeight();
|
|
397
|
+
});
|
|
398
|
+
resizeObserver.observe(searchBarRef.current);
|
|
399
|
+
return function () {
|
|
400
|
+
resizeObserver.disconnect();
|
|
401
|
+
};
|
|
402
|
+
}, [searchBar, open]);
|
|
403
|
+
useEffect(function () {
|
|
404
|
+
if (typeof value === 'string') {
|
|
405
|
+
if (value) {
|
|
406
|
+
var labelFromCache = labelCache.get(value);
|
|
407
|
+
var labelToUse = labelFromCache || name || '';
|
|
408
|
+
setSelectedRows([_defineProperty(_defineProperty({}, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name', labelToUse), (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value', value)]);
|
|
409
|
+
setSelectedLabels(labelToUse);
|
|
410
|
+
} else {
|
|
411
|
+
setSelectedRows([]);
|
|
412
|
+
setSelectedLabels('');
|
|
413
|
+
}
|
|
414
|
+
} else if (Array.isArray(value) && value.length) {
|
|
415
|
+
setSelectedRows(value);
|
|
416
|
+
var labels = getSelectedLabel(value);
|
|
417
|
+
setSelectedLabels(labels);
|
|
418
|
+
}
|
|
419
|
+
}, [value, name, labelCache]);
|
|
420
|
+
|
|
421
|
+
// 处理动画状态
|
|
422
|
+
useUpdateEffect(function () {
|
|
423
|
+
if (open) {
|
|
424
|
+
setAnimationState('entering');
|
|
425
|
+
var timer = setTimeout(function () {
|
|
426
|
+
setAnimationState('entered');
|
|
427
|
+
}, 10);
|
|
428
|
+
return function () {
|
|
429
|
+
return clearTimeout(timer);
|
|
430
|
+
};
|
|
431
|
+
} else {
|
|
432
|
+
setAnimationState('exiting');
|
|
433
|
+
var _timer = setTimeout(function () {
|
|
434
|
+
setAnimationState('exited');
|
|
435
|
+
}, 300);
|
|
436
|
+
return function () {
|
|
437
|
+
return clearTimeout(_timer);
|
|
438
|
+
};
|
|
439
|
+
}
|
|
440
|
+
}, [open]);
|
|
441
|
+
|
|
442
|
+
// 点击外部关闭下拉框
|
|
443
|
+
useEffect(function () {
|
|
444
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
445
|
+
// 检查点击是否在selectRef或dropdownRef内部
|
|
446
|
+
var isClickInsideSelect = selectRef.current && selectRef.current.contains(event.target);
|
|
447
|
+
var isClickInsideDropdown = dropdownRef.current && dropdownRef.current.contains(event.target);
|
|
448
|
+
if (!isClickInsideSelect && !isClickInsideDropdown) {
|
|
449
|
+
setOpen(false);
|
|
450
|
+
onReset();
|
|
451
|
+
}
|
|
452
|
+
};
|
|
453
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
454
|
+
return function () {
|
|
455
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
456
|
+
};
|
|
457
|
+
}, []);
|
|
458
|
+
|
|
459
|
+
// 监听窗口变化和滚动,重新计算下拉框位置
|
|
460
|
+
useEffect(function () {
|
|
461
|
+
if (!open) return;
|
|
462
|
+
var handlePositionUpdate = function handlePositionUpdate() {
|
|
463
|
+
var placement = calculateDropdownPlacement();
|
|
464
|
+
setDropdownPlacement(placement);
|
|
465
|
+
};
|
|
466
|
+
var handleResize = function handleResize() {
|
|
467
|
+
return handlePositionUpdate();
|
|
468
|
+
};
|
|
469
|
+
var handleScroll = function handleScroll() {
|
|
470
|
+
return handlePositionUpdate();
|
|
471
|
+
};
|
|
472
|
+
window.addEventListener('resize', handleResize);
|
|
473
|
+
window.addEventListener('scroll', handleScroll);
|
|
474
|
+
return function () {
|
|
475
|
+
window.removeEventListener('resize', handleResize);
|
|
476
|
+
window.removeEventListener('scroll', handleScroll);
|
|
477
|
+
};
|
|
478
|
+
}, [open]);
|
|
479
|
+
|
|
480
|
+
// 获取当前选中项的显示文本
|
|
481
|
+
var getSelectedLabel = function getSelectedLabel(selected) {
|
|
482
|
+
var _selected$;
|
|
483
|
+
if (mode === 'multiple') {
|
|
484
|
+
if (!(selected !== null && selected !== void 0 && selected.length)) return '';
|
|
485
|
+
var labels = selected.map(function (item) {
|
|
486
|
+
return item[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name'];
|
|
487
|
+
});
|
|
488
|
+
if (labels.length <= maxDisplayCount) {
|
|
489
|
+
return labels.join(',');
|
|
490
|
+
} else {
|
|
491
|
+
var displayLabels = labels.slice(0, maxDisplayCount);
|
|
492
|
+
var remainingCount = labels.length - maxDisplayCount;
|
|
493
|
+
return "".concat(displayLabels.join(','), "\uFF0C+").concat(remainingCount, "\u9879");
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
return (selected === null || selected === void 0 || (_selected$ = selected[0]) === null || _selected$ === void 0 ? void 0 : _selected$[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name']) || '';
|
|
497
|
+
};
|
|
498
|
+
|
|
499
|
+
// 计算下拉框位置
|
|
500
|
+
var calculateDropdownPlacement = function calculateDropdownPlacement() {
|
|
501
|
+
if (!selectRef.current) return {
|
|
502
|
+
vertical: 'bottom',
|
|
503
|
+
horizontal: 'left'
|
|
504
|
+
};
|
|
505
|
+
var selectRect = selectRef.current.getBoundingClientRect();
|
|
506
|
+
var viewportHeight = window.innerHeight;
|
|
507
|
+
var viewportWidth = window.innerWidth;
|
|
508
|
+
var margin = 8;
|
|
509
|
+
var dropdownWidth = width; // 使用实际宽度
|
|
510
|
+
var dropdownHeight = height; // 使用实际高度
|
|
511
|
+
|
|
512
|
+
// 计算垂直方向
|
|
513
|
+
var spaceBelow = viewportHeight - selectRect.bottom - margin;
|
|
514
|
+
var spaceAbove = selectRect.top - margin;
|
|
515
|
+
var vertical = spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? 'top' : 'bottom';
|
|
516
|
+
|
|
517
|
+
// 计算水平方向
|
|
518
|
+
var spaceRight = viewportWidth - selectRect.left - margin;
|
|
519
|
+
var spaceLeft = selectRect.right - margin;
|
|
520
|
+
var horizontal = 'left';
|
|
521
|
+
if (spaceRight < dropdownWidth && spaceLeft > spaceRight) {
|
|
522
|
+
horizontal = 'right';
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
// 计算具体位置坐标
|
|
526
|
+
var top, left;
|
|
527
|
+
if (vertical === 'bottom') {
|
|
528
|
+
top = selectRect.bottom + 4; // 向下展开
|
|
529
|
+
} else {
|
|
530
|
+
top = selectRect.top - dropdownHeight - 4; // 向上展开
|
|
531
|
+
}
|
|
532
|
+
if (horizontal === 'left') {
|
|
533
|
+
left = selectRect.left; // 左对齐
|
|
534
|
+
} else {
|
|
535
|
+
left = selectRect.right - dropdownWidth; // 右对齐
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
// 确保不超出视口边界
|
|
539
|
+
top = Math.max(margin, Math.min(top, viewportHeight - dropdownHeight - margin));
|
|
540
|
+
left = Math.max(margin, Math.min(left, viewportWidth - dropdownWidth - margin));
|
|
541
|
+
|
|
542
|
+
// 更新位置状态
|
|
543
|
+
setDropdownPosition({
|
|
544
|
+
top: top,
|
|
545
|
+
left: left
|
|
546
|
+
});
|
|
547
|
+
return {
|
|
548
|
+
vertical: vertical,
|
|
549
|
+
horizontal: horizontal
|
|
550
|
+
};
|
|
551
|
+
};
|
|
552
|
+
|
|
553
|
+
// 处理选择器点击
|
|
554
|
+
var handleSelectorClick = function handleSelectorClick(e) {
|
|
555
|
+
if (disabled) return;
|
|
556
|
+
// 当需要输入模式时:单击进入输入,不打开下拉;双击由 onDoubleClick 负责
|
|
557
|
+
if (needInput) {
|
|
558
|
+
// 避免双击触发单击逻辑
|
|
559
|
+
if ((e === null || e === void 0 ? void 0 : e.detail) >= 2) return;
|
|
560
|
+
// 已在编辑状态则不重复进入
|
|
561
|
+
if (isEditing) return;
|
|
562
|
+
setOpen(false);
|
|
563
|
+
setIsEditing(true);
|
|
564
|
+
setInputEditValue(mode === 'single' ? selectedLabels || '' : '');
|
|
565
|
+
if (!selectedLabels) {
|
|
566
|
+
setSelectedLabels('');
|
|
567
|
+
}
|
|
568
|
+
setTimeout(function () {
|
|
569
|
+
var _inputEditRef$current, _inputEditRef$current2;
|
|
570
|
+
(_inputEditRef$current = inputEditRef.current) === null || _inputEditRef$current === void 0 || (_inputEditRef$current2 = _inputEditRef$current.focus) === null || _inputEditRef$current2 === void 0 || _inputEditRef$current2.call(_inputEditRef$current);
|
|
571
|
+
}, 0);
|
|
572
|
+
return;
|
|
573
|
+
}
|
|
574
|
+
if (!open) {
|
|
575
|
+
// 打开下拉框时计算位置
|
|
576
|
+
var placement = calculateDropdownPlacement();
|
|
577
|
+
setDropdownPlacement(placement);
|
|
578
|
+
setOpen(true);
|
|
579
|
+
if (showSearch) {
|
|
580
|
+
// 延迟聚焦搜索框
|
|
581
|
+
setTimeout(function () {
|
|
582
|
+
var _searchInputRef$curre;
|
|
583
|
+
(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
|
|
584
|
+
}, 100);
|
|
585
|
+
}
|
|
586
|
+
} else {
|
|
587
|
+
setOpen(false);
|
|
588
|
+
}
|
|
589
|
+
};
|
|
590
|
+
|
|
591
|
+
// 递归过滤树形数据:命中自身或后代时保留该节点,并只保留命中的子树
|
|
592
|
+
var filterTree = function filterTree(list, keyword, nameField, childrenField) {
|
|
593
|
+
if (!Array.isArray(list) || !list.length) return [];
|
|
594
|
+
var kw = String(keyword || '').trim();
|
|
595
|
+
if (!kw) return list;
|
|
596
|
+
var result = [];
|
|
597
|
+
list.forEach(function (item) {
|
|
598
|
+
var children = item[childrenField];
|
|
599
|
+
var selfText = item[nameField];
|
|
600
|
+
var matchedSelf = typeof selfText === 'string' ? selfText.includes(kw) : false;
|
|
601
|
+
var filteredChildren = Array.isArray(children) ? filterTree(children, kw, nameField, childrenField) : undefined;
|
|
602
|
+
if (matchedSelf || Array.isArray(filteredChildren) && filteredChildren.length > 0) {
|
|
603
|
+
result.push(_objectSpread(_objectSpread({}, item), {}, _defineProperty({}, childrenField, filteredChildren)));
|
|
604
|
+
}
|
|
605
|
+
});
|
|
606
|
+
return result;
|
|
607
|
+
};
|
|
608
|
+
|
|
609
|
+
// 执行搜索
|
|
610
|
+
var executeSearch = function executeSearch() {
|
|
611
|
+
var _searchInputRef$curre2;
|
|
612
|
+
var value = searchInputRef === null || searchInputRef === void 0 || (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 || (_searchInputRef$curre2 = _searchInputRef$curre2.input) === null || _searchInputRef$curre2 === void 0 ? void 0 : _searchInputRef$curre2.value;
|
|
613
|
+
// 执行本地搜索
|
|
614
|
+
if ((dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 || pagination === false) {
|
|
615
|
+
var _tableProps$expandabl;
|
|
616
|
+
var nameField = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name';
|
|
617
|
+
var childrenField = (tableProps === null || tableProps === void 0 || (_tableProps$expandabl = tableProps.expandable) === null || _tableProps$expandabl === void 0 ? void 0 : _tableProps$expandabl.childrenColumnName) || 'children';
|
|
618
|
+
var cacheData = customSelectCache.getNonPagedData(scopeKey, cacheKey);
|
|
619
|
+
if (value) {
|
|
620
|
+
var filteredData = filterTree((dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? dataSource : pagination === false ? cacheData : [], value, nameField, childrenField);
|
|
621
|
+
setDataList(filteredData);
|
|
622
|
+
} else {
|
|
623
|
+
if (pagination === false) {
|
|
624
|
+
if (cacheData) {
|
|
625
|
+
setDataList(cacheData);
|
|
626
|
+
}
|
|
627
|
+
} else {
|
|
628
|
+
setDataList(dataSource);
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
return;
|
|
632
|
+
}
|
|
633
|
+
// 执行远程接口搜索
|
|
634
|
+
setPaginationData(_objectSpread(_objectSpread({}, paginationData), {}, {
|
|
635
|
+
current: 1
|
|
636
|
+
}));
|
|
637
|
+
paginationRef.current = _objectSpread(_objectSpread({}, paginationData), {}, {
|
|
638
|
+
current: 1
|
|
639
|
+
});
|
|
640
|
+
setSearchParams(_objectSpread(_objectSpread({}, searchParams), {}, {
|
|
641
|
+
keyword: value || ''
|
|
642
|
+
}));
|
|
643
|
+
};
|
|
644
|
+
|
|
645
|
+
// 处理回车键搜索
|
|
646
|
+
var handleSearchKeyDown = function handleSearchKeyDown(e) {
|
|
647
|
+
if (e.key === 'Enter') {
|
|
648
|
+
executeSearch();
|
|
649
|
+
}
|
|
650
|
+
};
|
|
651
|
+
var onCancel = function onCancel() {
|
|
652
|
+
setOpen(false);
|
|
653
|
+
onReset();
|
|
654
|
+
};
|
|
655
|
+
var onConfirm = function onConfirm() {
|
|
656
|
+
setOpen(false);
|
|
657
|
+
if (mode === 'multiple') {
|
|
658
|
+
var _selectedRows$map, _selectedRows$map2;
|
|
659
|
+
var names = selectedRows === null || selectedRows === void 0 || (_selectedRows$map = selectedRows.map(function (row) {
|
|
660
|
+
return row[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name'];
|
|
661
|
+
})) === null || _selectedRows$map === void 0 ? void 0 : _selectedRows$map.join(',');
|
|
662
|
+
var values = selectedRows === null || selectedRows === void 0 || (_selectedRows$map2 = selectedRows.map(function (row) {
|
|
663
|
+
return row[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'];
|
|
664
|
+
})) === null || _selectedRows$map2 === void 0 ? void 0 : _selectedRows$map2.join(',');
|
|
665
|
+
var keys = Object.keys(fieldNames || {});
|
|
666
|
+
var callbackData = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
|
|
667
|
+
var obj = {};
|
|
668
|
+
keys.forEach(function (key) {
|
|
669
|
+
obj[fieldNames[key] || key] = item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames[key]];
|
|
670
|
+
});
|
|
671
|
+
return obj;
|
|
672
|
+
});
|
|
673
|
+
onChange === null || onChange === void 0 || onChange(callbackData, names, values);
|
|
674
|
+
} else {
|
|
675
|
+
var selectedItem = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows[0]) || {};
|
|
676
|
+
var _value = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']) || '';
|
|
677
|
+
var _name = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name']) || '';
|
|
678
|
+
onChange === null || onChange === void 0 || onChange(_value, _name, selectedItem);
|
|
679
|
+
if (_value != null && _name != null) {
|
|
680
|
+
setLabelCache(function (prev) {
|
|
681
|
+
var next = new Map(prev);
|
|
682
|
+
next.set(_value, _name);
|
|
683
|
+
return next;
|
|
684
|
+
});
|
|
685
|
+
}
|
|
686
|
+
initValueRef.current = selectedRows;
|
|
687
|
+
}
|
|
688
|
+
var selectedLabel = getSelectedLabel(selectedRows);
|
|
689
|
+
setSelectedLabels(selectedLabel);
|
|
690
|
+
};
|
|
691
|
+
|
|
692
|
+
// 清除已选
|
|
693
|
+
var handleClear = function handleClear(e) {
|
|
694
|
+
var _e$stopPropagation;
|
|
695
|
+
e === null || e === void 0 || (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 || _e$stopPropagation.call(e);
|
|
696
|
+
if (disabled) return;
|
|
697
|
+
setSelectedRows([]);
|
|
698
|
+
setSelectedLabels('');
|
|
699
|
+
initValueRef.current = [];
|
|
700
|
+
if (mode === 'multiple') {
|
|
701
|
+
onChange === null || onChange === void 0 || onChange([]);
|
|
702
|
+
} else {
|
|
703
|
+
onChange === null || onChange === void 0 || onChange('');
|
|
704
|
+
}
|
|
705
|
+
};
|
|
706
|
+
var rowSelection = {
|
|
707
|
+
type: mode === 'multiple' ? 'checkbox' : 'radio',
|
|
708
|
+
selectedRowKeys: (selectedRows && (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 ? selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (row) {
|
|
709
|
+
return row[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'];
|
|
710
|
+
}) : []) || [],
|
|
711
|
+
onChange: function onChange(selectedRowKeys, currentPageSelectedRows) {
|
|
712
|
+
if (mode === 'multiple') {
|
|
713
|
+
var _tableProps$expandabl2;
|
|
714
|
+
// 支持嵌套数据:获取子节点字段名(优先使用Table的expandable.childrenColumnName)
|
|
715
|
+
var childrenField = (tableProps === null || tableProps === void 0 || (_tableProps$expandabl2 = tableProps.expandable) === null || _tableProps$expandabl2 === void 0 ? void 0 : _tableProps$expandabl2.childrenColumnName) || 'children';
|
|
716
|
+
var keyField = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value';
|
|
717
|
+
|
|
718
|
+
// 扁平化当前页的所有 key(包含所有层级的子节点)
|
|
719
|
+
var flattenCurrentPageKeys = function () {
|
|
720
|
+
var keys = [];
|
|
721
|
+
var traverse = function traverse(list) {
|
|
722
|
+
if (!Array.isArray(list) || !list.length) return;
|
|
723
|
+
list.forEach(function (item) {
|
|
724
|
+
keys.push(item[keyField]);
|
|
725
|
+
var children = item[childrenField];
|
|
726
|
+
if (Array.isArray(children) && children.length) traverse(children);
|
|
727
|
+
});
|
|
728
|
+
};
|
|
729
|
+
traverse(dataList);
|
|
730
|
+
return keys;
|
|
731
|
+
}();
|
|
732
|
+
|
|
733
|
+
// 保留不在当前页的已选项(跨页选择)
|
|
734
|
+
var previousSelectedRows = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.filter(function (row) {
|
|
735
|
+
return !flattenCurrentPageKeys.includes(row[keyField]);
|
|
736
|
+
})) || [];
|
|
737
|
+
|
|
738
|
+
// 合并并按 key 去重,确保取消当前页子节点的选择能生效
|
|
739
|
+
var merged = [].concat(_toConsumableArray(previousSelectedRows), _toConsumableArray(currentPageSelectedRows));
|
|
740
|
+
var dedupMap = new Map();
|
|
741
|
+
merged.forEach(function (row) {
|
|
742
|
+
dedupMap.set(row[keyField], row);
|
|
743
|
+
});
|
|
744
|
+
var newSelectedRows = Array.from(dedupMap.values());
|
|
745
|
+
// 更新内部状态用于显示
|
|
746
|
+
setSelectedRows(newSelectedRows);
|
|
747
|
+
} else {
|
|
748
|
+
setSelectedRows(currentPageSelectedRows);
|
|
749
|
+
initValueRef.current = currentPageSelectedRows;
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
};
|
|
753
|
+
|
|
754
|
+
// 处理行点击事件,实现单选模式下的点击取消选中和双击选中并关闭下拉框
|
|
755
|
+
var handleRowClick = function handleRowClick(record, event) {
|
|
756
|
+
// 阻止事件冒泡
|
|
757
|
+
if (event) {
|
|
758
|
+
event.stopPropagation();
|
|
759
|
+
}
|
|
760
|
+
if (mode === 'single') {
|
|
761
|
+
var currentTime = Date.now();
|
|
762
|
+
var recordKey = record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'];
|
|
763
|
+
var recordName = record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name'];
|
|
764
|
+
// 检测双击(300ms内点击同一项)
|
|
765
|
+
var isDoubleClick = (lastClickedRecord === null || lastClickedRecord === void 0 ? void 0 : lastClickedRecord[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']) === recordKey && currentTime - lastClickTime < 300;
|
|
766
|
+
if (isDoubleClick) {
|
|
767
|
+
// 双击:选中并关闭下拉框,直接触发Form的onChange
|
|
768
|
+
setSelectedRows([record]);
|
|
769
|
+
initValueRef.current = [record];
|
|
770
|
+
setOpen(false);
|
|
771
|
+
onChange === null || onChange === void 0 || onChange(recordKey, recordName, record);
|
|
772
|
+
var selectedLabel = getSelectedLabel([record]);
|
|
773
|
+
setSelectedLabels(selectedLabel);
|
|
774
|
+
if (recordKey != null && recordName != null) {
|
|
775
|
+
setLabelCache(function (prev) {
|
|
776
|
+
var next = new Map(prev);
|
|
777
|
+
next.set(recordKey, recordName);
|
|
778
|
+
return next;
|
|
779
|
+
});
|
|
780
|
+
}
|
|
781
|
+
} else {
|
|
782
|
+
var _selectedRows$;
|
|
783
|
+
var _value2 = (selectedRows === null || selectedRows === void 0 || (_selectedRows$ = selectedRows[0]) === null || _selectedRows$ === void 0 ? void 0 : _selectedRows$[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']) || '';
|
|
784
|
+
// 单击逻辑:只更新内部显示状态
|
|
785
|
+
if (_value2 === recordKey) {
|
|
786
|
+
setSelectedRows([]);
|
|
787
|
+
} else {
|
|
788
|
+
setSelectedRows([record]);
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
setLastClickTime(currentTime);
|
|
792
|
+
setLastClickedRecord(record);
|
|
793
|
+
} else {
|
|
794
|
+
// 多选模式下单击整行数据处理方式
|
|
795
|
+
var _recordKey = record[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'];
|
|
796
|
+
var values = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
|
|
797
|
+
return item[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'];
|
|
798
|
+
})) || [];
|
|
799
|
+
var currentRows = _toConsumableArray(selectedRows || []);
|
|
800
|
+
var newRows = [];
|
|
801
|
+
if (values.includes(_recordKey)) {
|
|
802
|
+
newRows = currentRows.filter(function (row) {
|
|
803
|
+
return row[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'] !== _recordKey;
|
|
804
|
+
});
|
|
805
|
+
} else {
|
|
806
|
+
newRows = [].concat(_toConsumableArray(currentRows), [record]);
|
|
807
|
+
setSelectedRows(newRows);
|
|
808
|
+
}
|
|
809
|
+
setSelectedRows(newRows);
|
|
810
|
+
}
|
|
811
|
+
};
|
|
812
|
+
|
|
813
|
+
// 修改重置逻辑
|
|
814
|
+
var onReset = function onReset() {
|
|
815
|
+
setTimeout(function () {
|
|
816
|
+
setSelectedRows(initValueRef.current);
|
|
817
|
+
setSearchParams({
|
|
818
|
+
keyword: ''
|
|
819
|
+
});
|
|
820
|
+
}, 200);
|
|
821
|
+
};
|
|
822
|
+
|
|
823
|
+
/**
|
|
824
|
+
* 一键清除所有选中项
|
|
825
|
+
*/
|
|
826
|
+
var onDeleteAll = function onDeleteAll() {
|
|
827
|
+
setSelectedRows([]);
|
|
828
|
+
};
|
|
829
|
+
|
|
830
|
+
/**
|
|
831
|
+
* 删除单个
|
|
832
|
+
*/
|
|
833
|
+
var onDeleteItem = function onDeleteItem(value) {
|
|
834
|
+
setSelectedRows(selectedRows.filter(function (row) {
|
|
835
|
+
return row[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value'] !== value;
|
|
836
|
+
}));
|
|
837
|
+
};
|
|
838
|
+
|
|
839
|
+
/**翻页处理 */
|
|
840
|
+
var handlePageChange = function handlePageChange(page, pageSize) {
|
|
841
|
+
var newPaginationData = _objectSpread(_objectSpread({}, paginationData), {}, {
|
|
842
|
+
current: page,
|
|
843
|
+
pageSize: pageSize
|
|
844
|
+
});
|
|
845
|
+
paginationRef.current = newPaginationData;
|
|
846
|
+
setPaginationData(newPaginationData);
|
|
847
|
+
// 直接调用getTableList,避免useEffect循环
|
|
848
|
+
if (!dataSource.length && requestProps.url) {
|
|
849
|
+
getTableList();
|
|
850
|
+
}
|
|
851
|
+
};
|
|
852
|
+
|
|
853
|
+
// 新增:双击时在 needInput=true 下打开下拉框
|
|
854
|
+
var handleSelectorDoubleClick = function handleSelectorDoubleClick() {
|
|
855
|
+
if (disabled) return;
|
|
856
|
+
if (!needInput) return;
|
|
857
|
+
var placement = calculateDropdownPlacement();
|
|
858
|
+
setDropdownPlacement(placement);
|
|
859
|
+
setIsEditing(false);
|
|
860
|
+
setOpen(true);
|
|
861
|
+
if (showSearch) {
|
|
862
|
+
setTimeout(function () {
|
|
863
|
+
var _searchInputRef$curre3, _searchInputRef$curre4;
|
|
864
|
+
(_searchInputRef$curre3 = searchInputRef.current) === null || _searchInputRef$curre3 === void 0 || (_searchInputRef$curre4 = _searchInputRef$curre3.focus) === null || _searchInputRef$curre4 === void 0 || _searchInputRef$curre4.call(_searchInputRef$curre3);
|
|
865
|
+
}, 100);
|
|
866
|
+
}
|
|
867
|
+
};
|
|
868
|
+
|
|
869
|
+
// 新增:输入模式提交(回车或失焦)
|
|
870
|
+
var commitInputValue = function commitInputValue() {
|
|
871
|
+
var text = (inputEditValue || '').trim();
|
|
872
|
+
if (!text) {
|
|
873
|
+
// 清空
|
|
874
|
+
setSelectedRows(initValueRef.current);
|
|
875
|
+
setIsEditing(false);
|
|
876
|
+
return;
|
|
877
|
+
}
|
|
878
|
+
var record = _defineProperty(_defineProperty({}, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name', text), (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value', text);
|
|
879
|
+
if (mode === 'single') {
|
|
880
|
+
//单选,输入的值替换选中的值
|
|
881
|
+
setLabelCache(function (prev) {
|
|
882
|
+
var next = new Map(prev);
|
|
883
|
+
next.set(text, text);
|
|
884
|
+
return next;
|
|
885
|
+
});
|
|
886
|
+
setSelectedLabels(text);
|
|
887
|
+
onChange === null || onChange === void 0 || onChange(text, text, record);
|
|
888
|
+
} else {
|
|
889
|
+
var _selected$map, _selected$map2;
|
|
890
|
+
// 多选,输入的值push进去
|
|
891
|
+
var selected = [].concat(_toConsumableArray(selectedRows), [record]);
|
|
892
|
+
var keys = Object.keys(fieldNames);
|
|
893
|
+
var callbackData = selected === null || selected === void 0 ? void 0 : selected.map(function (item) {
|
|
894
|
+
var obj = {};
|
|
895
|
+
keys.forEach(function (key) {
|
|
896
|
+
obj[fieldNames[key] || key] = item[fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames[key]];
|
|
897
|
+
});
|
|
898
|
+
return obj;
|
|
899
|
+
});
|
|
900
|
+
var labels = getSelectedLabel(selected);
|
|
901
|
+
var names = (_selected$map = selected.map(function (item) {
|
|
902
|
+
return item[fieldNames.name || 'name'];
|
|
903
|
+
})) === null || _selected$map === void 0 ? void 0 : _selected$map.join(',');
|
|
904
|
+
var values = (_selected$map2 = selected.map(function (item) {
|
|
905
|
+
return item[fieldNames.value || 'value'];
|
|
906
|
+
})) === null || _selected$map2 === void 0 ? void 0 : _selected$map2.join(',');
|
|
907
|
+
setSelectedLabels(labels);
|
|
908
|
+
setSelectedRows(selected);
|
|
909
|
+
onChange === null || onChange === void 0 || onChange(callbackData, names, values);
|
|
910
|
+
}
|
|
911
|
+
setIsEditing(false);
|
|
912
|
+
setInputEditValue('');
|
|
913
|
+
};
|
|
914
|
+
var renderSelectPopup = function renderSelectPopup() {
|
|
915
|
+
if (open || animationState !== 'exited') {
|
|
916
|
+
var _selectedRows$length;
|
|
917
|
+
return /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs("div", {
|
|
918
|
+
ref: dropdownRef,
|
|
919
|
+
onClick: function onClick(e) {
|
|
920
|
+
return e.stopPropagation();
|
|
921
|
+
},
|
|
922
|
+
className: "th-selectDropdown th-".concat(dropdownPlacement.vertical, " th-").concat(dropdownPlacement.horizontal, " th-").concat(animationState),
|
|
923
|
+
style: {
|
|
924
|
+
width: "".concat(width, "px"),
|
|
925
|
+
height: "".concat(height, "px"),
|
|
926
|
+
position: 'fixed',
|
|
927
|
+
// 改为 fixed 定位
|
|
928
|
+
top: "".concat(dropdownPosition.top, "px"),
|
|
929
|
+
left: "".concat(dropdownPosition.left, "px"),
|
|
930
|
+
zIndex: 999
|
|
931
|
+
},
|
|
932
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
933
|
+
className: "th-dropdownContainer",
|
|
934
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
935
|
+
className: "th-dropdownContent ".concat(mode === 'single' || !showRightPanel ? 'th-singleDropdownContent' : ''),
|
|
936
|
+
children: [showSearch && /*#__PURE__*/_jsxs("div", {
|
|
937
|
+
className: "th-searchContainerWrapper",
|
|
938
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
939
|
+
className: "th-searchContainer",
|
|
940
|
+
children: [/*#__PURE__*/_jsx(Input, {
|
|
941
|
+
ref: searchInputRef,
|
|
942
|
+
defaultValue: (searchParams === null || searchParams === void 0 ? void 0 : searchParams.keyword) || '',
|
|
943
|
+
className: "th-searchInput",
|
|
944
|
+
placeholder: "\u5173\u952E\u5B57\u67E5\u8BE2",
|
|
945
|
+
onKeyDown: handleSearchKeyDown
|
|
946
|
+
}), /*#__PURE__*/_jsx("img", {
|
|
947
|
+
src: SearchSuffix,
|
|
948
|
+
alt: "\u641C\u7D22",
|
|
949
|
+
className: "th-searchSuffix",
|
|
950
|
+
onClick: executeSearch,
|
|
951
|
+
style: {
|
|
952
|
+
cursor: 'pointer'
|
|
953
|
+
}
|
|
954
|
+
})]
|
|
955
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
956
|
+
ref: searchBarRef,
|
|
957
|
+
children: searchBar
|
|
958
|
+
})]
|
|
959
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
960
|
+
className: "th-optionList ".concat(!showSearch ? 'th-noSearchOptionList' : ''),
|
|
961
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
962
|
+
className: "th-tableContainer ".concat(pagination === false ? 'th-noPaginationTableContainer' : ''),
|
|
963
|
+
style: {
|
|
964
|
+
height: "calc(100% - ".concat(pagination !== false ? '30px' : '0px', " - ").concat(searchBarHeight, "px)")
|
|
965
|
+
},
|
|
966
|
+
children: /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({
|
|
967
|
+
columns: columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
|
|
968
|
+
var _col$ellipsis;
|
|
969
|
+
return _objectSpread(_objectSpread({}, col), {}, {
|
|
970
|
+
ellipsis: (_col$ellipsis = col === null || col === void 0 ? void 0 : col.ellipsis) !== null && _col$ellipsis !== void 0 ? _col$ellipsis : true //开启单元格内容省略号
|
|
971
|
+
});
|
|
972
|
+
}),
|
|
973
|
+
dataSource: dataList,
|
|
974
|
+
sticky: {
|
|
975
|
+
offsetHeader: 0
|
|
976
|
+
},
|
|
977
|
+
size: "small",
|
|
978
|
+
rowKey: (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value',
|
|
979
|
+
rowSelection: rowSelection,
|
|
980
|
+
loading: loading
|
|
981
|
+
}, restProps), {}, {
|
|
982
|
+
onRow: function onRow(record) {
|
|
983
|
+
return {
|
|
984
|
+
onClick: function onClick(event) {
|
|
985
|
+
return handleRowClick(record, event);
|
|
986
|
+
}
|
|
987
|
+
};
|
|
988
|
+
},
|
|
989
|
+
pagination: false,
|
|
990
|
+
expandable: {
|
|
991
|
+
defaultExpandAllRows: true
|
|
992
|
+
}
|
|
993
|
+
}))
|
|
994
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
995
|
+
className: "th-paginationContainer",
|
|
996
|
+
children: pagination !== false && /*#__PURE__*/_jsx(Pagination, _objectSpread({
|
|
997
|
+
showTotal: function showTotal(total, range) {
|
|
998
|
+
return "\u5171 ".concat(total, " \u6761");
|
|
999
|
+
},
|
|
1000
|
+
size: "small",
|
|
1001
|
+
showSizeChanger: false,
|
|
1002
|
+
onChange: handlePageChange
|
|
1003
|
+
}, paginationData))
|
|
1004
|
+
})]
|
|
1005
|
+
})]
|
|
1006
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
1007
|
+
className: "th-selectedWrapper ".concat(pagination === false ? 'th-withoutPagination' : '', " ").concat(mode === 'single' || !showRightPanel ? 'th-singleSelectedWrapper' : ''),
|
|
1008
|
+
children: [dataList.length > 0 && /*#__PURE__*/_jsxs("div", {
|
|
1009
|
+
className: "th-selectedHeader",
|
|
1010
|
+
children: [/*#__PURE__*/_jsxs("span", {
|
|
1011
|
+
children: ["\u5DF2\u9009\u62E9\uFF08", (_selectedRows$length = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) !== null && _selectedRows$length !== void 0 ? _selectedRows$length : 0, "\uFF09"]
|
|
1012
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
1013
|
+
onClick: onDeleteAll,
|
|
1014
|
+
className: "th-clearButton",
|
|
1015
|
+
type: "link",
|
|
1016
|
+
style: {
|
|
1017
|
+
padding: 0
|
|
1018
|
+
},
|
|
1019
|
+
children: "\u5168\u90E8\u5220\u9664"
|
|
1020
|
+
})]
|
|
1021
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
1022
|
+
className: "th-selectedItemContainer",
|
|
1023
|
+
children: (dataList === null || dataList === void 0 ? void 0 : dataList.length) > 0 && selectedRows && selectedRows.length > 0 && selectedRows.map(function (item) {
|
|
1024
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
1025
|
+
className: "th-selectedItem",
|
|
1026
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
1027
|
+
style: {
|
|
1028
|
+
maxWidth: '100%',
|
|
1029
|
+
overflow: 'hidden',
|
|
1030
|
+
textOverflow: 'ellipsis',
|
|
1031
|
+
whiteSpace: 'nowrap',
|
|
1032
|
+
minWidth: 0 // 如果外层是 flex 布局,避免无法收缩导致不生效
|
|
1033
|
+
},
|
|
1034
|
+
children: item[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.name) || 'name']
|
|
1035
|
+
}), /*#__PURE__*/_jsx("img", {
|
|
1036
|
+
src: DeleteIcon,
|
|
1037
|
+
alt: "\u5220\u9664",
|
|
1038
|
+
className: "th-deleteIcon",
|
|
1039
|
+
onClick: function onClick() {
|
|
1040
|
+
return onDeleteItem(item[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']);
|
|
1041
|
+
}
|
|
1042
|
+
})]
|
|
1043
|
+
}, item[(fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value']);
|
|
1044
|
+
})
|
|
1045
|
+
})]
|
|
1046
|
+
}), /*#__PURE__*/_jsx("img", {
|
|
1047
|
+
src: CloseIcon,
|
|
1048
|
+
alt: "\u5173\u95ED",
|
|
1049
|
+
className: "th-closeIcon",
|
|
1050
|
+
onClick: onCancel
|
|
1051
|
+
})]
|
|
1052
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
1053
|
+
className: "th-buttonGroup",
|
|
1054
|
+
children: [dataList.length > 0 && /*#__PURE__*/_jsx(Button, {
|
|
1055
|
+
onClick: onConfirm,
|
|
1056
|
+
className: "th-confirmButton",
|
|
1057
|
+
type: "primary",
|
|
1058
|
+
children: "\u786E\u8BA4"
|
|
1059
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
1060
|
+
onClick: onCancel,
|
|
1061
|
+
className: "th-cancelButton",
|
|
1062
|
+
children: "\u53D6\u6D88"
|
|
1063
|
+
})]
|
|
1064
|
+
})]
|
|
1065
|
+
}), document.body);
|
|
1066
|
+
}
|
|
1067
|
+
};
|
|
1068
|
+
useEffect(function () {
|
|
1069
|
+
setTimeout(function () {
|
|
1070
|
+
if (selectValueRef.current && selectedLabels) {
|
|
1071
|
+
setIsSelectValueOverflow(selectValueRef.current.scrollWidth > selectValueRef.current.clientWidth);
|
|
1072
|
+
}
|
|
1073
|
+
return false;
|
|
1074
|
+
}, 800);
|
|
1075
|
+
}, [selectValueRef.current, selectedLabels]);
|
|
1076
|
+
return /*#__PURE__*/_jsx("div", {
|
|
1077
|
+
className: "th-customSelect ".concat(className || ''),
|
|
1078
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
1079
|
+
className: "th-selectInputContainer ".concat(direction === 'vertical' ? 'th-vertical' : ''),
|
|
1080
|
+
children: [label && /*#__PURE__*/_jsx("div", {
|
|
1081
|
+
className: "th-selectLabel",
|
|
1082
|
+
style: labelStyle,
|
|
1083
|
+
children: label
|
|
1084
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
1085
|
+
ref: selectRef,
|
|
1086
|
+
className: "custom-select-input th-selectInput ".concat(open ? 'th-focused' : '', " ").concat(disabled ? 'th-disabled' : ''),
|
|
1087
|
+
onClick: handleSelectorClick,
|
|
1088
|
+
onDoubleClick: needInput ? handleSelectorDoubleClick : function () {},
|
|
1089
|
+
onMouseEnter: function onMouseEnter() {
|
|
1090
|
+
return setHovered(true);
|
|
1091
|
+
},
|
|
1092
|
+
onMouseLeave: function onMouseLeave() {
|
|
1093
|
+
return setHovered(false);
|
|
1094
|
+
},
|
|
1095
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
1096
|
+
className: "th-inputContent",
|
|
1097
|
+
children: [needInput && isEditing && mode === 'single' ? /*#__PURE__*/_jsx(_Fragment, {}) : /*#__PURE__*/_jsx("div", {
|
|
1098
|
+
ref: selectValueRef,
|
|
1099
|
+
title: isSelectValueOverflow ? selectedLabels || selectPlaceholder : '',
|
|
1100
|
+
className: "th-selectValue ".concat(!selectedLabels ? 'th-placeholder' : '', " ").concat(needInput && isEditing ? 'th-valueEditing' : ''),
|
|
1101
|
+
children: selectedLabels || selectPlaceholder
|
|
1102
|
+
}), needInput && isEditing && /*#__PURE__*/_jsx(Input, {
|
|
1103
|
+
ref: inputEditRef,
|
|
1104
|
+
value: inputEditValue,
|
|
1105
|
+
onChange: function onChange(e) {
|
|
1106
|
+
return setInputEditValue(e.target.value);
|
|
1107
|
+
},
|
|
1108
|
+
onPressEnter: commitInputValue,
|
|
1109
|
+
onBlur: commitInputValue,
|
|
1110
|
+
className: "th-customInput",
|
|
1111
|
+
size: "small",
|
|
1112
|
+
bordered: false,
|
|
1113
|
+
placeholder: "\u8BF7\u8F93\u5165\uFF08\u53CC\u51FB\u53EF\u9009\u62E9\uFF09"
|
|
1114
|
+
})]
|
|
1115
|
+
}), showClear && hovered && (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) > 0 && !disabled ? /*#__PURE__*/_jsx(CloseCircleFilled, {
|
|
1116
|
+
className: "th-clearIcon",
|
|
1117
|
+
onClick: handleClear
|
|
1118
|
+
}) : /*#__PURE__*/_jsx(DownOutlined, {
|
|
1119
|
+
className: "th-selectArrow ".concat(open ? 'th-open' : '')
|
|
1120
|
+
})]
|
|
1121
|
+
}), renderSelectPopup()]
|
|
1122
|
+
})
|
|
1123
|
+
});
|
|
1124
|
+
};
|
|
1125
|
+
export default /*#__PURE__*/memo(ThSelect);
|