@pdg/react-table 1.1.10 → 1.1.13
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 +2 -6
- package/dist/index.esm.js +835 -1416
- package/dist/index.js +834 -1415
- package/package.json +54 -46
package/dist/index.esm.js
CHANGED
|
@@ -6,56 +6,7 @@ import*as React from'react';import React__default,{useMemo,useRef,useState,useCa
|
|
|
6
6
|
style.innerHTML = css;
|
|
7
7
|
document.head.appendChild(style);
|
|
8
8
|
return css;
|
|
9
|
-
}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}")
|
|
10
|
-
Copyright (c) Microsoft Corporation.
|
|
11
|
-
|
|
12
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
13
|
-
purpose with or without fee is hereby granted.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
16
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
17
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
18
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
19
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
20
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
21
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
22
|
-
***************************************************************************** */
|
|
23
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var __assign$2 = function() {
|
|
27
|
-
__assign$2 = Object.assign || function __assign(t) {
|
|
28
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
29
|
-
s = arguments[i];
|
|
30
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
31
|
-
}
|
|
32
|
-
return t;
|
|
33
|
-
};
|
|
34
|
-
return __assign$2.apply(this, arguments);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
function __rest$1(s, e) {
|
|
38
|
-
var t = {};
|
|
39
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
40
|
-
t[p] = s[p];
|
|
41
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
42
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
43
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
44
|
-
t[p[i]] = s[p[i]];
|
|
45
|
-
}
|
|
46
|
-
return t;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function __makeTemplateObject(cooked, raw) {
|
|
50
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
51
|
-
return cooked;
|
|
52
|
-
}
|
|
53
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
54
|
-
var e = new Error(message);
|
|
55
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
56
|
-
};var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
57
|
-
|
|
58
|
-
function getDefaultExportFromCjs (x) {
|
|
9
|
+
}insertStyle(".simplebar-track.simplebar-vertical{width:8px !important}.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before{opacity:.3 !important}.PTable .PTableHead .PTableHeadRow th{position:relative;transform:translateY(-100%)}.PTable.sticky-header .PTableHead .PTableHeadRow th{position:sticky;transform:none}");function getDefaultExportFromCjs (x) {
|
|
59
10
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
60
11
|
}var classnames = {exports: {}};/*!
|
|
61
12
|
Copyright (c) 2018 Jed Watson.
|
|
@@ -138,14 +89,36 @@ function requireClassnames () {
|
|
|
138
89
|
} (classnames));
|
|
139
90
|
return classnames.exports;
|
|
140
91
|
}var classnamesExports = requireClassnames();
|
|
141
|
-
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
92
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);const Label = styled(Box) `
|
|
93
|
+
font-size: 12px;
|
|
94
|
+
font-weight: bold;
|
|
95
|
+
`;
|
|
96
|
+
const ValueWrap = styled(Box) `
|
|
97
|
+
margin-top: 3px;
|
|
98
|
+
position: relative;
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: row;
|
|
101
|
+
`;
|
|
102
|
+
const Value = styled('div') `
|
|
103
|
+
flex: 1;
|
|
104
|
+
`;
|
|
105
|
+
const ValueEllipsis = styled('div') `
|
|
106
|
+
flex: 1;
|
|
107
|
+
position: relative;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
text-overflow: ellipsis;
|
|
110
|
+
white-space: nowrap;
|
|
111
|
+
`;
|
|
112
|
+
const ValueClipboard = styled('div') ``;
|
|
113
|
+
const ClipboardIconButton = styled(IconButton) `
|
|
114
|
+
margin-top: -10px;
|
|
115
|
+
margin-bottom: -10px;
|
|
116
|
+
`;
|
|
117
|
+
const Line = styled('div') `
|
|
118
|
+
border-top: 1px solid #efefef;
|
|
119
|
+
height: 1px;
|
|
120
|
+
flex: 1;
|
|
121
|
+
`;function getTableColumnAlign(column, defaultAlign) {
|
|
149
122
|
switch (column.type) {
|
|
150
123
|
case 'number':
|
|
151
124
|
return column.align ? column.align : 'right';
|
|
@@ -153,21 +126,17 @@ var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4, te
|
|
|
153
126
|
return column.align || defaultAlign;
|
|
154
127
|
}
|
|
155
128
|
}
|
|
156
|
-
function combineSx() {
|
|
157
|
-
|
|
158
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
159
|
-
sx[_i] = arguments[_i];
|
|
160
|
-
}
|
|
161
|
-
var finalSx = [];
|
|
129
|
+
function combineSx(...sx) {
|
|
130
|
+
const finalSx = [];
|
|
162
131
|
if (Array.isArray(finalSx)) {
|
|
163
|
-
sx.forEach(
|
|
132
|
+
sx.forEach((v) => v && finalSx.push(...(Array.isArray(v) ? v : [v])));
|
|
164
133
|
}
|
|
165
134
|
return finalSx;
|
|
166
135
|
}
|
|
167
136
|
function typographyColorToSxColor(color) {
|
|
168
137
|
if (typeof color === 'string') {
|
|
169
138
|
if (['primary', 'secondary', 'info', 'warning', 'error'].includes(color)) {
|
|
170
|
-
return
|
|
139
|
+
return `${color}.main`;
|
|
171
140
|
}
|
|
172
141
|
else if (color === 'text') {
|
|
173
142
|
return 'text.primary';
|
|
@@ -186,184 +155,178 @@ var hasRequiredDayjs_min;
|
|
|
186
155
|
function requireDayjs_min () {
|
|
187
156
|
if (hasRequiredDayjs_min) return dayjs_min$1.exports;
|
|
188
157
|
hasRequiredDayjs_min = 1;
|
|
189
|
-
(function (module, exports) {
|
|
158
|
+
(function (module, exports$1) {
|
|
190
159
|
!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
|
|
191
160
|
} (dayjs_min$1));
|
|
192
161
|
return dayjs_min$1.exports;
|
|
193
162
|
}var dayjs_minExports = requireDayjs_min();
|
|
194
|
-
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
163
|
+
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);const PInfoTable = ({ cols, spacing = 2, columnSpacing, rowSpacing = 3, className, style, sx, labelClassName, labelColor = 'primary', labelStyle, labelSx, dividerColor = 'gray', valueClassName, valueStyle, valueSx, ellipsis, valueUnderline, info, items, onCopyToClipboard, }) => {
|
|
195
164
|
/********************************************************************************************************************
|
|
196
165
|
* Memo
|
|
197
166
|
* ******************************************************************************************************************/
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
else {
|
|
212
|
-
data = info[item.name];
|
|
213
|
-
}
|
|
167
|
+
const renderItems = useMemo(() => items.filter((item) => !!item && (!item.onHide || !item.onHide(info))).map((item) => {
|
|
168
|
+
/** data */
|
|
169
|
+
let data = undefined;
|
|
170
|
+
if (item.name !== undefined) {
|
|
171
|
+
if (info[item.name] !== undefined) {
|
|
172
|
+
if (info[item.name] instanceof Date) {
|
|
173
|
+
data = dayjs(info[item.name]).format('YYYY-MM-DD HH:mm:ss');
|
|
174
|
+
}
|
|
175
|
+
else if (info[item.name] instanceof dayjs) {
|
|
176
|
+
data = info[item.name].format('YYYY-MM-DD HH:mm:ss');
|
|
177
|
+
}
|
|
178
|
+
else {
|
|
179
|
+
data = info[item.name];
|
|
214
180
|
}
|
|
215
181
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
React__default.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
|
|
227
|
-
data));
|
|
228
|
-
}
|
|
229
|
-
if (item.numberSuffix) {
|
|
230
|
-
data = (React__default.createElement(React__default.Fragment, null,
|
|
231
|
-
data,
|
|
232
|
-
React__default.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
break;
|
|
236
|
-
case 'tel':
|
|
237
|
-
if (typeof data === 'string') {
|
|
238
|
-
data = formatTelNo(data);
|
|
239
|
-
}
|
|
240
|
-
break;
|
|
241
|
-
case 'email':
|
|
242
|
-
if (typeof data === 'string') {
|
|
243
|
-
data = (React__default.createElement(React__default.Fragment, null,
|
|
244
|
-
React__default.createElement("a", { href: "mailto:".concat(data) }, data)));
|
|
245
|
-
}
|
|
246
|
-
break;
|
|
247
|
-
case 'url':
|
|
248
|
-
if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
|
|
249
|
-
data = (React__default.createElement(React__default.Fragment, null,
|
|
250
|
-
React__default.createElement("a", { href: data, target: '_blank' }, data)));
|
|
251
|
-
}
|
|
252
|
-
break;
|
|
253
|
-
case 'business_no':
|
|
254
|
-
if (typeof data === 'string') {
|
|
255
|
-
data = formatBusinessNo(data);
|
|
256
|
-
}
|
|
257
|
-
break;
|
|
258
|
-
case 'personal_no':
|
|
259
|
-
if (typeof data === 'string') {
|
|
260
|
-
data = formatPersonalNo(data);
|
|
261
|
-
}
|
|
262
|
-
break;
|
|
263
|
-
case 'date':
|
|
264
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
265
|
-
data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
|
|
266
|
-
}
|
|
267
|
-
break;
|
|
268
|
-
case 'datetime':
|
|
269
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
270
|
-
var dt = dayjs(data, item.dateFormat);
|
|
271
|
-
data = (React__default.createElement(React__default.Fragment, null,
|
|
272
|
-
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
273
|
-
item.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
274
|
-
React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
|
|
275
|
-
}
|
|
276
|
-
break;
|
|
277
|
-
case 'date-hour':
|
|
278
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
279
|
-
var dt = dayjs(data, item.dateFormat);
|
|
182
|
+
}
|
|
183
|
+
if (item.onRender) {
|
|
184
|
+
data = item.onRender(info);
|
|
185
|
+
}
|
|
186
|
+
else if (notEmpty(data)) {
|
|
187
|
+
switch (item.type) {
|
|
188
|
+
case 'number':
|
|
189
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
190
|
+
data = formatNumber(data);
|
|
191
|
+
if (item.numberPrefix) {
|
|
280
192
|
data = (React__default.createElement(React__default.Fragment, null,
|
|
281
|
-
React__default.createElement("span",
|
|
282
|
-
|
|
283
|
-
React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
|
|
193
|
+
React__default.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
|
|
194
|
+
data));
|
|
284
195
|
}
|
|
285
|
-
|
|
286
|
-
case 'date-minute':
|
|
287
|
-
if (typeof data === 'string' || typeof data === 'number') {
|
|
288
|
-
var dt = dayjs(data, item.dateFormat);
|
|
196
|
+
if (item.numberSuffix) {
|
|
289
197
|
data = (React__default.createElement(React__default.Fragment, null,
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
|
|
198
|
+
data,
|
|
199
|
+
React__default.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
|
|
293
200
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
201
|
+
}
|
|
202
|
+
break;
|
|
203
|
+
case 'tel':
|
|
204
|
+
if (typeof data === 'string') {
|
|
205
|
+
data = formatTelNo(data);
|
|
206
|
+
}
|
|
207
|
+
break;
|
|
208
|
+
case 'email':
|
|
209
|
+
if (typeof data === 'string') {
|
|
210
|
+
data = (React__default.createElement(React__default.Fragment, null,
|
|
211
|
+
React__default.createElement("a", { href: `mailto:${data}` }, data)));
|
|
212
|
+
}
|
|
213
|
+
break;
|
|
214
|
+
case 'url':
|
|
215
|
+
if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
|
|
216
|
+
data = (React__default.createElement(React__default.Fragment, null,
|
|
217
|
+
React__default.createElement("a", { href: data, target: '_blank' }, data)));
|
|
218
|
+
}
|
|
219
|
+
break;
|
|
220
|
+
case 'business_no':
|
|
221
|
+
if (typeof data === 'string') {
|
|
222
|
+
data = formatBusinessNo(data);
|
|
223
|
+
}
|
|
224
|
+
break;
|
|
225
|
+
case 'personal_no':
|
|
226
|
+
if (typeof data === 'string') {
|
|
227
|
+
data = formatPersonalNo(data);
|
|
228
|
+
}
|
|
229
|
+
break;
|
|
230
|
+
case 'date':
|
|
231
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
232
|
+
data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
|
|
233
|
+
}
|
|
234
|
+
break;
|
|
235
|
+
case 'datetime':
|
|
236
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
237
|
+
const dt = dayjs(data, item.dateFormat);
|
|
238
|
+
data = (React__default.createElement(React__default.Fragment, null,
|
|
239
|
+
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
240
|
+
item.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
241
|
+
React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
|
|
242
|
+
}
|
|
243
|
+
break;
|
|
244
|
+
case 'date-hour':
|
|
245
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
246
|
+
const dt = dayjs(data, item.dateFormat);
|
|
247
|
+
data = (React__default.createElement(React__default.Fragment, null,
|
|
248
|
+
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
249
|
+
item.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
250
|
+
React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
|
|
251
|
+
}
|
|
252
|
+
break;
|
|
253
|
+
case 'date-minute':
|
|
254
|
+
if (typeof data === 'string' || typeof data === 'number') {
|
|
255
|
+
const dt = dayjs(data, item.dateFormat);
|
|
256
|
+
data = (React__default.createElement(React__default.Fragment, null,
|
|
257
|
+
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
258
|
+
item.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
259
|
+
React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
|
|
260
|
+
}
|
|
261
|
+
break;
|
|
317
262
|
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
263
|
+
}
|
|
264
|
+
if (empty(data))
|
|
265
|
+
data = item.onRenderEmpty ? item.onRenderEmpty(info) : React__default.createElement(React__default.Fragment, null, "\u00A0");
|
|
266
|
+
/** copyToClipboardText */
|
|
267
|
+
const copyToClipboardText = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
|
|
268
|
+
/** sizeProps */
|
|
269
|
+
const sizeProps = {};
|
|
270
|
+
if (typeof cols === 'number') {
|
|
271
|
+
sizeProps.xs = 12 / cols;
|
|
272
|
+
}
|
|
273
|
+
else {
|
|
274
|
+
if (cols.xs)
|
|
275
|
+
sizeProps.xs = 12 / cols.xs;
|
|
276
|
+
if (cols.sm)
|
|
277
|
+
sizeProps.sm = 12 / cols.sm;
|
|
278
|
+
if (cols.md)
|
|
279
|
+
sizeProps.md = 12 / cols.md;
|
|
280
|
+
if (cols.lg)
|
|
281
|
+
sizeProps.lg = 12 / cols.lg;
|
|
282
|
+
if (cols.xl)
|
|
283
|
+
sizeProps.xl = 12 / cols.xl;
|
|
284
|
+
}
|
|
285
|
+
if (item.xs)
|
|
286
|
+
sizeProps.xs = item.xs;
|
|
287
|
+
if (item.sm)
|
|
288
|
+
sizeProps.sm = item.sm;
|
|
289
|
+
if (item.md)
|
|
290
|
+
sizeProps.md = item.md;
|
|
291
|
+
if (item.lg)
|
|
292
|
+
sizeProps.lg = item.lg;
|
|
293
|
+
if (item.xl)
|
|
294
|
+
sizeProps.xl = item.xl;
|
|
295
|
+
if (item.onXs)
|
|
296
|
+
sizeProps.xs = item.onXs(info);
|
|
297
|
+
if (item.onSm)
|
|
298
|
+
sizeProps.sm = item.onSm(info);
|
|
299
|
+
if (item.onMd)
|
|
300
|
+
sizeProps.md = item.onMd(info);
|
|
301
|
+
if (item.onLg)
|
|
302
|
+
sizeProps.lg = item.onLg(info);
|
|
303
|
+
if (item.onXl)
|
|
304
|
+
sizeProps.xl = item.onXl(info);
|
|
305
|
+
return { item, data, copyToClipboardText, sizeProps };
|
|
306
|
+
}), [info, items, cols]);
|
|
307
|
+
const content = useMemo(() => renderItems.map(({ item, data, copyToClipboardText, sizeProps }, idx) => {
|
|
308
|
+
const finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
|
|
309
|
+
const finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
|
|
310
|
+
const finalValueSx = combineSx(valueSx, item.valueSx);
|
|
311
|
+
const valueUnderlineStyle = valueUnderline
|
|
312
|
+
? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
|
|
313
|
+
: undefined;
|
|
314
|
+
return item.type === 'divider' ? (React__default.createElement(Grid, { key: idx, size: { xs: 12 } },
|
|
315
|
+
React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
316
|
+
item.icon && (React__default.createElement(PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
|
|
317
|
+
item.label && (React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: Object.assign(Object.assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
318
|
+
item.dividerLine && (React__default.createElement(React__default.Fragment, null, item.icon || item.label ? (React__default.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
|
|
319
|
+
React__default.createElement(Line, null))) : (React__default.createElement(Line, null))))))) : (React__default.createElement(Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
|
|
320
|
+
React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
321
|
+
item.icon && (React__default.createElement(PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
|
|
322
|
+
React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: Object.assign(Object.assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
323
|
+
React__default.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: Object.assign(Object.assign(Object.assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
|
|
324
|
+
item.ellipsis || ellipsis ? React__default.createElement(ValueEllipsis, null, data) : React__default.createElement(Value, null, data),
|
|
325
|
+
item.clipboard && notEmpty(copyToClipboardText) && (React__default.createElement(ValueClipboard, null,
|
|
326
|
+
React__default.createElement(PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? () => onCopyToClipboard(item, copyToClipboardText) : undefined },
|
|
327
|
+
React__default.createElement(ClipboardIconButton, Object.assign({ size: 'small', color: 'primary' }, item.clipboardProps),
|
|
328
|
+
React__default.createElement(PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
|
|
329
|
+
}), [
|
|
367
330
|
dividerColor,
|
|
368
331
|
ellipsis,
|
|
369
332
|
labelClassName,
|
|
@@ -381,709 +344,115 @@ var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);var PInfoTabl
|
|
|
381
344
|
* Render
|
|
382
345
|
* ******************************************************************************************************************/
|
|
383
346
|
return (React__default.createElement(Grid, { container: true, spacing: spacing, columnSpacing: columnSpacing, rowSpacing: rowSpacing, className: classNames('PInfoTable', className), style: style, sx: sx }, content));
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
/**
|
|
492
|
-
* Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
|
|
493
|
-
* character of `string`.
|
|
494
|
-
*
|
|
495
|
-
* @private
|
|
496
|
-
* @param {string} string The string to inspect.
|
|
497
|
-
* @returns {number} Returns the index of the last non-whitespace character.
|
|
498
|
-
*/
|
|
499
|
-
function trimmedEndIndex(string) {
|
|
500
|
-
var index = string.length;
|
|
501
|
-
|
|
502
|
-
while (index-- && reWhitespace.test(string.charAt(index))) {}
|
|
503
|
-
return index;
|
|
504
|
-
}
|
|
505
|
-
|
|
506
|
-
_trimmedEndIndex = trimmedEndIndex;
|
|
507
|
-
return _trimmedEndIndex;
|
|
508
|
-
}var _baseTrim;
|
|
509
|
-
var hasRequired_baseTrim;
|
|
510
|
-
|
|
511
|
-
function require_baseTrim () {
|
|
512
|
-
if (hasRequired_baseTrim) return _baseTrim;
|
|
513
|
-
hasRequired_baseTrim = 1;
|
|
514
|
-
var trimmedEndIndex = require_trimmedEndIndex();
|
|
515
|
-
|
|
516
|
-
/** Used to match leading whitespace. */
|
|
517
|
-
var reTrimStart = /^\s+/;
|
|
518
|
-
|
|
519
|
-
/**
|
|
520
|
-
* The base implementation of `_.trim`.
|
|
521
|
-
*
|
|
522
|
-
* @private
|
|
523
|
-
* @param {string} string The string to trim.
|
|
524
|
-
* @returns {string} Returns the trimmed string.
|
|
525
|
-
*/
|
|
526
|
-
function baseTrim(string) {
|
|
527
|
-
return string
|
|
528
|
-
? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
|
|
529
|
-
: string;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
_baseTrim = baseTrim;
|
|
533
|
-
return _baseTrim;
|
|
534
|
-
}var _Symbol;
|
|
535
|
-
var hasRequired_Symbol;
|
|
536
|
-
|
|
537
|
-
function require_Symbol () {
|
|
538
|
-
if (hasRequired_Symbol) return _Symbol;
|
|
539
|
-
hasRequired_Symbol = 1;
|
|
540
|
-
var root = require_root();
|
|
541
|
-
|
|
542
|
-
/** Built-in value references. */
|
|
543
|
-
var Symbol = root.Symbol;
|
|
544
|
-
|
|
545
|
-
_Symbol = Symbol;
|
|
546
|
-
return _Symbol;
|
|
547
|
-
}var _getRawTag;
|
|
548
|
-
var hasRequired_getRawTag;
|
|
549
|
-
|
|
550
|
-
function require_getRawTag () {
|
|
551
|
-
if (hasRequired_getRawTag) return _getRawTag;
|
|
552
|
-
hasRequired_getRawTag = 1;
|
|
553
|
-
var Symbol = require_Symbol();
|
|
554
|
-
|
|
555
|
-
/** Used for built-in method references. */
|
|
556
|
-
var objectProto = Object.prototype;
|
|
557
|
-
|
|
558
|
-
/** Used to check objects for own properties. */
|
|
559
|
-
var hasOwnProperty = objectProto.hasOwnProperty;
|
|
560
|
-
|
|
561
|
-
/**
|
|
562
|
-
* Used to resolve the
|
|
563
|
-
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
564
|
-
* of values.
|
|
565
|
-
*/
|
|
566
|
-
var nativeObjectToString = objectProto.toString;
|
|
567
|
-
|
|
568
|
-
/** Built-in value references. */
|
|
569
|
-
var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
|
|
570
|
-
|
|
571
|
-
/**
|
|
572
|
-
* A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
|
|
573
|
-
*
|
|
574
|
-
* @private
|
|
575
|
-
* @param {*} value The value to query.
|
|
576
|
-
* @returns {string} Returns the raw `toStringTag`.
|
|
577
|
-
*/
|
|
578
|
-
function getRawTag(value) {
|
|
579
|
-
var isOwn = hasOwnProperty.call(value, symToStringTag),
|
|
580
|
-
tag = value[symToStringTag];
|
|
581
|
-
|
|
582
|
-
try {
|
|
583
|
-
value[symToStringTag] = undefined;
|
|
584
|
-
var unmasked = true;
|
|
585
|
-
} catch (e) {}
|
|
586
|
-
|
|
587
|
-
var result = nativeObjectToString.call(value);
|
|
588
|
-
if (unmasked) {
|
|
589
|
-
if (isOwn) {
|
|
590
|
-
value[symToStringTag] = tag;
|
|
591
|
-
} else {
|
|
592
|
-
delete value[symToStringTag];
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
return result;
|
|
596
|
-
}
|
|
597
|
-
|
|
598
|
-
_getRawTag = getRawTag;
|
|
599
|
-
return _getRawTag;
|
|
600
|
-
}/** Used for built-in method references. */
|
|
601
|
-
|
|
602
|
-
var _objectToString;
|
|
603
|
-
var hasRequired_objectToString;
|
|
604
|
-
|
|
605
|
-
function require_objectToString () {
|
|
606
|
-
if (hasRequired_objectToString) return _objectToString;
|
|
607
|
-
hasRequired_objectToString = 1;
|
|
608
|
-
var objectProto = Object.prototype;
|
|
609
|
-
|
|
610
|
-
/**
|
|
611
|
-
* Used to resolve the
|
|
612
|
-
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
613
|
-
* of values.
|
|
614
|
-
*/
|
|
615
|
-
var nativeObjectToString = objectProto.toString;
|
|
616
|
-
|
|
617
|
-
/**
|
|
618
|
-
* Converts `value` to a string using `Object.prototype.toString`.
|
|
619
|
-
*
|
|
620
|
-
* @private
|
|
621
|
-
* @param {*} value The value to convert.
|
|
622
|
-
* @returns {string} Returns the converted string.
|
|
623
|
-
*/
|
|
624
|
-
function objectToString(value) {
|
|
625
|
-
return nativeObjectToString.call(value);
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
_objectToString = objectToString;
|
|
629
|
-
return _objectToString;
|
|
630
|
-
}var _baseGetTag;
|
|
631
|
-
var hasRequired_baseGetTag;
|
|
632
|
-
|
|
633
|
-
function require_baseGetTag () {
|
|
634
|
-
if (hasRequired_baseGetTag) return _baseGetTag;
|
|
635
|
-
hasRequired_baseGetTag = 1;
|
|
636
|
-
var Symbol = require_Symbol(),
|
|
637
|
-
getRawTag = require_getRawTag(),
|
|
638
|
-
objectToString = require_objectToString();
|
|
639
|
-
|
|
640
|
-
/** `Object#toString` result references. */
|
|
641
|
-
var nullTag = '[object Null]',
|
|
642
|
-
undefinedTag = '[object Undefined]';
|
|
643
|
-
|
|
644
|
-
/** Built-in value references. */
|
|
645
|
-
var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
|
|
646
|
-
|
|
647
|
-
/**
|
|
648
|
-
* The base implementation of `getTag` without fallbacks for buggy environments.
|
|
649
|
-
*
|
|
650
|
-
* @private
|
|
651
|
-
* @param {*} value The value to query.
|
|
652
|
-
* @returns {string} Returns the `toStringTag`.
|
|
653
|
-
*/
|
|
654
|
-
function baseGetTag(value) {
|
|
655
|
-
if (value == null) {
|
|
656
|
-
return value === undefined ? undefinedTag : nullTag;
|
|
657
|
-
}
|
|
658
|
-
return (symToStringTag && symToStringTag in Object(value))
|
|
659
|
-
? getRawTag(value)
|
|
660
|
-
: objectToString(value);
|
|
661
|
-
}
|
|
662
|
-
|
|
663
|
-
_baseGetTag = baseGetTag;
|
|
664
|
-
return _baseGetTag;
|
|
347
|
+
};function debounce$2(func, debounceMs, { signal, edges } = {}) {
|
|
348
|
+
let pendingThis = undefined;
|
|
349
|
+
let pendingArgs = null;
|
|
350
|
+
const leading = edges != null && edges.includes('leading');
|
|
351
|
+
const trailing = edges == null || edges.includes('trailing');
|
|
352
|
+
const invoke = () => {
|
|
353
|
+
if (pendingArgs !== null) {
|
|
354
|
+
func.apply(pendingThis, pendingArgs);
|
|
355
|
+
pendingThis = undefined;
|
|
356
|
+
pendingArgs = null;
|
|
357
|
+
}
|
|
358
|
+
};
|
|
359
|
+
const onTimerEnd = () => {
|
|
360
|
+
if (trailing) {
|
|
361
|
+
invoke();
|
|
362
|
+
}
|
|
363
|
+
cancel();
|
|
364
|
+
};
|
|
365
|
+
let timeoutId = null;
|
|
366
|
+
const schedule = () => {
|
|
367
|
+
if (timeoutId != null) {
|
|
368
|
+
clearTimeout(timeoutId);
|
|
369
|
+
}
|
|
370
|
+
timeoutId = setTimeout(() => {
|
|
371
|
+
timeoutId = null;
|
|
372
|
+
onTimerEnd();
|
|
373
|
+
}, debounceMs);
|
|
374
|
+
};
|
|
375
|
+
const cancelTimer = () => {
|
|
376
|
+
if (timeoutId !== null) {
|
|
377
|
+
clearTimeout(timeoutId);
|
|
378
|
+
timeoutId = null;
|
|
379
|
+
}
|
|
380
|
+
};
|
|
381
|
+
const cancel = () => {
|
|
382
|
+
cancelTimer();
|
|
383
|
+
pendingThis = undefined;
|
|
384
|
+
pendingArgs = null;
|
|
385
|
+
};
|
|
386
|
+
const flush = () => {
|
|
387
|
+
invoke();
|
|
388
|
+
};
|
|
389
|
+
const debounced = function (...args) {
|
|
390
|
+
if (signal?.aborted) {
|
|
391
|
+
return;
|
|
392
|
+
}
|
|
393
|
+
pendingThis = this;
|
|
394
|
+
pendingArgs = args;
|
|
395
|
+
const isFirstCall = timeoutId == null;
|
|
396
|
+
schedule();
|
|
397
|
+
if (leading && isFirstCall) {
|
|
398
|
+
invoke();
|
|
399
|
+
}
|
|
400
|
+
};
|
|
401
|
+
debounced.schedule = schedule;
|
|
402
|
+
debounced.cancel = cancel;
|
|
403
|
+
debounced.flush = flush;
|
|
404
|
+
signal?.addEventListener('abort', cancel, { once: true });
|
|
405
|
+
return debounced;
|
|
406
|
+
}function debounce$1(func, debounceMs = 0, options = {}) {
|
|
407
|
+
if (typeof options !== 'object') {
|
|
408
|
+
options = {};
|
|
409
|
+
}
|
|
410
|
+
const { leading = false, trailing = true, maxWait } = options;
|
|
411
|
+
const edges = Array(2);
|
|
412
|
+
if (leading) {
|
|
413
|
+
edges[0] = 'leading';
|
|
414
|
+
}
|
|
415
|
+
if (trailing) {
|
|
416
|
+
edges[1] = 'trailing';
|
|
417
|
+
}
|
|
418
|
+
let result = undefined;
|
|
419
|
+
let pendingAt = null;
|
|
420
|
+
const _debounced = debounce$2(function (...args) {
|
|
421
|
+
result = func.apply(this, args);
|
|
422
|
+
pendingAt = null;
|
|
423
|
+
}, debounceMs, { edges });
|
|
424
|
+
const debounced = function (...args) {
|
|
425
|
+
if (maxWait != null) {
|
|
426
|
+
if (pendingAt === null) {
|
|
427
|
+
pendingAt = Date.now();
|
|
428
|
+
}
|
|
429
|
+
if (Date.now() - pendingAt >= maxWait) {
|
|
430
|
+
result = func.apply(this, args);
|
|
431
|
+
pendingAt = Date.now();
|
|
432
|
+
_debounced.cancel();
|
|
433
|
+
_debounced.schedule();
|
|
434
|
+
return result;
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
_debounced.apply(this, args);
|
|
438
|
+
return result;
|
|
439
|
+
};
|
|
440
|
+
const flush = () => {
|
|
441
|
+
_debounced.flush();
|
|
442
|
+
return result;
|
|
443
|
+
};
|
|
444
|
+
debounced.cancel = _debounced.cancel;
|
|
445
|
+
debounced.flush = flush;
|
|
446
|
+
return debounced;
|
|
447
|
+
}function throttle$1(func, throttleMs = 0, options = {}) {
|
|
448
|
+
const { leading = true, trailing = true } = options;
|
|
449
|
+
return debounce$1(func, throttleMs, {
|
|
450
|
+
leading,
|
|
451
|
+
maxWait: throttleMs,
|
|
452
|
+
trailing,
|
|
453
|
+
});
|
|
665
454
|
}/**
|
|
666
|
-
*
|
|
667
|
-
* and has a `typeof` result of "object".
|
|
668
|
-
*
|
|
669
|
-
* @static
|
|
670
|
-
* @memberOf _
|
|
671
|
-
* @since 4.0.0
|
|
672
|
-
* @category Lang
|
|
673
|
-
* @param {*} value The value to check.
|
|
674
|
-
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
|
|
675
|
-
* @example
|
|
676
|
-
*
|
|
677
|
-
* _.isObjectLike({});
|
|
678
|
-
* // => true
|
|
679
|
-
*
|
|
680
|
-
* _.isObjectLike([1, 2, 3]);
|
|
681
|
-
* // => true
|
|
682
|
-
*
|
|
683
|
-
* _.isObjectLike(_.noop);
|
|
684
|
-
* // => false
|
|
685
|
-
*
|
|
686
|
-
* _.isObjectLike(null);
|
|
687
|
-
* // => false
|
|
688
|
-
*/
|
|
689
|
-
|
|
690
|
-
var isObjectLike_1;
|
|
691
|
-
var hasRequiredIsObjectLike;
|
|
692
|
-
|
|
693
|
-
function requireIsObjectLike () {
|
|
694
|
-
if (hasRequiredIsObjectLike) return isObjectLike_1;
|
|
695
|
-
hasRequiredIsObjectLike = 1;
|
|
696
|
-
function isObjectLike(value) {
|
|
697
|
-
return value != null && typeof value == 'object';
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
isObjectLike_1 = isObjectLike;
|
|
701
|
-
return isObjectLike_1;
|
|
702
|
-
}var isSymbol_1;
|
|
703
|
-
var hasRequiredIsSymbol;
|
|
704
|
-
|
|
705
|
-
function requireIsSymbol () {
|
|
706
|
-
if (hasRequiredIsSymbol) return isSymbol_1;
|
|
707
|
-
hasRequiredIsSymbol = 1;
|
|
708
|
-
var baseGetTag = require_baseGetTag(),
|
|
709
|
-
isObjectLike = requireIsObjectLike();
|
|
710
|
-
|
|
711
|
-
/** `Object#toString` result references. */
|
|
712
|
-
var symbolTag = '[object Symbol]';
|
|
713
|
-
|
|
714
|
-
/**
|
|
715
|
-
* Checks if `value` is classified as a `Symbol` primitive or object.
|
|
716
|
-
*
|
|
717
|
-
* @static
|
|
718
|
-
* @memberOf _
|
|
719
|
-
* @since 4.0.0
|
|
720
|
-
* @category Lang
|
|
721
|
-
* @param {*} value The value to check.
|
|
722
|
-
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
|
|
723
|
-
* @example
|
|
724
|
-
*
|
|
725
|
-
* _.isSymbol(Symbol.iterator);
|
|
726
|
-
* // => true
|
|
727
|
-
*
|
|
728
|
-
* _.isSymbol('abc');
|
|
729
|
-
* // => false
|
|
730
|
-
*/
|
|
731
|
-
function isSymbol(value) {
|
|
732
|
-
return typeof value == 'symbol' ||
|
|
733
|
-
(isObjectLike(value) && baseGetTag(value) == symbolTag);
|
|
734
|
-
}
|
|
735
|
-
|
|
736
|
-
isSymbol_1 = isSymbol;
|
|
737
|
-
return isSymbol_1;
|
|
738
|
-
}var toNumber_1;
|
|
739
|
-
var hasRequiredToNumber;
|
|
740
|
-
|
|
741
|
-
function requireToNumber () {
|
|
742
|
-
if (hasRequiredToNumber) return toNumber_1;
|
|
743
|
-
hasRequiredToNumber = 1;
|
|
744
|
-
var baseTrim = require_baseTrim(),
|
|
745
|
-
isObject = requireIsObject(),
|
|
746
|
-
isSymbol = requireIsSymbol();
|
|
747
|
-
|
|
748
|
-
/** Used as references for various `Number` constants. */
|
|
749
|
-
var NAN = 0 / 0;
|
|
750
|
-
|
|
751
|
-
/** Used to detect bad signed hexadecimal string values. */
|
|
752
|
-
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
|
|
753
|
-
|
|
754
|
-
/** Used to detect binary string values. */
|
|
755
|
-
var reIsBinary = /^0b[01]+$/i;
|
|
756
|
-
|
|
757
|
-
/** Used to detect octal string values. */
|
|
758
|
-
var reIsOctal = /^0o[0-7]+$/i;
|
|
759
|
-
|
|
760
|
-
/** Built-in method references without a dependency on `root`. */
|
|
761
|
-
var freeParseInt = parseInt;
|
|
762
|
-
|
|
763
|
-
/**
|
|
764
|
-
* Converts `value` to a number.
|
|
765
|
-
*
|
|
766
|
-
* @static
|
|
767
|
-
* @memberOf _
|
|
768
|
-
* @since 4.0.0
|
|
769
|
-
* @category Lang
|
|
770
|
-
* @param {*} value The value to process.
|
|
771
|
-
* @returns {number} Returns the number.
|
|
772
|
-
* @example
|
|
773
|
-
*
|
|
774
|
-
* _.toNumber(3.2);
|
|
775
|
-
* // => 3.2
|
|
776
|
-
*
|
|
777
|
-
* _.toNumber(Number.MIN_VALUE);
|
|
778
|
-
* // => 5e-324
|
|
779
|
-
*
|
|
780
|
-
* _.toNumber(Infinity);
|
|
781
|
-
* // => Infinity
|
|
782
|
-
*
|
|
783
|
-
* _.toNumber('3.2');
|
|
784
|
-
* // => 3.2
|
|
785
|
-
*/
|
|
786
|
-
function toNumber(value) {
|
|
787
|
-
if (typeof value == 'number') {
|
|
788
|
-
return value;
|
|
789
|
-
}
|
|
790
|
-
if (isSymbol(value)) {
|
|
791
|
-
return NAN;
|
|
792
|
-
}
|
|
793
|
-
if (isObject(value)) {
|
|
794
|
-
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
|
|
795
|
-
value = isObject(other) ? (other + '') : other;
|
|
796
|
-
}
|
|
797
|
-
if (typeof value != 'string') {
|
|
798
|
-
return value === 0 ? value : +value;
|
|
799
|
-
}
|
|
800
|
-
value = baseTrim(value);
|
|
801
|
-
var isBinary = reIsBinary.test(value);
|
|
802
|
-
return (isBinary || reIsOctal.test(value))
|
|
803
|
-
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
|
|
804
|
-
: (reIsBadHex.test(value) ? NAN : +value);
|
|
805
|
-
}
|
|
806
|
-
|
|
807
|
-
toNumber_1 = toNumber;
|
|
808
|
-
return toNumber_1;
|
|
809
|
-
}var debounce_1;
|
|
810
|
-
var hasRequiredDebounce;
|
|
811
|
-
|
|
812
|
-
function requireDebounce () {
|
|
813
|
-
if (hasRequiredDebounce) return debounce_1;
|
|
814
|
-
hasRequiredDebounce = 1;
|
|
815
|
-
var isObject = requireIsObject(),
|
|
816
|
-
now = requireNow(),
|
|
817
|
-
toNumber = requireToNumber();
|
|
818
|
-
|
|
819
|
-
/** Error message constants. */
|
|
820
|
-
var FUNC_ERROR_TEXT = 'Expected a function';
|
|
821
|
-
|
|
822
|
-
/* Built-in method references for those with the same name as other `lodash` methods. */
|
|
823
|
-
var nativeMax = Math.max,
|
|
824
|
-
nativeMin = Math.min;
|
|
825
|
-
|
|
826
|
-
/**
|
|
827
|
-
* Creates a debounced function that delays invoking `func` until after `wait`
|
|
828
|
-
* milliseconds have elapsed since the last time the debounced function was
|
|
829
|
-
* invoked. The debounced function comes with a `cancel` method to cancel
|
|
830
|
-
* delayed `func` invocations and a `flush` method to immediately invoke them.
|
|
831
|
-
* Provide `options` to indicate whether `func` should be invoked on the
|
|
832
|
-
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
|
|
833
|
-
* with the last arguments provided to the debounced function. Subsequent
|
|
834
|
-
* calls to the debounced function return the result of the last `func`
|
|
835
|
-
* invocation.
|
|
836
|
-
*
|
|
837
|
-
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
838
|
-
* invoked on the trailing edge of the timeout only if the debounced function
|
|
839
|
-
* is invoked more than once during the `wait` timeout.
|
|
840
|
-
*
|
|
841
|
-
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
842
|
-
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
843
|
-
*
|
|
844
|
-
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
845
|
-
* for details over the differences between `_.debounce` and `_.throttle`.
|
|
846
|
-
*
|
|
847
|
-
* @static
|
|
848
|
-
* @memberOf _
|
|
849
|
-
* @since 0.1.0
|
|
850
|
-
* @category Function
|
|
851
|
-
* @param {Function} func The function to debounce.
|
|
852
|
-
* @param {number} [wait=0] The number of milliseconds to delay.
|
|
853
|
-
* @param {Object} [options={}] The options object.
|
|
854
|
-
* @param {boolean} [options.leading=false]
|
|
855
|
-
* Specify invoking on the leading edge of the timeout.
|
|
856
|
-
* @param {number} [options.maxWait]
|
|
857
|
-
* The maximum time `func` is allowed to be delayed before it's invoked.
|
|
858
|
-
* @param {boolean} [options.trailing=true]
|
|
859
|
-
* Specify invoking on the trailing edge of the timeout.
|
|
860
|
-
* @returns {Function} Returns the new debounced function.
|
|
861
|
-
* @example
|
|
862
|
-
*
|
|
863
|
-
* // Avoid costly calculations while the window size is in flux.
|
|
864
|
-
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
|
|
865
|
-
*
|
|
866
|
-
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
|
|
867
|
-
* jQuery(element).on('click', _.debounce(sendMail, 300, {
|
|
868
|
-
* 'leading': true,
|
|
869
|
-
* 'trailing': false
|
|
870
|
-
* }));
|
|
871
|
-
*
|
|
872
|
-
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
|
|
873
|
-
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
|
|
874
|
-
* var source = new EventSource('/stream');
|
|
875
|
-
* jQuery(source).on('message', debounced);
|
|
876
|
-
*
|
|
877
|
-
* // Cancel the trailing debounced invocation.
|
|
878
|
-
* jQuery(window).on('popstate', debounced.cancel);
|
|
879
|
-
*/
|
|
880
|
-
function debounce(func, wait, options) {
|
|
881
|
-
var lastArgs,
|
|
882
|
-
lastThis,
|
|
883
|
-
maxWait,
|
|
884
|
-
result,
|
|
885
|
-
timerId,
|
|
886
|
-
lastCallTime,
|
|
887
|
-
lastInvokeTime = 0,
|
|
888
|
-
leading = false,
|
|
889
|
-
maxing = false,
|
|
890
|
-
trailing = true;
|
|
891
|
-
|
|
892
|
-
if (typeof func != 'function') {
|
|
893
|
-
throw new TypeError(FUNC_ERROR_TEXT);
|
|
894
|
-
}
|
|
895
|
-
wait = toNumber(wait) || 0;
|
|
896
|
-
if (isObject(options)) {
|
|
897
|
-
leading = !!options.leading;
|
|
898
|
-
maxing = 'maxWait' in options;
|
|
899
|
-
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
|
|
900
|
-
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
function invokeFunc(time) {
|
|
904
|
-
var args = lastArgs,
|
|
905
|
-
thisArg = lastThis;
|
|
906
|
-
|
|
907
|
-
lastArgs = lastThis = undefined;
|
|
908
|
-
lastInvokeTime = time;
|
|
909
|
-
result = func.apply(thisArg, args);
|
|
910
|
-
return result;
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
function leadingEdge(time) {
|
|
914
|
-
// Reset any `maxWait` timer.
|
|
915
|
-
lastInvokeTime = time;
|
|
916
|
-
// Start the timer for the trailing edge.
|
|
917
|
-
timerId = setTimeout(timerExpired, wait);
|
|
918
|
-
// Invoke the leading edge.
|
|
919
|
-
return leading ? invokeFunc(time) : result;
|
|
920
|
-
}
|
|
921
|
-
|
|
922
|
-
function remainingWait(time) {
|
|
923
|
-
var timeSinceLastCall = time - lastCallTime,
|
|
924
|
-
timeSinceLastInvoke = time - lastInvokeTime,
|
|
925
|
-
timeWaiting = wait - timeSinceLastCall;
|
|
926
|
-
|
|
927
|
-
return maxing
|
|
928
|
-
? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
|
|
929
|
-
: timeWaiting;
|
|
930
|
-
}
|
|
931
|
-
|
|
932
|
-
function shouldInvoke(time) {
|
|
933
|
-
var timeSinceLastCall = time - lastCallTime,
|
|
934
|
-
timeSinceLastInvoke = time - lastInvokeTime;
|
|
935
|
-
|
|
936
|
-
// Either this is the first call, activity has stopped and we're at the
|
|
937
|
-
// trailing edge, the system time has gone backwards and we're treating
|
|
938
|
-
// it as the trailing edge, or we've hit the `maxWait` limit.
|
|
939
|
-
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
|
|
940
|
-
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
|
|
941
|
-
}
|
|
942
|
-
|
|
943
|
-
function timerExpired() {
|
|
944
|
-
var time = now();
|
|
945
|
-
if (shouldInvoke(time)) {
|
|
946
|
-
return trailingEdge(time);
|
|
947
|
-
}
|
|
948
|
-
// Restart the timer.
|
|
949
|
-
timerId = setTimeout(timerExpired, remainingWait(time));
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
function trailingEdge(time) {
|
|
953
|
-
timerId = undefined;
|
|
954
|
-
|
|
955
|
-
// Only invoke if we have `lastArgs` which means `func` has been
|
|
956
|
-
// debounced at least once.
|
|
957
|
-
if (trailing && lastArgs) {
|
|
958
|
-
return invokeFunc(time);
|
|
959
|
-
}
|
|
960
|
-
lastArgs = lastThis = undefined;
|
|
961
|
-
return result;
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
function cancel() {
|
|
965
|
-
if (timerId !== undefined) {
|
|
966
|
-
clearTimeout(timerId);
|
|
967
|
-
}
|
|
968
|
-
lastInvokeTime = 0;
|
|
969
|
-
lastArgs = lastCallTime = lastThis = timerId = undefined;
|
|
970
|
-
}
|
|
971
|
-
|
|
972
|
-
function flush() {
|
|
973
|
-
return timerId === undefined ? result : trailingEdge(now());
|
|
974
|
-
}
|
|
975
|
-
|
|
976
|
-
function debounced() {
|
|
977
|
-
var time = now(),
|
|
978
|
-
isInvoking = shouldInvoke(time);
|
|
979
|
-
|
|
980
|
-
lastArgs = arguments;
|
|
981
|
-
lastThis = this;
|
|
982
|
-
lastCallTime = time;
|
|
983
|
-
|
|
984
|
-
if (isInvoking) {
|
|
985
|
-
if (timerId === undefined) {
|
|
986
|
-
return leadingEdge(lastCallTime);
|
|
987
|
-
}
|
|
988
|
-
if (maxing) {
|
|
989
|
-
// Handle invocations in a tight loop.
|
|
990
|
-
clearTimeout(timerId);
|
|
991
|
-
timerId = setTimeout(timerExpired, wait);
|
|
992
|
-
return invokeFunc(lastCallTime);
|
|
993
|
-
}
|
|
994
|
-
}
|
|
995
|
-
if (timerId === undefined) {
|
|
996
|
-
timerId = setTimeout(timerExpired, wait);
|
|
997
|
-
}
|
|
998
|
-
return result;
|
|
999
|
-
}
|
|
1000
|
-
debounced.cancel = cancel;
|
|
1001
|
-
debounced.flush = flush;
|
|
1002
|
-
return debounced;
|
|
1003
|
-
}
|
|
1004
|
-
|
|
1005
|
-
debounce_1 = debounce;
|
|
1006
|
-
return debounce_1;
|
|
1007
|
-
}var debounceExports = requireDebounce();
|
|
1008
|
-
var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);var throttle_1;
|
|
1009
|
-
var hasRequiredThrottle;
|
|
1010
|
-
|
|
1011
|
-
function requireThrottle () {
|
|
1012
|
-
if (hasRequiredThrottle) return throttle_1;
|
|
1013
|
-
hasRequiredThrottle = 1;
|
|
1014
|
-
var debounce = requireDebounce(),
|
|
1015
|
-
isObject = requireIsObject();
|
|
1016
|
-
|
|
1017
|
-
/** Error message constants. */
|
|
1018
|
-
var FUNC_ERROR_TEXT = 'Expected a function';
|
|
1019
|
-
|
|
1020
|
-
/**
|
|
1021
|
-
* Creates a throttled function that only invokes `func` at most once per
|
|
1022
|
-
* every `wait` milliseconds. The throttled function comes with a `cancel`
|
|
1023
|
-
* method to cancel delayed `func` invocations and a `flush` method to
|
|
1024
|
-
* immediately invoke them. Provide `options` to indicate whether `func`
|
|
1025
|
-
* should be invoked on the leading and/or trailing edge of the `wait`
|
|
1026
|
-
* timeout. The `func` is invoked with the last arguments provided to the
|
|
1027
|
-
* throttled function. Subsequent calls to the throttled function return the
|
|
1028
|
-
* result of the last `func` invocation.
|
|
1029
|
-
*
|
|
1030
|
-
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
1031
|
-
* invoked on the trailing edge of the timeout only if the throttled function
|
|
1032
|
-
* is invoked more than once during the `wait` timeout.
|
|
1033
|
-
*
|
|
1034
|
-
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
1035
|
-
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
1036
|
-
*
|
|
1037
|
-
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
1038
|
-
* for details over the differences between `_.throttle` and `_.debounce`.
|
|
1039
|
-
*
|
|
1040
|
-
* @static
|
|
1041
|
-
* @memberOf _
|
|
1042
|
-
* @since 0.1.0
|
|
1043
|
-
* @category Function
|
|
1044
|
-
* @param {Function} func The function to throttle.
|
|
1045
|
-
* @param {number} [wait=0] The number of milliseconds to throttle invocations to.
|
|
1046
|
-
* @param {Object} [options={}] The options object.
|
|
1047
|
-
* @param {boolean} [options.leading=true]
|
|
1048
|
-
* Specify invoking on the leading edge of the timeout.
|
|
1049
|
-
* @param {boolean} [options.trailing=true]
|
|
1050
|
-
* Specify invoking on the trailing edge of the timeout.
|
|
1051
|
-
* @returns {Function} Returns the new throttled function.
|
|
1052
|
-
* @example
|
|
1053
|
-
*
|
|
1054
|
-
* // Avoid excessively updating the position while scrolling.
|
|
1055
|
-
* jQuery(window).on('scroll', _.throttle(updatePosition, 100));
|
|
1056
|
-
*
|
|
1057
|
-
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
|
|
1058
|
-
* var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
|
|
1059
|
-
* jQuery(element).on('click', throttled);
|
|
1060
|
-
*
|
|
1061
|
-
* // Cancel the trailing throttled invocation.
|
|
1062
|
-
* jQuery(window).on('popstate', throttled.cancel);
|
|
1063
|
-
*/
|
|
1064
|
-
function throttle(func, wait, options) {
|
|
1065
|
-
var leading = true,
|
|
1066
|
-
trailing = true;
|
|
1067
|
-
|
|
1068
|
-
if (typeof func != 'function') {
|
|
1069
|
-
throw new TypeError(FUNC_ERROR_TEXT);
|
|
1070
|
-
}
|
|
1071
|
-
if (isObject(options)) {
|
|
1072
|
-
leading = 'leading' in options ? !!options.leading : leading;
|
|
1073
|
-
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
|
1074
|
-
}
|
|
1075
|
-
return debounce(func, wait, {
|
|
1076
|
-
'leading': leading,
|
|
1077
|
-
'maxWait': wait,
|
|
1078
|
-
'trailing': trailing
|
|
1079
|
-
});
|
|
1080
|
-
}
|
|
1081
|
-
|
|
1082
|
-
throttle_1 = throttle;
|
|
1083
|
-
return throttle_1;
|
|
1084
|
-
}var throttleExports = requireThrottle();
|
|
1085
|
-
var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttleExports);/**
|
|
1086
|
-
* Wraps the resize callback with a lodash debounce / throttle based on the refresh mode
|
|
455
|
+
* Wraps the resize callback with a es-toolkit debounce / throttle based on the refresh mode
|
|
1087
456
|
*/
|
|
1088
457
|
const patchResizeCallback = (resizeCallback, refreshMode, refreshRate, refreshOptions) => {
|
|
1089
458
|
switch (refreshMode) {
|
|
@@ -1180,7 +549,7 @@ const getDimensions = (entry, box) => {
|
|
|
1180
549
|
height: entry.contentRect.height,
|
|
1181
550
|
};
|
|
1182
551
|
};// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1183
|
-
function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize, } = {}) {
|
|
552
|
+
function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize, disableRerender = false, } = {}) {
|
|
1184
553
|
// If `skipOnMount` is enabled, skip the first resize event
|
|
1185
554
|
const skipResize = useRef(skipOnMount);
|
|
1186
555
|
// Wrap the `onResize` callback with a ref to avoid re-renders
|
|
@@ -1189,6 +558,10 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
|
|
|
1189
558
|
width: undefined,
|
|
1190
559
|
height: undefined,
|
|
1191
560
|
});
|
|
561
|
+
const sizeRef = useRef({
|
|
562
|
+
width: undefined,
|
|
563
|
+
height: undefined,
|
|
564
|
+
});
|
|
1192
565
|
// Create a proxy ref to handle conditional rendering and dynamic ref changes of the target element
|
|
1193
566
|
const { refProxy, refElement } = useRefProxy(targetRef);
|
|
1194
567
|
const { box } = observerOptions || {};
|
|
@@ -1203,18 +576,31 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
|
|
|
1203
576
|
const shouldSetSize = (prevSize, nextSize) => (handleWidth && prevSize.width !== nextSize.width) || (handleHeight && prevSize.height !== nextSize.height);
|
|
1204
577
|
entries.forEach((entry) => {
|
|
1205
578
|
const dimensions = getDimensions(entry, box);
|
|
1206
|
-
|
|
1207
|
-
if (
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
579
|
+
if (disableRerender) {
|
|
580
|
+
if (shouldSetSize(sizeRef.current, dimensions)) {
|
|
581
|
+
sizeRef.current.width = dimensions.width;
|
|
582
|
+
sizeRef.current.height = dimensions.height;
|
|
583
|
+
onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({
|
|
584
|
+
width: dimensions.width,
|
|
585
|
+
height: dimensions.height,
|
|
586
|
+
entry,
|
|
587
|
+
});
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
else {
|
|
591
|
+
setSize((prevSize) => {
|
|
592
|
+
if (!shouldSetSize(prevSize, dimensions))
|
|
593
|
+
return prevSize;
|
|
594
|
+
onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef({
|
|
595
|
+
width: dimensions.width,
|
|
596
|
+
height: dimensions.height,
|
|
597
|
+
entry,
|
|
598
|
+
});
|
|
599
|
+
return dimensions;
|
|
1213
600
|
});
|
|
1214
|
-
|
|
1215
|
-
});
|
|
601
|
+
}
|
|
1216
602
|
});
|
|
1217
|
-
}, [handleWidth, handleHeight, skipResize, box]);
|
|
603
|
+
}, [handleWidth, handleHeight, skipResize, box, disableRerender]);
|
|
1218
604
|
// Throttle/Debounce the resize event if refreshMode is configured
|
|
1219
605
|
const resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
|
|
1220
606
|
resizeCallback,
|
|
@@ -1241,7 +627,11 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
|
|
|
1241
627
|
height: null,
|
|
1242
628
|
entry: null,
|
|
1243
629
|
});
|
|
1244
|
-
|
|
630
|
+
sizeRef.current.width = undefined;
|
|
631
|
+
sizeRef.current.height = undefined;
|
|
632
|
+
if (!disableRerender) {
|
|
633
|
+
setSize({ width: undefined, height: undefined });
|
|
634
|
+
}
|
|
1245
635
|
}
|
|
1246
636
|
// Disconnect the ResizeObserver when the component is unmounted
|
|
1247
637
|
return () => {
|
|
@@ -1250,49 +640,64 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
|
|
|
1250
640
|
(_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
1251
641
|
};
|
|
1252
642
|
}, [resizeHandler, refElement]);
|
|
1253
|
-
return Object.assign({ ref: refProxy }, size);
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
643
|
+
return Object.assign({ ref: refProxy }, (disableRerender ? sizeRef.current : size));
|
|
644
|
+
}const StyledBodyRow = styled(TableRow)(({ theme }) => ({
|
|
645
|
+
'&.odd-color:nth-of-type(odd):not(:hover)': {
|
|
646
|
+
backgroundColor: lighten(theme.palette.action.hover, 0.4),
|
|
647
|
+
},
|
|
648
|
+
'&.even-color:nth-of-type(even):not(:hover)': {
|
|
649
|
+
backgroundColor: lighten(theme.palette.action.hover, 0.4),
|
|
650
|
+
},
|
|
651
|
+
}));
|
|
652
|
+
const StyledNoDataDiv = styled('div') `
|
|
653
|
+
text-align: center;
|
|
654
|
+
padding: 30px 0;
|
|
655
|
+
font-weight: 500;
|
|
656
|
+
font-size: 13px;
|
|
657
|
+
color: #94a0b2;
|
|
658
|
+
opacity: 0.8;
|
|
659
|
+
|
|
660
|
+
.material-icons {
|
|
661
|
+
font-size: 40px;
|
|
662
|
+
margin-bottom: 5px;
|
|
663
|
+
}
|
|
664
|
+
`;const PTableContext = createContext({});function useTableState() {
|
|
665
|
+
const value = useContext(PTableContext);
|
|
1268
666
|
if (empty(value)) {
|
|
1269
667
|
throw new Error('useTableState should be used within TableContext.Provider');
|
|
1270
668
|
}
|
|
1271
669
|
return value;
|
|
1272
|
-
}
|
|
1273
|
-
|
|
670
|
+
}const StyledTableCell = styled(TableCell) `
|
|
671
|
+
&.ellipsis {
|
|
672
|
+
position: relative;
|
|
673
|
+
max-width: 0;
|
|
674
|
+
overflow: hidden;
|
|
675
|
+
text-overflow: ellipsis;
|
|
676
|
+
white-space: nowrap;
|
|
677
|
+
}
|
|
678
|
+
`;
|
|
679
|
+
const PTableCommonCell = React__default.forwardRef(({ children, className: initClassName, style: initStyle, sx: initSx, type, column, defaultAlign, defaultEllipsis: initDefaultEllipsis, index, item, onClick, }, ref) => {
|
|
1274
680
|
/********************************************************************************************************************
|
|
1275
681
|
* Use
|
|
1276
682
|
* ******************************************************************************************************************/
|
|
1277
|
-
|
|
1278
|
-
var menuOpen = useTableState().menuOpen;
|
|
683
|
+
const { menuOpen } = useTableState();
|
|
1279
684
|
/********************************************************************************************************************
|
|
1280
685
|
* Memo
|
|
1281
686
|
* ******************************************************************************************************************/
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
687
|
+
const { align, ellipsis } = useMemo(() => {
|
|
688
|
+
const align = getTableColumnAlign(column, defaultAlign);
|
|
689
|
+
const ellipsis = type !== 'head' &&
|
|
1285
690
|
(column.ellipsis ||
|
|
1286
691
|
(column.type !== 'img' &&
|
|
1287
692
|
column.type !== 'button' &&
|
|
1288
693
|
column.type !== 'buttons' &&
|
|
1289
694
|
(column.ellipsis == null ? !!initDefaultEllipsis : false)));
|
|
1290
|
-
return { align
|
|
1291
|
-
}, [column, defaultAlign, initDefaultEllipsis, type])
|
|
1292
|
-
|
|
695
|
+
return { align, ellipsis };
|
|
696
|
+
}, [column, defaultAlign, initDefaultEllipsis, type]);
|
|
697
|
+
const className = useMemo(() => {
|
|
1293
698
|
var _a, _b, _c, _d, _e, _f;
|
|
1294
|
-
|
|
1295
|
-
|
|
699
|
+
let className;
|
|
700
|
+
let getClassName;
|
|
1296
701
|
switch (type) {
|
|
1297
702
|
case 'head':
|
|
1298
703
|
className = (_a = column.head) === null || _a === void 0 ? void 0 : _a.className;
|
|
@@ -1316,35 +721,35 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
|
|
|
1316
721
|
return initClassName;
|
|
1317
722
|
}
|
|
1318
723
|
}, [column, index, initClassName, item, type]);
|
|
1319
|
-
|
|
724
|
+
const style = useMemo(() => {
|
|
1320
725
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1321
|
-
|
|
1322
|
-
|
|
726
|
+
let style;
|
|
727
|
+
let getStyle;
|
|
1323
728
|
switch (type) {
|
|
1324
729
|
case 'head':
|
|
1325
730
|
style = ((_a = column.head) === null || _a === void 0 ? void 0 : _a.backgroundColor)
|
|
1326
|
-
?
|
|
731
|
+
? Object.assign(Object.assign({}, (_b = column.head) === null || _b === void 0 ? void 0 : _b.style), { backgroundColor: column.head.backgroundColor }) : (_c = column.head) === null || _c === void 0 ? void 0 : _c.style;
|
|
1327
732
|
getStyle = ((_d = column.head) === null || _d === void 0 ? void 0 : _d.onGetStyle) ? (_e = column.head) === null || _e === void 0 ? void 0 : _e.onGetStyle() : undefined;
|
|
1328
733
|
break;
|
|
1329
734
|
case 'body':
|
|
1330
|
-
style = column.backgroundColor ?
|
|
735
|
+
style = column.backgroundColor ? Object.assign(Object.assign({}, column.style), { backgroundColor: column.backgroundColor }) : column.style;
|
|
1331
736
|
if (item != null && index != null) {
|
|
1332
737
|
getStyle = column.onGetStyle ? column.onGetStyle(item, index) : undefined;
|
|
1333
738
|
}
|
|
1334
739
|
break;
|
|
1335
740
|
case 'footer':
|
|
1336
741
|
style = ((_f = column.footer) === null || _f === void 0 ? void 0 : _f.backgroundColor)
|
|
1337
|
-
?
|
|
742
|
+
? Object.assign(Object.assign({}, (_g = column.footer) === null || _g === void 0 ? void 0 : _g.style), { backgroundColor: column.footer.backgroundColor }) : (_h = column.footer) === null || _h === void 0 ? void 0 : _h.style;
|
|
1338
743
|
getStyle = ((_j = column.footer) === null || _j === void 0 ? void 0 : _j.onGetStyle) ? (_k = column.footer) === null || _k === void 0 ? void 0 : _k.onGetStyle() : undefined;
|
|
1339
744
|
break;
|
|
1340
745
|
}
|
|
1341
|
-
return
|
|
746
|
+
return Object.assign(Object.assign(Object.assign(Object.assign({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined, paddingLeft: column.paddingLeft, paddingRight: column.paddingRight }), style), getStyle);
|
|
1342
747
|
}, [column, index, initStyle, item, onClick, type]);
|
|
1343
|
-
|
|
748
|
+
const sx = useMemo(() => {
|
|
1344
749
|
var _a, _b, _c, _d, _e, _f;
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
750
|
+
let sx;
|
|
751
|
+
let getSx;
|
|
752
|
+
let displaySx;
|
|
1348
753
|
switch (type) {
|
|
1349
754
|
case 'head':
|
|
1350
755
|
sx = (_a = column.head) === null || _a === void 0 ? void 0 : _a.sx;
|
|
@@ -1362,7 +767,7 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
|
|
|
1362
767
|
break;
|
|
1363
768
|
}
|
|
1364
769
|
if (column.display) {
|
|
1365
|
-
|
|
770
|
+
const display = {};
|
|
1366
771
|
if (column.display.xs !== undefined)
|
|
1367
772
|
display.xs = column.display.xs ? 'table-cell' : 'none';
|
|
1368
773
|
if (column.display.sm !== undefined)
|
|
@@ -1373,9 +778,9 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
|
|
|
1373
778
|
display.lg = column.display.lg ? 'table-cell' : 'none';
|
|
1374
779
|
if (column.display.xl !== undefined)
|
|
1375
780
|
display.xl = column.display.xl ? 'table-cell' : 'none';
|
|
1376
|
-
displaySx = { display
|
|
781
|
+
displaySx = { display };
|
|
1377
782
|
}
|
|
1378
|
-
|
|
783
|
+
const sxList = [];
|
|
1379
784
|
if (getSx)
|
|
1380
785
|
sxList.push(getSx);
|
|
1381
786
|
if (sx)
|
|
@@ -1389,9 +794,9 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
|
|
|
1389
794
|
return sxList[0];
|
|
1390
795
|
}
|
|
1391
796
|
else {
|
|
1392
|
-
if (!sxList.find(
|
|
1393
|
-
return sxList.reduce(
|
|
1394
|
-
res =
|
|
797
|
+
if (!sxList.find((sx) => typeof sx !== 'object')) {
|
|
798
|
+
return sxList.reduce((res, sx) => {
|
|
799
|
+
res = Object.assign(Object.assign({}, res), sx);
|
|
1395
800
|
return res;
|
|
1396
801
|
}, {});
|
|
1397
802
|
}
|
|
@@ -1401,7 +806,7 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
|
|
|
1401
806
|
/********************************************************************************************************************
|
|
1402
807
|
* Event Handler
|
|
1403
808
|
* ******************************************************************************************************************/
|
|
1404
|
-
|
|
809
|
+
const handleClick = useCallback((e) => {
|
|
1405
810
|
if (!menuOpen &&
|
|
1406
811
|
column.type !== 'check' &&
|
|
1407
812
|
column.type !== 'button' &&
|
|
@@ -1424,14 +829,12 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
|
|
|
1424
829
|
/********************************************************************************************************************
|
|
1425
830
|
* Render
|
|
1426
831
|
* ******************************************************************************************************************/
|
|
1427
|
-
return (React__default.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ?
|
|
1428
|
-
});
|
|
1429
|
-
var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
832
|
+
return (React__default.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', ellipsis && 'ellipsis', column.type ? `column-type-${column.type}` : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
|
|
833
|
+
});const PTableFooterCell = ({ column, items, defaultAlign }) => {
|
|
1430
834
|
/********************************************************************************************************************
|
|
1431
835
|
* Memo
|
|
1432
836
|
* ******************************************************************************************************************/
|
|
1433
|
-
|
|
1434
|
-
var data = useMemo(function () {
|
|
837
|
+
const data = useMemo(() => {
|
|
1435
838
|
var _a, _b, _c;
|
|
1436
839
|
if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
|
|
1437
840
|
return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
|
|
@@ -1444,52 +847,46 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1444
847
|
* Render
|
|
1445
848
|
* ******************************************************************************************************************/
|
|
1446
849
|
return (React__default.createElement(PTableCommonCell, { type: 'head', className: 'PTableFooterCell', column: column, defaultAlign: defaultAlign }, data));
|
|
1447
|
-
};
|
|
1448
|
-
var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
|
|
850
|
+
};const PTablePagination = ({ className, style, sx, paging, align, onChange }) => {
|
|
1449
851
|
return (React__default.createElement(Stack, { alignItems: align },
|
|
1450
|
-
React__default.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange:
|
|
852
|
+
React__default.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('PTablePagination', className), style: style, sx: sx, onChange: (e, page) => {
|
|
1451
853
|
if (onChange)
|
|
1452
854
|
onChange(page);
|
|
1453
855
|
} })));
|
|
1454
|
-
};
|
|
1455
|
-
var children = _a.children, value = _a.value;
|
|
856
|
+
};const PTableContextProvider = ({ children, value }) => {
|
|
1456
857
|
return React__default.createElement(PTableContext.Provider, { value: value }, children);
|
|
1457
|
-
};
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
},
|
|
1465
|
-
});
|
|
1466
|
-
});var PTableHeadCell = function (_a) {
|
|
858
|
+
};const PTableTopHeadCaptionRow = styled(TableRow)(({ theme }) => ({
|
|
859
|
+
'> th': {
|
|
860
|
+
backgroundColor: theme.palette.grey.A100,
|
|
861
|
+
textAlign: 'center',
|
|
862
|
+
fontWeight: 700,
|
|
863
|
+
},
|
|
864
|
+
}));const PTableHeadCell = ({ column, items, defaultAlign, top, onCheckChange }) => {
|
|
1467
865
|
/********************************************************************************************************************
|
|
1468
866
|
* Use
|
|
1469
867
|
* ******************************************************************************************************************/
|
|
1470
|
-
|
|
1471
|
-
var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
|
|
868
|
+
const { setHeadColumnChecked, setHeadColumnCommands } = useTableState();
|
|
1472
869
|
/********************************************************************************************************************
|
|
1473
870
|
* State
|
|
1474
871
|
* ******************************************************************************************************************/
|
|
1475
|
-
|
|
1476
|
-
|
|
872
|
+
const [checked, setChecked] = useState(false);
|
|
873
|
+
const [checkDisabled, setCheckDisabled] = useState(false);
|
|
1477
874
|
/********************************************************************************************************************
|
|
1478
875
|
* Effect
|
|
1479
876
|
* ******************************************************************************************************************/
|
|
1480
|
-
useEffect(
|
|
877
|
+
useEffect(() => {
|
|
1481
878
|
if (column.type === 'check') {
|
|
1482
879
|
setHeadColumnChecked(column, checked);
|
|
1483
880
|
}
|
|
1484
881
|
}, [column, checked, setHeadColumnChecked]);
|
|
1485
|
-
useEffect(
|
|
882
|
+
useEffect(() => {
|
|
1486
883
|
setHeadColumnCommands(column, {
|
|
1487
|
-
setChecked
|
|
884
|
+
setChecked(checked) {
|
|
1488
885
|
if (column.type === 'check') {
|
|
1489
886
|
setChecked(checked);
|
|
1490
887
|
}
|
|
1491
888
|
},
|
|
1492
|
-
setCheckDisabled
|
|
889
|
+
setCheckDisabled(checkDisabled) {
|
|
1493
890
|
if (column.type === 'check') {
|
|
1494
891
|
setCheckDisabled(checkDisabled);
|
|
1495
892
|
}
|
|
@@ -1499,7 +896,7 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1499
896
|
/********************************************************************************************************************
|
|
1500
897
|
* Memo
|
|
1501
898
|
* ******************************************************************************************************************/
|
|
1502
|
-
|
|
899
|
+
const data = useMemo(() => {
|
|
1503
900
|
var _a, _b, _c, _d;
|
|
1504
901
|
if (column.type === 'check') {
|
|
1505
902
|
if (column.hideAllCheck) {
|
|
@@ -1516,7 +913,7 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1516
913
|
}
|
|
1517
914
|
}
|
|
1518
915
|
else {
|
|
1519
|
-
return (React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange:
|
|
916
|
+
return (React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: (e, newChecked) => {
|
|
1520
917
|
setChecked(newChecked);
|
|
1521
918
|
onCheckChange && onCheckChange(column, newChecked);
|
|
1522
919
|
} }));
|
|
@@ -1539,63 +936,68 @@ var templateObject_1$2;var PTableFooterCell = function (_a) {
|
|
|
1539
936
|
/********************************************************************************************************************
|
|
1540
937
|
* Render
|
|
1541
938
|
* ******************************************************************************************************************/
|
|
1542
|
-
return (React__default.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top
|
|
1543
|
-
};
|
|
1544
|
-
|
|
939
|
+
return (React__default.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', style: top !== undefined ? { top } : undefined, column: column, defaultAlign: defaultAlign }, data));
|
|
940
|
+
};const BottomLine = styled('div') `
|
|
941
|
+
height: 1px;
|
|
942
|
+
position: absolute;
|
|
943
|
+
left: 3px;
|
|
944
|
+
right: 3px;
|
|
945
|
+
bottom: 0;
|
|
946
|
+
`;
|
|
947
|
+
const PTableTopHead = ({ columns, items, rows, caption, defaultAlign, onCheckChange }) => {
|
|
1545
948
|
/********************************************************************************************************************
|
|
1546
949
|
* Use
|
|
1547
950
|
* ******************************************************************************************************************/
|
|
1548
|
-
|
|
1549
|
-
var theme = useTheme();
|
|
951
|
+
const theme = useTheme();
|
|
1550
952
|
/********************************************************************************************************************
|
|
1551
953
|
* Ref
|
|
1552
954
|
* ******************************************************************************************************************/
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
955
|
+
const captionRef = useRef(null);
|
|
956
|
+
const row1Ref = useRef(null);
|
|
957
|
+
const row2Ref = useRef(null);
|
|
958
|
+
const row3Ref = useRef(null);
|
|
1557
959
|
/********************************************************************************************************************
|
|
1558
960
|
* ResizeDetector
|
|
1559
961
|
* ******************************************************************************************************************/
|
|
1560
|
-
|
|
962
|
+
const { height: captionHeight } = useResizeDetector({
|
|
1561
963
|
targetRef: captionRef,
|
|
1562
964
|
handleWidth: false,
|
|
1563
965
|
handleHeight: true,
|
|
1564
|
-
})
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
966
|
+
});
|
|
967
|
+
const { height: row1Height } = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true });
|
|
968
|
+
const { height: row2Height } = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true });
|
|
969
|
+
const { height: row3Height } = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true });
|
|
1568
970
|
/********************************************************************************************************************
|
|
1569
971
|
* Function
|
|
1570
972
|
* ******************************************************************************************************************/
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
.map(
|
|
973
|
+
const makeRowCells = useCallback((row, top) => {
|
|
974
|
+
let totalColumns = 0;
|
|
975
|
+
const cells = row
|
|
976
|
+
.map((info, idx) => {
|
|
1575
977
|
if (info) {
|
|
1576
978
|
totalColumns += info.colSpan || 1;
|
|
1577
979
|
return (React__default.createElement(TableCell, { key: idx, colSpan: info.colSpan, align: info.align, style: {
|
|
1578
|
-
top
|
|
980
|
+
top,
|
|
1579
981
|
borderBottom: 0,
|
|
1580
982
|
} },
|
|
1581
983
|
info.label,
|
|
1582
984
|
info.label != null && React__default.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
|
|
1583
985
|
}
|
|
1584
986
|
})
|
|
1585
|
-
.filter(
|
|
987
|
+
.filter((cell) => !!cell);
|
|
1586
988
|
if (totalColumns < columns.length) {
|
|
1587
|
-
cells.push(React__default.createElement(TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top
|
|
989
|
+
cells.push(React__default.createElement(TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top, borderBottom: 0 } }));
|
|
1588
990
|
}
|
|
1589
991
|
return cells;
|
|
1590
992
|
}, [columns, theme.palette.divider]);
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
return (React__default.createElement(TableRow, null, columns.map(
|
|
993
|
+
const columnRow = useMemo(() => {
|
|
994
|
+
const top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
|
|
995
|
+
return (React__default.createElement(TableRow, null, columns.map((column, idx) => (React__default.createElement(PTableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })))));
|
|
1594
996
|
}, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
|
|
1595
997
|
/********************************************************************************************************************
|
|
1596
998
|
* Variable
|
|
1597
999
|
* ******************************************************************************************************************/
|
|
1598
|
-
|
|
1000
|
+
const captionRow = !!caption && (React__default.createElement(PTableTopHeadCaptionRow, { ref: captionRef, className: 'PTableTopHeadCaptionRow' },
|
|
1599
1001
|
React__default.createElement(TableCell, { colSpan: columns.length }, caption)));
|
|
1600
1002
|
/********************************************************************************************************************
|
|
1601
1003
|
* Render
|
|
@@ -1604,9 +1006,9 @@ var PTableTopHead = function (_a) {
|
|
|
1604
1006
|
if (Array.isArray(rows[0])) {
|
|
1605
1007
|
return (React__default.createElement(TableHead, { className: 'PTableHead' },
|
|
1606
1008
|
captionRow,
|
|
1607
|
-
rows.map(
|
|
1608
|
-
|
|
1609
|
-
|
|
1009
|
+
rows.map((row, idx) => {
|
|
1010
|
+
let ref = undefined;
|
|
1011
|
+
let top = undefined;
|
|
1610
1012
|
switch (idx) {
|
|
1611
1013
|
case 0:
|
|
1612
1014
|
ref = row1Ref;
|
|
@@ -1638,8 +1040,7 @@ var PTableTopHead = function (_a) {
|
|
|
1638
1040
|
captionRow,
|
|
1639
1041
|
columnRow));
|
|
1640
1042
|
}
|
|
1641
|
-
}
|
|
1642
|
-
var templateObject_1$1;/**
|
|
1043
|
+
};/**
|
|
1643
1044
|
* Checks if `value` is the
|
|
1644
1045
|
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
|
|
1645
1046
|
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
@@ -2156,7 +1557,7 @@ function throttle(func, wait, options) {
|
|
|
2156
1557
|
'trailing': trailing
|
|
2157
1558
|
});
|
|
2158
1559
|
}/**
|
|
2159
|
-
* simplebar-core - v1.3.
|
|
1560
|
+
* simplebar-core - v1.3.2
|
|
2160
1561
|
* Scrollbars, simpler.
|
|
2161
1562
|
* https://grsmto.github.io/simplebar/
|
|
2162
1563
|
*
|
|
@@ -3080,7 +2481,7 @@ var SimpleBarCore = /** @class */ (function () {
|
|
|
3080
2481
|
SimpleBarCore.helpers = helpers;
|
|
3081
2482
|
return SimpleBarCore;
|
|
3082
2483
|
}());/**
|
|
3083
|
-
* simplebar-react - v3.3.
|
|
2484
|
+
* simplebar-react - v3.3.2
|
|
3084
2485
|
* React component for SimpleBar
|
|
3085
2486
|
* https://grsmto.github.io/simplebar/
|
|
3086
2487
|
*
|
|
@@ -3115,7 +2516,7 @@ var __assign = function() {
|
|
|
3115
2516
|
return __assign.apply(this, arguments);
|
|
3116
2517
|
};
|
|
3117
2518
|
|
|
3118
|
-
function __rest(s, e) {
|
|
2519
|
+
function __rest$1(s, e) {
|
|
3119
2520
|
var t = {};
|
|
3120
2521
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
3121
2522
|
t[p] = s[p];
|
|
@@ -3128,7 +2529,7 @@ function __rest(s, e) {
|
|
|
3128
2529
|
}
|
|
3129
2530
|
|
|
3130
2531
|
var SimpleBar = React.forwardRef(function (_a, ref) {
|
|
3131
|
-
var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest(_a, ["children", "scrollableNodeProps"]);
|
|
2532
|
+
var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest$1(_a, ["children", "scrollableNodeProps"]);
|
|
3132
2533
|
var elRef = React.useRef();
|
|
3133
2534
|
var scrollableNodeRef = React.useRef();
|
|
3134
2535
|
var contentNodeRef = React.useRef();
|
|
@@ -3191,10 +2592,42 @@ var SimpleBar = React.forwardRef(function (_a, ref) {
|
|
|
3191
2592
|
React.createElement("div", { className: "".concat(classNames.track, " ").concat(classNames.vertical) },
|
|
3192
2593
|
React.createElement("div", { className: classNames.scrollbar }))));
|
|
3193
2594
|
});
|
|
3194
|
-
SimpleBar.displayName = 'SimpleBar'
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
2595
|
+
SimpleBar.displayName = 'SimpleBar';/******************************************************************************
|
|
2596
|
+
Copyright (c) Microsoft Corporation.
|
|
2597
|
+
|
|
2598
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
2599
|
+
purpose with or without fee is hereby granted.
|
|
2600
|
+
|
|
2601
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
2602
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
2603
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
2604
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
2605
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
2606
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
2607
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
2608
|
+
***************************************************************************** */
|
|
2609
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
2610
|
+
|
|
2611
|
+
|
|
2612
|
+
function __rest(s, e) {
|
|
2613
|
+
var t = {};
|
|
2614
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
2615
|
+
t[p] = s[p];
|
|
2616
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
2617
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
2618
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
2619
|
+
t[p[i]] = s[p[i]];
|
|
2620
|
+
}
|
|
2621
|
+
return t;
|
|
2622
|
+
}
|
|
2623
|
+
|
|
2624
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
2625
|
+
var e = new Error(message);
|
|
2626
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
2627
|
+
};const makeSortableItems = (items) => {
|
|
2628
|
+
return items === null || items === void 0 ? void 0 : items.map((_a, index) => {
|
|
2629
|
+
var { id } = _a, item = __rest(_a, ["id"]);
|
|
2630
|
+
return Object.assign({ id: id == null ? `${v4()}_${index}` : id }, item);
|
|
3198
2631
|
});
|
|
3199
2632
|
};const CSS = /*#__PURE__*/Object.freeze({
|
|
3200
2633
|
Translate: {
|
|
@@ -3246,46 +2679,49 @@ SimpleBar.displayName = 'SimpleBar';var makeSortableItems = function (items) {
|
|
|
3246
2679
|
}
|
|
3247
2680
|
|
|
3248
2681
|
}
|
|
3249
|
-
});
|
|
3250
|
-
|
|
2682
|
+
});const StyledButtonsBox = styled(Box) `
|
|
2683
|
+
display: flex;
|
|
2684
|
+
flex-wrap: wrap;
|
|
2685
|
+
gap: 5px;
|
|
2686
|
+
`;
|
|
2687
|
+
const PTableBodyCell = React__default.forwardRef(({ className, style, sx, item, index, column, defaultAlign, defaultEllipsis, onClick, onCheckChange }, ref) => {
|
|
3251
2688
|
/********************************************************************************************************************
|
|
3252
2689
|
* Use
|
|
3253
2690
|
* ******************************************************************************************************************/
|
|
3254
|
-
|
|
3255
|
-
var _b = useTableState(), menuOpen = _b.menuOpen, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
|
|
2691
|
+
const { menuOpen, setItemColumnChecked, setItemColumnCheckDisabled, setItemColumnCommands } = useTableState();
|
|
3256
2692
|
/********************************************************************************************************************
|
|
3257
2693
|
* State
|
|
3258
2694
|
* ******************************************************************************************************************/
|
|
3259
|
-
|
|
3260
|
-
|
|
2695
|
+
const [checked, setChecked] = useState(false);
|
|
2696
|
+
const [checkDisabled, setCheckDisabled] = useState(false);
|
|
3261
2697
|
/********************************************************************************************************************
|
|
3262
2698
|
* Effect
|
|
3263
2699
|
* ******************************************************************************************************************/
|
|
3264
|
-
useEffect(
|
|
2700
|
+
useEffect(() => {
|
|
3265
2701
|
if (column.type === 'check') {
|
|
3266
2702
|
setChecked(column.onInitChecked ? column.onInitChecked(item) : false);
|
|
3267
2703
|
setCheckDisabled(column.onCheckDisabled ? column.onCheckDisabled(item) : false);
|
|
3268
2704
|
}
|
|
3269
2705
|
setItemColumnCommands(item, column, {
|
|
3270
|
-
setChecked
|
|
2706
|
+
setChecked(checked) {
|
|
3271
2707
|
if (column.type === 'check') {
|
|
3272
2708
|
setChecked(checked);
|
|
3273
2709
|
}
|
|
3274
2710
|
},
|
|
3275
|
-
setCheckDisabled
|
|
2711
|
+
setCheckDisabled(disabled) {
|
|
3276
2712
|
if (column.type === 'check') {
|
|
3277
2713
|
setCheckDisabled(disabled);
|
|
3278
2714
|
}
|
|
3279
2715
|
},
|
|
3280
2716
|
});
|
|
3281
2717
|
}, [column, item, setItemColumnCommands]);
|
|
3282
|
-
useEffect(
|
|
2718
|
+
useEffect(() => {
|
|
3283
2719
|
if (column.type === 'check') {
|
|
3284
2720
|
setItemColumnChecked(item, column, checked);
|
|
3285
2721
|
}
|
|
3286
2722
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3287
2723
|
}, [checked]);
|
|
3288
|
-
useEffect(
|
|
2724
|
+
useEffect(() => {
|
|
3289
2725
|
if (column.type === 'check') {
|
|
3290
2726
|
setItemColumnCheckDisabled(item, column, checkDisabled);
|
|
3291
2727
|
column.onCheckDisabledChange && column.onCheckDisabledChange(item, checkDisabled);
|
|
@@ -3295,8 +2731,8 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3295
2731
|
/********************************************************************************************************************
|
|
3296
2732
|
* Memo
|
|
3297
2733
|
* ******************************************************************************************************************/
|
|
3298
|
-
|
|
3299
|
-
|
|
2734
|
+
const isHidden = useMemo(() => (column.onHide ? column.onHide(item, index) : false), [column, index, item]);
|
|
2735
|
+
const buttonsBoxJustifyContent = useMemo(() => {
|
|
3300
2736
|
switch (getTableColumnAlign(column, defaultAlign)) {
|
|
3301
2737
|
case 'center':
|
|
3302
2738
|
return 'center';
|
|
@@ -3306,9 +2742,9 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3306
2742
|
return 'start';
|
|
3307
2743
|
}
|
|
3308
2744
|
}, [column, defaultAlign]);
|
|
3309
|
-
|
|
2745
|
+
const data = useMemo(() => {
|
|
3310
2746
|
var _a, _b;
|
|
3311
|
-
|
|
2747
|
+
let data;
|
|
3312
2748
|
if (column.type !== 'check') {
|
|
3313
2749
|
if (column.onRender) {
|
|
3314
2750
|
data = column.onRender(item, index);
|
|
@@ -3352,29 +2788,29 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3352
2788
|
}
|
|
3353
2789
|
break;
|
|
3354
2790
|
case 'check':
|
|
3355
|
-
data = (React__default.createElement(Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined :
|
|
3356
|
-
React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange:
|
|
2791
|
+
data = (React__default.createElement(Box, { className: 'PTableBoxyCell-check-box', onClick: menuOpen ? undefined : (e) => e.stopPropagation() },
|
|
2792
|
+
React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: (e, newChecked) => {
|
|
3357
2793
|
setChecked(newChecked);
|
|
3358
2794
|
column.onCheckChange && column.onCheckChange(item, newChecked);
|
|
3359
2795
|
onCheckChange && onCheckChange(item, column, newChecked);
|
|
3360
2796
|
} })));
|
|
3361
2797
|
break;
|
|
3362
2798
|
case 'button':
|
|
3363
|
-
data = (React__default.createElement(Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined :
|
|
2799
|
+
data = (React__default.createElement(Box, { className: 'PTableBoxyCell-button-box', onClick: menuOpen ? undefined : (e) => e.stopPropagation() }, data));
|
|
3364
2800
|
break;
|
|
3365
2801
|
case 'buttons':
|
|
3366
|
-
data = (React__default.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined :
|
|
2802
|
+
data = (React__default.createElement(StyledButtonsBox, { className: 'PTableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : (e) => e.stopPropagation() }, data));
|
|
3367
2803
|
break;
|
|
3368
2804
|
case 'img':
|
|
3369
2805
|
{
|
|
3370
|
-
|
|
3371
|
-
|
|
2806
|
+
const img = React__default.createElement("img", { src: data, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' });
|
|
2807
|
+
const placement = ((_a = column.tooltipProps) === null || _a === void 0 ? void 0 : _a.placement) ? (_b = column.tooltipProps) === null || _b === void 0 ? void 0 : _b.placement : 'left';
|
|
3372
2808
|
data = (React__default.createElement("a", { href: data, target: '_blank', onClick: menuOpen
|
|
3373
2809
|
? undefined
|
|
3374
|
-
:
|
|
2810
|
+
: (e) => {
|
|
3375
2811
|
e.stopPropagation();
|
|
3376
2812
|
} },
|
|
3377
|
-
React__default.createElement(Tooltip,
|
|
2813
|
+
React__default.createElement(Tooltip, Object.assign({ className: 'PTableBodyCell-tooltip', title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
|
|
3378
2814
|
}
|
|
3379
2815
|
break;
|
|
3380
2816
|
case 'date':
|
|
@@ -3384,7 +2820,7 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3384
2820
|
break;
|
|
3385
2821
|
case 'datetime':
|
|
3386
2822
|
if (data) {
|
|
3387
|
-
|
|
2823
|
+
const dt = dayjs(data, column.dateFormat);
|
|
3388
2824
|
data = (React__default.createElement(React__default.Fragment, null,
|
|
3389
2825
|
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
3390
2826
|
column.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
@@ -3393,7 +2829,7 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3393
2829
|
break;
|
|
3394
2830
|
case 'date-hour':
|
|
3395
2831
|
if (data) {
|
|
3396
|
-
|
|
2832
|
+
const dt = dayjs(data, column.dateFormat);
|
|
3397
2833
|
data = (React__default.createElement(React__default.Fragment, null,
|
|
3398
2834
|
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
3399
2835
|
column.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
@@ -3402,7 +2838,7 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3402
2838
|
break;
|
|
3403
2839
|
case 'date-minute':
|
|
3404
2840
|
if (data) {
|
|
3405
|
-
|
|
2841
|
+
const dt = dayjs(data, column.dateFormat);
|
|
3406
2842
|
data = (React__default.createElement(React__default.Fragment, null,
|
|
3407
2843
|
React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
|
|
3408
2844
|
column.dateTwoLine ? React__default.createElement("br", null) : ' ',
|
|
@@ -3411,12 +2847,12 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3411
2847
|
break;
|
|
3412
2848
|
}
|
|
3413
2849
|
if (column.type !== 'img') {
|
|
3414
|
-
|
|
2850
|
+
let tooltip;
|
|
3415
2851
|
if (column.onGetTooltip) {
|
|
3416
2852
|
tooltip = column.onGetTooltip(item, index);
|
|
3417
2853
|
}
|
|
3418
2854
|
if (tooltip) {
|
|
3419
|
-
data = (React__default.createElement(Tooltip,
|
|
2855
|
+
data = (React__default.createElement(Tooltip, Object.assign({ className: 'PTableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? (data.type === React__default.Fragment ? (React__default.createElement("span", null, data)) : (data)) : (React__default.createElement("span", null, data))));
|
|
3420
2856
|
}
|
|
3421
2857
|
}
|
|
3422
2858
|
return data;
|
|
@@ -3424,7 +2860,7 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3424
2860
|
/********************************************************************************************************************
|
|
3425
2861
|
* Event Handler
|
|
3426
2862
|
* ******************************************************************************************************************/
|
|
3427
|
-
|
|
2863
|
+
const handleClick = useCallback((item, index) => {
|
|
3428
2864
|
if (column.onClick) {
|
|
3429
2865
|
column.onClick(item, index);
|
|
3430
2866
|
}
|
|
@@ -3437,52 +2873,47 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
|
|
|
3437
2873
|
* Render
|
|
3438
2874
|
* ******************************************************************************************************************/
|
|
3439
2875
|
return (React__default.createElement(PTableCommonCell, { ref: ref, type: 'body', className: classNames('PTableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
|
|
3440
|
-
});
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
},
|
|
3450
|
-
});
|
|
3451
|
-
});
|
|
3452
|
-
var PTableBodyRow = function (_a) {
|
|
2876
|
+
});const PStyledBodyRow = styled(TableRow)(({ theme }) => ({
|
|
2877
|
+
'&.odd-color:nth-of-type(odd):not(:hover)': {
|
|
2878
|
+
backgroundColor: lighten(theme.palette.action.hover, 0.4),
|
|
2879
|
+
},
|
|
2880
|
+
'&.even-color:nth-of-type(even):not(:hover)': {
|
|
2881
|
+
backgroundColor: lighten(theme.palette.action.hover, 0.4),
|
|
2882
|
+
},
|
|
2883
|
+
}));
|
|
2884
|
+
const PTableBodyRow = (_a) => {
|
|
3453
2885
|
/********************************************************************************************************************
|
|
3454
2886
|
* Use
|
|
3455
2887
|
* ******************************************************************************************************************/
|
|
3456
|
-
var
|
|
3457
|
-
|
|
2888
|
+
var { className, style, id, index, defaultAlign, defaultEllipsis, sortable, columns, item, onClick, onCheckChange, onGetColumnClassName, onGetColumnStyle, onGetColumnSx } = _a, props = __rest(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
|
|
2889
|
+
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
|
|
3458
2890
|
/********************************************************************************************************************
|
|
3459
2891
|
* Variable
|
|
3460
2892
|
* ******************************************************************************************************************/
|
|
3461
|
-
|
|
3462
|
-
?
|
|
2893
|
+
const sortableProps = sortable
|
|
2894
|
+
? Object.assign(Object.assign({ ref: setNodeRef }, attributes), listeners) : {};
|
|
3463
2895
|
/********************************************************************************************************************
|
|
3464
2896
|
* Render
|
|
3465
2897
|
* ******************************************************************************************************************/
|
|
3466
2898
|
return (React__default.createElement(React__default.Fragment, null,
|
|
3467
|
-
React__default.createElement(PStyledBodyRow,
|
|
3468
|
-
?
|
|
3469
|
-
};
|
|
3470
|
-
|
|
3471
|
-
var progressiveVisible = useTableState().progressiveVisible;
|
|
2899
|
+
React__default.createElement(PStyledBodyRow, Object.assign({ className: classNames('PTableBodyRow', className), style: sortable
|
|
2900
|
+
? Object.assign(Object.assign({}, style), { transform: CSS.Transform.toString(transform), transition }) : style }, props, sortableProps), columns.map((column, columnIdx) => (React__default.createElement(PTableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange }))))));
|
|
2901
|
+
};const PTableSortableBodyBlock = ({ items, baseIndex, columns, showOddColor, showEvenColor, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyRowClassName, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, defaultAlign, defaultEllipsis, sortable, onClick, onCheckChange, }) => {
|
|
2902
|
+
const { progressiveVisible } = useTableState();
|
|
3472
2903
|
/********************************************************************************************************************
|
|
3473
2904
|
* Use
|
|
3474
2905
|
* ******************************************************************************************************************/
|
|
3475
|
-
|
|
2906
|
+
const { ref, inView } = useInView({ threshold: 0, triggerOnce: true });
|
|
3476
2907
|
/********************************************************************************************************************
|
|
3477
2908
|
* State
|
|
3478
2909
|
* ******************************************************************************************************************/
|
|
3479
|
-
|
|
2910
|
+
const [canInView, setCanInView] = useState(baseIndex === 0);
|
|
3480
2911
|
/********************************************************************************************************************
|
|
3481
2912
|
* Effect
|
|
3482
2913
|
* ******************************************************************************************************************/
|
|
3483
|
-
useEffect(
|
|
2914
|
+
useEffect(() => {
|
|
3484
2915
|
if (progressiveVisible && baseIndex > 0) {
|
|
3485
|
-
setTimeout(
|
|
2916
|
+
setTimeout(() => {
|
|
3486
2917
|
setCanInView(true);
|
|
3487
2918
|
}, baseIndex * ifUndefined(progressiveVisible.delay, 300));
|
|
3488
2919
|
}
|
|
@@ -3491,10 +2922,8 @@ var PTableBodyRow = function (_a) {
|
|
|
3491
2922
|
/********************************************************************************************************************
|
|
3492
2923
|
* Memo
|
|
3493
2924
|
* ******************************************************************************************************************/
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
React__default.createElement(TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } })));
|
|
3497
|
-
}, [
|
|
2925
|
+
const renderItems = useMemo(() => !progressiveVisible || inView ? (items.map((item, idx) => (React__default.createElement(PTableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })))) : (React__default.createElement(TableRow, { ref: canInView ? ref : undefined },
|
|
2926
|
+
React__default.createElement(TableCell, { colSpan: columns.length, style: { height: progressiveVisible.rowHeight * items.length, border: 'none' } }))), [
|
|
3498
2927
|
baseIndex,
|
|
3499
2928
|
canInView,
|
|
3500
2929
|
columns,
|
|
@@ -3520,24 +2949,23 @@ var PTableBodyRow = function (_a) {
|
|
|
3520
2949
|
* Render
|
|
3521
2950
|
* ******************************************************************************************************************/
|
|
3522
2951
|
return React__default.createElement(React__default.Fragment, null, renderItems);
|
|
3523
|
-
};
|
|
3524
|
-
|
|
3525
|
-
for (
|
|
2952
|
+
};const chunkArray = (array, size) => {
|
|
2953
|
+
const result = [];
|
|
2954
|
+
for (let i = 0; i < array.length; i += size) {
|
|
3526
2955
|
result.push(array.slice(i, i + size));
|
|
3527
2956
|
}
|
|
3528
2957
|
return result;
|
|
3529
|
-
};
|
|
2958
|
+
};const PTableSortableBody = ({ items, columns, showOddColor, showEvenColor, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyRowClassName, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, defaultAlign, defaultEllipsis, sortable, onClick, onCheckChange, }) => {
|
|
3530
2959
|
/********************************************************************************************************************
|
|
3531
2960
|
* Use
|
|
3532
2961
|
* ******************************************************************************************************************/
|
|
3533
|
-
|
|
3534
|
-
var progressiveVisible = useTableState().progressiveVisible;
|
|
2962
|
+
const { progressiveVisible } = useTableState();
|
|
3535
2963
|
/********************************************************************************************************************
|
|
3536
2964
|
* Memo
|
|
3537
2965
|
* ******************************************************************************************************************/
|
|
3538
|
-
|
|
2966
|
+
const renderBlock = useMemo(() => {
|
|
3539
2967
|
if (progressiveVisible) {
|
|
3540
|
-
return (React__default.createElement(React__default.Fragment, null, chunkArray(items, ifUndefined(progressiveVisible.blockSize, 20)).map(
|
|
2968
|
+
return (React__default.createElement(React__default.Fragment, null, chunkArray(items, ifUndefined(progressiveVisible.blockSize, 20)).map((bItems, index) => (React__default.createElement(PTableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange })))));
|
|
3541
2969
|
}
|
|
3542
2970
|
else {
|
|
3543
2971
|
return (React__default.createElement(PTableSortableBodyBlock, { items: items, baseIndex: 0, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange }));
|
|
@@ -3567,22 +2995,21 @@ var PTableBodyRow = function (_a) {
|
|
|
3567
2995
|
};function columnFilter(v) {
|
|
3568
2996
|
return v !== undefined && v !== null && v !== false;
|
|
3569
2997
|
}
|
|
3570
|
-
|
|
3571
|
-
|
|
2998
|
+
let _columnId = 0;
|
|
2999
|
+
const PTable = React__default.forwardRef(({ className, style: initStyle, sx, caption, topHeadRows, columns: initColumns, items: initItems, paging: initPaging, pagingAlign = 'center', defaultAlign = 'left', defaultEllipsis, stickyHeader: initStickyHeader, height, minHeight, maxHeight, fullHeight, showOddColor, showEvenColor, cellPadding = 13, footer, noData, pagination, sortable, progressiveVisible, onClick, onGetBodyRowClassName, onGetBodyRowStyle, onGetBodyRowSx, onGetBodyColumnClassName, onGetBodyColumnStyle, onGetBodyColumnSx, onPageChange, onSortChange, onCheckChange, }, ref) => {
|
|
3572
3000
|
/********************************************************************************************************************
|
|
3573
3001
|
* Ref
|
|
3574
3002
|
* ******************************************************************************************************************/
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
var finalColumnsIdRef = useRef([]);
|
|
3003
|
+
const localHeaderDataRef = useRef({});
|
|
3004
|
+
const localBodyDataRef = useRef({});
|
|
3005
|
+
const updateHeadCheckTimer = useRef(undefined);
|
|
3006
|
+
const fireOnCheckChangeTimer = useRef({});
|
|
3007
|
+
const simpleBarRef = useRef(null);
|
|
3008
|
+
const finalColumnsIdRef = useRef([]);
|
|
3582
3009
|
/********************************************************************************************************************
|
|
3583
3010
|
* sortable
|
|
3584
3011
|
* ******************************************************************************************************************/
|
|
3585
|
-
|
|
3012
|
+
const sensors = useSensors(useSensor(MouseSensor, {
|
|
3586
3013
|
// Require the mouse to move by 10 pixels before activating
|
|
3587
3014
|
activationConstraint: {
|
|
3588
3015
|
distance: 10,
|
|
@@ -3599,21 +3026,21 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3599
3026
|
/********************************************************************************************************************
|
|
3600
3027
|
* State
|
|
3601
3028
|
* ******************************************************************************************************************/
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3029
|
+
const [menuOpen, setMenuOpen] = useState(false);
|
|
3030
|
+
const [openMenuId, setOpenMenuId] = useState(undefined);
|
|
3031
|
+
const [columns, setColumns] = useAutoUpdateState(initColumns);
|
|
3032
|
+
const [finalColumns, setFinalColumns] = useState();
|
|
3033
|
+
const [items, setItems] = useAutoUpdateState(initItems);
|
|
3034
|
+
const [sortableItems, setSortableItems] = useState();
|
|
3035
|
+
const [paging, setPaging] = useAutoUpdateState(initPaging);
|
|
3609
3036
|
/********************************************************************************************************************
|
|
3610
3037
|
* containerHeight
|
|
3611
3038
|
* ******************************************************************************************************************/
|
|
3612
|
-
|
|
3613
|
-
|
|
3039
|
+
const [containerHeight, setContainerHeight] = useState();
|
|
3040
|
+
const { ref: containerHeightDetector } = useResizeDetector({
|
|
3614
3041
|
handleHeight: true,
|
|
3615
3042
|
handleWidth: false,
|
|
3616
|
-
onResize
|
|
3043
|
+
onResize() {
|
|
3617
3044
|
if (containerHeightDetector.current) {
|
|
3618
3045
|
setContainerHeight(containerHeightDetector.current.getBoundingClientRect().height);
|
|
3619
3046
|
}
|
|
@@ -3621,15 +3048,15 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3621
3048
|
setContainerHeight(undefined);
|
|
3622
3049
|
}
|
|
3623
3050
|
},
|
|
3624
|
-
})
|
|
3051
|
+
});
|
|
3625
3052
|
/********************************************************************************************************************
|
|
3626
3053
|
* footerHeight
|
|
3627
3054
|
* ******************************************************************************************************************/
|
|
3628
|
-
|
|
3629
|
-
|
|
3055
|
+
const [pagingHeight, setPagingHeight] = useState();
|
|
3056
|
+
const { ref: pagingHeightResizeDetector } = useResizeDetector({
|
|
3630
3057
|
handleHeight: true,
|
|
3631
3058
|
handleWidth: false,
|
|
3632
|
-
onResize
|
|
3059
|
+
onResize() {
|
|
3633
3060
|
if (pagingHeightResizeDetector.current) {
|
|
3634
3061
|
setPagingHeight(pagingHeightResizeDetector.current.getBoundingClientRect().height);
|
|
3635
3062
|
}
|
|
@@ -3637,41 +3064,41 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3637
3064
|
setPagingHeight(undefined);
|
|
3638
3065
|
}
|
|
3639
3066
|
},
|
|
3640
|
-
})
|
|
3067
|
+
});
|
|
3641
3068
|
/********************************************************************************************************************
|
|
3642
3069
|
* Function
|
|
3643
3070
|
* ******************************************************************************************************************/
|
|
3644
|
-
|
|
3071
|
+
const getFinalColumnId = useCallback((column) => {
|
|
3645
3072
|
if (finalColumns && finalColumnsIdRef.current) {
|
|
3646
|
-
|
|
3073
|
+
const idx = finalColumns.indexOf(column);
|
|
3647
3074
|
return finalColumnsIdRef.current[idx];
|
|
3648
3075
|
}
|
|
3649
3076
|
else {
|
|
3650
3077
|
return '';
|
|
3651
3078
|
}
|
|
3652
3079
|
}, [finalColumns]);
|
|
3653
|
-
|
|
3080
|
+
const updateHeadCheck = useCallback((column) => {
|
|
3654
3081
|
if (updateHeadCheckTimer.current) {
|
|
3655
3082
|
clearTimeout(updateHeadCheckTimer.current);
|
|
3656
3083
|
updateHeadCheckTimer.current = undefined;
|
|
3657
3084
|
}
|
|
3658
|
-
|
|
3659
|
-
|
|
3085
|
+
const columnId = getFinalColumnId(column);
|
|
3086
|
+
const headColumnData = localHeaderDataRef.current[columnId];
|
|
3660
3087
|
if (headColumnData) {
|
|
3661
|
-
updateHeadCheckTimer.current = setTimeout(
|
|
3088
|
+
updateHeadCheckTimer.current = setTimeout(() => {
|
|
3662
3089
|
var _a, _b;
|
|
3663
3090
|
updateHeadCheckTimer.current = undefined;
|
|
3664
|
-
|
|
3665
|
-
|
|
3091
|
+
const enabledCheckExists = !!Object.keys(localBodyDataRef.current).find((key) => {
|
|
3092
|
+
const columnData = localBodyDataRef.current[key].columns[columnId];
|
|
3666
3093
|
if (columnData) {
|
|
3667
3094
|
if (!columnData.checkDisabled) {
|
|
3668
3095
|
return true;
|
|
3669
3096
|
}
|
|
3670
3097
|
}
|
|
3671
3098
|
});
|
|
3672
|
-
|
|
3673
|
-
!Object.keys(localBodyDataRef.current).find(
|
|
3674
|
-
|
|
3099
|
+
const allChecked = enabledCheckExists &&
|
|
3100
|
+
!Object.keys(localBodyDataRef.current).find((key) => {
|
|
3101
|
+
const columnData = localBodyDataRef.current[key].columns[columnId];
|
|
3675
3102
|
if (columnData) {
|
|
3676
3103
|
if (!columnData.checkDisabled) {
|
|
3677
3104
|
return !columnData.checked;
|
|
@@ -3683,24 +3110,24 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3683
3110
|
}, 100);
|
|
3684
3111
|
}
|
|
3685
3112
|
}, [getFinalColumnId]);
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
Object.keys(localBodyDataRef.current).find(
|
|
3689
|
-
|
|
3113
|
+
const getChecked = useCallback((itemKey, itemValue, columnId) => {
|
|
3114
|
+
let checked = false;
|
|
3115
|
+
Object.keys(localBodyDataRef.current).find((key) => {
|
|
3116
|
+
const itemData = localBodyDataRef.current[key];
|
|
3690
3117
|
if (itemData.item[itemKey] === itemValue) {
|
|
3691
|
-
|
|
3118
|
+
const columnData = itemData.columns[columnId];
|
|
3692
3119
|
checked = !!(columnData === null || columnData === void 0 ? void 0 : columnData.checked);
|
|
3693
3120
|
return true;
|
|
3694
3121
|
}
|
|
3695
3122
|
});
|
|
3696
3123
|
return checked;
|
|
3697
3124
|
}, []);
|
|
3698
|
-
|
|
3699
|
-
Object.keys(localBodyDataRef.current).find(
|
|
3125
|
+
const setChecked = useCallback((itemKey, itemValue, columnId, checked) => {
|
|
3126
|
+
Object.keys(localBodyDataRef.current).find((key) => {
|
|
3700
3127
|
var _a;
|
|
3701
|
-
|
|
3128
|
+
const itemData = localBodyDataRef.current[key];
|
|
3702
3129
|
if (itemData.item[itemKey] === itemValue) {
|
|
3703
|
-
|
|
3130
|
+
const columnData = itemData.columns[columnId];
|
|
3704
3131
|
if (columnData) {
|
|
3705
3132
|
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
3706
3133
|
updateHeadCheck(columnData.column);
|
|
@@ -3709,12 +3136,12 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3709
3136
|
}
|
|
3710
3137
|
});
|
|
3711
3138
|
}, [updateHeadCheck]);
|
|
3712
|
-
|
|
3713
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3139
|
+
const toggleChecked = useCallback((itemKey, itemValue, columnId) => {
|
|
3140
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3714
3141
|
var _a;
|
|
3715
|
-
|
|
3142
|
+
const itemData = localBodyDataRef.current[key];
|
|
3716
3143
|
if (itemData.item[itemKey] === itemValue) {
|
|
3717
|
-
|
|
3144
|
+
const columnData = itemData.columns[columnId];
|
|
3718
3145
|
if (columnData) {
|
|
3719
3146
|
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(!columnData.checked);
|
|
3720
3147
|
updateHeadCheck(columnData.column);
|
|
@@ -3723,23 +3150,23 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3723
3150
|
}
|
|
3724
3151
|
});
|
|
3725
3152
|
}, [updateHeadCheck]);
|
|
3726
|
-
|
|
3153
|
+
const setCheckedAll = useCallback((columnId, checked) => {
|
|
3727
3154
|
var _a, _b;
|
|
3728
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3155
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3729
3156
|
var _a;
|
|
3730
|
-
|
|
3731
|
-
|
|
3157
|
+
const itemData = localBodyDataRef.current[key];
|
|
3158
|
+
const columnData = itemData.columns[columnId];
|
|
3732
3159
|
if (columnData) {
|
|
3733
3160
|
(_a = columnData.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
3734
3161
|
}
|
|
3735
3162
|
});
|
|
3736
3163
|
(_b = (_a = localHeaderDataRef.current[columnId]) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.setChecked(checked);
|
|
3737
3164
|
}, []);
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3741
|
-
|
|
3742
|
-
|
|
3165
|
+
const getCheckedItems = useCallback((columnId) => {
|
|
3166
|
+
const checkedItems = [];
|
|
3167
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3168
|
+
const itemData = localBodyDataRef.current[key];
|
|
3169
|
+
const columnData = itemData.columns[columnId];
|
|
3743
3170
|
if (columnData) {
|
|
3744
3171
|
if (columnData.checked) {
|
|
3745
3172
|
checkedItems.push(itemData.item);
|
|
@@ -3748,57 +3175,57 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3748
3175
|
});
|
|
3749
3176
|
return checkedItems;
|
|
3750
3177
|
}, []);
|
|
3751
|
-
|
|
3178
|
+
const stopHeadCheckTimer = useCallback(() => {
|
|
3752
3179
|
if (updateHeadCheckTimer.current) {
|
|
3753
3180
|
clearTimeout(updateHeadCheckTimer.current);
|
|
3754
3181
|
updateHeadCheckTimer.current = undefined;
|
|
3755
3182
|
}
|
|
3756
3183
|
}, []);
|
|
3757
|
-
|
|
3758
|
-
Object.keys(fireOnCheckChangeTimer.current).forEach(
|
|
3184
|
+
const clearFireOnCheckChangeTimer = useCallback(() => {
|
|
3185
|
+
Object.keys(fireOnCheckChangeTimer.current).forEach((key) => {
|
|
3759
3186
|
if (fireOnCheckChangeTimer.current[key]) {
|
|
3760
3187
|
clearTimeout(fireOnCheckChangeTimer.current[key]);
|
|
3761
3188
|
}
|
|
3762
3189
|
});
|
|
3763
3190
|
fireOnCheckChangeTimer.current = {};
|
|
3764
3191
|
}, []);
|
|
3765
|
-
|
|
3192
|
+
const fireOnCheckChange = useCallback((columnId) => {
|
|
3766
3193
|
if (fireOnCheckChangeTimer.current[columnId]) {
|
|
3767
3194
|
clearTimeout(fireOnCheckChangeTimer.current[columnId]);
|
|
3768
3195
|
fireOnCheckChangeTimer.current[columnId] = undefined;
|
|
3769
3196
|
}
|
|
3770
3197
|
if (onCheckChange) {
|
|
3771
|
-
fireOnCheckChangeTimer.current[columnId] = setTimeout(
|
|
3198
|
+
fireOnCheckChangeTimer.current[columnId] = setTimeout(() => {
|
|
3772
3199
|
fireOnCheckChangeTimer.current[columnId] = undefined;
|
|
3773
3200
|
onCheckChange && onCheckChange(columnId, getCheckedItems(columnId));
|
|
3774
3201
|
}, 100);
|
|
3775
3202
|
}
|
|
3776
3203
|
}, [getCheckedItems, onCheckChange]);
|
|
3777
|
-
|
|
3204
|
+
const simpleBarScrollToTop = useCallback(() => {
|
|
3778
3205
|
var _a, _b;
|
|
3779
3206
|
(_b = (_a = simpleBarRef.current) === null || _a === void 0 ? void 0 : _a.getScrollElement()) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
|
|
3780
3207
|
}, []);
|
|
3781
3208
|
/********************************************************************************************************************
|
|
3782
3209
|
* Effect
|
|
3783
3210
|
* ******************************************************************************************************************/
|
|
3784
|
-
useEffect(
|
|
3785
|
-
return
|
|
3211
|
+
useEffect(() => {
|
|
3212
|
+
return () => {
|
|
3786
3213
|
stopHeadCheckTimer();
|
|
3787
3214
|
clearFireOnCheckChangeTimer();
|
|
3788
3215
|
};
|
|
3789
3216
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3790
3217
|
}, []);
|
|
3791
|
-
useEffect(
|
|
3218
|
+
useEffect(() => {
|
|
3792
3219
|
stopHeadCheckTimer();
|
|
3793
3220
|
clearFireOnCheckChangeTimer();
|
|
3794
|
-
Object.keys(localHeaderDataRef.current).forEach(
|
|
3221
|
+
Object.keys(localHeaderDataRef.current).forEach((key) => {
|
|
3795
3222
|
var _a;
|
|
3796
3223
|
if (localHeaderDataRef.current[key].column.type === 'check') {
|
|
3797
3224
|
(_a = localHeaderDataRef.current[key].commands) === null || _a === void 0 ? void 0 : _a.setChecked(false);
|
|
3798
3225
|
}
|
|
3799
3226
|
});
|
|
3800
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3801
|
-
Object.keys(localBodyDataRef.current[key].columns).forEach(
|
|
3227
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3228
|
+
Object.keys(localBodyDataRef.current[key].columns).forEach((cKey) => {
|
|
3802
3229
|
var _a;
|
|
3803
3230
|
(_a = localBodyDataRef.current[key].columns[cKey].commands) === null || _a === void 0 ? void 0 : _a.setChecked(false);
|
|
3804
3231
|
});
|
|
@@ -3806,34 +3233,34 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3806
3233
|
setSortableItems(makeSortableItems(items));
|
|
3807
3234
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3808
3235
|
}, [items]);
|
|
3809
|
-
useEffect(
|
|
3236
|
+
useEffect(() => {
|
|
3810
3237
|
stopHeadCheckTimer();
|
|
3811
3238
|
clearFireOnCheckChangeTimer();
|
|
3812
|
-
|
|
3239
|
+
const newFinalColumns = columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter);
|
|
3813
3240
|
setFinalColumns(newFinalColumns);
|
|
3814
|
-
finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map(
|
|
3241
|
+
finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map((col) => {
|
|
3815
3242
|
if (col.id) {
|
|
3816
3243
|
return col.id;
|
|
3817
3244
|
}
|
|
3818
3245
|
else {
|
|
3819
3246
|
_columnId += 1;
|
|
3820
|
-
return
|
|
3247
|
+
return `$c$${_columnId}$`;
|
|
3821
3248
|
}
|
|
3822
3249
|
});
|
|
3823
3250
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3824
3251
|
}, [columns]);
|
|
3825
|
-
useLayoutEffect(
|
|
3252
|
+
useLayoutEffect(() => {
|
|
3826
3253
|
clearFireOnCheckChangeTimer();
|
|
3827
3254
|
if (sortableItems) {
|
|
3828
|
-
localBodyDataRef.current = sortableItems.reduce(
|
|
3255
|
+
localBodyDataRef.current = sortableItems.reduce((res, item) => {
|
|
3829
3256
|
res[item.id] = {
|
|
3830
|
-
item
|
|
3257
|
+
item,
|
|
3831
3258
|
columns: {},
|
|
3832
3259
|
};
|
|
3833
3260
|
if (finalColumns) {
|
|
3834
|
-
finalColumns.forEach(
|
|
3261
|
+
finalColumns.forEach((c) => {
|
|
3835
3262
|
var _a;
|
|
3836
|
-
|
|
3263
|
+
const columnId = getFinalColumnId(c);
|
|
3837
3264
|
if ((_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId]) {
|
|
3838
3265
|
res[item.id].columns[columnId] = localBodyDataRef.current[item.id].columns[columnId];
|
|
3839
3266
|
}
|
|
@@ -3853,9 +3280,9 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3853
3280
|
localBodyDataRef.current = {};
|
|
3854
3281
|
}
|
|
3855
3282
|
}, [sortableItems, finalColumns, clearFireOnCheckChangeTimer, getFinalColumnId]);
|
|
3856
|
-
useLayoutEffect(
|
|
3283
|
+
useLayoutEffect(() => {
|
|
3857
3284
|
if (finalColumns) {
|
|
3858
|
-
localHeaderDataRef.current = finalColumns.reduce(
|
|
3285
|
+
localHeaderDataRef.current = finalColumns.reduce((res, c) => {
|
|
3859
3286
|
res[getFinalColumnId(c)] = { column: c, checked: false };
|
|
3860
3287
|
return res;
|
|
3861
3288
|
}, {});
|
|
@@ -3867,36 +3294,36 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3867
3294
|
/********************************************************************************************************************
|
|
3868
3295
|
* Commands
|
|
3869
3296
|
* ******************************************************************************************************************/
|
|
3870
|
-
useForwardLayoutRef(ref, useMemo(
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3297
|
+
useForwardLayoutRef(ref, useMemo(() => {
|
|
3298
|
+
let lastColumns = columns;
|
|
3299
|
+
let lastItems = items;
|
|
3300
|
+
let lastPaging = paging;
|
|
3874
3301
|
return {
|
|
3875
|
-
getColumns:
|
|
3876
|
-
setColumns:
|
|
3302
|
+
getColumns: () => lastColumns,
|
|
3303
|
+
setColumns: (columns) => {
|
|
3877
3304
|
lastColumns = columns;
|
|
3878
3305
|
setColumns(lastColumns);
|
|
3879
3306
|
},
|
|
3880
|
-
getItems:
|
|
3881
|
-
setItems:
|
|
3307
|
+
getItems: () => lastItems,
|
|
3308
|
+
setItems: (items) => {
|
|
3882
3309
|
lastItems = items;
|
|
3883
3310
|
setItems(items);
|
|
3884
3311
|
},
|
|
3885
|
-
getPaging:
|
|
3886
|
-
setItemsPaging:
|
|
3312
|
+
getPaging: () => lastPaging,
|
|
3313
|
+
setItemsPaging: (items, paging) => {
|
|
3887
3314
|
lastItems = items;
|
|
3888
3315
|
lastPaging = paging;
|
|
3889
3316
|
setItems(lastItems);
|
|
3890
3317
|
setPaging(lastPaging);
|
|
3891
3318
|
},
|
|
3892
|
-
resetSort
|
|
3319
|
+
resetSort() {
|
|
3893
3320
|
setSortableItems(makeSortableItems(lastItems));
|
|
3894
3321
|
},
|
|
3895
|
-
getCheckedItems
|
|
3896
|
-
getChecked
|
|
3897
|
-
setChecked
|
|
3898
|
-
toggleChecked
|
|
3899
|
-
setCheckedAll
|
|
3322
|
+
getCheckedItems,
|
|
3323
|
+
getChecked,
|
|
3324
|
+
setChecked,
|
|
3325
|
+
toggleChecked,
|
|
3326
|
+
setCheckedAll,
|
|
3900
3327
|
scrollToTop: simpleBarScrollToTop,
|
|
3901
3328
|
};
|
|
3902
3329
|
}, [
|
|
@@ -3916,24 +3343,24 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3916
3343
|
/********************************************************************************************************************
|
|
3917
3344
|
* Event Handler
|
|
3918
3345
|
* ******************************************************************************************************************/
|
|
3919
|
-
|
|
3920
|
-
|
|
3346
|
+
const handleDragEnd = useCallback((event) => {
|
|
3347
|
+
const { active, over } = event;
|
|
3921
3348
|
if (active && over) {
|
|
3922
|
-
setSortableItems(
|
|
3349
|
+
setSortableItems((items) => {
|
|
3923
3350
|
if (items) {
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
items.find(
|
|
3351
|
+
let oldIndex = null;
|
|
3352
|
+
let newIndex = null;
|
|
3353
|
+
items.find((item, idx) => {
|
|
3927
3354
|
if (item.id === active.id) {
|
|
3928
|
-
|
|
3355
|
+
oldIndex = idx;
|
|
3929
3356
|
}
|
|
3930
3357
|
else if (item.id === over.id) {
|
|
3931
|
-
|
|
3358
|
+
newIndex = idx;
|
|
3932
3359
|
}
|
|
3933
|
-
return
|
|
3360
|
+
return oldIndex != null && newIndex != null;
|
|
3934
3361
|
});
|
|
3935
|
-
if (
|
|
3936
|
-
|
|
3362
|
+
if (oldIndex != null && newIndex != null) {
|
|
3363
|
+
const finalItems = arrayMove(items, oldIndex, newIndex);
|
|
3937
3364
|
onSortChange && onSortChange(finalItems);
|
|
3938
3365
|
return finalItems;
|
|
3939
3366
|
}
|
|
@@ -3947,10 +3374,10 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3947
3374
|
});
|
|
3948
3375
|
}
|
|
3949
3376
|
}, [onSortChange]);
|
|
3950
|
-
|
|
3951
|
-
Object.keys(localBodyDataRef.current).forEach(
|
|
3377
|
+
const handleHeadCheckChange = useCallback((column, checked) => {
|
|
3378
|
+
Object.keys(localBodyDataRef.current).forEach((key) => {
|
|
3952
3379
|
var _a;
|
|
3953
|
-
|
|
3380
|
+
const data = localBodyDataRef.current[key].columns[getFinalColumnId(column)];
|
|
3954
3381
|
if (data) {
|
|
3955
3382
|
if (!data.checkDisabled) {
|
|
3956
3383
|
(_a = data.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
|
|
@@ -3958,17 +3385,17 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3958
3385
|
}
|
|
3959
3386
|
});
|
|
3960
3387
|
}, [getFinalColumnId]);
|
|
3961
|
-
|
|
3388
|
+
const handleBodyCheckChange = useCallback((item, column) => {
|
|
3962
3389
|
updateHeadCheck(column);
|
|
3963
3390
|
}, [updateHeadCheck]);
|
|
3964
|
-
|
|
3391
|
+
const handlePageChange = useCallback((page) => {
|
|
3965
3392
|
simpleBarScrollToTop();
|
|
3966
3393
|
onPageChange && onPageChange(page);
|
|
3967
3394
|
}, [onPageChange, simpleBarScrollToTop]);
|
|
3968
3395
|
/********************************************************************************************************************
|
|
3969
3396
|
* TableContext Function
|
|
3970
3397
|
* ******************************************************************************************************************/
|
|
3971
|
-
|
|
3398
|
+
const TableContextSetMenuOpen = useCallback((newMenuOpen, newOpenMenuId) => {
|
|
3972
3399
|
if (newMenuOpen) {
|
|
3973
3400
|
setMenuOpen(newMenuOpen);
|
|
3974
3401
|
setOpenMenuId(newOpenMenuId);
|
|
@@ -3980,38 +3407,38 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
3980
3407
|
}
|
|
3981
3408
|
}
|
|
3982
3409
|
}, [openMenuId]);
|
|
3983
|
-
|
|
3410
|
+
const TableContextSetItemColumnChecked = useCallback((item, column, checked) => {
|
|
3984
3411
|
var _a;
|
|
3985
|
-
|
|
3986
|
-
|
|
3412
|
+
const columnId = getFinalColumnId(column);
|
|
3413
|
+
const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId];
|
|
3987
3414
|
if (data) {
|
|
3988
3415
|
data.checked = checked;
|
|
3989
3416
|
fireOnCheckChange(columnId);
|
|
3990
3417
|
}
|
|
3991
3418
|
}, [fireOnCheckChange, getFinalColumnId]);
|
|
3992
|
-
|
|
3419
|
+
const TableContextSetItemColumnCheckDisabled = useCallback((item, column, disabled) => {
|
|
3993
3420
|
var _a;
|
|
3994
|
-
|
|
3421
|
+
const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
|
|
3995
3422
|
if (data) {
|
|
3996
3423
|
data.checkDisabled = disabled;
|
|
3997
3424
|
updateHeadCheck(column);
|
|
3998
3425
|
}
|
|
3999
3426
|
}, [getFinalColumnId, updateHeadCheck]);
|
|
4000
|
-
|
|
3427
|
+
const TableContextSetItemColumnCommands = useCallback((item, column, commands) => {
|
|
4001
3428
|
var _a;
|
|
4002
|
-
|
|
3429
|
+
const data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
|
|
4003
3430
|
if (data) {
|
|
4004
3431
|
data.commands = commands;
|
|
4005
3432
|
}
|
|
4006
3433
|
}, [getFinalColumnId]);
|
|
4007
|
-
|
|
4008
|
-
|
|
3434
|
+
const TableContextSetHeadColumnChecked = useCallback((column, checked) => {
|
|
3435
|
+
const data = localHeaderDataRef.current[getFinalColumnId(column)];
|
|
4009
3436
|
if (data) {
|
|
4010
3437
|
data.checked = checked;
|
|
4011
3438
|
}
|
|
4012
3439
|
}, [getFinalColumnId]);
|
|
4013
|
-
|
|
4014
|
-
|
|
3440
|
+
const TableContextSetHeadColumnCommands = useCallback((column, commands) => {
|
|
3441
|
+
const data = localHeaderDataRef.current[getFinalColumnId(column)];
|
|
4015
3442
|
if (data) {
|
|
4016
3443
|
data.commands = commands;
|
|
4017
3444
|
}
|
|
@@ -4019,27 +3446,27 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
4019
3446
|
/********************************************************************************************************************
|
|
4020
3447
|
* Memo
|
|
4021
3448
|
* ******************************************************************************************************************/
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
?
|
|
4028
|
-
|
|
4029
|
-
|
|
3449
|
+
const isNoData = !!sortableItems && sortableItems.length <= 0;
|
|
3450
|
+
const finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
|
|
3451
|
+
const stickyHeader = !isNoData && initStickyHeader;
|
|
3452
|
+
const { style, tableSx, pagingStyle } = useMemo(() => {
|
|
3453
|
+
const style = fullHeight
|
|
3454
|
+
? Object.assign(Object.assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : Object.assign({ width: '100%' }, initStyle);
|
|
3455
|
+
const sx = { padding: typeof cellPadding === 'number' ? `${cellPadding}px` : cellPadding };
|
|
3456
|
+
const tableSx = {
|
|
4030
3457
|
'> .MuiTableHead-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
|
|
4031
3458
|
'> .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
|
|
4032
3459
|
'> .MuiTableFooter-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
|
|
4033
3460
|
};
|
|
4034
3461
|
// pageStyle
|
|
4035
|
-
|
|
3462
|
+
const pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
|
|
4036
3463
|
if (fullHeight) {
|
|
4037
3464
|
pagingStyle.position = 'sticky';
|
|
4038
3465
|
}
|
|
4039
|
-
return { style
|
|
4040
|
-
}, [cellPadding, fullHeight, initStyle])
|
|
4041
|
-
|
|
4042
|
-
|
|
3466
|
+
return { style, tableSx, pagingStyle };
|
|
3467
|
+
}, [cellPadding, fullHeight, initStyle]);
|
|
3468
|
+
const { contentContainerStyle, tableStyle } = useMemo(() => {
|
|
3469
|
+
const contentContainerStyle = fullHeight
|
|
4043
3470
|
? {
|
|
4044
3471
|
height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
|
|
4045
3472
|
flex: 1,
|
|
@@ -4049,20 +3476,16 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
4049
3476
|
right: 0,
|
|
4050
3477
|
marginBottom: finalPagingHeight || 0,
|
|
4051
3478
|
}
|
|
4052
|
-
: { height
|
|
4053
|
-
|
|
4054
|
-
return { contentContainerStyle
|
|
4055
|
-
}, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight])
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
React__default.createElement(
|
|
4062
|
-
React__default.createElement("div", null,
|
|
4063
|
-
React__default.createElement(Icon, null, "error")),
|
|
4064
|
-
React__default.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined));
|
|
4065
|
-
}, [
|
|
3479
|
+
: { height, minHeight, maxHeight, marginBottom: -1 };
|
|
3480
|
+
const tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
|
|
3481
|
+
return { contentContainerStyle, tableStyle };
|
|
3482
|
+
}, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight]);
|
|
3483
|
+
const tableTopHead = useMemo(() => finalColumns && (React__default.createElement(PTableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange })), [caption, defaultAlign, finalColumns, handleHeadCheckChange, items, topHeadRows]);
|
|
3484
|
+
const tableBody = useMemo(() => finalColumns && (React__default.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(PTableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React__default.createElement(StyledBodyRow, null,
|
|
3485
|
+
React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
|
|
3486
|
+
React__default.createElement("div", null,
|
|
3487
|
+
React__default.createElement(Icon, null, "error")),
|
|
3488
|
+
React__default.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined)), [
|
|
4066
3489
|
defaultAlign,
|
|
4067
3490
|
defaultEllipsis,
|
|
4068
3491
|
finalColumns,
|
|
@@ -4080,19 +3503,17 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
4080
3503
|
sortable,
|
|
4081
3504
|
sortableItems,
|
|
4082
3505
|
]);
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
|
|
4088
|
-
}, [defaultAlign, finalColumns, footer, isNoData, items]);
|
|
3506
|
+
const tableFooter = useMemo(() => finalColumns &&
|
|
3507
|
+
!isNoData &&
|
|
3508
|
+
footer && (React__default.createElement(TableFooter, null,
|
|
3509
|
+
React__default.createElement(TableRow, null, finalColumns.map((column, idx) => (React__default.createElement(PTableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })))))), [defaultAlign, finalColumns, footer, isNoData, items]);
|
|
4089
3510
|
/********************************************************************************************************************
|
|
4090
3511
|
* Render
|
|
4091
3512
|
* ******************************************************************************************************************/
|
|
4092
3513
|
return finalColumns ? (React__default.createElement(PTableContextProvider, { value: {
|
|
4093
|
-
menuOpen
|
|
4094
|
-
openMenuId
|
|
4095
|
-
progressiveVisible
|
|
3514
|
+
menuOpen,
|
|
3515
|
+
openMenuId,
|
|
3516
|
+
progressiveVisible,
|
|
4096
3517
|
setMenuOpen: TableContextSetMenuOpen,
|
|
4097
3518
|
setItemColumnChecked: TableContextSetItemColumnChecked,
|
|
4098
3519
|
setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,
|
|
@@ -4114,53 +3535,52 @@ var PTable = React__default.forwardRef(function (_a, ref) {
|
|
|
4114
3535
|
tableFooter)))),
|
|
4115
3536
|
finalColumns && paging && paging.total > 0 && (React__default.createElement(Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
|
|
4116
3537
|
React__default.createElement(PTablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: handlePageChange })))))) : null;
|
|
4117
|
-
});
|
|
4118
|
-
|
|
3538
|
+
});const getSearchInfo = (search) => {
|
|
3539
|
+
const searchInfo = {};
|
|
4119
3540
|
if (search) {
|
|
4120
|
-
|
|
3541
|
+
const { ref, searchGroups } = search, props = __rest(search, ["ref", "searchGroups"]);
|
|
4121
3542
|
searchInfo.ref = ref;
|
|
4122
3543
|
searchInfo.searchGroups = searchGroups;
|
|
4123
3544
|
searchInfo.props = props;
|
|
4124
3545
|
}
|
|
4125
3546
|
return searchInfo;
|
|
4126
3547
|
};
|
|
4127
|
-
|
|
4128
|
-
|
|
3548
|
+
const getTableInfo = (table) => {
|
|
3549
|
+
const tableInfo = {};
|
|
4129
3550
|
if (table) {
|
|
4130
|
-
|
|
3551
|
+
const { ref } = table, props = __rest(table, ["ref"]);
|
|
4131
3552
|
tableInfo.ref = ref;
|
|
4132
3553
|
tableInfo.props = props;
|
|
4133
3554
|
}
|
|
4134
3555
|
return tableInfo;
|
|
4135
3556
|
};
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
hash.replace(/([^=&]+)=([^&]*)/g,
|
|
3557
|
+
const deHash = () => {
|
|
3558
|
+
const values = {};
|
|
3559
|
+
const hash = window.location.hash.substring(1);
|
|
3560
|
+
hash.replace(/([^=&]+)=([^&]*)/g, (substring, key, value) => {
|
|
4140
3561
|
values[decodeURIComponent(key)] = decodeURIComponent(value);
|
|
4141
3562
|
return substring;
|
|
4142
3563
|
});
|
|
4143
3564
|
return values;
|
|
4144
|
-
};
|
|
3565
|
+
};const PSearchTable = React__default.forwardRef(({ className, style: initStyle, sx, color, hash, stickyHeader, fullHeight, search, table, betweenSearchTableComponent, onGetData, onRequestHashChange, }, ref) => {
|
|
4145
3566
|
/********************************************************************************************************************
|
|
4146
3567
|
* Ref
|
|
4147
3568
|
* ******************************************************************************************************************/
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
|
|
4152
|
-
var lastGetDataDataRef = useRef({});
|
|
3569
|
+
const initPathRef = useRef(window.location.pathname);
|
|
3570
|
+
const searchRef = useRef(undefined);
|
|
3571
|
+
const tableRef = useRef(undefined);
|
|
3572
|
+
const lastGetDataDataRef = useRef({});
|
|
4153
3573
|
/********************************************************************************************************************
|
|
4154
3574
|
* State
|
|
4155
3575
|
* ******************************************************************************************************************/
|
|
4156
|
-
|
|
4157
|
-
|
|
3576
|
+
const [isFirstSearchSubmit, setIsFirstSearchSubmit] = useState(true);
|
|
3577
|
+
const [tableData, setTableData] = useState();
|
|
4158
3578
|
/********************************************************************************************************************
|
|
4159
3579
|
* searchInfo
|
|
4160
3580
|
* ******************************************************************************************************************/
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
useEffect(
|
|
3581
|
+
const searchInfoFirstUseEffect = useRef(true);
|
|
3582
|
+
const [searchInfo, setSearchInfo] = useState(() => getSearchInfo(search));
|
|
3583
|
+
useEffect(() => {
|
|
4164
3584
|
if (searchInfoFirstUseEffect.current) {
|
|
4165
3585
|
searchInfoFirstUseEffect.current = false;
|
|
4166
3586
|
}
|
|
@@ -4171,9 +3591,9 @@ var deHash = function () {
|
|
|
4171
3591
|
/********************************************************************************************************************
|
|
4172
3592
|
* tableInfo
|
|
4173
3593
|
* ******************************************************************************************************************/
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
useEffect(
|
|
3594
|
+
const tableInfoFirstUseEffect = useRef(true);
|
|
3595
|
+
const [tableInfo, setTableInfo] = useState(() => getTableInfo(table));
|
|
3596
|
+
useEffect(() => {
|
|
4177
3597
|
if (tableInfoFirstUseEffect.current) {
|
|
4178
3598
|
tableInfoFirstUseEffect.current = false;
|
|
4179
3599
|
}
|
|
@@ -4184,30 +3604,30 @@ var deHash = function () {
|
|
|
4184
3604
|
/********************************************************************************************************************
|
|
4185
3605
|
* Function
|
|
4186
3606
|
* ******************************************************************************************************************/
|
|
4187
|
-
|
|
3607
|
+
const getData = useCallback((data) => {
|
|
4188
3608
|
lastGetDataDataRef.current = data;
|
|
4189
3609
|
if (onGetData) {
|
|
4190
3610
|
onGetData(data).then(setTableData);
|
|
4191
3611
|
}
|
|
4192
3612
|
}, [onGetData]);
|
|
4193
|
-
|
|
4194
|
-
|
|
3613
|
+
const hashToSearchValue = useCallback(() => {
|
|
3614
|
+
const commands = searchRef.current;
|
|
4195
3615
|
if (commands) {
|
|
4196
3616
|
commands.resetAll();
|
|
4197
|
-
|
|
4198
|
-
Object.keys(
|
|
3617
|
+
const hashValues = deHash();
|
|
3618
|
+
Object.keys(hashValues).forEach((name) => {
|
|
4199
3619
|
var _a, _b;
|
|
4200
|
-
|
|
3620
|
+
const value = hashValues[name];
|
|
4201
3621
|
if (name === 'page') {
|
|
4202
3622
|
commands.setValue(name, Number(value) || 1);
|
|
4203
3623
|
}
|
|
4204
3624
|
else {
|
|
4205
|
-
|
|
3625
|
+
const itemCommands = commands.getItem(name);
|
|
4206
3626
|
if (itemCommands) {
|
|
4207
3627
|
switch (itemCommands.getType()) {
|
|
4208
3628
|
case 'PFormCheckbox':
|
|
4209
3629
|
if (notEmpty(value)) {
|
|
4210
|
-
|
|
3630
|
+
const checkCommands = itemCommands;
|
|
4211
3631
|
if (value.toString() === ((_a = itemCommands.getValue()) === null || _a === void 0 ? void 0 : _a.toString())) {
|
|
4212
3632
|
checkCommands.setChecked(true);
|
|
4213
3633
|
}
|
|
@@ -4221,9 +3641,9 @@ var deHash = function () {
|
|
|
4221
3641
|
case 'PFormTimePicker':
|
|
4222
3642
|
{
|
|
4223
3643
|
if (notEmpty(value)) {
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
3644
|
+
const dateCommands = itemCommands;
|
|
3645
|
+
const format = dateCommands.getFormValueFormat();
|
|
3646
|
+
const itemValue = dayjs(value, format);
|
|
4227
3647
|
itemCommands.setValue(itemValue.isValid() ? itemValue : null);
|
|
4228
3648
|
}
|
|
4229
3649
|
else {
|
|
@@ -4233,13 +3653,13 @@ var deHash = function () {
|
|
|
4233
3653
|
break;
|
|
4234
3654
|
case 'PFormDateRangePicker':
|
|
4235
3655
|
{
|
|
4236
|
-
|
|
4237
|
-
|
|
4238
|
-
|
|
4239
|
-
|
|
3656
|
+
const dateRangePickerCommands = itemCommands;
|
|
3657
|
+
const fromName = dateRangePickerCommands.getFormValueFromName();
|
|
3658
|
+
const toName = dateRangePickerCommands.getFormValueToName();
|
|
3659
|
+
const format = dateRangePickerCommands.getFormValueFormat();
|
|
4240
3660
|
if (name === fromName) {
|
|
4241
3661
|
if (notEmpty(value)) {
|
|
4242
|
-
|
|
3662
|
+
const startValue = dayjs(value, format);
|
|
4243
3663
|
dateRangePickerCommands.setFromValue(startValue.isValid() ? startValue : null);
|
|
4244
3664
|
}
|
|
4245
3665
|
else {
|
|
@@ -4248,7 +3668,7 @@ var deHash = function () {
|
|
|
4248
3668
|
}
|
|
4249
3669
|
else if (name === toName) {
|
|
4250
3670
|
if (notEmpty(value)) {
|
|
4251
|
-
|
|
3671
|
+
const endValue = dayjs(value, format);
|
|
4252
3672
|
dateRangePickerCommands.setToValue(endValue.isValid() ? endValue : null);
|
|
4253
3673
|
}
|
|
4254
3674
|
else {
|
|
@@ -4259,9 +3679,9 @@ var deHash = function () {
|
|
|
4259
3679
|
break;
|
|
4260
3680
|
case 'PFormYearRangePicker':
|
|
4261
3681
|
{
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
3682
|
+
const dateRangePickerCommands = itemCommands;
|
|
3683
|
+
const fromName = dateRangePickerCommands.getFormValueFromName();
|
|
3684
|
+
const toName = dateRangePickerCommands.getFormValueToName();
|
|
4265
3685
|
if (name === fromName) {
|
|
4266
3686
|
dateRangePickerCommands.setFromValue(notEmpty(value) ? Number(value) : null);
|
|
4267
3687
|
}
|
|
@@ -4272,9 +3692,9 @@ var deHash = function () {
|
|
|
4272
3692
|
break;
|
|
4273
3693
|
case 'PFormMonthPicker':
|
|
4274
3694
|
{
|
|
4275
|
-
|
|
4276
|
-
|
|
4277
|
-
|
|
3695
|
+
const monthCommands = itemCommands;
|
|
3696
|
+
const yearName = monthCommands.getFormValueYearName();
|
|
3697
|
+
const monthName = monthCommands.getFormValueMonthName();
|
|
4278
3698
|
if (name === yearName) {
|
|
4279
3699
|
monthCommands.setYear(notEmpty(value) ? Number(value) : null);
|
|
4280
3700
|
}
|
|
@@ -4285,11 +3705,11 @@ var deHash = function () {
|
|
|
4285
3705
|
break;
|
|
4286
3706
|
case 'PFormMonthRangePicker':
|
|
4287
3707
|
{
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
3708
|
+
const monthRangeCommands = itemCommands;
|
|
3709
|
+
const fromYearName = monthRangeCommands.getFormValueFromYearName();
|
|
3710
|
+
const fromMonthName = monthRangeCommands.getFormValueFromMonthName();
|
|
3711
|
+
const toYearName = monthRangeCommands.getFormValueToYearName();
|
|
3712
|
+
const toMonthName = monthRangeCommands.getFormValueToMonthName();
|
|
4293
3713
|
if (name === fromYearName) {
|
|
4294
3714
|
monthRangeCommands.setFromYear(notEmpty(value) ? Number(value) : null);
|
|
4295
3715
|
}
|
|
@@ -4317,15 +3737,15 @@ var deHash = function () {
|
|
|
4317
3737
|
/********************************************************************************************************************
|
|
4318
3738
|
* Commands
|
|
4319
3739
|
* ******************************************************************************************************************/
|
|
4320
|
-
useForwardLayoutRef(ref, useMemo(
|
|
4321
|
-
reload:
|
|
3740
|
+
useForwardLayoutRef(ref, useMemo(() => ({
|
|
3741
|
+
reload: (page) => {
|
|
4322
3742
|
var _a, _b, _c, _d;
|
|
4323
3743
|
if (page != null) {
|
|
4324
3744
|
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
|
|
4325
3745
|
}
|
|
4326
|
-
|
|
3746
|
+
let finalData;
|
|
4327
3747
|
if (lastGetDataDataRef.current) {
|
|
4328
|
-
finalData =
|
|
3748
|
+
finalData = Object.assign({}, lastGetDataDataRef.current);
|
|
4329
3749
|
if (page != null) {
|
|
4330
3750
|
(_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', page);
|
|
4331
3751
|
finalData.page = page;
|
|
@@ -4342,46 +3762,46 @@ var deHash = function () {
|
|
|
4342
3762
|
}
|
|
4343
3763
|
getData(finalData);
|
|
4344
3764
|
},
|
|
4345
|
-
getLastLoadData:
|
|
4346
|
-
getSearch:
|
|
4347
|
-
getTable:
|
|
4348
|
-
})
|
|
3765
|
+
getLastLoadData: () => lastGetDataDataRef.current || {},
|
|
3766
|
+
getSearch: () => searchRef.current,
|
|
3767
|
+
getTable: () => tableRef.current,
|
|
3768
|
+
}), [getData, hash, hashToSearchValue]));
|
|
4349
3769
|
/********************************************************************************************************************
|
|
4350
3770
|
* hash
|
|
4351
3771
|
* ******************************************************************************************************************/
|
|
4352
|
-
useEffect(
|
|
3772
|
+
useEffect(() => {
|
|
4353
3773
|
if (hash && window.location.pathname === initPathRef.current) {
|
|
4354
|
-
|
|
3774
|
+
const data = hashToSearchValue();
|
|
4355
3775
|
if (data)
|
|
4356
3776
|
getData(data);
|
|
4357
3777
|
}
|
|
4358
3778
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4359
3779
|
}, [window.location.hash]);
|
|
4360
|
-
|
|
3780
|
+
const hashChange = useCallback((params) => {
|
|
4361
3781
|
if (onRequestHashChange) {
|
|
4362
|
-
|
|
4363
|
-
Object.keys(params).forEach(
|
|
4364
|
-
|
|
3782
|
+
const hashes = [];
|
|
3783
|
+
Object.keys(params).forEach((name) => {
|
|
3784
|
+
const value = params[name];
|
|
4365
3785
|
if (name === 'page') {
|
|
4366
3786
|
if (Number(value) > 1) {
|
|
4367
|
-
|
|
3787
|
+
hashes.push(`${name}=${value}`);
|
|
4368
3788
|
}
|
|
4369
3789
|
}
|
|
4370
3790
|
else {
|
|
4371
3791
|
if (searchRef.current) {
|
|
4372
|
-
|
|
3792
|
+
const itemCommands = searchRef.current.getItem(name);
|
|
4373
3793
|
if (itemCommands) {
|
|
4374
|
-
|
|
3794
|
+
let resetValue = null;
|
|
4375
3795
|
switch (itemCommands.getType()) {
|
|
4376
3796
|
case 'PFormDateRangePicker':
|
|
4377
3797
|
case 'PFormYearRangePicker':
|
|
4378
3798
|
{
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
|
|
3799
|
+
const commands = itemCommands;
|
|
3800
|
+
const itemName = itemCommands.getName();
|
|
3801
|
+
const fromName = commands.getFormValueFromName();
|
|
3802
|
+
const fromSuffix = commands.getFormValueFromNameSuffix();
|
|
3803
|
+
const toName = commands.getFormValueToName();
|
|
3804
|
+
const toSuffix = commands.getFormValueToNameSuffix();
|
|
4385
3805
|
if (name === fromName) {
|
|
4386
3806
|
resetValue = searchRef.current.getFormReset(itemName, fromSuffix);
|
|
4387
3807
|
}
|
|
@@ -4392,12 +3812,12 @@ var deHash = function () {
|
|
|
4392
3812
|
break;
|
|
4393
3813
|
case 'PFormMonthPicker':
|
|
4394
3814
|
{
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4399
|
-
|
|
4400
|
-
|
|
3815
|
+
const commands = itemCommands;
|
|
3816
|
+
const itemName = commands.getName();
|
|
3817
|
+
const yearName = commands.getFormValueYearName();
|
|
3818
|
+
const yearSuffix = commands.getFormValueYearNameSuffix();
|
|
3819
|
+
const monthName = commands.getFormValueMonthName();
|
|
3820
|
+
const monthSuffix = commands.getFormValueMonthNameSuffix();
|
|
4401
3821
|
if (name === yearName) {
|
|
4402
3822
|
resetValue = searchRef.current.getFormReset(itemName, yearSuffix);
|
|
4403
3823
|
}
|
|
@@ -4408,16 +3828,16 @@ var deHash = function () {
|
|
|
4408
3828
|
break;
|
|
4409
3829
|
case 'PFormMonthRangePicker':
|
|
4410
3830
|
{
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
3831
|
+
const commands = itemCommands;
|
|
3832
|
+
const itemName = commands.getName();
|
|
3833
|
+
const fromYearName = commands.getFormValueFromYearName();
|
|
3834
|
+
const fromYearSuffix = commands.getFormValueFromYearNameSuffix();
|
|
3835
|
+
const fromMonthName = commands.getFormValueFromMonthName();
|
|
3836
|
+
const fromMonthSuffix = commands.getFormValueFromMonthNameSuffix();
|
|
3837
|
+
const toYearName = commands.getFormValueToYearName();
|
|
3838
|
+
const toYearSuffix = commands.getFormValueToYearNameSuffix();
|
|
3839
|
+
const toMonthName = commands.getFormValueToMonthName();
|
|
3840
|
+
const toMonthSuffix = commands.getFormValueToMonthNameSuffix();
|
|
4421
3841
|
if (name === fromYearName) {
|
|
4422
3842
|
resetValue = searchRef.current.getFormReset(itemName, fromYearSuffix);
|
|
4423
3843
|
}
|
|
@@ -4437,30 +3857,30 @@ var deHash = function () {
|
|
|
4437
3857
|
break;
|
|
4438
3858
|
}
|
|
4439
3859
|
if (resetValue != null && !equal(resetValue, value) && typeof value !== 'object') {
|
|
4440
|
-
|
|
3860
|
+
hashes.push(`${name}=${encodeURIComponent(value)}`);
|
|
4441
3861
|
}
|
|
4442
3862
|
}
|
|
4443
3863
|
}
|
|
4444
3864
|
}
|
|
4445
3865
|
});
|
|
4446
|
-
|
|
3866
|
+
const finalHash = hashes.join('&');
|
|
4447
3867
|
if (window.location.hash.substring(1) === finalHash) {
|
|
4448
3868
|
getData(params);
|
|
4449
3869
|
}
|
|
4450
3870
|
else {
|
|
4451
|
-
onRequestHashChange(
|
|
3871
|
+
onRequestHashChange(hashes.join('&'));
|
|
4452
3872
|
}
|
|
4453
3873
|
}
|
|
4454
3874
|
}, [onRequestHashChange, getData]);
|
|
4455
3875
|
/********************************************************************************************************************
|
|
4456
3876
|
* Event Handler
|
|
4457
3877
|
* ******************************************************************************************************************/
|
|
4458
|
-
|
|
3878
|
+
const handlePageChange = useCallback((page) => {
|
|
4459
3879
|
var _a, _b;
|
|
4460
3880
|
(_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.setValue('page', page);
|
|
4461
|
-
|
|
3881
|
+
let finalData;
|
|
4462
3882
|
if (lastGetDataDataRef.current) {
|
|
4463
|
-
finalData =
|
|
3883
|
+
finalData = Object.assign({}, lastGetDataDataRef.current);
|
|
4464
3884
|
finalData.page = page;
|
|
4465
3885
|
}
|
|
4466
3886
|
else {
|
|
@@ -4473,7 +3893,7 @@ var deHash = function () {
|
|
|
4473
3893
|
getData(finalData || {});
|
|
4474
3894
|
}
|
|
4475
3895
|
}, [searchRef, hash, hashChange, getData]);
|
|
4476
|
-
|
|
3896
|
+
const handleSearchSubmit = useCallback((data) => {
|
|
4477
3897
|
var _a, _b;
|
|
4478
3898
|
(_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
|
|
4479
3899
|
if (isFirstSearchSubmit) {
|
|
@@ -4484,7 +3904,7 @@ var deHash = function () {
|
|
|
4484
3904
|
}
|
|
4485
3905
|
else {
|
|
4486
3906
|
(_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', 1);
|
|
4487
|
-
|
|
3907
|
+
const finalData = Object.assign(Object.assign({}, data), { page: 1 });
|
|
4488
3908
|
if (hash) {
|
|
4489
3909
|
hashChange(finalData);
|
|
4490
3910
|
}
|
|
@@ -4496,8 +3916,8 @@ var deHash = function () {
|
|
|
4496
3916
|
/********************************************************************************************************************
|
|
4497
3917
|
* Render
|
|
4498
3918
|
* ******************************************************************************************************************/
|
|
4499
|
-
|
|
4500
|
-
React__default.createElement(PSearch,
|
|
3919
|
+
const searchView = useMemo(() => (React__default.createElement(Grid, { sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
|
|
3920
|
+
React__default.createElement(PSearch, Object.assign({ color: color }, searchInfo.props, { ref: (commands) => {
|
|
4501
3921
|
if (searchInfo.ref) {
|
|
4502
3922
|
if (typeof searchInfo.ref === 'function') {
|
|
4503
3923
|
searchInfo.ref(commands);
|
|
@@ -4510,11 +3930,11 @@ var deHash = function () {
|
|
|
4510
3930
|
}, autoSubmit: true, onSubmit: handleSearchSubmit }),
|
|
4511
3931
|
React__default.createElement(PSearchGroup, { hidden: true },
|
|
4512
3932
|
React__default.createElement(PFormHidden, { name: 'page', value: 1 })),
|
|
4513
|
-
searchInfo.searchGroups)))
|
|
4514
|
-
|
|
3933
|
+
searchInfo.searchGroups))), [color, handleSearchSubmit, searchInfo]);
|
|
3934
|
+
const tableView = useMemo(() => {
|
|
4515
3935
|
var _a, _b;
|
|
4516
3936
|
return (React__default.createElement(Grid, { style: fullHeight ? { flex: 1, display: 'flex', flexDirection: 'column' } : undefined },
|
|
4517
|
-
React__default.createElement(PTable,
|
|
3937
|
+
React__default.createElement(PTable, Object.assign({}, tableInfo.props, { stickyHeader: stickyHeader || ((_a = tableInfo.props) === null || _a === void 0 ? void 0 : _a.stickyHeader), fullHeight: fullHeight || ((_b = tableInfo.props) === null || _b === void 0 ? void 0 : _b.fullHeight), ref: (commands) => {
|
|
4518
3938
|
if (tableInfo.ref) {
|
|
4519
3939
|
if (typeof tableInfo.ref === 'function') {
|
|
4520
3940
|
tableInfo.ref(commands);
|
|
@@ -4526,41 +3946,41 @@ var deHash = function () {
|
|
|
4526
3946
|
tableRef.current = commands || undefined;
|
|
4527
3947
|
}, items: tableData === null || tableData === void 0 ? void 0 : tableData.items, paging: tableData === null || tableData === void 0 ? void 0 : tableData.paging, onPageChange: handlePageChange }))));
|
|
4528
3948
|
}, [fullHeight, handlePageChange, stickyHeader, tableData === null || tableData === void 0 ? void 0 : tableData.items, tableData === null || tableData === void 0 ? void 0 : tableData.paging, tableInfo]);
|
|
4529
|
-
return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ?
|
|
3949
|
+
return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('PSearchTable', className), style: fullHeight ? Object.assign(Object.assign({}, initStyle), { flex: 1, display: 'flex' }) : initStyle, sx: sx },
|
|
4530
3950
|
searchView,
|
|
4531
3951
|
betweenSearchTableComponent && React__default.createElement(Grid, null, betweenSearchTableComponent),
|
|
4532
3952
|
tableView));
|
|
4533
|
-
});
|
|
4534
|
-
var
|
|
4535
|
-
return (React__default.createElement(PButton,
|
|
3953
|
+
});const PTableButton$1 = React__default.forwardRef((_a, ref) => {
|
|
3954
|
+
var { children, className, sx: initSx, variant = 'outlined', color = 'primary', startIcon, endIcon, onClick } = _a, props = __rest(_a, ["children", "className", "sx", "variant", "color", "startIcon", "endIcon", "onClick"]);
|
|
3955
|
+
return (React__default.createElement(PButton, Object.assign({ ref: ref, className: classNames(className, 'PTableButton'), variant: variant, type: 'button', size: 'small', sx: Object.assign({ minWidth: 0, px: empty(startIcon) && empty(endIcon)
|
|
4536
3956
|
? '7px !important'
|
|
4537
3957
|
: empty(children)
|
|
4538
3958
|
? '5px !important'
|
|
4539
3959
|
: '7px !important' }, initSx), color: color, startIcon: startIcon, endIcon: endIcon, onClick: onClick }, props), children));
|
|
4540
3960
|
});
|
|
4541
|
-
var PTableButton
|
|
3961
|
+
var PTableButton = React__default.memo(PTableButton$1);const PTableMenuButton = React__default.forwardRef((_a, ref) => {
|
|
4542
3962
|
/********************************************************************************************************************
|
|
4543
3963
|
* ID
|
|
4544
3964
|
* ******************************************************************************************************************/
|
|
4545
|
-
var
|
|
4546
|
-
|
|
4547
|
-
|
|
3965
|
+
var { children, className, sx: initSx, color = 'primary', variant = 'text', startIcon, placement = 'bottom', inModal, zIndex, menuList } = _a, props = __rest(_a, ["children", "className", "sx", "color", "variant", "startIcon", "placement", "inModal", "zIndex", "menuList"]);
|
|
3966
|
+
const buttonId = useId();
|
|
3967
|
+
const menuId = useId();
|
|
4548
3968
|
/********************************************************************************************************************
|
|
4549
3969
|
* Use
|
|
4550
3970
|
* ******************************************************************************************************************/
|
|
4551
|
-
|
|
3971
|
+
const { menuOpen, openMenuId, setMenuOpen } = useTableState();
|
|
4552
3972
|
/********************************************************************************************************************
|
|
4553
3973
|
* Ref
|
|
4554
3974
|
* ******************************************************************************************************************/
|
|
4555
|
-
|
|
3975
|
+
const anchorRef = useRef(null);
|
|
4556
3976
|
/********************************************************************************************************************
|
|
4557
3977
|
* State
|
|
4558
3978
|
* ******************************************************************************************************************/
|
|
4559
|
-
|
|
3979
|
+
const [open, setOpen] = useState(false);
|
|
4560
3980
|
/********************************************************************************************************************
|
|
4561
3981
|
* Effect
|
|
4562
3982
|
* ******************************************************************************************************************/
|
|
4563
|
-
useEffect(
|
|
3983
|
+
useEffect(() => {
|
|
4564
3984
|
if (open && menuOpen && openMenuId !== menuId) {
|
|
4565
3985
|
setOpen(false);
|
|
4566
3986
|
}
|
|
@@ -4568,8 +3988,8 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
|
|
|
4568
3988
|
/********************************************************************************************************************
|
|
4569
3989
|
* Event Handler
|
|
4570
3990
|
* ******************************************************************************************************************/
|
|
4571
|
-
|
|
4572
|
-
setOpen(
|
|
3991
|
+
const handleClick = useCallback(() => {
|
|
3992
|
+
setOpen((old) => !old);
|
|
4573
3993
|
if (!open) {
|
|
4574
3994
|
setMenuOpen(true, menuId);
|
|
4575
3995
|
}
|
|
@@ -4577,13 +3997,13 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
|
|
|
4577
3997
|
setMenuOpen(false, menuId);
|
|
4578
3998
|
}
|
|
4579
3999
|
}, [menuId, open, setMenuOpen]);
|
|
4580
|
-
|
|
4000
|
+
const handleClose = useCallback(() => {
|
|
4581
4001
|
if (open) {
|
|
4582
4002
|
setOpen(false);
|
|
4583
4003
|
setMenuOpen(false, menuId);
|
|
4584
4004
|
}
|
|
4585
4005
|
}, [menuId, open, setMenuOpen]);
|
|
4586
|
-
|
|
4006
|
+
const handleListKeyDown = useCallback((event) => {
|
|
4587
4007
|
if (event.key === 'Tab') {
|
|
4588
4008
|
event.preventDefault();
|
|
4589
4009
|
if (open) {
|
|
@@ -4601,7 +4021,7 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
|
|
|
4601
4021
|
/********************************************************************************************************************
|
|
4602
4022
|
* Memo
|
|
4603
4023
|
* ******************************************************************************************************************/
|
|
4604
|
-
|
|
4024
|
+
const finalMenuList = useMemo(() => {
|
|
4605
4025
|
return React__default.cloneElement(menuList, {
|
|
4606
4026
|
autoFocusItem: open,
|
|
4607
4027
|
id: menuId,
|
|
@@ -4613,12 +4033,12 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
|
|
|
4613
4033
|
/********************************************************************************************************************
|
|
4614
4034
|
* Variable
|
|
4615
4035
|
* ******************************************************************************************************************/
|
|
4616
|
-
|
|
4036
|
+
const icon = !startIcon && !children ? 'MoreVert' : undefined;
|
|
4617
4037
|
/********************************************************************************************************************
|
|
4618
4038
|
* Render
|
|
4619
4039
|
* ******************************************************************************************************************/
|
|
4620
4040
|
return (React__default.createElement("span", null,
|
|
4621
|
-
React__default.createElement(PButton,
|
|
4041
|
+
React__default.createElement(PButton, Object.assign({ ref: (r) => {
|
|
4622
4042
|
if (ref) {
|
|
4623
4043
|
if (typeof ref === 'function') {
|
|
4624
4044
|
ref(r);
|
|
@@ -4628,11 +4048,10 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
|
|
|
4628
4048
|
}
|
|
4629
4049
|
}
|
|
4630
4050
|
anchorRef.current = r;
|
|
4631
|
-
}, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx:
|
|
4632
|
-
React__default.createElement(Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } },
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
var transformOrigin;
|
|
4051
|
+
}, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'PTableMenuButton'), type: 'button', size: 'small', sx: Object.assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx), color: color, startIcon: icon, onClick: handleClick }, props), children),
|
|
4052
|
+
React__default.createElement(Popper, { className: 'PTableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, ({ TransitionProps, placement }) => {
|
|
4053
|
+
const placements = placement.split('-');
|
|
4054
|
+
let transformOrigin;
|
|
4636
4055
|
if (placements[0] === 'left') {
|
|
4637
4056
|
transformOrigin = 'right';
|
|
4638
4057
|
// if (placements.length > 1) {
|
|
@@ -4676,10 +4095,10 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
|
|
|
4676
4095
|
else {
|
|
4677
4096
|
transformOrigin = 'top';
|
|
4678
4097
|
}
|
|
4679
|
-
return (React__default.createElement(Grow,
|
|
4680
|
-
transformOrigin
|
|
4098
|
+
return (React__default.createElement(Grow, Object.assign({}, TransitionProps, { style: {
|
|
4099
|
+
transformOrigin,
|
|
4681
4100
|
} }),
|
|
4682
4101
|
React__default.createElement(Paper, null,
|
|
4683
4102
|
React__default.createElement(ClickAwayListener, { onClickAway: handleClose }, finalMenuList))));
|
|
4684
4103
|
})));
|
|
4685
|
-
});export{PInfoTable,PSearchTable,PTable,PTableBodyCell,PTableBodyRow,PTableButton
|
|
4104
|
+
});export{PInfoTable,PSearchTable,PTable,PTableBodyCell,PTableBodyRow,PTableButton,PTableCommonCell,PTableFooterCell,PTableHeadCell,PTableMenuButton,PTablePagination,PTableSortableBody,PTableSortableBodyBlock,PTableTopHead};
|