@pointcloud/pcloud-components 0.1.32 → 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/ColorPicker/index.d.ts

@@ -1,18 +1,17 @@
-/// <reference types="react" />
-import { ColorPickerProps, TwitterPickerProps, HuePickerProps, AlphaPickerProps, BlockPickerProps, ChromePickerProps, CompactPickerProps, CirclePickerProps, SliderPickerProps } from './interface';
-import './index.less';
-declare const ColorPicker: {
-    (props: ColorPickerProps): JSX.Element;
-    PSPicker(props: ColorPickerProps & {
-        title?: string;
-    }): JSX.Element;
-    SliderPicker(props: SliderPickerProps): JSX.Element;
-    AlphaPicker(props: AlphaPickerProps): JSX.Element;
-    BlockPicker(props: BlockPickerProps): JSX.Element;
-    ChromePicker(props: ChromePickerProps): JSX.Element;
-    CirclePicker(props: CirclePickerProps): JSX.Element;
-    CompactPicker(props: CompactPickerProps): JSX.Element;
-    HuePicker(props: HuePickerProps): JSX.Element;
-    TwitterPicker(props: TwitterPickerProps): JSX.Element;
-};
-export default ColorPicker;
+import { ColorPickerProps, TwitterPickerProps, HuePickerProps, AlphaPickerProps, BlockPickerProps, ChromePickerProps, CompactPickerProps, CirclePickerProps, SliderPickerProps } from './interface';
+import './index.less';
+declare const ColorPicker: {
+    (props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+    PSPicker(props: ColorPickerProps & {
+        title?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    SliderPicker(props: SliderPickerProps): import("react/jsx-runtime").JSX.Element;
+    AlphaPicker(props: AlphaPickerProps): import("react/jsx-runtime").JSX.Element;
+    BlockPicker(props: BlockPickerProps): import("react/jsx-runtime").JSX.Element;
+    ChromePicker(props: ChromePickerProps): import("react/jsx-runtime").JSX.Element;
+    CirclePicker(props: CirclePickerProps): import("react/jsx-runtime").JSX.Element;
+    CompactPicker(props: CompactPickerProps): import("react/jsx-runtime").JSX.Element;
+    HuePicker(props: HuePickerProps): import("react/jsx-runtime").JSX.Element;
+    TwitterPicker(props: TwitterPickerProps): import("react/jsx-runtime").JSX.Element;
+};
+export default ColorPicker;