fix: define Input render

webiny · Apr 7, 2020 · f72a66b · f72a66b
1 parent 09d07f4
commit f72a66b
Showing 1 changed file with 8 additions and 33 deletions.
diff --git a/packages/app-headless-cms/src/components/Form/LayoutRenderComponent/fields/Input.tsx b/packages/app-headless-cms/src/components/Form/LayoutRenderComponent/fields/Input.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { I18NValue } from "@webiny/app-i18n/components";
-import HelperMessage from "../components/HelperMessage";
 import { CmsContentModelModelField } from "@webiny/app-headless-cms/types";
 import { BindComponentRenderProp } from "@webiny/form";
+import { Input as UiInput } from "@webiny/ui/Input";
 
 type Props = {
     type?: string;
@@ -11,39 +11,14 @@ type Props = {
 };
 
 const Input = (props: Props) => {
-    const { onChange, value, validation, validate } = props.bind;
-
-    // @ts-ignore
-    const onBlur = (e: SyntheticInputEvent<HTMLInputElement>) => {
-        if (validate) {
-            // Since we are accessing event in an async operation, we need to persist it.
-            // See https://reactjs.org/docs/events.html#event-pooling.
-            e.persist();
-            validate();
-        }
-    };
-
     return (
-        <div className="webiny-fb-form-field webiny-fb-form-field--input">
-            <label className="webiny-pb-typography-body webiny-fb-form-field__label">
-                <I18NValue value={props.field.label} />
-            </label>
-            <input
-                onBlur={onBlur}
-                onChange={e => onChange(e.target.value)}
-                value={value}
-                placeholder={I18NValue(props.field.placeholderText)}
-                type={props.type}
-                name={props.field.fieldId}
-                id={props.field.fieldId}
-                className="webiny-fb-form-field__input"
-            />
-            <HelperMessage
-                isValid={validation.isValid}
-                errorMessage={validation.message}
-                helperMessage={<I18NValue value={props.field.helpText} />}
-            />
-        </div>
+        <UiInput
+            {...props.bind}
+            label={I18NValue(props.field.label)}
+            placeholder={I18NValue(props.field.placeholderText)}
+            type={props.type}
+            className="webiny-fb-form-field__input"
+        />
     );
 };