choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
324 lines (271 loc) • 12.5 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getDraggingStyle = exports.getBackgroundColor = exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _react = _interopRequireWildcard(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 _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _grid = require("../../../lib/grid");
var _classnames = _interopRequireDefault(require("classnames"));
var _QuoteItem = _interopRequireDefault(require("./QuoteItem"));
var _dataSet = _interopRequireDefault(require("../data-set"));
var _BoardContext = _interopRequireDefault(require("./BoardContext"));
var _enum = require("./enum");
var _button = _interopRequireDefault(require("../button"));
var _interface = require("../button/interface");
// import noop from 'lodash/noop';
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, 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 = (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) - (isLast && !listDragging ? 46 : 8)
});
var btnStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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 ((0, _isFunction["default"])(draggableProps)) {
return draggableProps({
columnDS: quotes,
dataSet: dataSet
});
}
return draggableProps;
};
return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, (0, _extends2["default"])({
draggableId: String(quote.id),
index: index,
key: quote.id,
isDragDisabled: isDragDropDisabled && true
}, restDraggableProps()), function (provided, snapshot) {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_QuoteItem["default"], {
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["default"].createElement(_button["default"], {
onClick: function () {
var _onClick = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
return _regenerator["default"].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: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, btnStyle), {}, {
maxWidth: 'unset'
}),
hidden: listDragging,
funcType: _interface.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 = (0, _react.useContext)(_BoardContext["default"]),
displayFields = _useContext.displayFields,
customizedDS = _useContext.customizedDS,
command = _useContext.command,
renderCommand = _useContext.renderCommand,
dataSet = _useContext.dataSet,
commandsLimit = _useContext.commandsLimit;
var viewProps = (0, _react.useMemo)(function () {
return customizedDS.current.get(_enum.ViewField.viewProps) || {};
}, [customizedDS.current]);
var columnDS = (0, _react.useMemo)(function () {
return new _dataSet["default"]((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dataSet.props), {}, {
queryParameter: (0, _defineProperty2["default"])({}, groupingBy, columnId === '_empty' ? 'null' : columnId),
data: quotes.slice(),
autoQuery: false
}, kanbanProps.columnDsProps));
}, [quotes]);
var headHeight = (0, _react.useMemo)(function () {
return columnDS.getState('__HEADHEIGHT__') || 30;
}, [columnDS, columnDS.getState('__HEADHEIGHT__'), commandsLimit, command, renderCommand]);
var defaultRowHeight = (0, _react.useMemo)(function () {
return (viewProps[_enum.ViewField.displayFields] ? viewProps[_enum.ViewField.displayFields].length : 1) * 24 + Math.max(30, headHeight) + 24;
}, [viewProps[_enum.ViewField.displayFields] && viewProps[_enum.ViewField.displayFields].length, headHeight]);
var totalCount = (0, _react.useMemo)(function () {
return Math.max(kanbanDS.getState("".concat(columnId, "_totalCount")) || 0, columnDS.totalCount);
}, [columnId, columnDS.totalCount]);
(0, _react.useEffect)(function () {
if (kanbanDS) {
kanbanDS.setState("".concat(columnId.toString().toLocaleUpperCase(), "_COLUMNDS"), columnDS);
}
}, [kanbanDS, columnDS]);
var restDroppableProps = (0, _react.useCallback)(function () {
if ((0, _isFunction["default"])(droppableProps)) {
return droppableProps({
columnDS: columnDS,
dataSet: dataSet
});
}
return droppableProps;
}, []);
var cls = (0, _classnames["default"])("".concat(prefixCls, "-column-container"), {}, className);
return /*#__PURE__*/_react["default"].createElement(_grid.Col, {
span: viewProps[_enum.ViewField.cardWidth] || 6,
"data-key": viewProps[_enum.ViewField.displayFields] && viewProps[_enum.ViewField.displayFields].length,
style: style,
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")
}, "(", columnDS ? totalCount : 0, ")")), /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, (0, _extends2["default"])({
droppableId: columnId.toString(),
mode: "virtual",
renderClone: function renderClone(provided, snapshot, rubric) {
return /*#__PURE__*/_react["default"].createElement(_QuoteItem["default"], {
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["default"].createElement(_reactVirtualized.AutoSizer, {
disableHeight: true
}, function (_ref2) {
var width = _ref2.width;
return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.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 = (0, _reactDom.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';
var _default = (0, _mobxReactLite.observer)(KanbanColumn);
exports["default"] = _default;
//# sourceMappingURL=KanbanColumn.js.map