prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make inputs as state

Browse source
This commit is contained in:
Hongbo Wu 2022-06-02 21:34:17 +08:00
parent 6ea55db088
commit fdccc3e701
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/web/components/patterns/FormModal.tsx
View file

@ -6,6 +6,7 @@ import {
import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { Button } from '../elements/Button'
import { StyledText } from '../elements/StyledText'
import { useState } from 'react'
export interface FormInputProps {
name: string
@ -28,6 +29,8 @@ export interface FormModalProps {
}
export function FormModal(props: FormModalProps): JSX.Element {
const [inputs, setInputs] = useState<FormInputProps[]>(props.inputs || [])
return (
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<ModalOverlay />
@ -42,7 +45,7 @@ export function FormModal(props: FormModalProps): JSX.Element {
props.onOpenChange(false)
}}
>
{props.inputs?.map((input) => (
{inputs.map((input, index) => (
<HStack key={input.name}>
<StyledText>{input.label}</StyledText>
<input
@ -51,10 +54,13 @@ export function FormModal(props: FormModalProps): JSX.Element {
value={input.value}
placeholder={input.placeholder}
onChange={(event) => {
input.onChange &&
if (input.onChange) {
inputs[index].value = event.target.value
setInputs(inputs)
input.onChange(
event.target.value || event.target.checked
)
}
}}
disabled={input.disabled}
hidden={input.hidden}