mig-schema-table 3.0.52 → 3.0.54

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.
@@ -15,7 +15,7 @@ interface ITdProps<T> {
15
15
  onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
16
16
  propConfig?: IColumnConfig<any>;
17
17
  propName: string;
18
- propSchema: oas31.SchemaObject;
18
+ propSchema?: oas31.SchemaObject;
19
19
  sortedRenderData?: IRenderData[];
20
20
  style: React.CSSProperties;
21
21
  }
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import React from "react";
3
3
  import { SELECT_ALL_COLUMN_NAME } from "../constants";
4
4
  import { localeFormatInTimeZone, timeZone } from "../../inc/date";
5
- import { DEFAULT_DATE_TIME_FORMAT } from "../../inc/constant";
5
+ import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
6
6
  import { t } from "../../inc/string";
7
7
  function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
8
8
  const onTdClick = React.useCallback((e) => {
@@ -33,7 +33,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
33
33
  return undefined;
34
34
  }
35
35
  let title = propName === SELECT_ALL_COLUMN_NAME ? null : row[propName];
36
- if (propSchema.format &&
36
+ if ((propSchema === null || propSchema === void 0 ? void 0 : propSchema.format) &&
37
37
  propSchema.format.startsWith("date") &&
38
38
  (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
39
39
  // @ts-ignore
@@ -43,7 +43,9 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
43
43
  ? "Asia/Jakarta"
44
44
  : "Europe/Amsterdam";
45
45
  if (date) {
46
- title = `${localeFormatInTimeZone(date, alternativeTimeZone, DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
46
+ title = `${localeFormatInTimeZone(date, alternativeTimeZone, propSchema.format === "date"
47
+ ? DEFAULT_DATE_FORMAT
48
+ : DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
47
49
  }
48
50
  }
49
51
  return {
@@ -70,7 +72,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
70
72
  propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
71
73
  propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones,
72
74
  propName,
73
- propSchema.format,
75
+ propSchema === null || propSchema === void 0 ? void 0 : propSchema.format,
74
76
  row,
75
77
  rowHeight,
76
78
  rowIndex,
@@ -92,11 +94,11 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
92
94
  };
93
95
  return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index), disabled: disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(row._index) }) })) })));
94
96
  }
95
- if (!propSchema) {
97
+ if (!propSchema && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
96
98
  return null;
97
99
  }
98
100
  const propValue = row[propName];
99
- switch (propSchema.type) {
101
+ switch (propSchema === null || propSchema === void 0 ? void 0 : propSchema.type) {
100
102
  case "boolean":
101
103
  tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
102
104
  break;
@@ -108,7 +110,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
108
110
  if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
109
111
  tdDivProps.className += ` text-${propConfig.align}`;
110
112
  }
111
- if (propSchema.format === "url" && propValue) {
113
+ if ((propSchema === null || propSchema === void 0 ? void 0 : propSchema.format) === "url" && propValue) {
112
114
  return (
113
115
  // @ts-ignore
114
116
  _jsx("a", Object.assign({ href: propValue, target: "_blank", rel: "noopener noreferrer" }, tdDivProps, { children: propValue })));
@@ -16,7 +16,7 @@ interface IThProps {
16
16
  onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
17
17
  propConfig?: IColumnConfig<any>;
18
18
  propName: string;
19
- schema: oas31.SchemaObject;
19
+ schema?: oas31.SchemaObject;
20
20
  setPopoverConfig?: Dispatch<SetStateAction<ISchemaColumnFilterPopoverConfig | undefined>>;
21
21
  setSortAsc: Dispatch<SetStateAction<boolean>>;
22
22
  setSortColumn: Dispatch<SetStateAction<string>>;
@@ -59,23 +59,23 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
59
59
  if ((propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) !== undefined) {
60
60
  return propConfig.title;
61
61
  }
62
- if (schema.format &&
62
+ if ((schema === null || schema === void 0 ? void 0 : schema.format) &&
63
63
  schema.format.startsWith("date") &&
64
64
  (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
65
65
  return `${uncamel(propName)} (${t(timeZone)})`;
66
66
  }
67
67
  return uncamel(propName);
68
- }, [propConfig, propName, schema.format]);
68
+ }, [propConfig, propName, schema === null || schema === void 0 ? void 0 : schema.format]);
69
69
  if (propName === SELECT_ALL_COLUMN_NAME) {
70
70
  return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
71
71
  width: "100%",
72
72
  textAlign: "center",
73
73
  }, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
74
74
  }
75
- if (!schema) {
75
+ if (!schema && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
76
76
  return _jsx("div", Object.assign({}, thDivProps));
77
77
  }
78
- switch (schema.type) {
78
+ switch (schema === null || schema === void 0 ? void 0 : schema.type) {
79
79
  case "boolean":
80
80
  thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
81
81
  break;
@@ -9,6 +9,9 @@ export interface IGetDataProps {
9
9
  sortColumn?: string;
10
10
  sortAsc: boolean;
11
11
  }
12
+ interface IColumnFilterMap {
13
+ [propName: string]: TColumnFilterValue;
14
+ }
12
15
  export interface ISchemaTableProps<T> {
13
16
  Heading?: any;
14
17
  checkedIndexes?: number[];
@@ -18,6 +21,7 @@ export interface ISchemaTableProps<T> {
18
21
  };
19
22
  customElement?: React.ReactNode;
20
23
  data: T[] | ((getDataProps: IGetDataProps) => Promise<T[]>);
24
+ defaultColumnFilters?: IColumnFilterMap;
21
25
  defaultSortAsc?: boolean;
22
26
  defaultSortColumn?: keyof T;
23
27
  getRowClassName?: (rowData: T, dataIndex: number, filteredSortedData: IRenderData[]) => string;
@@ -40,6 +44,6 @@ export type TColumnFilterValue = string | number | boolean | {
40
44
  from?: Date;
41
45
  to?: Date;
42
46
  };
43
- declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
47
+ declare function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
44
48
  declare const _default: typeof SchemaTable;
45
49
  export default _default;
@@ -9,11 +9,11 @@ import Td from "./Td";
9
9
  import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
10
10
  import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
11
11
  const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
12
- function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }) {
12
+ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, onRowDoubleClick, enableAutoFocus, }) {
13
13
  const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
14
14
  const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
15
15
  const [searchQuery, setSearchQuery] = React.useState("");
16
- const [columnFilterMap, setColumnFilterMap] = React.useState({});
16
+ const [columnFilterMap, setColumnFilterMap] = React.useState(defaultColumnFilters);
17
17
  const [popoverConfig, setPopoverConfig] = React.useState();
18
18
  const isDataFunction = data instanceof Function;
19
19
  const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
@@ -52,6 +52,11 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheck
52
52
  if (!config) {
53
53
  return columns;
54
54
  }
55
+ Object.keys(config).forEach((configKey) => {
56
+ if (!columns.includes(configKey)) {
57
+ columns.push(configKey);
58
+ }
59
+ });
55
60
  const invisibleColumns = Object.entries(config).reduce((prev, [propName, propConfig]) => {
56
61
  if (propConfig.hidden) {
57
62
  prev.push(propName);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mig-schema-table",
3
- "version": "3.0.52",
3
+ "version": "3.0.54",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist/"