70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import * as RadixSelect from '@radix-ui/react-select'
|
|
import classNames from 'classnames'
|
|
|
|
import ArrowIcon from '~public/icons/Arrow.svg'
|
|
|
|
import './index.scss'
|
|
|
|
// Props
|
|
interface Props
|
|
extends React.DetailedHTMLProps<
|
|
React.SelectHTMLAttributes<HTMLSelectElement>,
|
|
HTMLSelectElement
|
|
> {
|
|
open: boolean
|
|
trigger?: React.ReactNode
|
|
children?: React.ReactNode
|
|
onClick?: () => void
|
|
onValueChange?: (value: string) => void
|
|
triggerClass?: string
|
|
}
|
|
|
|
const Select = React.forwardRef<HTMLButtonElement, Props>(function input(
|
|
props: Props,
|
|
forwardedRef
|
|
) {
|
|
const [value, setValue] = useState('')
|
|
|
|
useEffect(() => {
|
|
if (props.value && props.value !== '') setValue(`${props.value}`)
|
|
else setValue('')
|
|
}, [props.value])
|
|
|
|
function onValueChange(newValue: string) {
|
|
setValue(`${newValue}`)
|
|
if (props.onValueChange) props.onValueChange(newValue)
|
|
}
|
|
|
|
return (
|
|
<RadixSelect.Root
|
|
value={value !== '' ? value : undefined}
|
|
onValueChange={onValueChange}
|
|
>
|
|
<RadixSelect.Trigger
|
|
className={classNames('SelectTrigger', props.triggerClass)}
|
|
placeholder={props.placeholder}
|
|
ref={forwardedRef}
|
|
>
|
|
<RadixSelect.Value placeholder={props.placeholder} />
|
|
<RadixSelect.Icon className="SelectIcon">
|
|
<ArrowIcon />
|
|
</RadixSelect.Icon>
|
|
</RadixSelect.Trigger>
|
|
|
|
<RadixSelect.Portal className="Select">
|
|
<RadixSelect.Content>
|
|
<RadixSelect.ScrollUpButton className="Scroll Up">
|
|
<ArrowIcon />
|
|
</RadixSelect.ScrollUpButton>
|
|
<RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
|
|
<RadixSelect.ScrollDownButton className="Scroll Down">
|
|
<ArrowIcon />
|
|
</RadixSelect.ScrollDownButton>
|
|
</RadixSelect.Content>
|
|
</RadixSelect.Portal>
|
|
</RadixSelect.Root>
|
|
)
|
|
})
|
|
|
|
export default Select
|