@etsoo/react 1.4.91 → 1.4.95

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.
package/lib/index.d.ts CHANGED
@@ -31,6 +31,7 @@ export * from './mu/texts/DateText';
31
31
  export * from './mu/texts/MoneyText';
32
32
  export * from './mu/texts/NumberText';
33
33
  export * from './mu/AuditDisplay';
34
+ export * from './mu/BridgeCloseButton';
34
35
  export * from './mu/ButtonLink';
35
36
  export * from './mu/ComboBox';
36
37
  export * from './mu/CountdownButton';
package/lib/index.js CHANGED
@@ -34,6 +34,7 @@ export * from './mu/texts/DateText';
34
34
  export * from './mu/texts/MoneyText';
35
35
  export * from './mu/texts/NumberText';
36
36
  export * from './mu/AuditDisplay';
37
+ export * from './mu/BridgeCloseButton';
37
38
  export * from './mu/ButtonLink';
38
39
  export * from './mu/ComboBox';
39
40
  export * from './mu/CountdownButton';
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ import { IBridgeHost } from '@etsoo/appscript';
3
+ import { IconButtonProps } from '@mui/material';
4
+ /**
5
+ * Bridge close button props
6
+ */
7
+ export interface BridgeCloseButtonProps extends IconButtonProps {
8
+ /**
9
+ * Validate the host
10
+ * @param host Host
11
+ */
12
+ validate(host: IBridgeHost): boolean;
13
+ }
14
+ /**
15
+ * Bridge close button
16
+ * @param props Props
17
+ * @returns Component
18
+ */
19
+ export declare function BridgeCloseButton(props: BridgeCloseButtonProps): JSX.Element;
@@ -0,0 +1,33 @@
1
+ import { BridgeUtils } from '@etsoo/appscript';
2
+ import CloseIcon from '@mui/icons-material/Close';
3
+ import { IconButton } from '@mui/material';
4
+ import React from 'react';
5
+ import { globalApp } from '../app/ReactApp';
6
+ /**
7
+ * Bridge close button
8
+ * @param props Props
9
+ * @returns Component
10
+ */
11
+ export function BridgeCloseButton(props) {
12
+ // Destruct
13
+ const { onClick, title = typeof globalApp === 'undefined'
14
+ ? 'Close'
15
+ : globalApp.get('close'), validate, ...rest } = props;
16
+ // Host
17
+ const host = BridgeUtils.host;
18
+ if (host == null || (validate && validate(host) === false)) {
19
+ return React.createElement(React.Fragment, null);
20
+ }
21
+ // Click handler
22
+ const onClickLocal = (event) => {
23
+ if (onClick)
24
+ onClick(event);
25
+ host.exit();
26
+ };
27
+ return (React.createElement(IconButton, { "aria-label": "close", color: "primary", onClick: onClickLocal, sx: {
28
+ position: 'absolute',
29
+ top: (theme) => theme.spacing(1),
30
+ right: (theme) => theme.spacing(1)
31
+ }, ...rest },
32
+ React.createElement(CloseIcon, null)));
33
+ }
@@ -20,4 +20,4 @@ export declare type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabl
20
20
  * @param props Props
21
21
  * @returns Button
22
22
  */
23
- export declare const CountdownButton: React.ForwardRefExoticComponent<Pick<CountdownButtonProps, "name" | "role" | "children" | "form" | "slot" | "title" | "value" | "fullWidth" | "type" | keyof import("@mui/material/OverridableComponent").CommonProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "disableElevation" | "disableFocusRipple" | "href" | "size" | "startIcon" | "variant" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "onAction"> & React.RefAttributes<HTMLButtonElement>>;
23
+ export declare const CountdownButton: React.ForwardRefExoticComponent<Pick<CountdownButtonProps, "name" | "role" | "children" | "form" | "slot" | "title" | "value" | "fullWidth" | "type" | keyof import("@mui/material/OverridableComponent").CommonProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "href" | "size" | "startIcon" | "variant" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "onAction"> & React.RefAttributes<HTMLButtonElement>>;
@@ -84,9 +84,6 @@ export function ListMoreDisplay(props) {
84
84
  ref.isMounted = false;
85
85
  };
86
86
  }, []);
87
- // Loading
88
- if (states.items == null)
89
- return React.createElement(CircularProgress, { size: 20 });
90
87
  return (React.createElement(React.Fragment, null,
91
88
  headerRenderer && headerRenderer(reset),
92
89
  React.createElement(Card, { ...rest },
@@ -94,7 +91,7 @@ export function ListMoreDisplay(props) {
94
91
  React.createElement(CardContent, { sx: {
95
92
  paddingTop: 0,
96
93
  paddingBottom: states.completed ? 0 : 'inherit'
97
- } }, states.items.map((item, index) => children(item, index))),
94
+ } }, states.items == null ? (React.createElement(CircularProgress, { size: 20 })) : (states.items.map((item, index) => children(item, index)))),
98
95
  !states.completed && (React.createElement(CardActions, { sx: { justifyContent: 'flex-end' } },
99
96
  React.createElement(LoadingButton, { onClick: async () => await loadDataLocal() }, moreLabel))))));
100
97
  }
@@ -267,5 +267,9 @@ export function SearchBar(props) {
267
267
  if (form)
268
268
  state.moreForm = form;
269
269
  } },
270
- React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2 }, moreItems))))));
270
+ React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
271
+ '& > :not(style)': {
272
+ minWidth: '100px'
273
+ }
274
+ } }, moreItems))))));
271
275
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.4.91",
3
+ "version": "1.4.95",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
50
50
  "@emotion/react": "^11.7.1",
51
51
  "@emotion/style": "^0.8.0",
