@etsoo/materialui 1.1.0 → 1.1.2
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/ItemList.d.ts +1 -1
- package/lib/ItemList.js +6 -5
- package/lib/TextFieldEx.d.ts +27 -3
- package/lib/TextFieldEx.js +11 -3
- package/package.json +89 -93
- package/src/ItemList.tsx +10 -6
- package/src/TextFieldEx.tsx +21 -2
- package/.eslintignore +0 -3
- package/.eslintrc.json +0 -38
- package/.prettierignore +0 -5
- package/.prettierrc +0 -6
package/lib/ItemList.d.ts
CHANGED
package/lib/ItemList.js
CHANGED
|
@@ -6,7 +6,6 @@ import { DataTypes } from '@etsoo/shared';
|
|
|
6
6
|
* @param props Properties
|
|
7
7
|
*/
|
|
8
8
|
export function ItemList(props) {
|
|
9
|
-
var _a;
|
|
10
9
|
// properties destructure
|
|
11
10
|
const { buttonLabel, className, color = 'primary', keepClick = false, items, idField = 'id', labelField = 'label', minWidth, icon, onClose, selectedValue, size = 'medium', title, variant = 'outlined' } = props;
|
|
12
11
|
// Get label
|
|
@@ -22,7 +21,7 @@ export function ItemList(props) {
|
|
|
22
21
|
// Dialog open or not state
|
|
23
22
|
const [open, setOpen] = React.useState(false);
|
|
24
23
|
// Default state
|
|
25
|
-
const defaultItem =
|
|
24
|
+
const defaultItem = items.find((item) => item[idField] === selectedValue);
|
|
26
25
|
// Current item
|
|
27
26
|
const [currentItem, setCurrentItem] = React.useState(defaultItem);
|
|
28
27
|
// Click handler
|
|
@@ -57,14 +56,16 @@ export function ItemList(props) {
|
|
|
57
56
|
}
|
|
58
57
|
};
|
|
59
58
|
return (React.createElement(React.Fragment, null,
|
|
60
|
-
React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : getLabel(currentItem)),
|
|
59
|
+
React.createElement(Button, { className: className, variant: variant, startIcon: icon, color: color, size: size, onClick: clickHandler }, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : (currentItem ? getLabel(currentItem) : undefined)),
|
|
61
60
|
React.createElement(Dialog, { "aria-labelledby": "dialog-title", open: open, onClose: closeHandler },
|
|
62
61
|
title && React.createElement(DialogTitle, { id: "dialog-title" }, title),
|
|
63
62
|
React.createElement(DialogContent, { sx: { minWidth } },
|
|
64
63
|
React.createElement(List, null, items.map((item) => {
|
|
65
64
|
const id = item[idField];
|
|
66
|
-
return (React.createElement(ListItemButton, { key: id, disabled: id ===
|
|
67
|
-
|
|
65
|
+
return (React.createElement(ListItemButton, { key: id, disabled: id ===
|
|
66
|
+
(currentItem
|
|
67
|
+
? currentItem[idField]
|
|
68
|
+
: undefined) && !keepClick, onClick: () => closeItemHandler(item) },
|
|
68
69
|
React.createElement(ListItemText, null, getLabel(item))));
|
|
69
70
|
}))))));
|
|
70
71
|
}
|
package/lib/TextFieldEx.d.ts
CHANGED
|
@@ -12,6 +12,12 @@ export type TextFieldExProps = TextFieldProps & {
|
|
|
12
12
|
* On enter click
|
|
13
13
|
*/
|
|
14
14
|
onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
15
|
+
/**
|
|
16
|
+
* On visibility
|
|
17
|
+
* @param input HTML input
|
|
18
|
+
* @returns Result
|
|
19
|
+
*/
|
|
20
|
+
onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
|
|
15
21
|
/**
|
|
16
22
|
* Is the field read only?
|
|
17
23
|
*/
|
|
@@ -44,6 +50,12 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
44
50
|
* On enter click
|
|
45
51
|
*/
|
|
46
52
|
onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* On visibility
|
|
55
|
+
* @param input HTML input
|
|
56
|
+
* @returns Result
|
|
57
|
+
*/
|
|
58
|
+
onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
|
|
47
59
|
/**
|
|
48
60
|
* Is the field read only?
|
|
49
61
|
*/
|
|
@@ -56,7 +68,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
56
68
|
* Show password button
|
|
57
69
|
*/
|
|
58
70
|
showPassword?: boolean | undefined;
|
|
59
|
-
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
|
|
71
|
+
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "onVisibility" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
|
|
60
72
|
/**
|
|
61
73
|
* Change delay (ms) to avoid repeatly dispatch onChange
|
|
62
74
|
*/
|
|
@@ -65,6 +77,12 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
65
77
|
* On enter click
|
|
66
78
|
*/
|
|
67
79
|
onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
80
|
+
/**
|
|
81
|
+
* On visibility
|
|
82
|
+
* @param input HTML input
|
|
83
|
+
* @returns Result
|
|
84
|
+
*/
|
|
85
|
+
onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
|
|
68
86
|
/**
|
|
69
87
|
* Is the field read only?
|
|
70
88
|
*/
|
|
@@ -77,7 +95,7 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
77
95
|
* Show password button
|
|
78
96
|
*/
|
|
79
97
|
showPassword?: boolean | undefined;
|
|
80
|
-
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
|
|
98
|
+
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "onVisibility" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
|
|
81
99
|
/**
|
|
82
100
|
* Change delay (ms) to avoid repeatly dispatch onChange
|
|
83
101
|
*/
|
|
@@ -86,6 +104,12 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
86
104
|
* On enter click
|
|
87
105
|
*/
|
|
88
106
|
onEnter?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
107
|
+
/**
|
|
108
|
+
* On visibility
|
|
109
|
+
* @param input HTML input
|
|
110
|
+
* @returns Result
|
|
111
|
+
*/
|
|
112
|
+
onVisibility?: ((input: HTMLInputElement) => void | boolean | Promise<boolean>) | undefined;
|
|
89
113
|
/**
|
|
90
114
|
* Is the field read only?
|
|
91
115
|
*/
|
|
@@ -98,4 +122,4 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
|
|
|
98
122
|
* Show password button
|
|
99
123
|
*/
|
|
100
124
|
showPassword?: boolean | undefined;
|
|
101
|
-
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;
|
|
125
|
+
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "label" | "slot" | "select" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "type" | "margin" | "size" | "name" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "required" | "rows" | "fullWidth" | "error" | "inputProps" | "onEnter" | "inputRef" | "focused" | "hiddenLabel" | "multiline" | "maxRows" | "minRows" | "changeDelay" | "InputLabelProps" | "InputProps" | "FormHelperTextProps" | "helperText" | "SelectProps" | "onVisibility" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;
|
package/lib/TextFieldEx.js
CHANGED
|
@@ -6,7 +6,7 @@ import { Keyboard } from '@etsoo/shared';
|
|
|
6
6
|
import { useCombinedRefs, useDelayedExecutor } from '@etsoo/react';
|
|
7
7
|
export const TextFieldEx = React.forwardRef((props, ref) => {
|
|
8
8
|
// Destructure
|
|
9
|
-
const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
|
|
9
|
+
const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
|
|
10
10
|
// State
|
|
11
11
|
const [errorText, updateErrorText] = React.useState();
|
|
12
12
|
const [empty, updateEmpty] = React.useState(true);
|
|
@@ -46,9 +46,14 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
|
|
|
46
46
|
if (e.isDefaultPrevented())
|
|
47
47
|
e.preventDefault();
|
|
48
48
|
};
|
|
49
|
-
const touchStart = (e) => {
|
|
49
|
+
const touchStart = async (e) => {
|
|
50
50
|
// Show the password
|
|
51
51
|
if (input) {
|
|
52
|
+
if (onVisibility) {
|
|
53
|
+
const result = await onVisibility(input);
|
|
54
|
+
if (result === false)
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
52
57
|
input.blur();
|
|
53
58
|
input.type = 'text';
|
|
54
59
|
}
|
|
@@ -56,8 +61,11 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
|
|
|
56
61
|
};
|
|
57
62
|
const touchEnd = (e) => {
|
|
58
63
|
// Show the password
|
|
59
|
-
if (input)
|
|
64
|
+
if (input) {
|
|
65
|
+
if (onVisibility)
|
|
66
|
+
return;
|
|
60
67
|
input.type = 'password';
|
|
68
|
+
}
|
|
61
69
|
preventDefault(e);
|
|
62
70
|
};
|
|
63
71
|
// Show password and/or clear button
|
package/package.json
CHANGED
|
@@ -1,97 +1,93 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
],
|
|
19
|
-
"testEnvironment": "jsdom",
|
|
20
|
-
"transform": {
|
|
21
|
-
"^.+\\.[t|j]sx?$": "babel-jest"
|
|
22
|
-
},
|
|
23
|
-
"transformIgnorePatterns": [
|
|
24
|
-
"/node_modules/(?!(@etsoo)/)"
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
|
-
"repository": {
|
|
28
|
-
"type": "git",
|
|
29
|
-
"url": "git+https://github.com/ETSOO/ReactMU.git"
|
|
30
|
-
},
|
|
31
|
-
"keywords": [
|
|
32
|
-
"React",
|
|
33
|
-
"MaterialUI",
|
|
34
|
-
"TypeScript",
|
|
35
|
-
"ETSOO",
|
|
36
|
-
"SmartERP",
|
|
37
|
-
"司友云平台",
|
|
38
|
-
"青岛亿速思维",
|
|
39
|
-
"上海亿商"
|
|
2
|
+
"name": "@etsoo/materialui",
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "TypeScript Material-UI Implementation",
|
|
5
|
+
"main": "lib/index.js",
|
|
6
|
+
"types": "lib/index.d.ts",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "tsc",
|
|
9
|
+
"format": "prettier --write src/**/*.{ts,tsx}",
|
|
10
|
+
"lint": "eslint --ext .ts,.tsx src/",
|
|
11
|
+
"test": "jest",
|
|
12
|
+
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
|
|
13
|
+
},
|
|
14
|
+
"jest": {
|
|
15
|
+
"automock": false,
|
|
16
|
+
"testMatch": [
|
|
17
|
+
"<rootDir>/__tests__/**/*.{ts,tsx}"
|
|
40
18
|
],
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
"url": "https://github.com/ETSOO/ReactMU/issues"
|
|
45
|
-
},
|
|
46
|
-
"homepage": "https://github.com/ETSOO/ReactMU#readme",
|
|
47
|
-
"dependencies": {
|
|
48
|
-
"@dnd-kit/core": "^6.0.6",
|
|
49
|
-
"@dnd-kit/sortable": "^7.0.1",
|
|
50
|
-
"@emotion/css": "^11.10.5",
|
|
51
|
-
"@emotion/react": "^11.10.5",
|
|
52
|
-
"@emotion/styled": "^11.10.5",
|
|
53
|
-
"@etsoo/appscript": "^1.3.49",
|
|
54
|
-
"@etsoo/notificationbase": "^1.1.20",
|
|
55
|
-
"@etsoo/react": "^1.6.36",
|
|
56
|
-
"@etsoo/shared": "^1.1.84",
|
|
57
|
-
"@mui/icons-material": "^5.11.0",
|
|
58
|
-
"@mui/material": "^5.11.1",
|
|
59
|
-
"@types/pica": "^9.0.1",
|
|
60
|
-
"@types/pulltorefreshjs": "^0.1.5",
|
|
61
|
-
"@types/react": "^18.0.26",
|
|
62
|
-
"@types/react-avatar-editor": "^13.0.0",
|
|
63
|
-
"@types/react-dom": "^18.0.9",
|
|
64
|
-
"@types/react-input-mask": "^3.0.2",
|
|
65
|
-
"@types/react-window": "^1.8.5",
|
|
66
|
-
"pica": "^9.0.1",
|
|
67
|
-
"pulltorefreshjs": "^0.1.22",
|
|
68
|
-
"react": "^18.2.0",
|
|
69
|
-
"react-avatar-editor": "^13.0.0",
|
|
70
|
-
"react-dom": "^18.2.0",
|
|
71
|
-
"react-draggable": "^4.4.5",
|
|
72
|
-
"react-imask": "^6.4.3",
|
|
73
|
-
"react-router-dom": "^6.6.0",
|
|
74
|
-
"react-window": "^1.8.8"
|
|
19
|
+
"testEnvironment": "jsdom",
|
|
20
|
+
"transform": {
|
|
21
|
+
"^.+\\.[t|j]sx?$": "babel-jest"
|
|
75
22
|
},
|
|
76
|
-
"
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
23
|
+
"transformIgnorePatterns": [
|
|
24
|
+
"/node_modules/(?!(@etsoo)/)"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/ETSOO/ReactMU.git"
|
|
30
|
+
},
|
|
31
|
+
"keywords": [
|
|
32
|
+
"React",
|
|
33
|
+
"MaterialUI",
|
|
34
|
+
"TypeScript",
|
|
35
|
+
"ETSOO",
|
|
36
|
+
"SmartERP",
|
|
37
|
+
"司友云平台",
|
|
38
|
+
"青岛亿速思维",
|
|
39
|
+
"上海亿商"
|
|
40
|
+
],
|
|
41
|
+
"author": "ETSOO",
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"bugs": {
|
|
44
|
+
"url": "https://github.com/ETSOO/ReactMU/issues"
|
|
45
|
+
},
|
|
46
|
+
"homepage": "https://github.com/ETSOO/ReactMU#readme",
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@dnd-kit/core": "^6.0.6",
|
|
49
|
+
"@dnd-kit/sortable": "^7.0.1",
|
|
50
|
+
"@emotion/css": "^11.10.5",
|
|
51
|
+
"@emotion/react": "^11.10.5",
|
|
52
|
+
"@emotion/styled": "^11.10.5",
|
|
53
|
+
"@etsoo/appscript": "^1.3.50",
|
|
54
|
+
"@etsoo/notificationbase": "^1.1.20",
|
|
55
|
+
"@etsoo/react": "^1.6.37",
|
|
56
|
+
"@etsoo/shared": "^1.1.84",
|
|
57
|
+
"@mui/icons-material": "^5.11.0",
|
|
58
|
+
"@mui/material": "^5.11.2",
|
|
59
|
+
"@types/pica": "^9.0.1",
|
|
60
|
+
"@types/pulltorefreshjs": "^0.1.5",
|
|
61
|
+
"@types/react": "^18.0.26",
|
|
62
|
+
"@types/react-avatar-editor": "^13.0.0",
|
|
63
|
+
"@types/react-dom": "^18.0.10",
|
|
64
|
+
"@types/react-input-mask": "^3.0.2",
|
|
65
|
+
"@types/react-window": "^1.8.5",
|
|
66
|
+
"pica": "^9.0.1",
|
|
67
|
+
"pulltorefreshjs": "^0.1.22",
|
|
68
|
+
"react": "^18.2.0",
|
|
69
|
+
"react-avatar-editor": "^13.0.0",
|
|
70
|
+
"react-dom": "^18.2.0",
|
|
71
|
+
"react-draggable": "^4.4.5",
|
|
72
|
+
"react-imask": "^6.4.3",
|
|
73
|
+
"react-router-dom": "^6.6.1",
|
|
74
|
+
"react-window": "^1.8.8"
|
|
75
|
+
},
|
|
76
|
+
"devDependencies": {
|
|
77
|
+
"@babel/cli": "^7.20.7",
|
|
78
|
+
"@babel/core": "^7.20.7",
|
|
79
|
+
"@babel/plugin-transform-runtime": "^7.19.6",
|
|
80
|
+
"@babel/preset-env": "^7.20.2",
|
|
81
|
+
"@babel/preset-react": "^7.18.6",
|
|
82
|
+
"@babel/preset-typescript": "^7.18.6",
|
|
83
|
+
"@babel/runtime-corejs3": "^7.20.7",
|
|
84
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
85
|
+
"@testing-library/react": "^13.4.0",
|
|
86
|
+
"@types/jest": "^29.2.4",
|
|
87
|
+
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
|
88
|
+
"@typescript-eslint/parser": "^5.47.1",
|
|
89
|
+
"jest": "^29.3.1",
|
|
90
|
+
"jest-environment-jsdom": "^29.3.1",
|
|
91
|
+
"typescript": "^4.9.4"
|
|
92
|
+
}
|
|
97
93
|
}
|
package/src/ItemList.tsx
CHANGED
|
@@ -66,7 +66,7 @@ export interface ItemListProps<
|
|
|
66
66
|
/**
|
|
67
67
|
* Close event
|
|
68
68
|
*/
|
|
69
|
-
onClose?(item: T, changed: boolean): void;
|
|
69
|
+
onClose?(item: T | undefined, changed: boolean): void;
|
|
70
70
|
|
|
71
71
|
/**
|
|
72
72
|
* Current selected language
|
|
@@ -134,8 +134,9 @@ export function ItemList<
|
|
|
134
134
|
const [open, setOpen] = React.useState(false);
|
|
135
135
|
|
|
136
136
|
// Default state
|
|
137
|
-
const defaultItem =
|
|
138
|
-
|
|
137
|
+
const defaultItem: T | undefined = items.find(
|
|
138
|
+
(item) => item[idField] === selectedValue
|
|
139
|
+
);
|
|
139
140
|
|
|
140
141
|
// Current item
|
|
141
142
|
const [currentItem, setCurrentItem] = React.useState(defaultItem);
|
|
@@ -188,7 +189,8 @@ export function ItemList<
|
|
|
188
189
|
size={size}
|
|
189
190
|
onClick={clickHandler}
|
|
190
191
|
>
|
|
191
|
-
{buttonLabel ??
|
|
192
|
+
{buttonLabel ??
|
|
193
|
+
(currentItem ? getLabel(currentItem) : undefined)}
|
|
192
194
|
</Button>
|
|
193
195
|
<Dialog
|
|
194
196
|
aria-labelledby="dialog-title"
|
|
@@ -204,8 +206,10 @@ export function ItemList<
|
|
|
204
206
|
<ListItemButton
|
|
205
207
|
key={id as unknown as React.Key}
|
|
206
208
|
disabled={
|
|
207
|
-
id ===
|
|
208
|
-
|
|
209
|
+
id ===
|
|
210
|
+
(currentItem
|
|
211
|
+
? currentItem[idField]
|
|
212
|
+
: undefined) && !keepClick
|
|
209
213
|
}
|
|
210
214
|
onClick={() => closeItemHandler(item)}
|
|
211
215
|
>
|
package/src/TextFieldEx.tsx
CHANGED
|
@@ -24,6 +24,15 @@ export type TextFieldExProps = TextFieldProps & {
|
|
|
24
24
|
*/
|
|
25
25
|
onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
26
26
|
|
|
27
|
+
/**
|
|
28
|
+
* On visibility
|
|
29
|
+
* @param input HTML input
|
|
30
|
+
* @returns Result
|
|
31
|
+
*/
|
|
32
|
+
onVisibility?: (
|
|
33
|
+
input: HTMLInputElement
|
|
34
|
+
) => void | boolean | Promise<boolean>;
|
|
35
|
+
|
|
27
36
|
/**
|
|
28
37
|
* Is the field read only?
|
|
29
38
|
*/
|
|
@@ -65,6 +74,7 @@ export const TextFieldEx = React.forwardRef<
|
|
|
65
74
|
onChange,
|
|
66
75
|
onKeyPress,
|
|
67
76
|
onEnter,
|
|
77
|
+
onVisibility,
|
|
68
78
|
inputRef,
|
|
69
79
|
readOnly,
|
|
70
80
|
showClear,
|
|
@@ -121,9 +131,14 @@ export const TextFieldEx = React.forwardRef<
|
|
|
121
131
|
if (e.isDefaultPrevented()) e.preventDefault();
|
|
122
132
|
};
|
|
123
133
|
|
|
124
|
-
const touchStart = (e: React.TouchEvent | React.MouseEvent) => {
|
|
134
|
+
const touchStart = async (e: React.TouchEvent | React.MouseEvent) => {
|
|
125
135
|
// Show the password
|
|
126
136
|
if (input) {
|
|
137
|
+
if (onVisibility) {
|
|
138
|
+
const result = await onVisibility(input);
|
|
139
|
+
if (result === false) return;
|
|
140
|
+
}
|
|
141
|
+
|
|
127
142
|
input.blur();
|
|
128
143
|
input.type = 'text';
|
|
129
144
|
}
|
|
@@ -132,7 +147,11 @@ export const TextFieldEx = React.forwardRef<
|
|
|
132
147
|
|
|
133
148
|
const touchEnd = (e: React.TouchEvent | React.MouseEvent) => {
|
|
134
149
|
// Show the password
|
|
135
|
-
if (input)
|
|
150
|
+
if (input) {
|
|
151
|
+
if (onVisibility) return;
|
|
152
|
+
|
|
153
|
+
input.type = 'password';
|
|
154
|
+
}
|
|
136
155
|
preventDefault(e);
|
|
137
156
|
};
|
|
138
157
|
|
package/.eslintignore
DELETED
package/.eslintrc.json
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"env": {
|
|
3
|
-
"browser": true,
|
|
4
|
-
"node": true,
|
|
5
|
-
"es6": true,
|
|
6
|
-
"jest": true
|
|
7
|
-
},
|
|
8
|
-
"extends": ["plugin:react/recommended", "airbnb-base", "prettier"],
|
|
9
|
-
"parser": "@typescript-eslint/parser",
|
|
10
|
-
"parserOptions": {
|
|
11
|
-
"ecmaFeatures": {
|
|
12
|
-
"jsx": true
|
|
13
|
-
},
|
|
14
|
-
"ecmaVersion": 6,
|
|
15
|
-
"sourceType": "module"
|
|
16
|
-
},
|
|
17
|
-
"plugins": ["@typescript-eslint"],
|
|
18
|
-
"rules": {
|
|
19
|
-
"class-methods-use-this": "off",
|
|
20
|
-
"import/extensions": ["error", "never"],
|
|
21
|
-
"import/prefer-default-export": "off",
|
|
22
|
-
"@typescript-eslint/no-unused-vars": ["error"]
|
|
23
|
-
},
|
|
24
|
-
"settings": {
|
|
25
|
-
"import/resolver": {
|
|
26
|
-
"node": {
|
|
27
|
-
"paths": ["src"],
|
|
28
|
-
"extensions": [".ts", ".tsx"]
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
"react": {
|
|
32
|
-
"createClass": "createReactClass",
|
|
33
|
-
"pragma": "React",
|
|
34
|
-
"version": "detect",
|
|
35
|
-
"flowVersion": "0.53"
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
package/.prettierignore
DELETED