[ARVADOS-WORKBENCH2] created: 1.2.0-635-ga99ab65
Git user
git at public.curoverse.com
Fri Oct 12 03:53:21 EDT 2018
at a99ab65681e3707f95cd76829ca014e2f7300d47 (commit)
commit a99ab65681e3707f95cd76829ca014e2f7300d47
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Fri Oct 12 09:53:14 2018 +0200
Create base chips field with reordering
Feature #14229
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/package.json b/package.json
index d28ec55..d02cc38 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@types/js-yaml": "3.11.2",
"@types/lodash": "4.14.116",
"@types/react-copy-to-clipboard": "4.2.6",
+ "@types/react-dnd": "3.0.2",
"@types/react-dropzone": "4.2.2",
"@types/react-highlight-words": "0.12.0",
"@types/redux-form": "7.4.5",
@@ -18,6 +19,8 @@
"lodash": "4.17.11",
"react": "16.5.2",
"react-copy-to-clipboard": "5.0.1",
+ "react-dnd": "5.0.0",
+ "react-dnd-html5-backend": "5.0.1",
"react-dom": "16.5.2",
"react-dropzone": "5.1.1",
"react-highlight-words": "0.14.0",
diff --git a/src/components/chips/chips.tsx b/src/components/chips/chips.tsx
new file mode 100644
index 0000000..c013080
--- /dev/null
+++ b/src/components/chips/chips.tsx
@@ -0,0 +1,93 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Chip, Grid } from '@material-ui/core';
+import { DragSource, DragSourceSpec, DragSourceCollector, ConnectDragSource, DragDropContextProvider, DropTarget, DropTargetSpec, DropTargetCollector, ConnectDropTarget } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import { compose } from 'lodash/fp';
+interface ChipsFieldProps<Value> {
+ values: Value[];
+ getLabel?: (value: Value) => string;
+ onChange: (value: Value[]) => void;
+}
+export class Chips<Value> extends React.Component<ChipsFieldProps<Value>> {
+ render() {
+ const { values } = this.props;
+ return <DragDropContextProvider backend={HTML5Backend}>
+ <Grid container spacing={8}>
+ {values.map(this.renderChip)}
+ </Grid>
+ </DragDropContextProvider>;
+ }
+
+ renderChip = (value: Value, index: number) =>
+ <Grid item key={index}>
+ <this.chip {...{ value }} />
+ </Grid>
+
+ type = 'chip';
+
+ dragSpec: DragSourceSpec<DraggableChipProps<Value>, { value: Value }> = {
+ beginDrag: ({ value }) => ({ value }),
+ endDrag: ({ value: dragValue }, monitor) => {
+ const { value: dropValue } = monitor.getDropResult();
+ const dragIndex = this.props.values.indexOf(dragValue);
+ const dropIndex = this.props.values.indexOf(dropValue);
+ const newValues = this.props.values.slice(0);
+ newValues.splice(dragIndex, 1, dropValue);
+ newValues.splice(dropIndex, 1, dragValue);
+ this.props.onChange(newValues);
+ }
+ };
+
+ dragCollector: DragSourceCollector<{}> = connect => ({
+ connectDragSource: connect.dragSource(),
+ })
+
+ dropSpec: DropTargetSpec<DraggableChipProps<Value>> = {
+ drop: ({ value }) => ({ value }),
+ };
+
+ dropCollector: DropTargetCollector<{}> = (connect, monitor) => ({
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ })
+ chip = compose(
+ DragSource(this.type, this.dragSpec, this.dragCollector),
+ DropTarget(this.type, this.dropSpec, this.dropCollector),
+ )(
+ ({ connectDragSource, connectDropTarget, isOver, value }: DraggableChipProps<Value> & CollectedProps) =>
+ compose(
+ connectDragSource,
+ connectDropTarget,
+ )(
+ <span>
+ <Chip
+ color={isOver ? 'primary' : 'default'}
+ onDelete={this.deleteValue(value)}
+ label={this.props.getLabel ? this.props.getLabel(value) : JSON.stringify(value)} />
+ </span>
+ )
+ );
+
+ deleteValue = (value: Value) => () => {
+ const { values } = this.props;
+ const index = values.indexOf(value);
+ const newValues = values.slice(0);
+ newValues.splice(index, 1);
+ this.props.onChange(newValues);
+ }
+}
+
+interface CollectedProps {
+ connectDragSource: ConnectDragSource;
+ connectDropTarget: ConnectDropTarget;
+
+ isOver: boolean;
+}
+
+interface DraggableChipProps<Value> {
+ value: Value;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 906596c..58386c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -123,6 +123,12 @@
dependencies:
"@types/react" "*"
+"@types/react-dnd at 3.0.2":
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/@types/react-dnd/-/react-dnd-3.0.2.tgz#939e5a8ca5b83f847c3f64dabbe2f49a9fefb192"
+ dependencies:
+ react-dnd "*"
+
"@types/react-dom at 16.0.8":
version "16.0.8"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.8.tgz#6e1366ed629cadf55860cbfcc25db533f5d2fa7d"
@@ -462,7 +468,7 @@ arrify@^1.0.0, arrify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-asap@~2.0.3:
+asap@^2.0.6, asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -526,6 +532,10 @@ attr-accept@^1.1.3:
dependencies:
core-js "^2.5.0"
+autobind-decorator@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-2.1.0.tgz#4451240dbfeff46361c506575a63ed40f0e5bc68"
+
autoprefixer at 7.1.6:
version "7.1.6"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
@@ -2333,6 +2343,15 @@ discontinuous-range at 1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
+dnd-core@^4.0.5:
+ version "4.0.5"
+ resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-4.0.5.tgz#3b83d138d0d5e265c73ec978dec5e1ed441dc665"
+ dependencies:
+ asap "^2.0.6"
+ invariant "^2.2.4"
+ lodash "^4.17.10"
+ redux "^4.0.0"
+
dns-equal@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -3752,7 +3771,7 @@ interpret@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
-invariant@^2.0.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
dependencies:
@@ -6353,6 +6372,26 @@ react-dev-utils@^5.0.2:
strip-ansi "3.0.1"
text-table "0.2.0"
+react-dnd-html5-backend at 5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-5.0.1.tgz#0b578d79c5c01317c70414c8d717f632b919d4f1"
+ dependencies:
+ autobind-decorator "^2.1.0"
+ dnd-core "^4.0.5"
+ lodash "^4.17.10"
+ shallowequal "^1.0.2"
+
+react-dnd@*, react-dnd at 5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-5.0.0.tgz#c4a17c70109e456dad8906be838e6ee8f32b06b5"
+ dependencies:
+ dnd-core "^4.0.5"
+ hoist-non-react-statics "^2.5.0"
+ invariant "^2.1.0"
+ lodash "^4.17.10"
+ recompose "^0.27.1"
+ shallowequal "^1.0.2"
+
react-dom at 16.5.2:
version "16.5.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
@@ -6609,6 +6648,17 @@ readdirp@^2.0.0:
react-lifecycles-compat "^3.0.2"
symbol-observable "^1.0.4"
+recompose@^0.27.1:
+ version "0.27.1"
+ resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.1.tgz#1a49e931f183634516633bbb4f4edbfd3f38a7ba"
+ dependencies:
+ babel-runtime "^6.26.0"
+ change-emitter "^0.1.2"
+ fbjs "^0.8.1"
+ hoist-non-react-statics "^2.3.1"
+ react-lifecycles-compat "^3.0.2"
+ symbol-observable "^1.0.4"
+
recompose@^0.29.0:
version "0.29.0"
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.29.0.tgz#f1a4e20d5f24d6ef1440f83924e821de0b1bccef"
@@ -7113,6 +7163,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
inherits "^2.0.1"
safe-buffer "^5.0.1"
+shallowequal@^1.0.2:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list