@sequenia/react-material-forms

form blocks based on @sequenia/react-material-fields

Demo

https://sequenia.github.io/react-material-forms/

Requirements

React v16.0.0 and above, @material-ui/core v4.9.0 and above, @sequenia/describing-model v0.0.2 and above

Install

npm install --save @sequenia/react-material-forms

Usage

import FormFields from '@sequenia/react-material-forms';
import DescribingModel from '@sequenia/describing-model';
import AddressModel from './address_model.js';
import CompanyPersonModel from './company_person_model.js';
import uuidv4 from 'uuid/v4';


const salutationEnum = [
  {
    key: "Mr",
    value: "mr"
  },
  {
    key: "Ms",
    value: "ms"
  },
  {
    key: "Mrs",
    value: "mrs"
  }    
];

const errorDataExample = {
  fields: {
    birthPlace: ["can't be blank"]
  } 
}

const personalItems = {
  salutation: "mr",
  firstName: "John",
  lastName: "Doe",
  birthDate: "01-12-1985",
  manager: "",
  address: {
    country: "",
    city: "",
    postalCode: "",
    street: "",
    number: "",
    url: ""
  }
}

class PersonalInfoModel extends DescribingModel {


  formFields(item = undefined) {
    return [
        {
          name: "salutation",
          displayName: "Salutation",
          displayNamePosition: "above",
          type: "enum",
          data: salutationEnum,
          forceNextLine: true,
          weight: 6
        },
        {
          name: "firstName",
          displayName: "First name",
          displayNamePosition: "above",
          type: "text",
          weight: 6
        },
        {
          name: "lastName",
          displayName: "Last name",
          displayNamePosition: "above",
          type: "text",
          weight: 6
        },
        {
          name: "birthDate",
          displayName: "Birth date",
          displayNamePosition: "above",
          type: "dateTime",
          format: "DD.MM.YYYY",
          weight: 6
        },
        {
          name: "birthPlace",
          displayName: "Birth place",
          displayNamePosition: "above",
          type: "text",
          weight: 6
        },
        {
          name: "manager",
          displayName: "Select your manager",
          displayNamePosition: "above",
          type: "model",
          allowClear: true,
          clearItem: "No manager",
          optionDisplayName: option => {
            const { first_name, last_name } = option;
            return `${first_name} ${last_name}`; 
          },
          downloader: (searchQuery, selectedValueIds) => {
            const params = {
              query: searchQuery,
              valueIds: selectedValueIds
            }
            const url = new URL("https://reqres.in/api/users");
            Object.keys(params).forEach(key => url.searchParams.append(key, encodeURIComponent(params[key])));
            return fetch(url)
                  .then((response) => response.json())
                  .then((response) => {
                    const { data } = response;
                    return data;
                  });  
          },
          weight: 6,
          forceNextLine: true
        },
        {
          name: "address",
          type: "nestedModel",
          weight: 12,
          fields: (parentField, item) => AddressModel.formFields({item}),
        },
        {
          name: "people",
          type: "nestedModelsArray",
          weight: 12,
          itemWeight: 12,
          addText: "Add company person",
          defaultWeight: 6,
          allowDragDrop: false,
          allowDelete: true,
          fields: (parentField, item) => {
            return CompanyPersonModel.formFields({item: item});
          },
          defaultItem: (items) => {
            return {
              clientId: uuidv4(),
            }
          }
        },
    ]
  }
}
 
const PersonalInfoModelInstance = new PersonalInfoModel();

const App = () => {
  return  <div className = "container">
    <h1>React Material Form</h1>
    <p>Form blocks based on @sequenia/react-material-fields</p>
    <section className = "section">
      <h3>Simple model FormFields</h3>
      <FormFields formFields = { PersonalInfoModelInstance.formFields() } 
                  errorData = { errorDataExample }
                  item = { personalItems } />
    </section>
  </div> 
}

License

MIT © sequenia