@etsoo/react 1.3.5 → 1.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/app/InputDialogProps.d.ts +4 -3
  2. package/lib/mu/TextFieldEx.js +20 -9
  3. package/package.json +3 -3
  4. package/src/app/InputDialogProps.ts +6 -3
  5. package/src/mu/TextFieldEx.tsx +24 -13
package/lib/app/InputDialogProps.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { NotificationReturn } from '@etsoo/notificationbase';
1
+ /// <reference types="react" />
2
+ import { NotificationContent, NotificationReturn } from '@etsoo/notificationbase';
2
3
  import { NotificationReactCallProps } from '../notifier/Notifier';
3
4
  /**
4
5
  * Input dialog props
@@ -7,11 +8,11 @@ export declare type InputDialogProps = NotificationReactCallProps & {
7
8
  /**
8
9
  * Title
9
10
  */
10
- title: string;
11
+ title: NotificationContent<React.ReactNode>;
11
12
  /**
12
13
  * Message
13
14
  */
14
- message: string;
15
+ message: NotificationContent<React.ReactNode>;
15
16
  /**
16
17
  * Callback
17
18
  */
package/lib/mu/TextFieldEx.js CHANGED
@@ -8,7 +8,6 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
8
8
  const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
9
9
  // State
10
10
  const [errorText, updateErrorText] = React.useState();
11
- const [passwordVisible, updatePasswordVisible] = React.useState();
12
11
  const [empty, updateEmpty] = React.useState(true);
13
12
  // Read only
14
13
  if (readOnly != null)
@@ -20,10 +19,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
20
19
  errorEx = true;
21
20
  helperTextEx = errorText;
22
21
  }
23
- let typeEx = type;
24
- if (showPassword) {
25
- typeEx = passwordVisible ? 'text' : 'password';
26
- }
22
+ let typeEx = showPassword ? 'password' : type;
27
23
  let input;
28
24
  const localRef = (ref) => {
29
25
  input = ref;
@@ -42,16 +38,31 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
42
38
  }
43
39
  updateEmpty(true);
44
40
  };
41
+ const preventDefault = (e) => {
42
+ // Prevent long press
43
+ if (e.isPropagationStopped())
44
+ e.stopPropagation();
45
+ if (e.isDefaultPrevented())
46
+ e.preventDefault();
47
+ };
45
48
  const touchStart = (e) => {
46
- // Avoid focus case selecting all text
47
- input === null || input === void 0 ? void 0 : input.blur();
48
49
  // Show the password
49
- updatePasswordVisible(true);
50
+ if (input) {
51
+ input.blur();
52
+ input.type = 'text';
53
+ }
54
+ preventDefault(e);
55
+ };
56
+ const touchEnd = (e) => {
57
+ // Show the password
58
+ if (input)
59
+ input.type = 'password';
60
+ preventDefault(e);
50
61
  };
51
62
  // Show password and/or clear button
