@conecli/cone-render 0.8.28 → 0.8.30

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/InOrOutViewObserver/index.tsx

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const { children, inViewCallback, outViewCallback, threshold = 0 } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  if (isH5AndJdShopView) {
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        dealPageScrollInfo(res)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        (state) => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          (state) => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('app=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('app=>out可视区域')
      }
    }, [componentShowState])
    
    const handleInOrOutView = (type: boolean) => {
      componentShowStateRef.current = type
      setComponentShowState(type)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = (res) => {
      console.log('dealPageScrollInfo===', res)
      
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (typeof displayHeight === 'undefined' || typeof offSetY === 'undefined') return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      if (componentObserverRef.current) {
        const eleClientRect =
          componentObserverRef.current.getBoundingClientRect()
        const eleOffsetTop = Math.ceil(eleClientRect.top)
        const eleHeight = Math.ceil(eleClientRect.height)
        console.log(
          '==========================eleOffsetTop, eleHeight',
          eleOffsetTop,
          eleHeight,
        )
        if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
          const isOutView =
            offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return <View ref={componentObserverRef}>{children}</View>
  } else {
    const rootDom = document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
    const { ref, inView } = useInView({
      threshold, 
      triggerOnce: false, 
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
    })
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('其他h5=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('其他h5=>out可视区域')
      }
    }, [inView])
    return <View ref={ref}>{children}</View>
  }
  children: null, 
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0, 
+import Taro from '@tarojs/taro'
  TaroEventType,
  WEBVIEW_STATE,
  M_H5_ROOT_ELE_NODE,
  latestFromNativeMsgStorage,
  getNativePageScrollRes,
  props: ComponentInterFace.InOrOutViewObserverProps,
  const {
    children,
    style,
    inViewCallback,
    outViewCallback,
    threshold = 0,
  } = props
  const [componentShowState, setComponentShowState] = useState(false)
  const componentObserverRef = useRef<HTMLElement | null>(null)
  const componentShowStateRef = useRef(false)
  if (isH5AndJdShopView) {
    useEffect(() => {
      const latestRes =
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
      dealPageScrollInfo(latestRes)
      Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
        dealPageScrollInfo(res)
      })
      Taro.eventCenter.on(
        TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
        (state) => {
          state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
        },
      )
      return function cleanup() {
        Taro.eventCenter.off(TaroEventType.PAGE_SCROLL, (res) => {
          dealPageScrollInfo(res)
        })
        Taro.eventCenter.off(
          TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE,
          (state) => {
            state === WEBVIEW_STATE.NOT_VISIBLE && handleInOrOutView(false)
          },
        )
      }
    }, [])
    useEffect(() => {
      if (componentShowState) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('app=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('app=>out可视区域')
      }
    }, [componentShowState])
    
    const handleInOrOutView = (type: boolean) => {
      componentShowStateRef.current = type
      setComponentShowState(type)
      console.log('handleInOrOutView', type)
    }
    
    const dealPageScrollInfo = (res) => {
      console.log('dealPageScrollInfo===', res)
      const { displayHeight, offSetY } = getNativePageScrollRes(res) || {}
      if (
        typeof displayHeight === 'undefined' ||
        typeof offSetY === 'undefined'
      )
        return
      console.log(
        '处理后dealPageScrollInfo===displayHeight=offSetY',
        displayHeight,
        offSetY,
      )
      if (componentObserverRef.current) {
        const eleClientRect =
          componentObserverRef.current.getBoundingClientRect()
        const eleOffsetTop = Math.ceil(eleClientRect.top)
        const eleHeight = Math.ceil(eleClientRect.height)
        console.log(
          '==========================eleOffsetTop, eleHeight',
          eleOffsetTop,
          eleHeight,
        )
        if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
          const isOutView =
            offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)) ||
            displayHeight - (eleOffsetTop - offSetY) <
              Math.ceil(eleHeight * threshold)
          console.log(
            '比较isOutView',
            isOutView,
            offSetY,
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
            displayHeight - (eleOffsetTop - offSetY),
            Math.ceil(eleHeight * threshold),
          )
          handleInOrOutView(!isOutView)
        } else {
          const isInView =
            offSetY >
              eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold) &&
            offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
          console.log(
            '比较isInView',
            isInView,
            offSetY,
            eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold),
            eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)),
          )
          handleInOrOutView(isInView)
        }
      }
    }
    return (
      <View ref={componentObserverRef} style={style}>
        {children}
      </View>
    )
  } else {
    const rootDom = document.querySelector(`${M_H5_ROOT_ELE_NODE}`)
    const { ref, inView } = useInView({
      threshold, 
      triggerOnce: false, 
      root: rootDom || null, 
      rootMargin: `0px 0px 0px 0px`, 
    })
    useEffect(() => {
      if (inView) {
        typeof inViewCallback === 'function' && inViewCallback()
        console.log('其他h5=>in可视区域')
      } else {
        typeof outViewCallback === 'function' && outViewCallback()
        console.log('其他h5=>out可视区域')
      }
    }, [inView])
    return (
      <View ref={ref} style={style}>
        {children}
      </View>
    )
  }
  children: null, 
  style: {},
  className: '',
  inViewCallback: null, 
  outViewCallback: null, 
  threshold: 0, 

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

@@ -1 +1 @@
-import { Button, View } from '@tarojs/components'
    NetWorkErrorSubTip,
        subMessage,
    backgroundColorWhite,
    const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType]
    const useErrorSubTip = subMessage? subMessage: NetWorkErrorSubTip[netWorkDataType]
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    const maxHeight = latestRes.displayHeight || 546   
            style={{maxHeight}}
                {useErrorSubTip? <View className={netWorkErrorStyle['d-error-sub-tip']}>{useErrorSubTip}</View>: null}
                        <Button
                            onClick={refershInitData}
                            className={classNames(
                                netWorkErrorStyle['d-opt-btn'],
                                'd-button-no-border',
                            )}
                            plain
                            size="mini"
                        >
                            重新加载
                        </Button>
                    )}
    subMessage: '',
+import { Button, View } from '@tarojs/components'
    NetWorkErrorSubTip,
        subMessage,
    backgroundColorWhite,
    const useErrorTip = message != '' ? message : NetWorkErrorTip[netWorkDataType]
    const useErrorSubTip = subMessage? subMessage: NetWorkErrorSubTip[netWorkDataType]
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
    const maxHeight = latestRes.displayHeight || 546   
            style={{maxHeight: isMemberPage ? '100vh' : maxHeight}}
                {useErrorSubTip? <View className={netWorkErrorStyle['d-error-sub-tip']}>{useErrorSubTip}</View>: null}
                        <Button
                            onClick={refershInitData}
                            className={classNames(
                                netWorkErrorStyle['d-opt-btn'],
                                'd-button-no-border',
                            )}
                            plain
                            size="mini"
                        >
                            重新加载
                        </Button>
                    )}
    subMessage: '',