How to use react-sortable-hoc - 10 common examples

import PaperCut from './PaperCut';
import TitleHeading from './TitleHeading';
import Note from './Note';

import {
  faGripLines,
  faPen,
  faTrash,
  faArrowAltCircleLeft,
  faArrowAltCircleRight
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const InsertPoint = (({ text }) =&gt; <span style="{">  {text} </span>);

const DragHandle = sortableHandle(() =&gt; <span>  </span>);

const SortableItem = sortableElement(({ value, index, type, handleDelete, handleEdit }) =&gt; {
  return (<li>
    
      
        
      
      
        {value}
      
      
        {/* TODO: if paper-cut  then don't show edit/pen icon */}
        {type !== 'paper-cut' &amp;&amp; type !== 'insert-point' ?  { handleEdit(index); } } /&gt; : null}

      
      </li>

import { connect } from 'react-redux';
import { toggleModal } from 'redactions/modal';
import { toggleTooltip, setTooltipPosition } from 'redactions/tooltip';
import { setLayerGroupOpacity } from 'redactions/explore';

// Components
import LegendType from 'components/ui/LegendType';
import Icon from 'components/ui/Icon';
import LayerInfoModal from 'components/modal/LayerInfoModal';
import LayersTooltip from 'components/app/explore/LayersTooltip';
import SliderTooltip from 'components/app/explore/SliderTooltip';
import Button from 'components/ui/Button';

const TIMELINE_INTERVAL_TIMER = 3000;

const SortableItem = SortableElement(({ value }) => value);

const DragHandle = SortableHandle(() => (
  <span>
    
  </span>
));

const SortableList = SortableContainer(({ items }) =&gt; (
  <ul>
    {items.map((value, index) =&gt;
      
    )}
  </ul>
));

class Legend extends React.PureComponent {

handleTabSequence = _props.handleTabSequence;

      if (oldIndex === newIndex) {
        if (activeIndex !== oldIndex) {
          handleTabChange(oldIndex);
        }
      } else {
        handleTabSequence({ oldIndex: oldIndex, newIndex: newIndex });
      }
    }
  }]);
  return SortMethod;
}(Component);

//      
var DragTabContainer = SortableContainer(function (_ref) {
  var children = _ref.children;

  return createElement(
    'div',
    { style: { marginTop: '50px' } },
    children
  );
});

var ModalTabListWrapper = function (_SortMethod) {
  inherits(ModalTabListWrapper, _SortMethod);

  function ModalTabListWrapper() {
    classCallCheck(this, ModalTabListWrapper);
    return possibleConstructorReturn(this, (ModalTabListWrapper.__proto__ || Object.getPrototypeOf(ModalTabListWrapper)).apply(this, arguments));
  }

settings?: SettingsResponse
    sorted?: string[][]
    stats?: StatDescription[]
}

interface Props {
    onUpdate: () => void
}

//  Component which uses drag-n-drop activation when clicking inside the component
const DragHandle = SortableHandle(({style}) => (
    < span style={{...style, ...{cursor: " move "}}}> {" ::: "} )
)

// Universal component for turning a TableBody into a sortable container
const TableBodySortable = SortableContainer(({children, displayRowCheckbox}) => (
    
        {children}
    
))

