mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
remove select box component (#159)
This commit is contained in:
parent
b22f62fe2c
commit
0169f1c8bc
@ -1,74 +0,0 @@
|
||||
import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon'
|
||||
import { useState } from 'react'
|
||||
|
||||
interface SelectBoxProps {
|
||||
labelTitle?: string
|
||||
labelStyle?: string
|
||||
type?: string
|
||||
containerStyle?: string
|
||||
defaultValue: string
|
||||
placeholder?: string
|
||||
|
||||
updateFormValue: (value: string) => void
|
||||
|
||||
options: { name: string; value: string }[]
|
||||
labelDescription?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* @category Input
|
||||
*/
|
||||
export function SelectBox(props: SelectBoxProps) {
|
||||
const {
|
||||
labelTitle,
|
||||
labelDescription,
|
||||
defaultValue,
|
||||
containerStyle,
|
||||
placeholder,
|
||||
labelStyle,
|
||||
options,
|
||||
updateFormValue,
|
||||
} = props
|
||||
|
||||
const [value, setValue] = useState(defaultValue || '')
|
||||
|
||||
const updateValue = (newValue: string) => {
|
||||
updateFormValue(newValue)
|
||||
setValue(newValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`tw-inline-block ${containerStyle ?? ''}`}>
|
||||
{labelTitle ? (
|
||||
<label className={`tw-label ${labelStyle ?? ''}`}>
|
||||
<div className='tw-label-text'>
|
||||
{labelTitle}
|
||||
{labelDescription && (
|
||||
<div className='tw-tooltip tw-tooltip-right' data-tip={labelDescription}>
|
||||
<InformationCircleIcon className='tw-w-4 tw-h-4' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<select
|
||||
className='tw-select tw-select-bordered tw-w-full'
|
||||
value={value}
|
||||
onChange={(e) => updateValue(e.target.value)}
|
||||
>
|
||||
<option disabled value='PLACEHOLDER'>
|
||||
{placeholder}
|
||||
</option>
|
||||
{options.map((o, k) => {
|
||||
return (
|
||||
<option value={o.value || o.name} key={k}>
|
||||
{o.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,3 +1,2 @@
|
||||
export { TextAreaInput } from './TextAreaInput'
|
||||
export { TextInput } from './TextInput'
|
||||
export { SelectBox } from './SelectBox'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user