feature: Add help support to text field component

SteveGT96 · Dec 4, 2024 · c6e284e · c6e284e
1 parent 4733480
commit c6e284e
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 88 deletions.
diff --git a/src/components/accessories/admin/wards/wardForm/WardForm.tsx b/src/components/accessories/admin/wards/wardForm/WardForm.tsx
@@ -137,6 +137,7 @@ const WardForm: FC<IWardProps> = ({
               type="text"
               disabled={isLoading || !creationMode}
               required={FIELD_VALIDATION.REQUIRED}
+              helpText="The ward code should be a string and should be unique. Otherwise, you'll get a feedback error."
             />
           </div>
           <div className="wardForm__item halfWidth">

diff --git a/src/components/accessories/textField/TextField.tsx b/src/components/accessories/textField/TextField.tsx
@@ -1,4 +1,12 @@
-import { TextField as MaterialComponent } from "@mui/material";
+import { Help } from "@mui/icons-material";
+import {
+  IconButton,
+  InputAdornment,
+  TextField as MaterialComponent,
+  Popover,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import React, { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
 import { FIELD_VALIDATION } from "../../../types";
@@ -19,11 +27,23 @@ const TextField: FunctionComponent<IProps> = ({
   rows = 10,
   required = FIELD_VALIDATION.IDLE,
   maxLength,
+  helpText,
+  helpTooltipText,
 }) => {
   const { t } = useTranslation();
+  const [helpAnchorEl, setHelpAnchorEl] =
+    React.useState<HTMLButtonElement | null>(null);
 
   const actualClassName = theme === "light" ? "textField__light" : "textField";
 
+  const handleOpenHelp = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setHelpAnchorEl(event.currentTarget);
+  };
+
+  const handleCloseHelp = () => {
+    setHelpAnchorEl(null);
+  };
+
   return (
     <div style={{ position: "relative" }}>
       <MaterialComponent
@@ -42,7 +62,42 @@ const TextField: FunctionComponent<IProps> = ({
         rows={rows}
         margin="dense"
         disabled={disabled}
-        InputProps={InputProps}
+        InputProps={{
+          ...InputProps,
+          endAdornment: helpText ? (
+            <InputAdornment position="end">
+              <Tooltip title={helpTooltipText ?? t("common.help")}>
+                <IconButton
+                  aria-label="Show help"
+                  onClick={handleOpenHelp}
+                  edge="end"
+                  size="small"
+                >
+                  <Help />
+                </IconButton>
+              </Tooltip>
+              <Popover
+                open={Boolean(helpAnchorEl)}
+                anchorEl={helpAnchorEl}
+                onClose={handleCloseHelp}
+                slotProps={{
+                  paper: {
+                    style: {
+                      maxWidth: "200px",
+                      padding: "16px",
+                      textAlign: "justify",
+                    },
+                  },
+                }}
+              >
+                <Help fontSize="small" color="primary" />
+                <Typography fontSize={14}>{helpText}</Typography>
+              </Popover>
+            </InputAdornment>
+          ) : (
+            InputProps?.endAdornment
+          ),
+        }}
         inputProps={{ maxLength }}
         InputLabelProps={{ shrink: !!field.value }}
         required={required === FIELD_VALIDATION.REQUIRED}

diff --git a/src/components/accessories/textField/styles.scss b/src/components/accessories/textField/styles.scss
@@ -1,83 +1,88 @@
-@import "../../../styles/variables";
-
-.textField {
-  //height: 60px;
-  width: 250px;
-  label {
-    top: 5px;
-    // font-size: smaller;
-    &.MuiFormLabel-filled,
-    &.Mui-focused {
-      top: 2px;
-    }
-  }
-  input {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-
-  .MuiFormHelperText-root.Mui-error{
-    position: absolute;
-    bottom: -20px;
-    margin: 0px;
-    left: 0px;
-  }
-}
-
-.textField__light {
-  label {
-    top: 5px;
-    &.MuiFormLabel-filled,
-    &.Mui-focused {
-      top: 2px;
-    }
-  }
-  input {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    // font-size: small;
-  }
-  .MuiFormLabel-root {
-    color: $c-white;
-  }
-  .MuiOutlinedInput-notchedOutline {
-    border-color: $c-white;
-  }
-
-  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
-    border-color: #eeeeee;
-  }
-
-  .MuiFormLabel-root.Mui-focused {
-    color: #eeeeee;
-  }
-
-  .MuiFormLabel-root.Mui-error {
-    color: #eeeeee;
-  }
-
-  .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
-    border-color: #ffcc80 !important;
-  }
-
-  .MuiInputBase-input {
-    color: $c-white !important;
-  }
-
-  input:-webkit-autofill,
-  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus,
-  input:-webkit-autofill:active {
-    box-shadow: 0 0 0 30px $c-gray inset !important;
-    -webkit-box-shadow: 0 0 0 30px $c-gray inset !important;
-    -webkit-text-fill-color: $c-white !important;
-  }
-
-  .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
-    border-color: $c-error-light !important;
-  }
-
-  .MuiFormHelperText-root.Mui-error {
-    color: $c-error-light !important;
-  }
-}
+@import "../../../styles/variables";
+
+.textField {
+  //height: 60px;
+  width: 250px;
+  label {
+    top: 5px;
+    // font-size: smaller;
+    &.MuiFormLabel-filled,
+    &.Mui-focused {
+      top: 2px;
+    }
+  }
+  input {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .MuiInputAdornment-root .MuiSvgIcon-root {
+    width: 20px;
+    height: 20px;
+  }
+
+  .MuiFormHelperText-root.Mui-error {
+    position: absolute;
+    bottom: -20px;
+    margin: 0px;
+    left: 0px;
+  }
+}
+
+.textField__light {
+  label {
+    top: 5px;
+    &.MuiFormLabel-filled,
+    &.Mui-focused {
+      top: 2px;
+    }
+  }
+  input {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    // font-size: small;
+  }
+  .MuiFormLabel-root {
+    color: $c-white;
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border-color: $c-white;
+  }
+
+  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #eeeeee;
+  }
+
+  .MuiFormLabel-root.Mui-focused {
+    color: #eeeeee;
+  }
+
+  .MuiFormLabel-root.Mui-error {
+    color: #eeeeee;
+  }
+
+  .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #ffcc80 !important;
+  }
+
+  .MuiInputBase-input {
+    color: $c-white !important;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    box-shadow: 0 0 0 30px $c-gray inset !important;
+    -webkit-box-shadow: 0 0 0 30px $c-gray inset !important;
+    -webkit-text-fill-color: $c-white !important;
+  }
+
+  .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
+    border-color: $c-error-light !important;
+  }
+
+  .MuiFormHelperText-root.Mui-error {
+    color: $c-error-light !important;
+  }
+}
diff --git a/src/components/accessories/textField/types.ts b/src/components/accessories/textField/types.ts
@@ -1,9 +1,9 @@
-import { FieldInputProps } from "formik";
 import {
-  InputProps,
   FilledInputProps,
+  InputProps,
   OutlinedInputProps,
 } from "@mui/material";
+import { FieldInputProps } from "formik";
 import { FIELD_VALIDATION } from "../../../types";
 
 export interface IProps {
@@ -24,4 +24,6 @@ export interface IProps {
   rows?: number;
   required?: FIELD_VALIDATION;
   maxLength?: number;
+  helpText?: string;
+  helpTooltipText?: string;
 }
diff --git a/src/resources/i18n/en.json b/src/resources/i18n/en.json
@@ -573,7 +573,8 @@
     "restore": "Restore",
     "restoreConfirmation": "Are you sure to restore this item ?",
     "softDelete": "Mark as deleted",
-    "softDeleteConfirmation": "Are you sure to mark this item as deleted ?"
+    "softDeleteConfirmation": "Are you sure to mark this item as deleted ?",
+    "help": "Help"
   },
   "permission": {
     "denied": "Permission denied",