choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
767 lines (638 loc) • 28 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _mobxReactLite = require("mobx-react-lite");
var _mobx = require("mobx");
var _isString = _interopRequireDefault(require("lodash/isString"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _isObject = _interopRequireDefault(require("lodash/isObject"));
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _list = _interopRequireDefault(require("../../../lib/list"));
var _icon = _interopRequireDefault(require("../../../lib/icon"));
var _card = _interopRequireDefault(require("../../../lib/card"));
var _resizeObserver = _interopRequireDefault(require("../../../lib/_util/resizeObserver"));
var _dataSet = _interopRequireDefault(require("../data-set"));
var _BoardContext = _interopRequireDefault(require("./BoardContext"));
var _TableDynamicFilterBar = _interopRequireDefault(require("../table/query-bar/TableDynamicFilterBar"));
var _utils = require("../table/utils");
var _Button = _interopRequireDefault(require("../button/Button"));
var _enum = require("../button/enum");
var _ModalProvider = require("../modal-provider/ModalProvider");
var _localeContext = require("../locale-context");
var _kanbanCustomizationSettings = _interopRequireDefault(require("./kanban-customization-settings"));
var _enum2 = require("./enum");
var _output = _interopRequireDefault(require("../output"));
var _CardCommand = _interopRequireDefault(require("./CardCommand"));
var _interface = require("../table/interface");
var _interface2 = require("../data-set/interface");
var _menu = _interopRequireDefault(require("../menu"));
var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
var _typography = _interopRequireDefault(require("../typography"));
var _excluded = ["afterClick"],
_excluded2 = ["afterClick"];
var CardContent = function CardContent(props) {
var tableBtns = props.tableBtns,
buttonsLimit = props.buttonsLimit,
buttons = props.buttons,
_props$cardProps = props.cardProps,
cardProps = _props$cardProps === void 0 ? {} : _props$cardProps,
queryBarProps = props.queryBarProps;
var _useContext = (0, _react.useContext)(_BoardContext["default"]),
onChange = _useContext.onChange,
displayFields = _useContext.displayFields,
_useContext$renderBut = _useContext.renderButtons,
renderButtons = _useContext$renderBut === void 0 ? _noop["default"] : _useContext$renderBut,
autoQuery = _useContext.autoQuery,
getConfig = _useContext.getConfig,
getProPrefixCls = _useContext.getProPrefixCls,
_useContext$prefixCls = _useContext.prefixCls,
prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
customizedDS = _useContext.customizedDS,
dataSet = _useContext.dataSet,
queryFields = _useContext.queryFields,
command = _useContext.command,
renderCommand = _useContext.renderCommand,
commandsLimit = _useContext.commandsLimit;
var viewProps = customizedDS.current.get(_enum2.ViewField.viewProps);
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
cardHeight = _useState2[0],
setCardHeight = _useState2[1];
var modal = (0, _ModalProvider.useModal)();
var openCustomizationModal = (0, _react.useCallback)(function () {
var modalProps = {
drawer: true,
okFirst: false,
title: '卡片视图配置',
children: /*#__PURE__*/_react["default"].createElement(_kanbanCustomizationSettings["default"], {
viewMode: _enum2.ViewMode.card
}),
bodyStyle: {
overflow: 'hidden auto',
padding: 0
}
};
modalProps.okText = (0, _localeContext.$l)('Tabs', 'save');
modal.open(modalProps);
}, [modal]);
var cardDS = (0, _react.useMemo)(function () {
var defaultSortParams = dataSet.combineSort && viewProps ? viewProps[_enum2.ViewField.combineSort] || [] : [];
var orgFields = dataSet.props.fields ? dataSet.props.fields : [];
var orderFields = orgFields.map(function (field) {
var orderField = defaultSortParams.find(function (of) {
return of.sortName === field.name;
});
var newField = (0, _objectSpread2["default"])({}, field);
if (orderField) {
newField.order = orderField.order;
}
return newField;
});
return new _dataSet["default"]((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dataSet.props), {}, {
fields: orderFields
}, cardProps.dsProps), {}, {
autoQuery: false
}));
}, [dataSet.props]);
/**
* 查询看板数据
*/
var loadData = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
var changed;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
dataSet.setState('__CURRENTVIEWDS__', cardDS);
if ((0, _isFunction["default"])(onChange) && customizedDS) {
changed = customizedDS.getState('__ISCHANGE__');
if (changed) {
onChange({
dataSet: dataSet,
currentViewDS: cardDS,
record: customizedDS.current
});
}
}
if (!autoQuery) {
_context.next = 5;
break;
}
_context.next = 5;
return cardDS.query();
case 5:
case "end":
return _context.stop();
}
}
}, _callee);
})), [dataSet, cardDS]);
(0, _react.useEffect)(function () {
loadData();
}, [dataSet, cardDS]);
var cls = (0, _classnames["default"])("".concat(prefixCls, "-card-wrapper"), {});
/**
* 渲染查询条字段组件
*/
var getQueryFields = (0, _react.useCallback)(function () {
var queryDataSet = cardDS.queryDataSet;
var result = [];
if (queryDataSet) {
var fields = queryDataSet.fields,
current = queryDataSet.current,
_queryDataSet$props$f = queryDataSet.props.fields,
propFields = _queryDataSet$props$f === void 0 ? [] : _queryDataSet$props$f;
var cloneFields = fields.toJS();
var tlsKey = getConfig('tlsKey');
var processField = function processField(field, name) {
if (!field.get('bind', current) && !name.includes(tlsKey)) {
var element = queryFields[name];
var filterBarProps = {};
var inValidElement = (0, _utils.getEditorByField)(field, current, true);
var placeholder = /*#__PURE__*/(0, _react.isValidElement)(element) && element.props.placeholder ? element.props.placeholder : (0, _utils.getPlaceholderByField)(field, current);
filterBarProps = {
placeholder: placeholder,
border: false,
clearButton: true
};
var elementType = inValidElement.type;
if ((! /*#__PURE__*/(0, _react.isValidElement)(element) || element.props.suffix === undefined) && ['Currency', 'ObserverNumberField', 'EmailField', 'UrlField', 'ObserverTextField'].indexOf(elementType.name) !== -1) {
(0, _extends2["default"])(filterBarProps, {
suffix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "search"
})
});
}
var _props = (0, _objectSpread2["default"])({
key: name,
name: name,
dataSet: queryDataSet,
isFlat: true
}, filterBarProps);
result.push( /*#__PURE__*/(0, _react.isValidElement)(element) ? /*#__PURE__*/(0, _react.cloneElement)(element, _props) : /*#__PURE__*/(0, _react.cloneElement)(inValidElement, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _props), (0, _isObject["default"])(element) ? element : {})));
}
};
propFields.forEach(function (_ref2) {
var name = _ref2.name;
if (name) {
var field = cloneFields.get(name);
if (field) {
cloneFields["delete"](name);
processField(field, name);
}
}
});
cloneFields.forEach(function (field, name) {
processField(field, name);
});
}
return result;
}, []);
/**
* buttons 大于 buttonsLimits 放入下拉
* @param buttonsLimits
*/
var getMoreButton = function getMoreButton(buttonsLimits) {
var tableButtonProps = getConfig('tableButtonProps');
var children = [];
if (tableBtns && tableBtns.length && buttonsLimits) {
tableBtns.slice(buttonsLimits).forEach(function (button) {
var props = {};
if ((0, _mobx.isArrayLike)(button)) {
props = button[1] || {};
button = button[0];
}
if ((0, _isString["default"])(button) && button in _interface.TableButtonType) {
var _props2 = props,
afterClick = _props2.afterClick,
buttonProps = (0, _objectWithoutProperties2["default"])(_props2, _excluded);
var defaultButtonProps = getButtonProps(button);
if (defaultButtonProps) {
if (afterClick) {
var onClick = defaultButtonProps.onClick;
defaultButtonProps.onClick = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(e) {
return _regenerator["default"].wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
e.persist();
_context2.prev = 1;
_context2.next = 4;
return onClick(e);
case 4:
_context2.prev = 4;
afterClick(e);
return _context2.finish(4);
case 7:
case "end":
return _context2.stop();
}
}
}, _callee2, null, [[1,, 4, 7]]);
}));
return function (_x) {
return _ref3.apply(this, arguments);
};
}();
}
children.push( /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
hidden: tableButtonProps.hidden,
key: button
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
key: "".concat(button, "-btn")
}, tableButtonProps, defaultButtonProps, buttonProps, {
funcType: _enum.FuncType.link
}))));
}
} else if ( /*#__PURE__*/(0, _react.isValidElement)(button)) {
children.push( /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
hidden: button.props.hidden
}, /*#__PURE__*/(0, _react.cloneElement)(button, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, tableButtonProps), button.props), {}, {
funcType: _enum.FuncType.link
}))));
} else if ((0, _isObject["default"])(button)) {
children.push( /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
hidden: props.hidden
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableButtonProps, button, {
funcType: _enum.FuncType.link
}))));
}
});
}
var menu = /*#__PURE__*/_react["default"].createElement(_menu["default"], {
prefixCls: "".concat(getProPrefixCls('table'), "-dropdown-menu")
}, children);
return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
overlay: menu,
key: "dropdown_button"
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableButtonProps, {
key: "more_button"
}), /*#__PURE__*/_react["default"].createElement("span", null, (0, _localeContext.$l)('Table', 'more')), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: 'expand_more'
})));
};
var getButtonProps = (0, _react.useCallback)(function (type) {
var disabled = cardDS.status !== _interface2.DataSetStatus.ready;
switch (type) {
case _interface.TableButtonType.add:
return {
icon: 'playlist_add',
onClick: function onClick() {
return cardDS.create({}, 0);
},
children: (0, _localeContext.$l)('Table', 'create_button'),
disabled: disabled || (cardDS.parent ? !cardDS.parent.current : false)
};
case _interface.TableButtonType.save:
return {
icon: 'save',
onClick: function onClick() {
return cardDS.submit();
},
children: (0, _localeContext.$l)('Table', 'save_button'),
type: _enum.ButtonType.submit,
disabled: disabled
};
case _interface.TableButtonType["delete"]:
return {
icon: 'delete',
onClick: function onClick() {
return cardDS["delete"](cardDS.selected);
},
children: (0, _localeContext.$l)('Table', 'delete_button'),
disabled: disabled || cardDS.selected.length === 0
};
case _interface.TableButtonType.remove:
return {
icon: 'remove_circle',
onClick: function onClick() {
return cardDS.remove(cardDS.selected);
},
children: (0, _localeContext.$l)('Table', 'remove_button'),
disabled: disabled || cardDS.selected.length === 0
};
case _interface.TableButtonType.reset:
return {
icon: 'undo',
onClick: function onClick() {
return cardDS.reset();
},
children: (0, _localeContext.$l)('Table', 'reset_button'),
type: _enum.ButtonType.reset
};
case _interface.TableButtonType.query:
return {
icon: 'search',
onClick: function () {
var _onClick = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
return _regenerator["default"].wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return cardDS.modifiedCheck(undefined, dataSet, 'query');
case 2:
_context3.t2 = _context3.sent;
if (!_context3.t2) {
_context3.next = 5;
break;
}
_context3.t2 = cardDS.queryDataSet;
case 5:
_context3.t1 = _context3.t2;
if (!_context3.t1) {
_context3.next = 8;
break;
}
_context3.t1 = cardDS.queryDataSet.current;
case 8:
_context3.t0 = _context3.t1;
if (!_context3.t0) {
_context3.next = 13;
break;
}
_context3.next = 12;
return cardDS.queryDataSet.current.validate();
case 12:
_context3.t0 = _context3.sent;
case 13:
if (!_context3.t0) {
_context3.next = 15;
break;
}
return _context3.abrupt("return", cardDS.query());
case 15:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
function onClick() {
return _onClick.apply(this, arguments);
}
return onClick;
}(),
children: (0, _localeContext.$l)('Table', 'query_button')
};
case _interface.TableButtonType["export"]:
return undefined;
case _interface.TableButtonType.expandAll:
return undefined;
case _interface.TableButtonType.collapseAll:
return undefined;
default:
}
}, []);
var getButtons = (0, _react.useCallback)(function (buttonsArr) {
var children = [];
var buttons = buttonsArr || tableBtns;
if (buttons) {
var tableButtonProps = getConfig('tableButtonProps');
var _buttonsArr = buttons.slice(0, buttonsLimit);
_buttonsArr.forEach(function (button) {
var props = {};
if ((0, _mobx.isArrayLike)(button)) {
props = button[1] || {};
button = button[0];
}
if ((0, _isString["default"])(button) && button in _interface.TableButtonType) {
var _props3 = props,
afterClick = _props3.afterClick,
buttonProps = (0, _objectWithoutProperties2["default"])(_props3, _excluded2);
var defaultButtonProps = getButtonProps(button);
if (defaultButtonProps) {
if (afterClick) {
var onClick = defaultButtonProps.onClick;
defaultButtonProps.onClick = /*#__PURE__*/function () {
var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(e) {
return _regenerator["default"].wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
e.persist();
_context4.prev = 1;
_context4.next = 4;
return onClick(e);
case 4:
_context4.prev = 4;
afterClick(e);
return _context4.finish(4);
case 7:
case "end":
return _context4.stop();
}
}
}, _callee4, null, [[1,, 4, 7]]);
}));
return function (_x2) {
return _ref4.apply(this, arguments);
};
}();
}
children.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
key: button
}, tableButtonProps, defaultButtonProps, buttonProps)));
}
} else if ( /*#__PURE__*/(0, _react.isValidElement)(button)) {
children.push( /*#__PURE__*/(0, _react.cloneElement)(button, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, tableButtonProps), button.props)));
} else if ((0, _isObject["default"])(button)) {
children.push( /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, tableButtonProps, button)));
}
});
if (buttonsLimit && buttons.length > buttonsLimit) {
var moreButton = getMoreButton(buttonsLimit);
children.push(moreButton);
}
}
return children;
}, [tableBtns, cardDS]);
var getCustomizationIcon = function getCustomizationIcon() {
var _customizedDS$current2;
// 是否存在切换面板按钮
var hasButtons = buttons && buttons.length; // 是否存在视图按钮控制
var shouldRenderTableBtns = !(0, _isFunction["default"])(renderButtons);
var tableButtons = getButtons();
var mergeButtons = buttons && buttons.length ? (0, _toConsumableArray2["default"])(buttons) : [];
if (hasButtons) {
var _customizedDS$current;
if (shouldRenderTableBtns) {
mergeButtons.push(tableButtons);
} else {
var getBtns = getButtons(renderButtons({
viewMode: _enum2.ViewMode.card,
dataSet: cardDS,
buttons: tableButtons
}));
mergeButtons.push(getBtns);
}
mergeButtons.unshift( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
className: "".concat(prefixCls, "-hover-button"),
funcType: _enum.FuncType.flat,
color: _enum.ButtonColor.primary,
hidden: ((_customizedDS$current = customizedDS.current) === null || _customizedDS$current === void 0 ? void 0 : _customizedDS$current.get(_enum2.ViewField.id)) === '__DEFAULT__',
icon: "settings-o",
onClick: openCustomizationModal
}));
return mergeButtons;
}
var buttonRenderer = [/*#__PURE__*/_react["default"].createElement(_Button["default"], {
key: "settings",
className: "".concat(prefixCls, "-hover-button"),
funcType: _enum.FuncType.flat,
color: _enum.ButtonColor.primary,
icon: "settings-o",
hidden: ((_customizedDS$current2 = customizedDS.current) === null || _customizedDS$current2 === void 0 ? void 0 : _customizedDS$current2.get(_enum2.ViewField.id)) === '__DEFAULT__',
onClick: openCustomizationModal
})];
if (shouldRenderTableBtns) {
buttonRenderer.unshift(tableBtns);
} else {
buttonRenderer.unshift(renderButtons({
viewMode: _enum2.ViewMode.card,
dataSet: cardDS,
buttons: tableBtns
}));
}
return buttonRenderer;
};
var handleResize = (0, _react.useCallback)(function (_width, height) {
if (height > cardHeight) {
setCardHeight(height + 1);
}
}, [cardHeight]);
(0, _react.useEffect)(function () {
setCardHeight(0);
}, [customizedDS.current]);
return /*#__PURE__*/_react["default"].createElement("div", {
style: {
height: '100%'
}
}, cardDS && cardDS.queryDataSet ? /*#__PURE__*/_react["default"].createElement(_TableDynamicFilterBar["default"], (0, _extends2["default"])({}, queryBarProps, {
dataSet: cardDS,
queryDataSet: cardDS.queryDataSet,
queryFields: getQueryFields(),
buttons: getCustomizationIcon()
})) : getCustomizationIcon(), /*#__PURE__*/_react["default"].createElement("div", {
className: cls
}, /*#__PURE__*/_react["default"].createElement(_list["default"] // @ts-ignore
, {
// @ts-ignore
style: {
height: viewProps && viewProps.viewHeight || 366,
overflowX: 'hidden',
overflowY: 'auto'
},
grid: {
gutter: 16,
column: 24 / customizedDS.current.get(_enum2.ViewField.cardWidth) || 4
},
dataSet: cardDS,
pagination: !!cardDS.paging,
renderItem: function renderItem(_ref5) {
var record = _ref5.record;
return /*#__PURE__*/_react["default"].createElement(_list["default"].Item, {
key: "".concat(record.id, "-card"),
className: "".concat(prefixCls, "-card-container")
}, /*#__PURE__*/_react["default"].createElement(_resizeObserver["default"], {
resizeProp: "height",
onResize: handleResize,
immediately: true
}, /*#__PURE__*/_react["default"].createElement(_card["default"], (0, _extends2["default"])({
key: "".concat(record.id, "-card-content")
}, cardProps, {
selected: record.isSelected,
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, cardProps.style), {}, {
minHeight: cardHeight
}),
title: viewProps && viewProps.displayFields ? /*#__PURE__*/_react["default"].createElement(_typography["default"].Paragraph, {
ellipsis: {
rows: 2,
tooltip: /*#__PURE__*/_react["default"].createElement(_output["default"], {
name: viewProps.displayFields[0],
record: record,
renderer: displayFields.find(function (df) {
return df.name === viewProps.displayFields[0];
}) ? displayFields.find(function (df) {
return df.name === viewProps.displayFields[0];
}).renderer : _noop["default"]
})
},
name: viewProps.displayFields[0],
record: record,
renderer: displayFields.find(function (df) {
return df.name === viewProps.displayFields[0];
}) ? displayFields.find(function (df) {
return df.name === viewProps.displayFields[0];
}).renderer : _noop["default"]
}) : null,
onClick: function onClick(e) {
if (cardDS.selection) {
if (record.isSelected) {
cardDS.unSelect(record);
} else {
cardDS.select(record);
}
}
if ((0, _isFunction["default"])(cardProps.onClick)) {
cardProps.onClick(e, record);
}
},
onHeadClick: function onHeadClick(e) {
if ((0, _isFunction["default"])(cardProps.onHeadClick)) {
cardProps.onHeadClick(e, record);
}
},
extra: /*#__PURE__*/_react["default"].createElement(_CardCommand["default"], {
command: command,
dataSet: cardDS,
record: record,
renderCommand: renderCommand,
prefixCls: prefixCls,
viewMode: _enum2.ViewMode.card,
commandsLimit: commandsLimit
})
}), viewProps && viewProps.displayFields ? viewProps.displayFields.map(function (fieldName) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: "".concat(fieldName, "-card-label"),
className: "".concat(prefixCls, "-quote-content-item")
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefixCls, "-quote-content-label"),
hidden: !viewProps.showLabel
}, record.getField(fieldName).get('label')), /*#__PURE__*/_react["default"].createElement(_typography["default"].Text, {
ellipsis: {
tooltip: true
},
name: fieldName,
record: record,
renderer: displayFields.find(function (df) {
return df.name === fieldName;
}) ? displayFields.find(function (df) {
return df.name === fieldName;
}).renderer : _noop["default"]
}));
}) : null)));
}
})));
};
CardContent.defaultProps = {
animated: true
};
CardContent.displayName = 'CardContent';
var _default = (0, _mobxReactLite.observer)(CardContent);
exports["default"] = _default;
//# sourceMappingURL=CardContent.js.map