@sanity/form-builder/lib/inputs/arrays/common/sortable.js

Sanity form builder

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MOVING_ITEM_CLASS_NAME = exports.DRAG_HANDLE_ATTRIBUTE = void 0;
exports.sortableGrid = sortableGrid;
exports.sortableHandle = sortableHandle;
exports.sortableItem = sortableItem;
exports.sortableList = sortableList;
var _react = _interopRequireDefault(require("react"));
var _reactSortableHoc = require("react-sortable-hoc");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
var MOVING_ITEM_CLASS_NAME = 'moving';
exports.MOVING_ITEM_CLASS_NAME = MOVING_ITEM_CLASS_NAME;
var DRAG_HANDLE_ATTRIBUTE = 'data-drag-handle';

// higher order components to make a sortable list/item components
exports.DRAG_HANDLE_ATTRIBUTE = DRAG_HANDLE_ATTRIBUTE;
function sortableHandle(Component) {
  return (0, _reactSortableHoc.SortableHandle)(Component);
}

// Wrapper to avoid accidental leaking of react-sortable-hoc props
function sortableItem(Component) {
  return (0, _reactSortableHoc.SortableElement)(Component);
}

// Wrapper to avoid accidental leaking of react-sortable-hoc props
function sortableContainer(Component, options) {
  var Container = (0, _reactSortableHoc.SortableContainer)( /*#__PURE__*/_react.default.forwardRef(function Sortable(props, forwardedRef) {
    return /*#__PURE__*/_react.default.createElement(Component, _extends({}, props, {
      ref: forwardedRef
    }));
  })); // there are some wonky typings from react-sortable-hoc

  return /*#__PURE__*/_react.default.forwardRef(function SortableList(props, ref) {
    return /*#__PURE__*/_react.default.createElement(Container, _extends({}, props, options, {
      ref: ref
    }));
  });
}
var KeyCode = {
  Space: 32,
  Enter: 13,
  Esc: 27,
  Up: 38,
  Left: 37,
  Right: 39,
  Down: 40
};
var KEYCODES = {
  lift: [KeyCode.Space, KeyCode.Enter],
  drop: [KeyCode.Space, KeyCode.Enter],
  cancel: [KeyCode.Esc],
  up: [KeyCode.Left, KeyCode.Up],
  down: [KeyCode.Right, KeyCode.Down]
};
function sortableGrid(Component) {
  return sortableContainer(Component, {
    helperClass: MOVING_ITEM_CLASS_NAME,
    keyCodes: KEYCODES,
    axis: 'xy',
    lockAxis: 'xy',
    useDragHandle: true,
    shouldCancelStart
  });
}
function sortableList(Component) {
  return sortableContainer(Component, {
    helperClass: MOVING_ITEM_CLASS_NAME,
    keyCodes: KEYCODES,
    axis: 'y',
    lockAxis: 'y',
    useDragHandle: true,
    shouldCancelStart
  });
}

// Cancel sorting if the event target is not drag handle
function shouldCancelStart(event) {
  return !isDragHandle(event.target);
}
function isDragHandle(element) {
  return element.matches("[".concat(DRAG_HANDLE_ATTRIBUTE, "=\"true\"],[").concat(DRAG_HANDLE_ATTRIBUTE, "=\"true\"] *"));
}