shineout 3.4.4 → 3.4.5-beta.2

package/cjs/index.js

@@ -492,5 +492,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.4.4'
+  version: '3.4.5-beta.2'
 };

package/dist/shineout.js

@@ -11984,7 +11984,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.4.4');
+/* harmony default export */ var version = ('3.4.5-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -31638,7 +31638,9 @@ var useFormFooter = function useFormFooter() {
 var Card = function Card(props) {
   var _props$jssStyle, _props$jssStyle$card, _props$id;
   var _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style;
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$defaultCollaps = props.defaultCollapsed,
+    defaultCollapsed = _props$defaultCollaps === void 0 ? true : _props$defaultCollaps;
   var cardClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$card = _props$jssStyle.card) === null || _props$jssStyle$card === void 0 ? void 0 : _props$jssStyle$card.call(_props$jssStyle);
   var panelRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var forceUpdate = useRender();
@@ -31646,7 +31648,7 @@ var Card = function Card(props) {
       id: undefined
     }),
     context = _useRef.current;
-  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.defaultCollapsed),
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(defaultCollapsed),
     _useState2 = slicedToArray_default()(_useState, 2),
     collapsed = _useState2[0],
     setCollapsed = _useState2[1];
@@ -32112,6 +32114,67 @@ var card_group_jssStyle = {
     jssStyle: card_group_jssStyle
   }, props));
 });
+;// CONCATENATED MODULE: ../hooks/src/common/use-in-view/use-in-view.ts
+
+
+var useInView = function useInView() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var elementRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    isInView = _useState2[0],
+    setIsInView = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState4 = slicedToArray_default()(_useState3, 2),
+    wasInView = _useState4[0],
+    setWasInView = _useState4[1];
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    var element = elementRef.current;
+    if (!element) return;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = slicedToArray_default()(_ref, 1),
+        entry = _ref2[0];
+      var inView = entry.isIntersecting;
+      setIsInView(inView);
+      if (inView) {
+        setWasInView(true);
+        // 如果设置了 once 选项，且元素已经出现过，则取消观察
+        if (options.once) {
+          observer.disconnect();
+        }
+      }
+    }, {
+      root: options.root || null,
+      rootMargin: options.rootMargin || '0px',
+      threshold: options.threshold || 0
+    });
+    observer.observe(element);
+    return function () {
+      observer.disconnect();
+    };
+  }, [options.root, options.rootMargin, options.threshold, options.once]);
+  return {
+    ref: elementRef,
+    isInView: isInView,
+    wasInView: wasInView
+  };
+};
+/* harmony default export */ var use_in_view = (useInView);
+
+// 使用示例
+// const Example = () => {
+//   const { ref, isInView } = useInView({
+//     threshold: 0.5,
+//     rootMargin: '50px',
+//     once: true
+//   });
+
+//   return (
+//     <div ref={ref}>
+//       {isInView ? '元素在视窗中' : '元素不在视窗中'}
+//     </div>
+//   );
+// };
 ;// CONCATENATED MODULE: ../hooks/src/utils/uid.ts
 function generateUUID() {
   var c = crypto || typeof window !== 'undefined' && window.crypto; // 获取加密库
@@ -32267,7 +32330,7 @@ var Lazyload = function Lazyload(props) {
       lazyload_removeStack(lazyId);
     };
   }, []);
-  if (ready) return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
+  if (ready && props.isInView) return /*#__PURE__*/(0,jsx_runtime.jsx)(jsx_runtime.Fragment, {
     children: props.children
   });
   return /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -34088,11 +34151,15 @@ var CheckboxWithContext = function CheckboxWithContext(props) {
 
 
 
+
 var Item = function Item(props) {
   var _props$jssStyle, _props$jssStyle$cardG;
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(CardGroupContext),
     container = _useContext.container;
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$cardG = _props$jssStyle.cardGroup) === null || _props$jssStyle$cardG === void 0 ? void 0 : _props$jssStyle$cardG.call(_props$jssStyle);
+  var _useInView = use_in_view(),
+    itemRef = _useInView.ref,
+    isInView = _useInView.isInView;
   var handleChange = usePersistFn(function (_, checked) {
     if (props.onChange) props.onChange(checked, props.value);
   });
@@ -34102,6 +34169,7 @@ var Item = function Item(props) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(lazyload, {
       container: container,
       placeholder: props.placeholder,
+      isInView: isInView,
       children: content
     });
   };
@@ -34116,9 +34184,15 @@ var Item = function Item(props) {
       className: classes === null || classes === void 0 ? void 0 : classes.checkbox
     })]
   });
+  var itemStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return objectSpread2_default()(objectSpread2_default()({}, props.style), {}, {
+      visibility: isInView ? 'visible' : 'hidden'
+    });
+  }, [isInView, props.style]);
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    ref: itemRef,
     className: cls,
-    style: props.style,
+    style: itemStyle,
     children: renderChildren(content)
   });
 };
@@ -65292,7 +65366,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.4.4'
+  version: '3.4.5-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;