52
63
  if (!empty && (showPassword || showClear)) {
53
64
  InputProps.endAdornment = (React.createElement(InputAdornment, { position: "end" },
54
- showPassword && (React.createElement(IconButton, { tabIndex: -1, onMouseDown: () => updatePasswordVisible(true), onMouseUp: () => updatePasswordVisible(false), onTouchStart: touchStart, onTouchCancel: () => updatePasswordVisible(false), onTouchEnd: () => updatePasswordVisible(false) },
65
+ showPassword && (React.createElement(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd },
55
66
  React.createElement(Visibility, null))),
56
67
  showClear && (React.createElement(IconButton, { onClick: clearClick, tabIndex: -1 },
57
68
  React.createElement(Clear, null)))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/react",
3
- "version": "1.3.5",
3
+ "version": "1.3.9",
4
4
  "description": "TypeScript ReactJs framework",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
50
50
  "@emotion/react": "^11.5.0",
51
51
  "@emotion/style": "^0.8.0",
52
52
  "@emotion/styled": "^11.3.0",
53
- "@etsoo/appscript": "^1.1.33",
53
+ "@etsoo/appscript": "^1.1.34",
54
54
  "@etsoo/notificationbase": "^1.0.92",
55
- "@etsoo/shared": "^1.0.71",
55
+ "@etsoo/shared": "^1.0.72",
56
56
  "@mui/icons-material": "^5.0.5",
57
57
  "@mui/material": "^5.0.6",
58
58
  "@reach/router": "^1.3.4",
package/src/app/InputDialogProps.ts CHANGED
@@ -1,4 +1,7 @@
1
- import { NotificationReturn } from '@etsoo/notificationbase';
1
+ import {
2
+ NotificationContent,
3
+ NotificationReturn
4
+ } from '@etsoo/notificationbase';
2
5
  import { NotificationReactCallProps } from '../notifier/Notifier';
3
6
 
4
7
  /**
@@ -8,12 +11,12 @@ export type InputDialogProps = NotificationReactCallProps & {
8
11
  /**
9
12
  * Title
10
13
  */
11
- title: string;
14
+ title: NotificationContent<React.ReactNode>;
12
15
 
13
16
  /**
14
17
  * Message
15
18
  */
16
- message: string;
19
+ message: NotificationContent<React.ReactNode>;
17
20
 
18
21
  /**
19
22
  * Callback
package/src/mu/TextFieldEx.tsx CHANGED
@@ -75,7 +75,6 @@ export const TextFieldEx = React.forwardRef<
75
75
 
76
76
  // State
77
77
  const [errorText, updateErrorText] = React.useState<React.ReactNode>();
78
- const [passwordVisible, updatePasswordVisible] = React.useState<boolean>();
79
78
  const [empty, updateEmpty] = React.useState<boolean>(true);
80
79
 
81
80
  // Read only
@@ -89,10 +88,7 @@ export const TextFieldEx = React.forwardRef<
89
88
  helperTextEx = errorText;
90
89
  }
91
90
 
92
- let typeEx = type;
93
- if (showPassword) {
94
- typeEx = passwordVisible ? 'text' : 'password';
95
- }
91
+ let typeEx = showPassword ? 'password' : type;
96
92
 
97
93
  let input: HTMLInputElement | undefined;
98
94
  const localRef = (ref: HTMLInputElement) => {
@@ -117,12 +113,26 @@ export const TextFieldEx = React.forwardRef<
117
113
  updateEmpty(true);
118
114
  };
119
115
 
120
- const touchStart = (e: React.TouchEvent) => {
121
- // Avoid focus case selecting all text
122
- input?.blur();
116
+ const preventDefault = (e: React.TouchEvent | React.MouseEvent) => {
117
+ // Prevent long press
118
+ if (e.isPropagationStopped()) e.stopPropagation();
119
+
120
+ if (e.isDefaultPrevented()) e.preventDefault();
121
+ };
122
+
123
+ const touchStart = (e: React.TouchEvent | React.MouseEvent) => {
124
+ // Show the password
125
+ if (input) {
126
+ input.blur();
127
+ input.type = 'text';
128
+ }
129
+ preventDefault(e);
130
+ };
123
131
 
132
+ const touchEnd = (e: React.TouchEvent | React.MouseEvent) => {
124
133
  // Show the password
125
- updatePasswordVisible(true);
134
+ if (input) input.type = 'password';
135
+ preventDefault(e);
126
136
  };
127
137
 
128
138
  // Show password and/or clear button
@@ -132,11 +142,12 @@ export const TextFieldEx = React.forwardRef<
132
142
  {showPassword && (
133
143
  <IconButton
134
144
  tabIndex={-1}
135
- onMouseDown={() => updatePasswordVisible(true)}
136
- onMouseUp={() => updatePasswordVisible(false)}
145
+ onContextMenu={(event) => event.preventDefault()}
146
+ onMouseDown={touchStart}
147
+ onMouseUp={touchEnd}
137
148
  onTouchStart={touchStart}
138
- onTouchCancel={() => updatePasswordVisible(false)}
139
- onTouchEnd={() => updatePasswordVisible(false)}
149
+ onTouchCancel={touchEnd}
150
+ onTouchEnd={touchEnd}
140
151
  >
141
152
  <Visibility />
142
153
  </IconButton>