Skip to content

Commit

Permalink
Merge pull request #597 from Enterprise-CMCS/master
Browse files Browse the repository at this point in the history
Release to val
  • Loading branch information
mdial89f authored Jun 21, 2024
2 parents fcdf7fe + 75d751f commit 3b5ed2f
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 8 deletions.
2 changes: 2 additions & 0 deletions src/packages/shared-types/forms.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
import {
CalendarProps,
InputProps,
MultiselectProps,
RadioProps,
SelectProps,
SwitchProps,
Expand Down Expand Up @@ -94,6 +95,7 @@ export type RHFComponentMap = {
Textarea: TextareaProps;
Switch: SwitchProps;
Select: SelectProps & { sort?: "ascending" | "descending" };
Multiselect: MultiselectProps;
Radio: RadioProps & {
options: RHFOption[];
};
Expand Down
15 changes: 15 additions & 0 deletions src/packages/shared-types/inputs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,21 @@ export type SelectProps = React.ComponentPropsWithoutRef<
className?: string;
};

export interface MultiselectOption {
readonly value: string;
readonly label: string;
readonly color?: string;
readonly isFixed?: boolean;
readonly isDisabled?: boolean;
}

export type MultiselectProps = {
className?: string;
options: MultiselectOption[];
value?: string[];
onChange?: (selectedValues: string[]) => void;
};

export type SwitchProps = React.ComponentPropsWithoutRef<
typeof SwitchPrimitives.Root
> & {
Expand Down
1 change: 1 addition & 0 deletions src/services/ui/src/components/Inputs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export * from "./date-picker";
export * from "./form";
export * from "./upload";
export * from "./input";
export * from "./multiselect";
export * from "./label";
export * from "./radio-group";
export * from "./select";
Expand Down
27 changes: 27 additions & 0 deletions src/services/ui/src/components/Inputs/multiselect.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { type FC } from "react";
import Select, { StylesConfig } from "react-select";
import { MultiselectProps } from "shared-types";

const customStyles: StylesConfig = {
control: (provided) => ({
...provided,
border: "1px solid black",
boxShadow: "none",
"&:hover": {
border: "1px solid black",
},
}),
};

export const Multiselect: FC<MultiselectProps> = ({ options, ...props }) => {
return (
<Select<any, any>
isMulti={true}
options={options}
closeMenuOnSelect={false}
placeholder
styles={customStyles}
{...props}
/>
);
};
21 changes: 20 additions & 1 deletion src/services/ui/src/components/RHF/SlotField.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { RHFComponentMap, RHFOption, RHFSlotProps } from "shared-types";
import {
RHFComponentMap,
RHFOption,
RHFSlotProps,
MultiselectOption,
} from "shared-types";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { cn } from "@/utils";
Expand All @@ -19,6 +24,7 @@ import {
FormField,
FormLabel,
Input,
Multiselect,
RadioGroup,
RadioGroupItem,
Select,
Expand Down Expand Up @@ -113,6 +119,19 @@ export const SlotField = ({
</Select>
);
}
case "Multiselect": {
const options = props?.options as MultiselectOption[];
const value = field.value as string[];

return (
<Multiselect
options={options}
value={value}
onChange={(selectedValues) => field.onChange(selectedValues)}
{...props}
/>
);
}
case "DatePicker":
return (
<Popover>
Expand Down
72 changes: 66 additions & 6 deletions src/services/ui/src/components/RHF/tests/SlotField.test.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { describe, test, expect } from "vitest";
import {
render,
prettyDOM,
fireEvent,
getByLabelText,
} from "@testing-library/react";
import { render, fireEvent } from "@testing-library/react";
import { RHFSlot } from "../.";
import { Form, FormField } from "../../Inputs";
import { Control, useForm } from "react-hook-form";
Expand Down Expand Up @@ -94,6 +89,71 @@ describe("Slot Input Field Tests", () => {
expect(selectBox).toBeTruthy();
});

describe("Multiselect", () => {
test("renders Multiselect", () => {
const { getByRole } = render(
<TestWrapper
{...testValues}
rhf="Multiselect"
props={{
options: [
{ label: "test 1", value: "test-1" },
{ label: "test 2", value: "test-2" },
],
}}
/>,
);

expect(getByRole("combobox")).toBeInTheDocument();
});

test("renders options correctly", () => {
const { getByText, getByRole } = render(
<TestWrapper
{...testValues}
rhf="Multiselect"
props={{
options: [
{ label: "test 1", value: "test-1" },
{ label: "test 2", value: "test-2" },
],
}}
/>,
);

fireEvent.mouseDown(getByRole("combobox"));
expect(getByText("test 1")).toBeInTheDocument();
expect(getByText("test 2")).toBeInTheDocument();
});

test("allows multiple selections", () => {
const { getByText, getByRole, container } = render(
<TestWrapper
{...testValues}
rhf="Multiselect"
props={{
options: [
{ label: "test 1", value: "test-1" },
{ label: "test 2", value: "test-2" },
],
}}
/>,
);

fireEvent.mouseDown(getByRole("combobox"));
fireEvent.click(getByText("test 1"));
fireEvent.mouseDown(getByRole("combobox"));
fireEvent.click(getByText("test 2"));

const selectedOptions = container.querySelectorAll(
".css-1p3m7a8-multiValue",
);
expect(selectedOptions).toHaveLength(2);
expect(selectedOptions[0]).toHaveTextContent("test 1");
expect(selectedOptions[1]).toHaveTextContent("test 2");
});
});

test("renders RadioGroup", () => {
const rend = render(
<TestWrapper
Expand Down
1 change: 1 addition & 0 deletions src/services/ui/src/components/RHF/utils/initializer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const slotInitializer =
break;
case "Input":
case "Select":
case "Multiselect":
case "Radio":
case "Textarea":
default:
Expand Down
2 changes: 1 addition & 1 deletion src/services/ui/src/components/SearchForm/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const SearchForm: FC<{
};

const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const updateText = event.target.value;
const updateText = event.target.value.trim();
setSearchText(updateText);
if (!updateText) handleSearch("");
};
Expand Down

0 comments on commit 3b5ed2f

Please sign in to comment.