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

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

import _extends from "@babel/runtime/helpers/extends";
import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { useMemo, useEffect, useRef } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
import { observer } from 'mobx-react-lite';
import noop from 'lodash/noop';
import CardCommand from './CardCommand';
import { ViewMode } from './enum';
import Typography from '../typography';
import Output from '../output';

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

  return _objectSpread(_objectSpread({}, 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 = useMemo(function () {
    return viewProps.displayFields;
  }, [viewProps.displayFields]);
  var firstDisplayFields = useMemo(function () {
    return columns.find(function (df) {
      return df.name === displayFields[0];
    });
  }, [columns]);
  var extraRef = useRef(null);
  useEffect(function () {
    var observer = new ResizeObserver(function (entries) {
      var _iterator = _createForOfIteratorHelper(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    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.createElement("div", {
    className: "".concat(prefixCls, "-quote-head-wrapper"),
    ref: extraRef
  }, displayFields && displayFields.length ? /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Typography.Paragraph, {
    ellipsis: {
      rows: 2,
      tooltip: /*#__PURE__*/React.createElement(Output, {
        name: displayFields[0],
        record: quote,
        renderer: firstDisplayFields ? firstDisplayFields.renderer : noop
      })
    },
    record: quote,
    name: displayFields[0],
    renderer: firstDisplayFields ? firstDisplayFields.renderer : noop
  })) : /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-quote-content-label")
  }, "\u8BF7\u914D\u7F6E\u663E\u793A\u5B57\u6BB5"), /*#__PURE__*/React.createElement(CardCommand, {
    command: command,
    viewMode: ViewMode.kanban,
    dataSet: dataSet,
    record: quote,
    renderCommand: renderCommand,
    prefixCls: prefixCls,
    commandsLimit: commandsLimit
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-quote-content")
  }, displayFields ? displayFields.map(function (fieldName) {
    return /*#__PURE__*/React.createElement("div", {
      key: "".concat(fieldName, "-item"),
      className: "".concat(prefixCls, "-quote-content-item")
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-quote-content-label"),
      hidden: !viewProps.showLabel
    }, quote.getField(fieldName).get('label')), /*#__PURE__*/React.createElement(Typography.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
    }));
  }) : null)));
};

QuoteItem.displayName = 'QuoteItem';
export default observer(QuoteItem);
//# sourceMappingURL=QuoteItem.js.map