hc-oss · harshzalavadiya · May 11, 2020 · May 11, 2020
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+12
diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "react-multi-select-component",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
   "author": "Harsh Zalavadiya",
   "license": "MIT",
   "repository": "harshzalavadiya/react-multi-select-component",
   "main": "dist/index.js",
   "module": "dist/react-multi-select-component.esm.js",
   "typings": "dist/index.d.ts",
+  "sideEffects": false,
   "engines": {
     "node": ">=12"
   },
@@ -38,18 +39,18 @@
     "@storybook/addon-storysource": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "babel-loader": "^8.1.0",
     "husky": "^4.2.5",
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.13.1",
     "react-is": "^16.13.1",
-    "ts-loader": "^7.0.2",
+    "ts-loader": "^7.0.4",
     "tsdx": "^0.13.2",
-    "tslib": "^1.11.1",
+    "tslib": "^1.11.2",
     "typescript": "^3.8.3"
   },
   "husky": {

diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
@@ -22,6 +22,7 @@ export interface ISelectProps {
   onChange?;
   valueRenderer?: (selected: Option[], options: Option[]) => string;
   ItemRenderer?: Function;
+  ArrowRenderer?: ({ expanded: boolean }) => void;
   selectAllLabel?: string;
   isLoading?: boolean;
   disabled?: boolean;

diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
@@ -19,6 +19,7 @@ interface IDropdownProps {
   shouldToggleOnHover?: boolean;
   labelledBy?: string;
   onMenuToggle?;
+  ArrowRenderer?;
 }
 
 const PanelContainer = css({
@@ -77,9 +78,11 @@ const Dropdown = ({
   shouldToggleOnHover,
   labelledBy,
   onMenuToggle,
+  ArrowRenderer,
 }: IDropdownProps) => {
   const [expanded, setExpanded] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
+  const FinalArrow = ArrowRenderer || Arrow;
 
   const wrapper: any = useRef();
 
@@ -137,7 +140,7 @@ const Dropdown = ({
       >
         <div className="dropdown-heading-value">{children}</div>
         {isLoading && <Loading />}
-        <Arrow expanded={expanded} />
+        <FinalArrow expanded={expanded} />
       </div>
       {expanded && (
         <div className={`${PanelContainer} dropdown-content`}>

diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx
@@ -38,6 +38,7 @@ const MultiSelect = ({
   onChange,
   disabled,
   ItemRenderer,
+  ArrowRenderer,
   selectAllLabel,
   isLoading,
   disableSearch,
@@ -68,6 +69,7 @@ const MultiSelect = ({
         disabled={disabled}
         labelledBy={labelledBy}
         onMenuToggle={onMenuToggle}
+        ArrowRenderer={ArrowRenderer}
       >
         <DropdownHeader
           value={nvalue}

diff --git a/stories/default.stories.tsx b/stories/default.stories.tsx
@@ -8,13 +8,13 @@ export default {
   decorators: [withKnobs],
 };
 
-export const ExampleDefault = () => {
-  const options = [
-    { label: "Grapes 🍇", value: "grapes" },
-    { label: "Mango 🥭", value: "mango" },
-    { label: "Strawberry 🍓", value: "strawberry" },
-  ];
+const options = [
+  { label: "Grapes 🍇", value: "grapes" },
+  { label: "Mango 🥭", value: "mango" },
+  { label: "Strawberry 🍓", value: "strawberry" },
+];
 
+export const ExampleDefault = () => {
   const [selected, setSelected] = useState([]);
 
   return (
@@ -30,7 +30,7 @@ export const ExampleDefault = () => {
         value={selected}
         disabled={boolean("disabled", false)}
         onChange={setSelected}
-        onMenuToggle={s => {
+        onMenuToggle={(s) => {
           console.log("Select Toggle: ", s);
         }}
         labelledBy={text("labelledBy", "Select Fruits")}
@@ -69,3 +69,26 @@ export const ExampleDisabled = () => {
 ExampleDisabled.story = {
   name: "Disabled",
 };
+
+export const ExampleCustomArrow = () => {
+  const [selected, setSelected] = useState([]);
+
+  const ArrowRenderer = ({ expanded }) => (expanded ? "🦉" : "🦚");
+
+  return (
+    <div>
+      <pre>{JSON.stringify(selected)}</pre>
+      <MultiSelect
+        options={options}
+        value={selected}
+        onChange={setSelected}
+        labelledBy={text("labelledBy", "Select Fruits")}
+        ArrowRenderer={ArrowRenderer}
+      />
+    </div>
+  );
+};
+
+ExampleCustomArrow.story = {
+  name: "Arrow",
+};
diff --git a/yarn.lock b/yarn.lock
@@ -2223,10 +2223,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^16.9.7":
-  version "16.9.7"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.7.tgz#60844d48ce252d7b2dccf0c7bb937130e27c0cd2"
-  integrity sha512-GHTYhM8/OwUCf254WO5xqR/aqD3gC9kSTLpopWGpQLpnw23jk44RvMHsyUSEplvRJZdHxhJGMMLF0kCPYHPhQA==
+"@types/react-dom@^16.9.8":
+  version "16.9.8"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
+  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
   dependencies:
     "@types/react" "*"
 
@@ -2244,14 +2244,22 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.34":
+"@types/react@*":
   version "16.9.34"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
   integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.35":
+  version "16.9.35"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368"
+  integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -11571,10 +11579,10 @@ ts-jest@^24.0.2:
     semver "^5.5"
     yargs-parser "10.x"
 
-ts-loader@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.2.tgz#465bc904aea4c331e9550e7c7d75dd17a0b7c24c"
-  integrity sha512-DwpZFB67RoILQHx42dMjSgv2STpacsQu5X+GD/H9ocd8IhU0m8p3b/ZrIln2KmcucC6xep2PdEMEblpWT71euA==
+ts-loader@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.4.tgz#5d9b95227de5afb91fdd9668f8920eb193cfe0cc"
+  integrity sha512-5du6OQHl+4ZjO4crEyoYUyWSrmmo7bAO+inkaILZ68mvahqrfoa4nn0DRmpQ4ruT4l+cuJCgF0xD7SBIyLeeow==
   dependencies:
     chalk "^2.3.0"
     enhanced-resolve "^4.0.0"
@@ -11664,11 +11672,16 @@ tslib@1.10.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
-tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
+tslib@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
+  integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"