@teamias/rex-design 0.1.21 → 0.1.22

package/dist/components/data-cell/data-cell.js

@@ -5,6 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 { ErrorBoundaryProvider, useErrorBoundary, useRexProConfigProvider } from "../../context";
+import { Dropdown } from 'antd';
 import React from 'react';
 import { cellItemMap } from "./modules/cellItemMap";
 import { Wrapper } from "./style";
@@ -13,22 +14,40 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 /** 内部渲染组件，会在检测到父级有 ErrorBoundary 时直接抛出错误 */
 var DataCellInner = function DataCellInner(_ref) {
   var items = _ref.items,
-    onClick = _ref.onClick,
+    _onClick = _ref.onClick,
     propSystemHistory = _ref.systemHistory;
   var _useRexProConfigProvi = useRexProConfigProvider(),
     contextSystemHistory = _useRexProConfigProvi.systemHistory;
   var systemHistory = propSystemHistory !== null && propSystemHistory !== void 0 ? propSystemHistory : contextSystemHistory;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: items.map(function (item, index) {
-      var _cellItemMap$item$typ;
+      var _cellItemMap$item$typ, _dropdown$items, _dropdown$trigger;
+      var content = (_cellItemMap$item$typ = cellItemMap[item.type]) === null || _cellItemMap$item$typ === void 0 ? void 0 : _cellItemMap$item$typ.call(cellItemMap, {
+        item: item,
+        click: _onClick,
+        systemHistory: systemHistory
+      });
+      var dropdown = item.dropdown;
       return /*#__PURE__*/_jsx(Wrapper, {
         style: item.rootStyle,
         className: "data-cell-row-item ".concat(item.type),
-        children: (_cellItemMap$item$typ = cellItemMap[item.type]) === null || _cellItemMap$item$typ === void 0 ? void 0 : _cellItemMap$item$typ.call(cellItemMap, {
-          item: item,
-          click: onClick,
-          systemHistory: systemHistory
-        })
+        children: dropdown !== null && dropdown !== void 0 && (_dropdown$items = dropdown.items) !== null && _dropdown$items !== void 0 && _dropdown$items.length ? /*#__PURE__*/_jsx(Dropdown, {
+          menu: {
+            items: dropdown.items,
+            onClick: function onClick(_ref2) {
+              var key = _ref2.key;
+              return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item, undefined, key);
+            }
+          },
+          trigger: (_dropdown$trigger = dropdown.trigger) !== null && _dropdown$trigger !== void 0 ? _dropdown$trigger : ['click'],
+          placement: dropdown.placement,
+          children: /*#__PURE__*/_jsx("div", {
+            style: {
+              cursor: 'pointer'
+            },
+            children: content
+          })
+        }) : content
       }, index);
     })
   });

package/dist/components/data-cell/demo/DropdownDemo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: Dropdown 下拉菜单
+ * description: 所有类型均支持 `dropdown` 配置。默认点击触发，可通过 `trigger` 修改为 click / hover / contextMenu。菜单项点击通过统一的 `onClick` 回调抛出，第三个参数 `dropdownKey` 为菜单项的 key。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/data-cell/demo/DropdownDemo.js

@@ -0,0 +1,133 @@
+import { DataCell, RexProConfigProvider } from "../../..";
+import { message } from 'antd';
+
+/**
+ * title: Dropdown 下拉菜单
+ * description: 所有类型均支持 `dropdown` 配置。默认点击触发，可通过 `trigger` 修改为 click / hover / contextMenu。菜单项点击通过统一的 `onClick` 回调抛出，第三个参数 `dropdownKey` 为菜单项的 key。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(RexProConfigProvider, {
+    value: {},
+    children: /*#__PURE__*/_jsx(DataCell, {
+      onClick: function onClick(item, subItem, dropdownKey) {
+        if (dropdownKey) {
+          message.info("\u83DC\u5355\u9879\u70B9\u51FB: key=".concat(dropdownKey, ", type=").concat(item.type));
+        }
+      },
+      items: [
+      // 文本类型 + dropdown（点击触发）
+      {
+        type: 'text',
+        props: {
+          label: '商品名称',
+          value: '右键点击我试试'
+        },
+        dropdown: {
+          items: [{
+            key: 'edit',
+            label: '编辑'
+          }, {
+            key: 'copy',
+            label: '复制'
+          }, {
+            key: 'delete',
+            label: '删除',
+            danger: true
+          }],
+          trigger: ['contextMenu'] // 右键触发
+        }
+      },
+      // 标签类型 + dropdown（点击触发）
+      {
+        type: 'tag',
+        props: {
+          label: '状态',
+          value: '进行中',
+          color: 'processing'
+        },
+        dropdown: {
+          items: [{
+            key: 'pending',
+            label: '待处理'
+          }, {
+            key: 'processing',
+            label: '进行中'
+          }, {
+            key: 'done',
+            label: '已完成'
+          }],
+          trigger: ['hover']
+        }
+      },
+      // group-v2 顶层 dropdown
+      {
+        type: 'group-v2',
+        dropdown: {
+          items: [{
+            key: 'expand',
+            label: '展开详情'
+          }, {
+            key: 'collapse',
+            label: '收起'
+          }]
+        },
+        props: {
+          label: '订单信息',
+          itemsDirection: 'row',
+          itemsGap: 8,
+          itemsSeparator: ' / ',
+          items: [{
+            type: 'text',
+            value: 'ORD-20240110'
+          }, {
+            type: 'tag',
+            value: '已发货',
+            color: 'blue'
+          }]
+        }
+      },
+      // group-v2 子项级别 dropdown
+      {
+        type: 'group-v2',
+        props: {
+          label: '子项菜单',
+          itemsDirection: 'row',
+          itemsGap: 12,
+          items: [{
+            type: 'text',
+            value: '右键我',
+            style: {
+              color: '#1890ff',
+              cursor: 'pointer'
+            },
+            dropdown: {
+              items: [{
+                key: 'view',
+                label: '查看'
+              }, {
+                key: 'share',
+                label: '分享'
+              }],
+              trigger: ['contextMenu']
+            }
+          }, {
+            type: 'tag',
+            value: '点击我',
+            color: 'green',
+            dropdown: {
+              items: [{
+                key: 'pin',
+                label: '置顶'
+              }, {
+                key: 'archive',
+                label: '归档'
+              }],
+              trigger: ['click']
+            }
+          }]
+        }
+      }]
+    })
+  });
+});

