Merge pull request #9 from OlivierJM/add-double-field-component

OlivierJM · web-flow · commit aa35bc6b7ec1 · 2020-12-13T18:34:57.000+02:00
Add double field component
diff --git a/.github/main.yml b/.github/main.yml
@@ -0,0 +1,21 @@
+name: Node CI
+on: [push]
+jobs:
+  test:
+    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node_version: ['8', '10', '12']
+        os: [ubuntu-latest]
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node_version }}
+
+    - name: npm install, build and test
+      run: |
+        npm install
+        npm run test
diff --git a/README.md b/README.md
@@ -14,20 +14,42 @@ npm install --save react-dynamic-fields
 
 ```tsx
 import React from 'react'
-import SingleField from 'react-dynamic-fields'
+import { SingleField, DoubleField } from 'react-dynamic-fields'
 
 const App = () => {
+  const nums = {
+    value: '',
+    category: ''
+  }
   const [options, setOptions] = React.useState([''])
+  const [numbers, setNumbers] = React.useState([nums])
+
   return (
-    <SingleField
-      options={options}
-      setOptions={setOptions}
-      label='Types of fruits'
-    />
+    <React.Fragment>
+      <SingleField
+        options={options}
+        setOptions={setOptions}
+        label='Types of fruits'
+      />
+
+      <DoubleField
+        options={numbers}
+        setOptions={setNumbers}
+        initialValue={nums}
+        data={{
+          label: 'Fruits',
+          name: 'fruits',
+          types: options
+        }}
+      />
+    </React.Fragment>
   )
 }
 ```
+Single Option demo
+![demo](example/assets/dynamic_field.gif)
 
+Single and Double Field Options demo
 ![demo](example/assets/dynamic_field.gif)
 
 ## License
diff --git a/example/assets/dynamic_field2.gif b/example/assets/dynamic_field2.gif
diff --git a/example/package.json b/example/package.json
@@ -17,7 +17,7 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "react": "^17.0.1",
+    "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-dynamic-fields": "link:..",
     "react-scripts": "link:../node_modules/react-scripts",
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,16 +1,38 @@
 import React from 'react'
-import { SingleField } from 'react-dynamic-fields'
+import { SingleField, DoubleField } from 'react-dynamic-fields'
 
 const App = () => {
+  const nums = {
+    value: '',
+    category: ''
+  }
   const [options, setOptions] = React.useState([''])
+  const [numbers, setNumbers] = React.useState([nums])
+
   return (
-    <SingleField
-    //@ts-ignore
-      options={options}
-      //@ts-ignore
-      setOptions={setOptions}
-      label='Types of fruits'
-    />
+    <React.Fragment>
+      <SingleField
+        //@ts-ignore
+        options={options}
+        //@ts-ignore
+        setOptions={setOptions}
+        label='Types of fruits'
+      />
+
+      <DoubleField
+        //@ts-ignore
+        options={numbers}
+        //@ts-ignore
+        setOptions={setNumbers}
+        initialValue={nums}
+        data={{
+          label: 'Fruits',
+          name: 'fruits',
+          //@ts-ignore
+          types: options
+        }}
+      />
+    </React.Fragment>
   )
 }
 
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -8754,13 +8754,9 @@ react-is@^17.0.1:
   version "0.0.0"
   uid ""
 
