@zenequityui/form v0.9.6

Installation

To install a component run

$ npm install @zenequityui/form --save

Please import CSS styles via

@import '/path__to__node_modules/@zenequityui/form/dist/index.min.css

Usage

Form:

import { Form } from '@zenequityui/form';

const configuration = {
  data_type: "object",
  properties: {
    signin: {
        data_type: "object",
        title: "Sign in",
        visual: {
          show_inline: true,
          show_title: true
        },
        validation: {},
        properties: {
          username: {
            data_type: "string",
            title: "Username",
            description: "Enter your username",
            visual: {
              field_type: "input",
              show_title: true,
              show_description: true
            },
            validation: {
              only_alphabets_spaces: true,
              required: true
            }
          },
          password: {
            data_type: "string",
            title: "Password",
            visual: {
              field_type: "input",
              input_type: "password",
              show_title: true
            },
            validation: {
              required: true
            }
          },
        }
      },
      city: {
        data_type: "string",
        title: "City",
        visual: {
          field_type: "input",
          value_render: 'title',
          show_title: true,
        },
        validation: {}
      },
      fruits: {
        data_type: "object",
        title: "",
        visual: {},
        validation: {},
        properties: {
          value: {
            data_type: "array",
            title: "Select Fruits",
            visual: {
              array_supported_field: true,
              show_title: true
            },
            validation: {},
            items: {
              visual: {
                field_type: "checkbox",
                options: [
                  { key: 1, label: "Apple", value: "apple" },
                  { key: 2, label: "Mango", value: "mango" },
                  { key: 3, label: "Banana", value: "banana" },
                  { key: 4, label: "Orange", value: "orange" },
                  { key: 5, label: "Pineapple", value: "pineapple" }
                ],
                show_inline: true
              },
              data_type: "string"
            }
          }
        }
      },
      country: {
        data_type: "object",
        title: "",
        visual: {},
        validation: {},
        properties: {
          value: {
            data_type: "array",
            title: "Select Country",
            visual: {
              array_supported_field: true,
              show_title: true
            },
            validation: {},
            items: {
              visual: {
                field_type: "radio",
                options: [
                  { key: 1, label: "germany", value: "germany" },
                  { key: 2, label: "mexico", value: "mexico" },
                  { key: 3, label: "austria", value: "austria" },
                  { key: 4, label: "argentina", value: "argentina" },
                  { key: 5, label: "georgia", value: "georgia" }
                ],
                show_inline: true
              },
              data_type: "string"
            }
          }
        }
      },
      address: {
        data_type: "string",
        title: "Address",
        placeholder: "Address",
        visual: {
          field_type: "textarea",
          show_title: true,
          rows: 5
        },
        validation: {}
      },
      currency: {
        data_type: "string",
        title: "Currency",
        visual: {
          field_type: "select",
          show_icon: true,
          show_title: true,
          suggest: {
            name: "title",
            value: "value",
            options: [
              {
                title: "INR",
                value: "INR"
              },
              {
                title: "USD",
                value: "USD"
              },
              {
                title: "GBP",
                value: "GBP"
              },
              {
                title: "SGD",
                value: "SGD"
              }
            ]
          }
        },
        validation: {
          required_if: {
            check: "current_ctc.value"
          }
        }
      },
      company: {
        data_type: "string",
        title: "Company",
        visual: {
          field_type: "tags-input",
          show_icon: true,
          show_title: true,
          suggest: {
            name: "title",
            value: "value",
            options: [
              {
                title: "Alfreds Futterkiste",
                value: "alfreds futterkiste"
              },
              {
                title: "Centro comercial Moctezuma",
                value: "centro comercial moctezuma"
              },
              {
                title: "Ernst Handel",
                value: "ernst handel"
              },
              {
                title: "Island Trading",
                value: "island trading"
              }
            ]
          }
        },
        validation: {
          required_if: {
            check: "current_ctc.value"
          }
        }
      },
  }
};

initialState = {
  data: {
    city: {
      title: 'Bengaluru', key: 'bengaluru',
    },
  },
  errors: {},
  submitted: false,
};

<div>
  <Form
    configuration={configuration}
    data={state.data}
    errors={state.errors}
    onChange={({ property, data, error }) => {
      setState((prevState) => {
        let updatedErrors = _.cloneDeep(prevState.errors || {});

        if (_.isEmpty(error)) {
          updatedErrors = _.omit(updatedErrors, property);
        } else {
          updatedErrors = _.set(updatedErrors, property, error);
        }

        updatedErrors = _.mapValues(updatedErrors, value => {
          if (_.isArray(value) && _.every(value, (val) => (_.isNil(val) || _.isEmpty(val)))) {
            return [];
          }

          if (_.isPlainObject(value) && _.every(_.values(value), (val) => (_.isNil(val) || _.isEmpty(val)))) {
            return {};
          }

          return value;
        });

        return ({ data, errors: _.omitBy(updatedErrors, _.isEmpty) });
      });
    }}
    isSubmitted={state.submitted}
  />

  <button
    type="button"
    className="zenequity-button zenequity-button__contained"
    onClick={() => {
      setState({ submitted: true });
    }}
  >
    Submit
  </button>
</div>