@helpscout/hsds-react/components/Sortable/Sortable.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.arrayMove = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Sortable = _interopRequireDefault(require("./Sortable.DragHandle"));

var _Sortable2 = _interopRequireDefault(require("./Sortable.Item"));

var _Sortable3 = _interopRequireDefault(require("./Sortable.List"));

var _arrayMove = _interopRequireDefault(require("../../utilities/arrayMove.lib"));

exports.arrayMove = _arrayMove.default;

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var Sortable = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Sortable, _React$PureComponent);

  function Sortable(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.state = {
      items: []
    };
    _this.onSortEnd = _this.onSortEnd.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  var _proto = Sortable.prototype;

  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
    this.remapChildrenToState();
  };

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    /* Note: There are tests for this, but for some reason, Istanbul isn't
     * picking it up */
    if (this.props.children !== nextProps.children) {
      this.remapChildrenToState(nextProps.children);
    }
  };

  _proto.remapChildrenToState = function remapChildrenToState(children) {
    if (children === void 0) {
      children = this.props.children;
    }

    if (!children) return;

    var items = _react.default.Children.map(children, function (child, index) {
      var sortableElement = child.type.displayName && child.type.displayName.includes('sortableElement');
      var key = child.props.id ? child.props.id : "item-" + index;

      if (sortableElement) {
        return /*#__PURE__*/_react.default.cloneElement(child, {
          index: index,
          key: key
        });
      }

      var childProps = child.props.sortable !== undefined ? {
        sortable: true
      } : {};
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sortable2.default, {
        index: index,
        children: /*#__PURE__*/_react.default.cloneElement(child, childProps)
      }, key);
    });

    this.setState({
      items: items
    });
  } // Based on the implementation of react-sortable-hoc
  // https://github.com/clauderic/react-sortable-hoc/#basic-example
  ;

  _proto.onSortEnd = function onSortEnd(_ref, event) {
    var oldIndex = _ref.oldIndex,
        newIndex = _ref.newIndex,
        collection = _ref.collection;
    this.setState({
      items: (0, _arrayMove.default)(this.state.items, oldIndex, newIndex)
    });

    if (this.props.onSortEnd) {
      this.props.onSortEnd({
        oldIndex: oldIndex,
        newIndex: newIndex,
        collection: collection
      }, event);
    }
  };

  _proto.render = function render() {
    var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        useDragHandle = _this$props.useDragHandle,
        helperClass = _this$props.helperClass,
        onSortEnd = _this$props.onSortEnd,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "children", "useDragHandle", "helperClass", "onSortEnd"]);
    var items = this.state.items;
    var componentClassName = (0, _classnames.default)('c-Sortable', className);
    var helperClassName = (0, _classnames.default)('is-sorting', helperClass);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: componentClassName,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sortable3.default, (0, _extends2.default)({
        "data-cy": "SortableList",
        dragHandle: useDragHandle,
        helperClass: helperClassName,
        items: items,
        onSortEnd: this.onSortEnd,
        useDragHandle: useDragHandle
      }, rest))
    });
  };

  return Sortable;
}(_react.default.PureComponent);

Sortable.DragHandle = _Sortable.default;
Sortable.Item = _Sortable2.default;
Sortable.List = _Sortable3.default;
Sortable.defaultProps = {
  'data-cy': 'Sortable',
  onSortStart: noop,
  onSortMove: noop,
  onSortEnd: noop
};
Sortable.propTypes = {
  /** Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy` */
  axis: _propTypes.default.oneOf(['x', 'y', 'xy']),

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop. */
  distance: _propTypes.default.number,

  /** Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. */
  getContainer: _propTypes.default.func,

  /** Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L58) for more details */
  getHelperDimensions: _propTypes.default.func,

  /** You can provide a class you'd like to add to the sortable helper to add some styles to it */
  helperClass: _propTypes.default.string,

  /** Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling. */
  hideSortableGhost: _propTypes.default.bool,

  /** If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop */
  lockAxis: _propTypes.default.string,

  /** You can lock movement of the sortable element to it's parent `SortableContainer` */
  lockToContainerEdges: _propTypes.default.bool,

  /** When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the _top_ of the container vs the _bottom_, you may also pass in an `array` (For example: `["0%", "100%"]`). */
  lockOffset: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.number)])]),

  /** If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the distance prop. */
  pressDelay: _propTypes.default.number,

  /** Number of pixels of movement to tolerate before ignoring a press event. */
  pressThreshold: _propTypes.default.number,

  /** Callback that get's invoked when sorting begins. `function({node, index, collection}, event)` */
  onSortStart: _propTypes.default.func,

  /** Callback that get's invoked during sorting as the cursor moves. `function(event)` */
  onSortMove: _propTypes.default.func,

  /** Callback that get's invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)` */
  onSortEnd: _propTypes.default.func,

  /** This function get's invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`. */
  shouldCancelStart: _propTypes.default.func,

  /** If you're using the `SortableHandle` HOC, set this to `true` */
  useDragHandle: _propTypes.default.bool,

  /** If you want, you can set the `window` as the scrolling container */
  useWindowAsScrollContainer: _propTypes.default.bool,

  /** The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions */
  transitionDuration: _propTypes.default.number,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Sortable;
exports.default = _default;