"use strict";

exports.__esModule = true;
exports["default"] = exports.DragHandle = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _flex = _interopRequireDefault(require("../../../templates/flex"));
var _icon = require("../../../icon");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var HandleContainer = (0, _styledComponents["default"])(_flex["default"]).withConfig({
  displayName: "dragHandle__HandleContainer",
  componentId: "sc-f24rhb-0"
})(["cursor:grab;opacity:0;transition:opacity 0.15s ease-in-out;flex-shrink:0;&:active{cursor:grabbing;}svg{width:10px;height:10px;}"]);
var DragHandle = exports.DragHandle = function DragHandle(_ref) {
  var dragHandleProps = _ref.dragHandleProps,
    visible = _ref.visible;
  if (!dragHandleProps || Object.keys(dragHandleProps).length === 0) {
    return null;
  }
  return /*#__PURE__*/_react["default"].createElement(HandleContainer, _extends({}, dragHandleProps, {
    alignItems: "center",
    justifyContent: "center",
    padding: [0, 1, 0, 0],
    style: {
      opacity: visible ? 1 : undefined
    },
    className: "drag-handle"
  }), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
    name: "hamburger",
    color: "textLite"
  }));
};
var _default = exports["default"] = DragHandle;