@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.7

package/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -1,181 +0,0 @@
-import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
-import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent, useAnimatedValue } from 'react-native'
-import { ScrollViewContext, StickyContext } from './context'
-import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
-import { error } from '@mpxjs/utils'
-import useInnerProps, { getCustomEvent } from './getInnerListeners'
-
-interface StickyHeaderProps {
-  children?: ReactNode;
-  style?: ViewStyle;
-  padding?: [number, number, number, number];
-  'offset-top'?: number;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-  bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
-}
-
-const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
-  const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
-  const {
-    style,
-    bindstickontopchange,
-    padding = [0, 0, 0, 0],
-    'offset-top': offsetTop = 0,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'parent-width': parentWidth,
-    'parent-height': parentHeight
-  } = props
-
-  const scrollViewContext = useContext(ScrollViewContext)
-  const stickyContext = useContext(StickyContext)
-  const { scrollOffset } = scrollViewContext
-  const { registerStickyHeader, unregisterStickyHeader } = stickyContext
-  const headerRef = useRef<View>(null)
-  const isStickOnTopRef = useRef(false)
-  const id = useId()
-
-  const {
-    normalStyle,
-    hasVarDec,
-    varContextRef,
-    hasSelfPercent,
-    setWidth,
-    setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
-
-  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout })
-
-  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
-
-  const headerTopAnimated = useAnimatedValue(0)
-  // harmony animatedValue 不支持通过 _value 访问
-  const headerTopRef = useRef(0)
-
-  useEffect(() => {
-    registerStickyHeader({ key: id, updatePosition })
-    return () => {
-      unregisterStickyHeader(id)
-    }
-  }, [])
-
-  function updatePosition () {
-    if (headerRef.current) {
-      const scrollViewRef = scrollViewContext.gestureRef
-      if (scrollViewRef && scrollViewRef.current) {
-        headerRef.current.measureLayout(
-          scrollViewRef.current,
-          (left: number, top: number) => {
-            Animated.timing(headerTopAnimated, {
-              toValue: top,
-              duration: 0,
-              useNativeDriver: true
-            }).start()
-            headerTopRef.current = top
-          }
-        )
-      } else {
-        error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference')
-      }
-    }
-  }
-
-  function onLayout (e: LayoutChangeEvent) {
-    updatePosition()
-  }
-
-  useNodesRef(props, ref, headerRef, {
-    style: normalStyle
-  })
-
-  useEffect(() => {
-    if (!bindstickontopchange) return
-
-    const listener = scrollOffset.addListener((state: { value: number }) => {
-      const currentScrollValue = state.value
-      const newIsStickOnTop = currentScrollValue > headerTopRef.current
-      if (newIsStickOnTop !== isStickOnTopRef.current) {
-        isStickOnTopRef.current = newIsStickOnTop
-        bindstickontopchange(
-          getCustomEvent('stickontopchange', {}, {
-            detail: {
-              isStickOnTop: newIsStickOnTop
-            },
-            layoutRef
-          }, props))
-      }
-    })
-
-    return () => {
-      scrollOffset.removeListener(listener)
-    }
-  }, [])
-
-  const animatedStyle = useMemo(() => {
-    const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolateLeft: 'clamp',
-      extrapolateRight: 'extend'
-    })
-
-    const finalTranslateY = offsetTop === 0
-      ? translateY
-      : Animated.add(
-        translateY,
-        Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, offsetTop],
-          extrapolate: 'clamp'
-        })
-      )
-
-    return {
-      transform: [{ translateY: finalTranslateY }]
-    }
-  }, [scrollOffset, headerTopAnimated, offsetTop])
-
-  const innerProps = useInnerProps(extendObject({}, props, {
-    ref: headerRef,
-    style: extendObject({}, styles.content, innerStyle, animatedStyle, {
-      paddingTop: padding[0] || 0,
-      paddingRight: padding[1] || 0,
-      paddingBottom: padding[2] || 0,
-      paddingLeft: padding[3] || 0
-    })
-  }, layoutProps), [], { layoutRef })
-
-  return (
-    createElement(
-      Animated.View,
-      innerProps,
-      wrapChildren(
-        props,
-        {
-          hasVarDec,
-          varContext: varContextRef.current,
-          textStyle,
-          textProps
-        }
-      )
-    )
-  )
-})
-
-const styles = StyleSheet.create({
-  content: {
-    width: '100%',
-    zIndex: 10,
-    // harmony 需要手动设置 relative， zIndex 才生效
-    position: 'relative'
-  }
-})
-
-_StickyHeader.displayName = 'MpxStickyHeader'
-export default _StickyHeader

package/lib/runtime/components/react/mpx-sticky-section.tsx

