@pointcloud/pcloud-components 0.1.33 → 0.1.34

package/dist/esm/CRUD/index.less

@@ -0,0 +1,140 @@
+@import '../commonStyle/index.less';
+
+.@{prefix}-crud {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &.fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    padding: 10px;
+    background-color: #fff;
+  }
+
+  &-action-tool-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  &-action-bar,
+  &-tool-bar {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .tool-icon {
+    cursor: pointer;
+    padding: 5px;
+    border: 1px solid #e3e3e3;
+    border-radius: 50%;
+    font-size: 15px;
+
+    &:hover {
+      border-color: #2e4dd9;
+      color: #2e4dd9;
+    }
+
+    &.rotating {
+      animation: rotating 0.5s linear;
+    }
+  }
+
+  // column setting popup
+  .column-setting-popup {
+    .ant-popover-title {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
+
+    .ant-popover-inner-content {
+      width: 100%;
+      padding: 8px 0 4px;
+    }
+
+    .column-setting-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .column-setting-list {
+      display: flex;
+      flex-direction: column;
+      max-height: 300px;
+      overflow-y: auto;
+      margin-bottom: 0;
+      padding-inline-start: 0;
+      list-style: none;
+      padding: 5px 0;
+    }
+
+    .column-setting-list::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    .column-setting-list::-webkit-scrollbar-track {
+      border-radius: 3px;
+    }
+
+    .column-setting-list::-webkit-scrollbar-thumb {
+      width: 5px;
+      border-radius: 3px;
+      background: #8b8b8b;
+    }
+
+    .column-setting-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 10px;
+      user-select: none;
+      border-radius: 4px;
+      margin-bottom: 2px;
+      min-height: 32px;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+
+    .column-drag-handle {
+      cursor: move;
+      margin-right: 8px;
+      display: flex;
+      align-items: center;
+      color: #666;
+    }
+
+    .column-setting-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 4px;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+
+  &-table {
+    flex: 1;
+  }
+
+  &-modalform-view {
+    .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+      display: none;
+    }
+  }
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/esm/CRUD/toolbar.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import type { DColumnType } from '../DTable';
+export interface ToolbarProps {
+    className?: string;
+    fullScreen?: boolean;
+    columns?: DColumnType[];
+    onActions?: {
+        setFullScreen?: (fullScreen: boolean) => void;
+        handleRefresh?: () => void;
+        onColumnSettingChanged?: (checkedList: CheckboxValueType[], sortedColumns?: DColumnType[]) => void;
+    };
+}
+declare function Toolbar({ className, fullScreen, columns, onActions }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Toolbar>;
+export default _default;

package/dist/esm/CRUD/toolbar.js

@@ -0,0 +1,249 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { memo, useState, useRef, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { Popover, Checkbox, Button } from 'antd';
+import { ReloadOutlined, FullscreenOutlined, FullscreenExitOutlined, BarsOutlined, HolderOutlined } from '@ant-design/icons';
+import Sortable from 'sortablejs';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function Toolbar(_ref) {
+  var className = _ref.className,
+    fullScreen = _ref.fullScreen,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    onActions = _ref.onActions;
+  var timer = useRef(null);
+  var sortableInstance = useRef(null);
+  var sortableContainer = useRef(null);
+  var containerNode = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    columnSettingVisible = _useState2[0],
+    setColumnSettingVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rotating = _useState4[0],
+    setRotating = _useState4[1];
+  var reloadIconClass = useMemo(function () {
+    return classNames('tool-icon', {
+      rotating: rotating
+    });
+  }, [rotating]);
+  var checkedValues = useMemo(function () {
+    return columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
+      return item.title;
+    }).filter(function (title) {
+      return title !== undefined;
+    });
+  }, [columns]);
+  var _useState5 = useState({
+      sortedColumns: columns,
+      checkedList: checkedValues
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    columnSetting = _useState6[0],
+    setColumnSetting = _useState6[1];
+  var _ref2 = onActions || {},
+    setFullScreen = _ref2.setFullScreen,
+    handleRefresh = _ref2.handleRefresh;
+  var handleFullScreen = function handleFullScreen() {
+    var newFullscreen = !fullScreen;
+    setFullScreen === null || setFullScreen === void 0 || setFullScreen(newFullscreen);
+  };
+  var handleReload = function handleReload() {
+    setRotating(true);
+    handleRefresh === null || handleRefresh === void 0 || handleRefresh();
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = window.setTimeout(function () {
+      setRotating(false);
+    }, 500);
+  };
+  var handleConfirm = function handleConfirm() {
+    var _onActions$onColumnSe;
+    setColumnSettingVisible(false);
+    onActions === null || onActions === void 0 || (_onActions$onColumnSe = onActions.onColumnSettingChanged) === null || _onActions$onColumnSe === void 0 || _onActions$onColumnSe.call(onActions, columnSetting.checkedList, columnSetting.sortedColumns);
+  };
+  var handleReset = function handleReset() {
+    setColumnSetting({
+      sortedColumns: columns,
+      checkedList: checkedValues
+    });
+  };
+  var onCheckAllChange = function onCheckAllChange(e) {
+    var checked = e.target.checked;
+    if (checked) {
+      // 全选所有列标题
+      var allValues = columns.map(function (item) {
+        return item.title;
+      }).filter(function (title) {
+        return title !== undefined;
+      });
+      setColumnSetting(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          checkedList: allValues
+        });
+      });
+    } else {
+      // 取消全选
+      setColumnSetting(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          checkedList: []
+        });
+      });
+    }
+  };
+  useEffect(function () {
+    return function () {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  useEffect(function () {
+    if (columnSettingVisible && !sortableInstance.current && sortableContainer.current) {
+      sortableInstance.current = Sortable.create(sortableContainer.current, {
+        animation: 150,
+        handle: '.column-drag-handle',
+        draggable: '.column-setting-item',
+        direction: 'vertical',
+        onEnd: function onEnd(_ref3) {
+          var oldIndex = _ref3.oldIndex,
+            newIndex = _ref3.newIndex;
+          if (oldIndex !== undefined && newIndex !== undefined && oldIndex !== newIndex) {
+            // 更新临时列顺序
+            var newColumns = _toConsumableArray(columnSetting.sortedColumns);
+            newColumns.splice(newIndex, 0, newColumns.splice(oldIndex, 1)[0]);
+            setColumnSetting(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, {
+                sortedColumns: newColumns
+              });
+            });
+          }
+        }
+      });
+    } else if (!columnSettingVisible && sortableInstance.current) {
+      sortableInstance.current.destroy();
+      sortableInstance.current = null;
+    }
+    return function () {
+      if (sortableInstance.current) {
+        sortableInstance.current.destroy();
+        sortableInstance.current = null;
+      }
+    };
+  }, [columns, columnSettingVisible, columnSetting.sortedColumns]);
+  var indeterminate = useMemo(function () {
+    return !!columnSetting.checkedList.length && columnSetting.checkedList.length < columns.length;
+  }, [columnSetting.checkedList, columns.length]);
+  var checkAll = useMemo(function () {
+    return columnSetting.checkedList.length === columns.length;
+  }, [columnSetting.checkedList, columns.length]);
+  var popoverContent = useMemo(function () {
+    var _columnSetting$sorted;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("ul", {
+        ref: sortableContainer,
+        className: "column-setting-list",
+        children: (_columnSetting$sorted = columnSetting.sortedColumns) === null || _columnSetting$sorted === void 0 ? void 0 : _columnSetting$sorted.map(function (item) {
+          var isChecked = columnSetting.checkedList.includes(item === null || item === void 0 ? void 0 : item.title);
+          return /*#__PURE__*/_jsxs("li", {
+            className: "column-setting-item",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "column-drag-handle",
+              children: /*#__PURE__*/_jsx(HolderOutlined, {})
+            }), /*#__PURE__*/_jsx(Checkbox, {
+              checked: isChecked,
+              onChange: function onChange(e) {
+                var newCheckedList = e.target.checked ? [].concat(_toConsumableArray(columnSetting.checkedList), [item === null || item === void 0 ? void 0 : item.title]).filter(function (title) {
+                  return title !== undefined;
+                }) : columnSetting.checkedList.filter(function (title) {
+                  return title !== (item === null || item === void 0 ? void 0 : item.title);
+                });
+                setColumnSetting(function (prev) {
+                  return _objectSpread(_objectSpread({}, prev), {}, {
+                    checkedList: newCheckedList
+                  });
+                });
+              },
+              value: item === null || item === void 0 ? void 0 : item.title,
+              children: item === null || item === void 0 ? void 0 : item.title
+            })]
+          }, (item === null || item === void 0 ? void 0 : item.key) || (item === null || item === void 0 ? void 0 : item.dataIndex));
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "column-setting-footer",
+        children: [/*#__PURE__*/_jsx(Button, {
+          type: "link",
+          style: {
+            color: 'inherit'
+          },
+          onClick: function onClick() {
+            return setColumnSettingVisible(false);
+          },
+          children: "\u53D6\u6D88"
+        }), /*#__PURE__*/_jsx(Button, {
+          type: "link",
+          onClick: handleConfirm,
+          children: "\u786E\u5B9A"
+        })]
+      })]
+    });
+  }, [columnSetting.sortedColumns, columnSetting.checkedList, handleConfirm]);
+
+  // 使用useMemo优化Popover标题，避免不必要的重渲染
+  var popoverTitle = useMemo(function () {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "column-setting-title",
+      children: [/*#__PURE__*/_jsx(Checkbox, {
+        indeterminate: indeterminate,
+        onChange: onCheckAllChange,
+        checked: checkAll,
+        children: "\u5168\u9009"
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "link",
+        size: "small",
+        onClick: handleReset,
+        children: "\u91CD\u7F6E"
+      })]
+    });
+  }, [indeterminate, onCheckAllChange, checkAll, handleReset]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    ref: containerNode,
+    children: [/*#__PURE__*/_jsx(ReloadOutlined, {
+      className: reloadIconClass,
+      title: "\u5237\u65B0",
+      onClick: handleReload
+    }), fullScreen ? /*#__PURE__*/_jsx(FullscreenExitOutlined, {
+      className: "tool-icon",
+      title: "\u53D6\u6D88\u5168\u5C4F",
+      onClick: handleFullScreen
+    }) : /*#__PURE__*/_jsx(FullscreenOutlined, {
+      className: "tool-icon",
+      title: "\u5168\u5C4F",
+      onClick: handleFullScreen
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: columnSettingVisible,
+      title: popoverTitle,
+      trigger: "click",
+      placement: "bottomRight",
+      onOpenChange: function onOpenChange(open) {
+        return setColumnSettingVisible(open);
+      },
+      getPopupContainer: function getPopupContainer(triggerNode) {
+        return triggerNode.parentElement;
+      },
+      overlayClassName: "column-setting-popup",
+      content: popoverContent,
+      children: /*#__PURE__*/_jsx(BarsOutlined, {
+        className: "tool-icon",
+        title: "\u5217\u8BBE\u7F6E",
+        onClick: function onClick() {
+          return setColumnSettingVisible(true);
+        }
+      })
+    })]
+  });
+}
+export default /*#__PURE__*/memo(Toolbar);

