@udi-organization/udi-package 1.0.36 → 1.0.41
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 +65 -90
- package/dist/index.cjs.css +1 -0
- package/dist/index.cjs.js +2458 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.esm.css +1 -0
- package/dist/index.esm.js +2453 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +37 -63
- package/dist/udi-package.js +0 -2
- package/dist/udi-package.js.LICENSE.txt +0 -1
|
@@ -0,0 +1,2453 @@
|
|
|
1
|
+
import React, { useState, useCallback, useMemo, useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
function _arrayLikeToArray(r, a) {
|
|
5
|
+
(null == a || a > r.length) && (a = r.length);
|
|
6
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
7
|
+
return n;
|
|
8
|
+
}
|
|
9
|
+
function _arrayWithHoles(r) {
|
|
10
|
+
if (Array.isArray(r)) return r;
|
|
11
|
+
}
|
|
12
|
+
function _arrayWithoutHoles(r) {
|
|
13
|
+
if (Array.isArray(r)) return _arrayLikeToArray(r);
|
|
14
|
+
}
|
|
15
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
16
|
+
try {
|
|
17
|
+
var i = n[a](c),
|
|
18
|
+
u = i.value;
|
|
19
|
+
} catch (n) {
|
|
20
|
+
return void e(n);
|
|
21
|
+
}
|
|
22
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
23
|
+
}
|
|
24
|
+
function _asyncToGenerator(n) {
|
|
25
|
+
return function () {
|
|
26
|
+
var t = this,
|
|
27
|
+
e = arguments;
|
|
28
|
+
return new Promise(function (r, o) {
|
|
29
|
+
var a = n.apply(t, e);
|
|
30
|
+
function _next(n) {
|
|
31
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
32
|
+
}
|
|
33
|
+
function _throw(n) {
|
|
34
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
35
|
+
}
|
|
36
|
+
_next(void 0);
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function _defineProperty$1(e, r, t) {
|
|
41
|
+
return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
|
|
42
|
+
value: t,
|
|
43
|
+
enumerable: true,
|
|
44
|
+
configurable: true,
|
|
45
|
+
writable: true
|
|
46
|
+
}) : e[r] = t, e;
|
|
47
|
+
}
|
|
48
|
+
function _iterableToArray(r) {
|
|
49
|
+
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
|
|
50
|
+
}
|
|
51
|
+
function _iterableToArrayLimit(r, l) {
|
|
52
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
53
|
+
if (null != t) {
|
|
54
|
+
var e,
|
|
55
|
+
n,
|
|
56
|
+
i,
|
|
57
|
+
u,
|
|
58
|
+
a = [],
|
|
59
|
+
f = true,
|
|
60
|
+
o = false;
|
|
61
|
+
try {
|
|
62
|
+
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
63
|
+
} catch (r) {
|
|
64
|
+
o = true, n = r;
|
|
65
|
+
} finally {
|
|
66
|
+
try {
|
|
67
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
68
|
+
} finally {
|
|
69
|
+
if (o) throw n;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return a;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
function _nonIterableRest() {
|
|
76
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
77
|
+
}
|
|
78
|
+
function _nonIterableSpread() {
|
|
79
|
+
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
80
|
+
}
|
|
81
|
+
function ownKeys$1(e, r) {
|
|
82
|
+
var t = Object.keys(e);
|
|
83
|
+
if (Object.getOwnPropertySymbols) {
|
|
84
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
85
|
+
r && (o = o.filter(function (r) {
|
|
86
|
+
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
87
|
+
})), t.push.apply(t, o);
|
|
88
|
+
}
|
|
89
|
+
return t;
|
|
90
|
+
}
|
|
91
|
+
function _objectSpread2(e) {
|
|
92
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
93
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
94
|
+
r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) {
|
|
95
|
+
_defineProperty$1(e, r, t[r]);
|
|
96
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
|
|
97
|
+
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
return e;
|
|
101
|
+
}
|
|
102
|
+
function _objectWithoutProperties$1(e, t) {
|
|
103
|
+
if (null == e) return {};
|
|
104
|
+
var o,
|
|
105
|
+
r,
|
|
106
|
+
i = _objectWithoutPropertiesLoose$1(e, t);
|
|
107
|
+
if (Object.getOwnPropertySymbols) {
|
|
108
|
+
var n = Object.getOwnPropertySymbols(e);
|
|
109
|
+
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
110
|
+
}
|
|
111
|
+
return i;
|
|
112
|
+
}
|
|
113
|
+
function _objectWithoutPropertiesLoose$1(r, e) {
|
|
114
|
+
if (null == r) return {};
|
|
115
|
+
var t = {};
|
|
116
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
117
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
118
|
+
t[n] = r[n];
|
|
119
|
+
}
|
|
120
|
+
return t;
|
|
121
|
+
}
|
|
122
|
+
function _regenerator() {
|
|
123
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
124
|
+
var e,
|
|
125
|
+
t,
|
|
126
|
+
r = "function" == typeof Symbol ? Symbol : {},
|
|
127
|
+
n = r.iterator || "@@iterator",
|
|
128
|
+
o = r.toStringTag || "@@toStringTag";
|
|
129
|
+
function i(r, n, o, i) {
|
|
130
|
+
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
131
|
+
u = Object.create(c.prototype);
|
|
132
|
+
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
133
|
+
var i,
|
|
134
|
+
c,
|
|
135
|
+
u,
|
|
136
|
+
f = 0,
|
|
137
|
+
p = o || [],
|
|
138
|
+
y = false,
|
|
139
|
+
G = {
|
|
140
|
+
p: 0,
|
|
141
|
+
n: 0,
|
|
142
|
+
v: e,
|
|
143
|
+
a: d,
|
|
144
|
+
f: d.bind(e, 4),
|
|
145
|
+
d: function (t, r) {
|
|
146
|
+
return i = t, c = 0, u = e, G.n = r, a;
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
function d(r, n) {
|
|
150
|
+
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
151
|
+
var o,
|
|
152
|
+
i = p[t],
|
|
153
|
+
d = G.p,
|
|
154
|
+
l = i[2];
|
|
155
|
+
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
156
|
+
}
|
|
157
|
+
if (o || r > 1) return a;
|
|
158
|
+
throw y = true, n;
|
|
159
|
+
}
|
|
160
|
+
return function (o, p, l) {
|
|
161
|
+
if (f > 1) throw TypeError("Generator is already running");
|
|
162
|
+
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
163
|
+
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
164
|
+
try {
|
|
165
|
+
if (f = 2, i) {
|
|
166
|
+
if (c || (o = "next"), t = i[o]) {
|
|
167
|
+
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
168
|
+
if (!t.done) return t;
|
|
169
|
+
u = t.value, c < 2 && (c = 0);
|
|
170
|
+
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
171
|
+
i = e;
|
|
172
|
+
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
173
|
+
} catch (t) {
|
|
174
|
+
i = e, c = 1, u = t;
|
|
175
|
+
} finally {
|
|
176
|
+
f = 1;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
return {
|
|
180
|
+
value: t,
|
|
181
|
+
done: y
|
|
182
|
+
};
|
|
183
|
+
};
|
|
184
|
+
}(r, o, i), true), u;
|
|
185
|
+
}
|
|
186
|
+
var a = {};
|
|
187
|
+
function Generator() {}
|
|
188
|
+
function GeneratorFunction() {}
|
|
189
|
+
function GeneratorFunctionPrototype() {}
|
|
190
|
+
t = Object.getPrototypeOf;
|
|
191
|
+
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
192
|
+
return this;
|
|
193
|
+
}), t),
|
|
194
|
+
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
195
|
+
function f(e) {
|
|
196
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
197
|
+
}
|
|
198
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
199
|
+
return this;
|
|
200
|
+
}), _regeneratorDefine(u, "toString", function () {
|
|
201
|
+
return "[object Generator]";
|
|
202
|
+
}), (_regenerator = function () {
|
|
203
|
+
return {
|
|
204
|
+
w: i,
|
|
205
|
+
m: f
|
|
206
|
+
};
|
|
207
|
+
})();
|
|
208
|
+
}
|
|
209
|
+
function _regeneratorDefine(e, r, n, t) {
|
|
210
|
+
var i = Object.defineProperty;
|
|
211
|
+
try {
|
|
212
|
+
i({}, "", {});
|
|
213
|
+
} catch (e) {
|
|
214
|
+
i = 0;
|
|
215
|
+
}
|
|
216
|
+
_regeneratorDefine = function (e, r, n, t) {
|
|
217
|
+
function o(r, n) {
|
|
218
|
+
_regeneratorDefine(e, r, function (e) {
|
|
219
|
+
return this._invoke(r, n, e);
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
r ? i ? i(e, r, {
|
|
223
|
+
value: n,
|
|
224
|
+
enumerable: !t,
|
|
225
|
+
configurable: !t,
|
|
226
|
+
writable: !t
|
|
227
|
+
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
228
|
+
}, _regeneratorDefine(e, r, n, t);
|
|
229
|
+
}
|
|
230
|
+
function _slicedToArray(r, e) {
|
|
231
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
232
|
+
}
|
|
233
|
+
function _toConsumableArray(r) {
|
|
234
|
+
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
|
|
235
|
+
}
|
|
236
|
+
function _toPrimitive$1(t, r) {
|
|
237
|
+
if ("object" != typeof t || !t) return t;
|
|
238
|
+
var e = t[Symbol.toPrimitive];
|
|
239
|
+
if (void 0 !== e) {
|
|
240
|
+
var i = e.call(t, r);
|
|
241
|
+
if ("object" != typeof i) return i;
|
|
242
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
243
|
+
}
|
|
244
|
+
return ("string" === r ? String : Number)(t);
|
|
245
|
+
}
|
|
246
|
+
function _toPropertyKey$1(t) {
|
|
247
|
+
var i = _toPrimitive$1(t, "string");
|
|
248
|
+
return "symbol" == typeof i ? i : i + "";
|
|
249
|
+
}
|
|
250
|
+
function _unsupportedIterableToArray(r, a) {
|
|
251
|
+
if (r) {
|
|
252
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
253
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
254
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
var _excluded$1 = ["children", "onClick", "variant", "disabled", "className"];
|
|
259
|
+
var Button = function Button(_ref) {
|
|
260
|
+
var children = _ref.children,
|
|
261
|
+
onClick = _ref.onClick,
|
|
262
|
+
_ref$variant = _ref.variant,
|
|
263
|
+
variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
|
|
264
|
+
_ref$disabled = _ref.disabled,
|
|
265
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
266
|
+
_ref$className = _ref.className,
|
|
267
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
268
|
+
props = _objectWithoutProperties$1(_ref, _excluded$1);
|
|
269
|
+
var baseStyles = {
|
|
270
|
+
padding: '10px 20px',
|
|
271
|
+
borderRadius: '6px',
|
|
272
|
+
border: 'none',
|
|
273
|
+
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
274
|
+
fontSize: '14px',
|
|
275
|
+
fontWeight: '500',
|
|
276
|
+
opacity: disabled ? 0.6 : 1,
|
|
277
|
+
transition: 'all 0.2s ease'
|
|
278
|
+
};
|
|
279
|
+
var variantStyles = {
|
|
280
|
+
primary: {
|
|
281
|
+
backgroundColor: '#007bff',
|
|
282
|
+
color: 'white'
|
|
283
|
+
},
|
|
284
|
+
secondary: {
|
|
285
|
+
backgroundColor: '#6c757d',
|
|
286
|
+
color: 'white'
|
|
287
|
+
},
|
|
288
|
+
success: {
|
|
289
|
+
backgroundColor: '#28a745',
|
|
290
|
+
color: 'white'
|
|
291
|
+
},
|
|
292
|
+
danger: {
|
|
293
|
+
backgroundColor: '#dc3545',
|
|
294
|
+
color: 'white'
|
|
295
|
+
}
|
|
296
|
+
};
|
|
297
|
+
var buttonStyle = _objectSpread2(_objectSpread2({}, baseStyles), variantStyles[variant]);
|
|
298
|
+
return /*#__PURE__*/jsx("button", _objectSpread2(_objectSpread2({
|
|
299
|
+
style: buttonStyle,
|
|
300
|
+
onClick: onClick,
|
|
301
|
+
disabled: disabled,
|
|
302
|
+
className: className
|
|
303
|
+
}, props), {}, {
|
|
304
|
+
children: children
|
|
305
|
+
}));
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
var Pagination = function Pagination(_ref) {
|
|
309
|
+
var currentPage = _ref.currentPage,
|
|
310
|
+
totalPages = _ref.totalPages,
|
|
311
|
+
currentPageSize = _ref.currentPageSize,
|
|
312
|
+
onPageChange = _ref.onPageChange,
|
|
313
|
+
onPageSizeChange = _ref.onPageSizeChange,
|
|
314
|
+
isMobile = _ref.isMobile,
|
|
315
|
+
onDropdownFocus = _ref.onDropdownFocus,
|
|
316
|
+
onDropdownBlur = _ref.onDropdownBlur,
|
|
317
|
+
onMouseEnter = _ref.onMouseEnter;
|
|
318
|
+
return /*#__PURE__*/jsxs("div", {
|
|
319
|
+
className: "udi-table-pagination",
|
|
320
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
321
|
+
className: "pagination-info",
|
|
322
|
+
children: /*#__PURE__*/jsx("div", {
|
|
323
|
+
className: "page-size-selector",
|
|
324
|
+
children: /*#__PURE__*/jsx("div", {
|
|
325
|
+
className: "page-size-container",
|
|
326
|
+
onMouseEnter: onMouseEnter,
|
|
327
|
+
children: /*#__PURE__*/jsxs("select", {
|
|
328
|
+
id: "pageSize",
|
|
329
|
+
value: currentPageSize,
|
|
330
|
+
onChange: function onChange(e) {
|
|
331
|
+
return onPageSizeChange(Number(e.target.value));
|
|
332
|
+
},
|
|
333
|
+
onFocus: onDropdownFocus,
|
|
334
|
+
onBlur: onDropdownBlur,
|
|
335
|
+
className: "page-size-select",
|
|
336
|
+
children: [/*#__PURE__*/jsx("option", {
|
|
337
|
+
value: 5,
|
|
338
|
+
children: "5"
|
|
339
|
+
}), /*#__PURE__*/jsx("option", {
|
|
340
|
+
value: 10,
|
|
341
|
+
children: "10"
|
|
342
|
+
}), /*#__PURE__*/jsx("option", {
|
|
343
|
+
value: 20,
|
|
344
|
+
children: "20"
|
|
345
|
+
}), /*#__PURE__*/jsx("option", {
|
|
346
|
+
value: 50,
|
|
347
|
+
children: "50"
|
|
348
|
+
}), /*#__PURE__*/jsx("option", {
|
|
349
|
+
value: 100,
|
|
350
|
+
children: "100"
|
|
351
|
+
})]
|
|
352
|
+
})
|
|
353
|
+
})
|
|
354
|
+
})
|
|
355
|
+
}), totalPages > 1 && /*#__PURE__*/jsx("div", {
|
|
356
|
+
className: "pagination-controls",
|
|
357
|
+
children: isMobile ? /*#__PURE__*/jsx(MobilePaginationControls, {
|
|
358
|
+
currentPage: currentPage,
|
|
359
|
+
totalPages: totalPages,
|
|
360
|
+
onPageChange: onPageChange
|
|
361
|
+
}) : /*#__PURE__*/jsx(DesktopPaginationControls, {
|
|
362
|
+
currentPage: currentPage,
|
|
363
|
+
totalPages: totalPages,
|
|
364
|
+
onPageChange: onPageChange,
|
|
365
|
+
tr: tr
|
|
366
|
+
})
|
|
367
|
+
})]
|
|
368
|
+
});
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
/**
|
|
372
|
+
* 手機版分頁控制
|
|
373
|
+
*/
|
|
374
|
+
var MobilePaginationControls = function MobilePaginationControls(_ref2) {
|
|
375
|
+
var currentPage = _ref2.currentPage,
|
|
376
|
+
totalPages = _ref2.totalPages,
|
|
377
|
+
onPageChange = _ref2.onPageChange;
|
|
378
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
379
|
+
children: [/*#__PURE__*/jsx("button", {
|
|
380
|
+
onClick: function onClick() {
|
|
381
|
+
return onPageChange(currentPage - 1);
|
|
382
|
+
},
|
|
383
|
+
disabled: currentPage === 0,
|
|
384
|
+
className: "pagination-button",
|
|
385
|
+
children: "\u2039"
|
|
386
|
+
}), /*#__PURE__*/jsxs("span", {
|
|
387
|
+
className: "current-page-mobile",
|
|
388
|
+
children: [currentPage + 1, " / ", totalPages]
|
|
389
|
+
}), /*#__PURE__*/jsx("button", {
|
|
390
|
+
onClick: function onClick() {
|
|
391
|
+
return onPageChange(currentPage + 1);
|
|
392
|
+
},
|
|
393
|
+
disabled: currentPage + 1 === totalPages,
|
|
394
|
+
className: "pagination-button",
|
|
395
|
+
children: "\u203A"
|
|
396
|
+
})]
|
|
397
|
+
});
|
|
398
|
+
};
|
|
399
|
+
|
|
400
|
+
/**
|
|
401
|
+
* 桌面版分頁控制
|
|
402
|
+
*/
|
|
403
|
+
var DesktopPaginationControls = function DesktopPaginationControls(_ref3) {
|
|
404
|
+
var currentPage = _ref3.currentPage,
|
|
405
|
+
totalPages = _ref3.totalPages,
|
|
406
|
+
onPageChange = _ref3.onPageChange,
|
|
407
|
+
tr = _ref3.tr;
|
|
408
|
+
// 生成頁碼按鈕
|
|
409
|
+
var renderPageButtons = function renderPageButtons() {
|
|
410
|
+
var pages = [];
|
|
411
|
+
|
|
412
|
+
// 將 currentPage(0-based)轉換為頁碼(1-based)
|
|
413
|
+
var currentPageNum = currentPage + 1;
|
|
414
|
+
|
|
415
|
+
// 計算要顯示的起始頁碼
|
|
416
|
+
var startPage;
|
|
417
|
+
if (totalPages <= 3) {
|
|
418
|
+
// 如果總頁數不超過3頁,從第1頁開始
|
|
419
|
+
startPage = 1;
|
|
420
|
+
} else if (currentPageNum === 1) {
|
|
421
|
+
// 如果在第1頁,顯示 1, 2, 3
|
|
422
|
+
startPage = 1;
|
|
423
|
+
} else if (currentPageNum === totalPages) {
|
|
424
|
+
// 如果在最後一頁,顯示最後3頁
|
|
425
|
+
startPage = totalPages - 2;
|
|
426
|
+
} else {
|
|
427
|
+
// 中間頁面,以當前頁為中心
|
|
428
|
+
startPage = currentPageNum - 1;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
// 確保 startPage 不小於 1
|
|
432
|
+
startPage = Math.max(1, startPage);
|
|
433
|
+
|
|
434
|
+
// 生成3個頁碼按鈕
|
|
435
|
+
var _loop = function _loop() {
|
|
436
|
+
var pageNum = startPage + i;
|
|
437
|
+
var isValidPage = pageNum <= totalPages;
|
|
438
|
+
var isActive = isValidPage && currentPageNum === pageNum;
|
|
439
|
+
pages.push(/*#__PURE__*/jsx("button", {
|
|
440
|
+
onClick: function onClick() {
|
|
441
|
+
return isValidPage ? onPageChange(pageNum - 1) : null;
|
|
442
|
+
},
|
|
443
|
+
disabled: !isValidPage,
|
|
444
|
+
className: "pagination-button ".concat(isActive ? "active" : "", " ").concat(!isValidPage ? "disabled" : ""),
|
|
445
|
+
children: isValidPage ? pageNum : "-"
|
|
446
|
+
}, "page-btn-".concat(i)));
|
|
447
|
+
};
|
|
448
|
+
for (var i = 0; i < 3; i++) {
|
|
449
|
+
_loop();
|
|
450
|
+
}
|
|
451
|
+
return pages;
|
|
452
|
+
};
|
|
453
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
454
|
+
children: [/*#__PURE__*/jsx("button", {
|
|
455
|
+
onClick: function onClick() {
|
|
456
|
+
return onPageChange(0);
|
|
457
|
+
},
|
|
458
|
+
disabled: currentPage === 0,
|
|
459
|
+
className: "pagination-button",
|
|
460
|
+
children: tr("First Page")
|
|
461
|
+
}), /*#__PURE__*/jsx("button", {
|
|
462
|
+
onClick: function onClick() {
|
|
463
|
+
return onPageChange(currentPage - 1);
|
|
464
|
+
},
|
|
465
|
+
disabled: currentPage === 0,
|
|
466
|
+
className: "pagination-button",
|
|
467
|
+
children: tr("Previous Page")
|
|
468
|
+
}), renderPageButtons(), /*#__PURE__*/jsx("button", {
|
|
469
|
+
onClick: function onClick() {
|
|
470
|
+
return onPageChange(currentPage + 1);
|
|
471
|
+
},
|
|
472
|
+
disabled: currentPage === totalPages - 1,
|
|
473
|
+
className: "pagination-button",
|
|
474
|
+
children: tr("Next Page")
|
|
475
|
+
}), /*#__PURE__*/jsx("button", {
|
|
476
|
+
onClick: function onClick() {
|
|
477
|
+
return onPageChange(totalPages - 1);
|
|
478
|
+
},
|
|
479
|
+
disabled: currentPage === totalPages - 1,
|
|
480
|
+
className: "pagination-button",
|
|
481
|
+
children: tr("Last Page")
|
|
482
|
+
})]
|
|
483
|
+
});
|
|
484
|
+
};
|
|
485
|
+
|
|
486
|
+
var DefaultContext = {
|
|
487
|
+
color: undefined,
|
|
488
|
+
size: undefined,
|
|
489
|
+
className: undefined,
|
|
490
|
+
style: undefined,
|
|
491
|
+
attr: undefined
|
|
492
|
+
};
|
|
493
|
+
var IconContext = React.createContext && /*#__PURE__*/React.createContext(DefaultContext);
|
|
494
|
+
|
|
495
|
+
var _excluded = ["attr", "size", "title"];
|
|
496
|
+
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; }
|
|
497
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
|
|
498
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
499
|
+
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; }
|
|
500
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
|
|
501
|
+
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; }
|
|
502
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
503
|
+
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); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
504
|
+
function Tree2Element(tree) {
|
|
505
|
+
return tree && tree.map((node, i) => /*#__PURE__*/React.createElement(node.tag, _objectSpread({
|
|
506
|
+
key: i
|
|
507
|
+
}, node.attr), Tree2Element(node.child)));
|
|
508
|
+
}
|
|
509
|
+
function GenIcon(data) {
|
|
510
|
+
return props => /*#__PURE__*/React.createElement(IconBase, _extends({
|
|
511
|
+
attr: _objectSpread({}, data.attr)
|
|
512
|
+
}, props), Tree2Element(data.child));
|
|
513
|
+
}
|
|
514
|
+
function IconBase(props) {
|
|
515
|
+
var elem = conf => {
|
|
516
|
+
var {
|
|
517
|
+
attr,
|
|
518
|
+
size,
|
|
519
|
+
title
|
|
520
|
+
} = props,
|
|
521
|
+
svgProps = _objectWithoutProperties(props, _excluded);
|
|
522
|
+
var computedSize = size || conf.size || "1em";
|
|
523
|
+
var className;
|
|
524
|
+
if (conf.className) className = conf.className;
|
|
525
|
+
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
526
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
527
|
+
stroke: "currentColor",
|
|
528
|
+
fill: "currentColor",
|
|
529
|
+
strokeWidth: "0"
|
|
530
|
+
}, conf.attr, attr, svgProps, {
|
|
531
|
+
className: className,
|
|
532
|
+
style: _objectSpread(_objectSpread({
|
|
533
|
+
color: props.color || conf.color
|
|
534
|
+
}, conf.style), props.style),
|
|
535
|
+
height: computedSize,
|
|
536
|
+
width: computedSize,
|
|
537
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
538
|
+
}), title && /*#__PURE__*/React.createElement("title", null, title), props.children);
|
|
539
|
+
};
|
|
540
|
+
return IconContext !== undefined ? /*#__PURE__*/React.createElement(IconContext.Consumer, null, conf => elem(conf)) : elem(DefaultContext);
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
// THIS FILE IS AUTO GENERATED
|
|
544
|
+
function MdOutlineMenuBook (props) {
|
|
545
|
+
return GenIcon({"attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"},"child":[]},{"tag":"path","attr":{"d":"M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"},"child":[]},{"tag":"path","attr":{"d":"M17.5 10.5c.88 0 1.73.09 2.5.26V9.24c-.79-.15-1.64-.24-2.5-.24-1.7 0-3.24.29-4.5.83v1.66c1.13-.64 2.7-.99 4.5-.99zM13 12.49v1.66c1.13-.64 2.7-.99 4.5-.99.88 0 1.73.09 2.5.26V11.9c-.79-.15-1.64-.24-2.5-.24-1.7 0-3.24.3-4.5.83zM17.5 14.33c-1.7 0-3.24.29-4.5.83v1.66c1.13-.64 2.7-.99 4.5-.99.88 0 1.73.09 2.5.26v-1.52c-.79-.16-1.64-.24-2.5-.24z"},"child":[]}]})(props);
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
var TableHeader = function TableHeader(_ref) {
|
|
549
|
+
var name = _ref.name,
|
|
550
|
+
_ref$freeActions = _ref.freeActions,
|
|
551
|
+
freeActions = _ref$freeActions === void 0 ? [] : _ref$freeActions,
|
|
552
|
+
getState = _ref.getState;
|
|
553
|
+
var hasFreeActions = freeActions.length > 0;
|
|
554
|
+
|
|
555
|
+
// 如果沒有名稱也沒有 freeActions,不渲染任何內容
|
|
556
|
+
if (!name && !hasFreeActions) {
|
|
557
|
+
return null;
|
|
558
|
+
}
|
|
559
|
+
return /*#__PURE__*/jsxs("div", {
|
|
560
|
+
className: "udi-table-header",
|
|
561
|
+
children: [name && /*#__PURE__*/jsx("div", {
|
|
562
|
+
className: "udi-table-name",
|
|
563
|
+
style: {
|
|
564
|
+
display: hasFreeActions ? "inline-block" : "block"
|
|
565
|
+
},
|
|
566
|
+
children: /*#__PURE__*/jsx("h3", {
|
|
567
|
+
children: name
|
|
568
|
+
})
|
|
569
|
+
}), hasFreeActions && /*#__PURE__*/jsx("div", {
|
|
570
|
+
className: "udi-table-free-actions",
|
|
571
|
+
style: {
|
|
572
|
+
display: name ? "inline-block" : "block"
|
|
573
|
+
},
|
|
574
|
+
children: freeActions.map(function (action, index) {
|
|
575
|
+
if (action.isFreeAction !== true) return null;
|
|
576
|
+
return /*#__PURE__*/jsx("button", {
|
|
577
|
+
onClick: function onClick() {
|
|
578
|
+
if (action.onClick) action.onClick({
|
|
579
|
+
getState: getState
|
|
580
|
+
});
|
|
581
|
+
},
|
|
582
|
+
title: action.title || "Action",
|
|
583
|
+
className: "udi-table-free-action-button",
|
|
584
|
+
style: _objectSpread2({}, action.style),
|
|
585
|
+
disabled: action.disabled,
|
|
586
|
+
children: action.icon ? action.icon : action.label ? action.label : /*#__PURE__*/jsx(MdOutlineMenuBook, {})
|
|
587
|
+
}, index);
|
|
588
|
+
})
|
|
589
|
+
})]
|
|
590
|
+
});
|
|
591
|
+
};
|
|
592
|
+
|
|
593
|
+
var BasicFilter = function BasicFilter(_ref) {
|
|
594
|
+
var columns = _ref.columns,
|
|
595
|
+
filterColumn = _ref.filterColumn,
|
|
596
|
+
filterText = _ref.filterText,
|
|
597
|
+
showAdvancedFilter = _ref.showAdvancedFilter,
|
|
598
|
+
advancedFilters = _ref.advancedFilters,
|
|
599
|
+
onFilterColumnChange = _ref.onFilterColumnChange,
|
|
600
|
+
onFilterTextChange = _ref.onFilterTextChange,
|
|
601
|
+
onToggleAdvancedFilter = _ref.onToggleAdvancedFilter,
|
|
602
|
+
onResetFilter = _ref.onResetFilter;
|
|
603
|
+
// 判斷是否有任何篩選條件
|
|
604
|
+
var hasAnyFilter = filterText || filterColumn !== "all" || Object.keys(advancedFilters).length > 0;
|
|
605
|
+
|
|
606
|
+
// 取得 placeholder 文字
|
|
607
|
+
var getPlaceholder = function getPlaceholder() {
|
|
608
|
+
if (filterColumn === "all") {
|
|
609
|
+
return "".concat(tr("Search")).concat(tr("All Fields"), "...");
|
|
610
|
+
}
|
|
611
|
+
var column = columns.find(function (col) {
|
|
612
|
+
return col.key === filterColumn;
|
|
613
|
+
});
|
|
614
|
+
return "".concat(tr("Search"), " ").concat((column === null || column === void 0 ? void 0 : column.title) || "", "...");
|
|
615
|
+
};
|
|
616
|
+
return /*#__PURE__*/jsxs("div", {
|
|
617
|
+
className: "basic-filter",
|
|
618
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
619
|
+
className: "filter-column-selector",
|
|
620
|
+
children: [/*#__PURE__*/jsxs("label", {
|
|
621
|
+
htmlFor: "filterColumn",
|
|
622
|
+
children: [tr("Search") + tr("Fields"), "\uFF1A"]
|
|
623
|
+
}), /*#__PURE__*/jsxs("select", {
|
|
624
|
+
id: "filterColumn",
|
|
625
|
+
value: filterColumn,
|
|
626
|
+
onChange: function onChange(e) {
|
|
627
|
+
return onFilterColumnChange(e.target.value);
|
|
628
|
+
},
|
|
629
|
+
className: "filter-column-select",
|
|
630
|
+
children: [/*#__PURE__*/jsx("option", {
|
|
631
|
+
value: "all",
|
|
632
|
+
children: tr("All Fields")
|
|
633
|
+
}), columns.map(function (column) {
|
|
634
|
+
return /*#__PURE__*/jsx("option", {
|
|
635
|
+
value: column.dataField,
|
|
636
|
+
children: column.title
|
|
637
|
+
}, column.dataField);
|
|
638
|
+
})]
|
|
639
|
+
})]
|
|
640
|
+
}), /*#__PURE__*/jsx("input", {
|
|
641
|
+
type: "text",
|
|
642
|
+
placeholder: getPlaceholder(),
|
|
643
|
+
value: filterText,
|
|
644
|
+
onChange: function onChange(e) {
|
|
645
|
+
return onFilterTextChange(e.target.value);
|
|
646
|
+
},
|
|
647
|
+
className: "filter-input"
|
|
648
|
+
}), /*#__PURE__*/jsx("button", {
|
|
649
|
+
onClick: onToggleAdvancedFilter,
|
|
650
|
+
className: "advanced-filter-toggle",
|
|
651
|
+
children: showAdvancedFilter ? tr("Hide advanced search") : tr("Advanced search")
|
|
652
|
+
}), hasAnyFilter && /*#__PURE__*/jsx("button", {
|
|
653
|
+
onClick: onResetFilter,
|
|
654
|
+
className: "reset-button",
|
|
655
|
+
children: tr("Reset all filters")
|
|
656
|
+
})]
|
|
657
|
+
});
|
|
658
|
+
};
|
|
659
|
+
|
|
660
|
+
var AdvancedFilter = function AdvancedFilter(_ref) {
|
|
661
|
+
var columns = _ref.columns,
|
|
662
|
+
advancedFilters = _ref.advancedFilters,
|
|
663
|
+
onFilterChange = _ref.onFilterChange,
|
|
664
|
+
onClearFilters = _ref.onClearFilters;
|
|
665
|
+
var hasFilters = Object.keys(advancedFilters).length > 0;
|
|
666
|
+
return /*#__PURE__*/jsxs("div", {
|
|
667
|
+
className: "advanced-filter",
|
|
668
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
669
|
+
className: "advanced-filter-header",
|
|
670
|
+
children: [/*#__PURE__*/jsxs("h4", {
|
|
671
|
+
children: [tr("Advanced search"), " - ", tr("Multiple filters search")]
|
|
672
|
+
}), hasFilters && /*#__PURE__*/jsx("button", {
|
|
673
|
+
onClick: onClearFilters,
|
|
674
|
+
className: "clear-advanced-button",
|
|
675
|
+
children: tr("Clear advance filters")
|
|
676
|
+
})]
|
|
677
|
+
}), /*#__PURE__*/jsx("div", {
|
|
678
|
+
className: "advanced-filter-grid",
|
|
679
|
+
children: columns.map(function (column) {
|
|
680
|
+
return /*#__PURE__*/jsxs("div", {
|
|
681
|
+
className: "advanced-filter-item",
|
|
682
|
+
children: [/*#__PURE__*/jsxs("label", {
|
|
683
|
+
htmlFor: "advanced-".concat(column.dataField),
|
|
684
|
+
children: [column.title, "\uFF1A"]
|
|
685
|
+
}), /*#__PURE__*/jsx("input", {
|
|
686
|
+
id: "advanced-".concat(column.dataField),
|
|
687
|
+
type: "text",
|
|
688
|
+
placeholder: "".concat(tr("Filter"), " ").concat(column.title, "..."),
|
|
689
|
+
value: advancedFilters[column.dataField] || "",
|
|
690
|
+
onChange: function onChange(e) {
|
|
691
|
+
return onFilterChange(column.dataField, e.target.value);
|
|
692
|
+
},
|
|
693
|
+
className: "advanced-filter-input"
|
|
694
|
+
})]
|
|
695
|
+
}, column.dataField);
|
|
696
|
+
})
|
|
697
|
+
})]
|
|
698
|
+
});
|
|
699
|
+
};
|
|
700
|
+
|
|
701
|
+
var ScrollIndicator = function ScrollIndicator(_ref) {
|
|
702
|
+
var scrollPosition = _ref.scrollPosition,
|
|
703
|
+
currentPage = _ref.currentPage,
|
|
704
|
+
totalPages = _ref.totalPages,
|
|
705
|
+
totalCount = _ref.totalCount,
|
|
706
|
+
scrollbarInfo = _ref.scrollbarInfo,
|
|
707
|
+
isMobile = _ref.isMobile,
|
|
708
|
+
isTablet = _ref.isTablet;
|
|
709
|
+
// 取得裝置類型文字
|
|
710
|
+
var getDeviceType = function getDeviceType() {
|
|
711
|
+
if (isMobile) return "手機";
|
|
712
|
+
if (isTablet) return "平板";
|
|
713
|
+
return "桌面";
|
|
714
|
+
};
|
|
715
|
+
return /*#__PURE__*/jsxs("div", {
|
|
716
|
+
className: "scroll-position-indicator",
|
|
717
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
718
|
+
children: ["\u6EFE\u52D5\u4F4D\u7F6E: \u5782\u76F4 ", scrollPosition.verticalPercent.toFixed(1), "% | \u6C34\u5E73", " ", scrollPosition.horizontalPercent.toFixed(1), "%"]
|
|
719
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
720
|
+
children: ["\u5206\u9801: ", currentPage + 1, "/", totalPages, " | \u7E3D\u7B46\u6578: ", totalCount]
|
|
721
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
722
|
+
children: ["\u6EFE\u52D5\u689D: ", scrollbarInfo.hasVertical ? "垂直✓" : "垂直✗", " |", " ", scrollbarInfo.hasHorizontal ? "水平✓" : "水平✗"]
|
|
723
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
724
|
+
children: ["\u87A2\u5E55: ", getDeviceType(), " (", window.innerWidth, "x", window.innerHeight, ")"]
|
|
725
|
+
})]
|
|
726
|
+
});
|
|
727
|
+
};
|
|
728
|
+
|
|
729
|
+
var TableHead = function TableHead(_ref) {
|
|
730
|
+
var columns = _ref.columns,
|
|
731
|
+
sortable = _ref.sortable,
|
|
732
|
+
sortConfig = _ref.sortConfig,
|
|
733
|
+
onSort = _ref.onSort,
|
|
734
|
+
getGridSize = _ref.getGridSize,
|
|
735
|
+
_ref$actions = _ref.actions,
|
|
736
|
+
actions = _ref$actions === void 0 ? [] : _ref$actions,
|
|
737
|
+
_ref$actionFirst = _ref.actionFirst,
|
|
738
|
+
actionFirst = _ref$actionFirst === void 0 ? false : _ref$actionFirst;
|
|
739
|
+
// 取得排序圖示
|
|
740
|
+
var getSortIcon = function getSortIcon(columnKey) {
|
|
741
|
+
if (sortConfig.key === columnKey) {
|
|
742
|
+
return sortConfig.direction === "asc" ? "↑" : "↓";
|
|
743
|
+
}
|
|
744
|
+
return "↕";
|
|
745
|
+
};
|
|
746
|
+
|
|
747
|
+
// 取得欄位的 className
|
|
748
|
+
var getColumnClassName = function getColumnClassName(columnKey) {
|
|
749
|
+
var classes = [];
|
|
750
|
+
if (sortable) classes.push("sortable");
|
|
751
|
+
if (sortConfig.key === columnKey) {
|
|
752
|
+
classes.push("sorted");
|
|
753
|
+
classes.push(sortConfig.direction);
|
|
754
|
+
}
|
|
755
|
+
return classes.join(" ");
|
|
756
|
+
};
|
|
757
|
+
return /*#__PURE__*/jsx("thead", {
|
|
758
|
+
children: /*#__PURE__*/jsxs("tr", {
|
|
759
|
+
children: [actionFirst && actions.length > 0 && /*#__PURE__*/jsx("th", {}), columns.map(function (column) {
|
|
760
|
+
return /*#__PURE__*/jsx("th", {
|
|
761
|
+
onClick: function onClick() {
|
|
762
|
+
return onSort(column.dataField);
|
|
763
|
+
},
|
|
764
|
+
className: getColumnClassName(column.dataField),
|
|
765
|
+
style: _objectSpread2({}, getGridSize(column, {
|
|
766
|
+
isTitle: true
|
|
767
|
+
})),
|
|
768
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
769
|
+
className: "th-content",
|
|
770
|
+
children: [/*#__PURE__*/jsx("span", {
|
|
771
|
+
children: column.title
|
|
772
|
+
}), sortable && /*#__PURE__*/jsx("span", {
|
|
773
|
+
className: "sort-icon",
|
|
774
|
+
children: getSortIcon(column.dataField)
|
|
775
|
+
})]
|
|
776
|
+
})
|
|
777
|
+
}, column.dataField);
|
|
778
|
+
}), !actionFirst && actions.length > 0 && /*#__PURE__*/jsx("th", {})]
|
|
779
|
+
})
|
|
780
|
+
});
|
|
781
|
+
};
|
|
782
|
+
|
|
783
|
+
var LoadingState = function LoadingState(_ref) {
|
|
784
|
+
var colSpan = _ref.colSpan;
|
|
785
|
+
return /*#__PURE__*/jsx("tr", {
|
|
786
|
+
children: /*#__PURE__*/jsx("td", {
|
|
787
|
+
colSpan: colSpan,
|
|
788
|
+
className: "loading-state",
|
|
789
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
790
|
+
className: "loading-spinner",
|
|
791
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
792
|
+
className: "spinner"
|
|
793
|
+
}), /*#__PURE__*/jsx("span", {
|
|
794
|
+
children: "loading..."
|
|
795
|
+
})]
|
|
796
|
+
})
|
|
797
|
+
})
|
|
798
|
+
});
|
|
799
|
+
};
|
|
800
|
+
|
|
801
|
+
var EmptyState = function EmptyState(_ref) {
|
|
802
|
+
var colSpan = _ref.colSpan,
|
|
803
|
+
_ref$message = _ref.message,
|
|
804
|
+
message = _ref$message === void 0 ? "No Data" : _ref$message;
|
|
805
|
+
return /*#__PURE__*/jsx("tr", {
|
|
806
|
+
children: /*#__PURE__*/jsx("td", {
|
|
807
|
+
colSpan: colSpan,
|
|
808
|
+
className: "no-data",
|
|
809
|
+
children: message
|
|
810
|
+
})
|
|
811
|
+
});
|
|
812
|
+
};
|
|
813
|
+
|
|
814
|
+
var ActionButton = function ActionButton(_ref) {
|
|
815
|
+
var action = _ref.action,
|
|
816
|
+
row = _ref.row,
|
|
817
|
+
actionIndex = _ref.actionIndex;
|
|
818
|
+
if (action.isFreeAction === true) return null;
|
|
819
|
+
if (action.render) {
|
|
820
|
+
return action.render(row);
|
|
821
|
+
}
|
|
822
|
+
if (action.skip) return null;
|
|
823
|
+
return /*#__PURE__*/jsx("button", {
|
|
824
|
+
onClick: function onClick() {
|
|
825
|
+
return action.onClick(row);
|
|
826
|
+
},
|
|
827
|
+
className: action.className || "action-button",
|
|
828
|
+
title: action.title || "Action",
|
|
829
|
+
style: {
|
|
830
|
+
all: "unset",
|
|
831
|
+
cursor: "pointer",
|
|
832
|
+
fontSize: "26px"
|
|
833
|
+
},
|
|
834
|
+
disabled: action.disabled,
|
|
835
|
+
children: action.icon
|
|
836
|
+
}, "action-".concat(actionIndex));
|
|
837
|
+
};
|
|
838
|
+
|
|
839
|
+
/**
|
|
840
|
+
* ActionCell 動作按鈕儲存格元件
|
|
841
|
+
* @param {Object} props
|
|
842
|
+
* @param {Array} props.actions - 動作按鈕陣列
|
|
843
|
+
* @param {Object} props.row - 行資料
|
|
844
|
+
*/
|
|
845
|
+
var ActionCell = function ActionCell(_ref2) {
|
|
846
|
+
var actions = _ref2.actions,
|
|
847
|
+
row = _ref2.row;
|
|
848
|
+
return /*#__PURE__*/jsx("td", {
|
|
849
|
+
style: {
|
|
850
|
+
width: "".concat(actions.length * 26, "px")
|
|
851
|
+
},
|
|
852
|
+
children: actions.map(function (action, actionIndex) {
|
|
853
|
+
return /*#__PURE__*/jsx(ActionButton, {
|
|
854
|
+
action: action,
|
|
855
|
+
row: row,
|
|
856
|
+
actionIndex: actionIndex
|
|
857
|
+
}, "action-".concat(actionIndex));
|
|
858
|
+
})
|
|
859
|
+
});
|
|
860
|
+
};
|
|
861
|
+
|
|
862
|
+
var TableRow = function TableRow(_ref) {
|
|
863
|
+
var row = _ref.row,
|
|
864
|
+
rowIndex = _ref.rowIndex,
|
|
865
|
+
columns = _ref.columns,
|
|
866
|
+
_ref$actions = _ref.actions,
|
|
867
|
+
actions = _ref$actions === void 0 ? [] : _ref$actions,
|
|
868
|
+
_ref$actionFirst = _ref.actionFirst,
|
|
869
|
+
actionFirst = _ref$actionFirst === void 0 ? false : _ref$actionFirst,
|
|
870
|
+
getGridSize = _ref.getGridSize,
|
|
871
|
+
tableName = _ref.tableName;
|
|
872
|
+
return /*#__PURE__*/jsxs("tr", {
|
|
873
|
+
children: [actionFirst && actions.length > 0 && /*#__PURE__*/jsx(ActionCell, {
|
|
874
|
+
actions: actions,
|
|
875
|
+
row: row
|
|
876
|
+
}), columns.map(function (column, colIndex) {
|
|
877
|
+
return /*#__PURE__*/jsx("td", {
|
|
878
|
+
title: row[column.dataField],
|
|
879
|
+
style: _objectSpread2(_objectSpread2({}, getGridSize(column)), column.style),
|
|
880
|
+
children: column.render ? column.render(row[column.dataField], row, rowIndex + 1, column.dataField, tableName) : row[column.dataField]
|
|
881
|
+
}, "cell-".concat(rowIndex, "-").concat(colIndex, "-").concat(column.dataField));
|
|
882
|
+
}), !actionFirst && actions.length > 0 && /*#__PURE__*/jsx(ActionCell, {
|
|
883
|
+
actions: actions,
|
|
884
|
+
row: row
|
|
885
|
+
})]
|
|
886
|
+
}, "row-".concat(rowIndex, "-").concat(row.id || ""));
|
|
887
|
+
};
|
|
888
|
+
|
|
889
|
+
/**
|
|
890
|
+
* useDataRequest - 處理表格資料請求的 Hook
|
|
891
|
+
*
|
|
892
|
+
* @param {Object} options - 配置選項
|
|
893
|
+
* @param {Function} options.onDataRequest - 外部傳入的資料請求 callback 函數
|
|
894
|
+
* @param {number} options.pageSize - 每頁顯示數量
|
|
895
|
+
* @param {boolean} options.isDev - 是否為開發模式
|
|
896
|
+
*
|
|
897
|
+
* @returns {Object} - 返回資料狀態和操作函數
|
|
898
|
+
*/
|
|
899
|
+
function useDataRequest(_ref) {
|
|
900
|
+
var onDataRequest = _ref.onDataRequest,
|
|
901
|
+
_ref$isDev = _ref.isDev,
|
|
902
|
+
isDev = _ref$isDev === void 0 ? false : _ref$isDev;
|
|
903
|
+
// 資料狀態
|
|
904
|
+
var _useState = useState([]),
|
|
905
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
906
|
+
data = _useState2[0],
|
|
907
|
+
setData = _useState2[1];
|
|
908
|
+
var _useState3 = useState(false),
|
|
909
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
910
|
+
loading = _useState4[0],
|
|
911
|
+
setLoading = _useState4[1];
|
|
912
|
+
var _useState5 = useState(0),
|
|
913
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
914
|
+
totalCount = _useState6[0],
|
|
915
|
+
setTotalCount = _useState6[1];
|
|
916
|
+
var _useState7 = useState(null),
|
|
917
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
918
|
+
error = _useState8[0],
|
|
919
|
+
setError = _useState8[1];
|
|
920
|
+
var _useState9 = useState(false),
|
|
921
|
+
_useState0 = _slicedToArray(_useState9, 2),
|
|
922
|
+
isInfiniteScroll = _useState0[0],
|
|
923
|
+
setIsInfiniteScroll = _useState0[1];
|
|
924
|
+
|
|
925
|
+
// 執行資料請求
|
|
926
|
+
var executeDataRequest = useCallback(/*#__PURE__*/function () {
|
|
927
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(params) {
|
|
928
|
+
var result, responseData, _t;
|
|
929
|
+
return _regenerator().w(function (_context) {
|
|
930
|
+
while (1) switch (_context.p = _context.n) {
|
|
931
|
+
case 0:
|
|
932
|
+
if (onDataRequest) {
|
|
933
|
+
_context.n = 1;
|
|
934
|
+
break;
|
|
935
|
+
}
|
|
936
|
+
return _context.a(2);
|
|
937
|
+
case 1:
|
|
938
|
+
setLoading(true);
|
|
939
|
+
setError(null);
|
|
940
|
+
_context.p = 2;
|
|
941
|
+
_context.n = 3;
|
|
942
|
+
return onDataRequest(params);
|
|
943
|
+
case 3:
|
|
944
|
+
result = _context.v;
|
|
945
|
+
responseData = Array.isArray(result === null || result === void 0 ? void 0 : result.data) ? result.data : [];
|
|
946
|
+
if (isInfiniteScroll) {
|
|
947
|
+
setData(function (prevData) {
|
|
948
|
+
return [].concat(_toConsumableArray(prevData), _toConsumableArray(responseData));
|
|
949
|
+
});
|
|
950
|
+
} else {
|
|
951
|
+
setData(responseData);
|
|
952
|
+
}
|
|
953
|
+
setTotalCount(result.totalCount || 0);
|
|
954
|
+
_context.n = 5;
|
|
955
|
+
break;
|
|
956
|
+
case 4:
|
|
957
|
+
_context.p = 4;
|
|
958
|
+
_t = _context.v;
|
|
959
|
+
if (isDev) {
|
|
960
|
+
console.error("❌ Callback Error:", _t);
|
|
961
|
+
}
|
|
962
|
+
setError(_t.message);
|
|
963
|
+
setData([]);
|
|
964
|
+
setTotalCount(0);
|
|
965
|
+
case 5:
|
|
966
|
+
_context.p = 5;
|
|
967
|
+
setLoading(false);
|
|
968
|
+
return _context.f(5);
|
|
969
|
+
case 6:
|
|
970
|
+
return _context.a(2);
|
|
971
|
+
}
|
|
972
|
+
}, _callee, null, [[2, 4, 5, 6]]);
|
|
973
|
+
}));
|
|
974
|
+
return function (_x) {
|
|
975
|
+
return _ref2.apply(this, arguments);
|
|
976
|
+
};
|
|
977
|
+
}(), [onDataRequest, isInfiniteScroll, isDev]);
|
|
978
|
+
|
|
979
|
+
// 防抖的請求執行
|
|
980
|
+
var debouncedDataRequest = useMemo(function () {
|
|
981
|
+
var timeoutId;
|
|
982
|
+
return function (params) {
|
|
983
|
+
clearTimeout(timeoutId);
|
|
984
|
+
timeoutId = setTimeout(function () {
|
|
985
|
+
executeDataRequest(params);
|
|
986
|
+
}, 300);
|
|
987
|
+
};
|
|
988
|
+
}, [executeDataRequest]);
|
|
989
|
+
|
|
990
|
+
// 初始載入
|
|
991
|
+
var initialLoad = useCallback(function (currentPageSize) {
|
|
992
|
+
if (onDataRequest) {
|
|
993
|
+
var params = {
|
|
994
|
+
page: 0,
|
|
995
|
+
pageSize: currentPageSize,
|
|
996
|
+
search: "",
|
|
997
|
+
searchColumn: "all",
|
|
998
|
+
advancedFilters: {},
|
|
999
|
+
sortBy: null,
|
|
1000
|
+
sortOrder: "asc"
|
|
1001
|
+
};
|
|
1002
|
+
executeDataRequest(params);
|
|
1003
|
+
}
|
|
1004
|
+
}, [onDataRequest, executeDataRequest]);
|
|
1005
|
+
|
|
1006
|
+
// 重置資料
|
|
1007
|
+
var resetData = useCallback(function () {
|
|
1008
|
+
setData([]);
|
|
1009
|
+
setTotalCount(0);
|
|
1010
|
+
setError(null);
|
|
1011
|
+
}, []);
|
|
1012
|
+
return {
|
|
1013
|
+
// 狀態
|
|
1014
|
+
data: data,
|
|
1015
|
+
setData: setData,
|
|
1016
|
+
loading: loading,
|
|
1017
|
+
setLoading: setLoading,
|
|
1018
|
+
totalCount: totalCount,
|
|
1019
|
+
setTotalCount: setTotalCount,
|
|
1020
|
+
error: error,
|
|
1021
|
+
setError: setError,
|
|
1022
|
+
isInfiniteScroll: isInfiniteScroll,
|
|
1023
|
+
setIsInfiniteScroll: setIsInfiniteScroll,
|
|
1024
|
+
// 操作函數
|
|
1025
|
+
executeDataRequest: executeDataRequest,
|
|
1026
|
+
debouncedDataRequest: debouncedDataRequest,
|
|
1027
|
+
initialLoad: initialLoad,
|
|
1028
|
+
resetData: resetData
|
|
1029
|
+
};
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
/**
|
|
1033
|
+
* useTableScroll - 處理表格滾動邏輯的 Hook
|
|
1034
|
+
*
|
|
1035
|
+
* @param {Object} options - 配置選項
|
|
1036
|
+
* @param {Array} options.data - 表格資料(用於監聽資料變化時重新初始化滾動監聽)
|
|
1037
|
+
*
|
|
1038
|
+
* @returns {Object} - 返回滾動狀態和控制函數
|
|
1039
|
+
*/
|
|
1040
|
+
function useTableScroll() {
|
|
1041
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1042
|
+
_ref$data = _ref.data,
|
|
1043
|
+
data = _ref$data === void 0 ? [] : _ref$data;
|
|
1044
|
+
// 滾動位置狀態
|
|
1045
|
+
var _useState = useState({
|
|
1046
|
+
top: 0,
|
|
1047
|
+
left: 0,
|
|
1048
|
+
verticalPercent: 0,
|
|
1049
|
+
horizontalPercent: 0
|
|
1050
|
+
}),
|
|
1051
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1052
|
+
scrollPosition = _useState2[0],
|
|
1053
|
+
setScrollPosition = _useState2[1];
|
|
1054
|
+
|
|
1055
|
+
// 滾動條資訊
|
|
1056
|
+
var _useState3 = useState({
|
|
1057
|
+
hasHorizontal: false,
|
|
1058
|
+
hasVertical: false,
|
|
1059
|
+
maxScrollLeft: 0,
|
|
1060
|
+
maxScrollTop: 0
|
|
1061
|
+
}),
|
|
1062
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1063
|
+
scrollbarInfo = _useState4[0],
|
|
1064
|
+
setScrollbarInfo = _useState4[1];
|
|
1065
|
+
|
|
1066
|
+
// 表格容器 ref
|
|
1067
|
+
var tableWrapperRef = useRef(null);
|
|
1068
|
+
|
|
1069
|
+
// 滾動事件處理(使用 throttle)
|
|
1070
|
+
useEffect(function () {
|
|
1071
|
+
var tableWrapper = tableWrapperRef.current;
|
|
1072
|
+
if (!tableWrapper) return;
|
|
1073
|
+
|
|
1074
|
+
// 更新滾動條信息
|
|
1075
|
+
var updateScrollbarInfo = function updateScrollbarInfo() {
|
|
1076
|
+
var hasHorizontal = tableWrapper.scrollWidth > tableWrapper.clientWidth;
|
|
1077
|
+
var hasVertical = tableWrapper.scrollHeight > tableWrapper.clientHeight;
|
|
1078
|
+
var maxScrollLeft = Math.max(0, tableWrapper.scrollWidth - tableWrapper.clientWidth);
|
|
1079
|
+
var maxScrollTop = Math.max(0, tableWrapper.scrollHeight - tableWrapper.clientHeight);
|
|
1080
|
+
setScrollbarInfo({
|
|
1081
|
+
hasHorizontal: hasHorizontal,
|
|
1082
|
+
hasVertical: hasVertical,
|
|
1083
|
+
maxScrollLeft: maxScrollLeft,
|
|
1084
|
+
maxScrollTop: maxScrollTop,
|
|
1085
|
+
scrollWidth: tableWrapper.scrollWidth,
|
|
1086
|
+
scrollHeight: tableWrapper.scrollHeight,
|
|
1087
|
+
clientWidth: tableWrapper.clientWidth,
|
|
1088
|
+
clientHeight: tableWrapper.clientHeight
|
|
1089
|
+
});
|
|
1090
|
+
};
|
|
1091
|
+
|
|
1092
|
+
// 初始化滾動條信息
|
|
1093
|
+
updateScrollbarInfo();
|
|
1094
|
+
var isThrottled = false;
|
|
1095
|
+
var handleScroll = function handleScroll(event) {
|
|
1096
|
+
if (isThrottled) return;
|
|
1097
|
+
isThrottled = true;
|
|
1098
|
+
requestAnimationFrame(function () {
|
|
1099
|
+
// browser api > 每次滾動事件(rerender)使用 requestAnimationFrame
|
|
1100
|
+
var target = event.target;
|
|
1101
|
+
var scrollTop = target.scrollTop;
|
|
1102
|
+
var scrollLeft = target.scrollLeft;
|
|
1103
|
+
var scrollHeight = target.scrollHeight;
|
|
1104
|
+
var clientHeight = target.clientHeight;
|
|
1105
|
+
var scrollWidth = target.scrollWidth;
|
|
1106
|
+
var clientWidth = target.clientWidth;
|
|
1107
|
+
|
|
1108
|
+
// 計算滾動百分比
|
|
1109
|
+
var verticalScrollPercent = scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) * 100 : 0;
|
|
1110
|
+
var horizontalScrollPercent = scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) * 100 : 0;
|
|
1111
|
+
setScrollPosition({
|
|
1112
|
+
top: scrollTop,
|
|
1113
|
+
left: scrollLeft,
|
|
1114
|
+
verticalPercent: parseFloat(verticalScrollPercent.toFixed(1)),
|
|
1115
|
+
horizontalPercent: parseFloat(horizontalScrollPercent.toFixed(1))
|
|
1116
|
+
});
|
|
1117
|
+
|
|
1118
|
+
// 更新滾動條信息(以防表格尺寸發生變化)
|
|
1119
|
+
updateScrollbarInfo();
|
|
1120
|
+
isThrottled = false;
|
|
1121
|
+
});
|
|
1122
|
+
};
|
|
1123
|
+
|
|
1124
|
+
// 監聽窗口大小變化
|
|
1125
|
+
var handleResize = function handleResize() {
|
|
1126
|
+
updateScrollbarInfo();
|
|
1127
|
+
};
|
|
1128
|
+
tableWrapper.addEventListener("scroll", handleScroll, {
|
|
1129
|
+
passive: true
|
|
1130
|
+
});
|
|
1131
|
+
window.addEventListener("resize", handleResize);
|
|
1132
|
+
|
|
1133
|
+
// 使用 ResizeObserver 監聽表格內容變化(如果支援的話)
|
|
1134
|
+
var resizeObserver;
|
|
1135
|
+
if (window.ResizeObserver) {
|
|
1136
|
+
resizeObserver = new ResizeObserver(function () {
|
|
1137
|
+
updateScrollbarInfo();
|
|
1138
|
+
});
|
|
1139
|
+
resizeObserver.observe(tableWrapper);
|
|
1140
|
+
}
|
|
1141
|
+
return function () {
|
|
1142
|
+
tableWrapper.removeEventListener("scroll", handleScroll);
|
|
1143
|
+
window.removeEventListener("resize", handleResize);
|
|
1144
|
+
if (resizeObserver) {
|
|
1145
|
+
resizeObserver.disconnect();
|
|
1146
|
+
}
|
|
1147
|
+
};
|
|
1148
|
+
}, [data]); // 當數據變化時重新初始化
|
|
1149
|
+
|
|
1150
|
+
// 滾動控制函數
|
|
1151
|
+
var scrollControl = useCallback(function (axis, value) {
|
|
1152
|
+
var tableWrapper = tableWrapperRef.current;
|
|
1153
|
+
if (!tableWrapper) return;
|
|
1154
|
+
var maxScrollTop = tableWrapper.scrollHeight - tableWrapper.clientHeight;
|
|
1155
|
+
var maxScrollLeft = tableWrapper.scrollWidth - tableWrapper.clientWidth;
|
|
1156
|
+
var scrollValue = axis === "top" ? Math.min(value, maxScrollTop) : Math.min(value, maxScrollLeft);
|
|
1157
|
+
if (axis === "top") {
|
|
1158
|
+
tableWrapper.scrollTop = scrollValue;
|
|
1159
|
+
} else {
|
|
1160
|
+
tableWrapper.scrollLeft = scrollValue;
|
|
1161
|
+
}
|
|
1162
|
+
}, []);
|
|
1163
|
+
|
|
1164
|
+
// 便捷滾動方法
|
|
1165
|
+
var scrollTo = useCallback(function () {
|
|
1166
|
+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1167
|
+
var top = options.top,
|
|
1168
|
+
left = options.left;
|
|
1169
|
+
if (top !== undefined) scrollControl("top", top);
|
|
1170
|
+
if (left !== undefined) scrollControl("left", left);
|
|
1171
|
+
}, [scrollControl]);
|
|
1172
|
+
|
|
1173
|
+
// 滾動到頂部
|
|
1174
|
+
var scrollToTop = useCallback(function () {
|
|
1175
|
+
scrollControl("top", 0);
|
|
1176
|
+
}, [scrollControl]);
|
|
1177
|
+
|
|
1178
|
+
// 滾動到底部
|
|
1179
|
+
var scrollToBottom = useCallback(function () {
|
|
1180
|
+
var tableWrapper = tableWrapperRef.current;
|
|
1181
|
+
if (!tableWrapper) return;
|
|
1182
|
+
scrollControl("top", tableWrapper.scrollHeight);
|
|
1183
|
+
}, [scrollControl]);
|
|
1184
|
+
|
|
1185
|
+
// 滾動到最左邊
|
|
1186
|
+
var scrollToLeft = useCallback(function () {
|
|
1187
|
+
scrollControl("left", 0);
|
|
1188
|
+
}, [scrollControl]);
|
|
1189
|
+
|
|
1190
|
+
// 滾動到最右邊
|
|
1191
|
+
var scrollToRight = useCallback(function () {
|
|
1192
|
+
var tableWrapper = tableWrapperRef.current;
|
|
1193
|
+
if (!tableWrapper) return;
|
|
1194
|
+
scrollControl("left", tableWrapper.scrollWidth);
|
|
1195
|
+
}, [scrollControl]);
|
|
1196
|
+
|
|
1197
|
+
// 取得滾動狀態
|
|
1198
|
+
var getScrollState = useCallback(function () {
|
|
1199
|
+
return _objectSpread2(_objectSpread2(_objectSpread2({}, scrollPosition), scrollbarInfo), {}, {
|
|
1200
|
+
isAtTop: scrollPosition.verticalPercent === 0,
|
|
1201
|
+
isAtBottom: scrollPosition.verticalPercent === 100,
|
|
1202
|
+
isAtLeft: scrollPosition.horizontalPercent === 0,
|
|
1203
|
+
isAtRight: scrollPosition.horizontalPercent === 100
|
|
1204
|
+
});
|
|
1205
|
+
}, [scrollPosition, scrollbarInfo]);
|
|
1206
|
+
return {
|
|
1207
|
+
// 狀態
|
|
1208
|
+
scrollPosition: scrollPosition,
|
|
1209
|
+
scrollbarInfo: scrollbarInfo,
|
|
1210
|
+
// Ref
|
|
1211
|
+
tableWrapperRef: tableWrapperRef,
|
|
1212
|
+
// 控制函數
|
|
1213
|
+
scrollControl: scrollControl,
|
|
1214
|
+
scrollTo: scrollTo,
|
|
1215
|
+
scrollToTop: scrollToTop,
|
|
1216
|
+
scrollToBottom: scrollToBottom,
|
|
1217
|
+
scrollToLeft: scrollToLeft,
|
|
1218
|
+
scrollToRight: scrollToRight,
|
|
1219
|
+
// 取得狀態函數
|
|
1220
|
+
getScrollState: getScrollState
|
|
1221
|
+
};
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
/**
|
|
1225
|
+
* useTableFilter - 處理表格篩選邏輯的 Hook
|
|
1226
|
+
*
|
|
1227
|
+
* @param {Object} options - 配置選項
|
|
1228
|
+
* @param {Function} options.onFilterChange - 當篩選變化時的 callback(可選,用於通知外部重置分頁等)
|
|
1229
|
+
*
|
|
1230
|
+
* @returns {Object} - 返回篩選狀態和操作函數
|
|
1231
|
+
*/
|
|
1232
|
+
function useTableFilter() {
|
|
1233
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1234
|
+
onFilterChange = _ref.onFilterChange;
|
|
1235
|
+
// 基本篩選狀態
|
|
1236
|
+
var _useState = useState(""),
|
|
1237
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1238
|
+
filterText = _useState2[0],
|
|
1239
|
+
setFilterText = _useState2[1];
|
|
1240
|
+
var _useState3 = useState("all"),
|
|
1241
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1242
|
+
filterColumn = _useState4[0],
|
|
1243
|
+
setFilterColumn = _useState4[1];
|
|
1244
|
+
|
|
1245
|
+
// 進階篩選狀態
|
|
1246
|
+
var _useState5 = useState(false),
|
|
1247
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
1248
|
+
showAdvancedFilter = _useState6[0],
|
|
1249
|
+
setShowAdvancedFilter = _useState6[1];
|
|
1250
|
+
var _useState7 = useState({}),
|
|
1251
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
1252
|
+
advancedFilters = _useState8[0],
|
|
1253
|
+
setAdvancedFilters = _useState8[1];
|
|
1254
|
+
|
|
1255
|
+
// 更新篩選文字
|
|
1256
|
+
var updateFilterText = useCallback(function (value) {
|
|
1257
|
+
setFilterText(value);
|
|
1258
|
+
onFilterChange === null || onFilterChange === void 0 || onFilterChange();
|
|
1259
|
+
}, [onFilterChange]);
|
|
1260
|
+
|
|
1261
|
+
// 更新篩選欄位
|
|
1262
|
+
var updateFilterColumn = useCallback(function (value) {
|
|
1263
|
+
setFilterColumn(value);
|
|
1264
|
+
onFilterChange === null || onFilterChange === void 0 || onFilterChange();
|
|
1265
|
+
}, [onFilterChange]);
|
|
1266
|
+
|
|
1267
|
+
// 重置所有篩選
|
|
1268
|
+
var resetFilter = useCallback(function () {
|
|
1269
|
+
setFilterText("");
|
|
1270
|
+
setFilterColumn("all");
|
|
1271
|
+
setAdvancedFilters({});
|
|
1272
|
+
onFilterChange === null || onFilterChange === void 0 || onFilterChange();
|
|
1273
|
+
}, [onFilterChange]);
|
|
1274
|
+
|
|
1275
|
+
// 處理進階篩選變更
|
|
1276
|
+
var handleAdvancedFilterChange = useCallback(function (columnKey, value) {
|
|
1277
|
+
setAdvancedFilters(function (prev) {
|
|
1278
|
+
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1({}, columnKey, value));
|
|
1279
|
+
});
|
|
1280
|
+
onFilterChange === null || onFilterChange === void 0 || onFilterChange();
|
|
1281
|
+
}, [onFilterChange]);
|
|
1282
|
+
|
|
1283
|
+
// 清除進階篩選
|
|
1284
|
+
var clearAdvancedFilters = useCallback(function () {
|
|
1285
|
+
setAdvancedFilters({});
|
|
1286
|
+
onFilterChange === null || onFilterChange === void 0 || onFilterChange();
|
|
1287
|
+
}, [onFilterChange]);
|
|
1288
|
+
|
|
1289
|
+
// 切換進階篩選顯示
|
|
1290
|
+
var toggleAdvancedFilter = useCallback(function () {
|
|
1291
|
+
setShowAdvancedFilter(function (prev) {
|
|
1292
|
+
return !prev;
|
|
1293
|
+
});
|
|
1294
|
+
}, []);
|
|
1295
|
+
|
|
1296
|
+
// 檢查是否有任何篩選條件
|
|
1297
|
+
var hasBasicFilter = filterText !== "" || filterColumn !== "all";
|
|
1298
|
+
var hasAdvancedFilter = Object.keys(advancedFilters).length > 0;
|
|
1299
|
+
var hasAnyFilter = hasBasicFilter || hasAdvancedFilter;
|
|
1300
|
+
|
|
1301
|
+
// 計算活動的篩選數量
|
|
1302
|
+
var activeFiltersCount = Object.keys(advancedFilters).filter(function (key) {
|
|
1303
|
+
return advancedFilters[key];
|
|
1304
|
+
}).length + (filterText ? 1 : 0);
|
|
1305
|
+
|
|
1306
|
+
// 取得篩選狀態
|
|
1307
|
+
var getFilterState = useCallback(function () {
|
|
1308
|
+
return {
|
|
1309
|
+
filterText: filterText,
|
|
1310
|
+
filterColumn: filterColumn,
|
|
1311
|
+
advancedFilters: advancedFilters,
|
|
1312
|
+
showAdvancedFilter: showAdvancedFilter,
|
|
1313
|
+
hasBasicFilter: hasBasicFilter,
|
|
1314
|
+
hasAdvancedFilter: hasAdvancedFilter,
|
|
1315
|
+
hasAnyFilter: hasAnyFilter,
|
|
1316
|
+
activeFiltersCount: activeFiltersCount
|
|
1317
|
+
};
|
|
1318
|
+
}, [filterText, filterColumn, advancedFilters, showAdvancedFilter, hasBasicFilter, hasAdvancedFilter, hasAnyFilter, activeFiltersCount]);
|
|
1319
|
+
return {
|
|
1320
|
+
// 狀態
|
|
1321
|
+
filterText: filterText,
|
|
1322
|
+
filterColumn: filterColumn,
|
|
1323
|
+
showAdvancedFilter: showAdvancedFilter,
|
|
1324
|
+
advancedFilters: advancedFilters,
|
|
1325
|
+
// 狀態 setters (直接暴露以供特殊情況使用)
|
|
1326
|
+
setFilterText: setFilterText,
|
|
1327
|
+
setFilterColumn: setFilterColumn,
|
|
1328
|
+
setShowAdvancedFilter: setShowAdvancedFilter,
|
|
1329
|
+
setAdvancedFilters: setAdvancedFilters,
|
|
1330
|
+
// 操作函數
|
|
1331
|
+
updateFilterText: updateFilterText,
|
|
1332
|
+
updateFilterColumn: updateFilterColumn,
|
|
1333
|
+
resetFilter: resetFilter,
|
|
1334
|
+
handleAdvancedFilterChange: handleAdvancedFilterChange,
|
|
1335
|
+
clearAdvancedFilters: clearAdvancedFilters,
|
|
1336
|
+
toggleAdvancedFilter: toggleAdvancedFilter,
|
|
1337
|
+
// 計算屬性
|
|
1338
|
+
hasBasicFilter: hasBasicFilter,
|
|
1339
|
+
hasAdvancedFilter: hasAdvancedFilter,
|
|
1340
|
+
hasAnyFilter: hasAnyFilter,
|
|
1341
|
+
activeFiltersCount: activeFiltersCount,
|
|
1342
|
+
// 取得狀態函數
|
|
1343
|
+
getFilterState: getFilterState
|
|
1344
|
+
};
|
|
1345
|
+
}
|
|
1346
|
+
|
|
1347
|
+
/**
|
|
1348
|
+
* useResponsive - 處理響應式螢幕尺寸檢測的 Hook
|
|
1349
|
+
*
|
|
1350
|
+
* @param {Object} options - 配置選項
|
|
1351
|
+
* @param {number} options.mobileBreakpoint - 手機斷點(預設 768)
|
|
1352
|
+
* @param {number} options.tabletBreakpoint - 平板斷點(預設 992)
|
|
1353
|
+
*
|
|
1354
|
+
* @returns {Object} - 返回響應式狀態
|
|
1355
|
+
*/
|
|
1356
|
+
function useResponsive() {
|
|
1357
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1358
|
+
_ref$mobileBreakpoint = _ref.mobileBreakpoint,
|
|
1359
|
+
mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 768 : _ref$mobileBreakpoint,
|
|
1360
|
+
_ref$tabletBreakpoint = _ref.tabletBreakpoint,
|
|
1361
|
+
tabletBreakpoint = _ref$tabletBreakpoint === void 0 ? 992 : _ref$tabletBreakpoint;
|
|
1362
|
+
var _useState = useState(false),
|
|
1363
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1364
|
+
isMobile = _useState2[0],
|
|
1365
|
+
setIsMobile = _useState2[1];
|
|
1366
|
+
var _useState3 = useState(false),
|
|
1367
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1368
|
+
isTablet = _useState4[0],
|
|
1369
|
+
setIsTablet = _useState4[1];
|
|
1370
|
+
var _useState5 = useState(typeof window !== "undefined" ? window.innerWidth : 0),
|
|
1371
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
1372
|
+
screenWidth = _useState6[0],
|
|
1373
|
+
setScreenWidth = _useState6[1];
|
|
1374
|
+
var _useState7 = useState(typeof window !== "undefined" ? window.innerHeight : 0),
|
|
1375
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
1376
|
+
screenHeight = _useState8[0],
|
|
1377
|
+
setScreenHeight = _useState8[1];
|
|
1378
|
+
useEffect(function () {
|
|
1379
|
+
var checkScreenSize = function checkScreenSize() {
|
|
1380
|
+
var width = window.innerWidth;
|
|
1381
|
+
var height = window.innerHeight;
|
|
1382
|
+
setScreenWidth(width);
|
|
1383
|
+
setScreenHeight(height);
|
|
1384
|
+
setIsMobile(width < mobileBreakpoint);
|
|
1385
|
+
setIsTablet(width >= mobileBreakpoint && width < tabletBreakpoint);
|
|
1386
|
+
};
|
|
1387
|
+
|
|
1388
|
+
// 初始檢查
|
|
1389
|
+
checkScreenSize();
|
|
1390
|
+
|
|
1391
|
+
// 監聽視窗大小變化
|
|
1392
|
+
window.addEventListener("resize", checkScreenSize);
|
|
1393
|
+
return function () {
|
|
1394
|
+
return window.removeEventListener("resize", checkScreenSize);
|
|
1395
|
+
};
|
|
1396
|
+
}, [mobileBreakpoint, tabletBreakpoint]);
|
|
1397
|
+
|
|
1398
|
+
// 計算屬性
|
|
1399
|
+
var isDesktop = !isMobile && !isTablet;
|
|
1400
|
+
|
|
1401
|
+
// 取得響應式狀態
|
|
1402
|
+
var getResponsiveState = useCallback(function () {
|
|
1403
|
+
return {
|
|
1404
|
+
isMobile: isMobile,
|
|
1405
|
+
isTablet: isTablet,
|
|
1406
|
+
isDesktop: isDesktop,
|
|
1407
|
+
screenWidth: screenWidth,
|
|
1408
|
+
screenHeight: screenHeight
|
|
1409
|
+
};
|
|
1410
|
+
}, [isMobile, isTablet, isDesktop, screenWidth, screenHeight]);
|
|
1411
|
+
return {
|
|
1412
|
+
// 狀態
|
|
1413
|
+
isMobile: isMobile,
|
|
1414
|
+
isTablet: isTablet,
|
|
1415
|
+
isDesktop: isDesktop,
|
|
1416
|
+
screenWidth: screenWidth,
|
|
1417
|
+
screenHeight: screenHeight,
|
|
1418
|
+
// 取得狀態函數
|
|
1419
|
+
getResponsiveState: getResponsiveState
|
|
1420
|
+
};
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
/**
|
|
1424
|
+
* useTableSort - 處理表格排序邏輯的 Hook
|
|
1425
|
+
*
|
|
1426
|
+
* @param {Object} options - 配置選項
|
|
1427
|
+
* @param {boolean} options.sortable - 是否可排序(預設 true)
|
|
1428
|
+
* @param {Function} options.onSortChange - 當排序變化時的 callback(可選)
|
|
1429
|
+
*
|
|
1430
|
+
* @returns {Object} - 返回排序狀態和操作函數
|
|
1431
|
+
*/
|
|
1432
|
+
function useTableSort() {
|
|
1433
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1434
|
+
_ref$sortable = _ref.sortable,
|
|
1435
|
+
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
1436
|
+
onSortChange = _ref.onSortChange;
|
|
1437
|
+
// 排序狀態
|
|
1438
|
+
var _useState = useState({
|
|
1439
|
+
key: null,
|
|
1440
|
+
direction: "asc"
|
|
1441
|
+
}),
|
|
1442
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1443
|
+
sortConfig = _useState2[0],
|
|
1444
|
+
setSortConfig = _useState2[1];
|
|
1445
|
+
|
|
1446
|
+
// 處理排序
|
|
1447
|
+
var handleSort = useCallback(function (key) {
|
|
1448
|
+
if (!sortable) return;
|
|
1449
|
+
setSortConfig(function (prev) {
|
|
1450
|
+
var direction = "asc";
|
|
1451
|
+
if (prev.key === key && prev.direction === "asc") {
|
|
1452
|
+
direction = "desc";
|
|
1453
|
+
}
|
|
1454
|
+
return {
|
|
1455
|
+
key: key,
|
|
1456
|
+
direction: direction
|
|
1457
|
+
};
|
|
1458
|
+
});
|
|
1459
|
+
onSortChange === null || onSortChange === void 0 || onSortChange();
|
|
1460
|
+
}, [sortable, onSortChange]);
|
|
1461
|
+
|
|
1462
|
+
// 重置排序
|
|
1463
|
+
var resetSort = useCallback(function () {
|
|
1464
|
+
setSortConfig({
|
|
1465
|
+
key: null,
|
|
1466
|
+
direction: "asc"
|
|
1467
|
+
});
|
|
1468
|
+
onSortChange === null || onSortChange === void 0 || onSortChange();
|
|
1469
|
+
}, [onSortChange]);
|
|
1470
|
+
|
|
1471
|
+
// 設定排序
|
|
1472
|
+
var setSort = useCallback(function (key) {
|
|
1473
|
+
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "asc";
|
|
1474
|
+
setSortConfig({
|
|
1475
|
+
key: key,
|
|
1476
|
+
direction: direction
|
|
1477
|
+
});
|
|
1478
|
+
onSortChange === null || onSortChange === void 0 || onSortChange();
|
|
1479
|
+
}, [onSortChange]);
|
|
1480
|
+
|
|
1481
|
+
// 切換排序方向
|
|
1482
|
+
var toggleSortDirection = useCallback(function () {
|
|
1483
|
+
setSortConfig(function (prev) {
|
|
1484
|
+
return _objectSpread2(_objectSpread2({}, prev), {}, {
|
|
1485
|
+
direction: prev.direction === "asc" ? "desc" : "asc"
|
|
1486
|
+
});
|
|
1487
|
+
});
|
|
1488
|
+
onSortChange === null || onSortChange === void 0 || onSortChange();
|
|
1489
|
+
}, [onSortChange]);
|
|
1490
|
+
|
|
1491
|
+
// 計算屬性
|
|
1492
|
+
var isSorted = sortConfig.key !== null;
|
|
1493
|
+
var sortBy = sortConfig.key;
|
|
1494
|
+
var sortOrder = sortConfig.direction;
|
|
1495
|
+
|
|
1496
|
+
// 取得排序狀態
|
|
1497
|
+
var getSortState = useCallback(function () {
|
|
1498
|
+
return {
|
|
1499
|
+
sortConfig: sortConfig,
|
|
1500
|
+
sortBy: sortBy,
|
|
1501
|
+
sortOrder: sortOrder,
|
|
1502
|
+
isSorted: isSorted
|
|
1503
|
+
};
|
|
1504
|
+
}, [sortConfig, sortBy, sortOrder, isSorted]);
|
|
1505
|
+
return {
|
|
1506
|
+
// 狀態
|
|
1507
|
+
sortConfig: sortConfig,
|
|
1508
|
+
sortBy: sortBy,
|
|
1509
|
+
sortOrder: sortOrder,
|
|
1510
|
+
isSorted: isSorted,
|
|
1511
|
+
// 狀態 setter
|
|
1512
|
+
setSortConfig: setSortConfig,
|
|
1513
|
+
// 操作函數
|
|
1514
|
+
handleSort: handleSort,
|
|
1515
|
+
resetSort: resetSort,
|
|
1516
|
+
setSort: setSort,
|
|
1517
|
+
toggleSortDirection: toggleSortDirection,
|
|
1518
|
+
// 取得狀態函數
|
|
1519
|
+
getSortState: getSortState
|
|
1520
|
+
};
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
/**
|
|
1524
|
+
* 表格尺寸計算 Hook
|
|
1525
|
+
* 處理欄位寬度計算、行高計算等尺寸相關邏輯
|
|
1526
|
+
*
|
|
1527
|
+
* @param {Object} options - 配置選項
|
|
1528
|
+
* @param {Array} options.columns - 欄位配置陣列
|
|
1529
|
+
* @param {boolean} options.enableAutoWidth - 是否啟用自動寬度計算
|
|
1530
|
+
* @param {string|number} options.tableWidth - 表格寬度(支援百分比或數字)
|
|
1531
|
+
* @param {number} options.tableContainerWidth - 表格容器寬度(像素)
|
|
1532
|
+
* @param {number} options.mainRowHeight - 主要行高
|
|
1533
|
+
* @param {number} options.mainColumnWidth - 主要欄位寬度
|
|
1534
|
+
* @param {boolean} options.isDev - 開發模式(顯示 debug 訊息)
|
|
1535
|
+
* @returns {Object} 包含尺寸計算相關的函數
|
|
1536
|
+
*/
|
|
1537
|
+
var useTableDimensions = function useTableDimensions(_ref) {
|
|
1538
|
+
var _ref$columns = _ref.columns,
|
|
1539
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
1540
|
+
_ref$enableAutoWidth = _ref.enableAutoWidth,
|
|
1541
|
+
enableAutoWidth = _ref$enableAutoWidth === void 0 ? false : _ref$enableAutoWidth,
|
|
1542
|
+
_ref$tableWidth = _ref.tableWidth,
|
|
1543
|
+
tableWidth = _ref$tableWidth === void 0 ? "200%" : _ref$tableWidth,
|
|
1544
|
+
_ref$tableContainerWi = _ref.tableContainerWidth,
|
|
1545
|
+
tableContainerWidth = _ref$tableContainerWi === void 0 ? 1000 : _ref$tableContainerWi,
|
|
1546
|
+
mainRowHeight = _ref.mainRowHeight,
|
|
1547
|
+
mainColumnWidth = _ref.mainColumnWidth,
|
|
1548
|
+
_ref$isDev = _ref.isDev,
|
|
1549
|
+
isDev = _ref$isDev === void 0 ? false : _ref$isDev;
|
|
1550
|
+
/**
|
|
1551
|
+
* 計算每個欄位的實際寬度
|
|
1552
|
+
* @returns {Object|null} 欄位寬度映射 { columnId: widthInPx } 或 null(不啟用時)
|
|
1553
|
+
*/
|
|
1554
|
+
var calculateColumnWidths = useMemo(function () {
|
|
1555
|
+
// 如果沒有啟用自動寬度,返回 null(使用舊邏輯)
|
|
1556
|
+
if (!enableAutoWidth) return null;
|
|
1557
|
+
|
|
1558
|
+
// 解析 tableWidth(支援百分比字串,如 "200%")
|
|
1559
|
+
var widthPercentage = typeof tableWidth === "string" && tableWidth.endsWith("%") ? parseFloat(tableWidth) : 200; // 預設 200%
|
|
1560
|
+
|
|
1561
|
+
// 計算實際總寬度
|
|
1562
|
+
var totalWidth = tableContainerWidth * widthPercentage / 100;
|
|
1563
|
+
|
|
1564
|
+
// 統計固定寬度和彈性欄位
|
|
1565
|
+
var totalFixedWidth = 0;
|
|
1566
|
+
var totalFlexRatio = 0;
|
|
1567
|
+
var widthMap = {};
|
|
1568
|
+
|
|
1569
|
+
// 第一輪:計算固定寬度總和和彈性比例總和
|
|
1570
|
+
columns.forEach(function (column) {
|
|
1571
|
+
if (column.width && typeof column.width === "number") {
|
|
1572
|
+
// 固定 px 寬度
|
|
1573
|
+
totalFixedWidth += column.width;
|
|
1574
|
+
widthMap[column.dataField] = {
|
|
1575
|
+
type: "fixed",
|
|
1576
|
+
value: column.width
|
|
1577
|
+
};
|
|
1578
|
+
} else {
|
|
1579
|
+
// 彈性寬度(使用 flexRatio 或預設 1)
|
|
1580
|
+
var flexRatio = column.flexRatio || 1;
|
|
1581
|
+
totalFlexRatio += flexRatio;
|
|
1582
|
+
widthMap[column.dataField] = {
|
|
1583
|
+
type: "flex",
|
|
1584
|
+
ratio: flexRatio
|
|
1585
|
+
};
|
|
1586
|
+
}
|
|
1587
|
+
});
|
|
1588
|
+
|
|
1589
|
+
// 計算剩餘寬度
|
|
1590
|
+
var remainingWidth = totalWidth - totalFixedWidth;
|
|
1591
|
+
|
|
1592
|
+
// 第二輪:計算彈性欄位的實際寬度
|
|
1593
|
+
var result = {};
|
|
1594
|
+
columns.forEach(function (column) {
|
|
1595
|
+
var info = widthMap[column.dataField];
|
|
1596
|
+
if (info.type === "fixed") {
|
|
1597
|
+
result[column.dataField] = info.value;
|
|
1598
|
+
} else {
|
|
1599
|
+
// 按比例分配剩餘寬度
|
|
1600
|
+
result[column.dataField] = totalFlexRatio > 0 ? remainingWidth * info.ratio / totalFlexRatio : 0;
|
|
1601
|
+
}
|
|
1602
|
+
});
|
|
1603
|
+
if (isDev) {
|
|
1604
|
+
console.log("📊 自動寬度計算:", {
|
|
1605
|
+
totalWidth: totalWidth,
|
|
1606
|
+
totalFixedWidth: totalFixedWidth,
|
|
1607
|
+
remainingWidth: remainingWidth,
|
|
1608
|
+
totalFlexRatio: totalFlexRatio,
|
|
1609
|
+
result: result
|
|
1610
|
+
});
|
|
1611
|
+
}
|
|
1612
|
+
return result;
|
|
1613
|
+
}, [columns, enableAutoWidth, tableWidth, tableContainerWidth, isDev]);
|
|
1614
|
+
|
|
1615
|
+
/**
|
|
1616
|
+
* 通用的尺寸計算函數
|
|
1617
|
+
* @param {number} mainSize - 主要尺寸
|
|
1618
|
+
* @param {number} singleSize - 單獨尺寸
|
|
1619
|
+
* @returns {string} CSS 尺寸值
|
|
1620
|
+
*/
|
|
1621
|
+
var calculateSize = useCallback(function (mainSize, singleSize) {
|
|
1622
|
+
if (singleSize) return "".concat(singleSize, "px");
|
|
1623
|
+
if (mainSize) return "".concat(mainSize, "px");
|
|
1624
|
+
return "auto";
|
|
1625
|
+
}, []);
|
|
1626
|
+
|
|
1627
|
+
/**
|
|
1628
|
+
* 計算行高
|
|
1629
|
+
* @param {number} singleRowHeight - 單獨行高
|
|
1630
|
+
* @returns {string} CSS 高度值
|
|
1631
|
+
*/
|
|
1632
|
+
var rowHeight = useCallback(function (singleRowHeight) {
|
|
1633
|
+
return calculateSize(mainRowHeight, singleRowHeight);
|
|
1634
|
+
}, [mainRowHeight, calculateSize]);
|
|
1635
|
+
|
|
1636
|
+
/**
|
|
1637
|
+
* 計算欄位寬度
|
|
1638
|
+
* @param {number} singleColumnWidth - 單獨欄位寬度
|
|
1639
|
+
* @returns {string} CSS 寬度值
|
|
1640
|
+
*/
|
|
1641
|
+
var columnWidth = useCallback(function (singleColumnWidth) {
|
|
1642
|
+
return calculateSize(mainColumnWidth, singleColumnWidth);
|
|
1643
|
+
}, [mainColumnWidth, calculateSize]);
|
|
1644
|
+
|
|
1645
|
+
/**
|
|
1646
|
+
* 獲取網格尺寸(包含寬度和高度)
|
|
1647
|
+
* @param {Object} column - 欄位配置
|
|
1648
|
+
* @param {Object} options - 選項
|
|
1649
|
+
* @param {boolean} options.isTitle - 是否為標題列
|
|
1650
|
+
* @returns {Object} CSS 尺寸物件
|
|
1651
|
+
*/
|
|
1652
|
+
var getGridSize = useCallback(function (column) {
|
|
1653
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
1654
|
+
var _options$isTitle = options.isTitle,
|
|
1655
|
+
isTitle = _options$isTitle === void 0 ? false : _options$isTitle;
|
|
1656
|
+
var width = column.width,
|
|
1657
|
+
height = column.height,
|
|
1658
|
+
_column$minWidth = column.minWidth,
|
|
1659
|
+
minWidth = _column$minWidth === void 0 ? width : _column$minWidth,
|
|
1660
|
+
_column$maxWidth = column.maxWidth,
|
|
1661
|
+
maxWidth = _column$maxWidth === void 0 ? width : _column$maxWidth,
|
|
1662
|
+
_column$minHeight = column.minHeight,
|
|
1663
|
+
minHeight = _column$minHeight === void 0 ? height : _column$minHeight,
|
|
1664
|
+
_column$maxHeight = column.maxHeight,
|
|
1665
|
+
maxHeight = _column$maxHeight === void 0 ? height : _column$maxHeight;
|
|
1666
|
+
var finalWidth, finalMinWidth, finalMaxWidth;
|
|
1667
|
+
if (enableAutoWidth && calculateColumnWidths) {
|
|
1668
|
+
// 自動計算的寬度
|
|
1669
|
+
var calculatedWidth = calculateColumnWidths[column.dataField];
|
|
1670
|
+
if (calculatedWidth) {
|
|
1671
|
+
finalWidth = "".concat(calculatedWidth, "px");
|
|
1672
|
+
finalMinWidth = minWidth ? "".concat(minWidth, "px") : "".concat(calculatedWidth * 0.5, "px"); // 預設最小為 50%
|
|
1673
|
+
finalMaxWidth = maxWidth ? "".concat(maxWidth, "px") : "".concat(calculatedWidth * 1.5, "px"); // 預設最大為 150%
|
|
1674
|
+
} else {
|
|
1675
|
+
// 如果計算失敗,fallback 到舊邏輯
|
|
1676
|
+
finalWidth = columnWidth(width);
|
|
1677
|
+
finalMinWidth = columnWidth(minWidth);
|
|
1678
|
+
finalMaxWidth = columnWidth(maxWidth);
|
|
1679
|
+
}
|
|
1680
|
+
} else {
|
|
1681
|
+
// 舊邏輯:保持原樣,向後兼容
|
|
1682
|
+
finalWidth = columnWidth(width);
|
|
1683
|
+
finalMinWidth = columnWidth(minWidth);
|
|
1684
|
+
finalMaxWidth = columnWidth(maxWidth);
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
// 基本結果(只有寬度)
|
|
1688
|
+
var result = {
|
|
1689
|
+
width: finalWidth,
|
|
1690
|
+
minWidth: finalMinWidth,
|
|
1691
|
+
maxWidth: finalMaxWidth
|
|
1692
|
+
};
|
|
1693
|
+
|
|
1694
|
+
// 只有當 isTitle = false 時才添加高度相關屬性
|
|
1695
|
+
if (!isTitle) {
|
|
1696
|
+
var finalHeight = rowHeight(height);
|
|
1697
|
+
var finalMinHeight = rowHeight(minHeight);
|
|
1698
|
+
var finalMaxHeight = rowHeight(maxHeight);
|
|
1699
|
+
result.height = finalHeight;
|
|
1700
|
+
result.minHeight = finalMinHeight;
|
|
1701
|
+
result.maxHeight = finalMaxHeight;
|
|
1702
|
+
}
|
|
1703
|
+
return result;
|
|
1704
|
+
}, [enableAutoWidth, calculateColumnWidths, columnWidth, rowHeight]);
|
|
1705
|
+
return {
|
|
1706
|
+
getGridSize: getGridSize,
|
|
1707
|
+
calculateColumnWidths: calculateColumnWidths,
|
|
1708
|
+
rowHeight: rowHeight,
|
|
1709
|
+
columnWidth: columnWidth
|
|
1710
|
+
};
|
|
1711
|
+
};
|
|
1712
|
+
|
|
1713
|
+
/**
|
|
1714
|
+
* 表格分頁 Hook
|
|
1715
|
+
* 處理分頁狀態和邏輯
|
|
1716
|
+
*
|
|
1717
|
+
* @param {Object} options - 配置選項
|
|
1718
|
+
* @param {number} options.pageSize - 初始每頁顯示數量
|
|
1719
|
+
* @param {number} options.totalCount - 總記錄數
|
|
1720
|
+
* @returns {Object} 包含分頁相關的狀態和方法
|
|
1721
|
+
*/
|
|
1722
|
+
var useTablePagination = function useTablePagination(_ref) {
|
|
1723
|
+
var _ref$pageSize = _ref.pageSize,
|
|
1724
|
+
pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
|
|
1725
|
+
_ref$totalCount = _ref.totalCount,
|
|
1726
|
+
totalCount = _ref$totalCount === void 0 ? 0 : _ref$totalCount;
|
|
1727
|
+
// 分頁狀態 (使用 0-based index)
|
|
1728
|
+
var _useState = useState(0),
|
|
1729
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
1730
|
+
currentPage = _useState2[0],
|
|
1731
|
+
setCurrentPage = _useState2[1];
|
|
1732
|
+
var _useState3 = useState(pageSize),
|
|
1733
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
1734
|
+
currentPageSize = _useState4[0],
|
|
1735
|
+
setCurrentPageSize = _useState4[1];
|
|
1736
|
+
|
|
1737
|
+
// 計算總頁數
|
|
1738
|
+
var totalPages = useMemo(function () {
|
|
1739
|
+
return Math.ceil(totalCount / currentPageSize);
|
|
1740
|
+
}, [totalCount, currentPageSize]);
|
|
1741
|
+
|
|
1742
|
+
// 分頁處理
|
|
1743
|
+
var handlePageChange = useCallback(function (page) {
|
|
1744
|
+
setCurrentPage(page);
|
|
1745
|
+
}, []);
|
|
1746
|
+
|
|
1747
|
+
// 處理每頁顯示數量變更
|
|
1748
|
+
var handlePageSizeChange = useCallback(function (newPageSize) {
|
|
1749
|
+
setCurrentPageSize(newPageSize);
|
|
1750
|
+
setCurrentPage(0); // 重置到第一頁
|
|
1751
|
+
}, []);
|
|
1752
|
+
|
|
1753
|
+
// 重置分頁到第一頁
|
|
1754
|
+
var resetToFirstPage = useCallback(function () {
|
|
1755
|
+
setCurrentPage(0);
|
|
1756
|
+
}, []);
|
|
1757
|
+
|
|
1758
|
+
// 分頁資訊(供外部使用)
|
|
1759
|
+
var paginationInfo = useMemo(function () {
|
|
1760
|
+
return {
|
|
1761
|
+
currentPage: currentPage,
|
|
1762
|
+
currentPageSize: currentPageSize,
|
|
1763
|
+
totalPages: totalPages,
|
|
1764
|
+
totalCount: totalCount,
|
|
1765
|
+
hasNextPage: currentPage < totalPages - 1,
|
|
1766
|
+
hasPreviousPage: currentPage > 0,
|
|
1767
|
+
startIndex: currentPage * currentPageSize + 1,
|
|
1768
|
+
endIndex: Math.min((currentPage + 1) * currentPageSize, totalCount),
|
|
1769
|
+
isFirstPage: currentPage === 0,
|
|
1770
|
+
isLastPage: currentPage === totalPages - 1
|
|
1771
|
+
};
|
|
1772
|
+
}, [currentPage, currentPageSize, totalPages, totalCount]);
|
|
1773
|
+
return {
|
|
1774
|
+
// 狀態
|
|
1775
|
+
currentPage: currentPage,
|
|
1776
|
+
setCurrentPage: setCurrentPage,
|
|
1777
|
+
currentPageSize: currentPageSize,
|
|
1778
|
+
setCurrentPageSize: setCurrentPageSize,
|
|
1779
|
+
totalPages: totalPages,
|
|
1780
|
+
// 方法
|
|
1781
|
+
handlePageChange: handlePageChange,
|
|
1782
|
+
handlePageSizeChange: handlePageSizeChange,
|
|
1783
|
+
resetToFirstPage: resetToFirstPage,
|
|
1784
|
+
// 分頁資訊
|
|
1785
|
+
paginationInfo: paginationInfo
|
|
1786
|
+
};
|
|
1787
|
+
};
|
|
1788
|
+
|
|
1789
|
+
/**
|
|
1790
|
+
* 表格 API Hook
|
|
1791
|
+
* 處理表格對外暴露的所有方法和狀態
|
|
1792
|
+
* 使用 useImperativeHandle 將內部狀態和方法暴露給 ref
|
|
1793
|
+
*
|
|
1794
|
+
* @param {Object} options - 配置選項
|
|
1795
|
+
* @param {React.Ref} options.ref - 外部傳入的 ref
|
|
1796
|
+
* @param {Object} options.dataState - 資料狀態
|
|
1797
|
+
* @param {Object} options.paginationState - 分頁狀態
|
|
1798
|
+
* @param {Object} options.filterState - 篩選狀態
|
|
1799
|
+
* @param {Object} options.sortState - 排序狀態
|
|
1800
|
+
* @param {Object} options.scrollState - 滾動狀態
|
|
1801
|
+
* @param {Object} options.responsiveState - 響應式狀態
|
|
1802
|
+
* @param {Object} options.config - 表格配置
|
|
1803
|
+
* @param {Object} options.interactionState - 互動狀態
|
|
1804
|
+
*/
|
|
1805
|
+
var useTableApi = function useTableApi(_ref) {
|
|
1806
|
+
var ref = _ref.ref,
|
|
1807
|
+
_ref$dataState = _ref.dataState,
|
|
1808
|
+
data = _ref$dataState.data,
|
|
1809
|
+
loading = _ref$dataState.loading,
|
|
1810
|
+
error = _ref$dataState.error,
|
|
1811
|
+
totalCount = _ref$dataState.totalCount,
|
|
1812
|
+
executeDataRequest = _ref$dataState.executeDataRequest,
|
|
1813
|
+
_ref$paginationState = _ref.paginationState,
|
|
1814
|
+
currentPage = _ref$paginationState.currentPage,
|
|
1815
|
+
setCurrentPage = _ref$paginationState.setCurrentPage,
|
|
1816
|
+
currentPageSize = _ref$paginationState.currentPageSize,
|
|
1817
|
+
setCurrentPageSize = _ref$paginationState.setCurrentPageSize,
|
|
1818
|
+
totalPages = _ref$paginationState.totalPages,
|
|
1819
|
+
_ref$filterState = _ref.filterState,
|
|
1820
|
+
filterText = _ref$filterState.filterText,
|
|
1821
|
+
setFilterText = _ref$filterState.setFilterText,
|
|
1822
|
+
filterColumn = _ref$filterState.filterColumn,
|
|
1823
|
+
setFilterColumn = _ref$filterState.setFilterColumn,
|
|
1824
|
+
advancedFilters = _ref$filterState.advancedFilters,
|
|
1825
|
+
setAdvancedFilters = _ref$filterState.setAdvancedFilters,
|
|
1826
|
+
showAdvancedFilter = _ref$filterState.showAdvancedFilter,
|
|
1827
|
+
_ref$sortState = _ref.sortState,
|
|
1828
|
+
sortConfig = _ref$sortState.sortConfig,
|
|
1829
|
+
resetSort = _ref$sortState.resetSort,
|
|
1830
|
+
_ref$scrollState = _ref.scrollState,
|
|
1831
|
+
scrollPosition = _ref$scrollState.scrollPosition,
|
|
1832
|
+
scrollbarInfo = _ref$scrollState.scrollbarInfo,
|
|
1833
|
+
tableWrapperRef = _ref$scrollState.tableWrapperRef,
|
|
1834
|
+
scrollControl = _ref$scrollState.scrollControl,
|
|
1835
|
+
_ref$responsiveState = _ref.responsiveState,
|
|
1836
|
+
isMobile = _ref$responsiveState.isMobile,
|
|
1837
|
+
isTablet = _ref$responsiveState.isTablet,
|
|
1838
|
+
_ref$config = _ref.config,
|
|
1839
|
+
sortable = _ref$config.sortable,
|
|
1840
|
+
filterable = _ref$config.filterable,
|
|
1841
|
+
className = _ref$config.className,
|
|
1842
|
+
enableAutoWidth = _ref$config.enableAutoWidth,
|
|
1843
|
+
isDev = _ref$config.isDev,
|
|
1844
|
+
columns = _ref$config.columns,
|
|
1845
|
+
name = _ref$config.name,
|
|
1846
|
+
isHovered = _ref.interactionState.isHovered;
|
|
1847
|
+
useImperativeHandle(ref, function () {
|
|
1848
|
+
return {
|
|
1849
|
+
// ========== 數據操作方法 ==========
|
|
1850
|
+
|
|
1851
|
+
// 執行數據請求的函數 - 這是外部會調用的主要函數
|
|
1852
|
+
executeRequest: function executeRequest() {
|
|
1853
|
+
var customParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1854
|
+
var params = _objectSpread2({
|
|
1855
|
+
page: currentPage,
|
|
1856
|
+
pageSize: currentPageSize,
|
|
1857
|
+
search: filterText,
|
|
1858
|
+
searchColumn: filterColumn,
|
|
1859
|
+
advancedFilters: advancedFilters,
|
|
1860
|
+
sortBy: sortConfig.key,
|
|
1861
|
+
sortOrder: sortConfig.direction
|
|
1862
|
+
}, customParams);
|
|
1863
|
+
executeDataRequest(params);
|
|
1864
|
+
},
|
|
1865
|
+
// 重新載入(使用當前參數)
|
|
1866
|
+
reload: function reload() {
|
|
1867
|
+
var params = {
|
|
1868
|
+
page: currentPage,
|
|
1869
|
+
pageSize: currentPageSize,
|
|
1870
|
+
search: filterText,
|
|
1871
|
+
searchColumn: filterColumn,
|
|
1872
|
+
advancedFilters: advancedFilters,
|
|
1873
|
+
sortBy: sortConfig.key,
|
|
1874
|
+
sortOrder: sortConfig.direction
|
|
1875
|
+
};
|
|
1876
|
+
executeDataRequest(params);
|
|
1877
|
+
},
|
|
1878
|
+
// 重置篩選並執行請求
|
|
1879
|
+
resetFilters: function resetFilters() {
|
|
1880
|
+
setFilterText("");
|
|
1881
|
+
setFilterColumn("all");
|
|
1882
|
+
setAdvancedFilters({});
|
|
1883
|
+
setCurrentPage(0);
|
|
1884
|
+
resetSort();
|
|
1885
|
+
|
|
1886
|
+
// 重置後立即執行請求
|
|
1887
|
+
var params = {
|
|
1888
|
+
page: 0,
|
|
1889
|
+
pageSize: currentPageSize,
|
|
1890
|
+
search: "",
|
|
1891
|
+
searchColumn: "all",
|
|
1892
|
+
advancedFilters: {},
|
|
1893
|
+
sortBy: null,
|
|
1894
|
+
sortOrder: "asc"
|
|
1895
|
+
};
|
|
1896
|
+
executeDataRequest(params);
|
|
1897
|
+
},
|
|
1898
|
+
// ========== 分頁操作方法 ==========
|
|
1899
|
+
|
|
1900
|
+
setPage: function setPage(page) {
|
|
1901
|
+
setCurrentPage(page);
|
|
1902
|
+
},
|
|
1903
|
+
setPageSize: function setPageSize(size) {
|
|
1904
|
+
setCurrentPageSize(size);
|
|
1905
|
+
setCurrentPage(0);
|
|
1906
|
+
},
|
|
1907
|
+
// ========== 狀態獲取方法 ==========
|
|
1908
|
+
|
|
1909
|
+
// 完整的狀態 API - 提供所有詳細信息
|
|
1910
|
+
getState: function getState() {
|
|
1911
|
+
return {
|
|
1912
|
+
// 基本數據狀態
|
|
1913
|
+
data: data,
|
|
1914
|
+
loading: loading,
|
|
1915
|
+
error: error,
|
|
1916
|
+
totalCount: totalCount,
|
|
1917
|
+
tableWrapperRef: tableWrapperRef.current,
|
|
1918
|
+
tableName: name,
|
|
1919
|
+
// 分頁狀態
|
|
1920
|
+
pagination: {
|
|
1921
|
+
currentPage: currentPage,
|
|
1922
|
+
pageSize: currentPageSize,
|
|
1923
|
+
totalPages: Math.ceil(totalCount / currentPageSize),
|
|
1924
|
+
hasNextPage: currentPage < Math.ceil(totalCount / currentPageSize),
|
|
1925
|
+
hasPreviousPage: currentPage > 1,
|
|
1926
|
+
startIndex: (currentPage - 1) * currentPageSize + 1,
|
|
1927
|
+
endIndex: Math.min(currentPage * currentPageSize, totalCount),
|
|
1928
|
+
isFirstPage: currentPage === 1,
|
|
1929
|
+
isLastPage: currentPage === Math.ceil(totalCount / currentPageSize)
|
|
1930
|
+
},
|
|
1931
|
+
// 滾動狀態
|
|
1932
|
+
scroll: {
|
|
1933
|
+
position: scrollPosition,
|
|
1934
|
+
scrollbar: scrollbarInfo,
|
|
1935
|
+
isAtTop: scrollPosition.verticalPercent === 0,
|
|
1936
|
+
isAtBottom: scrollPosition.verticalPercent === 100,
|
|
1937
|
+
isAtLeft: scrollPosition.horizontalPercent === 0,
|
|
1938
|
+
isAtRight: scrollPosition.horizontalPercent === 100,
|
|
1939
|
+
canScrollVertically: scrollbarInfo.hasVertical,
|
|
1940
|
+
canScrollHorizontally: scrollbarInfo.hasHorizontal
|
|
1941
|
+
},
|
|
1942
|
+
// 排序狀態
|
|
1943
|
+
sort: {
|
|
1944
|
+
sortConfig: sortConfig,
|
|
1945
|
+
sortBy: sortConfig.key,
|
|
1946
|
+
sortOrder: sortConfig.direction,
|
|
1947
|
+
isSorted: sortConfig.key !== null
|
|
1948
|
+
},
|
|
1949
|
+
// 篩選狀態
|
|
1950
|
+
filter: {
|
|
1951
|
+
filterText: filterText,
|
|
1952
|
+
filterColumn: filterColumn,
|
|
1953
|
+
advancedFilters: advancedFilters,
|
|
1954
|
+
showAdvancedFilter: showAdvancedFilter,
|
|
1955
|
+
hasBasicFilter: filterText !== "" || filterColumn !== "all",
|
|
1956
|
+
hasAdvancedFilter: Object.keys(advancedFilters).length > 0,
|
|
1957
|
+
hasAnyFilter: filterText !== "" || filterColumn !== "all" || Object.keys(advancedFilters).length > 0,
|
|
1958
|
+
activeFiltersCount: Object.keys(advancedFilters).filter(function (key) {
|
|
1959
|
+
return advancedFilters[key];
|
|
1960
|
+
}).length + (filterText ? 1 : 0)
|
|
1961
|
+
},
|
|
1962
|
+
// 表格配置狀態
|
|
1963
|
+
config: {
|
|
1964
|
+
sortable: sortable,
|
|
1965
|
+
filterable: filterable,
|
|
1966
|
+
className: className,
|
|
1967
|
+
enableAutoWidth: enableAutoWidth,
|
|
1968
|
+
isDev: isDev,
|
|
1969
|
+
columnsCount: columns.length,
|
|
1970
|
+
columns: columns.map(function (col) {
|
|
1971
|
+
return {
|
|
1972
|
+
dataField: col.dataField,
|
|
1973
|
+
title: col.title,
|
|
1974
|
+
width: col.width,
|
|
1975
|
+
sortable: sortable
|
|
1976
|
+
};
|
|
1977
|
+
})
|
|
1978
|
+
},
|
|
1979
|
+
// 響應式狀態
|
|
1980
|
+
responsive: {
|
|
1981
|
+
isMobile: isMobile,
|
|
1982
|
+
isTablet: isTablet,
|
|
1983
|
+
isDesktop: !isMobile && !isTablet,
|
|
1984
|
+
screenWidth: window.innerWidth,
|
|
1985
|
+
screenHeight: window.innerHeight
|
|
1986
|
+
},
|
|
1987
|
+
// 元數據
|
|
1988
|
+
meta: {
|
|
1989
|
+
timestamp: new Date().toISOString(),
|
|
1990
|
+
version: "1.0.0",
|
|
1991
|
+
componentName: "UdiTable"
|
|
1992
|
+
},
|
|
1993
|
+
isHovered: isHovered
|
|
1994
|
+
};
|
|
1995
|
+
},
|
|
1996
|
+
// 簡化版狀態 API - 只返回核心信息
|
|
1997
|
+
getCoreState: function getCoreState() {
|
|
1998
|
+
return {
|
|
1999
|
+
currentPage: currentPage,
|
|
2000
|
+
totalPages: Math.ceil(totalCount / currentPageSize),
|
|
2001
|
+
totalCount: totalCount,
|
|
2002
|
+
pageSize: currentPageSize,
|
|
2003
|
+
loading: loading,
|
|
2004
|
+
error: error,
|
|
2005
|
+
scrollPosition: scrollPosition,
|
|
2006
|
+
hasData: data.length > 0
|
|
2007
|
+
};
|
|
2008
|
+
},
|
|
2009
|
+
// 滾動位置 API
|
|
2010
|
+
getScrollState: function getScrollState() {
|
|
2011
|
+
return _objectSpread2(_objectSpread2(_objectSpread2({}, scrollPosition), scrollbarInfo), {}, {
|
|
2012
|
+
isAtTop: scrollPosition.verticalPercent === 0,
|
|
2013
|
+
isAtBottom: scrollPosition.verticalPercent === 100,
|
|
2014
|
+
isAtLeft: scrollPosition.horizontalPercent === 0,
|
|
2015
|
+
isAtRight: scrollPosition.horizontalPercent === 100
|
|
2016
|
+
});
|
|
2017
|
+
},
|
|
2018
|
+
// 分頁狀態 API
|
|
2019
|
+
getPaginationState: function getPaginationState() {
|
|
2020
|
+
return {
|
|
2021
|
+
currentPage: currentPage + 1,
|
|
2022
|
+
// Display 1-based page number
|
|
2023
|
+
totalPages: Math.ceil(totalCount / currentPageSize),
|
|
2024
|
+
pageSize: currentPageSize,
|
|
2025
|
+
totalCount: totalCount,
|
|
2026
|
+
hasNextPage: currentPage < Math.ceil(totalCount / currentPageSize) - 1,
|
|
2027
|
+
hasPreviousPage: currentPage > 0,
|
|
2028
|
+
startIndex: currentPage * currentPageSize + 1,
|
|
2029
|
+
endIndex: Math.min((currentPage + 1) * currentPageSize, totalCount)
|
|
2030
|
+
};
|
|
2031
|
+
},
|
|
2032
|
+
// 篩選狀態 API
|
|
2033
|
+
getFilterState: function getFilterState() {
|
|
2034
|
+
return {
|
|
2035
|
+
filterText: filterText,
|
|
2036
|
+
filterColumn: filterColumn,
|
|
2037
|
+
advancedFilters: advancedFilters,
|
|
2038
|
+
showAdvancedFilter: showAdvancedFilter,
|
|
2039
|
+
hasAnyFilter: filterText !== "" || filterColumn !== "all" || Object.keys(advancedFilters).length > 0
|
|
2040
|
+
};
|
|
2041
|
+
},
|
|
2042
|
+
// 排序狀態 API
|
|
2043
|
+
getSortState: function getSortState() {
|
|
2044
|
+
return _objectSpread2(_objectSpread2({}, sortConfig), {}, {
|
|
2045
|
+
isSorted: sortConfig.key !== null
|
|
2046
|
+
});
|
|
2047
|
+
},
|
|
2048
|
+
// 滾動控制 API
|
|
2049
|
+
scrollControl: scrollControl,
|
|
2050
|
+
tableWrapperRef: tableWrapperRef.current
|
|
2051
|
+
};
|
|
2052
|
+
}, [data, loading, totalCount, error, currentPage, currentPageSize, sortConfig, filterText, filterColumn, advancedFilters, showAdvancedFilter, scrollPosition, scrollbarInfo, enableAutoWidth, isMobile, isTablet, sortable, filterable, className, isDev, columns, executeDataRequest, setFilterText, setFilterColumn, setAdvancedFilters, setCurrentPage, setCurrentPageSize, resetSort, scrollControl, tableWrapperRef, totalPages, name, isHovered]);
|
|
2053
|
+
};
|
|
2054
|
+
|
|
2055
|
+
/**
|
|
2056
|
+
* 表格互動 Hook
|
|
2057
|
+
* 處理表格的互動狀態(hover、dropdown 等)
|
|
2058
|
+
*
|
|
2059
|
+
* @param {Object} options - 配置選項
|
|
2060
|
+
* @param {boolean} options.syncTableControl - 是否同步表格控制
|
|
2061
|
+
* @param {React.RefObject} options.currentTableRef - 當前表格 ref
|
|
2062
|
+
* @param {React.RefObject} options.tableWrapperRef - 表格容器 ref
|
|
2063
|
+
* @returns {Object} 包含互動狀態和處理函數
|
|
2064
|
+
*/
|
|
2065
|
+
var useTableInteraction = function useTableInteraction(_ref) {
|
|
2066
|
+
var _ref$syncTableControl = _ref.syncTableControl,
|
|
2067
|
+
syncTableControl = _ref$syncTableControl === void 0 ? false : _ref$syncTableControl,
|
|
2068
|
+
_ref$currentTableRef = _ref.currentTableRef,
|
|
2069
|
+
currentTableRef = _ref$currentTableRef === void 0 ? null : _ref$currentTableRef,
|
|
2070
|
+
_ref$tableWrapperRef = _ref.tableWrapperRef,
|
|
2071
|
+
tableWrapperRef = _ref$tableWrapperRef === void 0 ? null : _ref$tableWrapperRef;
|
|
2072
|
+
// 互動狀態
|
|
2073
|
+
var _useState = useState(false),
|
|
2074
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
2075
|
+
isHovered = _useState2[0],
|
|
2076
|
+
setIsHovered = _useState2[1];
|
|
2077
|
+
var _useState3 = useState(false),
|
|
2078
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
2079
|
+
isDropdownOpen = _useState4[0],
|
|
2080
|
+
setIsDropdownOpen = _useState4[1];
|
|
2081
|
+
|
|
2082
|
+
// 滑鼠進入處理
|
|
2083
|
+
var handleMouseEnter = useCallback(function () {
|
|
2084
|
+
setIsHovered(true);
|
|
2085
|
+
if (syncTableControl && currentTableRef && tableWrapperRef) {
|
|
2086
|
+
currentTableRef.current = tableWrapperRef.current;
|
|
2087
|
+
}
|
|
2088
|
+
}, [syncTableControl, currentTableRef, tableWrapperRef]);
|
|
2089
|
+
|
|
2090
|
+
// 滑鼠離開處理(延遲 200ms)
|
|
2091
|
+
var handleMouseLeave = useCallback(function () {
|
|
2092
|
+
setTimeout(function () {
|
|
2093
|
+
setIsHovered(false);
|
|
2094
|
+
}, 200);
|
|
2095
|
+
}, []);
|
|
2096
|
+
|
|
2097
|
+
// Dropdown 獲得焦點處理
|
|
2098
|
+
var handleDropdownFocus = useCallback(function () {
|
|
2099
|
+
setIsDropdownOpen(true);
|
|
2100
|
+
}, []);
|
|
2101
|
+
|
|
2102
|
+
// Dropdown 失去焦點處理
|
|
2103
|
+
var handleDropdownBlur = useCallback(function () {
|
|
2104
|
+
setIsDropdownOpen(false);
|
|
2105
|
+
}, []);
|
|
2106
|
+
return {
|
|
2107
|
+
// 狀態
|
|
2108
|
+
isHovered: isHovered,
|
|
2109
|
+
isDropdownOpen: isDropdownOpen,
|
|
2110
|
+
// 處理函數
|
|
2111
|
+
handleMouseEnter: handleMouseEnter,
|
|
2112
|
+
handleMouseLeave: handleMouseLeave,
|
|
2113
|
+
handleDropdownFocus: handleDropdownFocus,
|
|
2114
|
+
handleDropdownBlur: handleDropdownBlur
|
|
2115
|
+
};
|
|
2116
|
+
};
|
|
2117
|
+
|
|
2118
|
+
var UdiTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
2119
|
+
var _ref$current;
|
|
2120
|
+
var _ref$onDataRequest = _ref.onDataRequest,
|
|
2121
|
+
onDataRequest = _ref$onDataRequest === void 0 ? null : _ref$onDataRequest,
|
|
2122
|
+
_ref$columns = _ref.columns,
|
|
2123
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
2124
|
+
_ref$pageSize = _ref.pageSize,
|
|
2125
|
+
pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
|
|
2126
|
+
_ref$sortable = _ref.sortable,
|
|
2127
|
+
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
2128
|
+
_ref$filterable = _ref.filterable,
|
|
2129
|
+
filterable = _ref$filterable === void 0 ? true : _ref$filterable,
|
|
2130
|
+
_ref$className = _ref.className,
|
|
2131
|
+
className = _ref$className === void 0 ? "" : _ref$className,
|
|
2132
|
+
_ref$isDev = _ref.isDev,
|
|
2133
|
+
isDev = _ref$isDev === void 0 ? false : _ref$isDev,
|
|
2134
|
+
_ref$syncTableControl = _ref.syncTableControl,
|
|
2135
|
+
syncTableControl = _ref$syncTableControl === void 0 ? false : _ref$syncTableControl,
|
|
2136
|
+
_ref$currentTableRef = _ref.currentTableRef,
|
|
2137
|
+
currentTableRef = _ref$currentTableRef === void 0 ? {
|
|
2138
|
+
currentTableRef: currentTableRef
|
|
2139
|
+
} : _ref$currentTableRef,
|
|
2140
|
+
_ref$name = _ref.name,
|
|
2141
|
+
name = _ref$name === void 0 ? null : _ref$name,
|
|
2142
|
+
setTablePage = _ref.setTablePage,
|
|
2143
|
+
_ref$actions = _ref.actions,
|
|
2144
|
+
actions = _ref$actions === void 0 ? [] : _ref$actions,
|
|
2145
|
+
_ref$actionFirst = _ref.actionFirst,
|
|
2146
|
+
actionFirst = _ref$actionFirst === void 0 ? false : _ref$actionFirst,
|
|
2147
|
+
_ref$paginationEnable = _ref.paginationEnabled,
|
|
2148
|
+
paginationEnabled = _ref$paginationEnable === void 0 ? true : _ref$paginationEnable,
|
|
2149
|
+
_ref$tableHeight = _ref.tableHeight,
|
|
2150
|
+
tableHeight = _ref$tableHeight === void 0 ? "60px" : _ref$tableHeight,
|
|
2151
|
+
_ref$tableWidth = _ref.tableWidth,
|
|
2152
|
+
tableWidth = _ref$tableWidth === void 0 ? "200%" : _ref$tableWidth,
|
|
2153
|
+
mainRowHeight = _ref.mainRowHeight,
|
|
2154
|
+
mainColumnWidth = _ref.mainColumnWidth,
|
|
2155
|
+
_ref$enableAutoWidth = _ref.enableAutoWidth,
|
|
2156
|
+
enableAutoWidth = _ref$enableAutoWidth === void 0 ? false : _ref$enableAutoWidth,
|
|
2157
|
+
_ref$tableContainerWi = _ref.tableContainerWidth,
|
|
2158
|
+
tableContainerWidth = _ref$tableContainerWi === void 0 ? 1000 : _ref$tableContainerWi;
|
|
2159
|
+
// 使用 useDataRequest hook 處理資料請求
|
|
2160
|
+
var _useDataRequest = useDataRequest({
|
|
2161
|
+
onDataRequest: onDataRequest,
|
|
2162
|
+
isDev: isDev
|
|
2163
|
+
}),
|
|
2164
|
+
data = _useDataRequest.data,
|
|
2165
|
+
loading = _useDataRequest.loading,
|
|
2166
|
+
totalCount = _useDataRequest.totalCount,
|
|
2167
|
+
error = _useDataRequest.error,
|
|
2168
|
+
executeDataRequest = _useDataRequest.executeDataRequest,
|
|
2169
|
+
debouncedDataRequest = _useDataRequest.debouncedDataRequest,
|
|
2170
|
+
initialLoad = _useDataRequest.initialLoad;
|
|
2171
|
+
|
|
2172
|
+
// 使用 useTableScroll hook 處理滾動邏輯
|
|
2173
|
+
var _useTableScroll = useTableScroll({
|
|
2174
|
+
data: data
|
|
2175
|
+
}),
|
|
2176
|
+
scrollPosition = _useTableScroll.scrollPosition,
|
|
2177
|
+
scrollbarInfo = _useTableScroll.scrollbarInfo,
|
|
2178
|
+
tableWrapperRef = _useTableScroll.tableWrapperRef,
|
|
2179
|
+
scrollControl = _useTableScroll.scrollControl;
|
|
2180
|
+
|
|
2181
|
+
// 使用 useResponsive hook 處理響應式邏輯
|
|
2182
|
+
var _useResponsive = useResponsive(),
|
|
2183
|
+
isMobile = _useResponsive.isMobile,
|
|
2184
|
+
isTablet = _useResponsive.isTablet;
|
|
2185
|
+
|
|
2186
|
+
// 使用 useTablePagination hook 處理分頁邏輯
|
|
2187
|
+
var _useTablePagination = useTablePagination({
|
|
2188
|
+
pageSize: pageSize,
|
|
2189
|
+
totalCount: totalCount
|
|
2190
|
+
}),
|
|
2191
|
+
currentPage = _useTablePagination.currentPage,
|
|
2192
|
+
setCurrentPage = _useTablePagination.setCurrentPage,
|
|
2193
|
+
currentPageSize = _useTablePagination.currentPageSize,
|
|
2194
|
+
setCurrentPageSize = _useTablePagination.setCurrentPageSize,
|
|
2195
|
+
totalPages = _useTablePagination.totalPages,
|
|
2196
|
+
handlePageChange = _useTablePagination.handlePageChange,
|
|
2197
|
+
handlePageSizeChange = _useTablePagination.handlePageSizeChange;
|
|
2198
|
+
|
|
2199
|
+
// 使用 useTableFilter hook 處理篩選邏輯
|
|
2200
|
+
var _useTableFilter = useTableFilter({
|
|
2201
|
+
onFilterChange: function onFilterChange() {
|
|
2202
|
+
return setCurrentPage(0);
|
|
2203
|
+
}
|
|
2204
|
+
}),
|
|
2205
|
+
filterText = _useTableFilter.filterText,
|
|
2206
|
+
filterColumn = _useTableFilter.filterColumn,
|
|
2207
|
+
showAdvancedFilter = _useTableFilter.showAdvancedFilter,
|
|
2208
|
+
advancedFilters = _useTableFilter.advancedFilters,
|
|
2209
|
+
setFilterText = _useTableFilter.setFilterText,
|
|
2210
|
+
setFilterColumn = _useTableFilter.setFilterColumn,
|
|
2211
|
+
setAdvancedFilters = _useTableFilter.setAdvancedFilters,
|
|
2212
|
+
resetFilter = _useTableFilter.resetFilter,
|
|
2213
|
+
handleAdvancedFilterChange = _useTableFilter.handleAdvancedFilterChange,
|
|
2214
|
+
clearAdvancedFilters = _useTableFilter.clearAdvancedFilters,
|
|
2215
|
+
toggleAdvancedFilter = _useTableFilter.toggleAdvancedFilter;
|
|
2216
|
+
|
|
2217
|
+
// 使用 useTableSort hook 處理排序邏輯
|
|
2218
|
+
var _useTableSort = useTableSort({
|
|
2219
|
+
sortable: sortable,
|
|
2220
|
+
onSortChange: function onSortChange() {
|
|
2221
|
+
return setCurrentPage(0);
|
|
2222
|
+
}
|
|
2223
|
+
}),
|
|
2224
|
+
sortConfig = _useTableSort.sortConfig,
|
|
2225
|
+
handleSort = _useTableSort.handleSort,
|
|
2226
|
+
resetSort = _useTableSort.resetSort;
|
|
2227
|
+
|
|
2228
|
+
// 使用 useTableDimensions hook 處理尺寸計算
|
|
2229
|
+
var _useTableDimensions = useTableDimensions({
|
|
2230
|
+
columns: columns,
|
|
2231
|
+
enableAutoWidth: enableAutoWidth,
|
|
2232
|
+
tableWidth: tableWidth,
|
|
2233
|
+
tableContainerWidth: tableContainerWidth,
|
|
2234
|
+
mainRowHeight: mainRowHeight,
|
|
2235
|
+
mainColumnWidth: mainColumnWidth,
|
|
2236
|
+
isDev: isDev
|
|
2237
|
+
}),
|
|
2238
|
+
getGridSize = _useTableDimensions.getGridSize;
|
|
2239
|
+
|
|
2240
|
+
// 使用 useTableInteraction hook 處理互動邏輯
|
|
2241
|
+
var _useTableInteraction = useTableInteraction({
|
|
2242
|
+
syncTableControl: syncTableControl,
|
|
2243
|
+
currentTableRef: currentTableRef,
|
|
2244
|
+
tableWrapperRef: tableWrapperRef
|
|
2245
|
+
}),
|
|
2246
|
+
isHovered = _useTableInteraction.isHovered,
|
|
2247
|
+
handleMouseEnter = _useTableInteraction.handleMouseEnter,
|
|
2248
|
+
handleMouseLeave = _useTableInteraction.handleMouseLeave,
|
|
2249
|
+
handleDropdownFocus = _useTableInteraction.handleDropdownFocus,
|
|
2250
|
+
handleDropdownBlur = _useTableInteraction.handleDropdownBlur;
|
|
2251
|
+
|
|
2252
|
+
//===========
|
|
2253
|
+
useEffect(function () {
|
|
2254
|
+
setTablePage === null || setTablePage === void 0 || setTablePage(function (prev) {
|
|
2255
|
+
return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty$1(_defineProperty$1({}, "".concat(name, "Page"), currentPage), "".concat(name, "PageSize"), currentPageSize));
|
|
2256
|
+
});
|
|
2257
|
+
}, [currentPageSize, currentPage]);
|
|
2258
|
+
|
|
2259
|
+
// 使用 useTableApi hook 暴露給外部的方法
|
|
2260
|
+
useTableApi({
|
|
2261
|
+
ref: ref,
|
|
2262
|
+
dataState: {
|
|
2263
|
+
data: data,
|
|
2264
|
+
loading: loading,
|
|
2265
|
+
error: error,
|
|
2266
|
+
totalCount: totalCount,
|
|
2267
|
+
executeDataRequest: executeDataRequest
|
|
2268
|
+
},
|
|
2269
|
+
paginationState: {
|
|
2270
|
+
currentPage: currentPage,
|
|
2271
|
+
setCurrentPage: setCurrentPage,
|
|
2272
|
+
currentPageSize: currentPageSize,
|
|
2273
|
+
setCurrentPageSize: setCurrentPageSize,
|
|
2274
|
+
totalPages: totalPages
|
|
2275
|
+
},
|
|
2276
|
+
filterState: {
|
|
2277
|
+
filterText: filterText,
|
|
2278
|
+
setFilterText: setFilterText,
|
|
2279
|
+
filterColumn: filterColumn,
|
|
2280
|
+
setFilterColumn: setFilterColumn,
|
|
2281
|
+
advancedFilters: advancedFilters,
|
|
2282
|
+
setAdvancedFilters: setAdvancedFilters,
|
|
2283
|
+
showAdvancedFilter: showAdvancedFilter
|
|
2284
|
+
},
|
|
2285
|
+
sortState: {
|
|
2286
|
+
sortConfig: sortConfig,
|
|
2287
|
+
resetSort: resetSort
|
|
2288
|
+
},
|
|
2289
|
+
scrollState: {
|
|
2290
|
+
scrollPosition: scrollPosition,
|
|
2291
|
+
scrollbarInfo: scrollbarInfo,
|
|
2292
|
+
tableWrapperRef: tableWrapperRef,
|
|
2293
|
+
scrollControl: scrollControl
|
|
2294
|
+
},
|
|
2295
|
+
responsiveState: {
|
|
2296
|
+
isMobile: isMobile,
|
|
2297
|
+
isTablet: isTablet
|
|
2298
|
+
},
|
|
2299
|
+
config: {
|
|
2300
|
+
sortable: sortable,
|
|
2301
|
+
filterable: filterable,
|
|
2302
|
+
className: className,
|
|
2303
|
+
enableAutoWidth: enableAutoWidth,
|
|
2304
|
+
isDev: isDev,
|
|
2305
|
+
columns: columns,
|
|
2306
|
+
name: name
|
|
2307
|
+
},
|
|
2308
|
+
interactionState: {
|
|
2309
|
+
isHovered: isHovered
|
|
2310
|
+
}
|
|
2311
|
+
});
|
|
2312
|
+
|
|
2313
|
+
// 初始載入
|
|
2314
|
+
//=======
|
|
2315
|
+
useEffect(function () {
|
|
2316
|
+
initialLoad(currentPageSize);
|
|
2317
|
+
}, []);
|
|
2318
|
+
|
|
2319
|
+
// 監聽篩選和排序變化
|
|
2320
|
+
//=======
|
|
2321
|
+
useEffect(function () {
|
|
2322
|
+
if (!onDataRequest) return;
|
|
2323
|
+
var params = {
|
|
2324
|
+
page: currentPage,
|
|
2325
|
+
pageSize: currentPageSize,
|
|
2326
|
+
search: filterText,
|
|
2327
|
+
searchColumn: filterColumn,
|
|
2328
|
+
advancedFilters: advancedFilters,
|
|
2329
|
+
sortBy: sortConfig.key,
|
|
2330
|
+
sortOrder: sortConfig.direction
|
|
2331
|
+
};
|
|
2332
|
+
debouncedDataRequest(params);
|
|
2333
|
+
}, [currentPage, currentPageSize, filterText, filterColumn, advancedFilters, sortConfig]);
|
|
2334
|
+
var freeActions = useMemo(function () {
|
|
2335
|
+
return actions.filter(function (action) {
|
|
2336
|
+
return action.isFreeAction === true;
|
|
2337
|
+
});
|
|
2338
|
+
}, [actions]);
|
|
2339
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
2340
|
+
children: [/*#__PURE__*/jsx(TableHeader, {
|
|
2341
|
+
name: name,
|
|
2342
|
+
freeActions: freeActions,
|
|
2343
|
+
getState: (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getState
|
|
2344
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
2345
|
+
className: "udi-table-container ".concat(className),
|
|
2346
|
+
onMouseEnter: handleMouseEnter,
|
|
2347
|
+
onMouseLeave: handleMouseLeave,
|
|
2348
|
+
children: [error && /*#__PURE__*/jsxs("div", {
|
|
2349
|
+
className: "error-message",
|
|
2350
|
+
children: ["\u274C ", tr("Fetch Failed"), ": ", error]
|
|
2351
|
+
}), filterable && /*#__PURE__*/jsx("div", {
|
|
2352
|
+
className: "udi-table-filter",
|
|
2353
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
2354
|
+
className: "filter-section",
|
|
2355
|
+
children: [/*#__PURE__*/jsx(BasicFilter, {
|
|
2356
|
+
columns: columns,
|
|
2357
|
+
filterColumn: filterColumn,
|
|
2358
|
+
filterText: filterText,
|
|
2359
|
+
showAdvancedFilter: showAdvancedFilter,
|
|
2360
|
+
advancedFilters: advancedFilters,
|
|
2361
|
+
onFilterColumnChange: function onFilterColumnChange(value) {
|
|
2362
|
+
setFilterColumn(value);
|
|
2363
|
+
setCurrentPage(0);
|
|
2364
|
+
},
|
|
2365
|
+
onFilterTextChange: function onFilterTextChange(value) {
|
|
2366
|
+
setFilterText(value);
|
|
2367
|
+
setCurrentPage(0);
|
|
2368
|
+
},
|
|
2369
|
+
onToggleAdvancedFilter: toggleAdvancedFilter,
|
|
2370
|
+
onResetFilter: resetFilter
|
|
2371
|
+
}), showAdvancedFilter && /*#__PURE__*/jsx(AdvancedFilter, {
|
|
2372
|
+
columns: columns,
|
|
2373
|
+
advancedFilters: advancedFilters,
|
|
2374
|
+
onFilterChange: handleAdvancedFilterChange,
|
|
2375
|
+
onClearFilters: clearAdvancedFilters
|
|
2376
|
+
})]
|
|
2377
|
+
})
|
|
2378
|
+
}), isDev && /*#__PURE__*/jsx(ScrollIndicator, {
|
|
2379
|
+
scrollPosition: scrollPosition,
|
|
2380
|
+
currentPage: currentPage,
|
|
2381
|
+
totalPages: totalPages,
|
|
2382
|
+
totalCount: totalCount,
|
|
2383
|
+
scrollbarInfo: scrollbarInfo,
|
|
2384
|
+
isMobile: isMobile,
|
|
2385
|
+
isTablet: isTablet
|
|
2386
|
+
}), /*#__PURE__*/jsx("div", {
|
|
2387
|
+
className: "udi-table-wrapper-container",
|
|
2388
|
+
style: {
|
|
2389
|
+
position: "relative"
|
|
2390
|
+
},
|
|
2391
|
+
children: /*#__PURE__*/jsx("div", {
|
|
2392
|
+
className: "udi-table-wrapper",
|
|
2393
|
+
ref: tableWrapperRef,
|
|
2394
|
+
style: tableHeight ? {
|
|
2395
|
+
height: "".concat(tableHeight, "px")
|
|
2396
|
+
} : {},
|
|
2397
|
+
children: /*#__PURE__*/jsxs("table", {
|
|
2398
|
+
className: "udi-table",
|
|
2399
|
+
style: {
|
|
2400
|
+
width: "".concat(tableWidth)
|
|
2401
|
+
},
|
|
2402
|
+
children: [/*#__PURE__*/jsx(TableHead, {
|
|
2403
|
+
columns: columns,
|
|
2404
|
+
sortable: sortable,
|
|
2405
|
+
sortConfig: sortConfig,
|
|
2406
|
+
onSort: handleSort,
|
|
2407
|
+
getGridSize: getGridSize,
|
|
2408
|
+
actions: actions,
|
|
2409
|
+
actionFirst: actionFirst
|
|
2410
|
+
}), /*#__PURE__*/jsx("tbody", {
|
|
2411
|
+
children: loading ? /*#__PURE__*/jsx(LoadingState, {
|
|
2412
|
+
colSpan: columns.length
|
|
2413
|
+
}) : data.length > 0 ? data.map(function (row, rowIndex) {
|
|
2414
|
+
return /*#__PURE__*/jsx(TableRow, {
|
|
2415
|
+
row: row,
|
|
2416
|
+
rowIndex: rowIndex,
|
|
2417
|
+
columns: columns,
|
|
2418
|
+
actions: actions,
|
|
2419
|
+
actionFirst: actionFirst,
|
|
2420
|
+
getGridSize: getGridSize,
|
|
2421
|
+
tableName: name
|
|
2422
|
+
}, "row-".concat(rowIndex, "-").concat(row.id || ""));
|
|
2423
|
+
}) : /*#__PURE__*/jsx(EmptyState, {
|
|
2424
|
+
colSpan: columns.length
|
|
2425
|
+
})
|
|
2426
|
+
})]
|
|
2427
|
+
})
|
|
2428
|
+
})
|
|
2429
|
+
}), paginationEnabled && /*#__PURE__*/jsx(Pagination, {
|
|
2430
|
+
currentPage: currentPage,
|
|
2431
|
+
totalPages: totalPages,
|
|
2432
|
+
currentPageSize: currentPageSize,
|
|
2433
|
+
onPageChange: handlePageChange,
|
|
2434
|
+
onPageSizeChange: handlePageSizeChange,
|
|
2435
|
+
isMobile: isMobile,
|
|
2436
|
+
onDropdownFocus: handleDropdownFocus,
|
|
2437
|
+
onDropdownBlur: handleDropdownBlur,
|
|
2438
|
+
onMouseEnter: handleMouseEnter
|
|
2439
|
+
})]
|
|
2440
|
+
})]
|
|
2441
|
+
});
|
|
2442
|
+
});
|
|
2443
|
+
UdiTable.displayName = "UdiTable";
|
|
2444
|
+
|
|
2445
|
+
function greet(name) {
|
|
2446
|
+
return "Hello, ".concat(name, "! 105");
|
|
2447
|
+
}
|
|
2448
|
+
function add(a, b) {
|
|
2449
|
+
return a + b;
|
|
2450
|
+
}
|
|
2451
|
+
|
|
2452
|
+
export { Button, UdiTable, add, greet };
|
|
2453
|
+
//# sourceMappingURL=index.esm.js.map
|