@teamix/pro-action/es/index.js

action组件

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
var _excluded = ["type"],
  _excluded2 = ["config", "icon", "iconSize", "type", "context", "children", "visible", "disabled", "onClick", "tooltip", "disabledTooltip", "tooltipProps", "data-teamix-spm"],
  _excluded3 = ["loading"],
  _excluded4 = ["icon", "iconSize", "label", "actions", "children", "context", "type", "className", "noArrow"],
  _excluded5 = ["context", "text"],
  _excluded6 = ["key", "actions"],
  _excluded7 = ["key", "config"],
  _excluded8 = ["type", "divider", "max", "moreText", "more", "context", "actions", "className", "data-teamix-spm"];
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { Balloon, Button, Divider, Menu, MenuButton } from '@alicloudfe/components';
import Icon from '@teamix/icon';
import { getMessage, getTargetValue, usePrefixCls } from '@teamix/utils';
import cls from 'classnames';
import React from 'react';
import { useConfirmAction } from "./confirm";
import { useDangerConfirmAction } from "./danger-confirm";
import { useDangerPopConfirmAction } from "./danger-pop-confirm";
import { useDialogAction } from "./dialog";
import { useDialogFormAction } from "./dialog-form";
import { useDialogInfoAction } from "./dialog-info";
import { useDialogTableAction } from "./dialog-table";
import { useDrawerAction } from "./drawer";
import { useDrawerFormAction } from "./drawer-form";
import { useDrawerInfoAction } from "./drawer-info";
import { useDrawerTableAction } from "./drawer-table";
import { useErrorAction } from "./error";
import "./index.scss";
import { useLinkAction } from "./link";
import { useNoticeAction } from "./notice";
import { usePopConfirmAction } from "./pop-confirm";
import { useRequestAction } from "./request";
var RegistedActions = new Map();
export function registerActionHandler(id, extendActionId, defaultConfig) {
  RegistedActions.set(id, {
    extendActionId: extendActionId,
    defaultConfig: defaultConfig
  });
}
export function useAction(config, context) {
  if (!config) {
    return {};
  }
  var type = config.type,
    others = _objectWithoutProperties(config, _excluded);
  if (type === 'request') {
    return useRequestAction(others, context);
  }
  if (type === 'link') {
    return useLinkAction(others, context);
  }
  if (type === 'dialog') {
    return useDialogAction(others, context);
  }
  if (type === 'confirm') {
    return useConfirmAction(others, context);
  }
  if (type === 'danger-confirm') {
    return useDangerConfirmAction(others, context);
  }
  if (type === 'notice') {
    return useNoticeAction(others, context);
  }
  if (type === 'error') {
    return useErrorAction(others, context);
  }
  if (type === 'dialog-form') {
    return useDialogFormAction(others, context);
  }
  if (type === 'dialog-table') {
    return useDialogTableAction(others, context);
  }
  if (type === 'dialog-info') {
    return useDialogInfoAction(others, context);
  }
  if (type === 'drawer') {
    return useDrawerAction(others, context);
  }
  if (type === 'drawer-form') {
    return useDrawerFormAction(others, context);
  }
  if (type === 'drawer-table') {
    return useDrawerTableAction(others, context);
  }
  if (type === 'drawer-info') {
    return useDrawerInfoAction(others, context);
  }
  if (type === 'pop-confirm') {
    return usePopConfirmAction(others, context);
  }
  if (type === 'danger-pop-confirm') {
    return useDangerPopConfirmAction(others, context);
  }
  var registedAction = RegistedActions.get(type);
  if (!registedAction) {
    return {};
  }
  return useAction(_objectSpread(_objectSpread({
    type: registedAction.extendActionId
  }, registedAction.defaultConfig), others), context);
}
var buttonContent = function buttonContent(content, iconType, iconSize, context) {
  var renderedContent = typeof content === 'function' ? content(context) : content;
  if (!iconType) {
    return renderedContent;
  }
  return [/*#__PURE__*/React.createElement(Icon, {
    type: iconType,
    size: iconSize,
    key: "teamix-button-icon"
  }), renderedContent];
};
export var ProActionButton = function ProActionButton(props) {
  var config = props.config,
    icon = props.icon,
    _props$iconSize = props.iconSize,
    iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
    _props$type = props.type,
    type = _props$type === void 0 ? 'primary' : _props$type,
    context = props.context,
    children = props.children,
    visible = props.visible,
    disabled = props.disabled,
    _onClick = props.onClick,
    tooltip = props.tooltip,
    disabledTooltip = props.disabledTooltip,
    tooltipProps = props.tooltipProps,
    dataTeamixSpm = props['data-teamix-spm'],
    others = _objectWithoutProperties(props, _excluded2);
  var actionProps = useAction(config, context);
  var buttonProps = _onClick ? _objectSpread(_objectSpread(_objectSpread({
    disabled: disabled
  }, actionProps), others), {}, {
    onClick: function onClick(e) {
      return _onClick(e, context);
    }
  }) : _objectSpread(_objectSpread({
    disabled: disabled
  }, actionProps), others);
  if (dataTeamixSpm) {
    buttonProps['data-teamix-spm'] = dataTeamixSpm;
  }
  var content = /*#__PURE__*/React.createElement(Button, _extends({
    type: type
  }, buttonProps), buttonContent(children, icon, iconSize, context));
  var baseToolTipProps = _objectSpread({
    triggerType: 'hover',
    align: 't',
    trigger: content
  }, tooltipProps);
  if (tooltip || disabledTooltip) {
    if (tooltip && !disabledTooltip) {
      if (!disabled) {
        content = /*#__PURE__*/React.createElement(Balloon.Tooltip, baseToolTipProps, tooltip);
      }
    } else if (!tooltip && disabledTooltip) {
      if (disabled) {
        content = /*#__PURE__*/React.createElement(Balloon.Tooltip, baseToolTipProps, disabledTooltip);
      }
    } else if (tooltip && disabledTooltip) {
      var showToolTip = disabled ? disabledTooltip : tooltip;
      content = /*#__PURE__*/React.createElement(Balloon.Tooltip, baseToolTipProps, showToolTip);
    }
  }
  return content;
};
var ProActionMenuButtonItem = function ProActionMenuButtonItem(props) {
  var action = props.action,
    context = props.context,
    dataTeamixSpm = props['data-teamix-spm'];
  var config = action.config,
    btnContext = action.context,
    _onClick2 = action.onClick,
    children = action.children,
    icon = action.icon,
    disabled = action.disabled,
    tooltip = action.tooltip,
    disabledTooltip = action.disabledTooltip,
    tooltipProps = action.tooltipProps;
  var basePrefix = usePrefixCls('', {
    base: true
  });
  var prefixCls = usePrefixCls('teamix-pro-action');
  var menuItemActionConfig = Object.assign({}, config, {
    trigger: 'onClick'
  });
  var _useAction = useAction(menuItemActionConfig, btnContext || context),
    loading = _useAction.loading,
    menuItemProps = _objectWithoutProperties(_useAction, _excluded3);
  var buttonProps = disabled ? {} : _onClick2 ? _objectSpread(_objectSpread({}, menuItemProps), {}, {
    onClick: function onClick(e) {
      return _onClick2(e, context);
    }
  }) : _objectSpread({}, menuItemProps);
  if (dataTeamixSpm) {
    buttonProps['data-teamix-spm'] = dataTeamixSpm;
  }
  var content = buttonContent(children, icon, undefined, context);
  var baseToolTipProps = _objectSpread({
    triggerType: 'hover',
    align: 't',
    trigger: content
  }, tooltipProps);
  if (tooltip || disabledTooltip) {
    if (tooltip && !disabledTooltip) {
      if (!disabled) {
        content = /*#__PURE__*/React.createElement(Balloon.Tooltip, baseToolTipProps, tooltip);
      }
    } else if (!tooltip && disabledTooltip) {
      if (disabled) {
        content = /*#__PURE__*/React.createElement(Balloon.Tooltip, baseToolTipProps, disabledTooltip);
      }
    } else if (tooltip && disabledTooltip) {
      var showToolTip = disabled ? disabledTooltip : tooltip;
      content = /*#__PURE__*/React.createElement(Balloon.Tooltip, baseToolTipProps, showToolTip);
    }
  }
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cls(_defineProperty({}, basePrefix('disabled'), disabled), basePrefix('menu-item'), prefixCls('menu-item'))
  }, buttonProps), content);
};
function renderCommonActionButtonMenuItem(action, key, context, dataTeamixSpm) {
  if (action.type === 'divider') {
    return /*#__PURE__*/React.createElement(Menu.Divider, {
      key: key
    });
  }
  var menuBtn = action;
  if (menuBtn.actions && menuBtn.actions.length && menuBtn.disabled !== true) {
    return /*#__PURE__*/React.createElement(Menu.SubMenu, {
      key: key,
      label: menuBtn.label || menuBtn.children
    }, menuBtn.actions.map(function (a) {
      return renderCommonActionButtonMenuItem(a, a.key, context, a['data-teamix-spm']);
    }));
  }
  return /*#__PURE__*/React.createElement(ProActionMenuButtonItem, {
    key: key,
    action: action,
    context: context,
    "data-teamix-spm": "".concat(dataTeamixSpm, "-").concat(key)
  });
}
export var ProActionMenuButton = function ProActionMenuButton(props) {
  var icon = props.icon,
    iconSize = props.iconSize,
    label = props.label,
    actions = props.actions,
    children = props.children,
    context = props.context,
    _props$type2 = props.type,
    type = _props$type2 === void 0 ? 'primary' : _props$type2,
    className = props.className,
    noArrow = props.noArrow,
    others = _objectWithoutProperties(props, _excluded4);
  return /*#__PURE__*/React.createElement(MenuButton, _extends({
    popupTriggerType: "hover",
    autoWidth: false,
    menuProps: {
      mode: 'popup',
      triggerType: 'hover'
    },
    popupProps: {
      v2: true
    },
    type: type,
    label: buttonContent(label || children, icon, iconSize, context),
    className: cls(className, {
      'teamix-pro-actions-text-menu-btn-no-arrow': noArrow
    })
  }, others), actions.map(function (action, i) {
    return renderCommonActionButtonMenuItem(action, action.key || i, context, others === null || others === void 0 ? void 0 : others['data-teamix-spm']);
  }));
};
// 超出 max，则折叠起来
function foldExtraActions(actions, max, moreConfig) {
  if (actions.length <= max) {
    return actions;
  }
  return [].concat(_toConsumableArray(actions.slice(0, max - 1)), [_objectSpread(_objectSpread({
    key: '__teamix_pro_action_group_more_btn'
  }, moreConfig), {}, {
    actions: actions.slice(max - 1)
  })]);
}

