From c7c486c5fa99693588c11b8f7c080f3a0c5f2512 Mon Sep 17 00:00:00 2001
From: Franco Correa <franco.correa@auth0.com>
Date: Tue, 18 Dec 2018 16:55:23 -0300
Subject: [PATCH] Sortable Resource List (#1098)

Now, the `sortable` prop can be used to make the list sortable by dragging and dropping items. You will need to implement the `onSortEnd` method in order to reorder the items using the provided `arrayMove`

![kapture 2018-12-04 at 18 22 31](https://user-images.githubusercontent.com/4152942/49473729-9bed4f80-f7f1-11e8-87c3-5638d8d95bac.gif)
---
 .../molecules/resource-list/index.js          |   3 +-
 .../molecules/resource-list/item/item.js      | 134 ++++++++++++------
 .../molecules/resource-list/resource-list.js  | 124 ++++++++++++++--
 .../molecules/resource-list/resource-list.md  |  40 ++++++
 .../resource-list/resource-list.story.js      |  81 ++++++++---
 .../resource-list/sortable-handle.js          |  55 +++++++
 core/components/package.json                  |   1 +
 yarn.lock                                     |  11 +-
 8 files changed, 365 insertions(+), 84 deletions(-)
 create mode 100644 core/components/molecules/resource-list/sortable-handle.js

diff --git a/core/components/molecules/resource-list/index.js b/core/components/molecules/resource-list/index.js
index 6ffa60240..405004362 100644
--- a/core/components/molecules/resource-list/index.js
+++ b/core/components/molecules/resource-list/index.js
@@ -1,3 +1,4 @@
-import ResourceList from './resource-list'
+import ResourceList, { arrayMove } from './resource-list'
 
 export default ResourceList
+export { arrayMove }
diff --git a/core/components/molecules/resource-list/item/item.js b/core/components/molecules/resource-list/item/item.js
index ec1cc38b0..7178ab928 100644
--- a/core/components/molecules/resource-list/item/item.js
+++ b/core/components/molecules/resource-list/item/item.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import styled, { css } from '@auth0/cosmos/styled'
 import { Button, ButtonGroup, Link } from '@auth0/cosmos'
 import Avatar, { StyledAvatar } from '@auth0/cosmos/atoms/avatar'
 import { StyledTextAllCaps } from '@auth0/cosmos/atoms/text'
@@ -9,7 +9,8 @@ import { __ICONNAMES__ } from '@auth0/cosmos/atoms/icon'
 import { colors, spacing } from '@auth0/cosmos-tokens'
 import Automation from '../../../_helpers/automation-attribute'
 import { actionToButtonProps, buttonBuilder } from '../action-builder'
-import { deprecate } from '../../../_helpers/custom-validations'
+
+const itemFocusOutline = '2px'
 
 /**
  * Builds the button from the action or
@@ -37,54 +38,79 @@ const resolveAction = (item, action, key) => {
  */
 const resolveActions = (actions, item) => actions.map(resolveAction.bind(this, item))
 
-const ListItem = props => {
-  let image
-  let title
-  let subtitle
-  let actions
+class ListItem extends React.Component {
+  constructor(props) {
+    super(props)
+    this.dragHandler = React.createRef()
+  }
+
+  renderSortingHandler() {
+    if (this.props.reorderHandle) {
+      const SortableHandler = this.props.reorderHandle
 
-  const callHandler = handler => evt => handler(evt, props.item)
+      return <SortableHandler ref={this.dragHandler} />
+    }
 
-  if (props.image) {
-    // TODO: We might want a way to control the type of the avatar, but we don't
-    // want to leak every prop from Avatar into the ListItem...
-    image = <Avatar type="resource" image={props.image} size="large" />
-  } else if (props.icon) {
-    image = <Avatar type="resource" icon={props.icon} size="large" />
+    return null
   }
 
-  if (props.title) {
-    if (props.href) {
-      title = <Link href={props.href}>{props.title}</Link>
-    } else {
-      title = props.title
+  renderImage() {
+    if (this.props.image) {
+      // TODO: We might want a way to control the type of the avatar, but we don't
+      // want to leak every prop from Avatar into the ListItem...
+      return <Avatar type="resource" image={this.props.image} size="large" />
+    } else if (this.props.icon) {
+      return <Avatar type="resource" icon={this.props.icon} size="large" />
     }
+
+    return null
   }
 
-  if (props.subtitle) {
-    subtitle = <ListItem.Subtitle>{props.subtitle}</ListItem.Subtitle>
+  renderTitle() {
+    if (this.props.title) {
+      if (this.props.href) {
+        return <Link href={this.props.href}>{this.props.title}</Link>
+      } else {
+        return this.props.title
+      }
+    }
+
+    return null
   }
 
-  if (props.actions) {
-    actions = <ButtonGroup>{resolveActions(props.actions, props.item)}</ButtonGroup>
+  renderSubtitle() {
+    return this.props.subtitle ? <ListItem.Subtitle>{this.props.subtitle}</ListItem.Subtitle> : null
   }
 
-  return (
-    <ListItem.Element
-      onClick={props.onClick ? callHandler(props.onClick) : null}
-      {...Automation('resource-list.item')}
-    >
-      <ListItem.Header>
-        {image}
-        <div>
-          {title}
-          {subtitle}
-        </div>
-      </ListItem.Header>
-      {props.children && <ListItem.Body>{props.children}</ListItem.Body>}
-      {props.actions && <ListItem.Footer>{actions}</ListItem.Footer>}
-    </ListItem.Element>
-  )
+  renderActions() {
+    return this.props.actions ? (
+      <ButtonGroup align="right">{resolveActions(this.props.actions, this.props.item)}</ButtonGroup>
+    ) : null
+  }
+
+  render() {
+    const props = this.props
+    const callHandler = handler => evt => handler(evt, props.item)
+
+    return (
+      <ListItem.Element
+        draggingMode={props.draggingMode}
+        onClick={props.onClick ? callHandler(props.onClick) : null}
+        {...Automation('resource-list.item')}
+      >
+        {this.renderSortingHandler()}
+        <ListItem.Header>
+          {this.renderImage()}
+          <div>
+            {this.renderTitle()}
+            {this.renderSubtitle()}
+          </div>
+        </ListItem.Header>
+        {props.children && <ListItem.Body>{props.children}</ListItem.Body>}
+        {props.actions && <ListItem.Footer>{this.renderActions()}</ListItem.Footer>}
+      </ListItem.Element>
+    )
+  }
 }
 
 ListItem.Element = styled.li`
@@ -95,12 +121,31 @@ ListItem.Element = styled.li`
   border-top: 1px solid ${colors.list.borderColor};
   padding: ${spacing.small} ${spacing.xsmall};
   cursor: ${props => (props.onClick ? 'pointer' : 'inherit')};
+
   &:hover {
     background: ${colors.list.backgroundHover};
   }
+
+  &.cosmos-dragging {
+    background-color: ${colors.base.white};
+    opacity: 0.9;
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
+  }
+
   > *:not(:last-child) {
     margin-right: ${spacing.small};
   }
+
+  /* Disable pointer events on non-dragging elements */
+  /* to avoid unexpected hover behaviors. */
+  ${props =>
+    props.draggingMode
+      ? css`
+          &:not(.cosmos-dragging) {
+            pointer-events: none;
+          }
+        `
+      : ''};
 `
 
 ListItem.Header = styled.div`
@@ -158,11 +203,12 @@ ListItem.propTypes = {
     const firstAction = props.actions[0]
 
     if (!React.isValidElement(firstAction)) {
-      return deprecate(props, {
-        name: 'actions',
-        oldAPI: 'passing objects in actions',
-        replacement: '<Button>'
-      })
+      // See: https://github.com/auth0/cosmos/issues/1133
+      // See: https://github.com/auth0/cosmos/issues/1222
+      console.warn(
+        'Passing objects in actions is deprecated and will be removed in Cosmos 1.0.' +
+          ' See https://github.com/auth0/cosmos/pull/1133 for more information.'
+      )
     }
   }
 }
diff --git a/core/components/molecules/resource-list/resource-list.js b/core/components/molecules/resource-list/resource-list.js
index 7f034540e..9feef0114 100644
--- a/core/components/molecules/resource-list/resource-list.js
+++ b/core/components/molecules/resource-list/resource-list.js
@@ -1,27 +1,118 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc'
 import styled from '@auth0/cosmos/styled'
 import ResourceListItem from './item'
 import { spacing } from '@auth0/cosmos-tokens'
 import { actionShapeWithRequiredIcon } from '@auth0/cosmos/_helpers/action-shape'
 import Automation from '../../_helpers/automation-attribute'
 import containerStyles from '../../_helpers/container-styles'
+import SortableListHandle from './sortable-handle'
 
-const defaultItemRenderer = item => <ResourceListItem {...item} />
-
-const ResourceList = props => (
-  <ResourceList.Element {...Automation('resource-list')}>
-    {props.items.map((item, index) => {
-      const itemRenderer = props.renderItem || defaultItemRenderer
-      return React.cloneElement(itemRenderer(item, index), {
-        key: item.key || index,
-        actions: item.actions || props.actions,
-        onClick: item.onClick || props.onItemClick,
-        item
+const ResourceList = props => {
+  const defaultItemRenderer = (item, _, index) => {
+    // We can say we are in dragging mode if there one .cosmos-dragging
+    // element in the DOM.
+    const draggingMode = document.querySelector('.cosmos-dragging')
+    return (
+      <ResourceListItem
+        index={index}
+        draggingMode={draggingMode}
+        reorderHandle={props.sortable ? SortableListHandle : null}
+        {...item}
+      />
+    )
+  }
+
+  const itemRendererBuilder = props => {
+    const {
+      item,
+      index,
+      actions,
+      renderItem,
+      onItemClick,
+      accessibilityIndex,
+      accessibilityOnSortEnd
+    } = props
+    const itemRenderer = renderItem || defaultItemRenderer
+    const actualIndex = index || accessibilityIndex
+
+    return React.cloneElement(itemRenderer(item, props, actualIndex), {
+      item,
+      key: actualIndex,
+      index: actualIndex,
+      accessibilityOnSortEnd,
+      actions: item.actions || actions,
+      onClick: item.onClick || onItemClick
+    })
+  }
+
+  const defaultChildrenRenderer = ({ items, actions, onItemClick, renderItem }) =>
+    items.map((item, index) =>
+      itemRendererBuilder({ item, index, renderItem, onItemClick, actions })
+    )
+
+  const SortableResourceListItem = SortableElement(
+    ({
+      item,
+      actions,
+      renderItem,
+      accessibilityIndex,
+      onClick: onItemClick,
+      accessibilityOnSortEnd
+    }) =>
+      itemRendererBuilder({
+        item,
+        actions,
+        renderItem,
+        accessibilityIndex,
+        onItemClick,
+        accessibilityOnSortEnd
       })
-    })}
-  </ResourceList.Element>
-)
+  )
+
+  const SortableResourceList = SortableContainer(
+    ({ items: sortableItems, actions, onItemClick, renderItem, accessibilityOnSortEnd }) => (
+      <div>
+        {sortableItems.map((item, index) => (
+          <SortableResourceListItem
+            actions={item.actions || actions}
+            onClick={item.onClick || onItemClick}
+            item={item}
+            key={index}
+            // Need to pass accessibilityIndex due to index being omitted
+            // when calling child component.
+            // See: https://github.com/clauderic/react-sortable-hoc/blob/0077f0b4e3b50f68c04672e78b6b69b8dc880d96/src/SortableElement/index.js#L89
+            accessibilityIndex={index}
+            accessibilityOnSortEnd={accessibilityOnSortEnd}
+            index={index}
+            renderItem={renderItem}
+          />
+        ))}
+      </div>
+    )
+  )
+
+  const sortableChildrenRenderer = props => {
+    return (
+      <SortableResourceList
+        {...props}
+        useDragHandle={true}
+        helperClass="cosmos-dragging"
+        accessibilityOnSortEnd={props.onSortEnd}
+      />
+    )
+  }
+
+  const resolveChildrenRenderer = props =>
+    props.sortable ? sortableChildrenRenderer(props) : defaultChildrenRenderer(props)
+
+  return (
+    <ResourceList.Element {...Automation('resource-list')}>
+      {resolveChildrenRenderer(props)}
+    </ResourceList.Element>
+  )
+}
 
 ResourceList.Element = styled.ul`
   ${containerStyles};
@@ -43,7 +134,10 @@ ResourceList.propTypes = {
   /** A function that will be called when an item is clicked. */
   onItemClick: PropTypes.func,
   /** A function that accepts an item from the items array, and returns a ResourceList.Item. */
-  renderItem: PropTypes.func
+  renderItem: PropTypes.func,
+  /** Whether the resource list will be sortable by the user or not */
+  sortable: PropTypes.bool
 }
 
 export default ResourceList
+export { arrayMove }
diff --git a/core/components/molecules/resource-list/resource-list.md b/core/components/molecules/resource-list/resource-list.md
index 43cc01943..9b99a0a60 100644
--- a/core/components/molecules/resource-list/resource-list.md
+++ b/core/components/molecules/resource-list/resource-list.md
@@ -99,3 +99,43 @@ If you need more control over the rendering of list items, you can pass a `rende
   ]}
 />
 ```
+
+## Advanced: Drag and sort items
+
+You can use the `sortable` prop to make the list sortable by dragging and dropping the items.
+You will need to implement the `onSortEnd` method in order to reorder the items using the provided
+`arrayMove` function
+
+```js
+class SortableResourceListExample extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      items: [
+        { title: 'Title One', subtitle: 'Subtitle One', href: 'https://auth0.com/' },
+        { title: 'Title Two', subtitle: 'Subtitle Two', href: 'https://auth0.com/' },
+        { title: 'Title Three', subtitle: 'Subtitle Three', href: 'https://auth0.com/' }
+      ]
+    }
+  }
+  onSortEnd({ oldIndex, newIndex }) {
+    // The arrayMove example does not work on docs
+    this.setState({
+      items: arrayMove(this.state.items, oldIndex, newIndex)
+    })
+  }
+  render() {
+    return (
+      <ResourceList
+        actions={[
+          { icon: 'settings', handler: function() {}, label: 'Settings' },
+          { icon: 'delete', handler: function() {}, label: 'Delete' }
+        ]}
+        sortable
+        items={this.state.items}
+        onSortEnd={event => this.onSortEnd(event)}
+      />
+    )
+  }
+}
+```
diff --git a/core/components/molecules/resource-list/resource-list.story.js b/core/components/molecules/resource-list/resource-list.story.js
index 3ed8b9711..e23ca13dd 100644
--- a/core/components/molecules/resource-list/resource-list.story.js
+++ b/core/components/molecules/resource-list/resource-list.story.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { Example } from '@auth0/cosmos/_helpers/story-helpers'
+import { arrayMove } from '@auth0/cosmos/molecules/resource-list'
 import { Code, ResourceList, Button } from '@auth0/cosmos'
 
 const IMAGE_URLS = [
@@ -29,6 +30,34 @@ storiesOf('Resource List', module).add('titles and subtitles', () => (
   </Example>
 ))
 
+class SortableResourceListExample extends React.Component {
+  state = {
+    items: [
+      { title: 'Title One', subtitle: 'Subtitle One', href: 'https://auth0.com/' },
+      { title: 'Title Two', subtitle: 'Subtitle Two', href: 'https://auth0.com/' },
+      { title: 'Title Three', subtitle: 'Subtitle Three', href: 'https://auth0.com/' }
+    ]
+  }
+  onSortEnd({ oldIndex, newIndex }) {
+    this.setState({
+      items: arrayMove(this.state.items, oldIndex, newIndex)
+    })
+  }
+  render() {
+    return (
+      <ResourceList
+        actions={[
+          <Button onClick={() => {}} icon="settings" label="Settings" />,
+          <Button onClick={() => {}} icon="delete" label="Delete" />
+        ]}
+        sortable
+        items={this.state.items}
+        onSortEnd={event => this.onSortEnd(event)}
+      />
+    )
+  }
+}
+
 storiesOf('Resource List', module).add('titles with links', () => (
   <Example title="default">
     <ResourceList
@@ -41,6 +70,12 @@ storiesOf('Resource List', module).add('titles with links', () => (
   </Example>
 ))
 
+storiesOf('Resource List', module).add('sortable', () => (
+  <Example title="default">
+    <SortableResourceListExample />
+  </Example>
+))
+
 storiesOf('Resource List', module).add('with images', () => (
   <Example title="default">
     <ResourceList
@@ -96,8 +131,8 @@ storiesOf('Resource List', module).add('actions', () => (
         </ResourceList.Item>
       )}
       actions={[
-        { label: 'Delete', icon: 'delete', handler: function() {} },
-        { label: 'Settings', icon: 'settings', handler: function() {} }
+        <Button icon="delete" onClick={() => {}} />,
+        <Button icon="settings" onClick={() => {}} />
       ]}
     />
   </Example>
@@ -210,13 +245,13 @@ storiesOf('Resource List', module).add('stressed - with actions', () => (
           subtitle:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula massa augue, in consectetur tellus tristique ut.',
           actions: [
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} }
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />
           ]
         },
         {
@@ -226,13 +261,13 @@ storiesOf('Resource List', module).add('stressed - with actions', () => (
           subtitle:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula massa augue, in consectetur tellus tristique ut.',
           actions: [
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} }
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />
           ]
         },
         {
@@ -242,13 +277,13 @@ storiesOf('Resource List', module).add('stressed - with actions', () => (
           subtitle:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula massa augue, in consectetur tellus tristique ut.',
           actions: [
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} },
-            { label: 'Settings', icon: 'settings', handler: function() {} }
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />,
+            <Button icon="settings" onClick={() => {}} label="Settings" />
           ]
         }
       ]}
diff --git a/core/components/molecules/resource-list/sortable-handle.js b/core/components/molecules/resource-list/sortable-handle.js
new file mode 100644
index 000000000..fd950b298
--- /dev/null
+++ b/core/components/molecules/resource-list/sortable-handle.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import styled from 'styled-components'
+import { SortableHandle } from 'react-sortable-hoc'
+import { spacing, colors } from '@auth0/cosmos-tokens'
+import Tooltip from '../../atoms/tooltip'
+import Button from '../../atoms/button'
+
+const noop = () => {}
+
+/**
+ * Notifies handle's parent when its focus state changes
+ * @param {object} props
+ * @param {function} onFocus
+ */
+const notifyFocusStatusChange = (props, onFocus) =>
+  props && props.onFocusStatusChange && props.onFocusStatusChange({ onFocus })
+
+const SortableListHandle = SortableHandle(({ onFocusStatusChange = noop } = {}) => (
+  <SortableListHandle.Element>
+    <Tooltip content="Re-order">
+      <SortableListHandle.Button
+        onFocusStatusChange={onFocusStatusChange}
+        appearance="link"
+        icon="resize-vertical"
+      />
+    </Tooltip>
+  </SortableListHandle.Element>
+))
+
+SortableListHandle.Element = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-right: ${spacing.xsmall};
+`
+
+SortableListHandle.Button = props => (
+  <SortableListHandle.Button.Element
+    onFocus={ev => notifyFocusStatusChange(props, true, ev)}
+    onBlur={ev => notifyFocusStatusChange(props, false, ev)}
+    {...props}
+  />
+)
+
+SortableListHandle.Button.Element = styled(Button)`
+  padding-left: ${spacing.xxsmall};
+  padding-right: ${spacing.xxsmall};
+  min-width: 0;
+
+  &:focus {
+    background-color: ${colors.base.grayLightest};
+  }
+`
+
+export default SortableListHandle
diff --git a/core/components/package.json b/core/components/package.json
index 21da77960..de099b546 100644
--- a/core/components/package.json
+++ b/core/components/package.json
@@ -12,6 +12,7 @@
     "@auth0/cosmos-tokens": "0.10.1",
     "md5": "^2.2.1",
     "prop-types": "15.6.1",
+    "react-sortable-hoc": "^0.8.3",
     "react-focus-lock": "^1.14.1",
     "styled-components": "3.4.10"
   },
diff --git a/yarn.lock b/yarn.lock
index de5f1263d..82f5d3da0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8930,7 +8930,7 @@ prop-types@15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -9354,6 +9354,15 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-sortable-hoc@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.8.3.tgz#8537e8ab8d6bad6829885755a0f847817ed78648"
+  integrity sha512-vt2qQ9DnPLjGZ9osM2jBULdi7WfFXtYVuHvjHX8o2em7Rcla9FXIG60aWFbvvpFC1iXyATw5PWZX0B57EUOYfQ==
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    prop-types "^15.5.7"
+
 react-split-pane@^0.1.84:
   version "0.1.84"
   resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.84.tgz#b9c1499cbc40b09cf29953ee6f5ff1039d31906e"