@conecli/cone-render 0.10.1-shop-beta.11 → 0.10.1-shop-beta.13

package/dist/components/base/Dialog/index.dynamic.tsx

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'
  title: '',
  message: null,
  className: '',
  maskCloseable: false, 
  show: true, 
  hasFooter: true,
  isCustom: false, 
  titleNode: null,
  bodyNode: null,
  footerNode: null,
  closeBtnText: '取消',
  closeBtnHideState: false,
  confirmBtnText: '确定',
  confirmBtnHideState: false,
  onBeforeConfirm: null,
  onConfirm: null,
  onClose: null,
  onBackground: null,
  onHide: null,
  onInit: null,
  isFormDialog: false,
  onFormSubmit: null,
  onFormReset: null,
  forbiddenBgScrollState: true, 
  const [dialogShowState, setDialogShowState] = useState(false)
  const [dialogConfig, setDialogConfig] =
    useState<ComponentInterFace.DialogConfigProps>({
      type: DialogType.BASE,
    })
  const dialogBackFnRef = useRef<ComponentInterFace.DialogConfigBackFn>({})
  useEffect(() => {
    
    Taro.eventCenter.on(TaroEventType.DIALOG, (res) => {
      res.show ? dialogInit(res) : setDialogShowState(false)
    })
    return () => {
      Taro.eventCenter.off(TaroEventType.DIALOG)
    }
  }, [])
  
  useEffect(() => {
    if (dialogConfig.forbiddenBgScrollState && taroJdBaseInfo.rootEleNode) {
      !dialogShowState ? taroJdBaseInfo.rootEleNode.classList.remove('over-hidden') : taroJdBaseInfo.rootEleNode.classList.add('over-hidden')
    }
  }, [dialogConfig, dialogShowState])
  const dialogInit = useCallback((opts) => {
    const {
      onBeforeConfirm,
      onConfirm,
      onClose,
      onBackground,
      onHide,
      onInit,
      onFormSubmit,
      onFormReset,
      ...otherOpts
    } = opts
    const dialogOpts = Object.assign(
      {},
      {
        ...dialogDefaultConfig,
        type: DialogType.BASE,
      },
      otherOpts,
    )
    dialogBackFnRef.current = {
      onInit,
      onBeforeConfirm,
      onConfirm,
      onClose,
      onBackground,
      onHide,
      onFormSubmit,
      onFormReset,
    }
    setDialogConfig(dialogOpts)
    setDialogShowState(true)
  }, [])
  const hideDialog = useCallback(() => {
    setDialogShowState(false)
  }, [])
  const closeDialog = useCallback(() => {
    hideDialog()
    dialogBackFnRef.current.onHide &&
    typeof dialogBackFnRef.current.onHide === 'function' &&
    dialogBackFnRef.current.onHide(dialogConfig)
  }, [dialogConfig])
  
  const updateDialogContentFn = (changeDialogConfig) => {
    setDialogConfig({
      ...dialogConfig,
      ...changeDialogConfig
    })
  }
  useEffect(() => {
    dialogShowState &&
    dialogBackFnRef.current.onInit &&
    typeof dialogBackFnRef.current.onInit === 'function' &&
    dialogBackFnRef.current.onInit(hideDialog, dialogConfig, updateDialogContentFn)
  }, [dialogShowState])
  
  const dialogConfirmFn = useCallback(
    (e) => {
      e.stopPropagation()
      if (
        dialogBackFnRef.current.onBeforeConfirm &&
        typeof dialogBackFnRef.current.onBeforeConfirm === 'function'
      ) {
        dialogBackFnRef.current.onBeforeConfirm(
          hideDialog,
          dialogConfig,
        )
      } else {
        closeDialog()
        dialogBackFnRef.current.onConfirm &&
        typeof dialogBackFnRef.current.onConfirm === 'function' &&
        dialogBackFnRef.current.onConfirm(dialogConfig)
      }
    },
    [dialogConfig],
  )
  const dialogCloseFn = useCallback(
    (e) => {
      e.stopPropagation()
      closeDialog()
      dialogBackFnRef.current.onClose &&
      typeof dialogBackFnRef.current.onClose === 'function' &&
      dialogBackFnRef.current.onClose(dialogConfig)
    },
    [dialogConfig],
  )
  const dialogBackgroundFn = useCallback(() => {
    if (dialogConfig.maskCloseable) {
      closeDialog()
    }
    if (
      dialogBackFnRef.current.onBackground &&
      typeof dialogBackFnRef.current.onBackground === 'function'
    ) {
      dialogBackFnRef.current.onBackground()
    }
  }, [dialogConfig])
  const renderCustomViewCompontent = (children) => {
    return <>{children}</>
  }
  return dialogShowState ? renderCustomViewCompontent(
    <>
      <View
        className={classNames(dialogStyle['d-dialog-layout'],"J_customLayout")}
        onClick={dialogBackgroundFn}
      >
        <View
          className={classNames(
            dialogStyle['d-dialog-wrap'],
            dialogStyle[`d-dialog-type-${dialogConfig.type}`],
            {
              [dialogStyle['d-dialog-jdapp-wrap']]: isJdApp
            },
            'flexible-center-box',
            dialogConfig.className,
          )}
        >
          {dialogConfig.isCustom ? (
            dialogConfig.bodyNode ? (
              dialogConfig.bodyNode
            ) : null
          ) : (
            <View
              className={classNames(
                dialogStyle['d-dialog-content'],
                'd-dialog-content',
              )}
              onClick={(e) => e.stopPropagation()}
            >
              {dialogConfig.title && dialogConfig.title != '' && (
                <View
                  className={classNames(
                    dialogStyle['d-dialog-header'],
                    'd-dialog-header',
                  )}
                >
                  {dialogConfig.title}
                </View>
              )}
              {dialogConfig.message && (
                <View
                  className={classNames(
                    dialogStyle['d-dialog-body'],
                    'd-dialog-body',
                  )}
                >{dialogConfig.message}</View>
              )}
              {dialogConfig.bodyNode && (
                <View
                  className={classNames(
                    dialogStyle['d-dialog-body'],
                    'd-dialog-body',
                  )}
                >
                  {dialogConfig.bodyNode
                    ? dialogConfig.bodyNode
                    : null}
                </View>
              )}
              {dialogConfig.footerNode ? (
                dialogConfig.footerNode
              ) : dialogConfig.hasFooter ? (
                <View
                  className={classNames(
                    dialogStyle['d-dialog-footer'],
                    {
                      [dialogStyle['d-dialog-footer-btn-line']]: !dialogConfig.closeBtnHideState && !dialogConfig.confirmBtnHideState
                    },
                    'd-dialog-footer',
                    'flexible-box',
                  )}
                >
                  {!dialogConfig.closeBtnHideState && (
                    <Button
                      className={classNames(
                        dialogStyle['d-dialog-btn'],
                        dialogStyle[
                          'd-dialog-cancel-btn'
                          ],
                        'd-dialog-cancel-btn',
                        'adaptive-box-flex',
                      )}
                      form-type={dialogConfig.isFormDialog ? 'reset' : ''}
                      onClick={dialogCloseFn}
                    >
                      {dialogConfig.closeBtnText}
                    </Button>
                  )}
                  {!dialogConfig.confirmBtnHideState && (
                    <Button
                      className={classNames(
                        dialogStyle['d-dialog-btn'],
                        dialogStyle[
                          'd-dialog-ensure-btn'
                          ],
                        'd-dialog-ensure-btn',
                        'adaptive-box-flex',
                      )}
                      onClick={dialogConfirmFn}
                    >
                      {dialogConfig.confirmBtnText}
                    </Button>
                  )}
                </View>
              ) : null}
            </View>
          )
          }
        </View>
      </View>
    </>,
  ) : null

