@etsoo/materialui 1.3.58 → 1.3.60

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 (201) hide show
  1. package/__tests__/ResponsePage.tsx +11 -3
  2. package/lib/AddresSelector.d.ts +1 -1
  3. package/lib/AddresSelector.js +9 -18
  4. package/lib/AuditDisplay.d.ts +1 -1
  5. package/lib/AuditDisplay.js +12 -15
  6. package/lib/BackButton.d.ts +1 -2
  7. package/lib/BackButton.js +3 -4
  8. package/lib/BridgeCloseButton.d.ts +1 -2
  9. package/lib/BridgeCloseButton.js +3 -4
  10. package/lib/ButtonLink.d.ts +1 -2
  11. package/lib/ButtonLink.js +2 -2
  12. package/lib/ComboBox.d.ts +2 -3
  13. package/lib/ComboBox.js +12 -16
  14. package/lib/ComboBoxMultiple.d.ts +2 -3
  15. package/lib/ComboBoxMultiple.js +15 -19
  16. package/lib/ComboBoxPro.d.ts +1 -2
  17. package/lib/ComboBoxPro.js +3 -2
  18. package/lib/CountdownButton.js +4 -3
  19. package/lib/CountryList.d.ts +1 -2
  20. package/lib/CountryList.js +2 -1
  21. package/lib/CultureDataTable.d.ts +1 -2
  22. package/lib/CultureDataTable.js +2 -1
  23. package/lib/DataGridEx.d.ts +1 -1
  24. package/lib/DataGridEx.js +55 -58
  25. package/lib/DataGridRenderers.js +5 -5
  26. package/lib/DataSteps.d.ts +1 -2
  27. package/lib/DataSteps.js +20 -23
  28. package/lib/DataTable.d.ts +1 -1
  29. package/lib/DataTable.js +2 -1
  30. package/lib/DialogButton.d.ts +1 -1
  31. package/lib/DialogButton.js +6 -13
  32. package/lib/DnDList.d.ts +1 -1
  33. package/lib/DnDList.js +8 -8
  34. package/lib/DraggablePaperComponent.d.ts +1 -2
  35. package/lib/DraggablePaperComponent.js +2 -2
  36. package/lib/EmailInput.d.ts +1 -2
  37. package/lib/EmailInput.js +2 -2
  38. package/lib/FabBox.d.ts +1 -2
  39. package/lib/FabBox.js +4 -3
  40. package/lib/FieldSetEx.d.ts +1 -1
  41. package/lib/FieldSetEx.js +13 -16
  42. package/lib/FileUploadButton.d.ts +1 -1
  43. package/lib/FileUploadButton.js +27 -29
  44. package/lib/FlexBox.d.ts +2 -3
  45. package/lib/FlexBox.js +3 -3
  46. package/lib/GridDataFormat.js +2 -2
  47. package/lib/HiSelector.d.ts +1 -1
  48. package/lib/HiSelector.js +2 -12
  49. package/lib/HiSelectorTL.d.ts +1 -1
  50. package/lib/HiSelectorTL.js +2 -12
  51. package/lib/IconButtonLink.d.ts +1 -2
  52. package/lib/IconButtonLink.js +2 -2
  53. package/lib/InputField.js +2 -1
  54. package/lib/InputTipField.d.ts +1 -1
  55. package/lib/InputTipField.js +12 -14
  56. package/lib/IntInputField.js +28 -33
  57. package/lib/ItemList.d.ts +1 -1
  58. package/lib/ItemList.js +6 -11
  59. package/lib/LineChart.d.ts +1 -2
  60. package/lib/LineChart.js +2 -1
  61. package/lib/ListChooser.d.ts +1 -1
  62. package/lib/ListChooser.js +4 -7
  63. package/lib/ListMoreDisplay.d.ts +1 -1
  64. package/lib/ListMoreDisplay.js +5 -10
  65. package/lib/LoadingButton.d.ts +1 -2
  66. package/lib/LoadingButton.js +3 -2
  67. package/lib/MaskInput.d.ts +1 -2
  68. package/lib/MaskInput.js +2 -1
  69. package/lib/MenuButton.d.ts +1 -1
  70. package/lib/MenuButton.js +30 -31
  71. package/lib/MobileListItemRenderer.d.ts +1 -1
  72. package/lib/MobileListItemRenderer.js +15 -18
  73. package/lib/MoneyInputField.js +2 -1
  74. package/lib/MoreFab.d.ts +1 -1
  75. package/lib/MoreFab.js +21 -24
  76. package/lib/NotifierMU.d.ts +2 -2
  77. package/lib/NotifierMU.js +27 -67
  78. package/lib/NumberInputField.d.ts +1 -1
  79. package/lib/NumberInputField.js +4 -4
  80. package/lib/OptionBool.d.ts +1 -2
  81. package/lib/OptionBool.js +2 -2
  82. package/lib/OptionGroup.d.ts +1 -1
  83. package/lib/OptionGroup.js +17 -20
  84. package/lib/OptionGroupFlag.d.ts +1 -1
  85. package/lib/OptionGroupFlag.js +15 -18
  86. package/lib/PList.d.ts +1 -2
  87. package/lib/PList.js +5 -4
  88. package/lib/PercentCircularProgress.d.ts +1 -2
  89. package/lib/PercentCircularProgress.js +11 -14
  90. package/lib/PercentLinearProgress.d.ts +1 -2
  91. package/lib/PercentLinearProgress.js +2 -6
  92. package/lib/ProgressCount.d.ts +1 -2
  93. package/lib/ProgressCount.js +12 -18
  94. package/lib/PullToRefreshUI.d.ts +1 -2
  95. package/lib/PullToRefreshUI.js +2 -1
  96. package/lib/QuickList.d.ts +1 -1
  97. package/lib/QuickList.js +12 -14
  98. package/lib/ResponsibleContainer.d.ts +1 -1
  99. package/lib/ResponsibleContainer.js +11 -16
  100. package/lib/ScrollTopFab.d.ts +1 -2
  101. package/lib/ScrollTopFab.js +2 -3
  102. package/lib/ScrollerListEx.d.ts +1 -1
  103. package/lib/ScrollerListEx.js +3 -2
  104. package/lib/SearchBar.d.ts +1 -1
  105. package/lib/SearchBar.js +27 -35
  106. package/lib/SearchField.d.ts +1 -2
  107. package/lib/SearchField.js +2 -1
  108. package/lib/SearchOptionGroup.d.ts +1 -2
  109. package/lib/SearchOptionGroup.js +2 -2
  110. package/lib/SelectBool.d.ts +1 -2
  111. package/lib/SelectBool.js +2 -2
  112. package/lib/SelectEx.d.ts +1 -1
  113. package/lib/SelectEx.js +47 -55
  114. package/lib/ShowDataComparison.js +2 -11
  115. package/lib/Switch.d.ts +1 -2
  116. package/lib/Switch.js +3 -2
  117. package/lib/SwitchAnt.d.ts +1 -2
  118. package/lib/SwitchAnt.js +12 -14
  119. package/lib/SwitchField.d.ts +1 -1
  120. package/lib/SwitchField.js +13 -16
  121. package/lib/TabBox.d.ts +1 -1
  122. package/lib/TabBox.js +6 -9
  123. package/lib/TableEx.d.ts +1 -1
  124. package/lib/TableEx.js +79 -89
  125. package/lib/TagList.d.ts +1 -2
  126. package/lib/TagList.js +4 -5
  127. package/lib/TagListPro.d.ts +1 -2
  128. package/lib/TagListPro.js +4 -6
  129. package/lib/TextFieldEx.js +3 -6
  130. package/lib/Tiplist.d.ts +2 -3
  131. package/lib/Tiplist.js +39 -40
  132. package/lib/TiplistPro.d.ts +2 -2
  133. package/lib/TiplistPro.js +48 -49
  134. package/lib/TooltipClick.d.ts +1 -1
  135. package/lib/TooltipClick.js +3 -3
  136. package/lib/TwoFieldInput.d.ts +1 -2
  137. package/lib/TwoFieldInput.js +4 -5
  138. package/lib/UserAvatar.d.ts +1 -2
  139. package/lib/UserAvatar.js +3 -3
  140. package/lib/UserAvatarEditor.d.ts +1 -2
  141. package/lib/UserAvatarEditor.js +2 -19
  142. package/lib/index.d.ts +0 -3
  143. package/lib/index.js +0 -3
  144. package/lib/messages/OperationMessageContainer.d.ts +1 -2
  145. package/lib/messages/OperationMessageContainer.js +2 -1
  146. package/lib/pages/CommonPage.d.ts +67 -2
  147. package/lib/pages/CommonPage.js +15 -24
  148. package/lib/pages/DataGridPage.d.ts +2 -3
  149. package/lib/pages/DataGridPage.js +5 -8
  150. package/lib/pages/DataGridPageProps.d.ts +3 -3
  151. package/lib/pages/EditPage.d.ts +3 -3
  152. package/lib/pages/EditPage.js +6 -15
  153. package/lib/pages/FixedListPage.d.ts +2 -3
  154. package/lib/pages/FixedListPage.js +5 -9
  155. package/lib/pages/LeftDrawer.d.ts +1 -1
  156. package/lib/pages/LeftDrawer.js +3 -10
  157. package/lib/pages/ListPage.d.ts +7 -3
  158. package/lib/pages/ListPage.js +4 -7
  159. package/lib/pages/ResponsivePage.d.ts +50 -2
  160. package/lib/pages/ResponsivePage.js +25 -26
  161. package/lib/pages/SearchPageProps.d.ts +3 -3
  162. package/lib/pages/TablePage.d.ts +7 -3
  163. package/lib/pages/TablePage.js +5 -8
  164. package/lib/pages/UserMenu.d.ts +1 -1
  165. package/lib/pages/UserMenu.js +33 -35
  166. package/lib/pages/ViewPage.d.ts +4 -4
  167. package/lib/pages/ViewPage.js +29 -37
  168. package/lib/texts/DateText.d.ts +1 -2
  169. package/lib/texts/DateText.js +2 -2
  170. package/lib/texts/MoneyText.d.ts +1 -2
  171. package/lib/texts/MoneyText.js +4 -4
  172. package/lib/texts/NumberText.d.ts +1 -2
  173. package/lib/texts/NumberText.js +2 -2
  174. package/package.json +3 -3
  175. package/src/ComboBox.tsx +1 -1
  176. package/src/ComboBoxMultiple.tsx +1 -1
  177. package/src/Tiplist.tsx +1 -1
  178. package/src/index.ts +0 -3
  179. package/src/pages/CommonPage.tsx +80 -2
  180. package/src/pages/DataGridPage.tsx +1 -1
  181. package/src/pages/DataGridPageProps.ts +3 -3
  182. package/src/pages/EditPage.tsx +2 -3
  183. package/src/pages/FixedListPage.tsx +1 -1
  184. package/src/pages/ListPage.tsx +10 -2
  185. package/src/pages/ResponsivePage.tsx +70 -2
  186. package/src/pages/SearchPageProps.ts +3 -3
  187. package/src/pages/TablePage.tsx +16 -2
  188. package/src/pages/ViewPage.tsx +3 -4
  189. package/tsconfig.json +2 -2
  190. package/lib/pages/CommonPageProps.d.ts +0 -67
  191. package/lib/pages/CommonPageProps.js +0 -1
  192. package/lib/pages/ListPageProps.d.ts +0 -7
  193. package/lib/pages/ListPageProps.js +0 -1
  194. package/lib/pages/ResponsivePageProps.d.ts +0 -51
  195. package/lib/pages/ResponsivePageProps.js +0 -1
  196. package/lib/pages/TablePageProps.d.ts +0 -7
  197. package/lib/pages/TablePageProps.js +0 -1
  198. package/src/pages/CommonPageProps.ts +0 -80
  199. package/src/pages/ListPageProps.ts +0 -11
  200. package/src/pages/ResponsivePageProps.ts +0 -70
  201. package/src/pages/TablePageProps.ts +0 -12
