@arcblock/ux 2.1.18 → 2.1.21
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/lib/ActionButton/index.js +16 -8
- package/lib/ActivityIndicator/index.js +49 -36
- package/lib/Alert/index.js +25 -17
- package/lib/AnimationWaiter/index.js +44 -35
- package/lib/Async/index.js +15 -3
- package/lib/Badge/index.js +14 -4
- package/lib/Blocklet/blocklet.js +81 -62
- package/lib/BlockletNFT/index.js +95 -76
- package/lib/Button/wrap.js +13 -9
- package/lib/Center/index.js +6 -5
- package/lib/ClickToCopy/index.js +31 -21
- package/lib/CodeBlock/index.js +35 -27
- package/lib/ContactForm/index.js +46 -41
- package/lib/CookieConsent/index.js +33 -21
- package/lib/CountDown/index.js +50 -34
- package/lib/Datatable/CustomToolbar.js +138 -97
- package/lib/Datatable/DatatableContext.js +9 -12
- package/lib/Datatable/TableSearch.js +44 -27
- package/lib/Datatable/index.js +44 -28
- package/lib/Dialog/confirm.js +26 -13
- package/lib/Dialog/dialog.js +42 -26
- package/lib/DriftBot/index.js +2 -2
- package/lib/Earth/index.js +121 -107
- package/lib/Empty/index.js +19 -10
- package/lib/ErrorBoundary/fallback.js +18 -12
- package/lib/Footer/index.js +32 -26
- package/lib/Header/header.js +37 -21
- package/lib/Header/responsive-header.js +40 -30
- package/lib/Icon/image.js +22 -15
- package/lib/Icon/index.js +17 -7
- package/lib/Img/index.js +34 -32
- package/lib/InfoRow/index.js +23 -13
- package/lib/Layout/dashboard/index.js +66 -54
- package/lib/Layout/dashboard/sidebar.js +39 -26
- package/lib/Layout/dashboard-legacy/header.js +56 -38
- package/lib/Layout/dashboard-legacy/index.js +54 -44
- package/lib/Layout/dashboard-legacy/sidebar.js +48 -38
- package/lib/Layout/index.js +147 -111
- package/lib/Locale/context.js +8 -10
- package/lib/Locale/selector.js +55 -41
- package/lib/Logo/index.js +50 -30
- package/lib/Metric/index.js +30 -23
- package/lib/NFTDisplay/aspect-ratio-container.js +15 -6
- package/lib/NFTDisplay/broken.js +3 -3
- package/lib/NFTDisplay/index.js +29 -28
- package/lib/NFTDisplay/loading.js +6 -5
- package/lib/NFTDisplay/svg-embedder/img.js +10 -4
- package/lib/NFTDisplay/svg-embedder/inline-svg.js +14 -6
- package/lib/NavMenu/nav-menu.js +60 -49
- package/lib/PageScroller/index.js +29 -27
- package/lib/PageScroller/usePrevValue.js +1 -5
- package/lib/PricingTable/PricingPlan.js +46 -36
- package/lib/PricingTable/index.js +22 -20
- package/lib/QRCode/index.js +6 -9
- package/lib/RelativeTime/index.js +14 -5
- package/lib/Result/common.js +49 -44
- package/lib/Result/index.js +6 -6
- package/lib/Result/result.js +29 -18
- package/lib/Screenshot/index.js +32 -21
- package/lib/Spinner/index.js +3 -3
- package/lib/SplitButton/index.js +40 -24
- package/lib/Switch/index.js +12 -6
- package/lib/Tabs/index.js +18 -12
- package/lib/Tag/index.js +14 -4
- package/lib/Terminal/Player.js +108 -92
- package/lib/Terminal/index.js +3 -1
- package/lib/TextCollapse/index.js +18 -8
- package/lib/Toast/index.js +17 -14
- package/lib/Video/index.js +31 -25
- package/lib/Wallet/Action.js +37 -25
- package/lib/Wallet/Download.js +236 -181
- package/lib/Wallet/Open.js +6 -5
- package/lib/WechatPrompt/index.js +40 -28
- package/lib/withTheme/index.js +23 -9
- package/lib/withTracker/error_boundary.js +10 -7
- package/lib/withTracker/index.js +8 -4
- package/package.json +4 -4
- package/src/ActionButton/index.js +3 -4
- package/src/ActivityIndicator/index.js +4 -7
- package/src/Alert/index.js +4 -10
- package/src/AnimationWaiter/index.js +4 -2
- package/src/Async/index.js +4 -8
- package/src/Badge/index.js +2 -2
- package/src/Blocklet/blocklet.js +16 -27
- package/src/Blocklet/utils.js +3 -3
- package/src/BlockletNFT/index.js +7 -15
- package/src/Button/wrap.js +2 -2
- package/src/Center/index.js +0 -1
- package/src/ClickToCopy/index.js +5 -12
- package/src/CodeBlock/index.js +2 -7
- package/src/Colors/index.js +1 -0
- package/src/ContactForm/index.js +16 -16
- package/src/CookieConsent/index.js +3 -2
- package/src/CountDown/index.js +8 -8
- package/src/Datatable/CustomToolbar.js +8 -9
- package/src/Datatable/DatatableContext.js +3 -3
- package/src/Datatable/TableSearch.js +18 -13
- package/src/Datatable/index.js +13 -12
- package/src/Datatable/utils.js +19 -23
- package/src/Dialog/confirm.js +0 -1
- package/src/Dialog/dialog.js +7 -27
- package/src/Dialog/index.js +1 -0
- package/src/DriftBot/index.js +2 -2
- package/src/Earth/index.js +26 -44
- package/src/Empty/index.js +0 -1
- package/src/ErrorBoundary/fallback.js +2 -3
- package/src/Footer/index.js +3 -7
- package/src/Header/header.js +4 -5
- package/src/Header/responsive-header.js +4 -10
- package/src/Icon/image.js +0 -1
- package/src/Icon/index.js +8 -8
- package/src/Img/index.js +6 -6
- package/src/InfoRow/index.js +22 -21
- package/src/Layout/dashboard/index.js +9 -4
- package/src/Layout/dashboard/sidebar.js +4 -10
- package/src/Layout/dashboard-legacy/header.js +9 -15
- package/src/Layout/dashboard-legacy/index.js +4 -11
- package/src/Layout/dashboard-legacy/sidebar.js +7 -7
- package/src/Layout/index.js +12 -26
- package/src/Locale/browser-lang.js +2 -2
- package/src/Locale/context.js +7 -11
- package/src/Locale/selector.js +8 -8
- package/src/Logo/index.js +4 -6
- package/src/Metric/index.js +9 -10
- package/src/NFTDisplay/aspect-ratio-container.js +0 -1
- package/src/NFTDisplay/broken.js +0 -1
- package/src/NFTDisplay/index.js +10 -8
- package/src/NFTDisplay/loading.js +0 -1
- package/src/NFTDisplay/svg-embedder/img.js +1 -2
- package/src/NFTDisplay/svg-embedder/inline-svg.js +0 -1
- package/src/NavMenu/index.js +1 -0
- package/src/NavMenu/nav-menu.js +14 -27
- package/src/NavMenu/style.js +3 -3
- package/src/PageScroller/index.js +19 -35
- package/src/PageScroller/usePrevValue.js +1 -1
- package/src/PricingTable/PricingPlan.js +31 -30
- package/src/PricingTable/index.js +4 -5
- package/src/QRCode/index.js +3 -2
- package/src/RelativeTime/index.js +1 -5
- package/src/Result/common.js +19 -20
- package/src/Result/index.js +5 -6
- package/src/Result/result.js +2 -3
- package/src/Result/translations.js +1 -2
- package/src/Screenshot/index.js +10 -10
- package/src/Spinner/index.js +0 -1
- package/src/SplitButton/index.js +6 -19
- package/src/Switch/index.js +40 -41
- package/src/Tabs/index.js +2 -9
- package/src/Tag/index.js +2 -2
- package/src/Terminal/Player.js +7 -8
- package/src/Terminal/index.js +4 -3
- package/src/Terminal/util.js +3 -3
- package/src/TextCollapse/index.js +4 -10
- package/src/Theme/index.js +1 -8
- package/src/Toast/index.js +6 -10
- package/src/Util/index.js +15 -27
- package/src/Video/index.js +2 -8
- package/src/Wallet/Action.js +5 -6
- package/src/Wallet/Download.js +6 -7
- package/src/Wallet/Open.js +1 -2
- package/src/WechatPrompt/index.js +2 -7
- package/src/withTheme/index.js +5 -5
- package/src/withTracker/error_boundary.js +3 -3
- package/src/withTracker/index.js +2 -2
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = CustomToolbar;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = require("react");
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -51,12 +51,14 @@ var _TableSearch = _interopRequireDefault(require("./TableSearch"));
|
|
|
51
51
|
|
|
52
52
|
var _DatatableContext = require("./DatatableContext");
|
|
53
53
|
|
|
54
|
-
|
|
54
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
55
55
|
|
|
56
56
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
57
57
|
|
|
58
58
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
59
59
|
|
|
60
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
61
|
+
|
|
60
62
|
function useMobile() {
|
|
61
63
|
const theme = (0, _styles.useTheme)();
|
|
62
64
|
return (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
|
|
@@ -109,9 +111,12 @@ function CustomToolbar(props) {
|
|
|
109
111
|
}, [loading, disabled]);
|
|
110
112
|
|
|
111
113
|
const printArea = func => {
|
|
112
|
-
return /*#__PURE__*/
|
|
113
|
-
content: () => props.tableRef()
|
|
114
|
-
|
|
114
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToPrint.default, {
|
|
115
|
+
content: () => props.tableRef(),
|
|
116
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactToPrint.PrintContextConsumer, {
|
|
117
|
+
children: func
|
|
118
|
+
})
|
|
119
|
+
});
|
|
115
120
|
};
|
|
116
121
|
|
|
117
122
|
const getPopId = key => "toolbar-pop-".concat(toolbarId.current, "-").concat(key);
|
|
@@ -120,7 +125,7 @@ function CustomToolbar(props) {
|
|
|
120
125
|
|
|
121
126
|
if (!(options.download === false || options.download === 'false')) {
|
|
122
127
|
defaultButtons.push({
|
|
123
|
-
icon: /*#__PURE__*/
|
|
128
|
+
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudDownload.default, {}),
|
|
124
129
|
title: downloadCsv,
|
|
125
130
|
onClick: () => {
|
|
126
131
|
(0, _utils.handleCSVDownload)(props);
|
|
@@ -130,11 +135,12 @@ function CustomToolbar(props) {
|
|
|
130
135
|
|
|
131
136
|
if (!(options.viewColumns === false || options.viewColumns === 'false')) {
|
|
132
137
|
defaultButtons.push({
|
|
133
|
-
icon: /*#__PURE__*/
|
|
138
|
+
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewColumn.default, {}),
|
|
134
139
|
title: viewColumns,
|
|
135
140
|
|
|
141
|
+
// eslint-disable-next-line react/no-unstable-nested-components
|
|
136
142
|
popRender() {
|
|
137
|
-
return /*#__PURE__*/
|
|
143
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableViewColComponent, {
|
|
138
144
|
data: data,
|
|
139
145
|
columns: columns,
|
|
140
146
|
options: options,
|
|
@@ -149,11 +155,12 @@ function CustomToolbar(props) {
|
|
|
149
155
|
|
|
150
156
|
if (!(options.filter === false || options.filter === 'false')) {
|
|
151
157
|
defaultButtons.push({
|
|
152
|
-
icon: /*#__PURE__*/
|
|
158
|
+
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterList.default, {}),
|
|
153
159
|
title: filterTable,
|
|
154
160
|
|
|
161
|
+
// eslint-disable-next-line react/no-unstable-nested-components
|
|
155
162
|
popRender() {
|
|
156
|
-
return /*#__PURE__*/
|
|
163
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableFilterComponent, {
|
|
157
164
|
customFooter: options.customFilterDialogFooter,
|
|
158
165
|
columns: columns,
|
|
159
166
|
options: options,
|
|
@@ -188,42 +195,46 @@ function CustomToolbar(props) {
|
|
|
188
195
|
} = e; // When popRender is present, clicking the button will bubble up the content returned by the popRender
|
|
189
196
|
|
|
190
197
|
if (popRender) {
|
|
191
|
-
allPops.push( /*#__PURE__*/
|
|
198
|
+
allPops.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
|
|
192
199
|
open: !!allPopsEl[popId],
|
|
193
200
|
anchorEl: () => allPopsEl[popId],
|
|
194
201
|
onClose: () => {
|
|
195
202
|
setAllPopsEl({});
|
|
196
203
|
},
|
|
197
|
-
key: popId,
|
|
198
204
|
anchorOrigin: {
|
|
199
205
|
vertical: 'bottom',
|
|
200
206
|
horizontal: 'right'
|
|
201
|
-
}
|
|
202
|
-
|
|
207
|
+
},
|
|
208
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
209
|
+
children: popRender()
|
|
210
|
+
})
|
|
211
|
+
}, popId));
|
|
203
212
|
}
|
|
204
213
|
|
|
205
|
-
return /*#__PURE__*/
|
|
214
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
|
|
206
215
|
title: e.title,
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
216
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
217
|
+
"data-testid": "".concat(e.title, "-iconButton"),
|
|
218
|
+
id: "btn-".concat(popId),
|
|
219
|
+
"aria-label": e.title,
|
|
220
|
+
onClick: () => {
|
|
221
|
+
if (e.onClick) {
|
|
222
|
+
e.onClick();
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
if (popRender) {
|
|
226
|
+
// On the large screen, the bubble is positioned at the corresponding button
|
|
227
|
+
setAllPopsEl({
|
|
228
|
+
[popId]: document.getElementById("btn-".concat(popId))
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
233
|
+
className: "custom-toolbar-icon",
|
|
234
|
+
children: icon
|
|
235
|
+
})
|
|
236
|
+
})
|
|
237
|
+
}, popId);
|
|
227
238
|
}
|
|
228
239
|
|
|
229
240
|
return e;
|
|
@@ -239,11 +250,16 @@ function CustomToolbar(props) {
|
|
|
239
250
|
const {
|
|
240
251
|
icon
|
|
241
252
|
} = e;
|
|
242
|
-
content = /*#__PURE__*/
|
|
253
|
+
content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
254
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
|
|
255
|
+
children: icon
|
|
256
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
|
|
257
|
+
children: e.title
|
|
258
|
+
})]
|
|
259
|
+
});
|
|
243
260
|
}
|
|
244
261
|
|
|
245
|
-
return /*#__PURE__*/
|
|
246
|
-
key: popId,
|
|
262
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
|
|
247
263
|
onClick: () => {
|
|
248
264
|
setMenuIconEl(null);
|
|
249
265
|
|
|
@@ -257,66 +273,91 @@ function CustomToolbar(props) {
|
|
|
257
273
|
[popId]: moreBtn.current
|
|
258
274
|
});
|
|
259
275
|
}
|
|
260
|
-
}
|
|
261
|
-
|
|
276
|
+
},
|
|
277
|
+
children: content
|
|
278
|
+
}, popId);
|
|
279
|
+
});
|
|
280
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
281
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
282
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
283
|
+
className: "custom-toobar-title ".concat(isMobile && searchOpened && /*#__PURE__*/(0, _react.isValidElement)(title) ? 'toobar-title-hidden' : ''),
|
|
284
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
285
|
+
className: "custom-toobar-title-inner",
|
|
286
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
287
|
+
children: title
|
|
288
|
+
})
|
|
289
|
+
})
|
|
290
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
291
|
+
className: "custom-toobar-btns ".concat(loading || disabled ? 'toobar-btns-disabled' : ''),
|
|
292
|
+
children: [!hideSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableSearch.default, {
|
|
293
|
+
search: search,
|
|
294
|
+
options: options,
|
|
295
|
+
searchText: searchText,
|
|
296
|
+
searchTextUpdate: searchTextUpdate,
|
|
297
|
+
searchClose: searchClose,
|
|
298
|
+
onSearchOpen: setSearchOpened
|
|
299
|
+
}), !showMore && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
300
|
+
children: [!hidePrint && printArea(_ref => {
|
|
301
|
+
let {
|
|
302
|
+
handlePrint
|
|
303
|
+
} = _ref;
|
|
304
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
305
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
|
|
306
|
+
title: print,
|
|
307
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
308
|
+
"data-testid": "".concat(print, "-iconButton"),
|
|
309
|
+
"aria-label": print,
|
|
310
|
+
disabled: options.print === 'disabled',
|
|
311
|
+
onClick: handlePrint,
|
|
312
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Print.default, {})
|
|
313
|
+
})
|
|
314
|
+
})
|
|
315
|
+
});
|
|
316
|
+
}), toolbarButtons]
|
|
317
|
+
}), showMore && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
318
|
+
ref: moreBtn,
|
|
319
|
+
"aria-haspopup": "true",
|
|
320
|
+
"aria-expanded": menuIconEl ? 'true' : undefined,
|
|
321
|
+
onClick: event => setMenuIconEl(event.currentTarget),
|
|
322
|
+
style: {
|
|
323
|
+
flexShrink: 0
|
|
324
|
+
},
|
|
325
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
|
|
326
|
+
})]
|
|
327
|
+
}), customToolbarEle]
|
|
328
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
|
|
329
|
+
anchorEl: menuIconEl,
|
|
330
|
+
open: !!menuIconEl,
|
|
331
|
+
onClose: () => setMenuIconEl(null),
|
|
332
|
+
MenuListProps: {
|
|
333
|
+
'aria-labelledby': 'more-button'
|
|
334
|
+
},
|
|
335
|
+
children: [!hidePrint && printArea(_ref2 => {
|
|
336
|
+
let {
|
|
337
|
+
handlePrint
|
|
338
|
+
} = _ref2;
|
|
339
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
|
|
340
|
+
onClick: () => {
|
|
341
|
+
setMenuIconEl(null);
|
|
342
|
+
handlePrint();
|
|
343
|
+
},
|
|
344
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
|
|
345
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Print.default, {
|
|
346
|
+
fontSize: "small"
|
|
347
|
+
})
|
|
348
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
|
|
349
|
+
children: print
|
|
350
|
+
})]
|
|
351
|
+
});
|
|
352
|
+
}), menuItems]
|
|
353
|
+
}), allPops.map((e, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
354
|
+
children: e
|
|
355
|
+
}, getPopId(index))), /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
|
|
356
|
+
children: loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
|
|
357
|
+
className: "toolbar-progress"
|
|
358
|
+
})
|
|
359
|
+
})]
|
|
262
360
|
});
|
|
263
|
-
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
264
|
-
className: "custom-toobar-title ".concat(isMobile && searchOpened && /*#__PURE__*/(0, _react.isValidElement)(title) ? 'toobar-title-hidden' : '')
|
|
265
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
266
|
-
className: "custom-toobar-title-inner"
|
|
267
|
-
}, /*#__PURE__*/_react.default.createElement("span", null, title))), /*#__PURE__*/_react.default.createElement("div", {
|
|
268
|
-
className: "custom-toobar-btns ".concat(loading || disabled ? 'toobar-btns-disabled' : '')
|
|
269
|
-
}, !hideSearch && /*#__PURE__*/_react.default.createElement(_TableSearch.default, {
|
|
270
|
-
search: search,
|
|
271
|
-
options: options,
|
|
272
|
-
searchText: searchText,
|
|
273
|
-
searchTextUpdate: searchTextUpdate,
|
|
274
|
-
searchClose: searchClose,
|
|
275
|
-
onSearchOpen: setSearchOpened
|
|
276
|
-
}), !showMore && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hidePrint && printArea(_ref => {
|
|
277
|
-
let {
|
|
278
|
-
handlePrint
|
|
279
|
-
} = _ref;
|
|
280
|
-
return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
|
|
281
|
-
title: print
|
|
282
|
-
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
283
|
-
"data-testid": "".concat(print, "-iconButton"),
|
|
284
|
-
"aria-label": print,
|
|
285
|
-
disabled: options.print === 'disabled',
|
|
286
|
-
onClick: handlePrint
|
|
287
|
-
}, /*#__PURE__*/_react.default.createElement(_Print.default, null))));
|
|
288
|
-
}), toolbarButtons), showMore && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
289
|
-
ref: moreBtn,
|
|
290
|
-
"aria-haspopup": "true",
|
|
291
|
-
"aria-expanded": menuIconEl ? 'true' : undefined,
|
|
292
|
-
onClick: event => setMenuIconEl(event.currentTarget),
|
|
293
|
-
style: {
|
|
294
|
-
flexShrink: 0
|
|
295
|
-
}
|
|
296
|
-
}, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null))), customToolbarEle), /*#__PURE__*/_react.default.createElement(_Menu.default, {
|
|
297
|
-
anchorEl: menuIconEl,
|
|
298
|
-
open: !!menuIconEl,
|
|
299
|
-
onClose: () => setMenuIconEl(null),
|
|
300
|
-
MenuListProps: {
|
|
301
|
-
'aria-labelledby': 'more-button'
|
|
302
|
-
}
|
|
303
|
-
}, !hidePrint && printArea(_ref2 => {
|
|
304
|
-
let {
|
|
305
|
-
handlePrint
|
|
306
|
-
} = _ref2;
|
|
307
|
-
return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
|
|
308
|
-
onClick: () => {
|
|
309
|
-
setMenuIconEl(null);
|
|
310
|
-
handlePrint();
|
|
311
|
-
}
|
|
312
|
-
}, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Print.default, {
|
|
313
|
-
fontSize: "small"
|
|
314
|
-
})), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, print));
|
|
315
|
-
}), menuItems), allPops.map((e, index) => /*#__PURE__*/_react.default.createElement("div", {
|
|
316
|
-
key: getPopId(index)
|
|
317
|
-
}, e)), /*#__PURE__*/_react.default.createElement(ProgressContainer, null, loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, {
|
|
318
|
-
className: "toolbar-progress"
|
|
319
|
-
})));
|
|
320
361
|
}
|
|
321
362
|
|
|
322
363
|
CustomToolbar.propTypes = {
|
|
@@ -3,21 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DatatableProvide =
|
|
6
|
+
exports.DatatableProvide = DatatableProvide;
|
|
7
7
|
exports.useDatatableContext = useDatatableContext;
|
|
8
8
|
|
|
9
|
-
var _react =
|
|
10
|
-
|
|
11
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
9
|
+
var _react = require("react");
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
12
|
|
|
15
13
|
const DatatableContext = /*#__PURE__*/(0, _react.createContext)({});
|
|
16
14
|
const {
|
|
17
15
|
Provider
|
|
18
16
|
} = DatatableContext; // eslint-disable-next-line react/prop-types
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
function DatatableProvide(_ref) {
|
|
21
19
|
let {
|
|
22
20
|
children
|
|
23
21
|
} = _ref;
|
|
@@ -35,12 +33,11 @@ const DatatableProvide = _ref => {
|
|
|
35
33
|
disabled,
|
|
36
34
|
setDisabled
|
|
37
35
|
};
|
|
38
|
-
return /*#__PURE__*/
|
|
39
|
-
value: value
|
|
40
|
-
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
exports.DatatableProvide = DatatableProvide;
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
|
|
37
|
+
value: value,
|
|
38
|
+
children: children
|
|
39
|
+
});
|
|
40
|
+
}
|
|
44
41
|
|
|
45
42
|
function useDatatableContext() {
|
|
46
43
|
return (0, _react.useContext)(DatatableContext);
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = TableSearch;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = require("react");
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -21,11 +21,11 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
|
|
|
21
21
|
|
|
22
22
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
var _DatatableContext = require("./DatatableContext");
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
27
|
|
|
28
|
-
function
|
|
28
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
29
|
|
|
30
30
|
function TableSearch(_ref) {
|
|
31
31
|
let {
|
|
@@ -39,6 +39,9 @@ function TableSearch(_ref) {
|
|
|
39
39
|
const [inputMode, setInputMode] = (0, _react.useState)(false);
|
|
40
40
|
const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
|
|
41
41
|
const inputTimer = (0, _react.useRef)(null);
|
|
42
|
+
const {
|
|
43
|
+
loading
|
|
44
|
+
} = (0, _DatatableContext.useDatatableContext)();
|
|
42
45
|
const searchDebounceTime = options.serverSide && options.searchDebounceTime;
|
|
43
46
|
|
|
44
47
|
const clickSearchIcon = () => {
|
|
@@ -65,32 +68,46 @@ function TableSearch(_ref) {
|
|
|
65
68
|
const clickClose = () => {
|
|
66
69
|
setInputMode(false);
|
|
67
70
|
searchClose();
|
|
71
|
+
setInnerSearchText('');
|
|
68
72
|
onSearchOpen(false);
|
|
69
73
|
};
|
|
70
74
|
|
|
71
|
-
return /*#__PURE__*/
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
75
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
76
|
+
children: [inputMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
77
|
+
className: "toolbar-search-icon-placeholder",
|
|
78
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
|
|
79
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
|
|
80
|
+
title: search,
|
|
81
|
+
disableFocusListener: true,
|
|
82
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
83
|
+
"aria-label": search,
|
|
84
|
+
"data-testid": "".concat(search, "-iconButton"),
|
|
85
|
+
disabled: options.search === 'disabled',
|
|
86
|
+
onClick: clickSearchIcon,
|
|
87
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
|
|
88
|
+
})
|
|
89
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
90
|
+
className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : ''),
|
|
91
|
+
children: [inputMode && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
|
|
92
|
+
variant: "standard",
|
|
93
|
+
spacing: 2,
|
|
94
|
+
onChange: onChange,
|
|
95
|
+
value: searchDebounceTime ? innerSearchText : searchText || '',
|
|
96
|
+
autoFocus: true
|
|
97
|
+
}), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
|
|
98
|
+
disabled: true,
|
|
99
|
+
variant: "standard",
|
|
100
|
+
spacing: 2,
|
|
101
|
+
value: searchDebounceTime ? innerSearchText : searchText || ''
|
|
102
|
+
})]
|
|
103
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
104
|
+
className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : ''),
|
|
105
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
106
|
+
onClick: clickClose,
|
|
107
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {})
|
|
108
|
+
})
|
|
109
|
+
})]
|
|
110
|
+
});
|
|
94
111
|
}
|
|
95
112
|
|
|
96
113
|
TableSearch.propTypes = {
|
package/lib/Datatable/index.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = Datatable;
|
|
7
7
|
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = require("react");
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -23,27 +23,31 @@ var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
|
|
|
23
23
|
|
|
24
24
|
var _DatatableContext = require("./DatatableContext");
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped"];
|
|
29
29
|
|
|
30
30
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
31
|
|
|
32
32
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
33
|
|
|
34
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
|
+
|
|
36
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
37
|
+
|
|
38
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
39
|
+
|
|
34
40
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
41
|
|
|
36
42
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
43
|
|
|
38
44
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
39
45
|
|
|
40
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
41
|
-
|
|
42
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
43
|
-
|
|
44
46
|
function Datatable(_ref) {
|
|
45
47
|
let props = Object.assign({}, _ref);
|
|
46
|
-
return /*#__PURE__*/
|
|
48
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvide, {
|
|
49
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
|
|
50
|
+
});
|
|
47
51
|
}
|
|
48
52
|
/**
|
|
49
53
|
* @param {Object} props.options The options of mui-datatable,detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
|
|
@@ -142,7 +146,9 @@ function ReDatatable(_ref2) {
|
|
|
142
146
|
(0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
|
|
143
147
|
let textLabels = {
|
|
144
148
|
body: {
|
|
145
|
-
noMatch: /*#__PURE__*/
|
|
149
|
+
noMatch: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
|
|
150
|
+
children: "Sorry, no matching records found"
|
|
151
|
+
}),
|
|
146
152
|
toolTip: 'Sort'
|
|
147
153
|
},
|
|
148
154
|
pagination: {
|
|
@@ -178,7 +184,9 @@ function ReDatatable(_ref2) {
|
|
|
178
184
|
if (locale === 'zh') {
|
|
179
185
|
textLabels = {
|
|
180
186
|
body: {
|
|
181
|
-
noMatch: /*#__PURE__*/
|
|
187
|
+
noMatch: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
|
|
188
|
+
children: "\u5BF9\u4E0D\u8D77\uFF0C\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
|
|
189
|
+
}),
|
|
182
190
|
toolTip: '排序'
|
|
183
191
|
},
|
|
184
192
|
pagination: {
|
|
@@ -284,14 +292,15 @@ function ReDatatable(_ref2) {
|
|
|
284
292
|
onChange: '',
|
|
285
293
|
stripped: false
|
|
286
294
|
};
|
|
287
|
-
return /*#__PURE__*/
|
|
295
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContainer, {
|
|
288
296
|
ref: container,
|
|
289
297
|
className: stripped ? 'datatable-stripped' : '',
|
|
290
|
-
style: style
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
298
|
+
style: style,
|
|
299
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.default, _objectSpread({
|
|
300
|
+
data: data,
|
|
301
|
+
columns: columns
|
|
302
|
+
}, props))
|
|
303
|
+
});
|
|
295
304
|
}
|
|
296
305
|
|
|
297
306
|
const TableContainer = _styledComponents.default.div.withConfig({
|
|
@@ -304,22 +313,26 @@ const FilterLine = _styledComponents.default.div.withConfig({
|
|
|
304
313
|
componentId: "sc-1ju12vq-1"
|
|
305
314
|
})(["display:flex;align-items:center;.toolbar-filter-content{margin-bottom:8px;}.toolbar-filter-title{font-weight:700;font-size:14px;}"]);
|
|
306
315
|
|
|
307
|
-
|
|
316
|
+
function WrapFilterList(props) {
|
|
308
317
|
const {
|
|
309
318
|
filterLabel
|
|
310
319
|
} = (0, _DatatableContext.useDatatableContext)();
|
|
311
320
|
const hasFilter = !!props.filterList.filter(e => e.length).length;
|
|
312
321
|
|
|
313
322
|
if (hasFilter) {
|
|
314
|
-
return /*#__PURE__*/
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
323
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterLine, {
|
|
324
|
+
children: [hasFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
325
|
+
className: "toolbar-filter-title",
|
|
326
|
+
children: filterLabel
|
|
327
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
328
|
+
className: "toolbar-filter-content",
|
|
329
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.TableFilterList, _objectSpread({}, props))
|
|
330
|
+
})]
|
|
331
|
+
});
|
|
319
332
|
}
|
|
320
333
|
|
|
321
334
|
return '';
|
|
322
|
-
}
|
|
335
|
+
}
|
|
323
336
|
|
|
324
337
|
WrapFilterList.propTypes = {
|
|
325
338
|
filterList: _propTypes.default.array
|
|
@@ -328,15 +341,18 @@ WrapFilterList.defaultProps = {
|
|
|
328
341
|
filterList: []
|
|
329
342
|
};
|
|
330
343
|
|
|
331
|
-
|
|
344
|
+
function WrapTableFooter(props) {
|
|
332
345
|
const {
|
|
333
346
|
loading,
|
|
334
347
|
disabled
|
|
335
348
|
} = (0, _DatatableContext.useDatatableContext)();
|
|
336
|
-
return /*#__PURE__*/
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
}
|
|
349
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterContainer, {
|
|
350
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
351
|
+
className: "datatable-footer ".concat(loading || disabled ? 'datatable-footer-disabled' : ''),
|
|
352
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.TableFooter, _objectSpread({}, props))
|
|
353
|
+
})
|
|
354
|
+
});
|
|
355
|
+
}
|
|
340
356
|
|
|
341
357
|
const FooterContainer = _styledComponents.default.div.withConfig({
|
|
342
358
|
displayName: "Datatable__FooterContainer",
|