@conecli/cone-render 0.10.1-shop3.72 → 0.10.1-shop3.73

package/dist/components/isv/Floor/index.tsx

@@ -1 +1 @@
-import React, { useState, useMemo, useRef, useCallback } from 'react';
  const {
    style,
    dataDefines,
    containerBorderRadius,
    floorData,
    isRealTimeRender,
    forceRenderTime,
    containerIndex = 0,
  } = props;
  const domRef = useRef<HTMLDivElement>(null);
  const [wrapperHeight, setWrapperHeight] = useState<number | string>('auto');
  const hasBeenInViewRef = useRef(false);
  
  const handleInViewCallback = useCallback(() => {
    if (!hasBeenInViewRef.current) {
      hasBeenInViewRef.current = true;
      setWrapperHeight('auto');
    }
  }, [containerIndex]);
  
  const handleOutViewCallback = useCallback(() => {
    if (hasBeenInViewRef.current && domRef.current) {
      hasBeenInViewRef.current = false;
      const height = domRef.current.getBoundingClientRect().height;
      if (height > 0) {
        setWrapperHeight(height);
      }
    }
  }, [containerIndex]);
  const getRenderRealTimeKeyObj = useMemo(() => {
    return {
      key: isRealTimeRender ? Date.now() : forceRenderTime,
    };
  }, [isRealTimeRender, forceRenderTime]);
  const innerStyle = useMemo(() => {
    const baseStyle = style || {};
    let borderRadius = {};
    if (typeof containerBorderRadius === 'number') {
      borderRadius = { borderRadius: containerBorderRadius + 'px' };
    } else if (containerBorderRadius && typeof containerBorderRadius === 'object') {
      borderRadius = containerBorderRadius;
    }
    if (typeof wrapperHeight === 'number') {
      return {
        ...baseStyle,
        ...borderRadius,
        height: `${wrapperHeight}px`,
        overflow: 'hidden', 
        contentVisibility: 'auto',
        containIntrinsicSize: `${wrapperHeight}px`,
      };
    }
    return { ...baseStyle, ...borderRadius };
  }, [containerBorderRadius, wrapperHeight]);
  return (
    <InOrOutViewObserver
      inViewCallback={handleInViewCallback}
      outViewCallback={handleOutViewCallback}
      threshold={0}
    >
      <View ref={domRef} style={innerStyle} className={floorStyle['wrap']}>
        {floorData?.showCommonFloorHead === false ? null : (
          <CommonFloorHead
            dataDefines={dataDefines}
            floorData={floorData}
            {...getRenderRealTimeKeyObj}
          />
        )}
        {props.children &&
          React.cloneElement(props.children, {
            dataDefines: dataDefines,
            ...getRenderRealTimeKeyObj,
          })}
      </View>
    </InOrOutViewObserver>
  );
  isRealTimeRender: false, 
  forceRenderTime: 1, 
+import React, { useState, useMemo, useRef, useCallback } from 'react';
  const {
    style,
    dataDefines,
    containerBorderRadius,
    floorData,
    isRealTimeRender,
    forceRenderTime,
    containerIndex = 0,
  } = props;
  const domRef = useRef<HTMLDivElement>(null);
  const [wrapperHeight, setWrapperHeight] = useState<number | string>('auto');
  const hasBeenInViewRef = useRef(false);
  
  const globalSwitch = useMemo(() => {
    let contentVisibilityShieldAll = true;
    let contentVisibilityShieldModuleId: number[] = [];
    if (window.shopGlobalSwitch) {
      contentVisibilityShieldAll =
        typeof window.shopGlobalSwitch.contentVisibilityShieldAll === 'boolean'
          ? window.shopGlobalSwitch.contentVisibilityShieldAll
          : true;
      contentVisibilityShieldModuleId = Array.isArray(
        window.shopGlobalSwitch.contentVisibilityShieldModuleId,
      )
        ? window.shopGlobalSwitch.contentVisibilityShieldModuleId
        : [];
    }
    return { contentVisibilityShieldAll, contentVisibilityShieldModuleId };
  }, []);
  
  const handleInViewCallback = useCallback(() => {
    if (globalSwitch.contentVisibilityShieldAll) return;
    if (
      floorData.moduleId &&
      globalSwitch.contentVisibilityShieldModuleId.indexOf(floorData.moduleId) > -1
    ) {
      return;
    }
    if (!hasBeenInViewRef.current) {
      hasBeenInViewRef.current = true;
      setWrapperHeight('auto');
    }
  }, [containerIndex]);
  
  const handleOutViewCallback = useCallback(() => {
    if (globalSwitch.contentVisibilityShieldAll) return;
    if (
      floorData.moduleId &&
      globalSwitch.contentVisibilityShieldModuleId.indexOf(floorData.moduleId) > -1
    ) {
      return;
    }
    if (hasBeenInViewRef.current && domRef.current) {
      hasBeenInViewRef.current = false;
      const height = domRef.current.getBoundingClientRect().height;
      if (height > 0) {
        setWrapperHeight(height);
      }
    }
  }, [containerIndex]);
  const getRenderRealTimeKeyObj = useMemo(() => {
    return {
      key: isRealTimeRender ? Date.now() : forceRenderTime,
    };
  }, [isRealTimeRender, forceRenderTime]);
  const innerStyle = useMemo(() => {
    const baseStyle = style || {};
    let borderRadius = {};
    if (typeof containerBorderRadius === 'number') {
      borderRadius = { borderRadius: containerBorderRadius + 'px' };
    } else if (containerBorderRadius && typeof containerBorderRadius === 'object') {
      borderRadius = containerBorderRadius;
    }
    if (typeof wrapperHeight === 'number') {
      return {
        ...baseStyle,
        ...borderRadius,
        height: `${wrapperHeight}px`,
        overflow: 'hidden', 
        contentVisibility: 'auto',
        containIntrinsicSize: `${wrapperHeight}px`,
      };
    }
    return { ...baseStyle, ...borderRadius };
  }, [containerBorderRadius, wrapperHeight]);
  return (
    <InOrOutViewObserver
      inViewCallback={handleInViewCallback}
      outViewCallback={handleOutViewCallback}
      threshold={0}
    >
      <View ref={domRef} style={innerStyle} className={floorStyle['wrap']}>
        {floorData?.showCommonFloorHead === false ? null : (
          <CommonFloorHead
            dataDefines={dataDefines}
            floorData={floorData}
            {...getRenderRealTimeKeyObj}
          />
        )}
        {props.children &&
          React.cloneElement(props.children, {
            dataDefines: dataDefines,
            ...getRenderRealTimeKeyObj,
          })}
      </View>
    </InOrOutViewObserver>
  );
  isRealTimeRender: false, 
  forceRenderTime: 1, 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conecli/cone-render",
-  "version": "0.10.1-shop3.72",
+  "version": "0.10.1-shop3.73",
   "private": false,
   "files": [
     "dist/"