package/dist/components/data-cell/modules/cellItemMap.d.ts

@@ -4,7 +4,7 @@ import { IDataCellProps, TDataCellType, TGroupV2 } from '../types';
 export declare const cellItemMap: TCellItemMap;
 type TCellItemFnData = {
     item: IDataCellProps['items'][number];
-    click?: (rawItem: IDataCellProps['items'][number], subItem?: Exclude<TGroupV2['props'], undefined>['items'][number]) => void;
+    click?: (rawItem: IDataCellProps['items'][number], subItem?: Exclude<TGroupV2['props'], undefined>['items'][number], dropdownKey?: string) => void;
     systemHistory?: ReturnType<typeof useRexProConfigProvider>['systemHistory'];
 };
 type TCellItemMap = Record<TDataCellType, (data: TCellItemFnData) => React.ReactNode>;

package/dist/components/data-cell/modules/cellItemMap.js

@@ -1,4 +1,4 @@
-var _excluded = ["ellipsis", "tooltip", "copyable", "action", "urlTarget", "url", "style", "type"],
+var _excluded = ["ellipsis", "tooltip", "copyable", "action", "urlTarget", "url", "style", "type", "dropdown"],
   _excluded2 = ["mediaViewerType"],
   _excluded3 = ["value"],
   _excluded4 = ["iconsType"];
@@ -12,7 +12,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { EyeOutlined } from '@ant-design/icons';
 import { downloadResourceFile, Icons, MediaViewer, showFileViewer } from "../../..";
-import { Tag, Tooltip, Typography } from 'antd';
+import { Dropdown, Tag, Tooltip, Typography } from 'antd';
 import React, { cloneElement } from 'react';
 import { DataCell } from "../data-cell";
 import { DataCellRowText, DataCellRowTextLabel, DataCellRowTextValue } from "../style";
