feat: optimize sale estimate form performance.

feat: optimize sale receipt form performance.
feat: optimize sale invoice form performance.
feat: optimize bill form performance.

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -1,12 +1,12 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import {
   FormGroup,
   InputGroup,
-  Intent,
   Position,
   ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
+import { FastField, ErrorMessage } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import moment from 'moment';
 import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
@@ -14,7 +14,6 @@ import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import {
   ContactSelecetList,
-  ErrorMessage,
   FieldRequiredHint,
   Icon,
   InputPrependButton,
@@ -25,9 +24,9 @@ import {
 import withCustomers from 'containers/Customers/withCustomers';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-function InvoiceFormHeader({
-  formik: { errors, touched, setFieldValue, getFieldProps, values },
+import { inputIntent, handleDateChange } from 'utils';
 
+function InvoiceFormHeader({
   //#withCustomers
   customers,
   //#withDialogActions
@@ -36,24 +35,6 @@ function InvoiceFormHeader({
   // #ownProps
   onInvoiceNumberChanged,
 }) {
-  const handleDateChange = useCallback(
-    (date_filed) => (date) => {
-      const formatted = moment(date).format('YYYY-MM-DD');
-      setFieldValue(date_filed, formatted);
-    },
-    [setFieldValue],
-  );
-
-  // handle change customer
-  const onChangeCustomer = useCallback(
-    (filedName) => {
-      return (customer) => {
-        setFieldValue(filedName, customer.id);
-      };
-    },
-    [setFieldValue],
-  );
-
   const handleInvoiceNumberChange = useCallback(() => {
     openDialog('invoice-number-form', {});
   }, [openDialog]);
@@ -66,130 +47,134 @@ function InvoiceFormHeader({
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
         {/* ----------- Customer name ----------- */}
-        <FormGroup
-          label={<T id={'customer_name'} />}
-          inline={true}
-          className={classNames(
-            'form-group--select-list',
-            'form-group--customer-name',
-            CLASSES.FILL,
+        <FastField name={'customer_id'}>
+          {({ form, field: { value }, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'customer_name'} />}
+              inline={true}
+              className={classNames(
+                'form-group--customer-name',
+                CLASSES.FILL,
+              )}
+              labelInfo={<FieldRequiredHint />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name={'customer_id'} />}
+            >
+              <ContactSelecetList
+                contactsList={customers}
+                selectedContactId={value}
+                defaultSelectText={<T id={'select_customer_account'} />}
+                onContactSelected={(customer) => {
+                  form.setFieldValue('customer_id', customer.id);
+                }}
+              />
+            </FormGroup>
           )}
-          labelInfo={<FieldRequiredHint />}
-          intent={errors.customer_id && touched.customer_id && Intent.DANGER}
-          helperText={
-            <ErrorMessage name={'customer_id'} {...{ errors, touched }} />
-          }
-        >
-          <ContactSelecetList
-            contactsList={customers}
-            selectedContactId={values.customer_id}
-            defaultSelectText={<T id={'select_customer_account'} />}
-            onContactSelected={onChangeCustomer('customer_id')}
-          />
-        </FormGroup>
+        </FastField>
 
         <Row>
           <Col md={7} className={'col--invoice-date'}>
             {/* ----------- Invoice date ----------- */}
-            <FormGroup
-              label={<T id={'invoice_date'} />}
-              inline={true}
-              labelInfo={<FieldRequiredHint />}
-              className={classNames(
-                'form-group--select-list',
-                'form-group--invoice-date',
-                CLASSES.FILL,
+            <FastField name={'invoice_date'}>
+              {({ form, field: { value }, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'invoice_date'} />}
+                  inline={true}
+                  labelInfo={<FieldRequiredHint />}
+                  className={classNames(
+                    'form-group--invoice-date',
+                    CLASSES.FILL,
+                  )}
+                  intent={inputIntent({ error, touched })}
+                  helperText={<ErrorMessage name="invoice_date" />}
+                >
+                  <DateInput
+                    {...momentFormatter('YYYY/MM/DD')}
+                    value={tansformDateValue(value)}
+                    onChange={handleDateChange((formattedDate) => {
+                      form.setFieldValue('invoice_date', formattedDate);
+                    })}
+                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  />
+                </FormGroup>
               )}
-              intent={
-                errors.invoice_date && touched.invoice_date && Intent.DANGER
-              }
-              helperText={
-                <ErrorMessage name="invoice_date" {...{ errors, touched }} />
-              }
-            >
-              <DateInput
-                {...momentFormatter('YYYY/MM/DD')}
-                value={tansformDateValue(values.invoice_date)}
-                onChange={handleDateChange('invoice_date')}
-                popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              />
-            </FormGroup>
+            </FastField>
           </Col>
 
           <Col md={5} className={'col--due-date'}>
             {/* ----------- Due date ----------- */}
-            <FormGroup
-              label={<T id={'due_date'} />}
-              inline={true}
-              className={classNames(
-                'form-group--select-list',
-                'form-group--due-date',
-                CLASSES.FILL,
+            <FastField name={'due_date'}>
+              {({ form, field: { value }, meta: { error, touched } }) => (
+                <FormGroup
+                  label={<T id={'due_date'} />}
+                  inline={true}
+                  className={classNames(
+                    'form-group--due-date',
+                    CLASSES.FILL,
+                  )}
+                  intent={inputIntent({ error, touched })}
+                  helperText={<ErrorMessage name="due_date" />}
+                >
+                  <DateInput
+                    {...momentFormatter('YYYY/MM/DD')}
+                    value={tansformDateValue(value)}
+                    onChange={handleDateChange((formattedDate) => {
+                      form.setFieldValue('due_date', formattedDate);
+                    })}
+                    popoverProps={{ position: Position.BOTTOM, minimal: true }}
+                  />
+                </FormGroup>
               )}
-              intent={errors.due_date && touched.due_date && Intent.DANGER}
-              helperText={
-                <ErrorMessage name="due_date" {...{ errors, touched }} />
-              }
-            >
-              <DateInput
-                {...momentFormatter('YYYY/MM/DD')}
-                value={tansformDateValue(values.due_date)}
-                onChange={handleDateChange('due_date')}
-                popoverProps={{ position: Position.BOTTOM, minimal: true }}
-              />
-            </FormGroup>
+            </FastField>
           </Col>
         </Row>
 
         {/* ----------- Invoice number ----------- */}
-        <FormGroup
-          label={<T id={'invoice_no'} />}
-          inline={true}
-          className={classNames('form-group--invoice-no', CLASSES.FILL)}
-          intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="invoice_no" {...{ errors, touched }} />
-          }
-        >
-          <ControlGroup fill={true}>
-            <InputGroup
-              intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
-              minimal={true}
-              {...getFieldProps('invoice_no')}
-              onBlur={handleInvoiceNumberChanged}
-            />
-            <InputPrependButton
-              buttonProps={{
-                onClick: handleInvoiceNumberChange,
-                icon: <Icon icon={'settings-18'} />,
-              }}
-              tooltip={true}
-              tooltipProps={{
-                content: 'Setting your auto-generated invoice number',
-                position: Position.BOTTOM_LEFT,
-              }}
-            />
-          </ControlGroup>
-        </FormGroup>
+        <FastField name={'invoice_no'}>
+          {({ form, field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'invoice_no'} />}
+              inline={true}
+              className={classNames('form-group--invoice-no', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="invoice_no" />}
+            >
+              <ControlGroup fill={true}>
+                <InputGroup
+                  minimal={true}
+                  {...field}
+                  onBlur={handleInvoiceNumberChanged}
+                />
+                <InputPrependButton
+                  buttonProps={{
+                    onClick: handleInvoiceNumberChange,
+                    icon: <Icon icon={'settings-18'} />,
+                  }}
+                  tooltip={true}
+                  tooltipProps={{
+                    content: 'Setting your auto-generated invoice number',
+                    position: Position.BOTTOM_LEFT,
+                  }}
+                />
+              </ControlGroup>
+            </FormGroup>
+          )}
+        </FastField>
 
         {/* ----------- Reference ----------- */}
-        <FormGroup
-          label={<T id={'reference'} />}
-          inline={true}
-          className={classNames('form-group--reference', CLASSES.FILL)}
-          intent={errors.reference_no && touched.reference_no && Intent.DANGER}
-          helperText={
-            <ErrorMessage name="reference" {...{ errors, touched }} />
-          }
-        >
-          <InputGroup
-            intent={
-              errors.reference_no && touched.reference_no && Intent.DANGER
-            }
-            minimal={true}
-            {...getFieldProps('reference_no')}
-          />
-        </FormGroup>
+        <FastField name={'reference'}>
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'reference'} />}
+              inline={true}
+              className={classNames('form-group--reference', CLASSES.FILL)}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="reference" />}
+            >
+              <InputGroup minimal={true} {...field} />
+            </FormGroup>
+          )}
+        </FastField>
       </div>
     </div>
   );