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

Update modal form style

Browse source
This commit is contained in:
Hongbo Wu 2022-06-03 10:42:00 +08:00
parent ba3316f621
commit 32a45676e3
1 changed files with 96 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,9 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { Button } from '../elements/Button'
import { StyledText } from '../elements/StyledText'
import { useState } from 'react'
import { FormInput } from '../elements/FormElements'
import { CrossIcon } from '../elements/images/CrossIcon'
import { theme } from '../tokens/stitches.config'
export interface FormInputProps {
name: string
@ -34,12 +37,36 @@ export function FormModal(props: FormModalProps): JSX.Element {
return (
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<ModalOverlay />
<ModalContent>
<HStack css={{ padding: '20px 20px 20px 20px' }} alignment={'center'}>
<StyledText style="modalHeadline">{props.title}</StyledText>
</HStack>
<VStack alignment="center" distribution="center">
<Box>
<ModalContent
onPointerDownOutside={(event) => {
event.preventDefault()
props.onOpenChange(false)
}}
css={{ overflow: 'auto', p: '0' }}
>
<VStack>
<HStack
distribution="between"
alignment="center"
css={{ width: '100%' }}
>
<StyledText style="modalHeadline" css={{ p: '16px' }}>
{props.title}
</StyledText>
<Button
css={{ pt: '16px', pr: '16px' }}
style="ghost"
onClick={() => {
props.onOpenChange(false)
}}
>
<CrossIcon
size={20}
strokeColor={theme.colors.grayText.toString()}
/>
</Button>
</HStack>
<Box css={{ width: '100%' }}>
<form
onSubmit={(event) => {
event.preventDefault()
@ -48,34 +75,74 @@ export function FormModal(props: FormModalProps): JSX.Element {
}}
>
{inputs.map((input, index) => (
<HStack key={input.name}>
<StyledText>{input.label}</StyledText>
<input
key={input.name}
type={input.type || 'text'}
value={input.value}
placeholder={input.placeholder}
onChange={(event) => {
if (input.onChange) {
inputs[index].value = event.target.value
setInputs(inputs)
input.onChange(
event.target.value || event.target.checked
)
}
<HStack key={index} css={{ padding: '10px 0 0 10px' }}>
<Box
css={{
p: '0',
width: '25%',
paddingLeft: '16px',
paddingTop: '5px',
}}
disabled={input.disabled}
hidden={input.hidden}
required={input.required}
checked={input.value}
/>
>
<StyledText style={'highlightTitle'}>
{input.label}
</StyledText>
</Box>
<Box css={{ width: '100%' }}>
<FormInput
key={input.name}
type={input.type || 'text'}
value={input.value}
placeholder={input.placeholder}
onChange={(event) => {
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}
required={input.required}
checked={input.value}
css={{
border: '1px solid $grayBorder',
borderRadius: '8px',
width: '100%',
bg: 'transparent',
fontSize: '16px',
textIndent: '8px',
marginBottom: '2px',
color: '$grayTextContrast',
'&:focus': {
outline: 'none',
boxShadow:
'0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
},
}}
/>
</Box>
</HStack>
))}
<HStack distribution="center">
<Button onClick={() => props.onOpenChange(false)}>
<HStack
alignment={'center'}
distribution="center"
css={{
padding: '20px 0 20px 0',
}}
>
<Button
style={'ctaPill'}
onClick={() => props.onOpenChange(false)}
css={{ marginRight: '20px' }}
>
Cancel
</Button>
<Button>{props.acceptButtonLabel || 'Submit'}</Button>
<Button style={'ctaDarkYellow'}>
{props.acceptButtonLabel || 'Submit'}
</Button>
</HStack>
</form>
</Box>