@lemon-fe/kits 1.0.2 → 1.0.3-0

package/es/components/DataGrid/index.js

@@ -93,7 +93,7 @@ import { MasterDetailModule } from "./modules/master-detail/main";
 import { MenuModule } from "./modules/menu/main";
 import { RowGroupingModule } from "./modules/row-grouping/main";
 import { SideBarModule } from "./modules/side-bar/main";
-import Actions from "./renderer/Actions";
+import ActionsRenderer from "./renderer/ActionsRenderer";
 import CellIndexRender from "./renderer/CellIndexRenderer";
 import CellRenderer from "./renderer/CellRenderer";
 import DetailCellRenderer from "./renderer/DetailCellRenderer";
@@ -1302,36 +1302,26 @@ var DataGrid = /*#__PURE__*/function (_Component) {
       }
 
       if (rowActions !== undefined) {
+        var _this$props$rowAction;
+
         leafColIds.push('$$actions');
         result.push({
           colId: '$$actions',
           pinned: 'right',
-          cellRenderer: CellRenderer,
-          width: 1,
-          maxWidth: 1,
-          headerName: '',
+          headerName: '操作',
           resizable: false,
           sortable: false,
           suppressAutoSize: true,
           suppressMovable: true,
+          suppressColumnsToolPanel: true,
           lockPinned: true,
           lockVisible: true,
+          initialWidth: (_this$props$rowAction = this.props.rowActionsColumnWidth) !== null && _this$props$rowAction !== void 0 ? _this$props$rowAction : 160,
           cellClass: prefix('operator-cell'),
-          headerClass: prefix('operator-cell'),
           cellRendererParams: {
-            render: function render(_, data) {
-              var actions = _this6.props.rowActions;
-
-              if (actions !== undefined) {
-                return /*#__PURE__*/React.createElement(Actions, {
-                  data: data,
-                  actions: actions
-                });
-              }
-
-              return null;
-            }
-          }
+            actions: this.props.rowActions
+          },
+          cellRenderer: ActionsRenderer
         });
       }
 

package/es/components/DataGrid/index.less

