From 72af9517d085a56604b06add7d890468701bf9ba Mon Sep 17 00:00:00 2001
From: ramfox <kasey@qri.io>
Date: Wed, 24 Jul 2019 15:16:14 -0400
Subject: [PATCH] feat(SelectInput): add `SelectInput` component for form
 select!

---
 app/components/form/SelectInput.tsx     | 45 ++++++++++++++++
 app/components/form/TextInput.tsx       |  2 +-
 app/components/modals/CreateDataset.tsx | 72 ++++++++++++++++++-------
 app/models/forms.ts                     |  4 ++
 4 files changed, 104 insertions(+), 19 deletions(-)
 create mode 100644 app/components/form/SelectInput.tsx
 create mode 100644 app/models/forms.ts

diff --git a/app/components/form/SelectInput.tsx b/app/components/form/SelectInput.tsx
new file mode 100644
index 00000000..fe4cef25
--- /dev/null
+++ b/app/components/form/SelectInput.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import classNames from 'classnames'
+import { ISelectOption } from '../../models/forms'
+
+export interface SelectInputProps {
+  label?: string
+  name: string
+  options: ISelectOption[]
+  error?: string
+  value: any
+  helpText?: string
+  showHelpText?: boolean
+  allowEmpty?: boolean
+  onChange: (name: string, value: any, e: any) => void
+}
+
+const SelectInput: React.FunctionComponent<SelectInputProps> = ({ label, name, options, error, value, helpText, showHelpText, allowEmpty = false, onChange }) => {
+  const feedback = error || (showHelpText && helpText)
+  const feedbackStyle = classNames({ 'error': error, 'textMuted': showHelpText && helpText })
+  return (
+    <div>
+      <div>
+        {label && <span className='primary'>{label}</span>}
+        <select
+          id={name}
+          name={name}
+          className='input'
+          value={value}
+          onChange={(e) => { onChange(name, e.target.value, e) }}
+        >
+          {allowEmpty && <option value='' />}
+          {options.map((opt: ISelectOption, i: number) => {
+            return (<option key={i} value={opt.value}>{opt.name}</option>)
+          }
+          )}
+        </select>
+      </div>
+      <div style={{ height: 20 }}>
+        <h6 style={{ textAlign: 'left', margin: 3 }} className={feedbackStyle} >{feedback || ''}</h6>
+      </div>
+    </div>
+  )
+}
+
+export default SelectInput
diff --git a/app/components/form/TextInput.tsx b/app/components/form/TextInput.tsx
index ef0f42d8..a2eca230 100644
--- a/app/components/form/TextInput.tsx
+++ b/app/components/form/TextInput.tsx
@@ -29,7 +29,7 @@ const TextInput: React.FunctionComponent<TextInputProps> = ({ label, name, type,
           name={name}
           type={type}
           maxLength={maxLength}
-          className='text-input'
+          className='input'
           value={value || ''}
           placeholder={placeHolder}
           onChange={(e) => { onChange(name, e.target.value, e) }}
diff --git a/app/components/modals/CreateDataset.tsx b/app/components/modals/CreateDataset.tsx
index 4d3834e0..b84700eb 100644
--- a/app/components/modals/CreateDataset.tsx
+++ b/app/components/modals/CreateDataset.tsx
@@ -1,15 +1,25 @@
 import * as React from 'react'
-// import { CSSTransition } from 'react-transition-group'
+import { CSSTransition } from 'react-transition-group'
 import Modal, { ModalProps } from './Modal'
 import TextInput from '../form/TextInput'
+import SelectInput from '../form/SelectInput'
 import Error from './Error'
 import Buttons from './Buttons'
 import Tabs from './Tabs'
 
+import { ISelectOption } from '../../models/forms'
+
+const formatOptions: ISelectOption[] = [
+  { name: 'csv', value: 'csv' },
+  { name: 'json', value: 'json' },
+  { name: 'xlsx', value: 'xlsx' },
+  { name: 'cbor', value: 'cbor' }
+]
+
 const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSubmit }) => {
   const [datasetName, setDatasetName] = React.useState('')
   const [path, setPath] = React.useState('')
-  // const [bodyFormat, setBodyFormat] = React.useState('csv')
+  const [bodyFormat, setBodyFormat] = React.useState(formatOptions[0].value)
   const [bodyPath, setBodyPath] = React.useState('')
   const [activeTab, setActiveTab] = React.useState('Create new datafile')
   const [dismissable, setDismissable] = React.useState(true)
@@ -26,8 +36,9 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
       setButtonDisabled(true)
       return
     }
-    if (activeTab === 'Use existing file') {
-      bodyPath === '' && setButtonDisabled(true)
+    if ((activeTab === 'Use existing file' && bodyPath === '') ||
+        (activeTab === 'Create new datafile' && bodyFormat === '')) {
+      setButtonDisabled(true)
       return
     }
     setButtonDisabled(false)
@@ -41,7 +52,7 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
 
   const renderCreateDataset = () => {
     return (
-      <div>
+      <div className='margin-bottom'>
         <TextInput
           name='datasetName'
           label='Dataset Name:'
@@ -68,6 +79,8 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
     }
     if (name === 'datasetName') setDatasetName(value)
     if (name === 'path') setPath(value)
+    if (name === 'format') setBodyFormat(value)
+    if (name === 'bodyPath') setBodyPath(value)
     toggleButton(activeTab)
   }
 
@@ -75,23 +88,44 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
     return <Tabs tabs={['Create new datafile', 'Use existing file']} active={activeTab} onClick={handleSetActiveTab}/>
   }
 
-  const renderCreateBody = () => {
-    return (
-      <div>
+  const renderCreateNewBody = () =>
+    <CSSTransition
+      in={ activeTab === 'Create new datafile' }
+      classNames="fade"
+      component="div"
+      timeout={300}
+      unmountOnExit
+    >
+      <div className='content'>
+        <SelectInput
+          name='format'
+          label='Choose format:'
+          options={formatOptions}
+          value={bodyFormat}
+          onChange={handleChanges}
+        />
+      </div>
+    </CSSTransition>
+
+  const renderUseExistingBody = () =>
+    <CSSTransition
+      in={ activeTab === 'Use existing file' }
+      classNames="fade"
+      component="div"
+      timeout={300}
+      unmountOnExit
+    >
+      <div className='content'>
         <TextInput
-          name='path'
-          label='Local Path:'
+          name='bodyPath'
+          label='Path to datafile:'
           type=''
-          value={path}
+          value={bodyPath}
           onChange={handleChanges}
           maxLength={300}
         />
       </div>
-    )
-  }
-
-  const renderUseExistingBody = () =>
-    <div>Use existing body!</div>
+    </CSSTransition>
 
   const handleSubmit = () => {
     setDismissable(true)
@@ -129,8 +163,10 @@ const CreateDataset: React.FunctionComponent<ModalProps> = ({ onDismissed, onSub
       <div>
         {renderCreateDataset()}
         {renderTabs()}
-        {renderCreateBody()}
-        {renderUseExistingBody()}
+        <div id='create-dataset-content-wrap' className='content-wrap'>
+          {renderCreateNewBody()}
+          {renderUseExistingBody()}
+        </div>
       </div>
       <Error text={error} />
       <Buttons
diff --git a/app/models/forms.ts b/app/models/forms.ts
new file mode 100644
index 00000000..d8b3abf4
--- /dev/null
+++ b/app/models/forms.ts
@@ -0,0 +1,4 @@
+export interface ISelectOption {
+  value: any
+  name: string
+}