Skip to content
This repository has been archived by the owner on Nov 22, 2022. It is now read-only.

Commit

Permalink
Refactor form array into its own module
Browse files Browse the repository at this point in the history
FelixHenninger committed Aug 18, 2020
1 parent 1895ff0 commit 735e94e
Showing 2 changed files with 43 additions and 40 deletions.
41 changes: 41 additions & 0 deletions packages/builder/src/components/Form/array.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React, { Fragment } from 'react'

import { FieldArray, useFormikContext, getIn } from 'formik'

export const FormArray = ({
name, item: Item,
header: Header, footer: Footer,
wrapper: Wrapper=Fragment,
wrapperProps,
bodyWrapper: BodyWrapper=Fragment,
defaultItem={},
}) => {
const { values } = useFormikContext()
const rows = getIn(values, name)

return (
<FieldArray name={ name }>
{
arrayHelpers => <Wrapper { ...wrapperProps }>
{ Header && <Header name={ name } /> }
<BodyWrapper>
{
(rows || []).map(
(data, index) =>
<Item
key={ `${ name }[${ index }]` }
name={ `${ name }[${ index }]` }
index={ index }
isLastItem={ index === rows.length - 1 }
data={ data }
arrayHelpers={ arrayHelpers }
/>
)
}
</BodyWrapper>
{ Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } /> }
</Wrapper>
}
</FieldArray>
)
}
42 changes: 2 additions & 40 deletions packages/builder/src/components/Form/table.js
Original file line number Diff line number Diff line change
@@ -1,48 +1,10 @@
import React, { Fragment } from 'react'
import React from 'react'

import { FieldArray, useFormikContext, getIn } from 'formik'
import { Button } from 'reactstrap'

import Icon from '../Icon'
import './table.css'

const FormArray = ({
name, item: Item,
header: Header, footer: Footer,
wrapper: Wrapper=Fragment,
wrapperProps,
bodyWrapper: BodyWrapper=Fragment,
defaultItem={},
}) => {
const { values } = useFormikContext()
const rows = getIn(values, name)

return (
<FieldArray name={ name }>
{
arrayHelpers => <Wrapper { ...wrapperProps }>
{ Header && <Header name={ name } /> }
<BodyWrapper>
{
(rows || []).map(
(data, index) =>
<Item
key={ `${ name }[${ index }]` }
name={ `${ name }[${ index }]` }
index={ index }
isLastItem={ index === rows.length - 1 }
data={ data }
arrayHelpers={ arrayHelpers }
/>
)
}
</BodyWrapper>
{ Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } /> }
</Wrapper>
}
</FieldArray>
)
}
import { FormArray } from './array'

export const ButtonCell = ({ icon, onClick, style, disabled=false, type }) => {
const Wrapper = type ?? 'td'

0 comments on commit 735e94e

Please sign in to comment.