Add possibility to override Field.jsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formol",
-  "version": "2.5.11",
+  "version": "2.5.12-alpha.2",
   "description": "An opiniated react form framework.",
   "main": "lib/formol.js",
   "module": "src/index.js",

src/Field.jsx

@@ -1,140 +1,15 @@
 import React from 'react'
-import { FaQuestionCircle } from 'react-icons/fa'
 
+import { FieldBase } from './FieldBase'
 import { block } from './utils'
 import fieldPropsAdapter from './utils/fieldPropsAdapter'
 
 @fieldPropsAdapter
 @block
 export default class Field extends React.PureComponent {
-  constructor(props) {
-    super(props)
-    this.element = React.createRef()
-    this.state = {
-      focus: false,
-    }
-
-    this.handleChange = this.handleChange.bind(this)
-    this.handleFocus = this.handleFocus.bind(this)
-    this.handleBlur = this.handleBlur.bind(this)
-  }
-
-  componentDidMount() {
-    const { register, name, validator, validityErrors } = this.props
-    register(name, this.element, validator, validityErrors)
-  }
-
-  componentWillUnmount() {
-    const { unregister, name } = this.props
-    unregister(name)
-    this.handleChange()
-  }
-
-  handleChange(value, error) {
-    const { name, unformatter, handleChange } = this.props
-    handleChange(name, unformatter(value), error)
-  }
-
-  handleFocus() {
-    this.setState({
-      focus: true,
-    })
-  }
-
-  handleBlur() {
-    const { name, value, normalizer, handleChange, handleEntered } = this.props
-    // Normalize data
-    const normalized = normalizer(value)
-    if (normalized !== value) {
-      handleChange(name, normalized)
-    }
-    this.setState({
-      focus: false,
-    })
-    handleEntered(name)
-  }
-
   render(b) {
-    const {
-      name,
-      value,
-      type,
-      title,
-      modified,
-      className,
-      validator,
-      readOnly,
-      disabled,
-      unit,
-      extras,
-      formatter,
-      normalizer,
-      unformatter,
-      children,
-      classNameModifiers,
-      TypeField,
-      i18n,
-      error,
-      validityErrors,
-      handleChange,
-      handleEntered,
-      register,
-      unregister,
-      ...props
-    } = this.props
-
-    const { focus } = this.state
-
-    const Label = TypeField.formolFieldLabelElement || 'label'
-    return (
-      <div
-        className={b.mix(className).m({
-          type,
-          name,
-          error: !!error,
-          disabled,
-          readOnly,
-          required: !!props.required,
-          modified,
-          focus,
-          ...classNameModifiers.field,
-        })}
-      >
-        <Label
-          className={b.e('label').m(classNameModifiers.label)}
-          title={title}
-        >
-          {children && (
-            <span className={b.e('title').m(classNameModifiers.labelText)}>
-              {children}
-              {title && <FaQuestionCircle />}
-            </span>
-          )}
-          <TypeField
-            name={name}
-            value={value}
-            type={type}
-            disabled={disabled}
-            readOnly={readOnly}
-            i18n={i18n}
-            elementRef={this.element}
-            className={b.e('element')}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            onChange={this.handleChange}
-            {...props}
-          />
-          {unit && (
-            <div className={b.e('unit').m(classNameModifiers.unit)}>{unit}</div>
-          )}
-          {extras}
-        </Label>
-        {error && (
-          <div className={b.e('error-text').m(classNameModifiers.error)}>
-            {error}
-          </div>
-        )}
-      </div>
-    )
+    const { fieldComponent, ...rest } = this.props
+    const FieldComp = fieldComponent || FieldBase
+    return <FieldComp {...rest} b={b} />
   }
 }