package/dist/components/base/DynamicTest/index.dynamic.module.scss

@@ -0,0 +1,15 @@
+
+.d-sub-dynamic{
+  padding: 30px;
+  background-color: #9ebaee;
+  .d-btn{
+    font-size: 24px;
+    color: #49a6e8;
+    border-radius: 16px;
+    background-color: #dbdbdb;
+  }
+  .d-text{
+    font-size: 30px;
+    color: #c183db;
+  }
+}

package/dist/components/base/DynamicTest/index.module.scss

@@ -0,0 +1,16 @@
+
+
+
+.d-sub-dynamic{
+  padding: 30px;
+  .d-btn{
+    font-size: 24px;
+    color: red;
+    border-radius: 16px;
+    background-color: darkgrey;
+  }
+  .d-text{
+    font-size: 30px;
+    color: #00c853;
+  }
+}

package/dist/components/base/DynamicTest/index.tsx

@@ -0,0 +1 @@
+import Taro from '@tarojs/taro'
  const onClick = () => {
    Taro.showToast({
      title: 'cone-render动态化引入测试'
    })
  }
  return <View className={styles['d-sub-dynamic']}>
    <Button className={styles['d-btn']} onClick={onClick}>动态化楼层按钮测试</Button>
    <Text className={styles['d-text']}>你好，动态化</Text>
  </View>;

