clone this project

npm install

Commands:

starts development server with example page

npm run start

builds file into dist folder

npm run transpile

to get local changes instantly:

link this package locally

npm link

start watching files and build latest changes by running

npm run watch

in the project folder where you want to see latest changes, install the project

npm install --save <project name>

to get local changes to this package to show up in your project instantly

npm link <project name>

Note: you will probably have to relink files after each install.

Getting Started

How this works:

InputComponent/InputGroupComponent are controlled components that take in "typical" controlled component props such as value and handleChange. handleChange should be a function that uses event.target.value and event.target.id dispatches an action to update state. (valueKey is placed in event.target.id)

There should also be an empty object initialized in your store/state/reducer to store validation results. this should be passed to InputComponent as validationObj.

InputComponent will check validationObj for items validated via approvejs, and update the reactstrap components accordingly.

As of now, validation is "manual". Hence, Inputs will not be validated upon load unless implemented.

Typically, the handleChange function should update the InputComponent's value, and also update (or initialize) validationObj each time it is called.

If no corresponding key is found in validationObj , validation will be skipped (assumed to be passed).

Validation will also be skipped if saveButtonPressed is false.

// example reducer default state
defaultState = {
    fields: {
        firstName: '',
        lastName: ''
        // ...other fields as needed
    },
    validation: {} // for storing validation results
}

And in your InputComponent:

// this.props = {...defaultState}
<InputComponent
    value={this.props.fields.value}
    validationObj={this.props.validation}
    ...
/>

Example onChange function, in mapDispatchToProps:

handleChange: (e) => {
    dispatch({
        type: CHANGE_FIELD_VALUE
        key: e.target.id,
        value: e.target.value,
    })
}

And in your reducer:

case 'CHANGE_FIELD_VALUE':
    // update field value
    newState.fields = Object.assign({}, state.fields);
    newState.fields[action.key] = action.value;

    // update validation result object with approvejs
    newState.validation = Object.assign({}, state.validation);
    newState.validation[action.key] = validationlib.validate(action.key, action.value);
    return newState;

In validationlib:

    validate: (key, value) => {
        if (!validationTypes[key]) {
            // no validation specified for key
            return false;
        }
        // see approvejs documentation for more info regarding rules
        let rules = validationTypes[key] ? validationTypes[key] : null;
        return approve.value(value, rules);
    }

InputComponent Props

    handleChange // onChange function that should update a) the Input's value and b) validationObj
    saveButtonPressed // validation will only trigger if this is true
    validationObj // the validation object in state that stores validation results
    inputProps // props that will be passed to the reactstrap Input component
    value // value of the input
    valueKey // key used for controlled component and validation. passed in as input.id
    type // type of input, e.g 'text', 'textarea', 'number'
    rows // only applies if type === 'textarea'
    noFeedback // remove the FormFeedback portion
    colWidth // bootstrap col width for inline inputs
    label
    defaultValue

TODO:

• use data-* props instead of hogging id prop
• rethink about forcing validation at start/proper initialization of validationObj
• CI to publish changes made in this repository to npm