From 763b8f3c50ac8426fcca4080fd19f3307f1e1879 Mon Sep 17 00:00:00 2001 From: Arthur Gunn Date: Wed, 2 Oct 2019 19:24:26 +1300 Subject: [PATCH 1/7] Add a working example of drag-drop sortable MultiSelect values (#3645) * Supply index prop to MultiValue. * Add react-sortable-hoc, update react versions. * Add working example of a MultiSelect with sortable values. * Update page text. * Fix dependencies. * Fixes for eslint. --- docs/examples/MultiSelectSort.js | 47 +++++++++++++++++++++++++ docs/examples/index.js | 1 + docs/package.json | 7 ++-- docs/pages/advanced/index.js | 14 ++++++++ package.json | 5 +-- packages/react-select/package.json | 4 +-- yarn.lock | 55 ++++++++++++++++++++---------- 7 files changed, 108 insertions(+), 25 deletions(-) create mode 100644 docs/examples/MultiSelectSort.js diff --git a/docs/examples/MultiSelectSort.js b/docs/examples/MultiSelectSort.js new file mode 100644 index 0000000000..07d2e76bed --- /dev/null +++ b/docs/examples/MultiSelectSort.js @@ -0,0 +1,47 @@ +import React from 'react'; + +import Select, { components } from 'react-select'; +import { SortableContainer, SortableElement } from 'react-sortable-hoc'; +import { colourOptions } from '../data'; + + +function arrayMove(array, from, to) { + array = array.slice(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} + +const SortableMultiValue = SortableElement(components.MultiValue); +const SortableSelect = SortableContainer(Select); + + +export default function MultiSelectSort() { + const [selected, setSelected] = React.useState([colourOptions[4], colourOptions[5]]); + + const onChange = (selectedOptions)=> setSelected(selectedOptions); + + const onSortEnd = ({ oldIndex, newIndex })=> { + setSelected(arrayMove(selected, oldIndex, newIndex)); + }; + + return ( + node.getBoundingClientRect()} + + // react-select props: + isMulti + options={colourOptions} + value={selected} + onChange={onChange} + components={{ + MultiValue: SortableMultiValue + }} + closeMenuOnSelect={false} + /> + ); +} diff --git a/docs/examples/index.js b/docs/examples/index.js index df46530dd9..1dc190e23e 100644 --- a/docs/examples/index.js +++ b/docs/examples/index.js @@ -39,6 +39,7 @@ export { default as CustomFilterOptions } from './CustomFilterOptions'; export { default as CustomIsOptionDisabled } from './CustomIsOptionDisabled'; export { default as Experimental } from './Experimental'; export { default as FixedOptions } from './FixedOptions'; +export { default as MultiSelectSort } from './MultiSelectSort'; export { default as Popout } from './Popout'; export { default as StyledMulti } from './StyledMulti'; export { default as StyledSingle } from './StyledSingle'; diff --git a/docs/package.json b/docs/package.json index 79f9de28e8..354ff1b2c6 100644 --- a/docs/package.json +++ b/docs/package.json @@ -34,13 +34,14 @@ "pretty-proptypes": "^0.5.0", "raf-schd": "^2.1.0", "raw-loader": "^2.0.0", - "react": "^16.2.0", + "react": "^16.8.0", "react-codesandboxer": "^2.0.1", - "react-dom": "^16.2.0", + "react-dom": "^16.8.0", "react-helmet": "^5.2.0", "react-markings": "^1.3.0", "react-router-dom": "^4.2.2", "react-select": "^3.0.0", + "react-sortable-hoc": "^1.9.1", "react-syntax-highlighter": "^7.0.1", "style-loader": "^0.23.1", "unfetch": "^3.0.0", @@ -52,4 +53,4 @@ "start": "cross-env FORCE_EXTRACT_REACT_TYPES=true webpack-dev-server --progress", "build:docs": "rimraf docs/dist && cross-env FORCE_EXTRACT_REACT_TYPES=true webpack --progress -p" } -} \ No newline at end of file +} diff --git a/docs/pages/advanced/index.js b/docs/pages/advanced/index.js index 14619053d3..af261841b9 100644 --- a/docs/pages/advanced/index.js +++ b/docs/pages/advanced/index.js @@ -17,6 +17,7 @@ import { Popout, MenuBuffer, MenuPortal, + MultiSelectSort, } from '../../examples'; export default function Advanced() { @@ -32,6 +33,19 @@ export default function Advanced() { {md` # Advanced + ## Sortable MultiSelect + Using the [react-sortable-hoc](https://www.npmjs.com/package/react-sortable-hoc) package we can easily allow sorting of MultiSelect values by drag and drop. + + ${( + + + + )} + ## Custom Filter logic While React-Select assumes a standard way of filtering the menu on search, our api allows you to customise that filtering logic in various ways. diff --git a/package.json b/package.json index 83643c2a8d..138cb7bcbf 100644 --- a/package.json +++ b/package.json @@ -69,13 +69,14 @@ "raf": "^3.4.0", "raf-schd": "^2.1.0", "raw-loader": "^2.0.0", - "react": "^16.2.0", + "react": "^16.8.0", "react-codesandboxer": "^2.0.1", - "react-dom": "^16.2.0", + "react-dom": "^16.8.0", "react-helmet": "^5.2.0", "react-input-autosize": "^2.2.2", "react-markings": "^1.3.0", "react-router-dom": "^4.2.2", + "react-sortable-hoc": "^1.9.1", "react-syntax-highlighter": "^7.0.1", "react-transition-group": "^2.2.1", "style-loader": "^0.23.1", diff --git a/packages/react-select/package.json b/packages/react-select/package.json index 02cfc235f0..57dca303f4 100644 --- a/packages/react-select/package.json +++ b/packages/react-select/package.json @@ -26,8 +26,8 @@ "enzyme": "^3.8.0", "enzyme-to-json": "^3.3.0", "jest-in-case": "^1.0.2", - "react": "^16.2.0", - "react-dom": "^16.2.0" + "react": "^16.8.0", + "react-dom": "^16.8.0" }, "peerDependencies": { "react": "^16.8.0", diff --git a/yarn.lock b/yarn.lock index 596ff9e5af..004595674d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -982,6 +982,13 @@ "@babel/plugin-transform-react-jsx-self" "^7.0.0" "@babel/plugin-transform-react-jsx-source" "^7.0.0" +"@babel/runtime@^7.2.0": + version "7.4.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" + integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d" @@ -11072,15 +11079,15 @@ react-deprecate@^0.1.0: resolved "https://registry.yarnpkg.com/react-deprecate/-/react-deprecate-0.1.0.tgz#817bdf22b8275fb767e9f49a8053f642600435c3" integrity sha512-9ooyaovhANHgfuOxXRgrEiEfWjEhvygeSxrRTGxNlXErnXnyHBGjxCxrKYsT/Gsc62lS9rFOBeK0c2wwdyUnvQ== -react-dom@^16.2.0: - version "16.3.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df" - integrity sha512-MMPko3zYncNrz/7gG17wJWUREZDvskZHXOwbttzl0F0L3wDmToyuETuo/r8Y5yvDejwYcRyWI1lvVBjLJWFwKA== +react-dom@^16.8.0: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" + integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== dependencies: - fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.0" + prop-types "^15.6.2" + scheduler "^0.13.6" react-helmet@^5.2.0: version "5.2.0" @@ -11109,12 +11116,7 @@ react-is@^16.6.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g== -react-is@^16.8.1: - version "16.10.1" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f" - integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw== - -react-is@^16.8.4: +react-is@^16.8.1, react-is@^16.8.4: version "16.8.6" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== @@ -11165,6 +11167,15 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" +react-sortable-hoc@^1.9.1: + version "1.9.1" + resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz#ae3d28c3cff87fb862be3ddcde9c76b5b5bd2152" + integrity sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg== + dependencies: + "@babel/runtime" "^7.2.0" + invariant "^2.2.4" + prop-types "^15.5.7" + react-syntax-highlighter@^7.0.1: version "7.0.2" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-7.0.2.tgz#674036d4803183f3a33202defc35e5ba83d992f5" @@ -11195,15 +11206,15 @@ react-transition-group@^2.2.1: loose-envify "^1.3.1" prop-types "^15.6.1" -react@^16.2.0: - version "16.3.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9" - integrity sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg== +react@^16.8.0: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" + integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== dependencies: - fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.0" + prop-types "^15.6.2" + scheduler "^0.13.6" read-file-async@^1.0.0: version "1.0.0" @@ -11943,6 +11954,14 @@ scheduler@^0.12.0: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.13.6: + version "0.13.6" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" + integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" From fd6bcadde3d0bec01291e39562d99a2044d2c1ac Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Wed, 2 Oct 2019 16:37:15 +1000 Subject: [PATCH 2/7] Updating react versions for consistency --- docs/package.json | 4 +-- package.json | 4 +-- packages/react-select/package.json | 4 +-- yarn.lock | 46 +++++++++++++++++------------- 4 files changed, 32 insertions(+), 26 deletions(-) diff --git a/docs/package.json b/docs/package.json index 79f9de28e8..c1642156d2 100644 --- a/docs/package.json +++ b/docs/package.json @@ -34,9 +34,9 @@ "pretty-proptypes": "^0.5.0", "raf-schd": "^2.1.0", "raw-loader": "^2.0.0", - "react": "^16.2.0", + "react": "^16.8.0", "react-codesandboxer": "^2.0.1", - "react-dom": "^16.2.0", + "react-dom": "^16.8.0", "react-helmet": "^5.2.0", "react-markings": "^1.3.0", "react-router-dom": "^4.2.2", diff --git a/package.json b/package.json index 83643c2a8d..f5184f247e 100644 --- a/package.json +++ b/package.json @@ -69,9 +69,9 @@ "raf": "^3.4.0", "raf-schd": "^2.1.0", "raw-loader": "^2.0.0", - "react": "^16.2.0", + "react": "^16.8.0", "react-codesandboxer": "^2.0.1", - "react-dom": "^16.2.0", + "react-dom": "^16.8.0", "react-helmet": "^5.2.0", "react-input-autosize": "^2.2.2", "react-markings": "^1.3.0", diff --git a/packages/react-select/package.json b/packages/react-select/package.json index 02cfc235f0..57dca303f4 100644 --- a/packages/react-select/package.json +++ b/packages/react-select/package.json @@ -26,8 +26,8 @@ "enzyme": "^3.8.0", "enzyme-to-json": "^3.3.0", "jest-in-case": "^1.0.2", - "react": "^16.2.0", - "react-dom": "^16.2.0" + "react": "^16.8.0", + "react-dom": "^16.8.0" }, "peerDependencies": { "react": "^16.8.0", diff --git a/yarn.lock b/yarn.lock index 596ff9e5af..9bc22181f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5368,7 +5368,7 @@ expand-tilde@^1.2.2: dependencies: os-homedir "^1.0.1" -expand-tilde@^2.0.0, expand-tilde@^2.0.2: +expand-tilde@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502" integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI= @@ -6276,6 +6276,12 @@ global-prefix@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe" integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4= + dependencies: + expand-tilde "^2.0.2" + homedir-polyfill "^1.0.1" + ini "^1.3.4" + is-windows "^1.0.1" + which "^1.2.14" globals@^11.0.1, globals@^11.1.0: version "11.4.0" @@ -11072,15 +11078,15 @@ react-deprecate@^0.1.0: resolved "https://registry.yarnpkg.com/react-deprecate/-/react-deprecate-0.1.0.tgz#817bdf22b8275fb767e9f49a8053f642600435c3" integrity sha512-9ooyaovhANHgfuOxXRgrEiEfWjEhvygeSxrRTGxNlXErnXnyHBGjxCxrKYsT/Gsc62lS9rFOBeK0c2wwdyUnvQ== -react-dom@^16.2.0: - version "16.3.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.2.tgz#cb90f107e09536d683d84ed5d4888e9640e0e4df" - integrity sha512-MMPko3zYncNrz/7gG17wJWUREZDvskZHXOwbttzl0F0L3wDmToyuETuo/r8Y5yvDejwYcRyWI1lvVBjLJWFwKA== +react-dom@^16.8.0: + version "16.10.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.1.tgz#479a6511ba34a429273c213cbc2a9ac4d296dac1" + integrity sha512-SmM4ZW0uug0rn95U8uqr52I7UdNf6wdGLeXDmNLfg3y5q5H9eAbdjF5ubQc3bjDyRrvdAB2IKG7X0GzSpnn5Mg== dependencies: - fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.0" + prop-types "^15.6.2" + scheduler "^0.16.1" react-helmet@^5.2.0: version "5.2.0" @@ -11195,15 +11201,14 @@ react-transition-group@^2.2.1: loose-envify "^1.3.1" prop-types "^15.6.1" -react@^16.2.0: - version "16.3.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.3.2.tgz#fdc8420398533a1e58872f59091b272ce2f91ea9" - integrity sha512-o5GPdkhciQ3cEph6qgvYB7LTOHw/GB0qRI6ZFNugj49qJCFfgHwVNjZ5u+b7nif4vOeMIOuYj3CeYe2IBD74lg== +react@^16.8.0: + version "16.10.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.10.1.tgz#967c1e71a2767dfa699e6ba702a00483e3b0573f" + integrity sha512-2bisHwMhxQ3XQz4LiJJwG3360pY965pTl/MRrZYxIBKVj4fOHoDs5aZAkYXGxDRO1Li+SyjTAilQEbOmtQJHzA== dependencies: - fbjs "^0.8.16" loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.0" + prop-types "^15.6.2" read-file-async@^1.0.0: version "1.0.0" @@ -11943,6 +11948,14 @@ scheduler@^0.12.0: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.1.tgz#a6fb6ddec12dc2119176e6eb54ecfe69a9eba8df" + integrity sha512-MIuie7SgsqMYOdCXVFZa8SKoNorJZUWHW8dPgto7uEHn1lX3fg2Gu0TzgK8USj76uxV7vB5eRMnZs/cdEHg+cg== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" @@ -13682,13 +13695,6 @@ which@1, which@^1.2.10, which@^1.2.12, which@^1.2.9, which@^1.3.0: dependencies: isexe "^2.0.0" -which@^1.2.14: - version "1.3.1" - resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" - integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ== - dependencies: - isexe "^2.0.0" - wide-align@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710" From 3eecc479b3aeb37a8ed940dda17c38bc2a0fe141 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Wed, 2 Oct 2019 16:45:06 +1000 Subject: [PATCH 3/7] Formatting with prettier --- docs/examples/MultiSelectSort.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/examples/MultiSelectSort.js b/docs/examples/MultiSelectSort.js index 07d2e76bed..c6d3840991 100644 --- a/docs/examples/MultiSelectSort.js +++ b/docs/examples/MultiSelectSort.js @@ -4,7 +4,6 @@ import Select, { components } from 'react-select'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import { colourOptions } from '../data'; - function arrayMove(array, from, to) { array = array.slice(); array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); @@ -14,13 +13,15 @@ function arrayMove(array, from, to) { const SortableMultiValue = SortableElement(components.MultiValue); const SortableSelect = SortableContainer(Select); - export default function MultiSelectSort() { - const [selected, setSelected] = React.useState([colourOptions[4], colourOptions[5]]); + const [selected, setSelected] = React.useState([ + colourOptions[4], + colourOptions[5], + ]); - const onChange = (selectedOptions)=> setSelected(selectedOptions); + const onChange = selectedOptions => setSelected(selectedOptions); - const onSortEnd = ({ oldIndex, newIndex })=> { + const onSortEnd = ({ oldIndex, newIndex }) => { setSelected(arrayMove(selected, oldIndex, newIndex)); }; @@ -31,15 +32,14 @@ export default function MultiSelectSort() { onSortEnd={onSortEnd} distance={4} // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352 : - getHelperDimensions={({ node })=> node.getBoundingClientRect()} - + getHelperDimensions={({ node }) => node.getBoundingClientRect()} // react-select props: isMulti options={colourOptions} value={selected} onChange={onChange} components={{ - MultiValue: SortableMultiValue + MultiValue: SortableMultiValue, }} closeMenuOnSelect={false} /> From 3f176450e62c6583f8a234cc542f7a58fba7c756 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Wed, 2 Oct 2019 16:49:38 +1000 Subject: [PATCH 4/7] Log sorted values on change --- docs/examples/MultiSelectSort.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/examples/MultiSelectSort.js b/docs/examples/MultiSelectSort.js index c6d3840991..9f20adfc37 100644 --- a/docs/examples/MultiSelectSort.js +++ b/docs/examples/MultiSelectSort.js @@ -22,7 +22,9 @@ export default function MultiSelectSort() { const onChange = selectedOptions => setSelected(selectedOptions); const onSortEnd = ({ oldIndex, newIndex }) => { - setSelected(arrayMove(selected, oldIndex, newIndex)); + const newValue = arrayMove(selected, oldIndex, newIndex); + setSelected(newValue); + console.log('Values sorted:', newValue.map(i => i.value)); }; return ( From 9ab506f3d42556fd5fe2b12b116c1fb2e6f488fa Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Wed, 2 Oct 2019 16:54:04 +1000 Subject: [PATCH 5/7] Removing unnecessary console.log from the example wrapper --- docs/ExampleWrapper.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/ExampleWrapper.js b/docs/ExampleWrapper.js index 3461c9714c..17869ff5d7 100644 --- a/docs/ExampleWrapper.js +++ b/docs/ExampleWrapper.js @@ -16,9 +16,7 @@ const gitInfo = { host: 'github', }; -const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${ - gitInfo.branch -}`; +const sourceUrl = `https://github.com/${gitInfo.account}/react-select/tree/${gitInfo.branch}`; export default class ExampleWrapper extends Component { state = { isHovered: false, showCode: false }; @@ -26,7 +24,6 @@ export default class ExampleWrapper extends Component { handleEnter = () => this.setState({ isHovered: true }); handleLeave = () => this.setState({ isHovered: false }); renderCodeSample = () => { - console.log(raw); let { raw } = this.props; let { showCode } = this.state; From 1cd7a01f7c8821561bddb389b5d50e1f4285c644 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Wed, 2 Oct 2019 17:05:21 +1000 Subject: [PATCH 6/7] Improving sortable example behaviour --- docs/examples/MultiSelectSort.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/examples/MultiSelectSort.js b/docs/examples/MultiSelectSort.js index 9f20adfc37..0c4ae1009e 100644 --- a/docs/examples/MultiSelectSort.js +++ b/docs/examples/MultiSelectSort.js @@ -10,7 +10,18 @@ function arrayMove(array, from, to) { return array; } -const SortableMultiValue = SortableElement(components.MultiValue); +const SortableMultiValue = SortableElement(props => { + // this prevents the menu from being opened/closed when the user clicks + // on a value to begin dragging it. ideally, detecting a click (instead of + // a drag) would still focus the control and toggle the menu, but that + // requires some magic with refs that are out of scope for this example + const onMouseDown = e => { + e.preventDefault(); + e.stopPropagation(); + }; + const innerProps = { onMouseDown }; + return ; +}); const SortableSelect = SortableContainer(Select); export default function MultiSelectSort() { @@ -33,7 +44,7 @@ export default function MultiSelectSort() { axis="xy" onSortEnd={onSortEnd} distance={4} - // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352 : + // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352: getHelperDimensions={({ node }) => node.getBoundingClientRect()} // react-select props: isMulti From f2beb6add2a80d051cb95cb2c776622aaedd5da4 Mon Sep 17 00:00:00 2001 From: Jed Watson Date: Wed, 2 Oct 2019 17:07:03 +1000 Subject: [PATCH 7/7] Fix first-child warning in Chrome when viewing the site --- docs/markdown/renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/markdown/renderer.js b/docs/markdown/renderer.js index bda0097750..0e3a23ae7e 100644 --- a/docs/markdown/renderer.js +++ b/docs/markdown/renderer.js @@ -97,7 +97,7 @@ const Heading = props => { } const css = { marginTop: 0, - '&:not(:first-child)': { marginTop: 30 }, + '&:not(:first-of-type)': { marginTop: 30 }, }; return linkify ? (