jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

import _ from 'lodash';
import React from 'react';
import ui from 'core/ui';
import PropTypes from 'prop-types';
import { Immutable } from 'nuclear-js';
import { connect } from 'core/ui/decorators';


function mergeErrors(orig, newError) {
  const hasError = orig.hasError || newError.hasError;

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

jordangarcia

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import { Input, Button } from 'optimizely-oui'

import { fns as ComponentModuleFns } from 'bundles/p13n/sections/oasis_experiment_manager/components/experiment_dialog/component_module';

function isRequired(val) {
  if (!val) {

jordangarcia

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.