ze-react-component-library/es/components/Entity/index.js

ZeroETP React Component Library

import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import "antd/es/drawer/style";
import _Drawer from "antd/es/drawer";
import "antd/es/empty/style";
import _Empty from "antd/es/empty";
import React, { useState } from "react";
import ZECard from "../../ZECard";

var Entity = function Entity(props) {
  var _a;

  var _open = props.open,
      children = props.children,
      property = props.property,
      entityIDProperty = props.entityIDProperty,
      entityNameProperty = props.entityNameProperty,
      entity = props.entity,
      _b = props.entityTooltipCardProps,
      entityTooltipCardProps = _b === void 0 ? {} : _b,
      _c = props.showRefDetail,
      showRefDetail = _c === void 0 ? true : _c;

  var _d = useState(_open),
      open = _d[0],
      setOpen = _d[1];

  var useMobileDetect = require("use-mobile-detect-hook");

  var isMobile = (_a = useMobileDetect()) === null || _a === void 0 ? void 0 : _a.isMobile();
  if (!entity) return /*#__PURE__*/React.createElement("div", null, "-");
  var extra = null;

  if (entityTooltipCardProps === null || entityTooltipCardProps === void 0 ? void 0 : entityTooltipCardProps.extra) {
    extra = entityTooltipCardProps.extra(entity, property.schema);
  }

  var entityID = entity[entityIDProperty.name];
  var entityName = entity[entityNameProperty.name];

  var renderPopContent = function renderPopContent(showMainContentOnly) {
    var _a;

    var defaultContent = /*#__PURE__*/React.createElement(React.Fragment, null, !property ? /*#__PURE__*/React.createElement(_Empty, null) : /*#__PURE__*/React.createElement(ZECard, {
      extra: isMobile ? undefined : extra,
      bodyStyle: isMobile ? {} : {
        height: (entityTooltipCardProps === null || entityTooltipCardProps === void 0 ? void 0 : entityTooltipCardProps.height) || 400,
        width: (entityTooltipCardProps === null || entityTooltipCardProps === void 0 ? void 0 : entityTooltipCardProps.width) || 550,
        overflow: "auto"
      },
      showVisualizer: false,
      title: isMobile ? undefined : entityName,
      key: entityID,
      showMainContentOnly: isMobile || showMainContentOnly,
      logicform: {
        schema: property.ref,
        query: (_a = {}, _a[entityIDProperty.name] = entityID, _a),
        entity_id: entityID
      },
      detailProps: {
        showRefDetail: showRefDetail
      }
    }));

    if (entityTooltipCardProps.customComponent) {
      return entityTooltipCardProps.customComponent(entity, property.schema, defaultContent);
    }

    return defaultContent;
  };

  if (isMobile) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
      onClick: function onClick() {
        setOpen(true);
      }
    }, children), /*#__PURE__*/React.createElement(_Drawer, {
      footer: false,
      title: entityName,
      extra: extra,
      open: open,
      zIndex: 999,
      width: "100%",
      destroyOnClose: true,
      onClose: function onClose() {
        setOpen(false);
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        padding: "0 12px"
      }
    }, renderPopContent())));
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
    onClick: function onClick() {
      setOpen(true);
    }
  }, children), /*#__PURE__*/React.createElement(_Modal, {
    centered: true,
    footer: false,
    title: /*#__PURE__*/React.createElement(React.Fragment, null, entityName, /*#__PURE__*/React.createElement("div", {
      style: {
        position: "absolute",
        right: 48,
        top: 12
      }
    }, extra)),
    open: open,
    zIndex: 999,
    width: "calc(100vw - 48px)",
    bodyStyle: {
      height: "calc(100vh - 113px)",
      overflowY: "scroll"
    },
    destroyOnClose: true,
    onCancel: function onCancel() {
      setOpen(false);
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "0 12px"
    }
  }, renderPopContent(true))));
};

export default Entity;