@monolith-forensics/monolith-ui 1.2.60 → 1.2.61

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 (5) hide show
  1. package/dist/QueryFilter/QueryFilter.js +36 -36
  2. package/dist/QueryFilter/types.d.ts +1 -1
  3. package/dist/Table/TableMenu/TableMenu.js +2 -2
  4. package/dist/Table/TableProvider.js +23 -21
  5. package/package.json +1 -1
package/dist/QueryFilter/QueryFilter.js CHANGED
@@ -10,7 +10,7 @@ import { useDebouncedCallback } from "use-debounce";
10
10
  const StyledContainer = styled.div `
11
11
  display: flex;
12
12
  flex-direction: row;
13
- gap: 1.5px;
13
+ gap: 2px;
14
14
  `;
15
15
  const RuleContainer = styled(StyledContainer) `
16
16
  // first child
@@ -37,7 +37,7 @@ const FilterContainer = styled(StyledContainer) `
37
37
  `;
38
38
  const StyledButton = styled(Button) `
39
39
  border-radius: 0;
40
- font-size: 11px;
40
+ font-size: 12px;
41
41
  height: 20px;
42
42
 
43
43
  padding: 3px 5px;
@@ -58,11 +58,11 @@ const BaseLabel = styled.div `
58
58
 
59
59
  background-color: ${({ theme }) => theme.palette.background.secondary};
60
60
 
61
- font-size: 11px;
61
+ font-size: 12px;
62
62
 
63
63
  height: 20px;
64
64
 
65
- padding: 2px 4px;
65
+ padding: 3px 5px;
66
66
 
67
67
  overflow: hidden;
68
68
  white-space: nowrap;
@@ -81,8 +81,8 @@ const StyledInput = styled(Input) `
81
81
  min-height: 20px;
82
82
  width: 100px;
83
83
  border-radius: 0;
84
- font-size: 11px;
85
- padding: 2px 4px;
84
+ font-size: 12px;
85
+ padding: 3px 5px;
86
86
 
87
87
  border-color: transparent;
88
88
  background-color: ${({ theme }) => theme.palette.background.secondary};
@@ -93,37 +93,42 @@ const StyledInput = styled(Input) `
93
93
  `;
94
94
  const StyledDateInput = styled(DateInput) `
95
95
  height: 20px;
96
- // width: 100px;
97
- font-size: 11px;
96
+ font-size: 12px;
98
97
  border-radius: 0;
99
98
  border-color: transparent;
100
99
  background-color: ${({ theme }) => theme.palette.background.secondary};
100
+
101
+ cursor: pointer;
102
+
103
+ &:hover {
104
+ border-color: ${({ theme }) => theme.palette.primary.main};
105
+ }
101
106
  `;
102
107
  const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
103
- var _a, _b, _c;
108
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
104
109
  const theme = useTheme();
105
110
  const handleInputChange = useDebouncedCallback((e) => {
106
111
  const value = e.target.value;
107
- onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value }));
112
+ onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: value ? [value] : undefined }));
108
113
  }, 250);
109
114
  const handleMultiSelectChange = useDebouncedCallback((selected) => {
110
115
  onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: selected.map((s) => s.value) }));
111
116
  }, 100);
112
117
  const handleTimestampChange = useDebouncedCallback((timestamp) => {
113
- onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: timestamp }));
118
+ onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: timestamp ? [timestamp] : undefined }));
114
119
  }, 100);
115
120
  switch (inputType) {
116
121
  case "text":
117
- return (_jsx(StyledInput, { placeholder: "Enter Value...", defaultValue: rule.value, onChange: handleInputChange }));
122
+ return (_jsx(StyledInput, { placeholder: "Enter Value...", defaultValue: (_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0], onChange: handleInputChange }));
118
123
  case "number":
119
- return (_jsx(StyledInput, { type: "number", placeholder: "Enter Value...", defaultValue: rule.value, onChange: handleInputChange }));
124
+ return (_jsx(StyledInput, { type: "number", placeholder: "Enter Value...", defaultValue: (_b = rule === null || rule === void 0 ? void 0 : rule.value) === null || _b === void 0 ? void 0 : _b[0], onChange: handleInputChange }));
120
125
  case "date":
121
- return (_jsx(StyledDateInput, { arrow: true, enableCalendar: true, format: "YYYY-MM-DD", defaultValue: rule.value, onChange: handleTimestampChange }));
126
+ return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: "YYYY-MM-DD", defaultValue: ((_c = rule.value) === null || _c === void 0 ? void 0 : _c[0]) === "" ? undefined : (_d = rule.value) === null || _d === void 0 ? void 0 : _d[0], onChange: handleTimestampChange }));
122
127
  case "datetime":