package/dist/components/base/ExposureSmart/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  const { type, className, reportData, customReportDataKey, customReportDataFn, trackCallback } = props
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const isCustomReport = customReportDataKey && customReportDataFn
  const checkReportData = Array.isArray(reportData)
  const [floorData, mInfo] = checkReportData ? reportData : []
  const showRenderState = isCustomReport ? true : floorData && mInfo
  const getFloorPointClassName =  isCustomReport ? `J_custom_${customReportDataKey}` : `J_floor_${floorData?.uid}_index_${mInfo?.pos}`
  const getTaroSelector = isCustomReport ? `#J_miniShopRoot >>> .${getFloorPointClassName}` : `#J_floor_${floorData?.uid} >>> .${getFloorPointClassName}`
  useEffect(() => {
    if (isViewOnlineState && reportData) {
      Taro.nextTick(() => {
        if (
          !taroJdBaseInfo.info.pageInfo.floorExposureInfo[
            getFloorPointClassName
            ]
        ){
          const createIntersectionObserver = new intersectionObserver({
            selector: getTaroSelector,
            context: this,
            onFinal: (res) => {
              taroJdBaseInfo.info.pageInfo.floorExposureInfo[
                getFloorPointClassName
                ] = true
              console.log('小程序曝光埋点收到进入可视区域啦！', getFloorPointClassName, reportData, res)
              if(!isCustomReport){
                addReportData(reportData)
                typeof trackCallback === 'function' && trackCallback(reportData)
              }else {
                typeof customReportDataFn === 'function' && customReportDataFn(customReportDataKey)
              }
              createIntersectionObserver.disconnect()
            },
          })
          createIntersectionObserver.connect()
        }
      })
    }
  }, [])
  return (showRenderState ? (
      <View
        className={classNames(
          {
            [exposureStyle['d-report-point']]: type === TrackType.point,
          },
          {
            [exposureStyle['d-report-floor']]: type === TrackType.floor,
          },
          getFloorPointClassName,
          className,
        )}
      />
    ) : null
  )
  return useMemo(() => {
    return <ExposureFloor {...props} />
  }, [])
  reportData: null, 
  trackCallback: null, 
  type: TrackType.point,
+import Taro from '@tarojs/taro'
  const { type = TrackType.point, className, reportData = null, customReportDataKey, customReportDataFn, trackCallback = null } = props
  const isViewOnlineState =
    taroJdBaseInfo.info.pageInfo.dataType === BUSINESS_TYPE.ONLINE
  const isCustomReport = customReportDataKey && customReportDataFn
  const checkReportData = Array.isArray(reportData)
  const [floorData, mInfo] = checkReportData ? reportData : []
  const showRenderState = isCustomReport ? true : floorData && mInfo
  const getFloorPointClassName =  isCustomReport ? `J_custom_${customReportDataKey}` : `J_floor_${floorData?.uid}_index_${mInfo?.pos}`
  const getTaroSelector = !isDynamic ? isCustomReport ? `#J_miniShopRoot >>> .${getFloorPointClassName}` : `#J_floor_${floorData?.uid} >>> .${getFloorPointClassName}` : isCustomReport ? `#J_shopRoot .${getFloorPointClassName}` : `#J_floor_${floorData?.uid} .${getFloorPointClassName}`
  useEffect(() => {
    if (isViewOnlineState && reportData) {
      Taro.nextTick(() => {
        if (
          !taroJdBaseInfo.info.pageInfo.floorExposureInfo[
            getFloorPointClassName
            ]
        ){
          const createIntersectionObserver = new intersectionObserver({
            selector: getTaroSelector,
            context: this,
            onFinal: (res) => {
              taroJdBaseInfo.info.pageInfo.floorExposureInfo[
                getFloorPointClassName
                ] = true
              console.log(`${isDynamic ? 'taro动态化' : '小程序'}曝光埋点收到进入可视区域啦！`, getFloorPointClassName, reportData, res)
              if(!isCustomReport){
                addReportData(reportData)
                typeof trackCallback === 'function' && trackCallback(reportData)
              }else {
                typeof customReportDataFn === 'function' && customReportDataFn(customReportDataKey)
              }
              createIntersectionObserver.disconnect()
            },
          })
          createIntersectionObserver.connect()
        }
      })
    }
  }, [])
  return (showRenderState ? (
      <View
        className={classNames(
          {
            [exposureStyle['d-report-point']]: type === TrackType.point,
          },
          {
            [exposureStyle['d-report-floor']]: type === TrackType.floor,
          },
          getFloorPointClassName,
          className,
        )}
      />
    ) : null
  )
  return useMemo(() => {
    return <ExposureFloor {...props} />
  }, [])

