choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
256 lines (225 loc) • 9.28 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["afterClick"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useCallback, isValidElement, cloneElement, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { isArrayLike } from 'mobx';
import isPromise from 'is-promise';
import classNames from 'classnames';
import isString from 'lodash/isString';
import isObject from 'lodash/isObject';
import Button from '../button';
import { FuncType } from '../button/enum';
import Dropdown from '../dropdown';
import Menu from '../menu';
import { $l } from '../locale-context';
import useComputed from '../use-computed';
import { TableCommandType } from '../table/interface';
import { ViewMode } from './enum';
var CardCommand = function CardCommand(props) {
var record = props.record,
prefixCls = props.prefixCls,
command = props.command,
_props$renderCommand = props.renderCommand,
renderCommand = _props$renderCommand === void 0 ? function (_ref) {
var command = _ref.command;
return command;
} : _props$renderCommand,
dataSet = props.dataSet,
viewMode = props.viewMode,
_props$commandsLimit = props.commandsLimit,
commandsLimit = _props$commandsLimit === void 0 ? 1 : _props$commandsLimit;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
item = _useState2[0],
setItem = _useState2[1];
var cardCommand = useComputed(function () {
if (typeof command === 'function') {
var colC = command({
dataSet: dataSet,
record: record
});
return renderCommand({
command: colC,
viewMode: viewMode,
dataSet: dataSet,
record: record
});
}
return renderCommand({
command: command,
viewMode: viewMode,
dataSet: dataSet,
record: record
});
}, [record, command, dataSet, renderCommand]);
var handleCommandDelete = useCallback(function (e) {
e.stopPropagation();
dataSet["delete"](record);
}, [dataSet, record]);
var renderCommands = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var classString, commands, result;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
classString = classNames("".concat(prefixCls, "-command"));
if (!cardCommand) {
_context2.next = 13;
break;
}
commands = [];
if (!isPromise(cardCommand)) {
_context2.next = 9;
break;
}
_context2.next = 6;
return cardCommand;
case 6:
_context2.t0 = _context2.sent;
_context2.next = 10;
break;
case 9:
_context2.t0 = cardCommand;
case 10:
result = _context2.t0;
result.forEach(function (button) {
var tableButtonProps = {};
if (isArrayLike(button)) {
tableButtonProps = button[1] || {};
button = button[0];
}
if (isString(button) && button in TableCommandType) {
var getButtonProps = function getButtonProps(type) {
switch (type) {
case TableCommandType["delete"]:
return {
funcType: FuncType.link,
onClick: handleCommandDelete,
// disabled,
children: $l('Table', 'delete_button')
};
default:
}
};
var defaultButtonProps = getButtonProps(button);
if (defaultButtonProps) {
var _tableButtonProps = tableButtonProps,
afterClick = _tableButtonProps.afterClick,
buttonProps = _objectWithoutProperties(_tableButtonProps, _excluded);
if (afterClick) {
var onClick = defaultButtonProps.onClick;
defaultButtonProps.onClick = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
e.persist();
e.stopPropagation();
_context.prev = 2;
_context.next = 5;
return onClick(e);
case 5:
_context.prev = 5;
afterClick(e);
return _context.finish(5);
case 8:
case "end":
return _context.stop();
}
}
}, _callee, null, [[2,, 5, 8]]);
}));
return function (_x) {
return _ref3.apply(this, arguments);
};
}();
}
var otherProps = _extends({}, defaultButtonProps);
commands.push( /*#__PURE__*/React.createElement(Button, _extends({}, otherProps, buttonProps, {
className: classNames(classString, otherProps.className, buttonProps.className)
})));
}
} else if ( /*#__PURE__*/isValidElement(button)) {
commands.push( /*#__PURE__*/cloneElement(button, _objectSpread(_objectSpread({}, button.props), {}, {
onClick: function onClick(e) {
e.stopPropagation();
button.props.onClick(e);
},
funcType: FuncType.link,
className: classNames(classString, button.props.className)
})));
} else if (isObject(button)) {
commands.push( /*#__PURE__*/React.createElement(Button, _extends({}, button, {
funcType: FuncType.link,
className: classNames(classString, button.className)
})));
}
});
return _context2.abrupt("return", commands);
case 13:
case "end":
return _context2.stop();
}
}
}, _callee2);
})), [prefixCls, record, cardCommand, handleCommandDelete]);
useEffect(function () {
var renderMenuItem = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
var result;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return renderCommands();
case 2:
result = _context3.sent;
setItem(result); // 更新状态
case 4:
case "end":
return _context3.stop();
}
}
}, _callee3);
}));
return function renderMenuItem() {
return _ref4.apply(this, arguments);
};
}();
renderMenuItem();
}, []);
var renderMoreBtns = useCallback(function () {
if (commandsLimit >= item.length) {
return null;
}
return /*#__PURE__*/React.createElement(Dropdown, {
popupClassName: "".concat(prefixCls, "-quote-container-extra-popup"),
overlay: function overlay() {
return /*#__PURE__*/React.createElement(Menu, null, item.slice(commandsLimit).map(function (cmd) {
return /*#__PURE__*/React.createElement(Menu.Item, {
key: cmd.key || "".concat(record.id, "_cmd")
}, cmd);
}));
}
}, /*#__PURE__*/React.createElement(Button, {
icon: "more_horiz",
funcType: FuncType.flat,
onClick: function onClick(e) {
return e.stopPropagation();
}
}));
}, [item, commandsLimit]);
return item ? viewMode === ViewMode.kanban ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-quote-container-extra")
}, item.slice(0, commandsLimit), renderMoreBtns()) : /*#__PURE__*/React.createElement(React.Fragment, null, item.slice(0, commandsLimit), renderMoreBtns()) : null;
};
CardCommand.displayName = 'CardCommand';
export default observer(CardCommand);
//# sourceMappingURL=CardCommand.js.map