123
- return (_jsx(StyledDateInput, { arrow: true, enableCalendar: true, format: "YYYY-MM-DD HH:mm:ss", defaultValue: rule.value, onChange: handleTimestampChange }));
128
+ return (_jsx(StyledDateInput, { arrow: false, enableCalendar: true, format: "YYYY-MM-DD HH:mm:ss", defaultValue: ((_e = rule.value) === null || _e === void 0 ? void 0 : _e[0]) === "" ? undefined : (_f = rule.value) === null || _f === void 0 ? void 0 : _f[0], onChange: handleTimestampChange }));
124
129
  case "multiselect":
125
130
  let display = Array.isArray(rule.value) && rule.value.length > 0
126
- ? ((_b = (_a = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _a === void 0 ? void 0 : _a.filter((o) => rule.value.includes(o.value))) === null || _b === void 0 ? void 0 : _b.map((o) => o.label).join(", ")) || "Select Value"
131
+ ? ((_h = (_g = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _g === void 0 ? void 0 : _g.filter((o) => rule.value.includes(o.value))) === null || _h === void 0 ? void 0 : _h.map((o) => o.label).join(", ")) || "Select Value"
127
132
  : "Select Value";
128
133
  if (Array.isArray(rule.value) && rule.value.length > 1) {
129
134
  display = `${rule.value.length} ${(filterDef === null || filterDef === void 0 ? void 0 : filterDef.pluralLabel) || "Values"}`;
@@ -148,19 +153,20 @@ const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
148
153
  },
149
154
  }, dropDownProps: {
150
155
  style: { width: 175, maxWidth: 400 },
151
- }, defaultValue: (_c = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _c === void 0 ? void 0 : _c.filter((o) => Array.isArray(rule.value) &&
156
+ }, defaultValue: (_j = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _j === void 0 ? void 0 : _j.filter((o) => Array.isArray(rule.value) &&
152
157
  !!rule.value.find((v) => v == o.value)), onChange: handleMultiSelectChange, children: display }));
153
158
  default:
154
159
  return (_jsx(StyledInput, { placeholder: "Enter Value...", onChange: handleInputChange }));
155
160
  }
156
161
  };
157
- const ValueSelector = ({ rule, inputType, filterDef, onChange, }) => {
162
+ const ValueSelector = ({ rule, inputType, filterDef, onChange }) => {
163
+ var _a;
158
164
  const isBetween = rule.operator.value.toLowerCase().includes("between");
159
165
  const handleValueChange = (e) => {
160
166
  const currentValue = rule.value;
161
167
  if (isBetween) {
162
- const newValue = [e.value];
163
- if (Array.isArray(currentValue) && currentValue.length === 2) {
168
+ const newValue = (e === null || e === void 0 ? void 0 : e.value) || [""];
169
+ if (currentValue === null || currentValue === void 0 ? void 0 : currentValue[1]) {
164
170
  newValue.push(currentValue[1]);
165
171
  }
166
172
  onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: newValue }));
@@ -169,19 +175,10 @@ const ValueSelector = ({ rule, inputType, filterDef, onChange, }) => {
169
175
  onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: e.value }));
170
176
  };
171
177
  const handleSecondaryValueChange = (e) => {
172
- const currentValue = rule.value;
173
- if (isBetween) {
174
- // current value already an array?
175
- if (Array.isArray(currentValue)) {
176
- onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [currentValue[0], e.value] }));
177
- return;
178
- }
179
- const newValue = [currentValue, e.value];
180
- onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: newValue }));
181
- }
182
- return;
178
+ var _a, _b;
179
+ onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[0]) || "", ((_b = e.value) === null || _b === void 0 ? void 0 : _b[0]) || ""] }));
183
180
  };
