From 5a442b1a281360928208c8b651c0e2b4c5050137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vytenis=20Ku=C4=8Diauskas?= Date: Fri, 10 Nov 2017 13:47:25 +0200 Subject: [PATCH 1/4] Added props onCancelButton, onRequestClose. Fixed/added some tests Fixes #89, #62, #27, #74 --- README.md | 4 +- package-lock.json | 295 +++++++++++------------------------ package.json | 10 +- src/App.test.js | 9 +- src/CodeExample1.js | 4 + src/CodeExample2.js | 6 +- src/SuperSelectField.js | 58 +++++-- src/SuperSelectField.test.js | 52 +++--- wallaby.js | 47 ++++++ 9 files changed, 240 insertions(+), 245 deletions(-) create mode 100644 wallaby.js diff --git a/README.md b/README.md index d2e03ad..5faa97b 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ This component requires 3 dependencies : | disabled | bool | false | Include this property to disable superSelectField.| | value | null, object, object[] | null | Selected value(s).
/!\ REQUIRED: each object must expose a 'value' property. | | onChange | function | () => {} | Triggers when selecting/unselecting an option from the Menu.
signature: (selectedValues, name) with `selectedValues` array of selected values based on selected nodes' value property, and `name` the value of the superSelectField instance's name property | +| onRequestClose | function | () => {} | If multiple is set triggers when clicking away | | onMenuOpen | function | () => {} | Triggers when opening the Menu. | | onAutoCompleteTyping | function | () => {} | Exposes the word typed in AutoComplete. Useful for triggering onType API requests. | | children | any | [] | Datasource is an array of any type of nodes, styled at your convenience.
/!\ REQUIRED: each node must expose a `value` property. This value property will be used by default for both option's value and label.
A `label` property can be provided to specify a different value than `value`. | @@ -74,7 +75,8 @@ PropTypes should raise warnings if implementing otherwise. | menuGroupStyle | object | {} | Styles applied to the MenuItems hosting your \. | | innerDivStyle | object | {} | Styles applied to the inner div of MenuItems hosting each of your children components. | | menuFooterStyle | object | {} | Styles applied to the Menu's footer. | -| menuCloseButton | node | | A button for an explicit closing of the menu. Useful on mobiles. | +| menuCloseButton | node | | A button for an explicit closing of the menu. Useful on mobiles. **Note** If defined click outside will not close the super select field | +| menuCancelButton | node | | A button for an explicit closing of the menu and resetting selected values to initial state. Can be used as "reset". **Note** If defined click outside will not close the super select field | | selectedMenuItemStyle | object | {color: muiTheme.menuItem.selectedTextColor} | Styles to be applied to the selected MenuItem. | | selectionsRenderer | function | see below | Provide your own renderer for selected options. Defaults to concatenating children's values text. Check CodeExample4 for a more advanced renderer example. | | checkedIcon | SVGicon | see below | The SvgIcon to use for the checked state. This is useful to create icon toggles. | diff --git a/package-lock.json b/package-lock.json index d546030..c2ee8e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@types/node": { - "version": "6.0.88", - "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.88.tgz", - "integrity": "sha512-bYDPZTX0/s1aihdjLuAgogUAT5M+TpoWChEMea2p0yOcfn5bu3k6cJb9cp6nw268XeSNIGGr+4+/8V5K6BGzLQ==", + "version": "8.0.50", + "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.50.tgz", + "integrity": "sha512-N9OVsMBspboNvYaLAQnLEhb2eQ96lavogMR5LoH5k8nb1PvBZHSBFhzhsq2LNzGTBBOtBviOc1GiSu+wlM/pGw==", "dev": true }, "abab": { @@ -176,14 +176,12 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" }, "anymatch": { "version": "1.3.2", @@ -471,84 +469,16 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", - "dev": true, "requires": { "chalk": "1.1.3", "esutils": "2.0.2", "js-tokens": "3.0.2" } }, - "babel-core": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.0.tgz", - "integrity": "sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=", - "dev": true, - "requires": { - "babel-code-frame": "6.26.0", - "babel-generator": "6.26.0", - "babel-helpers": "6.24.1", - "babel-messages": "6.23.0", - "babel-register": "6.26.0", - "babel-runtime": "6.26.0", - "babel-template": "6.26.0", - "babel-traverse": "6.26.0", - "babel-types": "6.26.0", - "babylon": "6.18.0", - "convert-source-map": "1.5.0", - "debug": "2.6.8", - "json5": "0.5.1", - "lodash": "4.17.4", - "minimatch": "3.0.4", - "path-is-absolute": "1.0.1", - "private": "0.1.7", - "slash": "1.0.0", - "source-map": "0.5.6" - } - }, - "babel-generator": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.0.tgz", - "integrity": "sha1-rBriAHC3n248odMmlhMFN3TyDcU=", - "dev": true, - "requires": { - "babel-messages": "6.23.0", - "babel-runtime": "6.26.0", - "babel-types": "6.26.0", - "detect-indent": "4.0.0", - "jsesc": "1.3.0", - "lodash": "4.17.4", - "source-map": "0.5.6", - "trim-right": "1.0.1" - } - }, - "babel-register": { - "version": "6.26.0", - "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz", - "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=", - "dev": true, - "requires": { - "babel-core": "6.26.0", - "babel-runtime": "6.26.0", - "core-js": "2.5.0", - "home-or-tmp": "2.0.0", - "lodash": "4.17.4", - "mkdirp": "0.5.1", - "source-map-support": "0.4.15" - }, - "dependencies": { - "core-js": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.0.tgz", - "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=", - "dev": true - } - } - }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "2.4.1", "regenerator-runtime": "0.11.0" @@ -558,7 +488,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz", "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=", - "dev": true, "requires": { "babel-runtime": "6.26.0", "babel-traverse": "6.26.0", @@ -571,7 +500,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz", "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=", - "dev": true, "requires": { "babel-code-frame": "6.26.0", "babel-messages": "6.23.0", @@ -588,7 +516,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", - "dev": true, "requires": { "babel-runtime": "6.26.0", "esutils": "2.0.2", @@ -599,14 +526,12 @@ "core-js": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz", - "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4=", - "dev": true + "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4=" }, "regenerator-runtime": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz", - "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==", - "dev": true + "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==" } } }, @@ -1135,7 +1060,6 @@ "version": "6.23.0", "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", - "dev": true, "requires": { "babel-runtime": "6.25.0" } @@ -1889,7 +1813,6 @@ "version": "6.25.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz", "integrity": "sha1-M7mOql1IK7AajRqmtDetKwGuxBw=", - "dev": true, "requires": { "core-js": "2.5.0", "regenerator-runtime": "0.10.5" @@ -1898,8 +1821,7 @@ "core-js": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.0.tgz", - "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=", - "dev": true + "integrity": "sha1-VpwFCRi+ZIazg3VSAorgRmtxcIY=" } } }, @@ -1948,8 +1870,7 @@ "babylon": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", - "dev": true + "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" }, "balanced-match": { "version": "1.0.0", @@ -2421,7 +2342,6 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, "requires": { "ansi-styles": "2.2.1", "escape-string-regexp": "1.0.5", @@ -2436,6 +2356,31 @@ "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU=", "dev": true }, + "cheerio": { + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", + "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=", + "dev": true, + "requires": { + "css-select": "1.2.0", + "dom-serializer": "0.1.0", + "entities": "1.1.1", + "htmlparser2": "3.9.2", + "lodash": "4.17.4", + "parse5": "3.0.3" + }, + "dependencies": { + "parse5": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", + "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", + "dev": true, + "requires": { + "@types/node": "8.0.50" + } + } + } + }, "chokidar": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz", @@ -3176,7 +3121,6 @@ "version": "2.6.8", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz", "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=", - "dev": true, "requires": { "ms": "2.0.0" } @@ -3586,9 +3530,9 @@ "dev": true }, "enzyme": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.1.0.tgz", - "integrity": "sha1-2MqECFeQ+87G7UC63RRHj67kwlo=", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.1.1.tgz", + "integrity": "sha512-+Lj90HE3c6Jgtpha3kYfB/mTdD1GNWqSh7q8AcA8d+/CRJojRT+3yABHqKpfRx71qeEACjuvXU3Eu5UP//p/mA==", "dev": true, "requires": { "cheerio": "1.0.0-rc.2", @@ -3600,34 +3544,47 @@ "object.entries": "1.0.4", "object.values": "1.0.4", "raf": "3.4.0", - "rst-selector-parser": "2.2.2" + "rst-selector-parser": "2.2.3" + } + }, + "enzyme-adapter-react-16": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.4.tgz", + "integrity": "sha512-MCjuwrCE5yhTJxaBhd6zTVdm8T01Ydjys5JaFm9ILkxP7oYb3N4i+nytKlzhI7rVouPdAuUVI8mO5UcEbEFAmw==", + "dev": true, + "requires": { + "enzyme-adapter-utils": "1.1.1", + "lodash": "4.17.4", + "object.assign": "4.0.4", + "object.values": "1.0.4", + "prop-types": "15.6.0", + "react-test-renderer": "16.1.0" }, "dependencies": { - "cheerio": { - "version": "1.0.0-rc.2", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", - "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=", + "react-test-renderer": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.1.0.tgz", + "integrity": "sha512-PQx92UCj6GMl/vQtitzV2iHg+Zgu5ft5FT/2HpYfwQBG9OjDtBQ6PEo988rVjEaTjmJ06mNpA1sG3on47l6MOg==", "dev": true, "requires": { - "css-select": "1.2.0", - "dom-serializer": "0.1.0", - "entities": "1.1.1", - "htmlparser2": "3.9.2", - "lodash": "4.17.4", - "parse5": "3.0.2" - } - }, - "parse5": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz", - "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=", - "dev": true, - "requires": { - "@types/node": "6.0.88" + "fbjs": "0.8.16", + "object-assign": "4.1.1", + "prop-types": "15.6.0" } } } }, + "enzyme-adapter-utils": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.1.1.tgz", + "integrity": "sha512-XU41nEiTl7O2JJvRA7JoCMhkDYRW9mQAgiy67Yz9BqTiRP/ldwuJYX8Gkom2LlihKIb9wy96IDuayR3RQspSNg==", + "dev": true, + "requires": { + "lodash": "4.17.4", + "object.assign": "4.0.4", + "prop-types": "15.6.0" + } + }, "errno": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz", @@ -3755,8 +3712,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.9.0", @@ -4210,8 +4166,7 @@ "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", - "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", - "dev": true + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" }, "etag": { "version": "1.8.1", @@ -4854,8 +4809,7 @@ "globals": { "version": "9.18.0", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", - "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==", - "dev": true + "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==" }, "globby": { "version": "6.1.0", @@ -5018,7 +4972,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, "requires": { "ansi-regex": "2.1.1" } @@ -5501,7 +5454,6 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz", "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=", - "dev": true, "requires": { "loose-envify": "1.3.1" } @@ -6250,8 +6202,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { "version": "3.7.0", @@ -6565,8 +6516,7 @@ "lodash": { "version": "4.17.4", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", - "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", - "dev": true + "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" }, "lodash._reinterpolate": { "version": "3.0.0", @@ -6667,7 +6617,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "dev": true, "requires": { "js-tokens": "3.0.2" } @@ -6947,8 +6896,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "multicast-dns": { "version": "6.1.1", @@ -9070,14 +9018,6 @@ "dev": true, "requires": { "performance-now": "2.1.0" - }, - "dependencies": { - "performance-now": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", - "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", - "dev": true - } } }, "railroad-diagrams": { @@ -9202,34 +9142,6 @@ "loose-envify": "1.3.1", "object-assign": "4.1.1", "prop-types": "15.6.0" - }, - "dependencies": { - "fbjs": { - "version": "0.8.16", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", - "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", - "dev": true, - "requires": { - "core-js": "1.2.7", - "isomorphic-fetch": "2.2.1", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "promise": "7.3.1", - "setimmediate": "1.0.5", - "ua-parser-js": "0.7.14" - } - }, - "prop-types": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", - "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", - "dev": true, - "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" - } - } } }, "react-addons-test-utils": { @@ -9287,34 +9199,6 @@ "loose-envify": "1.3.1", "object-assign": "4.1.1", "prop-types": "15.6.0" - }, - "dependencies": { - "fbjs": { - "version": "0.8.16", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", - "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", - "dev": true, - "requires": { - "core-js": "1.2.7", - "isomorphic-fetch": "2.2.1", - "loose-envify": "1.3.1", - "object-assign": "4.1.1", - "promise": "7.3.1", - "setimmediate": "1.0.5", - "ua-parser-js": "0.7.14" - } - }, - "prop-types": { - "version": "15.6.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", - "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", - "dev": true, - "requires": { - "fbjs": "0.8.16", - "loose-envify": "1.3.1", - "object-assign": "4.1.1" - } - } } }, "react-error-overlay": { @@ -9494,6 +9378,17 @@ } } }, + "react-test-renderer": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.1.0.tgz", + "integrity": "sha512-PQx92UCj6GMl/vQtitzV2iHg+Zgu5ft5FT/2HpYfwQBG9OjDtBQ6PEo988rVjEaTjmJ06mNpA1sG3on47l6MOg==", + "dev": true, + "requires": { + "fbjs": "0.8.16", + "object-assign": "4.1.1", + "prop-types": "15.6.0" + } + }, "react-transition-group": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", @@ -9710,8 +9605,7 @@ "regenerator-runtime": { "version": "0.10.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", - "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", - "dev": true + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=" }, "regenerator-transform": { "version": "0.9.11", @@ -10052,9 +9946,9 @@ } }, "rst-selector-parser": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.2.tgz", - "integrity": "sha512-T5yd2bsA+FVQ5xP8Ga62gXjOnEaMsYhbbslVB+Fe4R9lAZiF7DfTHRyBpV9xEZ772LwstCdDdkHkvkWIr47X8g==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz", + "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=", "dev": true, "requires": { "lodash.flattendeep": "4.4.0", @@ -10932,7 +10826,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, "requires": { "ansi-regex": "2.1.1" } @@ -10980,8 +10873,7 @@ "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, "svgo": { "version": "0.7.2", @@ -11163,8 +11055,7 @@ "to-fast-properties": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", - "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", - "dev": true + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=" }, "toposort": { "version": "1.0.3", diff --git a/package.json b/package.json index ff3c30d..4cd0158 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.10", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", - "enzyme": "^3.1.0", + "enzyme": "^3.1.1", + "enzyme-adapter-react-16": "^1.0.4", "flag-icon-css": "^2.8.0", "gh-pages": "^1.0.0", "material-ui": "^0.19.4", @@ -35,6 +36,7 @@ "react-dom": ">= 15 < 17", "react-router-dom": "^4.2.2", "react-scripts": "^1.0.16", + "react-test-renderer": "^16.1.0", "standard": "^10.0.2" }, "peerDependencies": { @@ -96,5 +98,11 @@ "test": "react-scripts test --env=jsdom --coverage", "release": "npm run deploy && npm run buildLib && npm publish", "eject": "react-scripts eject" + }, + "jest": { + "collectCoverageFrom": [ + "src/App.js", + "src/SuperSelectField.js" + ] } } diff --git a/src/App.test.js b/src/App.test.js index 707b049..a39ece8 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,10 +1,13 @@ import React from 'react' -import ReactDOM from 'react-dom' +import { shallow, configure } from 'enzyme' +import Adapter from 'enzyme-adapter-react-16' + import App from './App' +configure({ adapter: new Adapter() }) + describe('App', () => { it('renders without crashing', () => { - const div = document.createElement('div') - ReactDOM.render(, div) + shallow() }) }) diff --git a/src/CodeExample1.js b/src/CodeExample1.js index 7956391..e8c623b 100644 --- a/src/CodeExample1.js +++ b/src/CodeExample1.js @@ -39,6 +39,7 @@ class CodeExample extends Component { onChange={this.handleSelection} value={state11} style={{ minWidth: 150, margin: 10 }} + onRequestClose={() => console.log('onRequestClose')} >
Option A
Option B
@@ -51,6 +52,7 @@ class CodeExample extends Component { onChange={this.handleSelection} value={state12} style={{ minWidth: 150, margin: 10 }} + onRequestClose={() => console.log('onRequestClose')} >
Option D
Option E
@@ -65,6 +67,7 @@ class CodeExample extends Component { onChange={this.handleSelection} value={floatingLabelState} style={{ minWidth: 150, margin: 10 }} + onRequestClose={() => console.log('onRequestClose')} >
Option A
Option B
@@ -75,6 +78,7 @@ class CodeExample extends Component { disabled hintText='Disabled' style={{ minWidth: 150, margin: 10 }} + onRequestClose={() => console.log('onRequestClose')} /> diff --git a/src/CodeExample2.js b/src/CodeExample2.js index bab6fa1..7478144 100644 --- a/src/CodeExample2.js +++ b/src/CodeExample2.js @@ -47,6 +47,7 @@ class CodeExample extends Component { value={state21} style={{ minWidth: 150, marginRight: 40 }} elementHeight={[36, 68, 36]} + onRequestClose={(...args) => console.log('onRequestClose', args)} >
Option G
Option H super longue
@@ -63,7 +64,9 @@ class CodeExample extends Component { value={state22} style={{ minWidth: 150, marginRight: 40 }} elementHeight={[36, 68, 36]} - menuCloseButton={} + menuCloseButton={} + menuCancelButton={} + onRequestClose={(...args) => console.log('onRequestClose', args)} >
Option G
Option H super longue
@@ -80,6 +83,7 @@ class CodeExample extends Component { elementHeight={[36, 52, 36]} menuFooterStyle={{ width: '100%' }} menuCloseButton={} + onRequestClose={(...args) => console.log('onRequestClose', args)} >
Option G
Option H super longue
diff --git a/src/SuperSelectField.js b/src/SuperSelectField.js index 2a24ce8..9c90f51 100644 --- a/src/SuperSelectField.js +++ b/src/SuperSelectField.js @@ -231,6 +231,7 @@ class SelectField extends Component { itemsLength, showAutocomplete: (itemsLength > showAutocompleteThreshold) || false, selectedItems: value || (multiple ? [] : null), + initialSelectedItems: value || (multiple ? [] : null), searchText: '' } this.menuItems = [] @@ -287,9 +288,17 @@ class SelectField extends Component { closeMenu = (reason) => { const { onChange, name } = this.props - onChange(this.state.selectedItems, name) - if (reason) this.setState({ isFocused: false }) // if reason === 'clickaway' or 'offscreen' - this.setState({ isOpen: false, searchText: '' }, () => !reason && this.root.focus()) + + if (reason === 'clickaway') { // if reason === 'clickaway' or 'offscreen' + this.setState({ isOpen: false, searchText: '', isFocused: false, selectedItems: this.state.initialSelectedItems }) + } else { + onChange(this.state.selectedItems, name) + this.setState({ isOpen: false, searchText: '', isFocused: false, initialSelectedItems: this.state.selectedItems }) + } + + if (!reason && this.root) { + this.root.focus() + } } openMenu () { @@ -317,6 +326,14 @@ class SelectField extends Component { : this.setState({ searchText: '' }, callback) } + onRequestClose = (...args) => { + const { menuCloseButton, menuCancelButton } = this.props + if (!menuCloseButton && !menuCancelButton) { + this.closeMenu(args) + } + this.props.onRequestClose(args) + } + /** * Main Component Wrapper methods */ @@ -342,7 +359,7 @@ class SelectField extends Component { case 'Escape': this.clearTextField() - this.closeMenu() + this.closeMenu('clickaway') break default: break @@ -383,8 +400,7 @@ class SelectField extends Component { this.state.showAutocomplete ? this.focusTextField() : this.focusMenuItem(lastTabIndex) - } - else { + } else { const previousTabIndex = cleanMenuItems .slice(0, currentElementIndex) .slice(-1)[0] @@ -416,7 +432,7 @@ class SelectField extends Component { break case 'Escape': - this.closeMenu() + this.closeMenu('clickaway') break default: break @@ -427,8 +443,8 @@ class SelectField extends Component { const { children, floatingLabel, hintText, hintTextAutocomplete, multiple, disabled, nb2show, autocompleteFilter, selectionsRenderer, menuCloseButton, anchorOrigin, canAutoPosition, style, menuStyle, elementHeight, innerDivStyle, selectedMenuItemStyle, menuGroupStyle, menuFooterStyle, - floatingLabelStyle, floatingLabelFocusStyle, underlineStyle, underlineFocusStyle, - autocompleteUnderlineStyle, autocompleteUnderlineFocusStyle, noMatchFound, noMatchFoundStyle, + floatingLabelStyle, floatingLabelFocusStyle, underlineStyle, underlineFocusStyle, useLayerForClickAway, + autocompleteUnderlineStyle, autocompleteUnderlineFocusStyle, noMatchFound, noMatchFoundStyle, menuCancelButton, checkedIcon, unCheckedIcon, hoverColor, checkPosition, errorText, errorStyle, underlineErrorStyle } = this.props @@ -515,7 +531,7 @@ class SelectField extends Component { : elementHeight */ const autoCompleteHeight = this.state.showAutocomplete ? 53 : 0 - const footerHeight = menuCloseButton ? 36 : 0 + const footerHeight = (menuCloseButton || menuCancelButton) ? 36 : 0 const noMatchFoundHeight = 36 const containerHeight = (Array.isArray(elementHeight) ? elementHeight.reduce((totalHeight, height) => totalHeight + height, 6) @@ -564,9 +580,10 @@ class SelectField extends Component { anchorEl={this.root} canAutoPosition={canAutoPosition} anchorOrigin={anchorOrigin} - useLayerForClickAway={false} - onRequestClose={this.closeMenu} + useLayerForClickAway={useLayerForClickAway} + onRequestClose={this.onRequestClose} style={{ height: popoverHeight }} + autoCloseWhenOffScreen={false} > {this.state.showAutocomplete && {multiple && -