React-native-form-library NPM

About

This directory contains the project that implements a solution for sharing common form functionality among react form components.

Web

If you are looking for the same functionality for react web, checkout react-form-library.

Exports

Form (wrapper function)

Provides an update property to use for your form fields.

'Form' Function Parameters

Table of parameters that the wrapper function takes.

Params	Type	Description
component	Component	The component to wrap.
formKey	String	The object key of your form object declared in state.

Provided Props

Table of props the wrapper function provides to the component.

Props	Type	Description
updateProperty	Component	Function to update form field with new value.

'updateProperty' Function Parameters

Table of paramters that the updateProperty function takes.

Params	Type	Description
key	String	The key of the form object to update. Allows dot notation, i.e. 'user.profile.first_name'.
value	Any	The new value to be set.

Usage

Example.

import React from 'react'
import {Form} from 'react-native-form-library'
import {TextInput} from 'react-native'
class Class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myForm: {
        profile: {
          first_name: ''
          }
        }
      }
    }

    render (
      const {updateProperty} = this.props
      return (
        <TextInput
          name="profile.first_name"
          value={this.state.myForm.profile.first_name}
          onChange=((event) => updateProperty("profile.first_name", event.nativeEvent.text))
        />
      )
    )
}
export default Form(Class, 'myForm')

Suggested Usage

Create a class for your form components in order to easily handle the update property.

import React from 'react'
import {TextInput} from 'react-native'
import {Form} from 'react-native-form-library'

class InputField extends React.Component {
    onChange (event) {
        this.props.onChange(this.props.name, event.nativeEvent.text)
    }
    render (
        return (
         <TextInput
           ...this.props
           value={this.props.value}
           onChange={this.onChange.bind(this)}
         />
        )
    )
}

class Class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            myForm: {
                profile: {
                    first_name: ''
                }
            }
        }
     }

     render (
       const {updateProperty} = this.props
       const {myForm} = this.state
       return (
         <InputField
           name="profile.first_name"
           value={myForm.profile.first_name}
           onChange=(updateProperty)
         />
       )
     )
 }
 export default Form(Class, 'myForm')

ValidateForm (wrapper function)

Provides form validation on submit to your form

ValidateForm Function Parameters

Table of parameters the ValidateForm function takes.

Params	Type	Description
component	Component	The component to wrap

Provided Props

Table of props the wrapper function provides to the component.

Props	Type	Description
formErrors	Object	The key value pair containing fields with errors.
validateForm	Func	The function to validate the form provided.
resetValidation	Func	The function to reset the formErrors object

'validateForm' Function Parameters

Table of paramaters the validateForm function takes.

Params	Type	Description
form	Object	The form object.
requiredFields	Object	The required fields to be validated

'requiredFields' Supported Keys

Table of keys validateForm recongizes.

Key	Type	Description
type	String	The type of validation for the field, i.e required, email, etc.
message	String	Custom message to be returned on key value pair for formErrors. This can be useful if you want to display a custom message by rendered by your input.
validate	Func	Custom validation function.

'validate' Function

Custom validate function properties.

Attr.	Type	Description
param	Any	The value to validate against.
return	Bool	True/false indicator whether the validation passes.

Usage

Ex.

import React from 'react'
import {View, Text, TouchableHighlight} from 'react-native'
import {ValidateForm} from 'react-native-form-library'

const requiredFields = {
    "profile.first_name": {
      type: 'required'
    },
    "email": {
      type: 'email',
      message: 'Provide a valid email',
    },
    "facility": {
      validate: (value) => {return value === 'myfacility'},
      message: 'The facility does not exist in our system'
    }
}

class Class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {form: {
      profile: {
        first_name: ''
      },
      email: '',
      facility: ''
    }}
  }

  onSubmit() {
    if (this.props.validateForm(this.state.form, requiredFields)) {
      ///fires off some api call
      api.submitForm(form).then(() => {
        this.props.resetValidation();
      }).catch(() => false)
    }
  }

  render (
    const {formErrors} = this.props;
    const {form} = this.state
    return (
      <View>
        <InputField
          ...
          hasError={formErrors.profile && formErrors.profile.first_name}
          value={form.profile.first_name}
        />
        <InputField
          ...
          hasError={formErrors.last_name}
          value={form.email}
        />
        <InputField
          ...
          hasError={formErrors.last_name}
          value={form.facility}
        />
        <TouchableHighlight onPress={this.onSubmit.bind(this)}>
            <Text>Submit</Text>
        </TocuhableHighlight>
      </View>
    )
  )
}

