@lemon-fe/kits 1.0.0-157 → 1.0.0-159

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

@@ -60,6 +60,9 @@ export default class DataGrid<TData extends Record<string, any>> extends Compone
         } & React.RefAttributes<import("@ag-grid-community/react").ICellEditorReactComp>>;
         Wrapper: typeof EditorWrapper;
     };
+    static isSummaryRow({ node }: {
+        node?: IRowNode<any>;
+    }): boolean;
     constructor(props: DataGridProps<TData>);
     private getPagination;
     componentDidUpdate(prevProps: DataGridProps<TData>): void;
@@ -74,9 +77,6 @@ export default class DataGrid<TData extends Record<string, any>> extends Compone
     afterReady(cb: () => void): void;
     private isPreserveSelected;
     private updateRowData;
-    isSummaryRow({ node }: {
-        node?: IRowNode<any>;
-    }): boolean;
     private getSummaryRowData;
     private getDataFromServer;
     private pagination;

package/es/components/DataGrid/index.js

@@ -367,7 +367,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
       return shallowEqual(prev[0], next[0]);
     }));
 
-    _defineProperty(_assertThisInitialized(_this), "getMemoizedDetailCellParams", memoizeOne(function (detailCell, params) {
+    _defineProperty(_assertThisInitialized(_this), "getMemoizedDetailCellParams", memoizeOne(function (detailCell, params, autoHeight) {
       if (detailCell === undefined) {
         return params;
       }
@@ -376,6 +376,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         masterDetail: true,
         detailCellRenderer: DetailCellRenderer,
         detailCellRendererParams: _objectSpread(_objectSpread(_objectSpread({}, params), detailCell.params), {}, {
+          autoHeight: autoHeight,
           render: detailCell.render
         })
       };
@@ -963,17 +964,6 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         }
       });
     }
-  }, {
-    key: "isSummaryRow",
-    value: function isSummaryRow(_ref3) {
-      var node = _ref3.node;
-
-      if (node && node.data && node.data[DataGrid.SummaryFlag]) {
-        return true;
-      }
-
-      return false;
-    }
   }, {
     key: "getSummaryRowData",
     value: function getSummaryRowData() {
@@ -1009,6 +999,16 @@ var DataGrid = /*#__PURE__*/function (_Component) {
           onLoading = _this$props7.onLoading,
           onLoad = _this$props7.onLoad;
 
+      var loadingChange = function loadingChange(flag) {
+        if (onLoading) {
+          onLoading(flag);
+        } else {
+          _this5.setState({
+            loading: flag
+          });
+        }
+      };
+
       if (typeof fetch === 'function') {
         if (this.requestId < Number.MAX_SAFE_INTEGER) {
           this.requestId += 1;
@@ -1019,10 +1019,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             pageSize = _this$state.pageSize;
         var columnState = this.columnApi.getColumnState();
         var id = this.requestId;
-        this.setState({
-          loading: true
-        });
-        onLoading === null || onLoading === void 0 ? void 0 : onLoading(true);
+        loadingChange(true);
         fetch({
           current: page,
           pageSize: pageSize,
@@ -1039,11 +1036,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             return;
           }
 
-          onLoading === null || onLoading === void 0 ? void 0 : onLoading(false);
-
-          _this5.setState({
-            loading: false
-          });
+          loadingChange(false);
 
           if (res.total !== undefined) {
             _this5.setState({
@@ -1075,11 +1068,10 @@ var DataGrid = /*#__PURE__*/function (_Component) {
             fetchError: err
           });
 
-          onLoading === null || onLoading === void 0 ? void 0 : onLoading(false);
+          loadingChange(false);
 
           _this5.setState(function (prev) {
             return {
-              loading: false,
               total: prev.page === 1 ? 0 : prev.total
             };
           });
@@ -1149,8 +1141,8 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         _this7.store.setState({
           errors: errors
         });
-      }).catch(function (_ref4) {
-        var fields = _ref4.fields;
+      }).catch(function (_ref3) {
+        var fields = _ref3.fields;
         var errors = new Map(_this7.store.getState().errors);
         var error = new Map();
         Object.entries(fields).forEach(function (item) {
@@ -1191,8 +1183,8 @@ var DataGrid = /*#__PURE__*/function (_Component) {
                   if (_this8.validator === null) {
                     promises.push(Promise.resolve(true));
                   } else {
-                    promises.push(_this8.validator.validate(record).catch(function (_ref5) {
-                      var fields = _ref5.fields;
+                    promises.push(_this8.validator.validate(record).catch(function (_ref4) {
+                      var fields = _ref4.fields;
                       return Promise.reject({
                         id: rowId,
                         fields: fields
@@ -1210,14 +1202,14 @@ var DataGrid = /*#__PURE__*/function (_Component) {
                 failed = [];
                 result.forEach(function (item) {
                   if (item.status === 'rejected') {
-                    var _ref6 = item.reason,
-                        id = _ref6.id,
-                        fields = _ref6.fields;
+                    var _ref5 = item.reason,
+                        id = _ref5.id,
+                        fields = _ref5.fields;
                     var error = new Map();
-                    Object.entries(fields).forEach(function (_ref7) {
-                      var _ref8 = _slicedToArray(_ref7, 2),
-                          field = _ref8[0],
-                          errs = _ref8[1];
+                    Object.entries(fields).forEach(function (_ref6) {
+                      var _ref7 = _slicedToArray(_ref6, 2),
+                          field = _ref7[0],
+                          errs = _ref7[1];
 
                       error.set(field, errs.map(function (err) {
                         return err.message || "".concat(field, "\u8F93\u5165\u9519\u8BEF");
@@ -1426,7 +1418,7 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         sideBar: sideBarProp === true ? this.sideBarDef : sideBarProp,
         pinnedBottomRowData: this.getSummaryRowData(summary),
         masterDetail: detailCell !== undefined
-      }, this.getMemoizedDetailCellParams(detailCell, detailCellRendererParams), restProps, {
+      }, this.getMemoizedDetailCellParams(detailCell, detailCellRendererParams, restProps.detailRowAutoHeight), restProps, {
         getRowStyle: this.getRowStyle,
         stopEditingWhenCellsLoseFocus: false,
         onRowDataUpdated: this.rowDataUpdated,
@@ -1449,6 +1441,17 @@ var DataGrid = /*#__PURE__*/function (_Component) {
         className: prefix('spin')
       }) : null));
     }
+  }], [{
+    key: "isSummaryRow",
+    value: function isSummaryRow(_ref8) {
+      var node = _ref8.node;
+
+      if (node && node.data && node.data[DataGrid.SummaryFlag]) {
+        return true;
+      }
+
+      return false;
+    }
   }]);
 
   return DataGrid;

package/es/components/DataGrid/index.less

@@ -282,6 +282,10 @@
   &-cell-detail {
     height: 100%;
     padding: 10px;
+
+    &-auto-height {
+      height: auto;
+    }
   }
 
   &-spin {

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

@@ -2,6 +2,7 @@ import type { ICellEditorParams } from '@ag-grid-community/core';
 import React, { type ReactNode } from 'react';
 declare const DetailCellRenderer: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & {
     render: (params: any) => ReactNode;
+    autoHeight?: boolean | undefined;
 } & React.RefAttributes<{
     refresh: () => boolean;
 }>>;

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

@@ -16,12 +16,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { useGridStore } from "../hooks";
+import classNames from 'classnames';
 import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { useGridStore } from "../hooks";
 import { prefix } from "../utils";
 var DetailCellRenderer = /*#__PURE__*/forwardRef(function (params, ref) {
   var node = params.node,
-      render = params.render;
+      render = params.render,
+      autoHeight = params.autoHeight;
 
   var _useState = useState(params.data),
       _useState2 = _slicedToArray(_useState, 2),
@@ -60,7 +62,7 @@ var DetailCellRenderer = /*#__PURE__*/forwardRef(function (params, ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: prefix('cell-detail')
+    className: classNames(prefix('cell-detail'), _defineProperty({}, prefix('cell-detail-auto-height'), autoHeight))
   }, render(_objectSpread(_objectSpread({}, params), {}, {
     context: context
   })));

package/es/components/SelectPanel/index.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+interface Props<RecordType> {
+    header: ReactNode;
+    body: ReactNode;
+    value?: RecordType[];
+    onChange?: (value: RecordType[]) => void;
+    fieldsName: {
+        label: string;
+        value: string;
+    };
+}
+export default function SelectPanel<RecordType>(props: Props<RecordType>): JSX.Element;
+export {};

package/es/components/SelectPanel/index.js

@@ -0,0 +1,61 @@
+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; }
+
+import { get } from 'lodash';
+import React from 'react';
+import { prefixClassName } from "../utils";
+var emptyValue = [];
+export default function SelectPanel(props) {
+  var header = props.header,
+      body = props.body,
+      _props$value = props.value,
+      value = _props$value === void 0 ? emptyValue : _props$value,
+      onChange = props.onChange,
+      fieldsName = props.fieldsName;
+  var prefix = prefixClassName('select-panel');
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix('left')
+  }, header ? /*#__PURE__*/React.createElement("div", {
+    className: prefix('header')
+  }, header) : null, body ? /*#__PURE__*/React.createElement("div", {
+    className: prefix('body')
+  }, body) : null), /*#__PURE__*/React.createElement("div", {
+    className: prefix('right')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefix('right-header')
+  }, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009\u62E9", value.length, "\u4E2A"), /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      if (value.length > 0) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(emptyValue);
+      }
+    }
+  }, "\u6E05\u7A7A")), /*#__PURE__*/React.createElement("div", {
+    className: prefix('right-body')
+  }, value.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: get(item, fieldsName.value),
+      className: prefix('item')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefix('item-name')
+    }, get(item, fieldsName.label)), /*#__PURE__*/React.createElement("div", {
+      className: prefix('item-delete'),
+      onClick: function onClick() {
+        var newValue = _toConsumableArray(value);
+
+        newValue.splice(idx, 1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      }
+    }));
+  }))));
+}

package/es/components/SelectPanel/index.less

@@ -0,0 +1,96 @@
+.@{prefixCls}-select-panel {
+  display: flex;
+  height: 100%;
+
+  &-left {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+  }
+
+  &-header {
+    min-height: 36px;
+    padding: 6px 12px;
+    background: #f9f9fb;
+    border-bottom: 1px solid @border-color-split;
+  }
+
+  &-body {
+    flex: 1;
+    min-height: 0;
+    padding: 8px @padding-md;
+  }
+
+  &-content {
+    width: 100%;
+    height: 100%;
+    .scrollBar();
+  }
+
+  &-right {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+    margin-left: 8px;
+    padding: 8px 0;
+    font-size: 12px;
+    line-height: 20px;
+    background: #f9f9fb;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      padding: 0 @padding-md;
+
+      span {
+        color: rgba(102, 102, 102, 0.7);
+      }
+    }
+
+    &-body {
+      flex: 1;
+      min-height: 0;
+      padding: 0 @padding-md;
+      overflow: auto;
+      .scrollBar();
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+
+    &-name {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &-delete {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      margin-left: 8px;
+      background-color: #bfc4ce;
+      border-radius: 50%;
+      cursor: pointer;
+
+      &::after {
+        display: block;
+        width: 6px;
+        height: 1px;
+        background: #fff;
+        content: '';
+      }
+    }
+  }
+}

package/es/components/SelectView/index.less

@@ -1,15 +1,11 @@
 .@{prefixCls}-select-view {
   height: 100%;
 
-  .@{ant-prefix}-modal-body > & {
-    margin: -@padding-md;
-  }
-
   & > .@{ant-prefix}-tabs {
     .fullTabs();
 
     & > .@{ant-prefix}-tabs-nav {
-      margin: @padding-md @padding-md 0;
+      margin-bottom: 0;
     }
   }
 
@@ -20,7 +16,7 @@
 
   &-sider {
     width: 228px;
-    padding: @padding-md;
+    padding: @padding-md @padding-md @padding-md 0;
     overflow: auto;
     border-right: 1px solid @border-color-split;
   }
@@ -30,7 +26,11 @@
     flex: 1;
     flex-direction: column;
     min-width: 0;
-    padding: @padding-md;
+    padding: @padding-md 0;
+  }
+
+  &-sider + &-main {
+    padding-left: @padding-md;
   }
 
   &-head + &-body {

package/es/index.d.ts

@@ -34,7 +34,7 @@ export { default as SelectView } from './components/SelectView';
 export { default as DataGrid } from './components/DataGrid';
 export * from './components/DataGrid/typings';
 export * from './components/DataGrid/hooks';
-export type { ColDef, ColGroupDef, ColumnState, GridOptions, GridReadyEvent, ICellEditorParams, ICellRendererParams, IHeaderParams, RowDataUpdatedEvent, CellValueChangedEvent, NavigateToNextCellParams, TabToNextCellParams, AgGridEvent, GroupCellRendererParams as IGroupCellRendererParams, Column, CellPosition, } from '@ag-grid-community/core';
+export type { ColDef, ColGroupDef, ColumnState, GridOptions, GridReadyEvent, ICellEditorParams, ICellRendererParams, IHeaderParams, RowDataUpdatedEvent, CellValueChangedEvent, NavigateToNextCellParams, TabToNextCellParams, AgGridEvent, GroupCellRendererParams as IGroupCellRendererParams, Column, CellPosition, IRowNode, } from '@ag-grid-community/core';
 export { GridApi, ColumnApi } from '@ag-grid-community/core';
 export * from '@ag-grid-community/react';
 export { default as TipMark } from './components/TipMark';
@@ -49,3 +49,4 @@ export { default as BlankLayout } from './layouts/BlankLayout';
 export { default as MicroLayout } from './layouts/MicroLayout';
 export { default as Breadcrumb } from './layouts/Breadcrumb';
 export { default as useBatchOperator } from './hooks/useBatchOperator';
+export { default as SelectPanel } from './components/SelectPanel';

package/es/index.js

@@ -40,4 +40,5 @@ export { default as BasicLayout } from "./layouts/BasicLayout";
 export { default as BlankLayout } from "./layouts/BlankLayout";
 export { default as MicroLayout } from "./layouts/MicroLayout";
 export { default as Breadcrumb } from "./layouts/Breadcrumb";
-export { default as useBatchOperator } from "./hooks/useBatchOperator";
+export { default as useBatchOperator } from "./hooks/useBatchOperator";
+export { default as SelectPanel } from "./components/SelectPanel";

package/es/index.less

@@ -25,6 +25,7 @@
 @import './components/GreyPanel/index.less';
 @import './components/InputNumber/index.less';
 @import './components//InputCompact/index.less';
+@import './components/SelectPanel/index.less';
 
 @import './layouts/BasicLayout/components/MainFramework/index.less';
 @import './layouts/Breadcrumb/index.less';

package/es/styles/utils.less

@@ -90,7 +90,7 @@
   }
 }
 
-.scrollBar (@width: 6px) {
+.scrollBar (@width: 8px) {
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/kits",
-  "version": "1.0.0-157",
+  "version": "1.0.0-159",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",