@conecli/cone-render 0.8.19 → 0.8.20-beta.0

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

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
      if (!isH5 || !ref.current) return
      playVideo()
      manualPauseStateRef.current = false
    }
      if (!isH5 || !ref.current) return
      pauseVideo()
      manualPauseStateRef.current = true
    }
    if (!isH5 || !ref.current) return
  }, [])
+import React, { useCallback, useEffect, useRef, useState } from 'react'
  isH5,
  addHttps,
  isH5AndJingGouMini,
  isH5AndJdShopView,
  (props: ComponentInterFace.CustomVideoProps, ref: any) => {
    const {
      style,
      videoStyle,
      src,
      width,
      height,
      controls,
      poster,
      autoplay,
      loop,
      showMuteBtn,
      muteButtonPostion,
      showFullscreenBtn,
      muteBtnPicSrcObj,
      muteBtnClassName,
      muteBtnStyle,
      objectFit,
      mockAutoplay,
      threshold,
      onPlayCallback,
      onPauseCallback,
      onVideoApiCall,
      inViewCallback,
      outViewCallback,
    } = props
    const [videoMutedState, setVideoMutedState] = useState(MUTED)
    const manualPauseStateRef = useRef(false)
    const initPlayStatusRef = useRef(false)
    const isInViewStateRef = useRef(false)
    const disposeRef = useRef<Function | null>()
    ref === null && (ref = useRef<HTMLVideoElement | null>())
    
    const playVideo = useCallback(() => {
      if (ref && ref.current) {
        const result = ref.current.play()
        result &&
          result
            .then(() => {
              console.log('播放成功')
            })
            .catch((e) => {
              console.log('playVideo Error:', e.message)
            })
      }
    }, [])
    
    const pauseVideo = useCallback(() => {
      if (ref && ref.current) {
        console.log('pauseVideo')
        ref.current.pause()
      }
    }, [])
    
    useEffect(() => {
      if (!isH5 || !ref.current) return
      if (autoplay && mockAutoplay) {
        
        const callInitAutoplay = () => {
          console.log(
            'callInitAutoplay:',
            autoplay,
            'initPlayStatusRef:',
            initPlayStatusRef.current,
            'isInViewStateRef:',
            isInViewStateRef.current,
            'paused:',
            ref.current.paused,
          )
          if (
            autoplay &&
            mockAutoplay &&
            !initPlayStatusRef.current &&
            isInViewStateRef.current &&
            ref.current.paused
          ) {
            console.log('callInitAutoplay playVideo')
            playVideo()
          }
        }
        const onWeixinJSBridgeReady = (e) => {
          console.log('onWeixinJSBridgeReady:', e.type)
          callInitAutoplay()
        }
        const onTouchstart = (e) => {
          console.log('onTouchstart:', e.type)
          callInitAutoplay()
        }
        const onScroll = (e) => {
          console.log('onScroll:', e.type)
          callInitAutoplay()
        }
        const onPlay = (e) => {
          console.log('onPlay:', e.type)
          if (!initPlayStatusRef.current) {
            const dispose = disposeRef.current
            console.log('onPlay dispose:', dispose)
            dispose && dispose()
            disposeRef.current = null
          }
          initPlayStatusRef.current = true
        }
        document?.addEventListener('WeixinJSBridgeReady', onWeixinJSBridgeReady)
        document?.addEventListener('touchstart', onTouchstart)
        document?.addEventListener('scroll', onScroll)
        ref.current.addEventListener('play', onPlay)
        const dispose = () => {
          console.log('调用dispose')
          document?.removeEventListener(
            'WeixinJSBridgeReady',
            onWeixinJSBridgeReady,
          )
          document?.removeEventListener('touchstart', onTouchstart)
          document?.removeEventListener('scroll', onScroll)
          ref?.current?.removeEventListener('play', onPlay)
        }
        disposeRef.current = dispose
      }
      !autoplay && (manualPauseStateRef.current = true)
      const handleVideoPlayApiCall = () => {
        if (!isH5 || !ref.current) return
        playVideo()
        manualPauseStateRef.current = false
      }
      const handleVideoPauseApiCall = () => {
        if (!isH5 || !ref.current) return
        pauseVideo()
        manualPauseStateRef.current = true
      }
      
      const handleVideoSeekApiCall = (position: number) => {
        console.log('video定位至', position)
        if (!isH5 || !ref.current) return
        if (typeof position === 'undefined' || typeof position !== 'number')
          return
        ref.current.currentTime = position
      }
      
      if (onVideoApiCall) {
        onVideoApiCall({
          play: handleVideoPlayApiCall,
          pause: handleVideoPauseApiCall,
          seek: handleVideoSeekApiCall,
        })
      }
      return () => {
        const dispose = disposeRef.current
        dispose && dispose()
        disposeRef.current = null
      }
    }, [])
    
    const handleMuted = useCallback(() => {
      if (!isH5 || !ref.current) return
      const handleMutedState = ref.current.muted
      if (handleMutedState === true) {
        ref.current.muted = false
        setVideoMutedState(false)
      } else {
        ref.current.muted = true
        setVideoMutedState(true)
      }
    }, [videoMutedState])
    
    const handleVideoInViewCallback = useCallback(() => {
      if (!isH5 || !ref.current) return
      isInViewStateRef.current = true
      console.log(
        '进入可视区域，initPlayStatusRef:',
        initPlayStatusRef.current,
        'isInViewStateRef:',
        isInViewStateRef.current,
      )
      if (
        autoplay &&
        mockAutoplay &&
        !initPlayStatusRef.current &&
        ref.current.paused
      ) {
        console.log('进入可视区域了 callInitAutoplay playVideo')
        playVideo()
      } else if (!manualPauseStateRef.current && ref.current.paused) {
        playVideo()
      }
      typeof inViewCallback === 'function' && inViewCallback()
    }, [])
    
    const handleVideoOutViewCallback = useCallback(() => {
      if (!isH5 || !ref.current) return
      isInViewStateRef.current = false
      console.log(
        '不在可视区域, 视频暂停了, isInViewStateRef:',
        isInViewStateRef.current,
      )
      pauseVideo()
      typeof outViewCallback === 'function' && outViewCallback()
    }, [])
    
    const getVideoWidthAndHeightStyle = () => {
      const style = {}
      width && (style['width'] = width)
      height && (style['height'] = height)
      return style
    }
    
    const getMuteBtnBackgroundImageStyle = useCallback(() => {
      const isMutedPicSrc = muteBtnPicSrcObj?.IS_MUTED
      const notMutedPicSrc = muteBtnPicSrcObj?.NOT_MUTED
      const finalIsMutedPicSrc =
        typeof isMutedPicSrc !== 'undefined' && isMutedPicSrc !== ''
          ? isMutedPicSrc
          : DEFAULT_MUTE_BTN_PIC.IS_MUTED
      const finalNotMutedPicSrc =
        typeof notMutedPicSrc !== 'undefined' && notMutedPicSrc !== ''
          ? notMutedPicSrc
          : DEFAULT_MUTE_BTN_PIC.NOT_MUTED
      return {
        backgroundImage: `url(${
          videoMutedState ? finalIsMutedPicSrc : finalNotMutedPicSrc
        })`,
      }
    }, [videoMutedState])
    console.log('autoplay:', autoplay, 'muted:', MUTED)
    console.log('isH5:', isH5, 'isH5AndJingGouMini:', isH5AndJingGouMini)
    return src ? (
      <InOrOutViewObserver
        inViewCallback={handleVideoInViewCallback}
        outViewCallback={handleVideoOutViewCallback}
        threshold={threshold}
      >
        {isH5 ? (
          <View
            className={customVideoStyle['d-video-wrap']}
            style={{ ...style, ...getVideoWidthAndHeightStyle() }}
          >
            <video
              style={{ ...videoStyle }}
              className={customVideoStyle['d-video-play']}
              src={src}
              controls={controls}
              poster={poster ? addHttps(poster) : ''}
              ref={ref}
              loop={loop}
              autoPlay={autoplay}
              muted={MUTED}
              x5-playsinline="true"
              playsInline
              webkit-playsinline="true"
              controlsList={
                isH5AndJdShopView
                  ? 'nodownload nofullscreen noremoteplayback'
                  : ''
              }
              onPlay={onPlayCallback}
              onPause={onPauseCallback}
            />
            {!controls && showMuteBtn && (
              <View
                className={classNames(
                  customVideoStyle['d-video-mute-btn'],
                  customVideoStyle[`d-mute-btn-${muteButtonPostion}`],
                  `${muteBtnClassName}`,
                )}
                style={{ ...getMuteBtnBackgroundImageStyle(), ...muteBtnStyle }}
                onClick={handleMuted}
              ></View>
            )}
          </View>
        ) : (
          <Video
            style={{ ...videoStyle }}
            ref={ref}
            className={customVideoStyle['d-video-play']}
            src={src}
            controls={controls}
            poster={poster ? addHttps(poster) : ''}
            loop={loop}
            autoplay={autoplay}
            muted={MUTED}
            showMuteBtn={showMuteBtn}
            showFullscreenBtn={showFullscreenBtn}
            objectFit={objectFit}
            onPlay={onPlayCallback}
            onPause={onPauseCallback}
          />
        )}
      </InOrOutViewObserver>
    ) : null
  },
  const buildType = process.env.BUILD_TYPE
  const mockAutoplay = buildType === BUILD_TYPE.DECORATE ? false : true
  return mockAutoplay
  style: {},
  videoStyle: {},
  className: '',
  src: '',
  width: '100%',
  height: '100%',
  controls: false,
  poster: '',
  autoplay: true,
  mockAutoplay: getDefaultMockAutoplay(),
  loop: true,
  showMuteBtn: true,
  muteButtonPostion: 'topLeft',
  muteBtnPicSrcObj: DEFAULT_MUTE_BTN_PIC,
  muteBtnClassName: '',
  muteBtnStyle: {},
  showFullscreenBtn: false,
  objectFit: 'cover',
  threshold: 0.6,

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

