atmaterialform v0.1.5

npm install atmaterialform

<ATForm >
        {[
          formBuilder.createTextBox({ id: 'Name'}),            
        ]}
</ATForm>

import { useRef, useState } from 'react';
import './App.css';
import { ATForm, formBuilder, Grid } from 'atmaterialform';

function App() {
  const mFormData = useRef(null)
  const formRef = useRef(null)
  const [formDataForView, setFormDataForView] = useState(null)

  const onFormChange = ({ formData, formDataKeyValue }) => {
    mFormData.current = {
      formData: formData,
      formDataKeyValue: formDataKeyValue,
    }

    setFormDataForView(formDataKeyValue)

    console.log('onFormChange', mFormData.current)
  }

  const onSetDefaultValueClick = (event, { startLoading, stopLoading }) => {
    startLoading()
    formRef.current.reset({
      'Name': null,
      'Countries': null,
    })
    setTimeout(() => {
      stopLoading()
    }, 300)
  }

  const onSubmitClick = (event, { formData, startLoading, stopLoading }) => {
    startLoading()

    setTimeout(() => {
      console.log('Submitting...', formData)
      stopLoading()
    }, 1000)
  }

  console.log('test', formBuilder.createTextBox({ id: 'name' }),)

  return (
    <div className='App'>
      <Grid container spacing={2} >
        <Grid item xs={12}>
          {JSON.stringify(formDataForView)}
        </Grid>
        <ATForm onChange={onFormChange} ref={formRef} >
          {[
            formBuilder.createTextBox({ id: 'Name', validation: { required: true, type: 'string', minLength: 1 } }),
            formBuilder.createComboBox({ id: 'Countries', options: [{ label: 'UK', value: 1 }, { label: 'US', value: 2 }], validation: { required: true, type: 'object' } }),
            formBuilder.createMultiComboBox({ id: 'CountriesIDVALUE', options: [{ label: 'UK', value: 1 }, { label: 'US', value: 2 }], validation: { required: true, type: 'array', minItems: 1 } }),
            formBuilder.createDatePicker({ id: 'DatePicker' }),
            formBuilder.createUploadButton({ id: 'UploadButton' }),
            formBuilder.createButton({ id: 'SetDefaultValue', onClick: onSetDefaultValueClick }),
            formBuilder.createButton({ id: 'SubmitButton', onClick: onSubmitClick, inputType: 'submit' }),
          ]}
        </ATForm>
      </Grid>
    </div>
  );
}

export default App;