184
- return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: rule, inputType: inputType, onChange: handleSecondaryValueChange })] }))] }));
181
+ return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: Object.assign(Object.assign({}, rule), { value: [((_a = rule === null || rule === void 0 ? void 0 : rule.value) === null || _a === void 0 ? void 0 : _a[1]) || ""] }), inputType: inputType, onChange: handleSecondaryValueChange })] }))] }));
185
182
  };
186
183
  const CloseLabel = styled(StyledButton) `
187
184
  padding: 2px;
@@ -193,25 +190,28 @@ const CloseLabel = styled(StyledButton) `
193
190
  }
194
191
  `;
195
192
  const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, }) => {
193
+ const handleOperatorChange = (rule, operator) => {
194
+ onUpdate(Object.assign(Object.assign({}, rule), { operator }));
195
+ };
196
196
  return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(FieldLabel, { children: combinator.toUpperCase() })), rules.map((rule, index) => {
197
197
  const filterDef = filterDefinitions.find((f) => f.dataField === rule.dataField);
198
198
  const operatorOptions = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.operators) || DefaultOperators;
199
199
  const inputType = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.inputType) || "text";
200
200
  return (_jsxs(RuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions,
201
201
  // arrow={true}
202
- buttonProps: {
202
+ size: "sm", buttonProps: {
203
203
  title: "Select Operator",
204
204
  variant: "contained",
205
- size: "xxs",
206
205
  style: {
207
206
  fontWeight: "normal",
207
+ fontSize: 12,
208
208
  padding: "3px 5px",
209
209
  height: 20,
210
210
  borderRadius: 0,
211
211
  },
212
- }, onItemSelect: (e) => onUpdate(Object.assign(Object.assign({}, rule), { operator: e })), dropDownProps: {
212
+ }, onItemSelect: (e) => handleOperatorChange(rule, e), dropDownProps: {
213
213
  style: { width: 175, maxWidth: 400 },
214
- }, children: rule.operator.label }), _jsx(ValueSelector, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: onUpdate }), _jsx(CloseLabel, { variant: "contained", size: "xxs", onClick: () => onDelete(rule), children: _jsx(XIcon, { size: 16 }) })] }, rule.id));
214
+ }, children: rule.operator.label }), _jsx(ValueSelector, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: onUpdate }), _jsx(CloseLabel, { variant: "contained", onClick: () => onDelete(rule), children: _jsx(XIcon, { size: 16 }) })] }, rule.id));
215
215
  })] }));
216
216
  };
217
217
  export const QueryFilter = ({ queryFilter, }) => {
package/dist/QueryFilter/types.d.ts CHANGED
@@ -39,7 +39,7 @@ export interface FilterDefinition {
39
39
  export interface Rule {
40
40
  id?: string;
41
41
  dataField: string;
42
- value: string | string[] | number | number[];
42
+ value?: string[];
43
43
  operator: Operator;
44
44
  label: string;
45
45
  }
package/dist/Table/TableMenu/TableMenu.js CHANGED
@@ -54,11 +54,11 @@ const TableMenu = () => {
54
54
  id: shortUUID.generate(),
55
55
  dataField: item.value,
56
56
  operator: ((_a = data === null || data === void 0 ? void 0 : data.operators) === null || _a === void 0 ? void 0 : _a[0]) || DefaultOperators[0],
57
- value: "",
57
+ value: undefined,
58
58
  label: item.label,
59
59
  });
60
60
  };
61
- return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _b === void 0 ? void 0 : _b.map((filter) => ({
61
+ return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "sm", data: ((_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _b === void 0 ? void 0 : _b.map((filter) => ({
62
62
  label: filter.label,
63
63
  value: filter.dataField,
64
64
  data: filter,
package/dist/Table/TableProvider.js CHANGED
@@ -170,74 +170,74 @@ const TableProvider = (_a) => {
170
170
  for (const rule of rules) {
171
171
  const column = columnState.find((col) => col.dataField === rule.dataField);
172
172
  const { value, operator, dataField } = rule;
173
- if (!value) {
173
+ if (!value || value.length === 0) {
174
174
  continue;
175
175
  }
176
176
  switch (operator.value) {
177
177
  case "=":
178
178
  processedData = processedData.filter((row) => {
179
179
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
180
- return moment(row[dataField]).isSame(moment(value), "day");
180
+ return moment(row[dataField]).isSame(moment(value[0]), "day");
181
181
  }
182
182
  else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
183
- return moment(row[dataField]).isSame(moment(value));
183
+ return moment(row[dataField]).isSame(moment(value[0]));
184
184
  }
185
- return row[dataField] == value;
185
+ return row[dataField] == value[0];
186
186
  });
187
187
  break;
188
188
  case "!=":
189
189
  processedData = processedData.filter((row) => {
190
190
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
191
- return !moment(row[dataField]).isSame(moment(value), "day");
191
+ return !moment(row[dataField]).isSame(moment(value[0]), "day");
192
192
  }
193
193
  else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
194
- return !moment(row[dataField]).isSame(moment(value));
194
+ return !moment(row[dataField]).isSame(moment(value[0]));
195
195
  }
196
- return row[dataField] != value;
196
+ return row[dataField] != value[0];
197
197
  });
198
198
  break;
199
199
  case ">":
200
200
  processedData = processedData.filter((row) => {
201
201
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
202
- return moment(row[dataField]).isAfter(moment(value), "day");
202
+ return moment(row[dataField]).isAfter(moment(value[0]), "day");
203
203
  }
204
204
  else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
205
- return moment(row[dataField]).isAfter(moment(value));
205
+ return moment(row[dataField]).isAfter(moment(value[0]));
206
206
  }
207
- return row[dataField] > value;
207
+ return row[dataField] > value[0];
208
208
  });
209
209
  break;
210
210
  case "<":
211
211
  processedData = processedData.filter((row) => {
212
212
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
213
- return moment(row[dataField]).isBefore(moment(value), "day");
213
+ return moment(row[dataField]).isBefore(moment(value[0]), "day");
214
214
  }
215
215
  else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
216
- return moment(row[dataField]).isBefore(moment(value));
216
+ return moment(row[dataField]).isBefore(moment(value[0]));
217
217
  }
218
- return row[dataField] < value;
218
+ return row[dataField] < value[0];
219
219
  });
220
220
  break;
221
221
  case ">=":
222
222
  processedData = processedData.filter((row) => {
223
223
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
224
- return moment(row[dataField]).isSameOrAfter(moment(value), "day");
224
+ return moment(row[dataField]).isSameOrAfter(moment(value[0]), "day");
225
225
  }
226
226
  else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
227
- return moment(row[dataField]).isSameOrAfter(moment(value));
227
+ return moment(row[dataField]).isSameOrAfter(moment(value[0]));
228
228
  }
229
- return row[dataField] >= value;
229
+ return row[dataField] >= value[0];
230
230
  });
231
231
  break;
232
232
  case "<=":
233
233
  processedData = processedData.filter((row) => {
234
234
  if ((column === null || column === void 0 ? void 0 : column.dataType) === "date") {
235
- return moment(row[dataField]).isSameOrBefore(moment(value), "day");
235
+ return moment(row[dataField]).isSameOrBefore(moment(value[0]), "day");
236
236
  }
237
237
  else if ((column === null || column === void 0 ? void 0 : column.dataType) === "datetime") {
238
- return moment(row[dataField]).isSameOrBefore(moment(value));
238
+ return moment(row[dataField]).isSameOrBefore(moment(value[0]));
239
239
  }
240
- return row[dataField] <= value;
240
+ return row[dataField] <= value[0];
241
241
  });
242
242
  break;
243
243
  case "between":
@@ -266,16 +266,18 @@ const TableProvider = (_a) => {
266
266
  break;
267
267
  case "contains":
268
268
  processedData = processedData.filter((row) => {
269
+ var _a;
269
270
  return row[dataField]
270
271
  .toLowerCase()
271
- .includes(value.toLowerCase());
272
+ .includes((_a = value[0]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase());
272
273
  });
273
274
  break;
274
275
  case "doesNotContain":
275
276
  processedData = processedData.filter((row) => {
277
+ var _a;
276
278
  return !row[dataField]
277
279
  .toLowerCase()
278
- .includes(value.toLowerCase());
280
+ .includes((_a = value[0]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase());
279
281
  });
280
282
  break;
281
283
  case "in":
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.2.60",
3
+ "version": "1.2.61",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",