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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React from 'react';
import { findDOMNode } from 'react-dom';
import { List } from 'react-virtualized';
import { observer } from 'mobx-react-lite';
import { Draggable, Droppable } from 'react-beautiful-dnd';
import classnames from 'classnames';
import QuoteItem from './QuoteItem';
export var getBackgroundColor = function getBackgroundColor(isDraggingOver, isDraggingFrom) {
  if (isDraggingOver) {
    return 'rgb(222, 235, 255)';
  }

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

  return "white";
};
export 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

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 = _objectSpread(_objectSpread({}, 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.createElement(Draggable, {
      draggableId: String(quote.id),
      index: index,
      key: quote.id
    }, function (provided, snapshot) {
      return /*#__PURE__*/React.createElement(QuoteItem, {
        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 = classnames("".concat(prefixCls, "-column-container"), {}, className);
  return /*#__PURE__*/React.createElement("div", {
    className: cls
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-column-header")
  }, /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-column-header-count")
  }, "(", quotes ? quotes.length : 0, ")")), /*#__PURE__*/React.createElement(Droppable, {
    droppableId: columnId,
    mode: "virtual",
    renderClone: function renderClone(provided, snapshot, rubric) {
      return /*#__PURE__*/React.createElement(QuoteItem, {
        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.createElement(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 = 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';
export default observer(Column);
//# sourceMappingURL=Column.js.map