@bytebrand/fe-ui-core 4.1.17 → 4.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.17",
+  "version": "4.1.18",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/IconSVG/SVG/settings/RemoveEye.tsx

@@ -9,9 +9,9 @@ const SvgRemoveEye = (props: any) => (
     fill="none"
     {...props}
   >
-    <path d="M11 2C14.79 2 18.17 4.13 19.82 7.5C18.17 10.87 14.79 13 11 13C7.21 13 3.83 10.87 2.18 7.5C3.83 4.13 7.21 2 11 2ZM11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 5C12.38 5 13.5 6.12 13.5 7.5C13.5 8.88 12.38 10 11 10C9.62 10 8.5 8.88 8.5 7.5C8.5 6.12 9.62 5 11 5ZM11 3C8.52 3 6.5 5.02 6.5 7.5C6.5 9.98 8.52 12 11 12C13.48 12 15.5 9.98 15.5 7.5C15.5 5.02 13.48 3 11 3Z" />
+    <path d="M11 2C14.79 2 18.17 4.13 19.82 7.5C18.17 10.87 14.79 13 11 13C7.21 13 3.83 10.87 2.18 7.5C3.83 4.13 7.21 2 11 2ZM11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 5C12.38 5 13.5 6.12 13.5 7.5C13.5 8.88 12.38 10 11 10C9.62 10 8.5 8.88 8.5 7.5C8.5 6.12 9.62 5 11 5ZM11 3C8.52 3 6.5 5.02 6.5 7.5C6.5 9.98 8.52 12 11 12C13.48 12 15.5 9.98 15.5 7.5C15.5 5.02 13.48 3 11 3Z" fill="#4C4E64" fill-opacity="0.54" />
   </svg>
 );
 
 export default SvgRemoveEye;
-/* tslint:enable */
+/* tslint:enable */

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { TextField } from '@mui/material';
+import { TextField, IconButton } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { Theme } from './MaterialField.styled';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconSVG from '../IconSVG/IconSVG';
 
 export interface IVehicleModalProps {
   className?: string;
@@ -40,12 +42,25 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
   rows,
   placeholder
 }: IVehicleModalProps) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+
   const onHandleChange = (event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const value = event.currentTarget.value;
     const name = event.currentTarget.name;
 
     onChange(value, name, event);
   };
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
+  const passType = showPassword ? 'text' : 'password';
+
   return (
     <ThemeProvider theme={Theme}>
       <TextField
@@ -56,7 +71,7 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
         name={name}
         sx={sx}
         error={error}
-        type={type}
+        type={type === 'password' ? passType : type}
         disabled={disabled}
         required={required}
         size={size}
@@ -66,6 +81,20 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
         variant={variant}
         rows={rows}
         placeholder={placeholder}
+        InputProps={{
+          endAdornment: type === 'password' ? (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge="end"
+              >
+                {showPassword ? <IconSVG name='removeEyeIcon' customDimensions /> : <IconSVG name='removeEyeIcon' customDimensions />}
+              </IconButton>
+            </InputAdornment>
+          ) : null
+        }}
       />
     </ThemeProvider>
   );