Poc implementation of withLabel. References #53

src/Field.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { FaQuestionCircle } from 'react-icons/fa'
 
 import { block } from './utils'
 import fieldPropsAdapter from './utils/fieldPropsAdapter'
@@ -56,85 +55,36 @@ export default class Field extends React.PureComponent {
 
   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,
+      children,
       ...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>
+      <TypeField
+        elementRef={this.element}
+        className={b.e('element')}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        focus={focus}
+        LabelComponent={Label}
+        fieldClassName={b.mix(className)}
+        labelChildren={children}
+        {...props}
+      />
     )
   }
 }

src/async/CalendarField.jsx

@@ -5,10 +5,12 @@ import React from 'react'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
 
 import { block } from '../utils'
+import withLabel from '../utils/withLabel'
 import locales from './CalendarFieldLocales'
 
 const isDate = d => d instanceof Date && !isNaN(d.valueOf())
 
+@withLabel
 @block
 export default class CalendarField extends React.PureComponent {
   constructor(props) {

src/async/FileField.jsx

@@ -7,6 +7,7 @@ import deepEqual from 'deep-equal'
 import { block, fileSize, nameExt, noOp, readAsBase64 } from '../utils'
 import Preview from '../utils/Preview'
 import multipleAdapter from '../utils/multipleAdapter'
+import withLabel from '../utils/withLabel'
 
 const key = file => [file.name, file.ext].join('.')
 
@@ -37,6 +38,7 @@ const rename = files =>
     .renamed.reverse()
 
 @multipleAdapter
+@withLabel
 @block
 export default class FileField extends React.PureComponent {
   static valueToField(value, multiple) {

src/async/HTMLField.jsx

@@ -7,6 +7,7 @@ import React from 'react'
 
 import { HTMLToEditor, editorToHTML, normalize } from '../utils/html'
 import { block, noOp, readAsBase64 } from '../utils'
+import withLabel from '../utils/withLabel'
 
 const stateFromValue = (value, fast) => {
   if (!value) {
@@ -30,6 +31,7 @@ const inputValue = (v, fast) =>
       : '_'
     : v
 
+@withLabel
 @block
 export default class HTMLField extends React.PureComponent {
   constructor(props) {

src/async/PasswordStrengthField.jsx

@@ -3,11 +3,14 @@ import zxcvbn from 'zxcvbn'
 
 import { block } from '../utils'
 import PasswordField from '../fields/PasswordField'
+import withLabel from '../utils/withLabel'
 
 /* Inspired from https://github.com/mmw/react-password-strength
    Forked here to handle a value instead of a value and
    props change
 */
+
+@withLabel
 @block
 export default class PasswordStrengthField extends React.PureComponent {
   static getState(value, minLength, userInputs) {

src/async/SelectMenuField.jsx

@@ -12,12 +12,14 @@ import choicesAdapter from '../utils/choicesAdapter'
 import getMenuList from '../utils/MenuList'
 import memoizedChoices from '../utils/memoizedChoices'
 import multipleAdapter from '../utils/multipleAdapter'
+import withLabel from '../utils/withLabel'
 
 export const DELIMITER = '__/__'
 
 @multipleAdapter
 @choicesAdapter
 @memoizedChoices
+@withLabel
 @block
 export default class SelectMenuField extends React.PureComponent {
   static defaultProps = {

src/fields/BooleanField.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
 import { block } from '../utils'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class BooleanField extends React.PureComponent {
   render(b) {

src/fields/CheckboxField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import BooleanField from './BooleanField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class CheckboxField extends React.PureComponent {
   static defaultFieldProps = {

src/fields/CheckboxSetField.jsx

@@ -5,10 +5,12 @@ import choicesAdapter from '../utils/choicesAdapter'
 import FieldSet from '../utils/FieldSet'
 import memoizedChoices from '../utils/memoizedChoices'
 import multipleAdapter from '../utils/multipleAdapter'
+import withLabel from '../utils/withLabel'
 
 @multipleAdapter
 @choicesAdapter
 @memoizedChoices
+@withLabel
 @block
 export default class CheckboxSetField extends React.PureComponent {
   static formolFieldLabelElement = 'div'

src/fields/ColorField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class ColorField extends React.PureComponent {
   static defaultFieldProps = {

src/fields/DateField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class DateField extends React.PureComponent {
   render(b) {

src/fields/DatetimeLocalField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class DatetimeLocalField extends React.PureComponent {
   render(b) {

src/fields/EmailField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class EmailField extends React.PureComponent {
   render(b) {

src/fields/InputField.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
 import { block } from '../utils'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class InputField extends React.PureComponent {
   static defaultProps = { type: 'text' }

src/fields/MoneyField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class MoneyField extends React.PureComponent {
   static defaultFieldProps = {

src/fields/MonthField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class MonthField extends React.PureComponent {
   render(b) {

src/fields/NumberField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class NumberField extends React.PureComponent {
   render(b) {

src/fields/PasswordField.jsx

@@ -3,7 +3,9 @@ import { FaEye, FaEyeSlash } from 'react-icons/fa'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class PasswordField extends React.PureComponent {
   constructor(props) {

src/fields/RadioField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import BooleanField from './BooleanField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class RadioField extends React.PureComponent {
   static defaultFieldProps = {

src/fields/RadioSetField.jsx

@@ -4,9 +4,11 @@ import { block } from '../utils'
 import choicesAdapter from '../utils/choicesAdapter'
 import FieldSet from '../utils/FieldSet'
 import memoizedChoices from '../utils/memoizedChoices'
+import withLabel from '../utils/withLabel'
 
 @choicesAdapter
 @memoizedChoices
+@withLabel
 @block
 export default class RadioSetField extends React.PureComponent {
   static formolFieldLabelElement = 'div'

src/fields/RangeField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import NumberField from './NumberField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class RangeField extends React.PureComponent {
   static defaultProps = {

src/fields/SelectField.jsx

@@ -4,10 +4,12 @@ import { block } from '../utils'
 import choicesAdapter from '../utils/choicesAdapter'
 import memoizedChoices from '../utils/memoizedChoices'
 import multipleAdapter from '../utils/multipleAdapter'
+import withLabel from '../utils/withLabel'
 
 @multipleAdapter
 @choicesAdapter
 @memoizedChoices
+@withLabel
 @block
 export default class SelectField extends React.PureComponent {
   constructor(props) {

src/fields/SwitchField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import SwitchButton from '../utils/SwitchButton'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class SwitchField extends React.PureComponent {
   static defaultFieldProps = {

src/fields/TelField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class TelField extends React.PureComponent {
   render(b) {

src/fields/TextareaField.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
 import { block } from '../utils'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class TextAreaField extends React.PureComponent {
   render(b) {

src/fields/TimeField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class TimeField extends React.PureComponent {
   render(b) {

src/fields/WeekField.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { block } from '../utils'
 import InputField from './InputField'
+import withLabel from '../utils/withLabel'
 
+@withLabel
 @block
 export default class WeekField extends React.PureComponent {
   render(b) {