From e47a49678d4faf9a3ab0c04e4478f6d677d34dae Mon Sep 17 00:00:00 2001 From: Gerwin Brunner Date: Sun, 26 May 2019 19:31:12 +0200 Subject: [PATCH 1/3] Add possibility to override Field.jsx --- package.json | 2 +- src/Field.jsx | 133 ++------------------------------------------- src/FieldBase.jsx | 136 ++++++++++++++++++++++++++++++++++++++++++++++ src/index.js | 7 +++ 4 files changed, 148 insertions(+), 130 deletions(-) create mode 100644 src/FieldBase.jsx diff --git a/package.json b/package.json index b9818c6..a93f55d 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 3851bce..27740b2 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} -
- )} -
- ) + console.log('props.fieldComponent', this.props.fieldComponent) + const FieldComp = this.props.fieldComponent || FieldBase + return } } diff --git a/src/FieldBase.jsx b/src/FieldBase.jsx new file mode 100644 index 0000000..c3a7d71 --- /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 b09dddc..3bb4ec6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ // This is not optimal, we might need to find a better solution export { default } from './Formol' export { default as Field } from './Field' +export * from './FieldBase' export { default as Inliner } from './Inliner' export { default as Conditional } from './Conditional' export { default as FormolContextWrapper, FormolContext } from './FormolContext' @@ -21,3 +22,9 @@ export { diff, isModified, } from './utils/object' + +export { default as choicesAdapter } from './utils/choicesAdapter' +export { default as memoizedChoices } from './utils/memoizedChoices' +export { default as multipleAdapter } from './utils/multipleAdapter' + +console.log('FORMOL Exporting my own data NOW !!!!') From e87a3816a654ed27fe02b70901bf7cb0ce8b5f8b Mon Sep 17 00:00:00 2001 From: Gerwin Brunner Date: Sun, 26 May 2019 19:57:52 +0200 Subject: [PATCH 2/3] added tests --- src/Field.jsx | 1 - src/index.js | 7 +------ test/formol/fields.test.jsx | 24 ++++++++++++++++++++++++ 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/Field.jsx b/src/Field.jsx index 27740b2..4ba566a 100644 --- a/src/Field.jsx +++ b/src/Field.jsx @@ -8,7 +8,6 @@ import fieldPropsAdapter from './utils/fieldPropsAdapter' @block export default class Field extends React.PureComponent { render(b) { - console.log('props.fieldComponent', this.props.fieldComponent) const FieldComp = this.props.fieldComponent || FieldBase return } diff --git a/src/index.js b/src/index.js index 3bb4ec6..3a6d735 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ // This is not optimal, we might need to find a better solution export { default } from './Formol' export { default as Field } from './Field' -export * from './FieldBase' export { default as Inliner } from './Inliner' export { default as Conditional } from './Conditional' export { default as FormolContextWrapper, FormolContext } from './FormolContext' @@ -23,8 +22,4 @@ export { isModified, } from './utils/object' -export { default as choicesAdapter } from './utils/choicesAdapter' -export { default as memoizedChoices } from './utils/memoizedChoices' -export { default as multipleAdapter } from './utils/multipleAdapter' - -console.log('FORMOL Exporting my own data NOW !!!!') +export * from './FieldBase' diff --git a/test/formol/fields.test.jsx b/test/formol/fields.test.jsx index 917edec..099cc0d 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( From fa31cbcf6a75680f1b7a2950de86dfc1c0471ca0 Mon Sep 17 00:00:00 2001 From: Gerwin Brunner Date: Mon, 27 May 2019 09:04:40 +0200 Subject: [PATCH 3/3] added exports and fixed passing of fieldComponent --- src/Field.jsx | 5 +++-- src/index.js | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Field.jsx b/src/Field.jsx index 4ba566a..407a17e 100644 --- a/src/Field.jsx +++ b/src/Field.jsx @@ -8,7 +8,8 @@ import fieldPropsAdapter from './utils/fieldPropsAdapter' @block export default class Field extends React.PureComponent { render(b) { - const FieldComp = this.props.fieldComponent || FieldBase - return + const { fieldComponent, ...rest } = this.props + const FieldComp = fieldComponent || FieldBase + return } } diff --git a/src/index.js b/src/index.js index 3a6d735..65059e8 100644 --- a/src/index.js +++ b/src/index.js @@ -23,3 +23,7 @@ export { } 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'