-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Started to develop a multi-select box with checkbox options.
- Loading branch information
Showing
8 changed files
with
296 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
74 changes: 74 additions & 0 deletions
74
packages/design-system/src/ui/input/combobobx/checkboxSelect/checkboxField.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
import React, { forwardRef } from "react"; | ||
import { Description } from "../../description"; | ||
import { Field } from "../../field"; | ||
import { Combobox, Input } from "./combobox"; | ||
import { Label } from "../../label"; | ||
import { twMerge } from "tailwind-merge"; | ||
|
||
/* | ||
We choose what Input field properties we allow to be passed to the Input component | ||
This is needed to allow to manage the Input field using things like ...register("field") react-form-hook | ||
We omit className to disable extra styling from the outside | ||
*/ | ||
type InheritedInputProps = Omit< | ||
React.InputHTMLAttributes<HTMLInputElement>, | ||
"className" | "style" | ||
>; | ||
|
||
type Props = { | ||
label?: string; | ||
error?: string; | ||
showClearButton?: boolean; | ||
icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>; | ||
} & InheritedInputProps; | ||
|
||
// Test options | ||
const options = [ | ||
{ id: 1, value: "option1", label: "Option 1" }, | ||
{ id: 2, value: "option2", label: "Option 2" }, | ||
{ id: 3, value: "option3", label: "Option 3" }, | ||
{ id: 4, value: "option4", label: "Option 4" }, | ||
]; | ||
|
||
const CheckboxSelectField = forwardRef<React.ElementRef<typeof Input>, Props>( | ||
({ label, error, showClearButton, icon }: Props, ref) => { | ||
// if error is present, we pass it to all the sub-components | ||
const hasError = !!error; | ||
|
||
console.info("InputField", { hasError, label, error, showClearButton }); | ||
|
||
// We show label instead of placeholder if label is provided | ||
const showPlaceholder = !label; | ||
|
||
// We need to pass hasIcon to some sub-components | ||
const Icon = icon; | ||
const hasIcon = !!Icon; | ||
|
||
return ( | ||
<Field state={hasError ? "error" : "default"}> | ||
{hasIcon && <Icon className={twMerge("k1-w-6 k1-h-6 k1-min-w-6")} />} | ||
<Combobox | ||
className="k1-relative k1-w-full k1-bg-transparent k1-outline-none k1-flex" | ||
ref={ref} | ||
showClearButton={showClearButton} | ||
options={options} | ||
defaultValue={[]} | ||
onChange={(value) => console.log("Selected value:", value)} | ||
onInputChange={(value) => console.log("Input value:", value)} | ||
onClear={() => console.log("Cleared")} | ||
showPlaceholder={showPlaceholder} | ||
> | ||
{label && ( | ||
<Label state={hasError ? "error" : "default"} hasIcon={hasIcon}> | ||
{label} | ||
</Label> | ||
)} | ||
</Combobox> | ||
{hasError && <Description state="error">{error}</Description>} | ||
</Field> | ||
); | ||
} | ||
); | ||
|
||
export { CheckboxSelectField }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
203 changes: 203 additions & 0 deletions
203
packages/design-system/src/ui/input/combobobx/checkboxSelect/combobox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,203 @@ | ||
import { | ||
Combobox as ComboboxPrimitive, | ||
ComboboxInput as InputPrimitive, | ||
ComboboxInputProps as InputPrimitiveProps, | ||
ComboboxOptions as OptionsPrimitive, | ||
ComboboxButton as ButtonPrimitive, | ||
ComboboxButtonProps as ButtonProps, | ||
} from "@headlessui/react"; | ||
import { twMerge } from "tailwind-merge"; | ||
import * as React from "react"; | ||
import { | ||
forwardRef, | ||
useRef, | ||
useImperativeHandle, | ||
useState, | ||
useEffect, | ||
} from "react"; | ||
import { ClearButton } from "../../clearButton"; | ||
import { ChevronDownIcon } from "../../../../icons/chevronDown"; | ||
import { CheckboxOption } from "./checkboxOption"; | ||
|
||
interface ComboboxProps | ||
extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive> { | ||
showClearButton?: boolean; | ||
onClear?: () => void; | ||
defaultValue?: string[]; | ||
onInputChange?: (value: string[]) => void; | ||
options: Array<{ id: string | number; value: string; label: string }>; | ||
showPlaceholder?: boolean; | ||
children?: React.ReactNode; | ||
} | ||
|
||
const Combobox = forwardRef< | ||
React.ElementRef<typeof ComboboxPrimitive>, | ||
ComboboxProps | ||
>( | ||
( | ||
{ | ||
className, | ||
children, | ||
showClearButton, | ||
onChange, | ||
defaultValue, | ||
onClear, | ||
onInputChange, | ||
options, | ||
...props | ||
}, | ||
ref | ||
) => { | ||
//Use state for selecting values. If nothing is provided, defaultValue will become the selected value | ||
const [selectedValues, setSelectedValues] = useState<string[]>( | ||
defaultValue instanceof Array | ||
? defaultValue | ||
: defaultValue | ||
? [defaultValue] | ||
: [] | ||
); | ||
|
||
const [query, setQuery] = useState<string>( | ||
defaultValue ? defaultValue.join(", ") : "" | ||
); | ||
const [filteredOptions, setFilteredOptions] = useState(options); | ||
|
||
useEffect(() => { | ||
const filtered = options.filter((option) => | ||
option.label.toLowerCase().includes(query.toLowerCase()) | ||
); | ||
setFilteredOptions(filtered); | ||
}, [query, options]); | ||
|
||
const handleClear = () => { | ||
setSelectedValues([]); | ||
setQuery(""); | ||
if (onChange) { | ||
onChange([]); | ||
} | ||
if (onClear) { | ||
onClear(); | ||
} | ||
if (onInputChange) { | ||
onInputChange([]); | ||
} | ||
}; | ||
|
||
const handleChange = (value: string | null) => { | ||
setSelectedValues(value ? [value] : []); | ||
if (value) { | ||
const selectedOption = options.find((opt) => opt.value === value); | ||
if (selectedOption) { | ||
setQuery(selectedOption.label); | ||
if (onInputChange) { | ||
onInputChange([selectedOption.label]); | ||
} | ||
} | ||
} | ||
if (onChange) { | ||
onChange(value); | ||
} | ||
}; | ||
|
||
//Takes an input change event as an argument. Extracts the new value from the input element. Updates the state with the new value. Optionally calls a provided callback function with the new value. | ||
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
const value = event.target.value; | ||
setQuery(value); | ||
if (onInputChange) { | ||
onInputChange([value]); | ||
} | ||
}; | ||
|
||
return ( | ||
<ComboboxPrimitive | ||
multiple | ||
as="div" | ||
ref={ref} | ||
className={twMerge("k1-absolute k1-w-full", className)} | ||
onChange={handleChange} | ||
value={selectedValues} | ||
{...props} | ||
> | ||
<div className="k1-flex k1-items-center k1-w-full"> | ||
<Input | ||
onChange={handleInputChange} | ||
className="k1-flex-grow k1-peer" | ||
value={ | ||
selectedValues.length > 0 ? selectedValues.join(", ") : query | ||
} | ||
data-focus={query ? "true" : undefined} | ||
displayValue={(value: string) => { | ||
const option = options.find((opt) => opt.value === value); | ||
return option ? option.label : query; | ||
}} | ||
/> | ||
{children} | ||
<Button className="k1-flex-shrink-0 k1-h-full k1-flex k1-items-center"> | ||
<ChevronDownIcon className="k1-h-6 k1-w-6" /> | ||
</Button> | ||
{showClearButton && <ClearButton onClose={handleClear} />} | ||
</div> | ||
<Options anchor="bottom start" className="k1-w-[var(--input-width)]"> | ||
{filteredOptions.length === 0 ? ( | ||
<div className="k1-px-4 k1-py-2">Žadné vysledky</div> | ||
) : ( | ||
filteredOptions.map((option) => ( | ||
<CheckboxOption | ||
key={option.id} | ||
value={option.value} | ||
className={twMerge("", className)} | ||
> | ||
{option.label} | ||
</CheckboxOption> | ||
)) | ||
)} | ||
</Options> | ||
</ComboboxPrimitive> | ||
); | ||
} | ||
); | ||
|
||
const Input = forwardRef< | ||
React.ElementRef<typeof InputPrimitive>, | ||
InputPrimitiveProps & { className?: string } // InputProps has more variable className, but we need string | ||
>(({ className, ...props }, ref) => { | ||
const inputRef = useRef<HTMLInputElement | null>(null); | ||
|
||
useImperativeHandle(ref, () => inputRef.current as HTMLInputElement); | ||
|
||
return ( | ||
<InputPrimitive | ||
ref={inputRef} | ||
className={twMerge("k1-w-full k1-py-2 k1-pl-3", className)} | ||
{...props} | ||
/> | ||
); | ||
}); | ||
Input.displayName = InputPrimitive.displayName; | ||
|
||
const Options = forwardRef< | ||
React.ElementRef<typeof OptionsPrimitive>, | ||
React.ComponentPropsWithoutRef<typeof OptionsPrimitive> | ||
>(({ className, children, ...props }, ref) => ( | ||
<OptionsPrimitive | ||
ref={ref} | ||
className={twMerge( | ||
"k1-bg-white k1-rounded-tl-lg k1-border k1-border-neutral k1-flex-col k1-justify-start k1-items-start k1-inline-flex", | ||
className | ||
)} | ||
{...props} | ||
> | ||
{children} | ||
</OptionsPrimitive> | ||
)); | ||
Options.displayName = "Combobox.Options"; | ||
|
||
const Button = forwardRef< | ||
React.ElementRef<typeof ButtonPrimitive>, | ||
ButtonProps & { className?: string } | ||
>(({ className, ...props }, ref) => ( | ||
<ButtonPrimitive ref={ref} className={twMerge("", className)} {...props} /> | ||
)); | ||
Button.displayName = "Combobox.Button"; | ||
|
||
export { Combobox, Input, Options, Button }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.