export default ValidateForm(Class)

Components

Input

Form input field.

Input Props

Input props. Refer to React Native's docs for all available Props to TextInput. | Props | Type | Description | | ----------------------| :---------------| -----------------------------------------------------| | containerStyle | Object | Style the input container. | | containerActiveStyle | Object | Style the input container when input is active. Input sets the active style onFocus. Input removes the active style onBlur.| | containerErrorStyle | Object | Style the input container when the error prop is set to true. | | error | Boolean | Flag indicating whether form validation failed. Sets error styles when true. | | inputStyle | Object | Style the input form element. | | inputActiveStyle | Object | Style the input form element when input is active. Input sets the active styles onFocus. Input removes the active styles onBlur.| | inputErrorStyle | Object | Style the input form element when the error prop is set to true. | | label | String | Label text for the form element. |
| labelStyle | Object | Style the label on the input form element. | | labelActiveStyle | Object | Style the label on the input form element when input is active. Input sets the active styles onFocus. Input removes the active styles onBlur.| | inputErrorStyle | Object | Style the label on the input form element when the error prop is set to true. | | name | String | Name of the input form element. Should be the same as the form field key. | | onBlur | Func | Custom onBlur function. | | onChange | Func | onChange prop provided by Form library. | | onFocus | Func | Custom onFocus function. | | placeholder | String | Placeholder text for the form input. | | value | String | Value of the input field. |

Usage

Ex.

import React from 'react'
import {Input, Form, ValidateForm} from 'react-native-form-library'
class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        profile: {
          first_name: ''
        }
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <Input
        containerStyle={containerStyle}
        containerActiveStyle={containerActiveStyle}
        containerErrorClass={containerErrorStyle}
        error={formErrors.profile && formErrors.profile.first_name}
        inputStyle={inputStyle}
        inputActiveStyle={inputActiveStyle}
        inputErrorStyle={inputErrorStyle}
        label="First Name"
        labelStyle={labelStyle}
        labelActiveStyle={labelActiveStyle}
        labelErrorStyle={labelErrorStyle}
        name="profile.first_name"
        onBlur={() => console.log("onBlur")}
        onChange={updateProperty}
        onFocus={() => console.log("onFocus")}
        placeholder="First Name"
        value={form.profile.first_name}
      />
    )
  }
}

export default ValidateForm(Form(Class, 'form'))

Select

Form select field.

Select Props

Select props. | Props | Type | Description | | ----------------------| :---------------| -----------------------------------------------------| | name | String | Name of the input form element. Should be the same as the form field key.
| onChange | Func | onChange prop provided by Form library. | | options | Array | Select options. Should be an array of objects. {value, name}. If 'value' is not set, select looks for an 'id'. Else it uses 'name' as the onChange value.} | placeholder | String | First select option label text. Defaults to Select...| | value | String, Number, Date | Value of the input field. |

Usage

Ex.

import React from 'react'
import {Select, Form, ValidateForm} from 'react-native-form-library'

const options = [
  {value: 1, name: 'Value 1'},
  {value: 2, name: 'Value 2'},
  {value: 3, name: 'Value 3'}
]

class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        selectValue: ''
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <Select
        name="selectValue"
        onChange={updateProperty}
        options={options}
        placeholder="Choose a Value..."
        value={form.selectValue}
      />
    )
  }
}

export default ValidateForm(Form(Class, 'form'))

DatePicker

Form DatePicker field.

DatePicker Props

DatePicker props. | Props | Type | Description | | ----------------------| :---------------| -----------------------------------------------------| | maxYear | Number | Max year available. | | minYear | Number | Min year available. | | name | String | Name of the input form element. Should be the same as the form field key. |
| onChange | Func | onChange prop provided by Form library. | | value | String | Value of the input field. YYYY-DD-MM |

