Merge branch 'develop' into beta

seb-oss · Mar 23, 2021 · fff481e · fff481e
2 parents d2b133d + c349c0c
commit fff481e
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/lib/src/Dropdown/Dropdown.test.tsx b/lib/src/Dropdown/Dropdown.test.tsx
@@ -181,6 +181,66 @@ describe("Component: Dropdown", () => {
         expect(container.querySelector("select").multiple).toBe(true);
     });
 
+    it("Should render custom static label", () => {
+        const hardcodedLabel: string = "Always show this text";
+        act(() => {
+            render(
+                <Dropdown selectedLabel={hardcodedLabel} multiple>
+                    {testOptions}
+                </Dropdown>,
+                container
+            );
+        });
+
+        expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe(hardcodedLabel);
+    });
+
+    it("Should render custom label for selected element", () => {
+        const customLabels: { [k: string]: string } = {
+            1: "One",
+            2: "Two",
+            3: "Three",
+        };
+
+        const getLabel = (value: string) => {
+            return customLabels[value];
+        };
+
+        act(() => {
+            render(
+                <Dropdown selectedLabel={getLabel} value="3">
+                    {testOptions}
+                </Dropdown>,
+                container
+            );
+        });
+
+        expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe(customLabels["3"]);
+    });
+
+    it("Should render custom label and separator for selected elements", () => {
+        const customLabels: { [k: string]: string } = {
+            1: "One",
+            2: "Two",
+            3: "Three",
+        };
+
+        const getLabel = (value: string[]) => {
+            return value.map((e) => customLabels[e]).join(" + ");
+        };
+
+        act(() => {
+            render(
+                <Dropdown selectedLabel={getLabel} multiple value={["1", "2"]}>
+                    {testOptions}
+                </Dropdown>,
+                container
+            );
+        });
+
+        expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe("One + Two");
+    });
+
     it("Should render native only when used in a mobile device", () => {
         const userAgent: string = window.navigator.userAgent;
         const onChange: jest.Mock = jest.fn();

diff --git a/lib/src/Dropdown/Dropdown.tsx b/lib/src/Dropdown/Dropdown.tsx
@@ -42,11 +42,13 @@ export type DropdownProps = Omit<JSX.IntrinsicElements["select"], "value"> & {
     searchable?: boolean;
     /** Allows clearing the dropdown with a clear button */
     clearable?: boolean;
+    /** Allows setting custom label to be displayed for selected item */
+    selectedLabel?: string | ((value: string | string[]) => string | string[]);
     /** Custom texts to be dispalyed in different parts of the dropdown */
     text?: DropdownText;
 };
 
-export const Dropdown: React.FC<DropdownProps> = React.forwardRef(({ wrapperProps = {}, text = {}, onMultipleChange, searchable, clearable, ...props }: DropdownProps, ref) => {
+export const Dropdown: React.FC<DropdownProps> = React.forwardRef(({ wrapperProps = {}, text = {}, onMultipleChange, searchable, clearable, selectedLabel, ...props }: DropdownProps, ref) => {
     const [toggleId] = React.useState<string>(randomId("ddt-"));
     const [selectAllId] = React.useState<string>(randomId("sa-"));
     const [show, setShow] = React.useState<boolean>(false);
@@ -210,8 +212,15 @@ export const Dropdown: React.FC<DropdownProps> = React.forwardRef(({ wrapperProp
     }, [show]);
 
     React.useEffect(() => {
-        !isMobile && setLabel((Array.isArray(props.value) ? props.value.join(", ") : props.value) || props.placeholder);
-    }, [props.value, props.placeholder]);
+        if (selectedLabel && typeof selectedLabel === "string") {
+            !isMobile && setLabel(selectedLabel || props.placeholder);
+        } else if (selectedLabel && typeof selectedLabel === "function") {
+            const newLabel: string | string[] = selectedLabel(props.value);
+            !isMobile && setLabel((Array.isArray(newLabel) ? newLabel.join(", ") : newLabel) || props.placeholder);
+        } else {
+            !isMobile && setLabel((Array.isArray(props.value) ? props.value.join(", ") : props.value) || props.placeholder);
+        }
+    }, [props.value, props.placeholder, selectedLabel]);
 
     return (
         <div {...wrapperProps} className={classnames("rc custom-dropdown", wrapperProps.className)}>