@@ -1,6 +1,6 @@
1
1
  import { ListType2 } from "@etsoo/shared";
2
2
  import { AutocompleteProps } from "@mui/material";
3
- import React, { ChangeEventHandler } from "react";
3
+ import { ChangeEventHandler } from "react";
4
4
  import { InputFieldProps } from "./InputField";
5
5
  /**
6
6
  * TiplistPro props
@@ -53,4 +53,4 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
53
53
  * @param props Props
54
54
  * @returns Component
55
55
  */
56
- export declare function TiplistPro<T extends ListType2 = ListType2>(props: TiplistProProps<T>): React.JSX.Element;
56
+ export declare function TiplistPro<T extends ListType2 = ListType2>(props: TiplistProProps<T>): import("react/jsx-runtime").JSX.Element;
package/lib/TiplistPro.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
2
3
  import { DataTypes } from "@etsoo/shared";
3
4
  import { Autocomplete } from "@mui/material";
@@ -149,53 +150,51 @@ export function TiplistPro(props) {
149
150
  };
150
151
  }, []);
151
152
  // Layout
152
- return (React.createElement("div", null,
153
- React.createElement("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }),
154
- React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
155
- if (typeof value === "object") {
156
- // Set value
157
- setInputValue(value);
158
- }
159
- // Custom
160
- if (onChange != null)
161
- onChange(event, value, reason, details);
162
- if (onValueChange) {
163
- if (typeof value === "object")
164
- onValueChange(value == null ? null : value);
165
- }
166
- // For clear case
167
- if (reason === "clear") {
168
- stateUpdate({ options: [], open: event.type === "click" });
169
- loadDataDirect();
170
- }
171
- }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
172
- // Should load
173
- const loading = states.loading ? true : states.options.length === 0;
174
- stateUpdate({ open: true, loading });
175
- // If not loading
176
- if (loading)
177
- loadDataDirect(undefined, states.value && typeof states.value === "object"
178
- ? states.value.id
179
- : undefined);
180
- }, onClose: () => {
181
- stateUpdate({
182
- open: false,
183
- ...(!states.value && { options: [] })
184
- });
185
- }, loading: states.loading, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
186
- if (states.value == null && onChange)
187
- onChange(event, event.target.value, "blur", undefined);
188
- }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
189
- if (item.id === -1)
190
- return true;
191
- return getOptionDisabled ? getOptionDisabled(item) : false;
192
- }, getOptionLabel: (item) => {
193
- if (typeof item === "string")
194
- return item;
195
- if (item["id"] === -1)
196
- return (more ?? "More") + "...";
197
- if (getOptionLabel == null)
198
- return DataTypes.getListItemLabel(item);
199
- return getOptionLabel(item);
200
- }, ...rest })));
153
+ return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
154
+ if (typeof value === "object") {
155
+ // Set value
156
+ setInputValue(value);
157
+ }
158
+ // Custom
159
+ if (onChange != null)
160
+ onChange(event, value, reason, details);
161
+ if (onValueChange) {
162
+ if (typeof value === "object")
163
+ onValueChange(value == null ? null : value);
164
+ }
165
+ // For clear case
166
+ if (reason === "clear") {
167
+ stateUpdate({ options: [], open: event.type === "click" });
168
+ loadDataDirect();
169
+ }
170
+ }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
171
+ // Should load
172
+ const loading = states.loading ? true : states.options.length === 0;
173
+ stateUpdate({ open: true, loading });
174
+ // If not loading
175
+ if (loading)
176
+ loadDataDirect(undefined, states.value && typeof states.value === "object"
177
+ ? states.value.id
178
+ : undefined);
179
+ }, onClose: () => {
180
+ stateUpdate({
181
+ open: false,
182
+ ...(!states.value && { options: [] })
183
+ });
184
+ }, loading: states.loading, renderInput: (params) => (_jsx(InputField, { ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
185
+ if (states.value == null && onChange)
186
+ onChange(event, event.target.value, "blur", undefined);
187
+ }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
188
+ if (item.id === -1)
189
+ return true;
190
+ return getOptionDisabled ? getOptionDisabled(item) : false;
191
+ }, getOptionLabel: (item) => {
192
+ if (typeof item === "string")
193
+ return item;
194
+ if (item["id"] === -1)
195
+ return (more ?? "More") + "...";
196
+ if (getOptionLabel == null)
197
+ return DataTypes.getListItemLabel(item);
198
+ return getOptionLabel(item);
199
+ }, ...rest })] }));
201
200
  }
