94b32be5d3
We want to enable a mode that prevent the pills the wrap on multiple lines in order to control any height overflowing. In monoline mode the selected items are displayed as text to allow text ellipsis, and the menu renders the list items with checkboxes.
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React, { forwardRef, PropsWithChildren, ReactNode } from "react";
|
|
import { SelectMulti } from ":/components/Forms/Select/multi";
|
|
import { SelectMono } from ":/components/Forms/Select/mono";
|
|
import { FieldProps } from ":/components/Forms/Field";
|
|
|
|
export * from ":/components/Forms/Select/mono";
|
|
export * from ":/components/Forms/Select/multi";
|
|
|
|
type BaseOption = {
|
|
value: string;
|
|
label: string;
|
|
render: () => ReactNode;
|
|
highlighted?: boolean;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export type OptionWithRender = BaseOption;
|
|
|
|
export type OptionWithoutRender = Omit<BaseOption, "value" | "render"> & {
|
|
value?: string;
|
|
render?: undefined;
|
|
};
|
|
|
|
export type Option = OptionWithoutRender | OptionWithRender;
|
|
|
|
export interface SelectHandle {
|
|
blur: () => void;
|
|
}
|
|
|
|
export type SelectProps = PropsWithChildren &
|
|
FieldProps & {
|
|
label: string;
|
|
hideLabel?: boolean;
|
|
options: Option[];
|
|
searchable?: boolean;
|
|
name?: string;
|
|
defaultValue?: string | number | string[];
|
|
value?: string | number | string[];
|
|
onChange?: (event: {
|
|
target: { value: string | number | undefined | string[] };
|
|
}) => void;
|
|
onBlur?: (event: {
|
|
target: { value: string | number | undefined | string[] };
|
|
}) => void;
|
|
disabled?: boolean;
|
|
clearable?: boolean;
|
|
multi?: boolean;
|
|
showLabelWhenSelected?: boolean;
|
|
monoline?: boolean;
|
|
selectedItemsStyle?: "pills" | "text";
|
|
menuOptionsStyle?: "plain" | "checkbox";
|
|
};
|
|
export const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
|
|
if (props.defaultValue && props.value) {
|
|
throw new Error(
|
|
"You cannot use both defaultValue and value props on Select component",
|
|
);
|
|
}
|
|
|
|
return props.multi ? (
|
|
<SelectMulti {...props} ref={ref} />
|
|
) : (
|
|
<SelectMono {...props} ref={ref} />
|
|
);
|
|
});
|