@etsoo/materialui 1.1.26 → 1.1.27

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 (7) hide show
  1. package/lib/ComboBox.d.ts +2 -2
  2. package/lib/ComboBox.js +19 -16
  3. package/lib/Tiplist.d.ts +3 -3
  4. package/lib/Tiplist.js +19 -20
  5. package/package.json +6 -6
  6. package/src/ComboBox.tsx +267 -260
  7. package/src/Tiplist.tsx +267 -264
package/lib/ComboBox.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
3
- import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
2
+ import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
3
+ import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
4
4
  /**
5
5
  * ComboBox props
6
6
  */
package/lib/ComboBox.js CHANGED
@@ -1,12 +1,13 @@
1
- import { Keyboard } from '@etsoo/shared';
2
- import { Autocomplete, Checkbox } from '@mui/material';
3
- import React from 'react';
4
- import { Utils as SharedUtils } from '@etsoo/shared';
5
- import { ReactUtils } from '@etsoo/react';
6
- import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
7
- import CheckBoxIcon from '@mui/icons-material/CheckBox';
8
- import { SearchField } from './SearchField';
9
- import { InputField } from './InputField';
1
+ import { Keyboard } from "@etsoo/shared";
2
+ import { Autocomplete, Checkbox } from "@mui/material";
3
+ import React from "react";
4
+ import { Utils as SharedUtils } from "@etsoo/shared";
5
+ import { ReactUtils } from "@etsoo/react";
6
+ import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
7
+ import CheckBoxIcon from "@mui/icons-material/CheckBox";
8
+ import { SearchField } from "./SearchField";
9
+ import { InputField } from "./InputField";
10
+ import { globalApp } from "./app/ReactApp";
10
11
  const icon = React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
11
12
  const checkedIcon = React.createElement(CheckBoxIcon, { fontSize: "small" });
12
13
  /**
@@ -15,14 +16,16 @@ const checkedIcon = React.createElement(CheckBoxIcon, { fontSize: "small" });
15
16
  * @returns Component
16
17
  */
17
18
  export function ComboBox(props) {
19
+ // Labels
20
+ const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading");
18
21
  // Destruct
19
- const { search = false, autoAddBlankItem = search, idField = 'id', idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, multiple = false, onLoadData, name, inputAutoComplete = 'new-password', // disable autocomplete and autofill, 'off' does not work
22
+ const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = "label", loadData, multiple = false, onLoadData, name, inputAutoComplete = "new-password", // disable autocomplete and autofill, 'off' does not work
20
23
  options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = multiple, renderOption = multiple
21
24
  ? (props, option, { selected }) => (React.createElement("li", { ...props },
22
25
  React.createElement(React.Fragment, null,
23
26
  React.createElement(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }),
24
27
  option[labelField])))
25
- : undefined, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: '150px' }, ...rest } = props;
28
+ : undefined, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, ...rest } = props;
26
29
  // Value input ref
27
30
  const inputRef = React.createRef();
28
31
  // Options state
@@ -65,7 +68,7 @@ export function ComboBox(props) {
65
68
  if (readOnly != null) {
66
69
  Object.assign(params, { readOnly });
67
70
  if (readOnly) {
68
- Object.assign(params.inputProps, { 'data-reset': true });
71
+ Object.assign(params.inputProps, { "data-reset": true });
69
72
  }
70
73
  }
71
74
  if (dataReadonly) {
@@ -82,9 +85,9 @@ export function ComboBox(props) {
82
85
  };
83
86
  const getValue = (value) => {
84
87
  if (value == null)
85
- return '';
88
+ return "";
86
89
  if (Array.isArray(value))
87
- return value.map((item) => item[idField]).join(',');
90
+ return value.map((item) => item[idField]).join(",");
88
91
  return `${value[idField]}`;
89
92
  };
90
93
  const setInputValue = (value) => {
@@ -129,12 +132,12 @@ export function ComboBox(props) {
129
132
  }, []);
130
133
  // Layout
131
134
  return (React.createElement("div", null,
132
- React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
135
+ React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }),
133
136
  React.createElement(Autocomplete, { value: multiple ? stateValue !== null && stateValue !== void 0 ? stateValue : [] : stateValue, multiple: multiple, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
134
137
  // Set value
135
138
  setInputValue(value);
136
139
  // Custom
137
140
  if (onChange != null)
138
141
  onChange(event, value, reason, details);
139
- }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, ...rest })));
142
+ }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, renderOption: renderOption, noOptionsText: noOptionsText, loadingText: loadingText, ...rest })));
140
143
  }
package/lib/Tiplist.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  /// <reference types="react" />
2
- import { DataTypes, IdDefaultType, ListType } from '@etsoo/shared';
3
- import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
2
+ import { DataTypes, IdDefaultType, ListType } from "@etsoo/shared";
3
+ import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
4
4
  /**
5
5
  * Tiplist props
6
6
  */