@@ -40,6 +40,7 @@
 	.d-dialog-footer {
 		.d-dialog-btn {
 			position: relative;
+      margin: 0;
 			display: block;
 			height: 88px;
 			line-height: 88px;
@@ -50,6 +51,8 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			box-sizing: border-box;
+      background-color: #fff;
+      border-radius: 0;
 			&:after {
 				content: '';
 				display: block;
@@ -62,6 +65,8 @@
 				-ms-transform: scaleX(0.5);
 				transform: scaleY(0.5);
 				pointer-events: none;
+        border: none;
+        border-radius: 0;
 			}
 		}
 		.d-dialog-ensure-btn {
@@ -81,8 +86,7 @@
 			}
 		}
 		.d-dialog-cancel-btn {
-			background-color: #ffffff;
-			color: #000000;
+			color: #000;
 		}
 	}
 }

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
+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 dialogFormSubmit = useCallback((e) => {
        if (
            dialogBackFnRef.current.onFormSubmit &&
            typeof dialogBackFnRef.current.onFormSubmit === 'function'
        ) {
            dialogBackFnRef.current.onFormSubmit(e,hideDialog, dialogConfig)
        }
    }, [dialogConfig])
    const dialogFormReset = useCallback((e) => {
        if (
            dialogBackFnRef.current.onFormReset &&
            typeof dialogBackFnRef.current.onFormReset === 'function'
        ) {
            dialogBackFnRef.current.onFormReset(e,hideDialog, dialogConfig)
        }
    }, [dialogConfig])
    const renderCustomViewCompontent = (children) => {
        return dialogConfig.isFormDialog ?
            <Form className={classNames(dialogStyle['d-form-dialog'])} onSubmit={dialogFormSubmit}
                  onReset={dialogFormReset}>{children}</Form> : <>{children}</>
    }
    return dialogShowState ? renderCustomViewCompontent(
        <>
            <View
                className={dialogStyle['d-dialog-layout']}
                onClick={dialogBackgroundFn}
            >
                <View
                    className={classNames(
                        dialogStyle['d-dialog-wrap'],
                        dialogStyle[`d-dialog-type-${dialogConfig.type}`],
                        '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',
                                    )}
                                    dangerouslySetInnerHTML={{
                                        __html: dialogConfig.message,
                                    }}
                                />
                            )}
                            {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'],
                                        '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}
                                            form-type={dialogConfig.isFormDialog ? 'submit' : ''}
                                        >
                                            {dialogConfig.confirmBtnText}
                                        </Button>
                                    )}
                                </View>
                            ) : null}
                        </View>
                    )
                    }
                </View>
            </View>
        </>,
    ) : null

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    const inViewCallback = () => {
        console.log('埋点收到进入可视区域的回到啦！', reportData)
        addReportData(reportData)
    }
            exposureStyle.root,
            className,
        )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>
+import Taro from '@tarojs/taro'
    const inViewCallback = () => {
        console.log('埋点收到进入可视区域的回到啦！', reportData)
        addReportData(reportData)
    }
            exposureStyle.root,
            className,
        )} height={'100%'} inViewCallback={inViewCallback}></InViewRender>