Improve form table performance

Factor out some components that were instantiated inline, vastly improving rendering performance and UX for form table headers.
ctrl-labs · Sep 30, 2020 · 2cd4c80 · 2cd4c80
1 parent 8a50298
commit 2cd4c80
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 50 deletions.
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js
@@ -5,9 +5,10 @@ import { InputGroupButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 import classnames from 'classnames'
 
 import { useArrayContext } from '../../../../../Form/array'
-import { ButtonCell } from '../../../../../Form/table'
+import { ButtonCell, DefaultHeader } from '../../../../../Form/table'
 import Icon from '../../../../../Icon'
 import { FastField, useField } from 'formik'
+import { range } from 'lodash'
 
 const CellTypeDropdown = ({ name, index, actions, disabled=false }) => {
   const [field, , helpers] = useField(name)
@@ -100,32 +101,34 @@ export const HeaderCell = ({ index, actions }) =>
     />
   </InputGroup>
 
-export default ({ name, columns }) => {
+export default ({ columns }) => {
   const { addColumn, fillColumn, clearColumn, deleteColumn } = useArrayContext()
 
   return (
-    <thead>
-      <tr>
-        <th></th>
-        { Array(columns).fill(null).map((_, i) =>
-          <th key={ `${ name }-header-${ i }` }>
-            <HeaderCell
-              index={ i }
-              actions={{
-                'Fill': fillColumn,
-                'Clear': clearColumn,
-                'Delete': deleteColumn,
-              }}
-            />
-          </th>
-        ) }
-        <ButtonCell
-          type="th" icon="plus"
-          style={{ height: '42px' }}
-          onClick={ () => addColumn('', { name: '', type: 'string' }) }
-          disabled={ columns >= 12 }
-        />
-      </tr>
-    </thead>
+    <DefaultHeader columns={ columns }>
+      <thead>
+        <tr>
+          <th></th>
+          { range(columns).map((_, i) =>
+            <th key={ `header-${ i }` }>
+              <HeaderCell
+                index={ i }
+                actions={{
+                  'Fill': fillColumn,
+                  'Clear': clearColumn,
+                  'Delete': deleteColumn,
+                }}
+              />
+            </th>
+          ) }
+          <ButtonCell
+            type="th" icon="plus"
+            style={{ height: '42px' }}
+            onClick={ () => addColumn('', { name: '', type: 'string' }) }
+            disabled={ columns >= 12 }
+          />
+        </tr>
+      </thead>
+    </DefaultHeader>
   )
 }
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
@@ -2,26 +2,26 @@ import React, { Fragment } from 'react'
 
 import { FastField, useFormikContext } from 'formik'
 import classnames from 'classnames'
+import { range } from 'lodash'
 
+import { Table, DefaultRow } from '../../../../../Form/table'
 import Header from './header'
 import Footer from './footer'
-import { Table, DefaultRow } from '../../../../../Form/table'
 
 import './style.css'
 
-const Row = ({ index: rowIndex, name, data, arrayHelpers }) =>
+const Row = ({ index: rowIndex, name, columns, arrayHelpers }) =>
   <DefaultRow
     index={ rowIndex } arrayHelpers={ arrayHelpers }
     wrapper={ Fragment }
   >
-    { data.map(
-      (_, columnIndex) =>
-        <td key={ `${ name }[${ columnIndex }]` }>
-          <FastField
-            name={ `${ name }[${ columnIndex }]` }
-            className="form-control text-monospace"
-          />
-        </td>
+    { range(columns).map(columnIndex =>
+      <td key={ `${ name }[${ columnIndex }]` }>
+        <FastField
+          name={ `${ name }[${ columnIndex }]` }
+          className="form-control text-monospace"
+        />
+      </td>
     ) }
   </DefaultRow>
 
@@ -32,8 +32,8 @@ export default () => {
 
   return <Table
     name="templateParameters.rows"
-    row={ Row }
     columns={ columns }
+    row={ Row }
     header={ Header }
     footer={ Footer }
     defaultItem={ Array(columns).fill('') }

diff --git a/packages/builder/src/components/Form/array.js b/packages/builder/src/components/Form/array.js
@@ -90,10 +90,11 @@ export const useArrayContext = () => useContext(ArrayContext)
 
 export const FormArray = ({
   name, item: Item,
-  header: Header, footer: Footer,
-  wrapper: Wrapper=Fragment,
-  wrapperProps,
+  header: Header,
+  footer: Footer,
+  wrapper: Wrapper=Fragment, wrapperProps,
   bodyWrapper: BodyWrapper=Fragment,
+  globalProps={},
   defaultItem={},
 }) => {
   const { values, setFieldValue, setValues }  = useFormikContext()
@@ -110,7 +111,7 @@ export const FormArray = ({
             setValues={ setValues }
             setFieldValue={ setFieldValue }
           >
-            { Header && <Header name={ name } /> }
+            { Header && <Header { ...globalProps } /> }
             <BodyWrapper>
               {
                 (rows || []).map(
@@ -122,11 +123,12 @@ export const FormArray = ({
                       isLastItem={ index === rows.length - 1 }
                       data={ data }
                       arrayHelpers={ arrayHelpers }
+                      { ...globalProps }
                     />
                 )
               }
             </BodyWrapper>
-            { Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } /> }
+            { Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } { ...globalProps } /> }
           </ArrayContextProvider>
         </Wrapper>
       }

diff --git a/packages/builder/src/components/Form/table.js b/packages/builder/src/components/Form/table.js
@@ -84,24 +84,26 @@ const DefaultFooter = ({ addItem, columns }) =>
     </tr>
   </tfoot>
 
+export const DefaultHeader = ({ columns, children }) =>
+  <>
+    <DefaultColgroup columns={ columns }/>
+    { children }
+  </>
+
 export const Table = ({
-  header: Header,
   row,
-  footer: Footer=DefaultFooter,
+  header=DefaultHeader,
+  footer=DefaultFooter,
   columns=1,
   className, ...props
 }) =>
   <FormArray
     wrapper="table"
     wrapperProps={{ className: `table grid ${ className }` }}
-    header={ ({ name }) =>
-      <>
-        <DefaultColgroup name={ props.name } columns={ columns }/>
-        { Header && <Header name={ name } columns={ columns } /> }
-      </>
-    }
     bodyWrapper="tbody"
     item={ row }
-    footer={ (props) => <Footer columns={ columns } { ...props } /> }
+    header={ header }
+    footer={ footer }
+    globalProps={{ columns }}
     { ...props }
   />