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 { TextAreaInput } from './TextAreaInput'
|
||||||
export { TextInput } from './TextInput'
|
export { TextInput } from './TextInput'
|
||||||
export { SelectBox } from './SelectBox'
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user