@heartfulnessinstitute/react-hfn-forms

react-hfn-forms

Exports

import DynamicForm from '@heartfulnessinstitute/react-hfn-forms'

    <DynamicForm
      key={this.state.current.id}
      formClassName="form"
      formTitle={this.state.useLayout ? "Demo with Layout" : "Demo without Layout"}
      formLayout={this.state.useLayout ? layout : null}
      defaultValues={this.state.current}
      formFields={[
        { name: "name", label: "Name", props: { required: true } },
        { name: "age", label: "Age", type: "number", defaultValue: 5, },
        { name: "rating", label: "Rating", type: "number", props: { min: 0, max: 5 }},
        { name: "gender", label: "Gender", type: "radio", options: gender_options },
        { name: "qualification", label: "Qualification" },
        { name: "country", label: "Country", type: "select", options: countries_options },
        {
          name: "states", label: "States", type: "multiselect", options: [],
          dynamic: (r) => (r.country === 'India' ? { options: states_india } : { options: states_us })
        },
        { name: "date", label: "Start Date", type: "date", props: {maxDate: "2019-12-22"} },
        { name: "enddate", label: "End Date", type: "date", props: { minDate: "2019-10-22" } },

      ]}
      onSubmit={model => {
        this.onSubmit(model);
      }}
      onDiscard={() => this.setState({ current: {}})}
    />

import DynamicTable from '@heartfulnessinstitute/react-hfn-forms/DynamicTable'

    <DynamicTable
      table_columns={table_columns}
      table_style={{rTableCell: {padding: "10px"}}}
      paneLayout={paneLayout}
      renderRecord={renderRecord}
      data={this.state.data}
      allow={{ create: true, delete: true, update: true }}
      buttons={{createButton, deleteButton, editButton, submitButton }}
      form_props={{ formFields, formLayout }}
      onCUD={this.onCUD}
      table_edit_inline={true}
    />

    table_columns = [
        { name: 'name', label: "Name" },
        { name: 'gender' , label: "Gender", transform: "gender" },
        { name: 'date', label: "Start Date",  transform: "shortdate" }
    ];

    formFields = [
        { name: "name", label: "Name", props: { required: true } },
        { name: "age", label: "Age", type: "number", defaultValue: 5, },
        { name: "rating", label: "Rating", type: "number", props: { min: 0, max: 5 }},
        { name: "gender", label: "Gender", type: "radio", options: gender_options },
        { name: "qualification", label: "Qualification" },
        { name: "country", label: "Country", type: "select", options: countries_options },
        {
          name: "states", label: "States", type: "multiselect", options: [],
          dynamic: (r) => (r.country === 'India' ? { options: states_india } : { options: states_us })
        },
        { name: "date", label: "Start Date", type: "date", props: {maxDate: "2019-12-22"} },
        { name: "enddate", label: "End Date", type: "date", props: { minDate: "2019-10-22" } },

      ]

For detailed usage of DynamicForm and DynamicTable, see the code in the examples folder.

Choice Lists

The following lists could be passed as options for dropdown/radio/multiselect fields

gender_options - male, female, unspecified countries - list of countries indiastates - list of indian states and union territories

The format of each entry in the above lists is a dict with the keys name, label and value. e.g., gender_options is defined as follows:

[
    { name: "M", label: "Male", value: "M" },
    { name: "F", label: "Female", value: "F" },
    { name: "U", label: "Unspecified", value: "U" },
]

Validators

validateEmail(string) - returns true if the given string is a valid email validatePhoneNumber(string) - returns true if the given string is a valid phonenumber (according to google phoneutil lib)

validatePNR(string) - returns true if given string is a valid registrations PNR (Heartfulness specific) validateAbhyasiId(string) - returns true if given string is a valid Heartfulness ID (Heartfulness specific)

validateRE(regex, string) = returns true if the given string matches the given regex

Formatting Helpers

formatSys2MomentDate(date_object) = returns the string in moment format date(Dec 31, 2019 23:01:59) => str(20191231230159)

formatSys2ShortDate(date_object) - returns the string in short format date(Dec 31, 2019 23:01:59) => str(Dec 31, 2019) or str(Dec 31) if current year is 2019

formatSys2OdooDate(date_object) - returns the string in odoo date format date(Dec 31, 2019 23:01:59) => str(2019-12-31)

formatOdooDate2Sys(string) - returns the date object given a string in odoo date format str(2019-12-31) => date(Dec 31, 2019 23:01:59)

doFormatShortDate(string) - returns the string in short format given odoo date string str(2019-12-31) => str(Dec 31, 2019) or str(Dec 31) if current year is 2019

doFormatYesNo(boolean) - returns the string yes or no given a boolean value TRUE => yes FALSE => no

doFormatTitle(string) - returns the string in Title case andhRA praDEsh => Andhra Pradesh

doFormatLower(string) - returns the string in Lower case andhRA praDEsh => andhra pradesh

doFormatUpper(string) - returns the string in Upper case andhRA praDEsh => ANDHRA PRADESH

doFormatGender(string) - returns full name in string given the gender value M, F, or U M => Male F => Female U => Not Mentioned

JSON Files

monthnames.json

indiastates.json

countries.json

Setup

# npm i @heartfulnessinstitute/react-hfn-forms -S