mig-schema-table 3.0.39 → 3.0.40

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.
Files changed (3) hide show
  1. package/dist/SchemaTable/index.d.ts +9 -1
  2. package/dist/SchemaTable/index.js +61 -18
  3. package/package.json +1 -1
package/dist/SchemaTable/index.d.ts CHANGED
@@ -1,6 +1,14 @@
1
1
  import React from "react";
2
2
  import { oas31 } from "openapi3-ts";
3
3
  import { IColumnConfig } from "../types";
4
+ interface IGetDataProps {
5
+ searchQuery: string;
6
+ columnFilterMap: {
7
+ [propName: string]: TColumnFilterValue;
8
+ };
9
+ sortColumn?: string;
10
+ sortAsc: boolean;
11
+ }
4
12
  export interface ISchemaTableProps<T> {
5
13
  Heading?: any;
6
14
  checkedIndexes?: number[];
@@ -9,7 +17,7 @@ export interface ISchemaTableProps<T> {
9
17
  [propName: string]: IColumnConfig<T>;
10
18
  };
11
19
  customElement?: React.ReactNode;
12
- data: T[];
20
+ data: T[] | ((getDataProps: IGetDataProps) => Promise<T[]>);
13
21
  defaultSortAsc?: boolean;
14
22
  defaultSortColumn?: keyof T;
15
23
  getRowClassName?: (rowData: T, dataIndex: number) => string;
package/dist/SchemaTable/index.js CHANGED
@@ -15,6 +15,19 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
15
15
  const [searchQuery, setSearchQuery] = React.useState("");
16
16
  const [columnFilterMap, setColumnFilterMap] = React.useState({});
17
17
  const [popoverConfig, setPopoverConfig] = React.useState();
18
+ const [sourceData, setSourceData] = React.useState(Array.isArray(data) ? data : undefined);
19
+ const [isDirty, setIsDirty] = React.useState(false);
20
+ React.useEffect(() => {
21
+ if (sourceData !== undefined || !(data instanceof Function)) {
22
+ return;
23
+ }
24
+ data({
25
+ searchQuery,
26
+ columnFilterMap,
27
+ sortColumn,
28
+ sortAsc,
29
+ }).then(setSourceData);
30
+ }, [columnFilterMap, data, searchQuery, sortAsc, sortColumn, sourceData]);
18
31
  const { properties = {} } = schema;
19
32
  const columnNames = React.useMemo(() => {
20
33
  const columns = Object.keys(properties);
@@ -54,8 +67,8 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
54
67
  return orderA - orderB;
55
68
  });
56
69
  }, [config, onCheckedIndexesChange, properties]);
57
- const renderData = React.useMemo(() => data
58
- ? data.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
70
+ const renderData = React.useMemo(() => sourceData
71
+ ? sourceData.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
59
72
  var _a;
60
73
  const schema = properties[propName];
61
74
  const propConfig = config ? config[propName] : undefined;
@@ -110,7 +123,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
110
123
  return prev;
111
124
  }
112
125
  }, { _index: rowIndex }))
113
- : undefined, [columnNames, config, data, properties]);
126
+ : undefined, [columnNames, config, sourceData, properties]);
114
127
  const columnCount = columnNames.length;
115
128
  const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
116
129
  let fixedWidthColumnsWidth = 0;
@@ -156,7 +169,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
156
169
  ]);
157
170
  const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
