@lyra/components/lib/lists/sortable-factories.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.createSortableList = createSortableList;
exports.createSortableItem = createSortableItem;
exports.createDragHandle = createDragHandle;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactSortableHoc = require('react-sortable-hoc');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/*:: type ValidAxis = 'x' | 'y' | 'xy'*/
/*:: type ListProps = {
  className: string,
  movingItemClass: string,
  useDragHandle: boolean,
  onSortEnd: ({oldIndex: number, newIndex: number}) => void,
  onSortStart: () => void,
  distance: number,
  lockToContainerEdges: boolean,
  transitionDuration: number,
  axis: ValidAxis,
  lockAxis: ValidAxis
}*/
function createSortableList(element /*: Element*/) {
  // Delegate to SortableContainer from react-sortable-hoc
  const Sortable = (0, _reactSortableHoc.SortableContainer)(element);

  return class SortableList extends _react2.default.Component /*:: <ListProps>*/ {
    constructor(...args) {
      var _temp;

      return _temp = super(...args), this.handleSortStart = (_ignore /*{node, index, collection}*/, event) => {
        const onSortStart = this.props.onSortStart;

        event.preventDefault();
        if (onSortStart) {
          onSortStart();
        }
      }, _temp;
    }

    render() {
      var _props = this.props;

      const movingItemClass = _props.movingItemClass,
            distance = _props.distance,
            useDragHandle = _props.useDragHandle,
            lockToContainerEdges = _props.lockToContainerEdges,
            axis = _props.axis,
            lockAxis = _props.lockAxis,
            transitionDuration = _props.transitionDuration,
            onSortStart = _props.onSortStart,
            onSortEnd = _props.onSortEnd,
            onSort = _props.onSort,
            helperClass = _props.helperClass,
            pressDelay = _props.pressDelay,
            pressThreshold = _props.pressThreshold,
            shouldCancelStart = _props.shouldCancelStart,
            onSortMove = _props.onSortMove,
            useWindowAsScrollContainer = _props.useWindowAsScrollContainer,
            hideSortableGhost = _props.hideSortableGhost,
            lockOffset = _props.lockOffset,
            getContainer = _props.getContainer,
            getHelperDimensions = _props.getHelperDimensions,
            rest = _objectWithoutProperties(_props, ['movingItemClass', 'distance', 'useDragHandle', 'lockToContainerEdges', 'axis', 'lockAxis', 'transitionDuration', 'onSortStart', 'onSortEnd', 'onSort', 'helperClass', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'onSortMove', 'useWindowAsScrollContainer', 'hideSortableGhost', 'lockOffset', 'getContainer', 'getHelperDimensions']);

      return _react2.default.createElement(Sortable, _extends({}, rest, {
        onSortStart: this.handleSortStart,
        onSortEnd: onSortEnd,
        distance: distance,
        helperClass: movingItemClass,
        lockToContainerEdges: lockToContainerEdges,
        transitionDuration: transitionDuration,
        axis: axis,
        lockAxis: lockAxis,
        useDragHandle: useDragHandle
      }));
    }
  };
}

/*:: type ItemProps = {
  index: number
}*/
function createSortableItem(element /*: Element*/) {
  const Sortable = (0, _reactSortableHoc.SortableElement)(element);
  // Delegate to SortableElement from react-sortable-hoc
  return function SortableItem(props /*: ItemProps*/) {
    const collection = props.collection,
          disabled = props.disabled,
          index = props.index,
          rest = _objectWithoutProperties(props, ['collection', 'disabled', 'index']);

    return _react2.default.createElement(Sortable, _extends({ index: index }, rest));
  };
}

function createDragHandle(element /*: Element*/) {
  return (0, _reactSortableHoc.SortableHandle)(element);
}