@nethru/ui 2.1.22 → 2.1.24

package/base/SearchTextField.js

@@ -1,8 +1,8 @@
 import { forwardRef, useMemo } from "react";
-import TextField from "@mui/material/TextField";
 import { IconButton, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from '@mui/icons-material/Clear';
+import { TextField } from "../lib";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SearchTextField = /*#__PURE__*/forwardRef(({
   value,

package/base/SearchableSelect.js

@@ -1,5 +1,6 @@
-import { Autocomplete, FormControl, FormHelperText, InputLabel, TextField } from "@mui/material";
 import { forwardRef, useCallback, useMemo } from "react";
+import { Autocomplete, FormControl, FormHelperText, InputLabel } from "@mui/material";
+import { TextField } from "../lib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SearchableSelect = /*#__PURE__*/forwardRef(({

package/base/TextField.js

@@ -0,0 +1,31 @@
+import { forwardRef, useCallback, useState } from "react";
+import MuiTextField from "@mui/material/TextField";
+import { jsx as _jsx } from "react/jsx-runtime";
+const validateRule = process.env.REACT_APP_VALIDATE_RULE;
+const validateMessage = process.env.REACT_APP_VALIDATE_MESSAGE;
+// eslint-disable-next-line
+const validate = validateRule ? new Function("value", validateRule) : null;
+const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const [error, setError] = useState(false);
+  const [helperText, setHelperText] = useState('');
+  const handleChange = useCallback(event => {
+    if (validate) {
+      if (validate(event.target.value)) {
+        setError(true);
+        setHelperText(validateMessage);
+      } else {
+        setError(false);
+        setHelperText('');
+      }
+    }
+    if (props.onChange) props.onChange(event);
+  }, [props]);
+  return /*#__PURE__*/_jsx(MuiTextField, {
+    ref: ref,
+    ...props,
+    error: error || props.error,
+    helperText: helperText || props.helperText,
+    onChange: handleChange
+  });
+});
+export default TextField;

package/base/index.js

@@ -38,6 +38,7 @@ export { default as Slider } from "./Slider";
 export { default as Snackbar } from "./Snackbar";
 export { default as SplitLayout } from "./frame/SplitLayout";
 export { default as Switch } from "./Switch";
+export { default as TextField } from "./TextField";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";

package/base/styles/globalStyles.js

@@ -1,5 +1,6 @@
 import typography from "./typography";
 import { blueGrey } from "../colors";
+import shadow from "./shadow";
 const globalStyles = {
   ':root': {
     '--body-background-color': blueGrey.contentBg,
@@ -51,8 +52,9 @@ const globalStyles = {
   '.highcharts-tooltip > span': {
     background: '#fff',
     border: '1px solid #ccc',
-    borderRadius: '3px',
-    padding: '8px'
+    borderRadius: '8px',
+    padding: '8px',
+    boxShadow: shadow[3]
   }
 };
 export default globalStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.22",
+  "version": "2.1.24",
   "main": "base/index.js",
   "files": [
     "/base"