@@ -12,4 +12,4 @@ export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open
12
12
  * @param props Props
13
13
  * @returns Component
14
14
  */
15
- export declare function TooltipClick(props: TooltipClickProps): React.JSX.Element;
15
+ export declare function TooltipClick(props: TooltipClickProps): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  import { useDelayedExecutor } from '@etsoo/react';
2
3
  import { ClickAwayListener, Tooltip } from '@mui/material';
3
4
  import React from 'react';
@@ -29,12 +30,11 @@ export function TooltipClick(props) {
29
30
  };
30
31
  }, []);
31
32
  // Layout
32
- return (React.createElement(ClickAwayListener, { onClickAway: () => setOpen(false) },
33
- React.createElement(Tooltip, { PopperProps: {
33
+ return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Tooltip, { PopperProps: {
34
34
  disablePortal: true
35
35
  }, onClose: (event) => {
36
36
  setOpen(false);
37
37
  if (onClose)
38
38
  onClose(event);
39
- }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest }, children(openTooltip))));
39
+ }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest, children: children(openTooltip) }) }));
40
40
  }
@@ -1,4 +1,3 @@
1
- import React from 'react';
2
1
  import { InputFieldProps } from './InputField';
3
2
  type ValueType = string | number | Date | null | undefined;
4
3
  /**
@@ -19,5 +18,5 @@ export type TwoFieldInputProps = Omit<InputFieldProps, 'InputProps' | 'value'> &
19
18
  * @param props Props
20
19
  * @returns Component
21
20
  */
