Merge branch 'master' into keyboard-sorting

Author: b-ryu

CHANGELOG.md

@@ -2,35 +2,63 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-<a name="1.8.0"></a>
-# [1.8.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.8.0) (2019-03-18)
+<a name="1.8.3"></a>
 
+## [1.8.3](https://github.com/clauderic/react-sortable-hoc/compare/v1.8.2...v1.8.3) (2019-03-20)
 
 ### Bug Fixes
 
-* added prop-types to peerDependencies ([0e855c5](https://github.com/clauderic/react-sortable-hoc/commit/0e855c5))
-* copy canvas content into cloned node ([43ad122](https://github.com/clauderic/react-sortable-hoc/commit/43ad122))
-* get updated index after updateBeforeSortStart ([4471a0a](https://github.com/clauderic/react-sortable-hoc/commit/4471a0a))
-* helperContainer PropType definition broke server-side rendering ([#471](https://github.com/clauderic/react-sortable-hoc/issues/471)) ([c0eef97](https://github.com/clauderic/react-sortable-hoc/commit/c0eef97))
-* invalid helperContainer PropType definition ([#493](https://github.com/clauderic/react-sortable-hoc/issues/493)) ([dc1d18f](https://github.com/clauderic/react-sortable-hoc/commit/dc1d18f))
-* lock axis story should not use lockToContainerEdges ([db1d3a9](https://github.com/clauderic/react-sortable-hoc/commit/db1d3a9))
-* omit disableAutoscroll prop ([#502](https://github.com/clauderic/react-sortable-hoc/issues/502)) ([e994e73](https://github.com/clauderic/react-sortable-hoc/commit/e994e73))
-* omit spreading helperContainer prop ([#497](https://github.com/clauderic/react-sortable-hoc/issues/497)) ([12bafdf](https://github.com/clauderic/react-sortable-hoc/commit/12bafdf))
-* overflow bug while dragging an item upwards in a grid ([1a2c87e](https://github.com/clauderic/react-sortable-hoc/commit/1a2c87e))
-* replace process.env.NODE_ENV in UMD builds ([16135df](https://github.com/clauderic/react-sortable-hoc/commit/16135df))
-* update helperContainer prop type definition ([#491](https://github.com/clauderic/react-sortable-hoc/issues/491)) ([fd30383](https://github.com/clauderic/react-sortable-hoc/commit/fd30383))
-* updated the behaviour of disabled elements ([bd3d041](https://github.com/clauderic/react-sortable-hoc/commit/bd3d041))
-* virtualized collection grid bug ([a57975c](https://github.com/clauderic/react-sortable-hoc/commit/a57975c))
-
+- issue with windowAsScrollContainer and translation offsets ([0391e62](https://github.com/clauderic/react-sortable-hoc/commit/0391e62))
 
 ### Features
 
-* Add disableAutoscroll prop ([#484](https://github.com/clauderic/react-sortable-hoc/issues/484)) ([7845e76](https://github.com/clauderic/react-sortable-hoc/commit/7845e76))
-* added helperContainer prop ([286eff4](https://github.com/clauderic/react-sortable-hoc/commit/286eff4))
-* allow helperContainer prop to be a function returning an HTMLElement ([#489](https://github.com/clauderic/react-sortable-hoc/issues/489)) ([f4a9b4a](https://github.com/clauderic/react-sortable-hoc/commit/f4a9b4a))
-* Detect scroll container automatically ([#507](https://github.com/clauderic/react-sortable-hoc/issues/507)) ([6572921](https://github.com/clauderic/react-sortable-hoc/commit/6572921))
+- Add disableAutoscroll prop ([#484](https://github.com/clauderic/react-sortable-hoc/issues/484)) ([7845e76](https://github.com/clauderic/react-sortable-hoc/commit/7845e76))
+- added helperContainer prop ([286eff4](https://github.com/clauderic/react-sortable-hoc/commit/286eff4))
+- allow helperContainer prop to be a function returning an HTMLElement ([#489](https://github.com/clauderic/react-sortable-hoc/issues/489)) ([f4a9b4a](https://github.com/clauderic/react-sortable-hoc/commit/f4a9b4a))
+- Detect scroll container automatically ([#507](https://github.com/clauderic/react-sortable-hoc/issues/507)) ([6572921](https://github.com/clauderic/react-sortable-hoc/commit/6572921))
+
+<a name="1.8.2"></a>
+
+## [1.8.2](https://github.com/clauderic/react-sortable-hoc/compare/v1.8.1...v1.8.2) (2019-03-19)
+
+### Bug Fixes
+
+- issue with getComputedStyle and getScrollingParent ([b104249](https://github.com/clauderic/react-sortable-hoc/commit/b104249))
+
+<a name="1.8.1"></a>
+
+## [1.8.1](https://github.com/clauderic/react-sortable-hoc/compare/v1.8.0...v1.8.1) (2019-03-18)
+
+### Bug Fixes
+
+- issue with cloning canvas context of dragged items ([#512](https://github.com/clauderic/react-sortable-hoc/issues/512)) ([4df34ad](https://github.com/clauderic/react-sortable-hoc/commit/4df34ad))
+
+<a name="1.8.0"></a>
+
+# [1.8.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.8.0) (2019-03-18)
+
+### Bug Fixes
+
+- added prop-types to peerDependencies ([0e855c5](https://github.com/clauderic/react-sortable-hoc/commit/0e855c5))
+- copy canvas content into cloned node ([43ad122](https://github.com/clauderic/react-sortable-hoc/commit/43ad122))
+- get updated index after updateBeforeSortStart ([4471a0a](https://github.com/clauderic/react-sortable-hoc/commit/4471a0a))
+- helperContainer PropType definition broke server-side rendering ([#471](https://github.com/clauderic/react-sortable-hoc/issues/471)) ([c0eef97](https://github.com/clauderic/react-sortable-hoc/commit/c0eef97))
+- invalid helperContainer PropType definition ([#493](https://github.com/clauderic/react-sortable-hoc/issues/493)) ([dc1d18f](https://github.com/clauderic/react-sortable-hoc/commit/dc1d18f))
+- lock axis story should not use lockToContainerEdges ([db1d3a9](https://github.com/clauderic/react-sortable-hoc/commit/db1d3a9))
+- omit disableAutoscroll prop ([#502](https://github.com/clauderic/react-sortable-hoc/issues/502)) ([e994e73](https://github.com/clauderic/react-sortable-hoc/commit/e994e73))
+- omit spreading helperContainer prop ([#497](https://github.com/clauderic/react-sortable-hoc/issues/497)) ([12bafdf](https://github.com/clauderic/react-sortable-hoc/commit/12bafdf))
+- overflow bug while dragging an item upwards in a grid ([1a2c87e](https://github.com/clauderic/react-sortable-hoc/commit/1a2c87e))
+- replace process.env.NODE_ENV in UMD builds ([16135df](https://github.com/clauderic/react-sortable-hoc/commit/16135df))
+- update helperContainer prop type definition ([#491](https://github.com/clauderic/react-sortable-hoc/issues/491)) ([fd30383](https://github.com/clauderic/react-sortable-hoc/commit/fd30383))
+- updated the behaviour of disabled elements ([bd3d041](https://github.com/clauderic/react-sortable-hoc/commit/bd3d041))
+- virtualized collection grid bug ([a57975c](https://github.com/clauderic/react-sortable-hoc/commit/a57975c))
 
+### Features
 
+- Add disableAutoscroll prop ([#484](https://github.com/clauderic/react-sortable-hoc/issues/484)) ([7845e76](https://github.com/clauderic/react-sortable-hoc/commit/7845e76))
+- added helperContainer prop ([286eff4](https://github.com/clauderic/react-sortable-hoc/commit/286eff4))
+- allow helperContainer prop to be a function returning an HTMLElement ([#489](https://github.com/clauderic/react-sortable-hoc/issues/489)) ([f4a9b4a](https://github.com/clauderic/react-sortable-hoc/commit/f4a9b4a))
+- Detect scroll container automatically ([#507](https://github.com/clauderic/react-sortable-hoc/issues/507)) ([6572921](https://github.com/clauderic/react-sortable-hoc/commit/6572921))
 
 <a name="1.7.1"></a>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sortable-hoc",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
   "author": {
     "name": "Clauderic Demers",

src/.stories/index.js

@@ -15,6 +15,7 @@ import random from 'lodash/random';
 import classNames from 'classnames';
 
 import GroupedItems from './grouping-items';
+import InteractiveElements from './interactive-elements-stress-test';
 
 function getItems(count, height) {
   var heights = [65, 110, 140, 65, 90, 65];
@@ -792,24 +793,11 @@ storiesOf('Advanced examples | Re-rendering before sorting', module)
     );
   });
 
-storiesOf('Stress tests | Keyboard sorting', module)
-  .add('Inputs', () => (
+storiesOf('Stress Testing | Nested elements', module).add(
+  'Interactive elements',
+  () => (
     <div className={style.root}>
-        <ListWrapper
-          component={SortableList}
-          items={getItems(50, 59)}
-          helperClass={style.stylizedHelper}
-          type="input"
-        />
-      </div>
-  ))
-  .add('Links', () => (
-    <div className={style.root}>
-        <ListWrapper
-          component={SortableList}
-          items={getItems(50, 59)}
-          helperClass={style.stylizedHelper}
-          type="link"
-        />
-      </div>
-  ));
+      <InteractiveElements />
+    </div>
+  ),
+);

src/.stories/interactive-elements-stress-test/Item/Item.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {sortableElement} from '../../../../src';
+
+import styles from './Item.scss';
+
+function Item(props) {
+  const {children} = props;
+
+  return <div className={styles.root}>{children}</div>;
+}
+
+export default sortableElement(Item);

src/.stories/interactive-elements-stress-test/Item/Item.scss

@@ -0,0 +1,45 @@
+$color: #333;
+$white: #fff;
+$backgroundColor: $white;
+
+$boxShadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2);
+
+$fontWeight-regular: 400;
+$fontWeight-bold: 600;
+
+$borderRadius: 3px;
+$borderWidth: 1px;
+$borderColor: #efefef;
+
+.root {
+  display: block;
+  width: 250px;
+  padding: 20px;
+  background-color: $backgroundColor;
+  border-bottom: $borderWidth solid #efefef;
+  box-sizing: border-box;
+  user-select: none;
+
+  color: $color;
+  font-family: sans-serif;
+  font-weight: $fontWeight-regular;
+
+  > * {
+    display: block;
+    width: 100%;
+    font-size: 14px;
+  }
+
+  > input,
+  > textarea {
+    padding: 5px;
+    border: 1px solid #e0e0e0;
+    box-sizing: border-box;
+  }
+
+  label {
+    input {
+      margin-right: 0.5em;
+    }
+  }
+}

src/.stories/interactive-elements-stress-test/Item/index.js

@@ -0,0 +1,3 @@
+import Item from './Item';
+
+export default Item;

src/.stories/interactive-elements-stress-test/List.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {sortableContainer} from '../../../src';
+
+import Item from './Item';
+
+function List({items}) {
+  return (
+    <div>
+      {items.map(([key, children], index) => {
+        return (
+          <Item key={key} index={index}>
+            {children}
+          </Item>
+        );
+      })}
+    </div>
+  );
+}
+
+export default sortableContainer(List);

src/.stories/interactive-elements-stress-test/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import arrayMove from 'array-move';
+
+import SortableList from './List';
+
+const items = {
+  input: <input placeholder="Regular text input" />,
+  textarea: <textarea placeholder="Textarea input" />,
+  select: (
+    <select>
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </select>
+  ),
+  checkbox: (
+    <>
+      <label>
+        <input type="checkbox" name="checkbox" />
+        Checkbox 1
+      </label>
+      <label>
+        <input type="checkbox" name="checkbox" />
+        Checkbox 2
+      </label>
+    </>
+  ),
+  radio: (
+    <>
+      <label>
+        <input type="radio" name="option" />
+        Option 1
+      </label>
+      <label>
+        <input type="radio" name="option" />
+        Option 2
+      </label>
+    </>
+  ),
+  range: <input type="range" min="1" max="100" />,
+  contentEditable: (
+    <div
+      contentEditable
+      dangerouslySetInnerHTML={{
+        __html: 'Lorem ipsum <strong>dolor sit</strong> amet',
+      }}
+    />
+  ),
+};
+
+export default class InteractiveElements extends React.Component {
+  state = {
+    items: Object.entries(items),
+  };
+
+  render() {
+    return (
+      <SortableList
+        // The distance prop isn't strictly required for this example, but it is recommended
+        // to set it to a low value for sortable items with nested interactive elements
+        // such as clickable labels for checkbox / radio inputs
+        distance={2}
+        items={this.state.items}
+        onSortEnd={this.onSortEnd}
+      />
+    );
+  }
+
+  onSortEnd = ({oldIndex, newIndex}) => {
+    if (oldIndex === newIndex) {
+      return;
+    }
+
+    this.setState(({items}) => ({
+      items: arrayMove(items, oldIndex, newIndex),
+    }));
+  };
+}

src/SortableContainer/defaultShouldCancelStart.js

@@ -1,19 +1,23 @@
-import {NodeType} from '../utils';
+import {NodeType, closest} from '../utils';
 
 export default function defaultShouldCancelStart(event) {
   // Cancel sorting if the event target is an `input`, `textarea`, `select` or `option`
-  const disabledElements = [
+  const interactiveElements = [
     NodeType.Input,
     NodeType.Textarea,
     NodeType.Select,
     NodeType.Option,
     NodeType.Button,
   ];
 
-  if (disabledElements.indexOf(event.target.tagName) !== -1) {
+  if (interactiveElements.indexOf(event.target.tagName) !== -1) {
     // Return true to cancel sorting
     return true;
   }
 
+  if (closest(event.target, (el) => el.contentEditable === 'true')) {
+    return true;
+  }
+
   return false;
 }