package/dist/esm/DModal/index.d.ts

@@ -1,4 +1,5 @@
-import { DModalProps, DeleteModalProps } from './interface';
+import { ModalFuncProps } from 'antd';
+import { DModalProps } from './interface';
 import './styles/index.less';
 declare function DModal(props: DModalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DModal {
@@ -9,9 +10,9 @@ declare namespace DModal {
     export var warning: import("antd/lib/modal/confirm").ModalFunc;
     export var confirm: import("antd/lib/modal/confirm").ModalFunc;
     export var destroyAll: () => void;
-    var _a: ({ content, onOk, onCancel, zIndex }: DeleteModalProps) => {
+    var _a: (props: ModalFuncProps) => {
         destroy: () => void;
-        update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        update: (configUpdate: ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)) => void;
     };
     export { _a as delete };
 }

package/dist/esm/DModal/index.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "mode"];
+var _excluded = ["children", "mode"],
+  _excluded2 = ["content", "onOk", "onCancel", "zIndex"];
 import { ConfigContext } from "../ConfigProvider";
 import { Modal } from 'antd';
 import { useContext, useEffect, useMemo, useRef } from 'react';
@@ -57,22 +58,23 @@ DModal.error = Modal.error;
 DModal.warning = Modal.warning;
 DModal.confirm = Modal.confirm;
 DModal.destroyAll = Modal.destroyAll;
-DModal.delete = function (_ref) {
-  var content = _ref.content,
-    onOk = _ref.onOk,
-    onCancel = _ref.onCancel,
-    zIndex = _ref.zIndex;
-  return DModal.confirm({
+DModal.delete = function (props) {
+  var content = props.content,
+    onOk = props.onOk,
+    onCancel = props.onCancel,
+    zIndex = props.zIndex,
+    otherProps = _objectWithoutProperties(props, _excluded2);
+  return DModal.confirm(_objectSpread({
     title: '删除提示',
     content: content,
     centered: true,
     closable: true,
     okText: '确定',
     cancelText: '取消',
-    className: 'pui-modal-container',
+    className: 'pui-modal-container pui-delete-modal',
     onOk: onOk,
     onCancel: onCancel,
     zIndex: zIndex
-  });
+  }, otherProps));
 };
 export default DModal;

package/dist/esm/DModal/interface.d.ts

@@ -1,14 +1,8 @@
 import { ReactNode } from 'react';
-import { ModalProps } from 'antd';
-type IModalProps = Omit<ModalProps, 'width' | 'className'>;
+import type { ModalProps } from 'antd';
+type IModalProps = Omit<ModalProps, 'className'>;
 export interface DModalProps extends IModalProps {
     children?: ReactNode | undefined;
     mode?: 'absolute' | 'relative' | 'panel';
 }
-export interface DeleteModalProps {
-    content?: React.ReactNode;
-    onOk?: <T>(..._args: T[]) => T;
-    onCancel?: <T>(..._args: T[]) => T;
-    zIndex?: number;
-}
 export {};

package/dist/esm/DTable/index.d.ts

@@ -29,6 +29,22 @@ export type DTableProps = Omit<TableProps<any>, 'columns'> & {
     /** 表格列配置 */
     columns?: DColumnType[];
 };
+export type DTableRef = {
+    /** 手动刷新列表方法
+     * @param params 可选的新参数，如果不传则使用现有参数
+     */
+    refresh: (params?: TableParamsProps) => void;
+    /** 手动刷新列表到指定页数方法
+     * @param page 指定页数
+     */
+    refreshToPage: (page: number) => void;
+    /** 获取当前分页信息 */
+    getPaginationState: () => {
+        current: number;
+        size: number;
+        total: number;
+    };
+};
 declare const DTable: React.ForwardRefExoticComponent<Omit<TableProps<any>, "columns"> & {
     /** 表格列的基础默认配置,默认所有列居中，表头文字超出显示省略号，详见 antd columns */
     defaultColumnProps?: DColumnType | undefined;
@@ -42,5 +58,5 @@ declare const DTable: React.ForwardRefExoticComponent<Omit<TableProps<any>, "col
     extraParams?: TableParamsProps | undefined;
     /** 表格列配置 */
     columns?: DColumnType[] | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement & DTableRef>>;
 export default DTable;

package/dist/esm/DTable/index.js

@@ -2,17 +2,19 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["loadMore", "defaultColumnProps", "actionColumn", "showErrorMsg", "extraParams", "dataSource", "rowKey", "scroll", "className", "pagination", "columns", "loading"];
-/*
- * @Author       : wangfeihu
- * @Date         : 2023-05-09 15:04:48
- * @LastEditors  : wangfeihu
- * @LastEditTime : 2023-08-16 16:45:15
- * @Description  : 基于antd的Table组件
+/*
+ * @Author       : wangfeihu
+ * @Date         : 2023-05-09 15:04:48
+ * @LastEditors  : wangfeihu
+ * @LastEditTime : 2023-08-16 16:45:15
+ * @Description  : 基于antd的Table组件
  */
-import React, { forwardRef, useEffect, useRef, useState, useContext, useMemo } from 'react';
+import React, { forwardRef, useEffect, useRef, useState, useContext, useMemo, useImperativeHandle } from 'react';
 import { message, Table } from 'antd';
 import { ConfigContext } from "../ConfigProvider";
 import "./index.less";
+
+// DTable组件的Ref接口定义
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 // 分页器配置项
@@ -53,7 +55,8 @@ function getActionColumnProps(props, defaultColumnProps) {
   var defaultProps = {
     width: 140,
     title: '操作',
-    dataIndex: 'action'
+    dataIndex: 'action',
+    align: 'center'
   };
   return typeof props === 'function' ? _objectSpread(_objectSpread(_objectSpread({}, defaultColumnProps), defaultProps), {}, {
     render: props
@@ -106,17 +109,21 @@ function InternalTable(props, ref) {
     tableParams = _useState4[0],
     setTableParams = _useState4[1];
 
+  // 隐藏单个分页时, 高度充满
+  var extraHeight = useMemo(function () {
+    return _pagination['hideOnSinglePage'] ? 0 : 56;
+  }, [_pagination]);
+
   // 默认垂直滚动高度为 calc(100% - 56px),其中56px为表格header高度，如需修改，需要自行覆盖styles中的相关样式
   var _scroll = scroll ? _objectSpread({
-    y: 'calc(100% - 56px)'
+    y: "calc(100% - ".concat(extraHeight, "px)")
   }, scroll) : {
-    y: 'calc(100% - 56px)'
+    y: "calc(100% - ".concat(extraHeight, "px)")
   };
 
   // 合并列属性
   var _columns = getColumns(columns, defaultColumnProps);
 
-  // 加入操作列
   // 加入操作列
   var _actionColumn = actionColumn ? getActionColumnProps(actionColumn, defaultColumnProps) : undefined;
   if (_actionColumn && _columns instanceof Array) _columns.push(_actionColumn);
@@ -180,6 +187,12 @@ function InternalTable(props, ref) {
     }
   };
 
+  // 手动刷新方法
+  var refresh = function refresh(params) {
+    var refreshParams = _objectSpread(_objectSpread({}, tableParams), params);
+    loadData(refreshParams);
+  };
+
   // 监听分页大小变化,如果外部也监听了onChange，则不会触发loadMore，但如果外部onChange返回值为undefined则正常触loadMore
   var onChange = function onChange(page, pageSize) {
     if (_pagination && typeof (_pagination === null || _pagination === void 0 ? void 0 : _pagination.onChange) === 'function') {
@@ -201,13 +214,30 @@ function InternalTable(props, ref) {
     pageSize: tableParams.size,
     onChange: onChange
   }) : _pagination;
-
+  useImperativeHandle(ref, function () {
+    return {
+      refresh: refresh,
+      // 提供获取当前分页状态的方法
+      getPaginationState: function getPaginationState() {
+        return {
+          current: tableParams.current,
+          size: tableParams.size,
+          total: tableSource.total
+        };
+      },
+      // 提供刷新到指定页面的方法
+      refreshToPage: function refreshToPage(page) {
+        refresh({
+          current: page
+        });
+      }
+    };
+  });
   // 数据初始加载
   useEffect(function () {
     return loadData(extraParams);
   }, [dataSource, extraParams]);
   return /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({}, otherProps), {}, {
-    ref: ref,
     rowKey: rowKey,
     className: _className,
     columns: _columns,

package/dist/esm/Loading/loading.d.ts

@@ -1,6 +1,8 @@
 import { ILoadingInstance, LoadingInstanceProps } from './interface';
 import './styles/index.less';
-declare function Loading(props: LoadingInstanceProps): import("react/jsx-runtime").JSX.Element;
+declare function Loading(props: LoadingInstanceProps & {
+    isBodyContainer?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Loading {
     var newInstance: (args?: LoadingInstanceProps | undefined) => ILoadingInstance;
 }