@etsoo/materialui 1.1.79 → 1.1.81

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 (13) hide show
  1. package/lib/ComboBoxPro.d.ts +3 -10
  2. package/lib/NotifierMU.js +4 -4
  3. package/lib/QuickList.d.ts +56 -0
  4. package/lib/QuickList.js +43 -0
  5. package/lib/TagListPro.d.ts +3 -10
  6. package/lib/index.d.ts +1 -0
  7. package/lib/index.js +1 -0
  8. package/package.json +5 -5
  9. package/src/ComboBoxPro.tsx +3 -6
  10. package/src/NotifierMU.tsx +7 -4
  11. package/src/QuickList.tsx +153 -0
  12. package/src/TagListPro.tsx +3 -6
  13. package/src/index.ts +1 -0
package/lib/ComboBoxPro.d.ts CHANGED
@@ -1,14 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { AutocompleteProps } from "@mui/material";
3
3
  import { InputFieldProps } from "./InputField";
4
- type DataType = {
5
- id: number | string;
6
- } & ({
7
- label: string;
8
- } | {
9
- name: string;
10
- });
11
- export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
4
+ import { ListType2 } from "@etsoo/shared";
5
+ export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
12
6
  /**
13
7
  * Label
14
8
  */
@@ -30,5 +24,4 @@ export type ComboBoxProProps<D extends DataType = DataType> = Omit<AutocompleteP
30
24
  */
31
25
  inputProps?: Omit<InputFieldProps, "onChange">;
32
26
  };
33
- export declare function ComboBoxPro<D extends DataType = DataType>(props: ComboBoxProProps<D>): JSX.Element;
34
- export {};
27
+ export declare function ComboBoxPro<D extends ListType2 = ListType2>(props: ComboBoxProProps<D>): JSX.Element;
package/lib/NotifierMU.js CHANGED
@@ -68,7 +68,7 @@ export class NotificationMU extends NotificationReact {
68
68
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
69
69
  icon,
70
70
  React.createElement("span", { className: "dialogTitle" }, title),
71
- closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.dismiss() },
71
+ closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
72
72
  React.createElement(CloseIcon, null)))),
73
73
  React.createElement(DialogContent, null,
74
74
  React.createElement(DialogContentText, null, this.content),
@@ -89,7 +89,7 @@ export class NotificationMU extends NotificationReact {
89
89
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
90
90
  React.createElement(Help, { color: "action" }),
91
91
  React.createElement("span", { className: "dialogTitle" }, title),
92
- closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.dismiss() },
92
+ closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
93
93
  React.createElement(CloseIcon, null)))),
