@groupeactual/ui-kit 0.4.2 → 0.4.4

package/dist/index.d.ts

@@ -40,8 +40,9 @@ interface Props$4 {
     disabled?: boolean;
     isValid?: boolean;
     endAdornment?: ReactNode;
+    maxLength?: number;
 }
-declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, ...props }: Omit<TextFieldProps, 'error'> & Props$4) => JSX.Element;
+declare const TextField: ({ name, value, error, onBlur, onChange, label, disabled, endAdornment, isValid, placeholder, maxLength, ...props }: Omit<TextFieldProps, 'error'> & Props$4) => JSX.Element;
 
 interface Props$3 {
     error?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupeactual/ui-kit",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "A simple template for a custom React component library",
   "devDependencies": {
     "@babel/core": "^7.20.5",

package/src/components/Form/TextField/TextField.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react';
 
 import MuiTextField, { TextFieldProps } from '@mui/material/TextField';
+import { Table } from '@mui/material';
 
 interface Props {
   error?: string;
@@ -19,6 +20,7 @@ interface Props {
   disabled?: boolean;
   isValid?: boolean;
   endAdornment?: ReactNode;
+  maxLength?: number;
 }
 const TextField = ({
   name,
@@ -31,6 +33,7 @@ const TextField = ({
   endAdornment,
   isValid,
   placeholder = '',
+  maxLength,
   ...props
 }: Omit<TextFieldProps, 'error'> & Props): JSX.Element => {
   const [internalValue, setInternalValue] = useState(value);
@@ -47,11 +50,9 @@ const TextField = ({
       label={label}
       value={internalValue}
       placeholder={placeholder}
+      FormHelperTextProps={{ component: 'div' } as any}
       InputLabelProps={{ shrink: true }}
       onClick={(e) => e.stopPropagation()}
-      InputProps={{
-        endAdornment
-      }}
       onChange={(e) => {
         setInternalValue(e.currentTarget.value);
         onChange(e);
@@ -60,9 +61,29 @@ const TextField = ({
         onBlur(e);
       }}
       error={!!error}
-      helperText={error ?? ''}
       disabled={disabled}
+      InputProps={{ endAdornment }}
+      inputProps={{ maxLength }}
       {...props}
+      helperText={
+        <div style={{ display: 'table', width: '100%' }}>
+          {(error || props.helperText) && (
+            <div
+              style={{
+                display: maxLength ? 'table-cell' : '',
+                float: 'left'
+              }}
+            >
+              {error || props.helperText}
+            </div>
+          )}
+          {maxLength && (
+            <div style={{ display: 'table-cell', float: 'right' }}>
+              {internalValue.length}/{maxLength} caract.
+            </div>
+          )}
+        </div>
+      }
     />
   );
 };