package/dist/components/base/ItemViewExposureSmart/index.tsx

@@ -1 +1 @@
-import React, { useRef } from 'react';
  const {
    className,
    pointClassName,
    children,
    reportData,
    customReportDataKey,
    customReportDataFn,
    trackCallback,
    ...otherProps
  } = props;
  const itemViewExposureRef = useRef(null);
  const isCustomReport = customReportDataKey && customReportDataFn;
  const checkReportData = Array.isArray(reportData);
  const [floorData, mInfo] = checkReportData ? reportData : [];
  const checkReportDataState = isCustomReport ? true : floorData && mInfo;
  
  floorData && mInfo && !mInfo.hasOwnProperty('pos') && (mInfo.pos = 0);
  return (
    <View
      ref={itemViewExposureRef}
      className={classNames(itemViewExposureSmartStyle['d-item-point-layout'], className)}
      {...otherProps}
    >
      {children ? children : null}
      {checkReportDataState && (
        <ExposureSmart
          className={classNames(pointClassName, {
            [itemViewExposureSmartStyle['d-item-chart-point']]: isChartH5,
          })}
          innerRef={itemViewExposureRef}
          reportData={reportData}
          trackCallback={trackCallback}
          customReportDataFn={customReportDataFn}
          customReportDataKey={customReportDataKey}
          markPoint
        />
      )}
    </View>
  );
  reportData: [],
  customReportDataKey: null,
  customReportDataFn: null,
  customReportDataForMapFn: null,
+import React, { useRef } from 'react';
  const {
    className,
    pointClassName,
    children,
    reportData = [],
    customReportDataKey = null,
    customReportDataFn = null,
    trackCallback,
    ...otherProps
  } = props;
  const itemViewExposureRef = useRef(null);
  const isCustomReport = customReportDataKey && customReportDataFn;
  const checkReportData = Array.isArray(reportData);
  const [floorData, mInfo] = checkReportData ? reportData : [];
  const checkReportDataState = isCustomReport ? true : floorData && mInfo;
  
  floorData && mInfo && !mInfo.hasOwnProperty('pos') && (mInfo.pos = 0);
  return (
    <View
      ref={itemViewExposureRef}
      className={classNames(itemViewExposureSmartStyle['d-item-point-layout'], className)}
      {...otherProps}
    >
      {children ? children : null}
      {checkReportDataState && (
        <ExposureSmart
          className={classNames(pointClassName, {
            [itemViewExposureSmartStyle['d-item-chart-point']]: isChartH5,
          })}
          innerRef={itemViewExposureRef}
          reportData={reportData}
          trackCallback={trackCallback}
          customReportDataFn={customReportDataFn}
          customReportDataKey={customReportDataKey}
          markPoint
        />
      )}
    </View>
  );

package/dist/components/base/JdLoading/index.module.scss

@@ -5,6 +5,8 @@
     left: 0;
     right: 0;
     bottom: 0;
+    width: 100%;
+    height: 100%;
     z-index: 1;
     display: flex;
     justify-content: center;

package/dist/components/base/JdLoading/index.tsx

@@ -1 +1 @@
-import React from 'react'
+import React, { useEffect } from 'react';
  className: null,
  hideState: false, 
  fullState: false, 
  localState: false, 
  style: {},
  text: null,
  const { className, hideState, fullState, localState, style, text } = Object.assign({},defaultProps,props)
  return (
    <View
      style={style}
      className={classNames(jdLoadingStyle['d-jd-loading'], className, {
        [jdLoadingStyle['d-jd-full-loading']]: fullState,
        [jdLoadingStyle['d-jd-local-loading']]: localState,
        [jdLoadingStyle['d-jd-loading-hide']]: hideState,
      })}
    >
      <Image
        className={jdLoadingStyle['d-loading-image']}
        src={JD_LOADING_GIF}
      />
      {text && (
        <Text className={jdLoadingStyle['d-loading-text']}>{text}</Text>
      )}
    </View>
  )