@@ -334,6 +334,7 @@ export var cellItemMap = {
         url = subItem.url,
         style = subItem.style,
         type = subItem.type,
+        dropdown = subItem.dropdown,
         other = _objectWithoutProperties(subItem, _excluded);
       var renderBox = function renderBox(content) {
         var afterContent = /*#__PURE__*/_jsx(DataCellRowTextValue, {
@@ -435,23 +436,48 @@ export var cellItemMap = {
           children: afterContent
         }, "renderItem-".concat(index, "-").concat(count++));
       };
+      var wrapDropdown = function wrapDropdown(node) {
+        var _dropdown$items;
+        if (dropdown !== null && dropdown !== void 0 && (_dropdown$items = dropdown.items) !== null && _dropdown$items !== void 0 && _dropdown$items.length) {
+          var _dropdown$trigger;
+          return /*#__PURE__*/_jsx(Dropdown, {
+            menu: {
+              items: dropdown.items,
+              onClick: function onClick(_ref9) {
+                var key = _ref9.key;
+                return click === null || click === void 0 ? void 0 : click(item, subItem, key);
+              }
+            },
+            trigger: (_dropdown$trigger = dropdown.trigger) !== null && _dropdown$trigger !== void 0 ? _dropdown$trigger : ['click'],
+            placement: dropdown.placement,
+            children: /*#__PURE__*/_jsx("div", {
+              style: {
+                display: 'inline-flex',
+                cursor: 'pointer'
+              },
+              children: node
+            })
+          });
+        }
+        return node;
+      };
       switch (type) {
         case 'text':
-          return renderBox(subItem.value);
+          return wrapDropdown(renderBox(subItem.value));
         case 'img':
           {
-            var _ref9 = other,
-              mediaViewerType = _ref9.mediaViewerType,
-              otherProps = _objectWithoutProperties(_ref9, _excluded2);
-            return renderBox( /*#__PURE__*/_jsx(MediaViewer, _objectSpread({
+            var _ref10 = other,
+              mediaViewerType = _ref10.mediaViewerType,
+              otherProps = _objectWithoutProperties(_ref10, _excluded2);
+            return wrapDropdown(renderBox( /*#__PURE__*/_jsx(MediaViewer, _objectSpread({
               type: mediaViewerType
-            }, otherProps)));
+            }, otherProps))));
           }
         case 'tag':
           {
-            var _ref10 = other,
-              value = _ref10.value,
-              _otherProps = _objectWithoutProperties(_ref10, _excluded3);
+            var _ref11 = other,
+              value = _ref11.value,
+              _otherProps = _objectWithoutProperties(_ref11, _excluded3);
             var color = function () {
               if (subItem.color !== null && _typeof(subItem.color) === 'object') {
                 var _subItem$color, _subItem$color$toHexS;
@@ -462,19 +488,19 @@ export var cellItemMap = {
               }
               return '#2db7f5';
             }();
-            return renderBox(isEmpty(value) ? '' : /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, _otherProps), {}, {
+            return wrapDropdown(renderBox(isEmpty(value) ? '' : /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, _otherProps), {}, {
               color: color,
               children: value
-            })));
+            }))));
           }
         case 'icon':
           {
-            var _ref11 = other,
-              iconsType = _ref11.iconsType,
-              _otherProps2 = _objectWithoutProperties(_ref11, _excluded4);
-            return renderBox( /*#__PURE__*/_jsx(Icons, _objectSpread({
+            var _ref12 = other,
+              iconsType = _ref12.iconsType,
+              _otherProps2 = _objectWithoutProperties(_ref12, _excluded4);
+            return wrapDropdown(renderBox( /*#__PURE__*/_jsx(Icons, _objectSpread({
               type: iconsType
-            }, _otherProps2)));
+            }, _otherProps2))));
           }
         default:
           break;

package/dist/components/data-cell/types.d.ts

@@ -1,12 +1,23 @@
 import { Icons, MediaViewer, useRexProConfigProvider } from "../..";
-import { GetProps, Tag } from 'antd';
+import { Dropdown, GetProps, Tag } from 'antd';
 import { HTMLAttributeAnchorTarget } from 'react';
+/** Dropdown 配置 */
+export interface IDataCellDropdown {
+    /** 下拉菜单项 */
+    items: Exclude<GetProps<typeof Dropdown>['menu'], undefined>['items'];
+    /** 触发方式 @default ['click'] */
+    trigger?: GetProps<typeof Dropdown>['trigger'];
+    /** 弹出位置 */
+    placement?: GetProps<typeof Dropdown>['placement'];
+}
 /** 组件props */
 export interface IDataCellProps {
     /** 每一行展示内容 */
     items: Array<TGroupV2 | IDataCellItem<TDataCellType>>;
-    /** 点击回调 */
-    onClick?: (item: IDataCellItem, subItem?: Exclude<TGroupV2['props'], undefined>['items'][number]) => void;
+    /** 点击回调（action='custom' 或 Dropdown 菜单项点击时触发） */
+    onClick?: (item: IDataCellItem, subItem?: Exclude<TGroupV2['props'], undefined>['items'][number], 
+    /** Dropdown 菜单项点击时的 key */
+    dropdownKey?: string) => void;
     /** 系统路由历史对象，用于内部跳转 */
     systemHistory?: ReturnType<typeof useRexProConfigProvider>['systemHistory'];
 }
@@ -17,6 +28,8 @@ export interface IDataCellItem<T extends TDataCellType = TDataCellType> {
     props?: ICellPropsMap[T];
     /** 顶层样式 */
     rootStyle?: React.CSSProperties;
+    /** 下拉菜单配置 */
+    dropdown?: IDataCellDropdown;
     /** 扩展信息 */
     extra?: {
         rowSpan?: number;
@@ -129,6 +142,8 @@ export type TGroupV2 = {
             iconsType?: GetProps<typeof Icons>['type'];
         } & ICommonGroupV2 & Omit<GetProps<typeof Icons>, 'type'>) | TGroupV2>;
     };
+    /** 下拉菜单配置 */
+    dropdown?: IDataCellDropdown;
     /** 顶层样式 */
     rootStyle?: React.CSSProperties;
     /** 扩展信息 */
@@ -139,6 +154,8 @@ export type TGroupV2 = {
 };
 /** 为 group-v2 公共属性 */
 export interface ICommonGroupV2 {
+    /** 下拉菜单配置 */
+    dropdown?: IDataCellDropdown;
     /**
      * 缺省
      * @default 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/rex-design",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",