es-grid-template/es/grid-component/Command.js

es-grid-template

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { Fragment, useState } from "react";
import classnames from "classnames";
import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
// useClick
} from "@floating-ui/react";
// import {Button} from "antd";
import styled from "styled-components";
import { getTemplate } from "./hooks";
const TooltipStyle = styled.div.withConfig({
  displayName: "TooltipStyle",
  componentId: "es-grid-template__sc-1iotu11-0"
})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
const Command = props => {
  const {
    item,
    onClick
  } = props;
  const [isOpen, setIsOpen] = useState(false);
  const {
    refs,
    floatingStyles,
    context
  } = useFloating({
    open: isOpen,
    onOpenChange: setIsOpen,
    placement: "top",
    whileElementsMounted: autoUpdate,
    middleware: [offset(5), flip({
      fallbackAxisSideDirection: "start"
    }), shift()]
  });
  const hover = useHover(context, {
    move: false
  });
  const focus = useFocus(context);
  const dismiss = useDismiss(context);
  const role = useRole(context, {
    role: "tooltip"
  });
  const {
    getReferenceProps,
    getFloatingProps
  } = useInteractions([hover, focus, dismiss, role]);
  return /*#__PURE__*/React.createElement(Fragment, null, item.template ? /*#__PURE__*/React.createElement("div", _extends({
    ref: refs.setReference
  }, getReferenceProps(), {
    id: item.id,
    onClick: onClick
  }), getTemplate(item.template)) : /*#__PURE__*/React.createElement("div", _extends({
    ref: refs.setReference
  }, getReferenceProps(), {
    tabIndex: -1,
    style: {
      padding: '3px',
      maxWidth: 45,
      height: '100%',
      display: 'flex',
      cursor: 'pointer'
    },
    className: classnames('command-item', {
      'btn-icon': item.title === ''
    }),
    color: item.color ? item.color : 'primary',
    onClick: onClick
  }), item.icon ? getTemplate(item.icon) : item.title)

  // <span>{item.title}</span>
  , isOpen && item.tooltip && /*#__PURE__*/React.createElement(FloatingPortal, {
    root: document.body
  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
    className: "Tooltip",
    ref: refs.setFloating,
    style: {
      ...floatingStyles,
      zIndex: 1999
    }
  }, getFloatingProps()), item.tooltip)));
};
export default Command;