22
- export declare function TwoFieldInput(props: TwoFieldInputProps): React.JSX.Element;
21
+ export declare function TwoFieldInput(props: TwoFieldInputProps): import("react/jsx-runtime").JSX.Element;
23
22
  export {};
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { Input, InputAdornment } from '@mui/material';
2
3
  import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
3
4
  import { useDimensions } from '@etsoo/react';
@@ -52,13 +53,11 @@ export function TwoFieldInput(props) {
52
53
  valueRef.current = localValues;
53
54
  }, [localValues]);
54
55
  // Layout
55
- return (React.createElement(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
56
- endAdornment: (React.createElement(InputAdornment, { position: "end", sx: {
56
+ return (_jsx(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
57
+ endAdornment: (_jsxs(InputAdornment, { position: "end", sx: {
57
58
  display: 'flex',
58
59
  alignItems: 'center',
59
60
  gap: 1
60
- } },
61
- React.createElement(ArrowRightAltIcon, null),
62
- React.createElement(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })))
61
+ }, children: [_jsx(ArrowRightAltIcon, {}), _jsx(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
63
62
  }, onInput: onInput, onChange: handleChange, ...rest }));
64
63
  }
@@ -1,4 +1,3 @@
1
- import React from "react";
2
1
  /**
3
2
  * User avatar props
4
3
  */
@@ -21,4 +20,4 @@ export interface UserAvatarProps {
21
20
  * @param props Props
22
21
  * @returns Component
23
22
  */
24
- export declare function UserAvatar(props: UserAvatarProps): React.JSX.Element;
23
+ export declare function UserAvatar(props: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
package/lib/UserAvatar.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Avatar } from "@mui/material";
3
3
  import { BusinessUtils } from "@etsoo/appscript";
4
4
  import { globalApp } from "./app/ReactApp";
@@ -15,9 +15,9 @@ export function UserAvatar(props) {
15
15
  // Format
16
16
  const fTitle = formatTitle(title);
17
17
  const count = fTitle.length;
18
- return (React.createElement(Avatar, { title: title, src: src, sx: {
18
+ return (_jsx(Avatar, { title: title, src: src, sx: {
19
19
  width: 48,
20
20
  height: 32,
21
21
  fontSize: count <= 2 ? "15px" : "12px"
22
- } }, fTitle));
22
+ }, children: fTitle }));
23
23
  }
@@ -1,4 +1,3 @@
1
- import React from "react";
2
1
  /**
3
2
  * User avatar editor to Blob helper
4
3
  */
@@ -54,4 +53,4 @@ export interface UserAvatarEditorProps {
54
53
  * @param props Props
55
54
  * @returns Component
56
55
  */
57
- export declare function UserAvatarEditor(props: UserAvatarEditorProps): React.JSX.Element;
56
+ export declare function UserAvatarEditor(props: UserAvatarEditorProps): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { Button, ButtonGroup, IconButton, Skeleton, Slider, Stack } from "@mui/material";
2
3
  import React from "react";
3
4
  import RotateLeftIcon from "@mui/icons-material/RotateLeft";
@@ -135,23 +136,5 @@ export function UserAvatarEditor(props) {
135
136
  };
136
137
  // Load the component
137
138
  const AE = React.lazy(() => import("react-avatar-editor"));
138
- return (React.createElement(Stack, { direction: "column", spacing: 0.5, width: containerWidth },
139
- React.createElement(FileUploadButton, { variant: "outlined", size: "medium", startIcon: React.createElement(ComputerIcon, null), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" } }, labels.upload),
140
- React.createElement(Stack, { direction: "row", spacing: 0.5 },
141
- React.createElement(React.Suspense, { fallback: React.createElement(Skeleton, { variant: "rounded", width: width, height: height }) },
142
- React.createElement(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate })),
143
- React.createElement(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready },
144
- React.createElement(Button, { onClick: () => handleRotate(90), title: labels.rotateRight },
145
- React.createElement(RotateRightIcon, null)),
146
- React.createElement(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft },
147
- React.createElement(RotateLeftIcon, null)),
148
- React.createElement(Button, { onClick: handleReset, title: labels.reset },
149
- React.createElement(ClearAllIcon, null)))),
150
- React.createElement(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center" },
151
- React.createElement(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false) },
152
- React.createElement(RemoveIcon, null)),
153
- React.createElement(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }),
154
- React.createElement(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true) },
155
- React.createElement(AddIcon, null))),
156
- React.createElement(Button, { ref: buttonRef, variant: "contained", startIcon: React.createElement(DoneIcon, null), disabled: !ready, onClick: handleDone }, labels.done)));
139
+ return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ComputerIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { multiple: false, accept: "image/png, image/jpeg" }, children: labels.upload }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: height }), children: _jsx(AE, { ref: ref, border: border, width: width, height: height, onLoadSuccess: handleLoad, image: previewImage ?? "", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
157
140
  }
package/lib/index.d.ts CHANGED
@@ -15,7 +15,6 @@ export * from "./messages/OperationMessageHandler";
15
15
  export * from "./messages/RefreshHandler";
16
16
  export * from "./messages/SignalRUser";
17
17
  export * from "./pages/CommonPage";
18
- export * from "./pages/CommonPageProps";
19
18
  export * from "./pages/DataGridPage";
20
19
  export * from "./pages/DataGridPageProps";
21
20
  export * from "./pages/DrawerHeader";
@@ -23,9 +22,7 @@ export * from "./pages/EditPage";
23
22
  export * from "./pages/FixedListPage";
24
23
  export * from "./pages/LeftDrawer";
25
24
  export * from "./pages/ListPage";
26
- export * from "./pages/ListPageProps";
27
25
  export * from "./pages/ResponsivePage";
28
- export * from "./pages/ResponsivePageProps";
29
26
  export * from "./pages/SearchPageProps";
30
27
  export * from "./pages/TablePage";
31
28
  export * from "./pages/UserMenu";
package/lib/index.js CHANGED
@@ -15,7 +15,6 @@ export * from "./messages/OperationMessageHandler";
15
15
  export * from "./messages/RefreshHandler";
16
16
  export * from "./messages/SignalRUser";
17
17
  export * from "./pages/CommonPage";
18
- export * from "./pages/CommonPageProps";
19
18
  export * from "./pages/DataGridPage";
20
19
  export * from "./pages/DataGridPageProps";
21
20
  export * from "./pages/DrawerHeader";
@@ -23,9 +22,7 @@ export * from "./pages/EditPage";
23
22
  export * from "./pages/FixedListPage";
24
23
  export * from "./pages/LeftDrawer";
25
24
  export * from "./pages/ListPage";
26
- export * from "./pages/ListPageProps";
27
25
  export * from "./pages/ResponsivePage";
28
- export * from "./pages/ResponsivePageProps";
29
26
  export * from "./pages/SearchPageProps";
30
27
  export * from "./pages/TablePage";
31
28
  export * from "./pages/UserMenu";
@@ -1,4 +1,3 @@
1
- import React from "react";
2
1
  import { OperationMessageHandlerAll } from "./OperationMessageHandler";
3
2
  /**
4
3
  * Operation message container properties
@@ -22,4 +21,4 @@ export type OperationMessageContainerProps = {
22
21
  * @param props Props
23
22
  * @returns Component
24
23
  */
25
- export declare function OperationMessageContainer(props: OperationMessageContainerProps): React.JSX.Element;
24
+ export declare function OperationMessageContainer(props: OperationMessageContainerProps): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
1
2
  import React from "react";
2
3
  import { MessageUtils } from "./MessageUtils";
3
4
  /**
@@ -38,5 +39,5 @@ export function OperationMessageContainer(props) {
38
39
  MessageUtils.offOperationMessage(my);
39
40
  };
40
41
  }, []);
41
- return React.createElement(React.Fragment, null);
42
+ return _jsx(React.Fragment, {});
42
43
  }
@@ -1,7 +1,72 @@
1
1
  import React from "react";
2
- import { CommonPageProps } from "./CommonPageProps";
2
+ import { ContainerProps, Theme } from "@mui/material";
3
+ import type { CustomFabSize } from "../CustomFabProps";
4
+ import type { IStateUpdate, ListItemReact } from "@etsoo/react";
5
+ import type { UserKey } from "@etsoo/appscript";
6
+ /**
7
+ * Common page props
8
+ * Default container id is 'pageContainer'
9
+ */
10
+ export interface CommonPageProps extends Omit<ContainerProps, "id"> {
11
+ /**
12
+ * Fab buttons
13
+ */
14
+ fabButtons?: React.ReactNode;
15
+ /**
16
+ * Fab size
17
+ */
18
+ fabSize?: CustomFabSize;
19
+ /**
20
+ * Fab flex column direction, undefined to hide it
21
+ */
22
+ fabColumnDirection?: boolean;
23
+ /**
24
+ * Fab padding adjust
25
+ */
26
+ fabPaddingAdjust?: number;
27
+ /**
28
+ * Add panel to the Fab
29
+ */
30
+ fabPanel?: boolean;
31
+ /**
32
+ * Fab lays in the top
33
+ */
34
+ fabTop?: ((theme: Theme, padding: {}) => object) | boolean;
35
+ /**
36
+ * More actions
37
+ */
38
+ moreActions?: ListItemReact[];
39
+ /**
40
+ * On refresh callback, only when authorized = true
41
+ */
42
+ onRefresh?: () => void | PromiseLike<void>;
43
+ /**
44
+ * On page update, when authorized = null or true case, may uses onRefresh
45
+ */
46
+ onUpdate?: () => void | PromiseLike<void>;
47
+ /**
48
+ * On page update, all cases with authorized
49
+ */
50
+ onUpdateAll?: IStateUpdate;
51
+ /**
52
+ * Paddings
53
+ */
54
+ paddings?: Record<string, string | number>;
55
+ /**
56
+ * Scroll container
57
+ */
58
+ scrollContainer?: HTMLElement | object;
59
+ /**
60
+ * Support back click
61
+ */
62
+ supportBack?: boolean;
63
+ /**
64
+ * State last changed fields
65
+ */
66
+ targetFields?: UserKey[];
67
+ }
3
68
  /**
4
69
  * Common page
5
70
  * @param props Props
6
71
  */
7
- export declare function CommonPage(props: CommonPageProps): React.JSX.Element;
72
+ export declare function CommonPage(props: CommonPageProps): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import React from "react";
2
3
  import { FabBox } from "../FabBox";
3
4
  import { ScrollTopFab } from "../ScrollTopFab";
@@ -40,28 +41,18 @@ export function CommonPage(props) {
40
41
  const theme = useTheme();
41
42
  const distance = React.useMemo(() => MUGlobal.updateWithTheme(fabPadding, theme.spacing), [fabPadding, theme.spacing]);
42
43
  // Return the UI
43
- return (React.createElement(React.Fragment, null,
44
- update && (React.createElement(ReactAppStateDetector, { targetFields: targetFields, update: update })),
45
- React.createElement(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest },
46
- React.createElement(FabBox, { sx: {
47
- zIndex: 1,
48
- ...(typeof fabTop === "function"
49
- ? fabTop(theme, fabPadding)
50
- : fabTop
51
- ? {
52
- top: MUGlobal.updateWithTheme(MUGlobal.increase(fabPadding, 7), theme.spacing),
53
- right: distance
54
- }
55
- : {
56
- bottom: distance,
57
- right: distance
58
- })
59
- }, columnDirection: fabColumnDirection, fabPanel: fabPanel },
60
- scrollContainer && (React.createElement(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })),
61
- fabButtons,
62
- onRefresh != null && (React.createElement(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } } },
63
- React.createElement(RefreshIcon, null))),
64
- React.createElement(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }),
65
- supportBack && React.createElement(BackButton, { title: labels.back, size: fabSize })),
66
- children)));
44
+ return (_jsxs(React.Fragment, { children: [update && (_jsx(ReactAppStateDetector, { targetFields: targetFields, update: update })), _jsxs(Container, { disableGutters: disableGutters, maxWidth: maxWidth, sx: sx, id: "page-container", ...rest, children: [_jsxs(FabBox, { sx: {
45
+ zIndex: 1,
46
+ ...(typeof fabTop === "function"
47
+ ? fabTop(theme, fabPadding)
48
+ : fabTop
49
+ ? {
50
+ top: MUGlobal.updateWithTheme(MUGlobal.increase(fabPadding, 7), theme.spacing),
51
+ right: distance
52
+ }
53
+ : {
54
+ bottom: distance,
55
+ right: distance
56
+ })
57
+ }, columnDirection: fabColumnDirection, fabPanel: fabPanel, children: [scrollContainer && (_jsx(ScrollTopFab, { size: fabSize, target: scrollContainer, title: labels.scrollTop })), fabButtons, onRefresh != null && (_jsx(Fab, { title: labels.refresh, size: fabSize, onClick: onRefresh, sx: { display: { xs: "none", md: "inherit" } }, children: _jsx(RefreshIcon, {}) })), _jsx(MoreFab, { size: fabSize, title: labels.more, actions: moreActions }), supportBack && _jsx(BackButton, { title: labels.back, size: fabSize })] }), children] })] }));
67
58
  }
