diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..48082f7 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +12 diff --git a/package.json b/package.json index 3b84932..1ac2082 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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", @@ -8,6 +8,7 @@ "main": "dist/index.js", "module": "dist/react-multi-select-component.esm.js", "typings": "dist/index.d.ts", + "sideEffects": false, "engines": { "node": ">=12" }, @@ -38,8 +39,8 @@ "@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", @@ -47,9 +48,9 @@ "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 index cb8bcbb..3a249ba 100644 --- 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 index 3cc832a..85c81b8 100644 --- 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 = ({ >
{children}
{isLoading && } - + {expanded && (
diff --git a/src/multi-select/index.tsx b/src/multi-select/index.tsx index e184879..ae402ac 100644 --- 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} > { - 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 ( +
+ 
{JSON.stringify(selected)}
+ +
+ ); +}; + +ExampleCustomArrow.story = { + name: "Arrow", +}; diff --git a/yarn.lock b/yarn.lock index 11406af..82adcd6 100644 --- 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,7 +2244,7 @@ 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== @@ -2252,6 +2252,14 @@ "@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"