@etsoo/materialui 1.3.82 → 1.3.84

package/lib/TextFieldEx.d.ts

@@ -9,9 +9,13 @@ export type TextFieldExProps = TextFieldProps & {
      */
     changeDelay?: number;
     /**
-     * Click clear button callback, return false to prevent the clear action
+     * Clear button label
      */
-    onClear?: () => boolean | void;
+    clearLabel?: string;
+    /**
+     * Click clear button callback
+     */
+    onClear?: (doClear: () => void) => void;
     /**
      * On enter click
      */
@@ -51,9 +55,13 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
      */
     changeDelay?: number;
     /**
-     * Click clear button callback, return false to prevent the clear action
+     * Clear button label
+     */
+    clearLabel?: string;
+    /**
+     * Click clear button callback
      */
-    onClear?: () => boolean | void;
+    onClear?: (doClear: () => void) => void;
     /**
      * On enter click
      */
@@ -82,9 +90,13 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
      */
     changeDelay?: number;
     /**
-     * Click clear button callback, return false to prevent the clear action
+     * Clear button label
      */
-    onClear?: () => boolean | void;
+    clearLabel?: string;
+    /**
+     * Click clear button callback
+     */
+    onClear?: (doClear: () => void) => void;
     /**
      * On enter click
      */
@@ -113,9 +125,13 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("
      */
     changeDelay?: number;
     /**
-     * Click clear button callback, return false to prevent the clear action
+     * Clear button label
+     */
+    clearLabel?: string;
+    /**
+     * Click clear button callback
      */
-    onClear?: () => boolean | void;
+    onClear?: (doClear: () => void) => void;
     /**
      * On enter click
      */

package/lib/TextFieldEx.js

@@ -5,9 +5,12 @@ import { MUGlobal } from "./MUGlobal";
 import { Clear, Visibility } from "@mui/icons-material";
 import { Keyboard } from "@etsoo/shared";
 import { ReactUtils, useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
+import { globalApp } from "./app/ReactApp";
 export const TextFieldEx = React.forwardRef((props, ref) => {
+    // Labels
+    const { showIt, clearInput } = globalApp?.getLabels("showIt", "clearInput") ?? {};
     // Destructure
-    const { changeDelay, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
+    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
     // Shrink
     InputLabelProps.shrink ?? (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // State
@@ -31,16 +34,20 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
             updateEmpty(false);
         }
     };
-    const clearClick = () => {
+    const doClear = () => {
         if (input == null)
             return;
-        if (onClear) {
-            if (onClear() === false)
-                return;
-        }
         ReactUtils.triggerChange(input, "", false);
         input.focus();
     };
+    const clearClick = () => {
+        if (onClear) {
+            onClear(doClear);
+        }
+        else {
+            doClear();
+        }
+    };
     const preventDefault = (e) => {
         // Prevent long press
         if (e.isPropagationStopped())
@@ -72,7 +79,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     };
     // Show password and/or clear button
     if (!empty && (showPassword || showClear)) {
-        InputProps.endAdornment = (_jsxs(InputAdornment, { position: "end", children: [showPassword && (_jsx(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, children: _jsx(Visibility, {}) })), showClear && (_jsx(IconButton, { onClick: clearClick, tabIndex: -1, children: _jsx(Clear, {}) }))] }));
+        InputProps.endAdornment = (_jsxs(InputAdornment, { position: "end", children: [showPassword && (_jsx(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: _jsx(Visibility, {}) })), showClear && (_jsx(IconButton, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: _jsx(Clear, {}) }))] }));
     }
     // Extend key precess
     const onKeyPressEx = onEnter == null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.82",
+  "version": "1.3.84",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
     "@emotion/css": "^11.13.0",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@etsoo/appscript": "^1.5.5",
+    "@etsoo/appscript": "^1.5.7",
     "@etsoo/notificationbase": "^1.1.47",
     "@etsoo/react": "^1.7.62",
     "@etsoo/shared": "^1.2.44",

package/src/TextFieldEx.tsx

@@ -9,6 +9,7 @@ import { MUGlobal } from "./MUGlobal";
 import { Clear, Visibility } from "@mui/icons-material";
 import { Keyboard } from "@etsoo/shared";
 import { ReactUtils, useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * Extended text field props
@@ -20,9 +21,14 @@ export type TextFieldExProps = TextFieldProps & {
   changeDelay?: number;
 
   /**
-   * Click clear button callback, return false to prevent the clear action
+   * Clear button label
    */
-  onClear?: () => boolean | void;
+  clearLabel?: string;
+
+  /**
+   * Click clear button callback
+   */
+  onClear?: (doClear: () => void) => void;
 
   /**
    * On enter click
@@ -67,9 +73,14 @@ export const TextFieldEx = React.forwardRef<
   TextFieldExMethods,
   TextFieldExProps
 >((props, ref) => {
+  // Labels
+  const { showIt, clearInput } =
+    globalApp?.getLabels("showIt", "clearInput") ?? {};
+
   // Destructure
   const {
     changeDelay,
+    clearLabel = clearInput,
     error,
     fullWidth = true,
     helperText,
@@ -118,15 +129,18 @@ export const TextFieldEx = React.forwardRef<
     }
   };
 
-  const clearClick = () => {
+  const doClear = () => {
     if (input == null) return;
+    ReactUtils.triggerChange(input, "", false);
+    input.focus();
+  };
 
+  const clearClick = () => {
     if (onClear) {
-      if (onClear() === false) return;
+      onClear(doClear);
+    } else {
+      doClear();
     }
-
-    ReactUtils.triggerChange(input, "", false);
-    input.focus();
   };
 
   const preventDefault = (e: React.TouchEvent | React.MouseEvent) => {
@@ -173,12 +187,13 @@ export const TextFieldEx = React.forwardRef<
             onTouchStart={touchStart}
             onTouchCancel={touchEnd}
             onTouchEnd={touchEnd}
+            title={showIt}
           >
             <Visibility />
           </IconButton>
         )}
         {showClear && (
-          <IconButton onClick={clearClick} tabIndex={-1}>
+          <IconButton onClick={clearClick} tabIndex={-1} title={clearLabel}>
             <Clear />
           </IconButton>
         )}