choerodon-ui/pro/lib/board/QuoteItem.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

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

var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));

var _mobxReactLite = require("mobx-react-lite");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _CardCommand = _interopRequireDefault(require("./CardCommand"));

var _enum = require("./enum");

var _typography = _interopRequireDefault(require("../typography"));

var _output = _interopRequireDefault(require("../output"));

function getStyle(provided, style) {
  if (!style) {
    return provided.draggableProps.style;
  }

  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, provided.draggableProps.style), style);
} // Previously this extended React.Component
// That was a good thing, because using React.PureComponent can hide
// issues with the selectors. However, moving it over does can considerable
// performance improvements when reordering big lists (400ms => 200ms)
// Need to be super sure we are not relying on PureComponent here for
// things we should be doing in the selector as we do not know if consumers
// will be using PureComponent


var QuoteItem = function QuoteItem(props) {
  var quote = props.quote,
      isDragging = props.isDragging,
      provided = props.provided,
      style = props.style,
      index = props.index,
      prefixCls = props.prefixCls,
      viewProps = props.viewProps,
      command = props.command,
      _props$renderCommand = props.renderCommand,
      renderCommand = _props$renderCommand === void 0 ? function (_ref) {
    var command = _ref.command;
    return command;
  } : _props$renderCommand,
      dataSet = props.dataSet,
      columns = props.displayFields,
      commandsLimit = props.commandsLimit;
  var displayFields = (0, _react.useMemo)(function () {
    return viewProps.displayFields;
  }, [viewProps.displayFields]);
  var firstDisplayFields = (0, _react.useMemo)(function () {
    return columns.find(function (df) {
      return df.name === displayFields[0];
    });
  }, [columns]);
  var extraRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    var observer = new _resizeObserverPolyfill["default"](function (entries) {
      var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
          _step;

      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var entry = _step.value;
          // 更新高度
          dataSet.setState('__HEADHEIGHT__', entry.contentRect.height);
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
    });

    if (extraRef.current) {
      observer.observe(extraRef.current);
    }

    return function () {
      observer.disconnect();
    };
  }, []);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: "".concat(prefixCls, "-quote-container"),
    // isDragging={isDragging}
    // isGroupedOver={isGroupedOver}
    // isClone={isClone}
    ref: provided.innerRef
  }, provided.draggableProps, provided.dragHandleProps, {
    style: getStyle(provided, style),
    "data-is-dragging": isDragging,
    "data-testid": quote.id,
    "data-index": index
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-quote-head-wrapper"),
    ref: extraRef
  }, displayFields && displayFields.length ? /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement(_typography["default"].Paragraph, {
    ellipsis: {
      rows: 2,
      tooltip: /*#__PURE__*/_react["default"].createElement(_output["default"], {
        name: displayFields[0],
        record: quote,
        renderer: firstDisplayFields ? firstDisplayFields.renderer : _noop["default"]
      })
    },
    record: quote,
    name: displayFields[0],
    renderer: firstDisplayFields ? firstDisplayFields.renderer : _noop["default"]
  })) : /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(prefixCls, "-quote-content-label")
  }, "\u8BF7\u914D\u7F6E\u663E\u793A\u5B57\u6BB5"), /*#__PURE__*/_react["default"].createElement(_CardCommand["default"], {
    command: command,
    viewMode: _enum.ViewMode.kanban,
    dataSet: dataSet,
    record: quote,
    renderCommand: renderCommand,
    prefixCls: prefixCls,
    commandsLimit: commandsLimit
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-quote-content")
  }, displayFields ? displayFields.map(function (fieldName) {
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: "".concat(fieldName, "-item"),
      className: "".concat(prefixCls, "-quote-content-item")
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-quote-content-label"),
      hidden: !viewProps.showLabel
    }, quote.getField(fieldName).get('label')), /*#__PURE__*/_react["default"].createElement(_typography["default"].Text, {
      ellipsis: {
        tooltip: true
      },
      record: quote,
      name: fieldName,
      renderer: columns.find(function (df) {
        return df.name === fieldName;
      }) ? columns.find(function (df) {
        return df.name === fieldName;
      }).renderer : _noop["default"]
    }));
  }) : null)));
};

QuoteItem.displayName = 'QuoteItem';

var _default = (0, _mobxReactLite.observer)(QuoteItem);

exports["default"] = _default;
//# sourceMappingURL=QuoteItem.js.map