@zat-design/sisyphus-react 3.4.12-beta.7 → 3.4.12-beta.9

package/es/ProForm/utils/useShouldUpdate.js

@@ -181,7 +181,9 @@ var useShouldUpdate = function useShouldUpdate(props) {
       // ) {
       //   form.validateFields([name]);
       // }
-      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !isEqualWith(rulesRef.current, _rules, customEqualForFun) || !isEqualWith(fieldPropsRef.current, _fieldProps, customEqualForFun) || !isEqualWith(originComponentRef.current, _component, customEqualForFun) || equalDependencies(dependencies, prevValues, _currentValues)) {
+      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !isEqualWith(rulesRef.current, _rules, customEqualForFun) || !isEqualWith(fieldPropsRef.current, _fieldProps, customEqualForFun) ||
+      // !isEqualWith(originComponentRef.current, _component, customEqualForFun) ||
+      equalDependencies(dependencies, prevValues, _currentValues)) {
         showRef.current = _show;
         disabledRef.current = _disabled;
         requiredRef.current = _required;

package/es/ProSelect/index.js

@@ -9,10 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import "antd/es/select/style";
 import _Select from "antd/es/select";
-var _excluded = ["dataSource", "defaultDisableValue", "useRequest", "fieldNames", "tooltip", "otherProps", "labelInValue", "filterInList", "scrollFollowParent", "defaultOne", "onSearch", "optionRender", "onChange", "updateDataSource", "transformResponse", "isView"];
+var _excluded = ["dataSource", "defaultDisableValue", "useRequest", "fieldNames", "tooltip", "otherProps", "labelInValue", "filterInList", "scrollFollowParent", "defaultOne", "onSearch", "optionRender", "onChange", "updateDataSource", "transformResponse", "isView", "viewportReady"];
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
-import React, { useImperativeHandle, useState, forwardRef } from 'react';
+import { useDeepCompareEffect, useInViewport, useRequest as useRequestFunc } from 'ahooks';
+import React, { useImperativeHandle, useState, forwardRef, useRef, useEffect } from 'react';
 import { isFunction, isObject, isString, omit, cloneDeep, isNumber } from 'lodash';
 import { useProConfig } from '../ProConfigProvider';
 import Container from '../ProForm/components/Container';
@@ -54,7 +54,18 @@ export var ProSelect = function ProSelect(props, ref) {
     updateDataSource = props.updateDataSource,
     transformResponse = props.transformResponse,
     isViewPro = props.isView,
+    _props$viewportReady = props.viewportReady,
+    viewportReady = _props$viewportReady === void 0 ? false : _props$viewportReady,
     selectProps = _objectWithoutProperties(props, _excluded);
+  /** 是否在可视区域出现过 */
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewFlag = _useState2[0],
+    setViewFlag = _useState2[1];
+  var refSelect = useRef(null);
+  var _useInViewport = useInViewport(refSelect),
+    _useInViewport2 = _slicedToArray(_useInViewport, 1),
+    inViewport = _useInViewport2[0];
   selectProps.showCodeName = (_selectProps$showCode = selectProps.showCodeName) !== null && _selectProps$showCode !== void 0 ? _selectProps$showCode : showCodeName;
   var value = props.value;
   var _ref2 = ProForm.useFieldProps() || {},
@@ -65,15 +76,15 @@ export var ProSelect = function ProSelect(props, ref) {
     code = fieldNames.value;
     label = fieldNames.label;
   }
-  var _useState = useState(dataSource || []),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectList = _useState2[0],
-    setSelectList = _useState2[1];
-  // 用来控制只有第一次才会设置 defaultOne 属性、🔒
-  var _useState3 = useState(false),
+  var _useState3 = useState(dataSource || []),
     _useState4 = _slicedToArray(_useState3, 2),
-    isDefaultOne = _useState4[0],
-    setIsDefaultOne = _useState4[1];
+    selectList = _useState4[0],
+    setSelectList = _useState4[1];
+  // 用来控制只有第一次才会设置 defaultOne 属性、🔒
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDefaultOne = _useState6[0],
+    setIsDefaultOne = _useState6[1];
   var OptionRender = optionRender;
   var defaultOnSuccessFun = function defaultOnSuccessFun(res) {
     var _res$status = res.status,
@@ -134,8 +145,16 @@ export var ProSelect = function ProSelect(props, ref) {
     if (manual) {
       return;
     }
+    if (viewportReady && !viewFlag) {
+      return;
+    }
     fetchFunction.run(defaultParams);
-  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options, defaultDisableValue]);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options, defaultDisableValue, viewFlag]);
+  useEffect(function () {
+    if (inViewport && !viewFlag && viewportReady) {
+      setViewFlag(true);
+    }
+  }, [inViewport]);
   // disable默认值
   if (defaultDisableValue) {
     return _jsx("span", {
@@ -280,45 +299,48 @@ export var ProSelect = function ProSelect(props, ref) {
       fieldNames: fieldNames
     });
   }
-  return _jsx(_Select, _objectSpread(_objectSpread({
-    placeholder: locale === null || locale === void 0 ? void 0 : (_locale$ProSelect = locale.ProSelect) === null || _locale$ProSelect === void 0 ? void 0 : _locale$ProSelect.select,
-    allowClear: true,
-    showArrow: true,
-    loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
-    onChange: handleChange,
-    optionLabelProp: "children" // 解决warning报错，添加默认值
-    ,
-    showSearch: true,
-    filterOption: isFunction(_onSearch) ? false : function (input, option) {
-      var _option$children, _option$children$prop;
-      var value = isString(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
-      return value.toLowerCase().includes(input.toLowerCase());
-    },
-    onSearch: function onSearch(value) {
-      _onSearch && _onSearch(value, _objectSpread({}, fetchFunction));
-    },
-    getPopupContainer: function getPopupContainer(trigger) {
-      return scrollFollowParent ? trigger.parentElement : document.body;
-    }
-  }, omit(cloneDeep(selectProps), ['isView', 'showCodeName', 'form', 'name'])), {}, {
-    value: transformValue(),
-    children: Array.isArray(newSelectList) && newSelectList.map(function (item) {
-      return _jsx(Option, {
-        value: item[code],
-        record: item,
-        disabled: !!item.disabled,
-        children: _jsx(TooltipOption, {
-          title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
-          children: OptionRender ? _jsx("span", {
-            title: OptionRender(item),
-            children: OptionRender(item)
-          }) : _jsx("span", {
-            title: "".concat(item[code], "-").concat(item[label]),
-            children: selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label]
-          })
-        }, item[code])
-      }, item[code]);
-    })
-  }));
+  return _jsx("div", {
+    ref: refSelect,
+    children: _jsx(_Select, _objectSpread(_objectSpread({
+      placeholder: locale === null || locale === void 0 ? void 0 : (_locale$ProSelect = locale.ProSelect) === null || _locale$ProSelect === void 0 ? void 0 : _locale$ProSelect.select,
+      allowClear: true,
+      showArrow: true,
+      loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
+      onChange: handleChange,
+      optionLabelProp: "children" // 解决warning报错，添加默认值
+      ,
+      showSearch: true,
+      filterOption: isFunction(_onSearch) ? false : function (input, option) {
+        var _option$children, _option$children$prop;
+        var value = isString(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
+        return value.toLowerCase().includes(input.toLowerCase());
+      },
+      onSearch: function onSearch(value) {
+        _onSearch && _onSearch(value, _objectSpread({}, fetchFunction));
+      },
+      getPopupContainer: function getPopupContainer(trigger) {
+        return scrollFollowParent ? trigger.parentElement : document.body;
+      }
+    }, omit(cloneDeep(selectProps), ['isView', 'showCodeName', 'form', 'name'])), {}, {
+      value: transformValue(),
+      children: Array.isArray(newSelectList) && newSelectList.map(function (item) {
+        return _jsx(Option, {
+          value: item[code],
+          record: item,
+          disabled: !!item.disabled,
+          children: _jsx(TooltipOption, {
+            title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
+            children: OptionRender ? _jsx("span", {
+              title: OptionRender(item),
+              children: OptionRender(item)
+            }) : _jsx("span", {
+              title: "".concat(item[code], "-").concat(item[label]),
+              children: selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label]
+            })
+          }, item[code])
+        }, item[code]);
+      })
+    }))
+  });
 };
 export default /*#__PURE__*/forwardRef(ProSelect);