const Row = SortableElement(({name, children}) => {
    return (
        
            
                
            
            
                {children}
            
        
    )

import './index.scss';

const ExtensionMap = {
  [Assets.extensionName]: Assets,
  [Aliyun.extensionName]: Aliyun,
  [Def.extensionName]: Def,
  [Git.extensionName]: Git,
  [Dependencies.extensionName]: Dependencies,
  [Layouts.extensionName]: Layouts,
  [Pages.extensionName]: Pages,
  [Proxies.extensionName]: Proxies,
  [Todo.extensionName]: Todo,
};

// eslint-disable-next-line babel/new-cap
const DragHandle = SortableHandle(() => (
  <span>
));
// eslint-disable-next-line babel/new-cap
const SortableExtensionItem = SortableElement(
  ({ Component, isSorting, props }) =&gt; {
    return (
      <div>
        
        
      </div>
    );</span>

import { getChartSettings } from "../../../../Requests/Player/getPlayStyle"
import { getStatsList } from "../../../../Requests/Replay"
import { LoadableWrapper } from "../../../Shared/LoadableWrapper"

interface State {
    settings?: SettingsResponse
    sorted?: string[][]
    stats?: StatDescription[]
}

interface Props {
    onUpdate: () => void
}

//  Component which uses drag-n-drop activation when clicking inside the component
const DragHandle = SortableHandle(({style}) => (
    < span style={{...style, ...{cursor: " move "}}}> {" ::: "} )
)

// Universal component for turning a TableBody into a sortable container
const TableBodySortable = SortableContainer(({children, displayRowCheckbox}) => (
    
        {children}
    
))

const Row = SortableElement(({name, children}) => {
    return (

import Interval from "../interval/interval";
import Icon from "../icon/icon";
import { ICONS, NOTES } from "../../constants";

const DragHandle = sortableHandle(() => (
  <span>
    
  </span>
));

const SortableInterval = sortableElement(({ value }) =&gt; (
  <section>
    
  </section>
));
const SortableIntervalContainer = sortableContainer(({ children }) =&gt; (
  <ul>{children}</ul>
));

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest function.
  useEffect(() =&gt; {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() =&gt; {
    function tick() {
      savedCallback.current();
    }

function LayerManagerFactory(AddDataButton, LayerPanel, SourceDataCatalog) {
  // By wrapping layer panel using a sortable element we don't have to implement the drag and drop logic into the panel itself;
  // Developers can provide any layer panel implementation and it will still be sortable
  const SortableItem = sortableElement(({children, isSorting}) => {
    return (
      
        {children}
      
    );
  });

  const SortableContainer = sortableContainer(({children}) => {
    return <div>{children}</div>;
  });

  return class LayerManager extends Component {
    static propTypes = {
      datasets: PropTypes.object.isRequired,
      layerBlending: PropTypes.string.isRequired,
      layerClasses: PropTypes.object.isRequired,
      layers: PropTypes.arrayOf(PropTypes.any).isRequired,
      // functions
      addLayer: PropTypes.func.isRequired,
      layerColorUIChange: PropTypes.func.isRequired,
      layerConfigChange: PropTypes.func.isRequired,
      layerTextLabelChange: PropTypes.func.isRequired,
      layerVisualChannelConfigChange: PropTypes.func.isRequired,
      layerTypeChange: PropTypes.func.isRequired,

import { sortableContainer, sortableElement } from "react-sortable-hoc";
import { List, AutoSizer } from "react-virtualized";
import VirtualLayers from "./VirtualLayers.jsx";
import arrayMove from "array-move";
import GeoJSON from "ol/format/GeoJSON.js";

// CUSTOM
import "./Layers.css";
import * as helpers from "../../../helpers/helpers";
import * as TOCHelpers from "./TOCHelpers.jsx";
import FloatingMenu, { FloatingMenuItem } from "../../../helpers/FloatingMenu.jsx";
import { Item as MenuItem } from "rc-menu";
import Portal from "../../../helpers/Portal.jsx";
import TOCConfig from "./TOCConfig.json";

const SortableVirtualList = sortableContainer(VirtualLayers, { withRef: true });

class Layers extends Component {
  constructor(props) {
    super(props);

    this.storageKey = "layers";
    this.lastPosition = null;
    this.virtualId = "sc-toc-virtual-layers";
    this.state = {
      allLayers: {},
      layers: []
    };

    // LISTEN FOR MAP TO MOUNT
    window.emitter.addListener("mapLoaded", () => this.onMapLoad());

import { isFunction, wrap } from 'lodash';
import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';

import './style.less';

export const DragHandle = sortableHandle(({ className, ...restProps }) => (
  <div>
));

export const SortableContainerWrapper = sortableContainer(({ children }) =&gt; children);

export const SortableElement = sortableElement(({ children }) =&gt; children);

export function SortableContainer({ disabled, containerComponent, containerProps, children, ...wrapperProps }) {
  const containerRef = useRef();
  const [isDragging, setIsDragging] = useState(false);

  wrapperProps = { ...wrapperProps };
  containerProps = { ...containerProps };

  if (disabled) {
    // Disabled state:
    // - forbid drag'n'drop (and therefore no need to hook events
    // - don't override anything on container element
    wrapperProps.shouldCancelStart = () =&gt; true;
  } else {
    // Enabled state:
</div>