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

ZeroETP React Component Library

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/modal/style");

var _modal = _interopRequireDefault(require("antd/lib/modal"));

require("antd/lib/drawer/style");

var _drawer = _interopRequireDefault(require("antd/lib/drawer"));

require("antd/lib/empty/style");

var _empty = _interopRequireDefault(require("antd/lib/empty"));

var _react = _interopRequireWildcard(require("react"));

var _ZECard = _interopRequireDefault(require("../../ZECard"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 = (0, _react.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.default.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.default.createElement(_react.default.Fragment, null, !property ? /*#__PURE__*/_react.default.createElement(_empty.default, null) : /*#__PURE__*/_react.default.createElement(_ZECard.default, {
      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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
      onClick: function onClick() {
        setOpen(true);
      }
    }, children), /*#__PURE__*/_react.default.createElement(_drawer.default, {
      footer: false,
      title: entityName,
      extra: extra,
      open: open,
      zIndex: 999,
      width: "100%",
      destroyOnClose: true,
      onClose: function onClose() {
        setOpen(false);
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        padding: "0 12px"
      }
    }, renderPopContent())));
  }

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
    onClick: function onClick() {
      setOpen(true);
    }
  }, children), /*#__PURE__*/_react.default.createElement(_modal.default, {
    centered: true,
    footer: false,
    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, entityName, /*#__PURE__*/_react.default.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.default.createElement("div", {
    style: {
      padding: "0 12px"
    }
  }, renderPopContent(true))));
};

var _default = Entity;
exports.default = _default;