react-dagre-map-v2/dist/esm/DagreMap/components/card/index.js

okr align map, many-to-many relationship

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useState, useEffect } from 'react';
import "./index.css";
import { ARROW_DIR } from "../../enum";
import loadingPng from "../../images/loading.png";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var lineStyle = {
  position: 'absolute',
  height: '1px',
  backgroundColor: '#c7c7d7'
};
var circleStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  position: 'absolute',
  boxSizing: 'border-box',
  background: '#ffffff',
  border: '1px solid #7f7f8e',
  borderRadius: '50%',
  textAlign: 'center',
  fontSize: '12px',
  cursor: 'pointer'
};
var loadingStyle = {
  display: 'block',
  width: '100%',
  height: '100%',
  transformOrigin: 'center',
  animation: 'turnX 1s linear infinite'
};
var dreStyle = {
  display: 'inline-block',
  height: '1px',
  background: '#7f7f8e'
};
var numStyle = {
  fontSize: '12px',
  display: 'inline-block',
  transform: 'scale(0.8)',
  transformOrigin: '50%',
  letterSpacing: '-1px'
};

var Card = function Card(props) {
  var info = props.info,
      _props$style = props.style,
      style = _props$style === void 0 ? {} : _props$style,
      hideOrOpen = props.hideOrOpen,
      renderChild = props.renderChild,
      fieldNames = props.fieldNames,
      circleWidth = props.circleWidth,
      width = props.width,
      height = props.height;
  var uuid = info.uuid,
      rank = info.rank,
      hideUp = info.hideUp,
      hideDown = info.hideDown;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      loadingLeft = _useState2[0],
      setLoadingLeft = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      loadingRight = _useState4[0],
      setLoadingRight = _useState4[1];

  var upLength = info[fieldNames['upLength']];
  var downLength = info[fieldNames['downLength']];
  useEffect(function () {
    setLoadingLeft(false);
    setLoadingRight(false);
  }, [JSON.stringify(info)]);
  return /*#__PURE__*/_jsxs("div", {
    style: style,
    children: [renderChild(info), rank > -1 && downLength !== 0 ? /*#__PURE__*/_jsxs("div", {
      children: [/*#__PURE__*/_jsx("div", {
        style: _objectSpread({
          left: width,
          top: height / 2,
          width: circleWidth
        }, lineStyle)
      }), /*#__PURE__*/_jsx("div", {
        onClick: function onClick() {
          setLoadingLeft(true);
          hideOrOpen(info, ARROW_DIR.DOWN);
        },
        style: _objectSpread({
          width: 2 * circleWidth,
          height: 2 * circleWidth,
          left: width + circleWidth,
          top: height / 2 - circleWidth
        }, circleStyle),
        children: hideDown ? loadingLeft ? /*#__PURE__*/_jsx("img", {
          style: loadingStyle,
          src: loadingPng
        }) : /*#__PURE__*/_jsx("span", {
          style: numStyle,
          children: downLength
        }) : /*#__PURE__*/_jsx("span", {
          style: _objectSpread({
            width: circleWidth
          }, dreStyle)
        })
      })]
    }) : null, rank < 1 && upLength !== 0 ? /*#__PURE__*/_jsxs("div", {
      children: [/*#__PURE__*/_jsx("div", {
        style: _objectSpread({
          left: -circleWidth,
          top: height / 2,
          width: circleWidth
        }, lineStyle)
      }), /*#__PURE__*/_jsx("div", {
        onClick: function onClick() {
          setLoadingRight(true);
          hideOrOpen(info, ARROW_DIR.UP);
        },
        style: _objectSpread({
          width: 2 * circleWidth,
          height: 2 * circleWidth,
          left: -3 * circleWidth,
          top: height / 2 - circleWidth
        }, circleStyle),
        children: hideUp ? loadingRight ? /*#__PURE__*/_jsx("img", {
          style: loadingStyle,
          src: loadingPng
        }) : /*#__PURE__*/_jsx("span", {
          style: numStyle,
          children: upLength
        }) : /*#__PURE__*/_jsx("span", {
          style: _objectSpread({
            width: circleWidth
          }, dreStyle)
        })
      })]
    }) : null]
  }, uuid);
};

export default Card;