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); }
import React from "react";
import styled from "styled-components";
import Flex from "../../../templates/flex";
import { Icon } from "../../../icon";
var HandleContainer = styled(Flex).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;}"]);
export var DragHandle = function DragHandle(_ref) {
  var dragHandleProps = _ref.dragHandleProps,
    visible = _ref.visible;
  if (!dragHandleProps || Object.keys(dragHandleProps).length === 0) {
    return null;
  }
  return /*#__PURE__*/React.createElement(HandleContainer, _extends({}, dragHandleProps, {
    alignItems: "center",
    justifyContent: "center",
    padding: [0, 1, 0, 0],
    style: {
      opacity: visible ? 1 : undefined
    },
    className: "drag-handle"
  }), /*#__PURE__*/React.createElement(Icon, {
    name: "hamburger",
    color: "textLite"
  }));
};
export default DragHandle;