src/FieldBase.jsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { FaQuestionCircle } from 'react-icons/fa'
+
+export class FieldBase extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.element = React.createRef()
+    this.state = {
+      focus: false,
+    }
+
+    this.handleChange = this.handleChange.bind(this)
+    this.handleFocus = this.handleFocus.bind(this)
+    this.handleBlur = this.handleBlur.bind(this)
+  }
+
+  componentDidMount() {
+    const { register, name, validator, validityErrors } = this.props
+    register(name, this.element, validator, validityErrors)
+  }
+
+  componentWillUnmount() {
+    const { unregister, name } = this.props
+    unregister(name)
+    this.handleChange()
+  }
+
+  handleChange(value, error) {
+    const { name, unformatter, handleChange } = this.props
+    handleChange(name, unformatter(value), error)
+  }
+
+  handleFocus() {
+    this.setState({
+      focus: true,
+    })
+  }
+
+  handleBlur() {
+    const { name, value, normalizer, handleChange, handleEntered } = this.props
+    // Normalize data
+    const normalized = normalizer(value)
+    if (normalized !== value) {
+      handleChange(name, normalized)
+    }
+    this.setState({
+      focus: false,
+    })
+    handleEntered(name)
+  }
+
+  render() {
+    const {
+      b,
+      name,
+      value,
+      type,
+      title,
+      modified,
+      className,
+      validator,
+      readOnly,
+      disabled,
+      unit,
+      extras,
+      formatter,
+      normalizer,
+      unformatter,
+      children,
+      classNameModifiers,
+      TypeField,
+      i18n,
+      error,
+      validityErrors,
+      handleChange,
+      handleEntered,
+      register,
+      unregister,
+      ...props
+    } = this.props
+
+    const { focus } = this.state
+
+    const Label = TypeField.formolFieldLabelElement || 'label'
+    return (
+      <div
+        className={b.mix(className).m({
+          type,
+          name,
+          error: !!error,
+          disabled,
+          readOnly,
+          required: !!props.required,
+          modified,
+          focus,
+          ...classNameModifiers.field,
+        })}
+      >
+        <Label
+          className={b.e('label').m(classNameModifiers.label)}
+          title={title}
+        >
+          {children && (
+            <span className={b.e('title').m(classNameModifiers.labelText)}>
+              {children}
+              {title && <FaQuestionCircle />}
+            </span>
+          )}
+          <TypeField
+            name={name}
+            value={value}
+            type={type}
+            disabled={disabled}
+            readOnly={readOnly}
+            i18n={i18n}
+            elementRef={this.element}
+            className={b.e('element')}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            onChange={this.handleChange}
+            {...props}
+          />
+          {unit && (
+            <div className={b.e('unit').m(classNameModifiers.unit)}>{unit}</div>
+          )}
+          {extras}
+        </Label>
+        {error && (
+          <div className={b.e('error-text').m(classNameModifiers.error)}>
+            {error}
+          </div>
+        )}
+      </div>
+    )
+  }
+}

src/index.js

@@ -21,3 +21,9 @@ export {
   diff,
   isModified,
 } from './utils/object'
+
+export * from './FieldBase'
+
+export { default as choicesAdapter } from './utils/choicesAdapter'
+export { default as memoizedChoices } from './utils/memoizedChoices'
+export { default as multipleAdapter } from './utils/multipleAdapter'

test/formol/fields.test.jsx

@@ -17,6 +17,8 @@ describe('Formol field', () => {
       .find('Field')
       .children()
       .first()
+      .children()
+      .first()
     expect(field).toBeTruthy()
     expect(field.hasClass('Formol_Field')).toBeTruthy()
     expect(field.hasClass('Formol_Field--name-field-1')).toBeTruthy()
@@ -38,6 +40,28 @@ describe('Formol field', () => {
     expect(input.props().type).toEqual('text')
     expect(input.props().value).toEqual('')
   })
+  it('is rendered with overriden FieldBase fieldComponent', () => {
+    const wrapper = mount(
+      <Formol>
+        <Field
+          fieldComponent={() => {
+            return <div>TEST</div>
+          }}
+        />
+      </Formol>
+    )
+    expect(wrapper.find('form')).toBeTruthy()
+
+    const field = wrapper
+      .find('Field')
+      .children()
+      .first()
+      .children()
+      .first()
+    expect(field).toBeTruthy()
+    expect(field.type()).toEqual('div')
+    expect(field.props().children).toEqual('TEST')
+  })
   it('respects the name attribute', () => {
     const wrapper = mount(
       <Formol>