Skip to content

Add a working example of drag-drop sortable MultiSelect values #3645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 2, 2019
Merged

Add a working example of drag-drop sortable MultiSelect values #3645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
47af78d
Supply index prop to MultiValue.
gunn Jun 23, 2019
a9d0a83
Add react-sortable-hoc, update react versions.
gunn Jun 23, 2019
d540660
Add working example of a MultiSelect with sortable values.
gunn Jun 23, 2019
5c53745
Update page text.
gunn Jun 23, 2019
55127c5
Fix dependencies.
gunn Jun 23, 2019
edf29ee
Fixes for eslint.
gunn Jun 23, 2019
37286f1
Merge branch 'sortable-example' into multiselect-sort
JedWatson Oct 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions docs/examples/MultiSelectSort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<SortableSelect
// react-sortable-hoc props:
axis="xy"
onSortEnd={onSortEnd}
distance={4}
// small fix for https://github.com/clauderic/react-sortable-hoc/pull/352 :
getHelperDimensions={({ node })=> node.getBoundingClientRect()}

// react-select props:
isMulti
options={colourOptions}
value={selected}
onChange={onChange}
components={{
MultiValue: SortableMultiValue
}}
closeMenuOnSelect={false}
/>
);
}
1 change: 1 addition & 0 deletions docs/examples/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
7 changes: 4 additions & 3 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
}
14 changes: 14 additions & 0 deletions docs/pages/advanced/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
Popout,
MenuBuffer,
MenuPortal,
MultiSelectSort,
} from '../../examples';

export default function Advanced() {
Expand All @@ -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.

${(
<ExampleWrapper
label="Sortable MultiSelect example"
urlPath="docs/examples/MultiSelectSort.js"
raw={require('!!raw-loader!../../examples/MultiSelectSort.js')}
>
<MultiSelectSort />
</ExampleWrapper>
)}

## 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.

Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/react-select/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
55 changes: 37 additions & 18 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down