@@ -1,96 +0,0 @@
-
-import { useRef, forwardRef, createElement, ReactNode, useCallback, useMemo } from 'react'
-import { View, ViewStyle } from 'react-native'
-import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
-import { StickyContext } from './context'
-import useInnerProps from './getInnerListeners'
-
-interface StickySectionProps {
-  children?: ReactNode;
-  style?: ViewStyle;
-  'offset-top'?: number;
-  'enable-var'?: boolean;
-  'external-var-context'?: Record<string, any>;
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
-}
-
-const _StickySection = forwardRef<HandlerRef<View, StickySectionProps>, StickySectionProps>((stickySectionProps: StickySectionProps = {}, ref): JSX.Element => {
-  const { textProps, innerProps: props = {} } = splitProps(stickySectionProps)
-  const {
-    style,
-    'enable-var': enableVar,
-    'external-var-context': externalVarContext,
-    'parent-font-size': parentFontSize,
-    'parent-width': parentWidth,
-    'parent-height': parentHeight
-  } = props
-  const sectionRef = useRef<View>(null)
-
-  const {
-    normalStyle,
-    hasVarDec,
-    varContextRef,
-    hasSelfPercent,
-    setWidth,
-    setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
-
-  const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout })
-
-  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
-
-  const stickyHeaders = useRef<Map<string, any>>(new Map())
-
-  const registerStickyHeader = useCallback((item: { id: string, updatePosition: Function }) => {
-    stickyHeaders.current.set(item.id, item)
-  }, [])
-
-  const unregisterStickyHeader = useCallback((id: string) => {
-    stickyHeaders.current.delete(id)
-  }, [])
-
-  const contextValue = useMemo(() => ({
-    registerStickyHeader,
-    unregisterStickyHeader
-  }), [])
-
-  useNodesRef(props, ref, sectionRef, {
-    style: normalStyle
-  })
-
-  function onLayout () {
-    stickyHeaders.current.forEach(item => {
-      item.updatePosition()
-    })
-  }
-
-  const innerProps = useInnerProps(extendObject({}, props, {
-    style: extendObject(innerStyle, layoutStyle),
-    ref: sectionRef
-  }, layoutProps), [], { layoutRef })
-
-  return (
-    createElement(
-      View,
-      innerProps,
-      createElement(
-        StickyContext.Provider,
-        { value: contextValue },
-        wrapChildren(
-          props,
-          {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-          }
-        )
-      ))
-  )
-})
-
-_StickySection.displayName = 'MpxStickySection'
-export default _StickySection

package/lib/runtime/components/web/mpx-sticky-header.vue

@@ -1,99 +0,0 @@
-<script>
-import { warn } from '@mpxjs/utils'
-import { getCustomEvent } from './getInnerListeners'
-
-  export default {
-    name: 'mpx-sticky-header',
-    inject: ['scrollOffset', 'refreshVersion'],
-    props: {
-      offsetTop: {
-        type: Number,
-        default: 0
-      },
-      padding: Array
-    },
-    data() {
-      return {
-        headerTop: 0,
-        isStickOnTop: false
-      }
-    },
-    watch: {
-      scrollOffset: {
-        handler(newScrollOffset) {
-          const newIsStickOnTop = newScrollOffset > this.headerTop
-          if (newIsStickOnTop !== this.isStickOnTop) {
-            this.isStickOnTop = newIsStickOnTop
-            this.$emit('stickontopchange', getCustomEvent('stickontopchange', {
-              isStickOnTop: newIsStickOnTop
-            }, this))
-          }
-
-          this.setTransformStyle()
-        },
-        immediate: true
-      },
-      refreshVersion: {
-        handler() {
-          this.setHeaderTop()
-          this.setTransformStyle()
-        },
-      }
-    },
-    mounted() {
-      this.setPaddingStyle()
-      this.setHeaderTop()
-    },
-    methods: {
-      setHeaderTop () {
-        const parentElement = this.$el.parentElement
-          if (!parentElement) return
-          
-          const parentClass = parentElement.className || ''
-          const isStickySection = /mpx-sticky-section/.test(parentClass)
-          const isScrollViewWrapper = /mpx-inner-wrapper/.test(parentClass)
-          
-          if (!isStickySection && !isScrollViewWrapper) {
-            warn('sticky-header only supports being a direct child of a scroll-view or sticky-section component.')
-            return
-          }
-          this.headerTop = isStickySection 
-            ? this.$el.offsetTop + parentElement.offsetTop
-            : this.$el.offsetTop
-      },
-      setPaddingStyle() {
-        const stickyHeader = this.$refs.stickyHeader
-        if (!stickyHeader) return
-        
-        if (this.padding && Array.isArray(this.padding)) {
-          const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
-          stickyHeader.style.padding = `${top}px ${right}px ${bottom}px ${left}px`
-        }
-      },
-      setTransformStyle () {
-        const stickyHeader = this.$refs.stickyHeader
-        if (!stickyHeader) return
-        
-        // 设置 transform
-        if (this.scrollOffset > this.headerTop) {
-          stickyHeader.style.transform = `translateY(${this.scrollOffset - this.headerTop + this.offsetTop}px)`
-        } else {
-          stickyHeader.style.transform = 'none'
-        }
-      }
-    },
-    render(h) {
-      const style = {
-        width: '100%',
-        boxSizing: 'border-box',
-        position: 'relative',
-        zIndex: 10
-      }
-
-      return h('div', {
-        style,
-        ref: 'stickyHeader'
-      }, this.$slots.default)
-    }
-  }
-</script>

package/lib/runtime/components/web/mpx-sticky-section.vue

@@ -1,15 +0,0 @@
-<script>
-  export default {
-    name: 'mpx-sticky-section',
-    render(h) {
-      const style = {
-        position: 'relative'
-      }
-
-      return h('div', {
-        style,
-        class: 'mpx-sticky-section'
-      }, this.$slots.default)
-    }
-  }
-</script>