@@ -1,9 +1,8 @@
1
1
  import { DataTypes } from "@etsoo/shared";
2
- import React from "react";
3
- import { DataGridPageProps } from "./DataGridPageProps";
2
+ import type { DataGridPageProps } from "./DataGridPageProps";
4
3
  /**
5
4
  * DataGrid page
6
5
  * @param props Props
7
6
  * @returns Component
8
7
  */
9
- export declare function DataGridPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: DataGridPageProps<T, F>): React.JSX.Element;
8
+ export declare function DataGridPage<T extends object, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate>(props: DataGridPageProps<T, F>): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { useCombinedRefs, useDimensions } from "@etsoo/react";
2
3
  import { Box, Stack } from "@mui/material";
3
4
  import React from "react";
@@ -85,7 +86,7 @@ export function DataGridPage(props) {
85
86
  const gridHeight = states.height;
86
87
  if (gridHeight == null)
87
88
  return;
88
- return (React.createElement(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
89
+ return (_jsx(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
89
90
  if (element != null)
90
91
  setStates({ element });
91
92
  }, ...rest }));
@@ -98,11 +99,7 @@ export function DataGridPage(props) {
98
99
  }, [ref, data]);
99
100
  const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
100
101
  // Layout
101
- return (React.createElement(CommonPage, { ...pageProps, scrollContainer: states.element },
102
- React.createElement(Stack, null,
103
- React.createElement(Box, { ref: dimensions[0][0], sx: {
104
- paddingBottom: pageProps.paddings
105
- } },
106
- React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
107
- list)));
102
+ return (_jsx(CommonPage, { ...pageProps, scrollContainer: states.element, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
103
+ paddingBottom: pageProps.paddings
104
+ }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
108
105
  }
@@ -1,6 +1,6 @@
1
- import { DataTypes } from "@etsoo/shared";
2
- import { DataGridExProps } from "../DataGridEx";
3
- import { SearchPageProps } from "./SearchPageProps";
1
+ import type { DataTypes } from "@etsoo/shared";
2
+ import type { DataGridExProps } from "../DataGridEx";
3
+ import type { SearchPageProps } from "./SearchPageProps";
4
4
  /**
5
5
  * DataGrid page props
6
6
  */
@@ -1,6 +1,6 @@
1
1
  import React, { FormEventHandler } from "react";
2
- import { CommonPageProps } from "./CommonPageProps";
3
- import { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
2
+ import { CommonPageProps } from "./CommonPage";
3
+ import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
4
4
  /**
5
5
  * Add / Edit page props
6
6
  */
@@ -43,4 +43,4 @@ export interface EditPageProps extends Omit<CommonPageProps, "onSubmit"> {
43
43
  * Add / Edit page
44
44
  * @param props Props
45
45
  */
46
- export declare function EditPage(props: EditPageProps): React.JSX.Element;
46
+ export declare function EditPage(props: EditPageProps): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { Button, Grid } from "@mui/material";
2
- import React from "react";
3
3
  import { MUGlobal } from "../MUGlobal";
4
4
  import { CommonPage } from "./CommonPage";
5
5
  import SaveIcon from "@mui/icons-material/Save";
@@ -16,18 +16,9 @@ export function EditPage(props) {
16
16
  const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
17
17
  // Labels
18
18
  const labels = Labels.CommonPage;
19
- return (React.createElement(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest },
20
- operationMessageHandler && (React.createElement(OperationMessageContainer, { handler: operationMessageHandler })),
21
- topPart,
22
- React.createElement("form", { onSubmit: onSubmit },
23
- React.createElement(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1 }, children),
24
- React.createElement(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
25
- top: "auto",
26
- bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
27
- paddingTop: paddings
28
- } },
29
- isEditing && onDelete && (React.createElement(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: React.createElement(DeleteIcon, { color: "warning" }) }, labels.delete)),
30
- React.createElement(Button, { variant: "contained", type: "submit", startIcon: React.createElement(SaveIcon, null), sx: { flexGrow: 1 }, disabled: submitDisabled }, labels.save),
31
- supportBack && React.createElement(BackButton, { title: labels.back }))),
32
- bottomPart));
19
+ return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
20
+ top: "auto",
21
+ bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
22
+ paddingTop: paddings
23
+ }, children: [isEditing && onDelete && (_jsx(Button, { color: "primary", variant: "outlined", onClick: () => onDelete(), startIcon: _jsx(DeleteIcon, { color: "warning" }), children: labels.delete })), _jsx(Button, { variant: "contained", type: "submit", startIcon: _jsx(SaveIcon, {}), sx: { flexGrow: 1 }, disabled: submitDisabled, children: labels.save }), supportBack && _jsx(BackButton, { title: labels.back })] })] }), bottomPart] }));
33
24
  }