Usage

Ex.

import React from 'react'
import {DatePicker, Form, ValidateForm} from 'react-native-form-library'

class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        date: ''
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <DatePicker
        name='date'
        onChange={updateProperty}
        value={form.date}
      />
    )
  }
}

export default ValidateForm(Form(Class, 'form'))

MonthYearPicker

Form MonthYearPicker field.

MonthYearPicker Props

MonthYearPicker props. | Props | Type | Description | | ----------------------| :---------------| -----------------------------------------------------| | maxYear | Number | Max year available. | | minYear | Number | Min year available. | | name | String | Name of the input form element. Should be the same as the form field key. |
| onChange | Func | onChange prop provided by Form library. | | value | String | Value of the input field. YYYY-MM |

Usage

Ex.

import React from 'react'
import {MonthYearPicker, Form, ValidateForm} from 'react-native-form-library'

class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        date: ''
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <MonthYearPicker
        name='date'
        onChange={updateProperty}
        value={form.date}
      />
    )
  }
}

export default ValidateForm(Form(Class, 'form'))

YearPicker

Form YearPicker field.

YearPicker Props

YearPicker props. | Props | Type | Description | | ----------------------| :---------------| -----------------------------------------------------| | initialValue | String | Default starting value. | | maxYear | Number | Max year available. | | minYear | Number | Min year available. | | name | String | Name of the input form element. Should be the same as the form field key. |
| onChange | Func | onChange prop provided by Form library. | | value | String | Value of the input field. YYYY |

Usage

Ex.

import React from 'react'
import {YearPicker, Form, ValidateForm} from 'react-native-form-library'

class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        date: ''
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <YearPicker
        initialValue="2017"
        name='date'
        onChange={updateProperty}
        value={form.date}
      />
    )
  }
}

export default ValidateForm(Form(Class, 'form'))

TimePicker

Form TimePicker field.

TimePicker Props

TimePicker props. | Props | Type | Description | | ----------------------| :---------------| -----------------------------------------------------| | name | String | Name of the input form element. Should be the same as the form field key. |
| onChange | Func | onChange prop provided by Form library. | | style | Object | Style prop | | value | String | Value of the input field. HH:MM <24 hour> |

Usage

Ex.

import React from 'react'
import {TimePicker, Form, ValidateForm} from 'react-native-form-library'

class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        time: ''
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <TimePicker
        name='time'
        onChange={updateProperty}
        value={form.time}
      />
    )
  }
}

export default ValidateForm(Form(Class, 'form'))

Usage

Ex.

Recommended Usage of Components

It is recommended that you wrap these components in your own component, defining the styles in the component wrapper. This way, you do not have to provide style classes to every form element you use. Ex.

import React from 'react'
import {Input} from 'react-native-form-library'
class InputField extends React.Component {
  render () {

    return (
      <Input
        containerStyle={containerStyle}
        containerActiveStyle={containerActiveStyle}
        containerErrorStyle={containerActiveStyle}
        inputStyle={inputStyle}
        inputActiveStyle={inputActiveStyle}
        inputErrorStyle={inputErrorStyle}
        labelStyle={labelStyle}
        labelActiveStyle={labelActiveStyle}
        labelErrorStyle={labelErrorStyle}
        {...this.props}
      />
    )
  }
}

export default InputField

class Class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      form: {
        profile: {
          first_name: ''
        }
      }
    }
  }
  render () {
    const {form} = this.state
    const {formErrors, updateProperty} = this.props
    return (
      <InputField
        error={formErrors.profile && formErrors.profile.first_name}
        label="First Name"
        name="profile.first_name"
        onBlur={() => console.log("onBlur")}
        onChange={updateProperty}
        onFocus={() => console.log("onFocus")}
        placeholder="First Name"
        value={form.profile.first_name}
      />
    )
  }
}
export default ValidateForm(Form(Class, 'form'))

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

babel-cli babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-2

@everything-registry/sub-chunk-2578 @infinitebrahmanuniverse/nolb-react-native-f

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago