How to use the informed.asField function in informed

transform: translateX(13px);
  }
`

const Toggle = ({ fieldState, ...props }) => (
  
    <label>
      
      <span>
    </span></label>
  
)

export default asField(Toggle)

import PropTypes from 'prop-types'
import { asField } from 'informed'
import * as yup from 'yup'
import { BasicInput } from './Input'

/**
 * @render react
 * @name PasswordInput
 */
class PasswordInput extends React.Component {
  render() {
    return 
  }
}

const PasswordInputAsField = asField(PasswordInput)

class WrappedPasswordInputAsField extends React.Component {
  static propTypes = {
    isDisabled: PropTypes.bool,
    isRequired: PropTypes.bool,
    minLength: PropTypes.number,
    validate: PropTypes.func,
  }

  static defaultProps = {
    isDisabled: false,
    isRequired: false,
    minLength: 8,
  }

  validate = value => {

import { asField } from 'informed'
import { Flex } from 'rebass'
import { WithOpenDialog } from 'hocs'
import Input from './Input'
import OpenDialogButton from './OpenDialogButton'

const InnerInput = styled(Input)`
  input {
    padding-right: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
`

const OpenDialogInput = asField(props => {
  return (
     (
        
          
           {
              const result = openDialog()
              //set value only if something was selected to avoid
              //overriding an existing state
              if (result) {
                props.fieldApi.setValue(result)
              }
            }}
          />

step="1"
        textAlign="right"
        type="number"
        width={70}
      />
    
  )
}

AutopilotAllocation.propTypes = {
  fieldApi: PropTypes.object.isRequired,
  fieldState: PropTypes.object.isRequired,
  sliderWidthNumber: PropTypes.number,
}

export default asField(AutopilotAllocation)

{fieldState.value && onLabel && }
      {!fieldState.value && offLabel && }
    
  
)

Toggle.propTypes = {
  fieldApi: PropTypes.object.isRequired,
  fieldState: PropTypes.object.isRequired,
  offLabel: PropTypes.node,
  onLabel: PropTypes.node,
}

export { Toggle as BasicToggle }

export default asField(Toggle)

height: ${props => props.thumbHeight};
    appearance: none;
    background: ${props => props.theme.colors[props.thumbBackground]};
    border-radius: ${props => props.thumbRadius};
    box-shadow: ${props =>
      makelongshadow(
        props.theme.colors[props.backgroundSlider],
        props.shadowSize,
        props.sliderWidthNumber
      )};
    margin-top: ${props => props.fitThumbInSlider};
    border: ${props => props.thumbBorder};
  }
`

const Range = asField(({ fieldState, fieldApi, ...props }) => {
  const { value } = fieldState
  const { setValue, setTouched } = fieldApi
  const { onChange, onBlur, forwardedRef, sliderWidthNumber = 200, ...rest } = props
  const styleProps = {
    sliderWidthNumber,
    sliderWidth: `${sliderWidthNumber}px`,
    sliderHeight: '4px',
    sliderBorderWidth: '0px',
    sliderBorderColor: 'white',
    sliderBorderRadius: '3px',
    backgroundSlider: 'gray',
    thumbWidth: '8px',
    thumbHeight: '8px',
    thumbRadius: '50%',
    thumbBorder: '0px solid black',
    thumbBackground: 'primaryText',

const { value: checked } = fieldState;

        return (
            
                <label>
                    <span>{checked &amp;&amp; }</span>
                    
                    <span>{label}</span>
                </label>
                {message}
            
        );
    }
}

export default asField(Checkbox);

import React from 'react'
import { asField } from 'informed'
import * as yup from 'yup'
import Input from 'components/UI/Input'

/**
 * @render react
 * @name PasswordInput
 */
class PasswordInput extends React.Component {
  render() {
    return <input type="password">
  }
}

const PasswordInputAsField = asField(PasswordInput)

class WrappedPasswordInputAsField extends React.Component {
  validate = value =&gt; {
    const { disabled, required } = this.props
    if (disabled) {
      return
    }
    try {
      let validator = yup.string().min(8)
      if (required) {
        validator = validator.required()
      }
      validator.validateSync(value)
    } catch (error) {
      return error.message
    }

}

Range.propTypes = {
  fieldApi: PropTypes.object.isRequired,
  fieldState: PropTypes.object.isRequired,
  forwardedRef: PropTypes.object,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  sliderWidthNumber: PropTypes.number,
}

const BasicRange = withTheme(Range)
export { BasicRange }

export default asField(BasicRange)

}

  return 
}

WrappedCheckboxAsField.propTypes = {
  description: PropTypes.node,
  fieldApi: PropTypes.object.isRequired,
  fieldState: PropTypes.object.isRequired,
  isDisabled: PropTypes.bool,
  label: PropTypes.string.isRequired,
}

export { WrappedCheckboxAsField as BasicCheckbox }

export default asField(WrappedCheckboxAsField)