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

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

"use strict";

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

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

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

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

var _reactDom = require("react-dom");

var _reactVirtualized = require("react-virtualized");

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

var _reactBeautifulDnd = require("react-beautiful-dnd");

var _classnames = _interopRequireDefault(require("classnames"));

var _QuoteItem = _interopRequireDefault(require("./QuoteItem"));

var getBackgroundColor = function getBackgroundColor(isDraggingOver, isDraggingFrom) {
  if (isDraggingOver) {
    return 'rgb(222, 235, 255)';
  }

  if (isDraggingFrom) {
    return "rgb(255, 250, 230)";
  }

  return "white";
};

exports.getBackgroundColor = getBackgroundColor;

var getDraggingStyle = function getDraggingStyle(isDraggingOver, isDraggingFrom) {
  if (isDraggingOver) {
    return {
      background: 'rgba(8,64,248,0.02)',
      border: '1px dashed #82ACFF',
      borderRadius: '2px'
    };
  }

  if (isDraggingFrom) {
    return {
      background: 'rgba(8,64,248,0.02)',
      border: '1px dashed #82ACFF',
      borderRadius: '2px'
    };
  }

  return {
    background: 'white'
  };
}; // Using a higher order function so that we can look up the quotes data to retrieve
// our quote from within the rowRender function


exports.getDraggingStyle = getDraggingStyle;

var getRowRender = function getRowRender(quotes, prefixCls) {
  return function (_ref) {
    var index = _ref.index,
        style = _ref.style;
    var quote = quotes[index]; // We are rendering an extra item for the placeholder
    // Do do this we increased our data set size to include one 'fake' item

    if (!quote) {
      return null;
    } // Faking some nice spacing around the items


    var patchedStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
      left: Number(style.left) + 8,
      top: Number(style.top) + 8,
      width: "calc(".concat(style.width, " - ").concat(8 * 2, "px)"),
      height: Number(style.height) - 8
    });
    return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
      draggableId: String(quote.id),
      index: index,
      key: quote.id
    }, function (provided, snapshot) {
      return /*#__PURE__*/_react["default"].createElement(_QuoteItem["default"], {
        provided: provided,
        quote: quote,
        isDragging: snapshot.isDragging,
        style: patchedStyle,
        prefixCls: prefixCls
      });
    });
  };
};

var Column = function Column(props) {
  var columnId = props.columnId,
      quotes = props.quotes,
      prefixCls = props.prefixCls,
      className = props.className,
      header = props.header; // console.log('quotes', quotes)

  var cls = (0, _classnames["default"])("".concat(prefixCls, "-column-container"), {}, className);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: cls
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(prefixCls, "-column-header")
  }, /*#__PURE__*/_react["default"].createElement("span", null, header), /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(prefixCls, "-column-header-count")
  }, "(", quotes ? quotes.length : 0, ")")), /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
    droppableId: columnId,
    mode: "virtual",
    renderClone: function renderClone(provided, snapshot, rubric) {
      return /*#__PURE__*/_react["default"].createElement(_QuoteItem["default"], {
        prefixCls: prefixCls,
        provided: provided,
        isDragging: snapshot.isDragging,
        quote: quotes && quotes[rubric.source.index],
        style: {
          margin: 0
        }
      });
    }
  }, function (droppableProvided, snapshot) {
    var itemCount = quotes ? snapshot.isUsingPlaceholder ? quotes.length + 1 : quotes.length : 0;
    return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.List, {
      className: "".concat(prefixCls, "-column-list"),
      height: 500,
      rowCount: itemCount,
      rowHeight: 122,
      width: 332,
      ref: function ref(_ref2) {
        // react-virtualized has no way to get the list's ref that I can so
        // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
        if (_ref2) {
          // eslint-disable-next-line react/no-find-dom-node
          var whatHasMyLifeComeTo = (0, _reactDom.findDOMNode)(_ref2);

          if (whatHasMyLifeComeTo instanceof HTMLElement) {
            droppableProvided.innerRef(whatHasMyLifeComeTo);
          }
        }
      },
      style: getDraggingStyle(snapshot.isDraggingOver, Boolean(snapshot.draggingFromThisWith)),
      // style={{
      //   backgroundColor: getBackgroundColor(
      //     snapshot.isDraggingOver,
      //     Boolean(snapshot.draggingFromThisWith),
      //   ),
      //   transition: 'background-color 0.2s ease',
      // }}
      rowRenderer: quotes ? getRowRender(quotes, prefixCls) : null
    });
  }));
};

Column.displayName = 'Column';

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

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