feat: add MultiInput component #693
Conversation
Features
ContributorsCommit-Lint commandsYou can trigger Commit-Lint actions by commenting on this PR:
|
|
Visit the preview URL for this PR (updated for commit eba0521): https://rainbow-modules--pr693-feat-add-multi-input-oyhkkx9u.web.app (expires Wed, 12 Apr 2023 19:50:44 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: a8717bcb415e206776430df4c4296748001a9951 |
|
|
||
| # Overview | ||
|
|
||
| `MultiInput` is an component that allows you to enter many input. |
There was a problem hiding this comment.
let's have chat GPT to help with the documentation
| import { Field, UniversalForm } from '@rainbow-modules/forms'; | ||
| import MultiInput from '../../src/components/MultiInput'; | ||
|
|
||
| const GOOGLE_MAPS_APIKEY = process.env.STORYBOOK_GOOGLE_MAPS_APIKEY; |
There was a problem hiding this comment.
I checked and we already have an env for this called STORYBOOK_GOOGLE_MAPS_API_KEY in circle CI then let's change it here
| <Field | ||
| name="phones" | ||
| label="Phone numbers" | ||
| component={(props) => <MultiInput component={PhoneInput} {...props} />} |
There was a problem hiding this comment.
let's change the prop name component to inputComponent then we can use it like
<Field
label="Phone numbers"
component={MultiInput}
inputComponent={PhoneInput}
validate={validate}
/>
| @@ -0,0 +1,101 @@ | |||
| import React from 'react'; | |||
| import { mount, shallow } from 'enzyme'; | |||
There was a problem hiding this comment.
let's not use enzyme anymore, instead use react testing library
| label?: ReactNode; | ||
| error?: ReactNode; | ||
| value?: T; | ||
| onChange?: (value: any) => void; |
There was a problem hiding this comment.
we must avoid using any
| ? valueInProps | ||
| : [[undefined, undefined]]; | ||
|
|
||
| const updatePhone = (index: number, newValue: any) => { |
| ? valueInProps | ||
| : [[undefined, undefined]]; | ||
|
|
||
| const updatePhone = (index: number, newValue: any) => { |
There was a problem hiding this comment.
no any instead you can use unkown
| : [{ label: isFirst ? 'Primary' : 'Secondary' }, { label: 'Note' }]; | ||
|
|
||
| const rowError = !error || typeof error === 'string' ? null : (error[index] as RowError); | ||
| const phoneError = rowError && rowError.value; |
There was a problem hiding this comment.
change var name phoneError
| import { InputConfig, RowError } from './types'; | ||
|
|
||
| interface InputProps<T> { | ||
| label?: ReactNode; |
There was a problem hiding this comment.
I think label is always required
|
using this example causes this |
No description provided.