feat: update valueRenderer type to accept elements as well as strings as return values (#319)

Co-authored-by: Brian Reynolds <brian.reynolds@equipmentshare.com>

Author: breynolds-dev

src/lib/interfaces.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export interface Option {
   value;
   label: string;
@@ -10,7 +12,7 @@ export interface ISelectProps {
   value: Option[];
   focusSearchOnOpen?: boolean;
   onChange?;
-  valueRenderer?: (selected: Option[], options: Option[]) => string;
+  valueRenderer?: (selected: Option[], options: Option[]) => ReactNode;
   ItemRenderer?: Function;
   ArrowRenderer?: ({ expanded }) => JSX.Element;
   selectAllLabel?: string;

stories/custom-element.stories.tsx

@@ -0,0 +1,110 @@
+import { boolean, text, withKnobs } from "@storybook/addon-knobs";
+import React, { useState } from "react";
+
+import { css } from "goober";
+import { cn } from "../src/lib/classnames";
+
+import MultiSelect from "../src/multi-select";
+import { options } from "./constants";
+
+const MultiSelectOverrides = css({
+  ".dropdown-container": {
+    border: 0,
+    display: "inline-block",
+    width: "100%",
+    "&:focus-within": {
+      boxShadow: "none",
+      borderColor: "transparent",
+    },
+  },
+  ".dropdown-heading": {
+    padding: 0,
+    height: "auto",
+  },
+  ".dropdown-heading-dropdown-arrow": {
+    display: "none",
+  },
+});
+
+export default {
+  title: "Custom Element",
+  decorators: [withKnobs],
+};
+
+export const ExampleWithStrings = () => {
+  const [selected, setSelected] = useState<typeof options>([]);
+
+  const valueRenderer = ( selected: typeof options ) => {
+    if ( !selected.length ) {
+      return "No Item Selected";
+    }
+
+    return selected.length === 1
+    ? `${selected[0].label} 😶`
+    : selected.map(({ label }) => "✔️ " + label)
+  }
+
+  return (
+    <div>
+      <pre>{JSON.stringify(selected)}</pre>
+      <MultiSelect
+        options={options}
+        focusSearchOnOpen={boolean("focusSearchOnOpen", true)}
+        hasSelectAll={boolean("hasSelectAll", true)}
+        isLoading={boolean("isLoading", false)}
+        shouldToggleOnHover={boolean("shouldToggleOnHover", false)}
+        disableSearch={boolean("disableSearch", false)}
+        value={selected}
+        disabled={boolean("disabled", false)}
+        onChange={setSelected}
+        valueRenderer={valueRenderer}
+        labelledBy={text("labelledBy", "Select Fruits")}
+        className={text("className", "multi-select")}
+      />
+    </div>
+  );
+};
+
+ExampleWithStrings.story = {
+  name: "With Strings",
+};
+
+export const ExampleWithReactNode = () => {
+  const [selected, setSelected] = useState<typeof options>([]);
+
+  const valueRenderer = ( selected: typeof options ) => {
+    if ( !selected.length ) {
+      return (
+        <button>Toggle Dropdown!</button>
+      );
+    }
+
+    return selected.length === 1
+    ? ( <button>{selected[0].label} 😶</button> )
+    : selected.map(({ label }) => ( <button key={label}>✔️ {label}</button>))
+  }
+
+  return (
+    <div>
+      <pre>{JSON.stringify(selected)}</pre>
+      <MultiSelect
+        options={options}
+        focusSearchOnOpen={boolean("focusSearchOnOpen", true)}
+        hasSelectAll={boolean("hasSelectAll", true)}
+        isLoading={boolean("isLoading", false)}
+        shouldToggleOnHover={boolean("shouldToggleOnHover", false)}
+        disableSearch={boolean("disableSearch", false)}
+        value={selected}
+        disabled={boolean("disabled", false)}
+        onChange={setSelected}
+        valueRenderer={valueRenderer}
+        labelledBy={text("labelledBy", "Select Fruits")}
+        className={cn( text("className", "multi-select"), MultiSelectOverrides )}
+      />
+    </div>
+  );
+};
+
+ExampleWithReactNode.story = {
+  name: "With Element",
+};