@@ -350,43 +350,12 @@
   }
 
   &-operator {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    bottom: 4px;
-    z-index: 10;
-    display: none;
-    align-items: center;
-    justify-content: flex-end;
-    padding-left: 8px;
-    white-space: nowrap;
-    background-color: var(--ag-background-color);
-
-    .ag-row-hover & {
-      display: flex;
-      background-color: var(--ag-row-hover-color);
-    }
-
-    .ag-row-selected & {
-      background-color: var(--ag-selected-row-background-color);
-    }
-
     &-cell {
       display: flex;
       align-items: center;
       padding-right: 0;
       padding-left: 0;
-      overflow: visible;
-      background-color: inherit;
-      border: none !important;
-
-      &::after {
-        display: none !important;
-      }
-    }
-
-    &-column {
-      border-right: none !important;
+      outline: none;
 
       &::after {
         display: none !important;
@@ -394,21 +363,12 @@
     }
 
     &-item {
-      margin-right: 8px;
       padding: 0 8px;
       color: @primary-color;
       line-height: 28px;
       background-color: transparent;
       border: none;
-      border-radius: 4px;
-      outline: none;
       cursor: pointer;
-      transition: background-color 0.2s;
-      user-select: none;
-
-      &:hover {
-        background-color: .primary(0.12) [];
-      }
 
       &:active {
         color: .primary(0.8) [];
@@ -417,10 +377,6 @@
       &-disabled {
         color: rgba(51, 51, 51, 0.5) !important;
         cursor: not-allowed;
-
-        &:hover {
-          background-color: rgba(51, 51, 51, 0.06);
-        }
       }
     }
 
@@ -429,7 +385,6 @@
 
       &-item {
         text-align: left;
-        background-color: #fff;
         border: none;
         outline: none;
         .popoverItem();

package/es/components/DataGrid/renderer/Actions.d.ts

@@ -4,6 +4,7 @@ interface Props<T> {
     actions: RowActionsType<T>;
     data: T;
     context?: any;
+    maxShowCount?: number;
 }
 export default function Actions<T>(props: Props<T>): JSX.Element;
 export {};

package/es/components/DataGrid/renderer/Actions.js

@@ -1,78 +1,34 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import Icons from "../../Icons";
+import React from 'react';
 import { prefixClassName } from "../../utils";
-import { Popover } from 'antd';
+import Dropdown from "../../Dropdown";
+import Icons from "../../Icons";
 var prefix = prefixClassName('grid-operator');
 
 var getKey = function getKey(item, idx) {
-  var key = item.key || (typeof item.text === 'string' ? item.text : idx);
+  var key = item.key || (typeof item.label === 'string' ? item.label : idx);
   return key;
 };
 
 function ActionItem(props) {
-  var item = props.item,
-      data = props.data;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var dropDown = item.dropDown ? item.dropDown.filter(function (sub) {
-    return sub !== null;
-  }) : [];
+  var item = props.item;
+  var children = item.children || [];
   var node = /*#__PURE__*/React.createElement("div", {
     className: classNames(prefix('item'), _defineProperty({}, prefix("item-disabled"), item.disabled)),
-    onMouseUp: function onMouseUp() {
-      if (item.disabled) {
-        return;
-      }
-
-      if (dropDown.length > 0) {
-        setVisible(true);
+    onClick: item.onClick
+  }, item.label, children.length > 0 && /*#__PURE__*/React.createElement(Icons.Down, null));
+
+  if (children.length > 0) {
+    return /*#__PURE__*/React.createElement(Dropdown, {
+      trigger: 'click',
+      menu: {
+        items: children
+      },
+      overlayStyle: {
+        minWidth: 100
       }
-
-      if (item.onClick) {
-        item.onClick(data);
-      }
-    }
-  }, item.text, dropDown.length > 0 && /*#__PURE__*/React.createElement(Icons.Down, null));
-
-  if (dropDown.length > 0) {
-    return /*#__PURE__*/React.createElement(Popover, {
-      placement: "bottomRight",
-      trigger: "click",
-      visible: visible,
-      onVisibleChange: setVisible,
-      overlayClassName: prefix('popover'),
-      content: dropDown.map(function (menu, idx) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: classNames(prefix("popover-item"), _defineProperty({}, prefix("popover-item-disabled"), item.disabled)),
-          key: getKey(menu, idx),
-          onClick: function onClick() {
-            if (!menu.disabled && menu.onClick) {
-              menu.onClick(data);
-            }
-
-            setVisible(false);
-          }
-        }, menu.text);
-      })
     }, node);
   }
 
@@ -82,38 +38,43 @@ function ActionItem(props) {
 export default function Actions(props) {
   var data = props.data,
       actionsProp = props.actions,
-      context = props.context;
-  var ref = useRef(null);
+      context = props.context,
+      _props$maxShowCount = props.maxShowCount,
+      maxShowCount = _props$maxShowCount === void 0 ? Infinity : _props$maxShowCount;
   var actions = typeof actionsProp === 'function' ? actionsProp(data, context) : actionsProp;
-  useEffect(function () {
-    var node = ref.current;
 
+  var traverse = function traverse(node, idx) {
     if (node === null) {
-      return;
+      return null;
     }
 
-    var handler = function handler(e) {
-      e.stopPropagation();
+    var handler = node.onClick;
+    return {
+      label: node.text,
+      key: node.key || idx.toString(),
+      onClick: handler ? function () {
+        return handler.call(node, data);
+      } : undefined,
+      disabled: node.disabled,
+      children: node.dropDown ? node.dropDown.map(function (subNode, subIdx) {
+        return traverse(subNode, subIdx);
+      }).filter(Boolean) : undefined
     };
+  };
 
-    node.addEventListener('click', handler);
-    return function () {
-      node.removeEventListener('click', handler);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: prefix(),
-    ref: ref
-  }, actions.map(function (item, idx) {
-    if (item === null) {
-      return null;
-    }
+  var list = actions.map(traverse).filter(Boolean);
+
+  if (list.length > maxShowCount) {
+    list = list.slice(0, maxShowCount - 1).concat([{
+      label: '更多',
+      children: list.slice(maxShowCount - 1)
+    }]);
+  }
 
-    var key = getKey(item, idx);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (item, idx) {
     return /*#__PURE__*/React.createElement(ActionItem, {
-      key: key,
-      item: item,
-      data: data
+      key: getKey(item, idx),
+      item: item
     });
   }));
 }

package/es/components/DataGrid/renderer/ActionsRenderer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import type { RowActionsType } from '../typings';
+export default function ActionsRenderer<TData>(props: ICellRendererParams<TData> & {
+    actions: RowActionsType<TData>;
+}): JSX.Element | null;

package/es/components/DataGrid/renderer/ActionsRenderer.js

@@ -0,0 +1,46 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import DataGrid from "../index";
+import Actions from "./Actions";
+export default function ActionsRenderer(props) {
+  var actions = props.actions,
+      node = props.node;
+
+  var _useState = useState(node.data),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  useEffect(function () {
+    var handler = function handler(evt) {
+      setData(evt.newData);
+    };
+
+    node.addEventListener('dataChanged', handler);
+    return function () {
+      node.removeEventListener('dataChanged', handler);
+    };
+  }, []);
+
+  if (DataGrid.isSummaryRow({
+    node: node
+  }) || !data) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Actions, {
+    data: data,
+    actions: actions
+  });
+}

package/es/components/DataGrid/typings.d.ts

@@ -185,6 +185,11 @@ export interface DataGridProps<TData> extends Omit<AgGridReactProps<TData>, 'row
      * @description 行操作按钮组
      */
     rowActions?: RowActionsType<TData>;
+    /**
+     *
+     * @description 行操作按钮组列宽
+     */
+    rowActionsColumnWidth?: number;
     /**
      * @description 加载动画
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.2",
+  "version": "1.0.3-0",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",