Port image component to formik

Author: FelixHenninger

packages/builder/src/components/ComponentOptions/components/Content/Page/components/ItemOptions/components/Image.js

@@ -1,50 +1,46 @@
-import React, { createRef, useContext } from 'react'
+import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 
-import { Control } from 'react-redux-form'
+import { Field } from 'formik'
 import {
-  Row, Col, Collapse, Input, Button,
+  Row, Col, Collapse,
   InputGroup, InputGroupAddon, InputGroupText
 } from 'reactstrap'
 
 import Icon from '../../../../../../../Icon'
-import FileSelector from '../../../../../../../FileSelector'
+import FileSelectorField from '../../../../../../../FileSelector/field'
 
 import { ItemContext } from '../../../index'
 
-export const ImageOptions = ({ rowIndex, ...props }) => {
+export const ImageOptions = ({ name, index }) => {
   const { openItem } = useContext(ItemContext)
 
   return (
     <Row form>
       <Col>
-        <Collapse isOpen={ openItem === rowIndex }>
+        <Collapse isOpen={ openItem === index }>
           <InputGroup className="mt-2">
             <InputGroupAddon addonType="prepend">
               <InputGroupText>
                 <Icon icon="arrows-h" fixedWidth />
               </InputGroupText>
             </InputGroupAddon>
-            <Control
-              model=".width"
+            <Field
+              name={ `${ name }.width` }
               defaultValue=""
               placeholder="width"
-              debounce={ 300 }
-              className="form-control"
-              style={{ fontFamily: 'Fira Mono' }}
+              className="form-control text-monospace"
             />
             <InputGroupAddon addonType="prepend">
               <InputGroupText>
                 <Icon icon="arrows-v" fixedWidth />
               </InputGroupText>
             </InputGroupAddon>
-            <Control
-              model=".height"
+            <Field
+              name={ `${ name }.height` }
               defaultValue=""
               placeholder="height"
-              debounce={ 300 }
-              className="form-control"
-              style={{ fontFamily: 'Fira Mono' }}
+              className="form-control text-monospace"
             />
           </InputGroup>
         </Collapse>
@@ -53,60 +49,27 @@ export const ImageOptions = ({ rowIndex, ...props }) => {
   )
 }
 
-const ImageSelector = ({ rowIndex }, { id, gridDispatch }) => {
-  const fileSelector = createRef()
-
-  return (
-    <Row form>
-      <Col>
-        <FileSelector
-          accept="image/*"
-          component={ id }
-          ref={ fileSelector }
-        />
-        <InputGroup>
-          <Control
-            model=".src"
-            placeholder="source"
-            component={ Input }
-            style={{ fontFamily: 'Fira Mono' }}
-            debounce={ 300 }
-          />
-          <InputGroupAddon addonType="append">
-            <Button
-              outline color="secondary"
-              style={{ minWidth: '3rem' }}
-              onClick={ async () => {
-                try {
-                  const files = await fileSelector.current.select()
-                  gridDispatch('change', {
-                    model: `local.items.rows[${ rowIndex }][0].src`,
-                    value: `\${ this.files["${ files[0].localPath }"] }`
-                  })
-                } catch (error) {
-                  console.log('Error while selecting image', error)
-                }
-              } }
-            >
-              <Icon fixedWidth icon="folder" />
-            </Button>
-          </InputGroupAddon>
-        </InputGroup>
-      </Col>
-    </Row>
-  )
-}
+const ImageSelector = ({ name }, { id }) =>
+  <Row form>
+    <Col>
+      <FileSelectorField
+        name={ `${ name }.src`}
+        accept="image/*"
+        placeholder="source"
+        component={ id }
+      />
+    </Col>
+  </Row>
 
 ImageSelector.contextTypes = {
   id: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
-  gridDispatch: PropTypes.func,
 }
 
-export default ({ rowIndex }) =>
+export default ({ name, index }) =>
   <>
-    <ImageSelector rowIndex={ rowIndex } />
-    <ImageOptions rowIndex={ rowIndex } />
+    <ImageSelector name={ name } />
+    <ImageOptions name={ name } index={ index } />
   </>