Add basic footer to loop grid

Author: FelixHenninger

packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/footer.js

@@ -0,0 +1,170 @@
+import React, { useState, createRef } from 'react'
+
+import { ButtonDropdown, Button,
+  DropdownToggle, DropdownMenu, DropdownItem  } from 'reactstrap'
+import { range } from 'lodash'
+
+import Icon from '../../../../../Icon'
+//import FactorialModal from './components/FactorialModal'
+import { useArrayContext } from '../../../../../Form/array'
+
+import Uploader from '../../../../../Uploader'
+import { saveAs } from 'file-saver'
+import { parse, unparse } from 'papaparse'
+
+const exportGrid = (data, columns) => {
+  const output = unparse({
+    fields: columns.map(c => c.name),
+    data
+  })
+
+  return saveAs(
+    new Blob(
+      [ output ],
+      { type: 'text/csv;charset=utf-8' }
+    ),
+    'loop.csv'
+  )
+}
+
+export default ({ columns, data }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  //const factorialModal = createRef()
+  const { addRow, overwriteAll } = useArrayContext()
+
+  return (
+    <tfoot>
+      <tr>
+        <td />
+        <td colSpan={ columns.length }>
+            { /*
+          <FactorialModal ref={ factorialModal } />
+            */ }
+          <ButtonDropdown
+            size="sm"
+            className="w-100"
+            isOpen={ dropdownOpen }
+            toggle={ () => setDropdownOpen(!dropdownOpen) }
+          >
+            <Button
+              block size="sm"
+              outline color="muted"
+              className="hover-target"
+              onClick={ () => addRow() }
+              onMouseUp={
+                e => e.target.blur()
+              }
+              style={{
+                paddingLeft: '32px', // 6px standard + 24px toggle width
+              }}
+            >
+              <Icon icon="plus" />
+            </Button>
+            <DropdownToggle
+              caret split size="sm"
+              outline color="muted"
+              className="hover-target"
+              style={{
+                width: '24px',
+              }}
+            />
+            <DropdownMenu right>
+            { /*
+              <DropdownItem header>Generate</DropdownItem>
+              <DropdownItem
+                onClick={ () => factorialModal.current.show().then(result => {
+                  overwriteAll(result.rows, result.columns)
+                }) }
+              >
+                Factorial design
+              </DropdownItem>
+              */ }
+              <DropdownItem divider />
+              <DropdownItem header>Repeat</DropdownItem>
+              <DropdownItem
+                onClick={ () => {
+                  const n = window.prompt('How many times?')
+                  if (n) {
+                    overwriteAll(
+                      data.flatMap(r => range(n).map(() => r)),
+                      columns,
+                    )
+                  }
+                } }
+              >
+                Each row
+              </DropdownItem>
+              <DropdownItem
+                onClick={ () => {
+                  const n = window.prompt('How many times?')
+                  if (n) {
+                    overwriteAll(
+                      range(n).flatMap(() => data),
+                      columns,
+                    )
+                  }
+                } }
+              >
+                Entire grid
+              </DropdownItem>
+              <DropdownItem divider />
+              <DropdownItem header>CSV / TSV</DropdownItem>
+              <Uploader
+                accept="text/csv,text/tab-separated-values,.csv,.tsv"
+                multiple={ false }
+                onUpload={
+                  ([[content]]) => {
+                    // TODO: Close the dropdown when the file selector
+                    // is shown. This needs some more work to make sure
+                    // that the uploader component isn't removed from the
+                    // page in between
+                    setDropdownOpen(false)
+
+                    const parseResult = parse(
+                      content.trim(),
+                      { header: true }
+                    )
+
+                    if (
+                      // No detected issues
+                      parseResult.errors.length === 0 ||
+                      // Data is present, but no delimiter found
+                      (parseResult.data && parseResult.errors.length === 1 &&
+                        parseResult.errors[0].code === 'UndetectableDelimiter')
+                    ) {
+                      overwriteAll(
+                        parseResult.data.map(r => Object.values(r)),
+                        Object.keys(parseResult.data[0])
+                          .map(c => ({ name: c, type: 'string' })),
+                      )
+                    } else {
+                      console.log(
+                        'CSV import found errors: ',
+                        parseResult.errors
+                      )
+                      alert(
+                        'Sorry, I couldn\'t parse that CSV file. ' +
+                        'There seems to be an error. ' +
+                        'Could you check it, please?'
+                      )
+                    }
+                  }
+                }
+              >
+                <div className="dropdown-item">
+                  Import
+                </div>
+              </Uploader>
+              <DropdownItem
+                onClick={ () => exportGrid(data, columns) }
+              >
+                Export
+              </DropdownItem>
+            </DropdownMenu>
+          </ButtonDropdown>
+        </td>
+        <td />
+      </tr>
+    </tfoot>
+  )
+}

packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js

@@ -4,6 +4,7 @@ import { FastField, useFormikContext } from 'formik'
 import classnames from 'classnames'
 
 import Header from './header'
+import Footer from './footer'
 import { Table, DefaultRow } from '../../../../../Form/table'
 
 import './style.css'
@@ -34,6 +35,7 @@ export default () => {
     row={ Row }
     columns={ columns }
     header={ Header }
+    footer={ Footer }
     defaultItem={ Array(columns).fill('') }
     className={ classnames({
       'table': true,