@@ -1,6 +1,5 @@
1
1
  import { DataTypes } from "@etsoo/shared";
2
- import React from "react";
3
- import { ListPageProps } from "./ListPageProps";
2
+ import type { ListPageProps } from "./ListPage";
4
3
  /**
5
4
  * Fixed height list page
6
5
  * @param props Props
@@ -13,4 +12,4 @@ export declare function FixedListPage<T extends object, F extends DataTypes.Basi
13
12
  * @param rect Current rect data
14
13
  */
15
14
  adjustHeight?: (height: number, rect: DOMRect) => number;
16
- }): React.JSX.Element;
15
+ }): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
2
  import { useCombinedRefs, useDimensions } from "@etsoo/react";
2
3
  import { Box, Stack } from "@mui/material";
3
4
  import React from "react";
@@ -79,21 +80,16 @@ export function FixedListPage(props) {
79
80
  Math.round(rect.top + rect.height + 1);
80
81
  if (adjustHeight != null)
81
82
  height -= adjustHeight(height, rect);
82
- return (React.createElement(Box, { id: "list-container", sx: {
83
+ return (_jsx(Box, { id: "list-container", sx: {
83
84
  height: height + "px"
84
- } },
85
- React.createElement(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
85
+ }, children: _jsx(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
86
86
  if (element != null)
87
87
  updateScrollContainer(element);
88
- }, ...rest })));
88
+ }, ...rest }) }));
89
89
  }
90
90
  }, [rect]);
91
91
  const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
92
92
  const { paddings, ...pageRest } = pageProps;
93
93
  // Layout
94
- return (React.createElement(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer },
95
- React.createElement(Stack, null,
96
- React.createElement(Box, { ref: dimensions[0][0], sx: { padding: paddings } },
97
- React.createElement(SearchBar, { fields: f, onSubmit: onSubmit })),
98
- list)));
94
+ return (_jsx(CommonPage, { ...pageRest, paddings: {}, scrollContainer: scrollContainer, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: { padding: paddings }, children: _jsx(SearchBar, { fields: f, onSubmit: onSubmit }) }), list] }) }));
99
95
  }
@@ -32,4 +32,4 @@ export type LeftDrawerProps = React.PropsWithRef<{
32
32
  */
33
33
  onMinimize?: () => void;
34
34
  }>;
35
- export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): React.JSX.Element;
35
+ export declare function LeftDrawer(props: React.PropsWithChildren<LeftDrawerProps>): import("react/jsx-runtime").JSX.Element;