// 如果 actions 数量超过了 max，则把第 max 个和剩余超出部分折叠起来成为一个 menu
// divider 不计数
function formatGroupActions(actions, max, moreConfig) {
  var MAX = max < 1 ? MAX_ACTTIONS : max;
  var count = 0;
  var index = 0;
  for (; index < actions.length && count < MAX; index++) {
    if (actions[index].type !== 'divider') {
      count += 1;
    }
  }
  return foldExtraActions(actions, Math.max(index, MAX), moreConfig);
}

// 渲染一个 button 或者 menu button
function renderCommonActionButton(button, context, isTypeText, dataTeamixSpm) {
  if (button.type === 'divider') {
    return /*#__PURE__*/React.createElement(Divider, {
      key: button.key,
      direction: "ver"
    });
  }
  var _ref = button,
    buttonContext = _ref.context,
    text = _ref.text,
    others = _objectWithoutProperties(_ref, _excluded5);
  var buttonProps = _objectSpread({
    context: Object.assign({}, context, buttonContext),
    text: text || isTypeText
  }, others);
  if (dataTeamixSpm) {
    buttonProps['data-teamix-spm'] = dataTeamixSpm;
  }
  if (!button.actions) {
    return /*#__PURE__*/React.createElement(ProActionButton, buttonProps);
  }
  return /*#__PURE__*/React.createElement(ProActionMenuButton, buttonProps);
}
function getDefaultMoreButton(type, more) {
  var defaultConfig = type === 'button' ? {
    children: getMessage('more')
  } : {
    icon: 'more-line',
    autoWidth: false,
    noArrow: true
  };
  if (!more) {
    return defaultConfig;
  }
  var moreConfig = typeof more === 'string' ? {
    children: more
  } : more;
  if (type === 'button') {
    return Object.assign(defaultConfig, moreConfig);
  }
  return moreConfig;
}
var MAX_ACTTIONS = 4;
function getKey(index, key) {
  if (key !== undefined) {
    return key;
  }
  return "__teamix_pro_action_key_".concat(index);
}
function getActionConfig(action, index, context) {
  if (action.actions) {
    var _ref2 = action,
      _key = _ref2.key,
      actions = _ref2.actions,
      _others = _objectWithoutProperties(_ref2, _excluded6);
    return _objectSpread({
      key: getKey(index, _key),
      actions: actions.map(function (a, j) {
        return getActionConfig(a, j, context);
      }).filter(function (action) {
        return action.visible !== false;
      })
    }, getTargetValue(_others, context));
  }
  var _ref3 = action,
    key = _ref3.key,
    config = _ref3.config,
    others = _objectWithoutProperties(_ref3, _excluded7);
  return _objectSpread({
    key: getKey(index, key),
    config: config
  }, getTargetValue(others, context));
}
export function ProActionGroup(props) {
  var _props$type3 = props.type,
    type = _props$type3 === void 0 ? 'button' : _props$type3,
    _props$divider = props.divider,
    divider = _props$divider === void 0 ? true : _props$divider,
    _props$max = props.max,
    max = _props$max === void 0 ? MAX_ACTTIONS : _props$max,
    moreText = props.moreText,
    more = props.more,
    context = props.context,
    _props$actions = props.actions,
    actions = _props$actions === void 0 ? [] : _props$actions,
    className = props.className,
    dataTeamixSpm = props['data-teamix-spm'],
    containerProps = _objectWithoutProperties(props, _excluded8);
  var isTypeText = type === 'text';
  var filteredActions = actions.map(function (action, index) {
    return getActionConfig(action, index, context);
  }).filter(function (action) {
    return action.visible !== false;
  });
  var formatedActions = formatGroupActions(filteredActions, max, getDefaultMoreButton(type, more || moreText));
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cls('teamix-pro-actions', "teamix-pro-actions-type-".concat(type), className, {
      'teamix-pro-actions-divider': type === 'button' ? false : divider
    })
  }, containerProps), formatedActions.map(function (actionBtn, i) {
    var isLastOne = i === formatedActions.length - 1;
    if (dataTeamixSpm) {
      return /*#__PURE__*/React.createElement(React.Fragment, {
        key: actionBtn.key
      }, renderCommonActionButton(actionBtn, context, isTypeText, "".concat(dataTeamixSpm, "-").concat(actionBtn.key || i)), isTypeText && divider && !isLastOne && /*#__PURE__*/React.createElement(Divider, {
        direction: "ver"
      }));
    } else return /*#__PURE__*/React.createElement(React.Fragment, {
      key: actionBtn.key
    }, renderCommonActionButton(actionBtn, context, isTypeText), isTypeText && divider && !isLastOne && /*#__PURE__*/React.createElement(Divider, {
      direction: "ver"
    }));
  }));
}
var ProAction = function ProAction(props) {
  return renderCommonActionButton(props);
};
ProAction.ProActionGroup = ProActionGroup;
export default ProAction;
export * from "./quick";

/**
 * @deprecated 建议使用 ProActionGroup 代替
 */
export var ActionGroup = ProActionGroup;

/**
 * @deprecated 建议使用 ProActionButton 代替
 */
export var ActionButton = ProActionButton;

/**
 * @deprecated 建议使用 ProActionMenuButton 代替
 */
export var ActionMenuButton = ProActionMenuButton;

/**
 * @deprecated 建议使用 ProActionConfig 代替
 */