package/es/ProSelect/propsType.d.ts

@@ -10,6 +10,8 @@ export interface DataOption {
 export interface PropSelectProps extends Omit<SelectProps, 'onSearch'> {
     /** 是否查看模式 */
     isView?: boolean;
+    /** 是否开启组件在可视区域中才发起useRequest请求 默认 false */
+    viewportReady?: boolean;
     /** 默认数组第一项 */
     defaultOne?: boolean;
     /** 数据源 */

package/es/ProTree/components/Tree.js

@@ -355,7 +355,7 @@ function List(props) {
   }
   return _jsx("div", {
     className: disabledMode === 'hide' ? 'hide-disable-node' : '',
-    children: (_treeData === null || _treeData === void 0 ? void 0 : _treeData.length) ? _jsx(_Tree, _objectSpread(_objectSpread(_objectSpread({}, others), expandedKeys), {}, {
+    children: (_treeData === null || _treeData === void 0 ? void 0 : _treeData.length) ? _jsx(_Tree, _objectSpread(_objectSpread(_objectSpread({}, others), additionProps), {}, {
       disabled: disabled,
       style: {
         width: '100%'

package/lib/ProForm/utils/useShouldUpdate.js

@@ -188,7 +188,9 @@ var useShouldUpdate = function useShouldUpdate(props) {
       // ) {
       //   form.validateFields([name]);
       // }
-      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !(0, _lodash.isEqualWith)(rulesRef.current, _rules, _index.customEqualForFun) || !(0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _index.customEqualForFun) || !(0, _lodash.isEqualWith)(originComponentRef.current, _component, _index.customEqualForFun) || (0, _index.equalDependencies)(dependencies, prevValues, _currentValues)) {
+      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !(0, _lodash.isEqualWith)(rulesRef.current, _rules, _index.customEqualForFun) || !(0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _index.customEqualForFun) ||
+      // !isEqualWith(originComponentRef.current, _component, customEqualForFun) ||
+      (0, _index.equalDependencies)(dependencies, prevValues, _currentValues)) {
         showRef.current = _show;
         disabledRef.current = _disabled;
         requiredRef.current = _required;

package/lib/ProSelect/index.js

@@ -21,7 +21,7 @@ var _ = require("..");
 var _locale = _interopRequireDefault(require("../locale"));
 var _utils = require("./utils");
 require("./index.less");
-var _excluded = ["dataSource", "defaultDisableValue", "useRequest", "fieldNames", "tooltip", "otherProps", "labelInValue", "filterInList", "scrollFollowParent", "defaultOne", "onSearch", "optionRender", "onChange", "updateDataSource", "transformResponse", "isView"];
+var _excluded = ["dataSource", "defaultDisableValue", "useRequest", "fieldNames", "tooltip", "otherProps", "labelInValue", "filterInList", "scrollFollowParent", "defaultOne", "onSearch", "optionRender", "onChange", "updateDataSource", "transformResponse", "isView", "viewportReady"];
 var Option = _antd.Select.Option;
 var ProSelect = exports.ProSelect = function ProSelect(props, ref) {
   var _selectProps$showCode, _locale$ProSelect;
@@ -55,7 +55,18 @@ var ProSelect = exports.ProSelect = function ProSelect(props, ref) {
     updateDataSource = props.updateDataSource,
     transformResponse = props.transformResponse,
     isViewPro = props.isView,
+    _props$viewportReady = props.viewportReady,
+    viewportReady = _props$viewportReady === void 0 ? false : _props$viewportReady,
     selectProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  /** 是否在可视区域出现过 */
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    viewFlag = _useState2[0],
+    setViewFlag = _useState2[1];
+  var refSelect = (0, _react.useRef)(null);
+  var _useInViewport = (0, _ahooks.useInViewport)(refSelect),
+    _useInViewport2 = (0, _slicedToArray2.default)(_useInViewport, 1),
+    inViewport = _useInViewport2[0];
   selectProps.showCodeName = (_selectProps$showCode = selectProps.showCodeName) !== null && _selectProps$showCode !== void 0 ? _selectProps$showCode : showCodeName;
   var value = props.value;
   var _ref2 = _.ProForm.useFieldProps() || {},
@@ -66,15 +77,15 @@ var ProSelect = exports.ProSelect = function ProSelect(props, ref) {
     code = fieldNames.value;
     label = fieldNames.label;
   }
-  var _useState = (0, _react.useState)(dataSource || []),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectList = _useState2[0],
-    setSelectList = _useState2[1];
-  // 用来控制只有第一次才会设置 defaultOne 属性、🔒
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(dataSource || []),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isDefaultOne = _useState4[0],
-    setIsDefaultOne = _useState4[1];
+    selectList = _useState4[0],
+    setSelectList = _useState4[1];
+  // 用来控制只有第一次才会设置 defaultOne 属性、🔒
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isDefaultOne = _useState6[0],
+    setIsDefaultOne = _useState6[1];
   var OptionRender = optionRender;
   var defaultOnSuccessFun = function defaultOnSuccessFun(res) {
     var _res$status = res.status,
@@ -135,8 +146,16 @@ var ProSelect = exports.ProSelect = function ProSelect(props, ref) {
     if (manual) {
       return;
     }
+    if (viewportReady && !viewFlag) {
+      return;
+    }
     fetchFunction.run(defaultParams);
-  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options, defaultDisableValue]);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options, defaultDisableValue, viewFlag]);
+  (0, _react.useEffect)(function () {
+    if (inViewport && !viewFlag && viewportReady) {
+      setViewFlag(true);
+    }
+  }, [inViewport]);
   // disable默认值
   if (defaultDisableValue) {
     return (0, _jsxRuntime.jsx)("span", {
@@ -281,45 +300,48 @@ var ProSelect = exports.ProSelect = function ProSelect(props, ref) {
       fieldNames: fieldNames
     });
   }
-  return (0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    placeholder: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProSelect = _locale.default.ProSelect) === null || _locale$ProSelect === void 0 ? void 0 : _locale$ProSelect.select,
-    allowClear: true,
-    showArrow: true,
-    loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
-    onChange: handleChange,
-    optionLabelProp: "children" // 解决warning报错，添加默认值
-    ,
-    showSearch: true,
-    filterOption: (0, _lodash.isFunction)(_onSearch) ? false : function (input, option) {
-      var _option$children, _option$children$prop;
-      var value = (0, _lodash.isString)(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
-      return value.toLowerCase().includes(input.toLowerCase());
-    },
-    onSearch: function onSearch(value) {
-      _onSearch && _onSearch(value, (0, _objectSpread2.default)({}, fetchFunction));
-    },
-    getPopupContainer: function getPopupContainer(trigger) {
-      return scrollFollowParent ? trigger.parentElement : document.body;
-    }
-  }, (0, _lodash.omit)((0, _lodash.cloneDeep)(selectProps), ['isView', 'showCodeName', 'form', 'name'])), {}, {
-    value: transformValue(),
-    children: Array.isArray(newSelectList) && newSelectList.map(function (item) {
-      return (0, _jsxRuntime.jsx)(Option, {
-        value: item[code],
-        record: item,
-        disabled: !!item.disabled,
-        children: (0, _jsxRuntime.jsx)(TooltipOption, {
-          title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
-          children: OptionRender ? (0, _jsxRuntime.jsx)("span", {
-            title: OptionRender(item),
-            children: OptionRender(item)
-          }) : (0, _jsxRuntime.jsx)("span", {
-            title: "".concat(item[code], "-").concat(item[label]),
-            children: selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label]
-          })
-        }, item[code])
-      }, item[code]);
-    })
-  }));
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: refSelect,
+    children: (0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      placeholder: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProSelect = _locale.default.ProSelect) === null || _locale$ProSelect === void 0 ? void 0 : _locale$ProSelect.select,
+      allowClear: true,
+      showArrow: true,
+      loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
+      onChange: handleChange,
+      optionLabelProp: "children" // 解决warning报错，添加默认值
+      ,
+      showSearch: true,
+      filterOption: (0, _lodash.isFunction)(_onSearch) ? false : function (input, option) {
+        var _option$children, _option$children$prop;
+        var value = (0, _lodash.isString)(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
+        return value.toLowerCase().includes(input.toLowerCase());
+      },
+      onSearch: function onSearch(value) {
+        _onSearch && _onSearch(value, (0, _objectSpread2.default)({}, fetchFunction));
+      },
+      getPopupContainer: function getPopupContainer(trigger) {
+        return scrollFollowParent ? trigger.parentElement : document.body;
+      }
+    }, (0, _lodash.omit)((0, _lodash.cloneDeep)(selectProps), ['isView', 'showCodeName', 'form', 'name'])), {}, {
+      value: transformValue(),
+      children: Array.isArray(newSelectList) && newSelectList.map(function (item) {
+        return (0, _jsxRuntime.jsx)(Option, {
+          value: item[code],
+          record: item,
+          disabled: !!item.disabled,
+          children: (0, _jsxRuntime.jsx)(TooltipOption, {
+            title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
+            children: OptionRender ? (0, _jsxRuntime.jsx)("span", {
+              title: OptionRender(item),
+              children: OptionRender(item)
+            }) : (0, _jsxRuntime.jsx)("span", {
+              title: "".concat(item[code], "-").concat(item[label]),
+              children: selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label]
+            })
+          }, item[code])
+        }, item[code]);
+      })
+    }))
+  });
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(ProSelect);

package/lib/ProSelect/propsType.d.ts

@@ -10,6 +10,8 @@ export interface DataOption {
 export interface PropSelectProps extends Omit<SelectProps, 'onSearch'> {
     /** 是否查看模式 */
     isView?: boolean;
+    /** 是否开启组件在可视区域中才发起useRequest请求 默认 false */
+    viewportReady?: boolean;
     /** 默认数组第一项 */
     defaultOne?: boolean;
     /** 数据源 */

package/lib/ProTree/components/Tree.js

@@ -360,7 +360,7 @@ function List(props) {
   }
   return (0, _jsxRuntime.jsx)("div", {
     className: disabledMode === 'hide' ? 'hide-disable-node' : '',
-    children: (_treeData === null || _treeData === void 0 ? void 0 : _treeData.length) ? (0, _jsxRuntime.jsx)(_antd.Tree, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), expandedKeys), {}, {
+    children: (_treeData === null || _treeData === void 0 ? void 0 : _treeData.length) ? (0, _jsxRuntime.jsx)(_antd.Tree, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), additionProps), {}, {
       disabled: disabled,
       style: {
         width: '100%'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.4.12-beta.7",
+  "version": "3.4.12-beta.9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",