feat(SelectInput): add SelectInput component for form select!

qri-io · Jul 26, 2019 · 72af951 · 72af951
1 parent 4dcbfd4
commit 72af951
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 19 deletions.
diff --git a/app/components/form/SelectInput.tsx 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
@@ -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
@@ -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,30 +79,53 @@ 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)
  }
 
  const renderTabs = () => {
  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
@@ -0,0 +1,4 @@
+export interface ISelectOption {
+ value: any
+ name: string
+}