7
- export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteExtendedProps<T, D, undefined>, 'open' | 'multiple'> & {
7
+ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<AutocompleteExtendedProps<T, D, undefined>, "open" | "multiple"> & {
8
8
  /**
9
9
  * Load data callback
10
10
  */
package/lib/Tiplist.js CHANGED
@@ -1,17 +1,20 @@
1
- import { ReactUtils, useDelayedExecutor } from '@etsoo/react';
2
- import { DataTypes } from '@etsoo/shared';
3
- import { Autocomplete } from '@mui/material';
4
- import React from 'react';
5
- import { InputField } from './InputField';
6
- import { SearchField } from './SearchField';
1
+ import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
2
+ import { DataTypes } from "@etsoo/shared";
3
+ import { Autocomplete } from "@mui/material";
4
+ import React from "react";
5
+ import { globalApp } from "./app/ReactApp";
6
+ import { InputField } from "./InputField";
7
+ import { SearchField } from "./SearchField";
7
8
  /**
8
9
  * Tiplist
9
10
  * @param props Props
10
11
  * @returns Component
11
12
  */
12
13
  export function Tiplist(props) {
14
+ // Labels
15
+ const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading");
13
16
  // Destruct
14
- const { search = false, idField = 'id', idValue, inputAutoComplete = 'new-password', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
17
+ const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, ...rest } = props;
15
18
  // Value input ref
16
19
  const inputRef = React.createRef();
17
20
  // Local value
@@ -65,9 +68,9 @@ export function Tiplist(props) {
65
68
  if (id == null) {
66
69
  // Reset real value
67
70
  const input = inputRef.current;
68
- if (input && input.value !== '') {
71
+ if (input && input.value !== "") {
69
72
  // Different value, trigger change event
70
- ReactUtils.triggerChange(input, '', false);
73
+ ReactUtils.triggerChange(input, "", false);
71
74
  }
72
75
  if (states.options.length > 0) {
73
76
  // Reset options
@@ -96,14 +99,14 @@ export function Tiplist(props) {
96
99
  const input = inputRef.current;
97
100
  if (input) {
98
101
  // Update value
99
- const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : '';
102
+ const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : "";
100
103
  if (newValue !== input.value) {
101
104
  // Different value, trigger change event
102
105
  ReactUtils.triggerChange(input, newValue, false);
103
106
  }
104
107
  }
105
108
  };
106
- if (localIdValue != null && localIdValue !== '') {
109
+ if (localIdValue != null && localIdValue !== "") {
107
110
  if (state.idLoaded) {
108
111
  // Set default
109
112
  if (!state.idSet && states.options.length == 1) {
@@ -125,7 +128,7 @@ export function Tiplist(props) {
125
128
  }, []);
126
129
  // Layout
127
130
  return (React.createElement("div", null,
128
- React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : ''}`, readOnly: true, onChange: inputOnChange }),
131
+ React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: "none" }, name: name, value: `${inputValue !== null && inputValue !== void 0 ? inputValue : ""}`, readOnly: true, onChange: inputOnChange }),
129
132
  React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
130
133
  // Set value
131
134
  setInputValue(value);
@@ -133,25 +136,21 @@ export function Tiplist(props) {
133
136
  if (onChange != null)
134
137
  onChange(event, value, reason, details);
135
138
  // For clear case
136
- if (reason === 'clear') {
139
+ if (reason === "clear") {
137
140
  stateUpdate({ options: [] });
138
141
  loadDataDirect();
139
142
  }
140
143
  }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
141
144
  // Should load
142
- const loading = states.loading
143
- ? true
144
- : states.options.length === 0;
145
+ const loading = states.loading ? true : states.options.length === 0;
145
146
  stateUpdate({ open: true, loading });
146
147
  // If not loading
147
148
  if (loading)
148
- loadDataDirect(undefined, states.value == null
149
- ? undefined
150
- : states.value[idField]);
149
+ loadDataDirect(undefined, states.value == null ? undefined : states.value[idField]);
151
150
  }, onClose: () => {
152
151
  stateUpdate({
153
152
  open: false,
154
153
  ...(!states.value && { options: [] })
155
154
  });
156
- }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
155
+ }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], noOptionsText: noOptionsText, loadingText: loadingText, ...rest })));
157
156
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.26",
3
+ "version": "1.1.27",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
50
50
  "@emotion/css": "^11.10.5",
51
51
  "@emotion/react": "^11.10.5",
52
52
  "@emotion/styled": "^11.10.5",
53
- "@etsoo/appscript": "^1.3.60",
53
+ "@etsoo/appscript": "^1.3.61",
54
54
  "@etsoo/notificationbase": "^1.1.23",
55
- "@etsoo/react": "^1.6.44",
55
+ "@etsoo/react": "^1.6.45",
56
56
  "@etsoo/shared": "^1.1.88",
57
57
  "@mui/icons-material": "^5.11.0",
58
58
  "@mui/material": "^5.11.7",
@@ -70,7 +70,7 @@
70
70
  "react-dom": "^18.2.0",
71
71
  "react-draggable": "^4.4.5",
72
72
  "react-imask": "^6.4.3",
73
- "react-router-dom": "^6.8.0",
73
+ "react-router-dom": "^6.8.1",
74
74
  "react-window": "^1.8.8"
75
75
  },
76
76
  "devDependencies": {
@@ -84,8 +84,8 @@
84
84
  "@testing-library/jest-dom": "^5.16.5",
85
85
  "@testing-library/react": "^13.4.0",
86
86
  "@types/jest": "^29.4.0",
87
- "@typescript-eslint/eslint-plugin": "^5.50.0",
88
- "@typescript-eslint/parser": "^5.50.0",
87
+ "@typescript-eslint/eslint-plugin": "^5.51.0",
88
+ "@typescript-eslint/parser": "^5.51.0",
89
89
  "jest": "^29.4.1",
90
90
  "jest-environment-jsdom": "^29.4.1",
91
91
  "typescript": "^4.9.5"