94
94
  React.createElement(DialogContent, null,
95
95
  React.createElement(DialogContentText, null, this.content),
@@ -120,7 +120,7 @@ export class NotificationMU extends NotificationReact {
120
120
  if (this.renderSetup)
121
121
  this.renderSetup(setupProps);
122
122
  return (React.createElement(Fade, { in: true, key: this.id },
123
- React.createElement(Alert, { ...setupProps, action: closable ? (React.createElement(IconButton, { size: "small", onClick: () => this.dismiss() },
123
+ React.createElement(Alert, { ...setupProps, action: closable ? (React.createElement(IconButton, { size: "small", onClick: () => this.returnValue("CLOSE") },
124
124
  React.createElement(CloseIcon, null))) : undefined, onClose: () => this.dismiss(), className: className },
125
125
  this.title && React.createElement(AlertTitle, null, this.title),
126
126
  this.content)));
@@ -205,7 +205,7 @@ export class NotificationMU extends NotificationReact {
205
205
  React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
206
206
  React.createElement(Info, { color: "primary" }),
207
207
  React.createElement("span", { className: "dialogTitle" }, title),
208
- closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.dismiss() },
208
+ closable && (React.createElement(IconButton, { className: "closeButton", size: "small", onClick: () => this.returnValue("CLOSE") },
209
209
  React.createElement(CloseIcon, null)))),
210
210
  React.createElement(DialogContent, null,
211
211
  React.createElement(DialogContentText, null, this.content),
package/lib/QuickList.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ import { ListType2 } from "@etsoo/shared";
2
+ import { ListItemButtonProps, ListItemProps, StackProps } from "@mui/material";
3
+ import React from "react";
4
+ import { InputFieldProps } from "./InputField";
5
+ /**
6
+ * Quick list props
7
+ */
8
+ export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
9
+ /**
10
+ * Button props
11
+ */
12
+ buttonProps?: ListItemButtonProps;
13
+ /**
14
+ * Label
15
+ */
16
+ label?: string;
17
+ /**
18
+ * No matches label
19
+ */
20
+ noMatchesLabel?: string;
21
+ /**
22
+ * Input field props
23
+ */
24
+ inputProps?: Omit<InputFieldProps, "onChangeDelay">;
25
+ /**
26
+ * Get item label
27
+ * @param item Current item
28
+ * @returns Item label
29
+ */
30
+ itemLabel?: (item: T) => string;
31
+ /**
32
+ * Item renderer
33
+ * @param item Current item
34
+ * @returns UI
35
+ */
36
+ itemRenderer?: (item: T) => React.ReactNode;
37
+ /**
38
+ * List item props
39
+ */
40
+ itemProps?: ListItemProps;
41
+ /**
42
+ * Load data callback
43
+ */
44
+ loadData: (keyword: string | undefined) => PromiseLike<T[] | undefined>;
45
+ /**
46
+ * On item click
47
+ * @param item Clicked item
48
+ */
49
+ onItemClick?: (item: T) => void;
50
+ };
51
+ /**
52
+ * Quick list
53
+ * @param props Props
54
+ * @returns Component
55
+ */
56
+ export declare function QuickList<T extends ListType2 = ListType2>(props: QuickListProps<T>): JSX.Element;
package/lib/QuickList.js ADDED
@@ -0,0 +1,43 @@
1
+ import { LinearProgress, List, ListItem, ListItemButton, Typography } from "@mui/material";
2
+ import React from "react";
3
+ import { InputField } from "./InputField";
4
+ import { globalApp } from "./app/ReactApp";
5
+ import { VBox } from "./FlexBox";
6
+ /**
7
+ * Quick list
8
+ * @param props Props
9
+ * @returns Component
10
+ */
11
+ export function QuickList(props) {
12
+ // Destruct
13
+ const { buttonProps = {}, label, inputProps, itemLabel = (item) => ("label" in item ? item.label : item.name), itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
14
+ const { onClick, ...buttonRest } = buttonProps;
15
+ // States
16
+ const [loading, setLoading] = React.useState(false);
17
+ const [items, setItems] = React.useState([]);
18
+ const loadDataLocal = (keyword) => {
19
+ setLoading(true);
20
+ loadData(keyword).then((result) => {
21
+ setLoading(false);
22
+ setItems(result !== null && result !== void 0 ? result : []);
23
+ });
24
+ };
25
+ React.useEffect(() => {
26
+ loadDataLocal();
27
+ }, []);
28
+ // Layout
29
+ return (React.createElement(VBox, { gap: gap, height: height, ...rest },
30
+ React.createElement(InputField, { label: label, changeDelay: 480, onChangeDelay: (event) => {
31
+ // Stop bubble
32
+ event.preventDefault();
33
+ event.stopPropagation();
34
+ loadDataLocal(event.target.value);
35
+ }, fullWidth: true, ...inputProps }),
36
+ loading ? (React.createElement(LinearProgress, null)) : items.length === 0 ? (React.createElement(Typography, { textAlign: "center" }, noMatchesLabel)) : (React.createElement(List, null, items.map((item) => (React.createElement(ListItem, { key: item.id, disablePadding: true, ...itemProps },
37
+ React.createElement(ListItemButton, { onClick: (event) => {
38
+ if (onClick)
39
+ onClick(event);
40
+ if (!event.defaultPrevented && onItemClick)
41
+ onItemClick(item);
42
+ }, ...buttonRest }, itemRenderer(item)))))))));
43
+ }
package/lib/TagListPro.d.ts CHANGED
@@ -1,14 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { AutocompleteProps } from "@mui/material";
3
3
  import { InputFieldProps } from "./InputField";
4
- type DataType = {
5
- id: number | string;
6
- } & ({
7
- label: string;
8
- } | {
9
- name: string;
10
- });
11
- export type TagListProProps<D extends DataType = DataType> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
4
+ import { ListType2 } from "@etsoo/shared";
5
+ export type TagListProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, true, false, false>, "open" | "multiple" | "options" | "renderInput"> & {
12
6
  /**
13
7
  * Label
14
8
  */
@@ -26,5 +20,4 @@ export type TagListProProps<D extends DataType = DataType> = Omit<AutocompletePr
26
20
  */
27
21
  maxItems?: number;
28
22
  };
29
- export declare function TagListPro<D extends DataType = DataType>(props: TagListProProps<D>): JSX.Element;
30
- export {};
23
+ export declare function TagListPro<D extends ListType2 = ListType2>(props: TagListProProps<D>): JSX.Element;
package/lib/index.d.ts CHANGED
@@ -71,6 +71,7 @@ export * from "./OptionGroup";
71
71
  export * from "./PList";
72
72
  export * from "./ProgressCount";
73
73
  export * from "./PullToRefreshUI";
74
+ export * from "./QuickList";
74
75
  export * from "./ResponsibleContainer";
75
76
  export * from "./ScrollerListEx";
76
77
  export * from "./ScrollTopFab";
package/lib/index.js CHANGED
@@ -71,6 +71,7 @@ export * from "./OptionGroup";
71
71
  export * from "./PList";
72
72
  export * from "./ProgressCount";
73
73
  export * from "./PullToRefreshUI";
74
+ export * from "./QuickList";
74
75
  export * from "./ResponsibleContainer";
75
76
  export * from "./ScrollerListEx";
76
77
  export * from "./ScrollTopFab";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.1.79",
3
+ "version": "1.1.81",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,10 +50,10 @@
50
50
  "@emotion/css": "^11.10.6",
51
51
  "@emotion/react": "^11.10.6",
52
52
  "@emotion/styled": "^11.10.6",
53
- "@etsoo/appscript": "^1.3.83",
53
+ "@etsoo/appscript": "^1.3.86",
54
54
  "@etsoo/notificationbase": "^1.1.24",
55
- "@etsoo/react": "^1.6.56",
56
- "@etsoo/shared": "^1.1.93",
55
+ "@etsoo/react": "^1.6.57",
56
+ "@etsoo/shared": "^1.1.94",
57
57
  "@mui/icons-material": "^5.11.11",
58
58
  "@mui/material": "^5.11.15",
59
59
  "@mui/x-data-grid": "^6.0.3",
@@ -71,7 +71,7 @@
71
71
  "react-dom": "^18.2.0",
72
72
  "react-draggable": "^4.4.5",
73
73
  "react-imask": "^6.4.3",
74
- "react-router-dom": "^6.9.0",
74
+ "react-router-dom": "^6.10.0",
75
75
  "react-window": "^1.8.8"
76
76
  },
77
77
  "devDependencies": {
package/src/ComboBoxPro.tsx CHANGED
@@ -2,12 +2,9 @@ import { Autocomplete, AutocompleteProps } from "@mui/material";
2
2
  import React from "react";
3
3
  import { globalApp } from "./app/ReactApp";
4
4
  import { InputField, InputFieldProps } from "./InputField";
5
+ import { ListType2 } from "@etsoo/shared";
5
6
 
6
- type DataType = {
7
- id: number | string;
8
- } & ({ label: string } | { name: string });
9
-
10
- export type ComboBoxProProps<D extends DataType = DataType> = Omit<
7
+ export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
11
8
  AutocompleteProps<D, false, false, true>,
12
9
  "open" | "multiple" | "options" | "renderInput"
13
10
  > & {
@@ -37,7 +34,7 @@ export type ComboBoxProProps<D extends DataType = DataType> = Omit<
37
34
  inputProps?: Omit<InputFieldProps, "onChange">;
38
35
  };
39
36
 
40
- export function ComboBoxPro<D extends DataType = DataType>(
37
+ export function ComboBoxPro<D extends ListType2 = ListType2>(
41
38
  props: ComboBoxProProps<D>
42
39
  ) {
43
40
  // Labels
package/src/NotifierMU.tsx CHANGED
@@ -126,7 +126,7 @@ export class NotificationMU extends NotificationReact {
126
126
  <IconButton
127
127
  className="closeButton"
128
128
  size="small"
129
- onClick={() => this.dismiss()}
129
+ onClick={() => this.returnValue("CLOSE")}
130
130
  >
131
131
  <CloseIcon />
132
132
  </IconButton>
@@ -197,7 +197,7 @@ export class NotificationMU extends NotificationReact {
197
197
  <IconButton
198
198
  className="closeButton"
199
199
  size="small"
200
- onClick={() => this.dismiss()}
200
+ onClick={() => this.returnValue("CLOSE")}
201
201
  >
202
202
  <CloseIcon />
203
203
  </IconButton>
@@ -262,7 +262,10 @@ export class NotificationMU extends NotificationReact {
262
262
  {...setupProps}
263
263
  action={
264
264
  closable ? (
265
- <IconButton size="small" onClick={() => this.dismiss()}>
265
+ <IconButton
266
+ size="small"
267
+ onClick={() => this.returnValue("CLOSE")}
268
+ >
266
269
  <CloseIcon />
267
270
  </IconButton>
268
271
  ) : undefined
@@ -415,7 +418,7 @@ export class NotificationMU extends NotificationReact {
415
418
  <IconButton
416
419
  className="closeButton"
417
420
  size="small"
418
- onClick={() => this.dismiss()}
421
+ onClick={() => this.returnValue("CLOSE")}
419
422
  >
420
423
  <CloseIcon />
421
424
  </IconButton>
package/src/QuickList.tsx ADDED
@@ -0,0 +1,153 @@
1
+ import { ListType2 } from "@etsoo/shared";
2
+ import {
3
+ LinearProgress,
4
+ List,
5
+ ListItem,
6
+ ListItemButton,
7
+ ListItemButtonProps,
8
+ ListItemProps,
9
+ StackProps,
10
+ Typography
11
+ } from "@mui/material";
12
+ import React from "react";
13
+ import { InputField, InputFieldProps } from "./InputField";
14
+ import { globalApp } from "./app/ReactApp";
15
+ import { VBox } from "./FlexBox";
16
+
17
+ /**
18
+ * Quick list props
19
+ */
20
+ export type QuickListProps<T extends ListType2 = ListType2> = StackProps & {
21
+ /**
22
+ * Button props
23
+ */
24
+ buttonProps?: ListItemButtonProps;
25
+
26
+ /**
27
+ * Label
28
+ */
29
+ label?: string;
30
+
31
+ /**
32
+ * No matches label
33
+ */
34
+ noMatchesLabel?: string;
35
+
36
+ /**
37
+ * Input field props
38
+ */
39
+ inputProps?: Omit<InputFieldProps, "onChangeDelay">;
40
+
41
+ /**
42
+ * Get item label
43
+ * @param item Current item
44
+ * @returns Item label
45
+ */
46
+ itemLabel?: (item: T) => string;
47
+
48
+ /**
49
+ * Item renderer
50
+ * @param item Current item
51
+ * @returns UI
52
+ */
53
+ itemRenderer?: (item: T) => React.ReactNode;
54
+
55
+ /**
56
+ * List item props
57
+ */
58
+ itemProps?: ListItemProps;
59
+
60
+ /**
61
+ * Load data callback
62
+ */
63
+ loadData: (keyword: string | undefined) => PromiseLike<T[] | undefined>;
64
+
65
+ /**
66
+ * On item click
67
+ * @param item Clicked item
68
+ */
69
+ onItemClick?: (item: T) => void;
70
+ };
71
+
72
+ /**
73
+ * Quick list
74
+ * @param props Props
75
+ * @returns Component
76
+ */
77
+ export function QuickList<T extends ListType2 = ListType2>(
78
+ props: QuickListProps<T>
79
+ ) {
80
+ // Destruct
81
+ const {
82
+ buttonProps = {},
83
+ label,
84
+ inputProps,
85
+ itemLabel = (item: T) => ("label" in item ? item.label : item.name),
86
+ itemRenderer = (item: T) => itemLabel(item),
87
+ itemProps,
88
+ loadData,
89
+ noMatchesLabel = globalApp?.get("noMatches"),
90
+ gap = 1,
91
+ height = "480px",
92
+ onItemClick,
93
+ ...rest
94
+ } = props;
95
+
96
+ const { onClick, ...buttonRest } = buttonProps;
97
+
98
+ // States
99
+ const [loading, setLoading] = React.useState(false);
100
+ const [items, setItems] = React.useState<T[]>([]);
101
+
102
+ const loadDataLocal = (keyword?: string) => {
103
+ setLoading(true);
104
+
105
+ loadData(keyword).then((result) => {
106
+ setLoading(false);
107
+ setItems(result ?? []);
108
+ });
109
+ };
110
+
111
+ React.useEffect(() => {
112
+ loadDataLocal();
113
+ }, []);
114
+
115
+ // Layout
116
+ return (
117
+ <VBox gap={gap} height={height} {...rest}>
118
+ <InputField
119
+ label={label}
120
+ changeDelay={480}
121
+ onChangeDelay={(event) => {
122
+ // Stop bubble
123
+ event.preventDefault();
124
+ event.stopPropagation();
125
+ loadDataLocal(event.target.value);
126
+ }}
127
+ fullWidth
128
+ {...inputProps}
129
+ />
130
+ {loading ? (
131
+ <LinearProgress />
132
+ ) : items.length === 0 ? (
133
+ <Typography textAlign="center">{noMatchesLabel}</Typography>
134
+ ) : (
135
+ <List>
136
+ {items.map((item) => (
137
+ <ListItem key={item.id} disablePadding {...itemProps}>
138
+ <ListItemButton
139
+ onClick={(event) => {
140
+ if (onClick) onClick(event);
141
+ if (!event.defaultPrevented && onItemClick) onItemClick(item);
142
+ }}
143
+ {...buttonRest}
144
+ >
145
+ {itemRenderer(item)}
146
+ </ListItemButton>
147
+ </ListItem>
148
+ ))}
149
+ </List>
150
+ )}
151
+ </VBox>
152
+ );
153
+ }
package/src/TagListPro.tsx CHANGED
@@ -4,12 +4,9 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
4
4
  import React from "react";
5
5
  import { InputField, InputFieldProps } from "./InputField";
6
6
  import { globalApp } from "./app/ReactApp";
7
+ import { ListType2 } from "@etsoo/shared";
7
8
 
8
- type DataType = {
9
- id: number | string;
10
- } & ({ label: string } | { name: string });
11
-
12
- export type TagListProProps<D extends DataType = DataType> = Omit<
9
+ export type TagListProProps<D extends ListType2 = ListType2> = Omit<
13
10
  AutocompleteProps<D, true, false, false>,
14
11
  "open" | "multiple" | "options" | "renderInput"
15
12
  > & {
@@ -37,7 +34,7 @@ export type TagListProProps<D extends DataType = DataType> = Omit<
37
34
  maxItems?: number;
38
35
  };
39
36
 
40
- export function TagListPro<D extends DataType = DataType>(
37
+ export function TagListPro<D extends ListType2 = ListType2>(
41
38
  props: TagListProProps<D>
42
39
  ) {
43
40
  // Labels
package/src/index.ts CHANGED
@@ -74,6 +74,7 @@ export * from "./OptionGroup";
74
74
  export * from "./PList";
75
75
  export * from "./ProgressCount";
76
76
  export * from "./PullToRefreshUI";
77
+ export * from "./QuickList";
77
78
  export * from "./ResponsibleContainer";
78
79
  export * from "./ScrollerListEx";
79
80
  export * from "./ScrollTopFab";