Merge pull request #776 from rvsia/addFieldComponent

feat(manager): add field component

Author: Hyperkid123

packages/form-state-manager/src/files/field.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import useField from './use-field';
+import FieldProps from '../types/field';
+
+const Field = React.forwardRef(
+  ({ children, render, component, ...props }: FieldProps, ref): React.ReactElement => {
+    const fieldProps = useField(props);
+
+    if (typeof component === 'string') {
+      const { meta, input, ...rest } = fieldProps;
+
+      return React.createElement(
+        component,
+        {
+          ...input,
+          ...rest,
+          ref
+        },
+        children
+      );
+    }
+
+    if (component) {
+      const Component = component;
+      return <Component {...fieldProps} />;
+    }
+
+    if (render) {
+      return render(fieldProps) as React.ReactElement;
+    }
+
+    return children(fieldProps) as React.ReactElement;
+  }
+);
+
+export default Field;

packages/form-state-manager/src/tests/files/field.test.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import FormStateManager from '../../files/form-state-manager';
+import Field from '../../files/field';
+
+describe('<Field />', () => {
+  let wrapper;
+
+  const initialProps = { name: 'some-field', initialValue: 'some-value' };
+
+  it('renders with children', () => {
+    wrapper = mount(<FormStateManager>{() => <Field {...initialProps}>{(props) => <input {...props.input} />}</Field>}</FormStateManager>);
+
+    expect(wrapper.find('input').props()).toEqual({
+      name: initialProps.name,
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      onFocus: expect.any(Function),
+      value: initialProps.initialValue
+    });
+  });
+
+  it('renders with string component', () => {
+    const ref = React.createRef();
+
+    wrapper = mount(<FormStateManager>{() => <Field {...initialProps} component="input" ref={ref} />}</FormStateManager>);
+
+    expect(wrapper.find('input').props()).toEqual({
+      name: initialProps.name,
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      onFocus: expect.any(Function),
+      value: initialProps.initialValue
+    });
+  });
+
+  it('renders with component as ComponentType', () => {
+    const ref = React.createRef();
+    const Component = ({ input }) => <input {...input} />;
+
+    wrapper = mount(<FormStateManager>{() => <Field {...initialProps} component={Component} />}</FormStateManager>);
+
+    expect(wrapper.find('input').props()).toEqual({
+      name: initialProps.name,
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      onFocus: expect.any(Function),
+      value: initialProps.initialValue
+    });
+  });
+
+  it('renders with render function', () => {
+    wrapper = mount(<FormStateManager>{() => <Field {...initialProps} render={(props) => <input {...props.input} />} />}</FormStateManager>);
+
+    expect(wrapper.find('input').props()).toEqual({
+      name: initialProps.name,
+      onBlur: expect.any(Function),
+      onChange: expect.any(Function),
+      onFocus: expect.any(Function),
+      value: initialProps.initialValue
+    });
+  });
+});

packages/form-state-manager/src/types/field.d.ts

@@ -0,0 +1,11 @@
+import AnyObject from './any-object';
+import UseField from './use-field';
+
+export interface FieldProps extends UseField {
+  children: (props: AnyObject) => React.ReactNode;
+  component: React.ComponentType<AnyObject> | 'input' | 'select' | 'textarea';
+  ref: React.Ref<any>;
+  render: (props: AnyObject) => React.ReactNode;
+}
+
+export default FieldProps;