-react@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+"react@link:../node_modules/react":
+  version "0.0.0"
+  uid ""
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  transform: {
+    '^.+\\.ts?$': 'ts-jest'
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.ts?$',
+  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
+  collectCoverage: true,
+  clearMocks: true,
+  coverageDirectory: 'coverage'
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dynamic-fields",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "A package to make it easy to auto add fields in react and collect the data",
   "author": "OlivierJM",
   "license": "MIT",
@@ -36,7 +36,6 @@
     "@types/react-dom": "^16.9.7",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
-    "microbundle-crl": "^0.13.10",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
@@ -50,6 +49,7 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "react": "^16.13.1",
diff --git a/src/DoubleField.test.js b/src/DoubleField.test.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import DoubleField from './DoubleField'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+describe('DoubleField Component', () => {
+  it('it renders and updates correctly', () => {
+    const updateMock = jest.fn()
+    const nums = [
+      {
+        value: '',
+        category: ''
+      },
+      {
+        value: '',
+        category: ''
+      }
+    ]
+    const options = ['ora', 'pui', 'somfer']
+    const container = render(
+      <DoubleField
+        options={nums}
+        setOptions={updateMock}
+        initialValue={nums}
+        data={{
+          label: 'Fruits',
+          name: 'fruits',
+          types: options
+        }}
+      />
+    )
+    expect(container.queryByText('add Fruits')).toBeInTheDocument()
+    expect(container.queryByText('add Fruits')).not.toBeDisabled()
+    expect(container.queryAllByText('remove')[0]).not.toBeDisabled()
+    expect(container.queryAllByText('remove')).toHaveLength(2)
+    expect(
+      screen.getAllByPlaceholderText('type your Fruits')[0]
+    ).toBeInTheDocument()
+    expect(screen.getAllByPlaceholderText('type your Fruits')).toHaveLength(2)
+
+    expect(container.queryByTestId('add_field')).toHaveTextContent('add Fruits')
+
+    fireEvent.change(container.queryAllByTestId('option_field')[0], {
+      target: { value: 'some value' }
+    })
+    expect(container.queryAllByTestId('option_field')[0].value).not.toBeNull()
+    expect(updateMock).toBeCalled()
+    fireEvent.click(container.queryAllByText('remove')[0])
+    expect(updateMock).toBeCalled()
+  })
+})
diff --git a/src/DoubleField.tsx b/src/DoubleField.tsx
@@ -0,0 +1,81 @@
+import React from 'react'
+
+interface DataProps {
+  name: string
+  label: string
+  types: [string]
+}
+
+interface OptionProps {
+  category: string
+}
+
+interface Props {
+  data: DataProps
+  options: [OptionProps]
+  setOptions: (x: any) => {}
+  label: string
+  initialValue: OptionProps
+}
+
+export default function DoubleField({
+  data,
+  initialValue,
+  options,
+  setOptions
+}: Props) {
+  function handleRemoveField(index: number) {
+    const values = options
+    values.splice(index, 1)
+    setOptions([...values])
+  }
+
+  function handleAddField() {
+    setOptions([...options, initialValue])
+  }
+  function handleChange(
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLSelectElement>,
+    index: number
+  ) {
+    const newValue = { [event.target.name]: event.target.value }
+    setOptions([
+      ...options.slice(0, index),
+      { ...options[index], ...newValue },
+      ...options.slice(index + 1)
+    ])
+  }
+  return (
+    <React.Fragment>
+      {options.map((_option: OptionProps, i: number) => (
+        <div key={i}>
+          <input
+            placeholder={`type your ${data.label}`}
+            value={options[i][data.name]}
+            onChange={(event) => handleChange(event, i)}
+            name={data.name}
+            data-testid='option_field'
+            autoFocus
+          />
+          <select
+            name='category'
+            value={_option.category}
+            onChange={(event) => handleChange(event, i)}
+          >
+            {data.types.map((type: string) => (
+              <option key={type} value={type}>
+                {type}
+              </option>
+            ))}
+          </select>
+          <button onClick={() => handleRemoveField(i)}>remove</button>
+        </div>
+      ))}
+      <button
+        data-testid='add_field'
+        onClick={handleAddField}
+      >{`add ${data.label}`}</button>
+    </React.Fragment>
+  )
+}
diff --git a/src/SingleField.test.js b/src/SingleField.test.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import SingleField from './SingleField'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+describe('SingleField', () => {
+  it('it renders and updates correctly', () => {
+    const updateMock = jest.fn()
+    const options = ['', '', '']
+    const container = render(
+      <SingleField
+        options={options}
+        setOptions={updateMock}
+        label='Types of fruits'
+      />
+    )
+    expect(container.queryByText('add Types of fruits')).toBeInTheDocument()
+    expect(container.queryByText('add Types of fruits')).not.toBeDisabled()
+    expect(container.queryAllByText('remove')[0]).not.toBeDisabled()
+    expect(container.queryAllByText('remove')).toHaveLength(3)
+    expect(
+      screen.getAllByPlaceholderText('type your Types of fruits')[0]
+    ).toBeInTheDocument()
+    expect(
+      screen.getAllByPlaceholderText('type your Types of fruits')
+    ).toHaveLength(3)
+
+    expect(container.queryByTestId('add_field')).toHaveTextContent(
+      'add Types of fruits'
+    )
+
+    fireEvent.change(container.queryAllByTestId('option_field')[0], {
+      target: { value: 'some value' }
+    })
+    expect(container.queryAllByTestId('option_field')[0].value).not.toBeNull()
+    expect(updateMock).toBeCalled()
+    fireEvent.click(container.queryAllByText('remove')[0])
+    expect(updateMock).toBeCalled()
+  })
+})
diff --git a/src/SingleField.tsx b/src/SingleField.tsx
@@ -34,12 +34,16 @@ export default function SingleField({ options, setOptions, label }: Props) {
             placeholder={`type your ${label}`}
             value={options[i]}
             onChange={(event) => handleOptionChange(event, i)}
+            data-testid='option_field'
             autoFocus
           />
           <button onClick={() => handleRemoveOption(i)}>remove</button>
         </div>
       ))}
-      <button onClick={handleAddOption}>{`add ${label}`}</button>
+      <button
+        data-testid='add_field'
+        onClick={handleAddOption}
+      >{`add ${label}`}</button>
     </React.Fragment>
   )
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,4 @@
 import SingleField from './SingleField'
+import DoubleField from './DoubleField'
 
-export { SingleField }
+export { SingleField, DoubleField }
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