158
171
  const filteredRenderData = React.useMemo(() => {
159
- if (!renderData || (!isColumnFilterable && !isSearchable)) {
172
+ if (!renderData ||
173
+ (!isColumnFilterable && !isSearchable) ||
174
+ data instanceof Function) {
160
175
  return renderData;
161
176
  }
162
177
  return renderData.filter((item) => {
@@ -172,7 +187,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
172
187
  }
173
188
  const propSchema = properties[propName];
174
189
  // @ts-ignore
175
- const rawValue = data[item._index][propName];
190
+ const rawValue = sourceData[item._index][propName];
176
191
  switch (propSchema.type) {
177
192
  case "boolean":
178
193
  case "integer":
@@ -205,15 +220,19 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
205
220
  renderData,
206
221
  isColumnFilterable,
207
222
  isSearchable,
223
+ data,
208
224
  searchQuery,
209
225
  columnNames,
210
226
  columnFilterMap,
211
227
  properties,
212
- data,
228
+ sourceData,
213
229
  ]);
214
230
  // Sort the filtered data
215
231
  const sortedRenderData = React.useMemo(() => {
216
- if (!sortColumn || !filteredRenderData) {
232
+ if (!sortColumn ||
233
+ !filteredRenderData ||
234
+ !sourceData ||
235
+ data instanceof Function) {
217
236
  return filteredRenderData;
218
237
  }
219
238
  const sortSchema = properties[sortColumn];
@@ -221,8 +240,8 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
221
240
  const columnSort = propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort;
222
241
  if (columnSort) {
223
242
  return filteredRenderData.sort((a, b) => {
224
- const aData = data[a._index];
225
- const bData = data[b._index];
243
+ const aData = sourceData[a._index];
244
+ const bData = sourceData[b._index];
226
245
  if (!aData) {
227
246
  return 1;
228
247
  }
@@ -242,13 +261,13 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
242
261
  sortSchema.type === "integer" ||
243
262
  (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)
244
263
  : propConfig.sortByValue;
245
- let x = sortByValue && data[a._index]
264
+ let x = sortByValue && sourceData[a._index]
246
265
  ? // @ts-ignore
247
- data[a._index][sortColumn]
266
+ sourceData[a._index][sortColumn]
248
267
  : a[sortColumn].toLowerCase();
249
- let y = sortByValue && data[b._index]
268
+ let y = sortByValue && sourceData[b._index]
250
269
  ? // @ts-ignore
251
- data[b._index][sortColumn]
270
+ sourceData[b._index][sortColumn]
252
271
  : b[sortColumn].toLowerCase();
253
272
  if (sortByValue && isDate) {
254
273
  x = new Date(x);
@@ -265,7 +284,15 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
265
284
  }
266
285
  return (x < y ? 1 : -1) * (sortAsc ? -1 : 1);
267
286
  });
268
- }, [config, data, filteredRenderData, properties, sortAsc, sortColumn]);
287
+ }, [
288
+ sortColumn,
289
+ filteredRenderData,
290
+ sourceData,
291
+ data,
292
+ properties,
293
+ config,
294
+ sortAsc,
295
+ ]);
269
296
  const onSelectAllIndexesHandler = React.useCallback(() => {
270
297
  if (!onCheckedIndexesChange || !filteredRenderData) {
271
298
  return;
@@ -319,12 +346,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
319
346
  const propSchema = (propName === SELECT_ALL_COLUMN_NAME
320
347
  ? { type: "boolean" }
321
348
  : properties[propName]);
322
- return (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
349
+ return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style })) : null;
323
350
  }, [
324
351
  checkedIndexes,
325
352
  columnNames,
326
353
  config,
327
- data,
354
+ sourceData,
328
355
  disabledCheckedIndexes,
329
356
  getRowClassName,
330
357
  getRowSelected,
@@ -335,8 +362,11 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
335
362
  sortedRenderData,
336
363
  ]);
337
364
  const onSearchChange = React.useCallback((e) => {
365
+ if (data instanceof Function) {
366
+ setIsDirty(true);
367
+ }
338
368
  setSearchQuery(e.currentTarget.value);
339
- }, []);
369
+ }, [data]);
340
370
  const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
341
371
  const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
342
372
  const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
@@ -360,6 +390,19 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
360
390
  }
361
391
  setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
362
392
  }, [disableColumnFilter, popoverConfig]);
363
- return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
393
+ const onRefreshDataClick = React.useCallback(() => {
394
+ setIsDirty(false);
395
+ setSourceData(undefined);
396
+ }, []);
397
+ return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`)) : (_jsx("div", Object.assign({ style: {
398
+ width: rowWidth,
399
+ height: Math.max(50, tableBodyHeight),
400
+ border: "1px solid #BBB",
401
+ textAlign: "center",
402
+ display: "flex",
403
+ backgroundColor: "#CCC",
404
+ alignItems: "center",
405
+ justifyContent: "center",
406
+ } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: onRefreshDataClick, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
364
407
  }
365
408
  export default React.memo(SchemaTable);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mig-schema-table",
3
- "version": "3.0.39",
3
+ "version": "3.0.40",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist/"