feat: abstracts input from text component

src/admin/components/forms/field-types/Text/Input.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import { TextField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+// import { FieldType } from '../../useField/types';
+
+import './index.scss';
+
+export type TextInputProps = Omit<TextField, 'type'> & {
+  showError: boolean
+  errorMessage?: string
+  readOnly?: boolean
+  path?: string
+  required?: boolean
+  value?: string
+  description?: Description
+  onChange?: (e) => void
+  placeholder?: string
+  style?: React.CSSProperties
+  width?: string
+}
+
+const TextInput: React.FC<TextInputProps> = (props) => {
+  const {
+    showError,
+    errorMessage,
+    placeholder,
+    readOnly,
+    path,
+    label,
+    required,
+    value,
+    onChange,
+    description,
+    style,
+    width,
+  } = props;
+
+  const classes = [
+    'field-type',
+    'text',
+    showError && 'error',
+    readOnly && 'read-only',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={classes}
+      style={{
+        ...style,
+        width,
+      }}
+    >
+      <Error
+        showError={showError}
+        message={errorMessage}
+      />
+      <Label
+        htmlFor={path}
+        label={label}
+        required={required}
+      />
+      <input
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        disabled={readOnly}
+        placeholder={placeholder}
+        type="text"
+        id={path}
+        name={path}
+      />
+      <FieldDescription
+        value={value}
+        description={description}
+      />
+    </div>
+  );
+};
+
+export default TextInput;

src/admin/components/forms/field-types/Text/index.tsx

@@ -1,11 +1,9 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
-import Label from '../../Label';
-import Error from '../../Error';
 import { text } from '../../../../../fields/validations';
 import { Props } from './types';
-import FieldDescription from '../../FieldDescription';
+import TextInput from './Input';
 
 import './index.scss';
 
@@ -24,13 +22,11 @@ const Text: React.FC<Props> = (props) => {
       description,
       condition,
     } = {},
-    value: valueFromProps,
-    onChange: onChangeFromProps,
   } = props;
 
   const path = pathFromProps || name;
 
-  const fieldType = useField<string>({
+  const field = useField<string>({
     path,
     validate,
     enableDebouncedValue: true,
@@ -38,64 +34,27 @@ const Text: React.FC<Props> = (props) => {
   });
 
   const {
-    value: valueFromContext,
+    value,
     showError,
     setValue,
     errorMessage,
-  } = fieldType;
-
-  const onChange = useCallback((e) => {
-    const { value: incomingValue } = e.target;
-    if (typeof onChangeFromProps === 'function') {
-      onChangeFromProps(incomingValue);
-    } else {
-      setValue(e);
-    }
-  }, [
-    onChangeFromProps,
-    setValue,
-  ]);
-
-  const classes = [
-    'field-type',
-    'text',
-    showError && 'error',
-    readOnly && 'read-only',
-  ].filter(Boolean).join(' ');
-
-  const value = valueFromProps || valueFromContext || '';
+  } = field;
 
   return (
-    <div
-      className={classes}
-      style={{
-        ...style,
-        width,
-      }}
-    >
-      <Error
-        showError={showError}
-        message={errorMessage}
-      />
-      <Label
-        htmlFor={path}
-        label={label}
-        required={required}
-      />
-      <input
-        value={value}
-        onChange={onChange}
-        disabled={readOnly}
-        placeholder={placeholder}
-        type="text"
-        id={path}
-        name={path}
-      />
-      <FieldDescription
-        value={value}
-        description={description}
-      />
-    </div>
+    <TextInput
+      name={name}
+      onChange={setValue}
+      showError={showError}
+      errorMessage={errorMessage}
+      required={required}
+      label={label}
+      value={value}
+      placeholder={placeholder}
+      readOnly={readOnly}
+      style={style}
+      width={width}
+      description={description}
+    />
   );
 };