@pointcloud/pcloud-components 1.0.2 → 1.0.4

package/dist/esm/AdvancedFilter/index.js

@@ -94,6 +94,7 @@ var AdvancedFilter = function AdvancedFilter(props) {
             onSearch: _inputSearch,
             value: inputValue
           }, otherInputProps)), /*#__PURE__*/_jsxs(Button, {
+            type: "primary",
             className: "button",
             onClick: function onClick() {
               return setPanelVisible(!panelVisible);

package/dist/esm/AdvancedFilter/styles/index.less

@@ -1,146 +1,143 @@
-@import '../../commonStyle/index.less';
-
-.@{prefix}-search-filter {
-  align-items: center;
-  width: 100%;
-  margin-top: 10px;
-  background-color: #fff;
-
-  span.ant-collapse-header-text {
-    display: inline-block;
-    width: 100%;
-    cursor: auto !important;
-  }
-
-  .ant-collapse-content-box {
-    padding: 0;
-  }
-
-  .search-header {
-    display: flex;
-    width: 100%;
-
-    .left {
-      max-width: 100%;
-      overflow: hidden;
-      white-space: no-wrap;
-      text-overflow: ellipsis;
-
-      :global {
-        .ant-radio-wrapper:first-child {
-          border-left: 1px solid #d9d9d9;
-          border-radius: 5px 0 0 5px;
-        }
-
-        .ant-radio-wrapper:last-child {
-          border-radius: 0 5px 5px 0;
-        }
-
-        .ant-radio-wrapper {
-          margin-right: 0;
-          padding: 4px 6px;
-          border: 1px solid #d9d9d9;
-          border-top-width: 1px;
-          border-left: 1px solid #fff;
-          border-left-width: 1px;
-
-          .ant-radio {
-            display: none;
-          }
-        }
-
-        .ant-radio-wrapper:hover {
-          color: #1890ff;
-        }
-
-        .ant-radio-wrapper-checked {
-          z-index: 1;
-          color: #1890ff;
-          background: #fff;
-          border: 1px solid #1890ff;
-          border-left: 1px solid #1890ff !important;
-        }
-      }
-    }
-
-    .right {
-      display: flex;
-      justify-content: center;
-
-      .input {
-        width: 200px;
-        border-radius: 4px;
-      }
-
-      .button {
-        margin-left: 10px;
-        color: #fff;
-        background-color: #ff7e00;
-        border-radius: 4px;
-
-        &:active,
-        &:focus,
-        &:hover {
-          border-color: transparent;
-        }
-
-        .icon {
-          margin-left: 8px;
-          transition: transform 0.4s;
-
-          &.down {
-            transform: rotateZ(180deg);
-          }
-
-          &.up {
-            transform: rotateZ(0deg);
-          }
-        }
-      }
-    }
-  }
-
-  .title {
-    display: flex;
-    align-items: center;
-    margin: 0 10px;
-    padding-bottom: 10px;
-    font-weight: bold;
-    border-bottom: 1px solid #f0f0f0;
-
-    span.icon {
-      width: 4px;
-      height: 16px;
-      margin-right: 6px;
-      background-color: #ff7e00;
-      border-radius: 2px;
-    }
-  }
-
-  .search-content {
-    .filter-row {
-      display: flex;
-      flex-wrap: wrap;
-      width: 100%;
-      padding: 10px;
-    }
-
-    .filter-col {
-      height: 30px;
-      margin-bottom: 10px;
-      line-height: 30px;
-    }
-
-    .filter-col .ant-picker {
-      width: 100%;
-    }
-
-    .search-btn {
-      justify-content: center;
-
-      > button {
-        margin: 0 5px;
-      }
-    }
-  }
-}
+@import '../../commonStyle/index.less';
+
+.@{prefix}-search-filter {
+  align-items: center;
+  width: 100%;
+  margin-top: 10px;
+  background-color: #fff;
+
+  span.ant-collapse-header-text {
+    display: inline-block;
+    width: 100%;
+    cursor: auto !important;
+  }
+
+  .ant-collapse-content-box {
+    padding: 0;
+  }
+
+  .search-header {
+    display: flex;
+    width: 100%;
+
+    .left {
+      max-width: 100%;
+      overflow: hidden;
+      white-space: no-wrap;
+      text-overflow: ellipsis;
+
+      :global {
+        .ant-radio-wrapper:first-child {
+          border-left: 1px solid #d9d9d9;
+          border-radius: 5px 0 0 5px;
+        }
+
+        .ant-radio-wrapper:last-child {
+          border-radius: 0 5px 5px 0;
+        }
+
+        .ant-radio-wrapper {
+          margin-right: 0;
+          padding: 4px 6px;
+          border: 1px solid #d9d9d9;
+          border-top-width: 1px;
+          border-left: 1px solid #fff;
+          border-left-width: 1px;
+
+          .ant-radio {
+            display: none;
+          }
+        }
+
+        .ant-radio-wrapper:hover {
+          color: #1890ff;
+        }
+
+        .ant-radio-wrapper-checked {
+          z-index: 1;
+          color: #1890ff;
+          background: #fff;
+          border: 1px solid #1890ff;
+          border-left: 1px solid #1890ff !important;
+        }
+      }
+    }
+
+    .right {
+      display: flex;
+      justify-content: center;
+
+      .input {
+        width: 200px;
+        border-radius: 4px;
+      }
+
+      .button {
+        margin-left: 10px;
+
+        &:active,
+        &:focus,
+        &:hover {
+          border-color: transparent;
+        }
+
+        .icon {
+          margin-left: 8px;
+          transition: transform 0.4s;
+
+          &.down {
+            transform: rotateZ(180deg);
+          }
+
+          &.up {
+            transform: rotateZ(0deg);
+          }
+        }
+      }
+    }
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+    padding-bottom: 10px;
+    font-weight: bold;
+    border-bottom: 1px solid #f0f0f0;
+
+    span.icon {
+      width: 4px;
+      height: 16px;
+      margin-right: 6px;
+      background-color: #1890ff;
+      border-radius: 2px;
+    }
+  }
+
+  .search-content {
+    .filter-row {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 10px;
+    }
+
+    .filter-col {
+      height: 30px;
+      margin-bottom: 10px;
+      line-height: 30px;
+    }
+
+    .filter-col .ant-picker {
+      width: 100%;
+    }
+
+    .search-btn {
+      justify-content: center;
+
+      > button {
+        margin: 0 5px;
+      }
+    }
+  }
+}

package/dist/esm/AnimatedScrollList/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { useRef, useEffect, useCallback, useContext } from 'react';
+import React, { useRef, useEffect, useCallback, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from "../ConfigProvider";
 import "./styles/index.less";
@@ -286,19 +286,23 @@ function AnimatedScrollList(props) {
   }, [data, renderItem, getItemKey]);
 
   // 容器样式
-  var containerStyle = _objectSpread({
-    height: containerHeight,
-    width: containerWidth,
-    overflow: showScrollbar ? 'auto' : 'hidden',
-    position: 'relative'
-  }, style);
+  var containerStyle = useMemo(function () {
+    return _objectSpread({
+      height: containerHeight,
+      width: containerWidth,
+      overflow: showScrollbar ? 'auto' : 'hidden',
+      position: 'relative'
+    }, style);
+  }, [containerHeight, containerWidth, showScrollbar, style]);
 
   // 内容容器样式
-  var contentStyle = {
-    display: 'flex',
-    flexDirection: isVertical ? 'column' : 'row',
-    willChange: 'transform'
-  };
+  var contentStyle = useMemo(function () {
+    return {
+      display: 'flex',
+      flexDirection: isVertical ? 'column' : 'row',
+      willChange: 'transform'
+    };
+  }, [isVertical]);
   return /*#__PURE__*/_jsxs("div", {
     className: wrapperClass,
     children: [header && /*#__PURE__*/_jsx("div", {

package/dist/esm/CRUD/index.js

@@ -137,7 +137,7 @@ var forwardCRUD = /*#__PURE__*/forwardRef(function (props, ref) {
     return classNames(_defineProperty({
       fullscreen: fullScreen
     }, "".concat(prefixCls, "-crud"), !!prefixCls), classname, className);
-  }, [fullScreen]);
+  }, [fullScreen, prefixCls, classname, className]);
   var visible = useMemo(function () {
     return conditionVisible ? 'visible' : 'hidden';
   }, [conditionVisible]);
@@ -585,6 +585,14 @@ var forwardCRUD = /*#__PURE__*/forwardRef(function (props, ref) {
       }, modalFormProps === null || modalFormProps === void 0 ? void 0 : modalFormProps.formProps)
     };
   }, [modalConfig, detailData, handleCancel, handleModalOk, modalFormProps, classname]);
+  var onActions = useMemo(function () {
+    return {
+      setFullScreen: setFullScreen,
+      handleRefresh: handleRefresh,
+      onColumnSettingChanged: onColumnSettingChanged,
+      setConditionVisible: setConditionVisible
+    };
+  }, [setFullScreen, handleRefresh, onColumnSettingChanged, setConditionVisible]);
   useImperativeHandle(ref, function () {
     return {
       refresh: function refresh(strategy, refreshOptions) {
@@ -657,12 +665,7 @@ var forwardCRUD = /*#__PURE__*/forwardRef(function (props, ref) {
         fullScreen: fullScreen,
         conditionVisible: conditionVisible,
         columns: originalColumnsRef.current,
-        onActions: {
-          setFullScreen: setFullScreen,
-          handleRefresh: handleRefresh,
-          onColumnSettingChanged: onColumnSettingChanged,
-          setConditionVisible: setConditionVisible
-        }
+        onActions: onActions
       })]
     }), /*#__PURE__*/_jsx(DTable, _objectSpread(_objectSpread({
       ref: tableRef

package/dist/esm/CRUD/toolbar.js

@@ -1,7 +1,7 @@
 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 { memo, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { Popover, Checkbox, Button } from 'antd';
 import { ReloadOutlined, FullscreenOutlined, FullscreenExitOutlined, BarsOutlined, HolderOutlined, SearchOutlined } from '@ant-design/icons';
@@ -67,18 +67,18 @@ function Toolbar(_ref) {
       setRotating(false);
     }, 500);
   };
-  var handleConfirm = function handleConfirm() {
+  var handleConfirm = useCallback(function () {
     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() {
+  }, [columnSetting.checkedList, columnSetting.sortedColumns]);
+  var handleReset = useCallback(function () {
     setColumnSetting({
       sortedColumns: columns,
       checkedList: checkedValues
     });
-  };
-  var onCheckAllChange = function onCheckAllChange(e) {
+  }, [columns, checkedValues]);
+  var onCheckAllChange = useCallback(function (e) {
     var checked = e.target.checked;
     if (checked) {
       // 全选所有列标题
@@ -100,7 +100,7 @@ function Toolbar(_ref) {
         });
       });
     }
-  };
+  }, [columns]);
   useEffect(function () {
     return function () {
       if (timer.current) clearTimeout(timer.current);

package/dist/esm/DForm/DItem/index.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { DItemProps } from './itemType';
 export type { DItemProps };
 declare function DItem(props: DItemProps): JSX.Element;
-export default DItem;
+declare const _default: React.MemoExoticComponent<typeof DItem>;
+export default _default;

package/dist/esm/DForm/DItem/index.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["formItemProps", "label", "name", "renderType", "render", "children"];
+import React from 'react';
 import itemsRender from "./itemsRender";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,4 +34,4 @@ function DItem(props) {
     return /*#__PURE__*/_jsx(_Fragment, {});
   }
 }
-export default DItem;
+export default /*#__PURE__*/React.memo(DItem);

package/dist/esm/DForm/DItem/itemType.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { InputProps, InputNumberProps, AutoCompleteProps, CascaderProps, SelectProps, TreeSelectProps, DatePickerProps, TimePickerProps, MentionProps, CheckboxProps, RadioProps, RateProps, SliderSingleProps, SwitchProps, TransferProps, UploadProps, ButtonProps, DividerProps, FormItemProps, RadioGroupProps, ColProps } from 'antd';
 import { PasswordProps, TextAreaProps } from 'antd/lib/input';
 import { RangePickerProps } from 'antd/lib/date-picker';
@@ -10,21 +10,12 @@ import { DTreeSelectProps } from '../../DTreeSelect';
 import { DUploadProps } from '../../DUpload';
 import { IPAddressProps } from '../../IPAddress';
 import { DRangePickerProps } from '../../DRangePicker/interface';
-export type RenderType = 'custom' | 'dInput' | 'ipAddress' | 'input' | 'textArea' | 'password' | 'inputNumber' | 'autoComplete' | 'dSelect' | 'select' | 'dCascader' | 'cascader' | 'dTreeSelect' | 'treeSelect' | 'datePicker' | 'dRangePicker' | 'timePicker' | 'rangePicker' | 'mentions' | 'checkbox' | 'checkboxGroup' | 'radio' | 'radioGroup' | 'rate' | 'slider' | 'switch' | 'transfer' | 'upload' | 'dUpload' | 'button' | 'divider';
+export type RenderType = 'custom' | 'other' | 'dInput' | 'ipAddress' | 'input' | 'textArea' | 'password' | 'inputNumber' | 'autoComplete' | 'dSelect' | 'select' | 'dCascader' | 'cascader' | 'dTreeSelect' | 'treeSelect' | 'datePicker' | 'dRangePicker' | 'timePicker' | 'rangePicker' | 'mentions' | 'checkbox' | 'checkboxGroup' | 'radio' | 'radioGroup' | 'rate' | 'slider' | 'switch' | 'transfer' | 'upload' | 'dUpload' | 'button' | 'divider';
 export type DItemBaseProps = Pick<FormItemProps, 'label' | 'name'> & {
     formItemProps?: FormItemProps & {
         grid?: Omit<ColProps, 'prefixCls'>;
     };
 };
-/** 自定义渲染的DItem */
-type CustomItemProps = DItemBaseProps & HTMLAttributes<HTMLElement> & {
-    /** 渲染类型 */
-    renderType?: 'custom' | 'other';
-    /** 自定义渲染函数 */
-    render?: (props: any, formItemProps: FormItemProps, allProps?: DItemProps) => ReactNode;
-    children?: ReactNode;
-    [key: string]: any;
-};
 export type DInputItemProps = {
     renderType?: 'dInput';
 } & DItemBaseProps & DInputProps;
@@ -115,5 +106,12 @@ export type ButtonItemProps = {
 export type DividerItemProps = {
     renderType?: 'divider';
 } & DItemBaseProps & DividerProps;
-export type DItemProps = CustomItemProps | DInputItemProps | DIpAddressProps | InputItemProps | TextAreaItemProps | PasswordItemProps | InputNumberItemProps | AutoCompleteItemProps | DSelectItemProps | SelectItemProps | DCascaderItemProps | CascaderItemProps | DTreeSelectItemProps | TreeSelectItemProps | DatePickerItemProps | TimePickerItemProps | RangePickerItemProps | DRangePickerItemProps | MentionItemProps | CheckboxItemProps | CheckboxGroupProps | DCheckboxGroupProps | RadioItemProps | RadioGroupProps | DRadioGorupProps | RateItemProps | SliderItemProps | SwitchItemProps | TransferItemProps | UploadItemProps | DUploadItemProps | ButtonItemProps | DividerItemProps;
-export {};
+export type DItemProps = {
+    renderType?: RenderType;
+    formItemProps?: FormItemProps & {
+        grid?: Omit<ColProps, 'prefixCls'>;
+    };
+    children?: ReactNode;
+    render?: any;
+    [key: string]: any;
+};

package/dist/esm/DForm/index.js

@@ -10,7 +10,7 @@ var _excluded = ["className", "defaultItemProps", "items", "children", "layout",
  * @Description  : 基于antd的Form组件
  */
 
-import React, { forwardRef, useContext, useState, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useContext, useState, useMemo, useEffect, useImperativeHandle } from 'react';
 import { Form, Row, Col } from 'antd';
 import { ConfigContext } from "../ConfigProvider";
 import helper from "./helper";
@@ -69,13 +69,16 @@ function InternalForm(props, ref) {
     getPrefixCls = _useContext.getPrefixCls;
   var _className = "".concat(getPrefixCls('form'), " ").concat(className, " ").concat(['inlineVertical', 'grid'].includes(layout) ? 'inlineVertical' : '');
   var _layout = ['inlineVertical', 'grid'].includes(layout) ? 'inline' : layout;
-  var _useState = useState(getChildren(items, children, defaultItemProps, layout)),
+  var propsDerivedChildren = useMemo(function () {
+    return getChildren(items, children, defaultItemProps, layout);
+  }, [items, children, defaultItemProps, layout]);
+  var _useState = useState(propsDerivedChildren),
     _useState2 = _slicedToArray(_useState, 2),
     itemChildren = _useState2[0],
     setItemChildren = _useState2[1];
   useEffect(function () {
-    setItemChildren(getChildren(items, children, defaultItemProps, layout));
-  }, [items, children, defaultItemProps, layout]);
+    setItemChildren(propsDerivedChildren);
+  }, [propsDerivedChildren]);
   useImperativeHandle(ref, function () {
     return {
       setItems: function setItems(value) {
@@ -93,7 +96,7 @@ function InternalForm(props, ref) {
         }
       }
     };
-  }, [items, children, defaultItemProps]);
+  }, [items, children, defaultItemProps, layout]);
   return /*#__PURE__*/_jsx(Form, _objectSpread(_objectSpread({}, otherProps), {}, {
     className: _className,
     layout: _layout,

package/dist/esm/DInput/index.js

@@ -9,7 +9,7 @@ var _excluded = ["className", "onChange", "onCompositionStart", "onCompositionEn
  * @LastEditTime : 2023-08-16 16:48:52
  * @Description  : 基于antd的Input组件
  */
-import React, { useRef, forwardRef, useState, useEffect, useContext } from 'react';
+import React, { useRef, forwardRef, useState, useEffect, useContext, useCallback } from 'react';
 import { Input } from 'antd';
 import { ConfigContext } from "../ConfigProvider";
 
@@ -53,7 +53,7 @@ function InternalInput(props, ref) {
 
   // debounce: 默认800ms，false或0表示不开启
   var _debounce = getDebounceTime(debounce);
-  var emitChange = function emitChange(_value, e) {
+  var emitChange = useCallback(function (_value, e) {
     if (_debounce > 0) {
       clearTimeout(debounceRef.current);
       debounceRef.current = setTimeout(function () {
@@ -62,7 +62,7 @@ function InternalInput(props, ref) {
     } else {
       onChange === null || onChange === void 0 || onChange(_value, e);
     }
-  };
+  }, [_debounce, onChange]);
 
   // 监听用户onChange事件（如果正在进行合成输入，则不响应用户事件）
   var _onChange = function _onChange(e) {
@@ -88,6 +88,14 @@ function InternalInput(props, ref) {
   useEffect(function () {
     return setValue(initValue);
   }, [initValue]);
+  useEffect(function () {
+    return function () {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = null;
+      }
+    };
+  }, []);
   return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, otherProps), {}, {
     className: _className,
     ref: ref,

package/dist/esm/DModal/index.js

@@ -14,16 +14,16 @@ function DModal(props) {
     otherProps = _objectWithoutProperties(props, _excluded);
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls;
-  var containerRef = useRef();
+  var containerRef = useRef(null);
   var style = useMemo(function () {
     var _otherProps$style;
     return _objectSpread({
-      getContainer: containerRef.current,
+      getContainer: containerRef.current || document.body,
       width: ((_otherProps$style = otherProps.style) === null || _otherProps$style === void 0 ? void 0 : _otherProps$style.width) || '80%',
       centered: true,
       maskClosable: false
     }, otherProps);
-  }, [otherProps]);
+  }, [otherProps.open, otherProps.title, otherProps.wrapClassName, otherProps.style, otherProps.centered, otherProps.width, otherProps.zIndex]);
   useEffect(function () {
     if (otherProps.open) {
       document.body.style.overflow = 'hidden';
@@ -35,17 +35,24 @@ function DModal(props) {
     };
   }, [otherProps.open]);
   useEffect(function () {
-    if (containerRef.current) {
-      if (mode === 'absolute') {
-        containerRef.current.parentElement.style.position = '';
+    var _containerRef$current;
+    var parentElement = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.parentElement;
+    if (parentElement) {
+      if (mode === 'absolute' || mode === 'fixed' || mode === 'panel') {
+        parentElement.style.position = '';
       } else {
-        containerRef.current.parentElement.style.position = 'relative';
+        parentElement.style.position = 'relative';
       }
     }
-  }, [mode, containerRef.current]);
+  }, [mode]);
+  var getContainerClass = function getContainerClass() {
+    if (mode === 'fixed') return 'fixed-modal-container';
+    if (mode === 'absolute' || mode === 'panel') return 'absolute-modal-container';
+    return 'relative-modal-container';
+  };
   return /*#__PURE__*/_jsx("div", {
     ref: containerRef,
-    className: "".concat(getPrefixCls('modal-container'), " ").concat(getPrefixCls(mode === 'absolute' || mode === 'panel' ? 'absolute-modal-container' : 'relative-modal-container')),
+    className: "".concat(getPrefixCls('modal-container'), " ").concat(getPrefixCls(getContainerClass())),
     children: /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({}, style), {}, {
       children: children
     }))

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

@@ -3,6 +3,6 @@ import type { ModalProps } from 'antd';
 type IModalProps = Omit<ModalProps, 'className'>;
 export interface DModalProps extends IModalProps {
     children?: ReactNode | undefined;
-    mode?: 'absolute' | 'relative' | 'panel';
+    mode?: 'absolute' | 'relative' | 'panel' | 'fixed';
 }
 export {};