diff --git a/package.json b/package.json
index b9818c69..a93f55d4 100644
--- a/package.json
+++ b/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",
diff --git a/src/Field.jsx b/src/Field.jsx
index 3851bced..407a17ee 100644
--- a/src/Field.jsx
+++ b/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 (
-
-
- {error && (
-
- {error}
-
- )}
-
- )
+ const { fieldComponent, ...rest } = this.props
+ const FieldComp = fieldComponent || FieldBase
+ return
}
}
diff --git a/src/FieldBase.jsx b/src/FieldBase.jsx
new file mode 100644
index 00000000..c3a7d719
--- /dev/null
+++ 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 (
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ )
+ }
+}
diff --git a/src/index.js b/src/index.js
index b09dddcd..65059e8f 100644
--- a/src/index.js
+++ b/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'
diff --git a/test/formol/fields.test.jsx b/test/formol/fields.test.jsx
index 917edec9..099cc0d8 100644
--- a/test/formol/fields.test.jsx
+++ b/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(
+
+ {
+ return TEST
+ }}
+ />
+
+ )
+ 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(