john-okeefe
7bdf42ac07
- New FixedSelect wrapper over chakra-react-select v6 restoring the v4 look everywhere: single gray.500 control border, flush addon chevron zone with rounded inner corners, hidden indicator separator, v4 option padding/type scale, gray subtle pills, brighter unselected hover - GameForm: FormControl/InputGroup -> Field/Flex, Button colorScheme/isLoading -> colorPalette/loading, Stack spacing -> gap, Container container.md -> 768px, Steam Scrape row rebuilt as nowrap Flex, select wrappers de-bordered (control owns the border) - formFields: Field/Checkbox/Switch shims in, required asterisk dropped to match legacy labels, Select/Creatable wrappers de-bordered, TS-typed select callbacks
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import {Box} from '@chakra-ui/react'
|
|
import { Field } from '../ui/field'
|
|
import {Select} from '../FixedSelect'
|
|
|
|
interface Props {
|
|
label: string
|
|
textField: string
|
|
field: string
|
|
bg: string
|
|
handleAccessedBy: any
|
|
options: { value: string, label: string }[]
|
|
width?: string
|
|
}
|
|
|
|
const SelectInput = ({label, textField, field, bg, handleAccessedBy, options, width = ''}: Props) => {
|
|
return (
|
|
<Field mb="3" label={label}>
|
|
<Box
|
|
bg={bg}
|
|
w={width || 'full'}
|
|
rounded="md">
|
|
<Select
|
|
id={textField}
|
|
name={textField}
|
|
onChange={(values: any) => {
|
|
if (values) handleAccessedBy(textField, values.value)
|
|
}}
|
|
options={options}
|
|
value={{
|
|
value: field,
|
|
label: field,
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Field>
|
|
)
|
|
}
|
|
|
|
export default SelectInput
|