@oceanbase/ui
Version:
The UI library based on OceanBase Design
149 lines (147 loc) • 7.57 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useContext } from 'react';
import { Button, Dropdown, Menu, Space, Tooltip, Typography, ConfigProvider } from '@oceanbase/design';
import { EllipsisOutlined, LoadingOutlined } from '@oceanbase/icons';
import { isBoolean, max, omit } from 'lodash';
import useStyle from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var getOrder = function getOrder(_ref) {
var type = _ref.type,
fixed = _ref.fixed;
var ORDER_SET = {
primary: 3,
fixed: 2,
default: 0
};
var order = ORDER_SET.default;
if (type === 'primary') {
order += ORDER_SET.primary;
}
if (fixed) {
order += ORDER_SET.fixed;
}
return order;
};
export default (function (_ref2) {
var customizePrefixCls = _ref2.prefixCls,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 3 : _ref2$size,
children = _ref2.children,
dropDownPlacement = _ref2.dropDownPlacement,
shouldVisible = _ref2.shouldVisible,
shouldDisabled = _ref2.shouldDisabled,
enableLoading = _ref2.enableLoading,
moreText = _ref2.moreText,
moreType = _ref2.moreType,
buttonSize = _ref2.buttonSize;
var _useContext = useContext(ConfigProvider.ConfigContext),
getPrefixCls = _useContext.getPrefixCls;
var prefixCls = getPrefixCls('action', customizePrefixCls);
var _useStyle = useStyle(prefixCls),
wrapSSR = _useStyle.wrapSSR;
var visibleActions = Array.isArray(children) ? children.filter(function (c) {
if (isBoolean(c.props.visible) && shouldVisible) return c.props.visible && shouldVisible(c.key);
if (isBoolean(c.props.visible)) return c.props.visible;else if (shouldVisible) return shouldVisible(c.key);
return true;
}) : [children];
var visibleActionsSort = visibleActions.slice(0);
visibleActionsSort.sort(function (a, b) {
var orderA = getOrder(a.props);
var orderB = getOrder(b.props);
return orderB - orderA;
});
var fixedSize = visibleActionsSort.filter(function (action) {
return action.props.type === 'primary' || action.props.fixed;
}).length;
var realSize = max([fixedSize, size]);
var mainActions = visibleActionsSort.slice(0, realSize);
var ellipsisActions = visibleActionsSort.slice(realSize);
var ellipsisType = 'link';
// @ts-ignore
if (visibleActionsSort.some(function (action) {
return action.type.__DISPLAY_NAME === 'button';
})) {
ellipsisType = 'button';
}
// @ts-ignore
if (visibleActionsSort.some(function (action) {
return action.type.__DISPLAY_NAME === 'link';
})) {
ellipsisType = 'link';
}
ellipsisType = moreType !== null && moreType !== void 0 ? moreType : ellipsisType;
var getDefaultDisabled = function getDefaultDisabled(key) {
var _shouldDisabled;
return (_shouldDisabled = shouldDisabled === null || shouldDisabled === void 0 ? void 0 : shouldDisabled(key)) !== null && _shouldDisabled !== void 0 ? _shouldDisabled : false;
};
var moreDom;
if (ellipsisType === 'button') {
moreDom = /*#__PURE__*/_jsx(Button, {
size: buttonSize,
icon: moreText ? undefined : /*#__PURE__*/_jsx(EllipsisOutlined, {
style: {
cursor: 'pointer'
}
}),
children: moreText
});
} else {
moreDom = /*#__PURE__*/_jsx(Typography.Link, {
children: moreText !== null && moreText !== void 0 ? moreText : /*#__PURE__*/_jsx(EllipsisOutlined, {
style: {
cursor: 'pointer'
}
})
});
}
return wrapSSR( /*#__PURE__*/_jsxs(Space, {
size: ellipsisType === 'button' ? 8 : 16,
children: [mainActions.map(function (action) {
return /*#__PURE__*/React.cloneElement(action, _objectSpread(_objectSpread({
// size should be covered by action props
size: buttonSize
}, action.props), {}, {
key: action.key,
enableLoading: enableLoading,
disabled: isBoolean(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key)
}));
}), ellipsisActions.length > 0 && /*#__PURE__*/_jsx(Dropdown, {
placement: dropDownPlacement,
overlay: /*#__PURE__*/_jsx(Menu, {
className: "".concat(prefixCls, "-more-menu"),
children: ellipsisActions.map(function (action, index) {
var _ref3;
var actionKey = action.key;
var disabled = false;
if (isBoolean(action.props.disabled)) disabled = action.props.disabled;else if (shouldDisabled) disabled = shouldDisabled(action.key);
// 当用户传入loading 或者 传入 disabled 的情况都要禁用按钮
var actionDisabled = action.props.loading || (isBoolean(action.props.disabled) ? action.props.disabled : getDefaultDisabled(action.key));
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Menu.Item, _objectSpread(_objectSpread({
// @ts-ignore
onClick: function onClick(_ref4) {
var _action$props$onClick, _action$props;
var domEvent = _ref4.domEvent;
(_action$props$onClick = (_action$props = action.props).onClick) === null || _action$props$onClick === void 0 || _action$props$onClick.call(_action$props, domEvent);
}
}, omit(action.props, ['disabled'])), {}, {
disabled: actionDisabled,
children: /*#__PURE__*/_jsxs(Tooltip, {
title: action.props.tooltip,
children: [action.props.loading && /*#__PURE__*/_jsx(LoadingOutlined, {}), ' ', action.props.children || action]
})
}), (_ref3 = actionKey) !== null && _ref3 !== void 0 ? _ref3 : index.toString()), action.props.divider && /*#__PURE__*/_jsx(Menu.Divider, {})]
});
})
}),
children: moreDom
})]
}));
});