fa7c94b4cc
* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import { useCallback, useMemo } from "react"
|
|
|
|
export type OptionType = {
|
|
value: string
|
|
label: string
|
|
index?: string
|
|
isAllOption?: boolean
|
|
}
|
|
|
|
export type SelectOptions = {
|
|
value: string | string[]
|
|
multiple?: boolean
|
|
options: OptionType[]
|
|
setSelected?: (value: string | string[]) => void
|
|
addSelected?: (value: string) => void
|
|
removeSelected?: (value: string) => void
|
|
handleAddAll?: (isAllSelected: boolean) => void
|
|
}
|
|
|
|
export const useSelect = ({
|
|
value,
|
|
options,
|
|
multiple = false,
|
|
setSelected,
|
|
addSelected,
|
|
removeSelected,
|
|
handleAddAll,
|
|
}: SelectOptions) => {
|
|
const isValueSelected = useCallback(
|
|
(val: string) => {
|
|
return (
|
|
(typeof value === "string" && val === value) ||
|
|
(Array.isArray(value) && value.includes(val))
|
|
)
|
|
},
|
|
[value]
|
|
)
|
|
|
|
// checks if there are multiple selected values
|
|
const hasSelectedValues = useMemo(() => {
|
|
return multiple && Array.isArray(value) && value.length > 0
|
|
}, [value, multiple])
|
|
|
|
// checks if there are any selected values,
|
|
// whether multiple or one
|
|
const hasSelectedValue = useMemo(() => {
|
|
return hasSelectedValues || (typeof value === "string" && value.length)
|
|
}, [hasSelectedValues, value])
|
|
|
|
const selectedValues: OptionType[] = useMemo(() => {
|
|
if (typeof value === "string") {
|
|
const selectedValue = options.find((option) => option.value === value)
|
|
return selectedValue ? [selectedValue] : []
|
|
} else if (Array.isArray(value)) {
|
|
return options.filter((option) => value.includes(option.value))
|
|
}
|
|
return []
|
|
}, [options, value])
|
|
|
|
const isAllSelected = useMemo(() => {
|
|
return Array.isArray(value) && value.length === options.length
|
|
}, [options, value])
|
|
|
|
const handleChange = (selectedValue: string, wasSelected: boolean) => {
|
|
if (multiple) {
|
|
wasSelected
|
|
? removeSelected?.(selectedValue)
|
|
: addSelected?.(selectedValue)
|
|
} else {
|
|
setSelected?.(selectedValue)
|
|
}
|
|
}
|
|
|
|
const handleSelectAll = () => {
|
|
if (handleAddAll) {
|
|
handleAddAll(isAllSelected)
|
|
} else {
|
|
setSelected?.(options.map((option) => option.value))
|
|
}
|
|
}
|
|
|
|
return {
|
|
isValueSelected,
|
|
hasSelectedValue,
|
|
hasSelectedValues,
|
|
selectedValues,
|
|
isAllSelected,
|
|
handleChange,
|
|
handleSelectAll,
|
|
}
|
|
}
|