choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
286 lines (260 loc) • 11 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useContext, useMemo, useEffect, useCallback } from 'react';
import { findDOMNode } from 'react-dom';
import { List, AutoSizer } from 'react-virtualized';
import { observer } from 'mobx-react-lite';
import { Draggable, Droppable } from 'react-beautiful-dnd';
import isFunction from 'lodash/isFunction'; // import noop from 'lodash/noop';
import { Col } from '../../../es/grid';
import classnames from 'classnames';
import QuoteItem from './QuoteItem';
import DataSet from '../data-set';
import BoardContext from './BoardContext';
import { ViewField } from './enum';
import Button from '../button';
import { FuncType } from '../button/interface';
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, columnId, prefixCls, viewProps, listDragging, command, renderCommand, commandsLimit, dataSet, kanbanDS, displayFields, isDragDropDisabled, draggableProps) {
return function (_ref) {
var index = _ref.index,
style = _ref.style;
var quote = quotes.get(index);
var isLast = quotes && quotes.length === index + 1; // 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) - (isLast && !listDragging ? 46 : 8)
});
var btnStyle = _objectSpread(_objectSpread({}, style), {}, {
left: Number(style.left) + 8,
top: Number(style.top) + Number(style.height) - 28,
width: "calc(".concat(style.width, " - ").concat(8 * 2, "px)"),
maxWidth: 'unset',
height: 28
});
var restDraggableProps = function restDraggableProps() {
if (isFunction(draggableProps)) {
return draggableProps({
columnDS: quotes,
dataSet: dataSet
});
}
return draggableProps;
};
return /*#__PURE__*/React.createElement(Draggable, _extends({
draggableId: String(quote.id),
index: index,
key: quote.id,
isDragDisabled: isDragDropDisabled && true
}, restDraggableProps()), function (provided, snapshot) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QuoteItem, {
command: command,
renderCommand: renderCommand,
commandsLimit: commandsLimit,
provided: provided,
quote: quote,
isDragging: snapshot.isDragging,
style: patchedStyle,
prefixCls: prefixCls,
viewProps: viewProps,
displayFields: displayFields,
index: index,
dataSet: quotes
}), isLast && (kanbanDS.getState("".concat(columnId, "_totalCount")) || quotes.totalCount) > quotes.length ? /*#__PURE__*/React.createElement(Button, {
onClick: function () {
var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return quotes.queryMore(quotes.currentPage + 1, undefined);
case 2:
kanbanDS.setState("".concat(columnId, "_totalCount"), undefined);
case 3:
case "end":
return _context.stop();
}
}
}, _callee);
}));
function onClick() {
return _onClick.apply(this, arguments);
}
return onClick;
}(),
style: _objectSpread(_objectSpread({}, btnStyle), {}, {
maxWidth: 'unset'
}),
hidden: listDragging,
funcType: FuncType.flat
}, "\u52A0\u8F7D\u66F4\u591A") : null);
});
};
};
var KanbanColumn = function KanbanColumn(props) {
var columnId = props.columnId,
_props$quotes = props.quotes,
quotes = _props$quotes === void 0 ? [] : _props$quotes,
prefixCls = props.prefixCls,
className = props.className,
header = props.header,
style = props.style,
kanbanProps = props.kanbanProps,
kanbanDS = props.kanbanDS,
groupingBy = props.groupingBy;
var droppableProps = kanbanProps.droppableProps,
draggableProps = kanbanProps.draggableProps,
isDragDropDisabled = kanbanProps.isDragDropDisabled;
var _useContext = useContext(BoardContext),
displayFields = _useContext.displayFields,
customizedDS = _useContext.customizedDS,
command = _useContext.command,
renderCommand = _useContext.renderCommand,
dataSet = _useContext.dataSet,
commandsLimit = _useContext.commandsLimit;
var viewProps = useMemo(function () {
return customizedDS.current.get(ViewField.viewProps) || {};
}, [customizedDS.current]);
var columnDS = useMemo(function () {
return new DataSet(_objectSpread(_objectSpread({}, dataSet.props), {}, {
queryParameter: _defineProperty({}, groupingBy, columnId === '_empty' ? 'null' : columnId),
data: quotes.slice(),
autoQuery: false
}, kanbanProps.columnDsProps));
}, [quotes]);
var headHeight = useMemo(function () {
return columnDS.getState('__HEADHEIGHT__') || 30;
}, [columnDS, columnDS.getState('__HEADHEIGHT__'), commandsLimit, command, renderCommand]);
var defaultRowHeight = useMemo(function () {
return (viewProps[ViewField.displayFields] ? viewProps[ViewField.displayFields].length : 1) * 24 + Math.max(30, headHeight) + 24;
}, [viewProps[ViewField.displayFields] && viewProps[ViewField.displayFields].length, headHeight]);
var totalCount = useMemo(function () {
return Math.max(kanbanDS.getState("".concat(columnId, "_totalCount")) || 0, columnDS.totalCount);
}, [columnId, columnDS.totalCount]);
useEffect(function () {
if (kanbanDS) {
kanbanDS.setState("".concat(columnId.toString().toLocaleUpperCase(), "_COLUMNDS"), columnDS);
}
}, [kanbanDS, columnDS]);
var restDroppableProps = useCallback(function () {
if (isFunction(droppableProps)) {
return droppableProps({
columnDS: columnDS,
dataSet: dataSet
});
}
return droppableProps;
}, []);
var cls = classnames("".concat(prefixCls, "-column-container"), {}, className);
return /*#__PURE__*/React.createElement(Col, {
span: viewProps[ViewField.cardWidth] || 6,
"data-key": viewProps[ViewField.displayFields] && viewProps[ViewField.displayFields].length,
style: style,
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")
}, "(", columnDS ? totalCount : 0, ")")), /*#__PURE__*/React.createElement(Droppable, _extends({
droppableId: columnId.toString(),
mode: "virtual",
renderClone: function renderClone(provided, snapshot, rubric) {
return /*#__PURE__*/React.createElement(QuoteItem, {
prefixCls: prefixCls,
provided: provided,
isDragging: snapshot.isDragging,
quote: columnDS.get(rubric.source.index),
style: {
margin: 0
},
viewProps: viewProps,
displayFields: displayFields,
command: command,
renderCommand: renderCommand,
commandsLimit: commandsLimit,
dataSet: columnDS
});
},
isDropDisabled: isDragDropDisabled && true
}, restDroppableProps()), function (droppableProvided, snapshot) {
var itemCount = columnDS ? snapshot.isUsingPlaceholder ? columnDS.length + 1 : columnDS.length : 0;
return /*#__PURE__*/React.createElement(AutoSizer, {
disableHeight: true
}, function (_ref2) {
var width = _ref2.width;
return /*#__PURE__*/React.createElement(List, {
className: "".concat(prefixCls, "-column-list"),
height: viewProps.viewHeight || 366,
rowCount: itemCount,
rowHeight: function rowHeight(_ref3) {
var index = _ref3.index;
return itemCount - 1 === index ? defaultRowHeight + 36 : defaultRowHeight;
},
width: width,
ref: function ref(_ref4) {
// 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
// listRef = ref;
if (_ref4) {
_ref4.recomputeRowHeights(); // columnDS.setState('__REF__', ref);
// eslint-disable-next-line react/no-find-dom-node
var nodeRef = findDOMNode(_ref4);
if (nodeRef instanceof HTMLElement) {
droppableProvided.innerRef(nodeRef);
}
}
},
style: getDraggingStyle(snapshot.isDraggingOver, Boolean(snapshot.draggingFromThisWith)),
// style={{
// backgroundColor: getBackgroundColor(
// snapshot.isDraggingOver,
// Boolean(snapshot.draggingFromThisWith),
// ),
// transition: 'background-color 0.2s ease',
// }}
rowRenderer: columnDS ? getRowRender(columnDS, columnId, prefixCls, viewProps, snapshot.isDraggingOver || Boolean(snapshot.draggingFromThisWith), command, renderCommand, commandsLimit, dataSet, kanbanDS, displayFields, isDragDropDisabled, draggableProps) : null
});
});
}));
};
KanbanColumn.displayName = 'KanbanColumn';
export default observer(KanbanColumn);
//# sourceMappingURL=KanbanColumn.js.map