52
52
  "@emotion/styled": "^11.6.0",
53
- "@etsoo/appscript": "^1.2.37",
53
+ "@etsoo/appscript": "^1.2.39",
54
54
  "@etsoo/notificationbase": "^1.1.1",
55
- "@etsoo/shared": "^1.1.10",
56
- "@mui/icons-material": "^5.3.1",
57
- "@mui/material": "^5.4.0",
55
+ "@etsoo/shared": "^1.1.11",
56
+ "@mui/icons-material": "^5.4.1",
57
+ "@mui/material": "^5.4.1",
58
58
  "@reach/router": "^1.3.4",
59
59
  "@types/pica": "^9.0.0",
60
60
  "@types/pulltorefreshjs": "^0.1.5",
@@ -77,19 +77,19 @@
77
77
  },
78
78
  "devDependencies": {
79
79
  "@babel/cli": "^7.17.0",
80
- "@babel/core": "^7.17.0",
80
+ "@babel/core": "^7.17.2",
81
81
  "@babel/plugin-transform-runtime": "^7.17.0",
82
82
  "@babel/preset-env": "^7.16.11",
83
- "@babel/runtime-corejs3": "^7.17.0",
83
+ "@babel/runtime-corejs3": "^7.17.2",
84
84
  "@types/jest": "^27.4.0",
85
85
  "@types/react-test-renderer": "^17.0.1",
86
- "@typescript-eslint/eslint-plugin": "^5.10.2",
87
- "@typescript-eslint/parser": "^5.10.2",
86
+ "@typescript-eslint/eslint-plugin": "^5.11.0",
87
+ "@typescript-eslint/parser": "^5.11.0",
88
88
  "eslint": "^8.8.0",
89
89
  "eslint-config-airbnb-base": "^15.0.0",
90
90
  "eslint-plugin-import": "^2.25.4",
91
91
  "eslint-plugin-react": "^7.28.0",
92
- "jest": "^27.5.0",
92
+ "jest": "^27.5.1",
93
93
  "react-test-renderer": "^17.0.2",
94
94
  "ts-jest": "^27.1.3",
95
95
  "typescript": "^4.5.5"
package/src/index.ts CHANGED
@@ -38,6 +38,7 @@ export * from './mu/texts/MoneyText';
38
38
  export * from './mu/texts/NumberText';
39
39
 
40
40
  export * from './mu/AuditDisplay';
41
+ export * from './mu/BridgeCloseButton';
41
42
  export * from './mu/ButtonLink';
42
43
  export * from './mu/ComboBox';
43
44
  export * from './mu/CountdownButton';
@@ -0,0 +1,62 @@
1
+ import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
2
+ import CloseIcon from '@mui/icons-material/Close';
3
+ import { IconButton, IconButtonProps } from '@mui/material';
4
+ import React from 'react';
5
+ import { globalApp } from '../app/ReactApp';
6
+
7
+ /**
8
+ * Bridge close button props
9
+ */
10
+ export interface BridgeCloseButtonProps extends IconButtonProps {
11
+ /**
12
+ * Validate the host
13
+ * @param host Host
14
+ */
15
+ validate(host: IBridgeHost): boolean;
16
+ }
17
+
18
+ /**
19
+ * Bridge close button
20
+ * @param props Props
21
+ * @returns Component
22
+ */
23
+ export function BridgeCloseButton(props: BridgeCloseButtonProps) {
24
+ // Destruct
25
+ const {
26
+ onClick,
27
+ title = typeof globalApp === 'undefined'
28
+ ? 'Close'
29
+ : globalApp.get('close'),
30
+ validate,
31
+ ...rest
32
+ } = props;
33
+
34
+ // Host
35
+ const host = BridgeUtils.host;
36
+
37
+ if (host == null || (validate && validate(host) === false)) {
38
+ return <React.Fragment />;
39
+ }
40
+
41
+ // Click handler
42
+ const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
43
+ if (onClick) onClick(event);
44
+ host.exit();
45
+ };
46
+
47
+ return (
48
+ <IconButton
49
+ aria-label="close"
50
+ color="primary"
51
+ onClick={onClickLocal}
52
+ sx={{
53
+ position: 'absolute',
54
+ top: (theme) => theme.spacing(1),
55
+ right: (theme) => theme.spacing(1)
56
+ }}
57
+ {...rest}
58
+ >
59
+ <CloseIcon />
60
+ </IconButton>
61
+ );
62
+ }
@@ -170,9 +170,6 @@ export function ListMoreDisplay<
170
170
  };
171
171
  }, []);
172
172
 
173
- // Loading
174
- if (states.items == null) return <CircularProgress size={20} />;
175
-
176
173
  return (
177
174
  <React.Fragment>
178
175
  {headerRenderer && headerRenderer(reset)}
@@ -184,7 +181,11 @@ export function ListMoreDisplay<
184
181
  paddingBottom: states.completed ? 0 : 'inherit'
185
182
  }}
186
183
  >
187
- {states.items.map((item, index) => children(item, index))}
184
+ {states.items == null ? (
185
+ <CircularProgress size={20} />
186
+ ) : (
187
+ states.items.map((item, index) => children(item, index))
188
+ )}
188
189
  </CardContent>
189
190
  {!states.completed && (
190
191
  <CardActions sx={{ justifyContent: 'flex-end' }}>
@@ -397,6 +397,11 @@ export function SearchBar(props: SearchBarProps) {
397
397
  alignItems="stretch"
398
398
  spacing={2}
399
399
  padding={2}
400
+ sx={{
401
+ '& > :not(style)': {
402
+ minWidth: '100px'
403
+ }
404
+ }}
400
405
  >
401
406
  {moreItems}
402
407
  </Stack>