@mpxjs/webpack-plugin 2.9.59 → 2.9.64

package/lib/runtime/components/react/mpx-swiper/index.tsx

@@ -1,6 +1,6 @@
-import { View, ScrollView } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
-import { default as Carouse } from './carouse'
+import { ScrollView } from 'react-native'
+import { JSX, MutableRefObject, forwardRef, useRef } from 'react'
+import Carouse from './carouse'
 import { SwiperProps } from './type'
 import useInnerProps from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
@@ -15,13 +15,14 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
  * ✔ circular
  * ✔ vertical
  * ✘ display-multiple-items
- * ✔ previous-margin
- * ✔ next-margin
+ * ✘ previous-margin
+ * ✘ next-margin
+ * ✔ easing-function  ="easeOutCubic"
  * ✘ snap-to-edge
  */
-const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperProps>((props: SwiperProps, ref): React.JSX.Element => {
+const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperProps>((props: SwiperProps, ref): JSX.Element => {
   const { children } = props
-  let innerLayout = useRef({})
+  const innerLayout = useRef({})
   const swiperProp = {
     circular: props.circular || false,
     current: props.current || 0,
@@ -29,17 +30,22 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     duration: props.duration || 500,
     interval: props.interval || 5000,
     showsPagination: props['indicator-dots'],
-    dotColor: props['indicator-color'] || "rgba(0, 0, 0, .3)",
+    dotColor: props['indicator-color'] || 'rgba(0, 0, 0, .3)',
     activeDotColor: props['indicator-active-color'] || '#000000',
     horizontal: props.vertical !== undefined ? !props.vertical : true,
-    style: props.style,
     previousMargin: props['previous-margin'] ? parseInt(props['previous-margin']) : 0,
     nextMargin: props['next-margin'] ? parseInt(props['next-margin']) : 0,
-    enableOffset: props['enable-offset'] || false,
-    bindchange: props.bindchange
+    enableOffset: props['enable-offset'] || true,
+    enableVar: props['enable-var'] || false,
+    parentFontSize: props['parent-font-size'],
+    parentWidth: props['parent-width'],
+    parentHeight: props['parent-height'],
+    style: props.style || {},
+    externalVarContext: props['external-var-context'],
+    bindchange: props.bindchange,
+    easingFunction: props['easing-function'] || 'default'
   }
-  const { nodeRef } = useNodesRef<ScrollView, SwiperProps>(props, ref, {
-  })
+  const { nodeRef } = useNodesRef<ScrollView, SwiperProps>(props, ref, {})
   const innerProps = useInnerProps(props, {
     ref: nodeRef
   }, [
@@ -47,22 +53,24 @@ const _SwiperWrapper = forwardRef<HandlerRef<ScrollView, SwiperProps>, SwiperPro
     'indicator-color',
     'indicator-active-color',
     'previous-margin',
-    'next-margin'
+    'vertical',
+    'previous-margin',
+    'next-margin',
+    'easing-function'
   ], { layoutRef: innerLayout })
 
-  const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
+  const getInnerLayout = (layout: MutableRefObject<{}>) => {
     innerLayout.current = layout.current
   }
 
   return <Carouse
     getInnerLayout={getInnerLayout}
     innerProps={innerProps}
-    {...swiperProp}
-    {...innerProps}>
+    {...innerProps}
+    {...swiperProp}>
     {children}
   </Carouse>
-
 })
-_SwiperWrapper.displayName = 'mpx-swiper';
+_SwiperWrapper.displayName = 'mpx-swiper'
 
 export default _SwiperWrapper

package/lib/runtime/components/react/mpx-swiper/type.ts

@@ -1,5 +1,8 @@
 import { ReactNode } from 'react'
 import { NativeSyntheticEvent } from 'react-native'
+
+export type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
+
 export interface SwiperProps {
   children?: ReactNode;
   circular?: boolean;
@@ -11,11 +14,18 @@ export interface SwiperProps {
   'indicator-color'?: string;
   'indicator-active-color'?: string;
   vertical?: boolean;
-  style?: string;
-  easingFunction?: string;
+  style: {
+    [key: string]: any
+  };
+  'easing-function'?: EaseType;
   'previous-margin'?: string;
   'next-margin'?: string;
   'enable-offset'?: boolean;
+  'enable-var': boolean;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  'external-var-context'?: Record<string, any>;
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
 }
 
@@ -30,14 +40,21 @@ export interface CarouseProps {
   dotColor?: string;
   activeDotColor?: string;
   horizontal?: boolean;
-  style?: string;
-  easingFunction?: string;
+  easingFunction?: EaseType;
   previousMargin?: number;
   nextMargin?: number;
   enableOffset?: boolean;
+  parentFontSize?: number;
+  parentWidth?: number;
+  parentHeight?: number;
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
-  getInnerLayout: Function,
+  getInnerLayout: Function;
   innerProps: Object;
+  style: {
+    [key: string]: any
+  };
+  enableVar: boolean;
+  externalVarContext?: Record<string, any>;
 }
 
 export interface CarouseState {
@@ -55,6 +72,7 @@ export interface CarouseState {
   autoplayEnd: boolean;
   loopJump: boolean;
   dir: 'x' | 'y';
+  isScrollEnd: boolean
 }
 
 export interface ScrollElementProps {

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -1,27 +1,53 @@
-import { View } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
+import { View, LayoutChangeEvent } from 'react-native'
+import { ReactNode, forwardRef, useRef } from 'react'
 import useInnerProps from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils'
 
 interface SwiperItemProps {
   'item-id'?: string;
   'enable-offset'?: boolean;
-  children?: React.ReactNode;
+  'enable-var': boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  children?: ReactNode;
+  style?: Object;
 }
 
 const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProps>((props: SwiperItemProps, ref) => {
-  const { children, 'enable-offset': enableOffset } = props
-  const layoutRef = useRef({})
+  const {
+    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    style
+  } = props
+
+  const { textProps } = splitProps(props)
   const { nodeRef } = useNodesRef(props, ref, {})
 
-  const onLayout = () => {
-    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-      layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-    })
-  }
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext })
+  const { textStyle, innerStyle } = splitStyle(normalStyle)
+
+  const {
+    // 存储layout布局信息
+    layoutRef,
+    layoutProps,
+    layoutStyle
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
 
   const innerProps = useInnerProps(props, {
-    ...(enableOffset ? { onLayout } : {}),
+    style: { ...innerStyle, ...layoutStyle },
+    ref: nodeRef,
+    ...layoutProps
   }, [
     'children',
     'enable-offset'
@@ -29,14 +55,23 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
 
   return (
     <View
-      ref={nodeRef}
       data-itemId={props['item-id']}
       {...innerProps}>
-      {children}
+       {
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+          }
+        )
+      }
     </View>
   )
 })
 
-_SwiperItem.displayName = 'mpx-swiper-item';
+_SwiperItem.displayName = 'mpx-swiper-item'
 
 export default _SwiperItem

package/lib/runtime/components/react/mpx-switch.tsx

@@ -0,0 +1,148 @@
+/**
+ * ✔ checked
+ * ✔ type
+ * ✔ disabled
+ * ✔ color
+ */
+import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react'
+import { warn } from '@mpxjs/utils'
+import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+
+import CheckBox from './mpx-checkbox'
+import { FormContext, FormFieldValue } from './context'
+import { useTransformStyle, useLayout } from './utils'
+
+interface _SwitchProps extends SwitchProps {
+  style?: ViewStyle
+  name?: string
+  checked?: boolean
+  type: 'switch' | 'checkbox'
+  disabled: boolean
+  color: string
+  'enable-var'?: boolean
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+  'external-var-context'?: Record<string, any>
+  bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  catchchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+}
+
+const _Switch = forwardRef<HandlerRef<Switch, _SwitchProps>, _SwitchProps>((props, ref): JSX.Element => {
+  const {
+    style = {},
+    checked = false,
+    type = 'switch',
+    disabled = false,
+    color = '#04BE02',
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight,
+
+    bindchange,
+    catchchange
+  } = props
+
+  const [isChecked, setIsChecked] = useState<boolean>(checked)
+
+  const changeHandler = bindchange || catchchange
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  const formContext = useContext(FormContext)
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  useEffect(() => {
+    setIsChecked(checked)
+  }, [checked])
+
+  const { nodeRef } = useNodesRef<Switch, _SwitchProps>(props, ref)
+
+  const {
+    layoutRef,
+    layoutStyle,
+    layoutProps
+  } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
+
+  const onChange = (evt: NativeSyntheticEvent<TouchEvent> | boolean, { checked }: { checked?: boolean } = {}) => {
+    if (type === 'switch') {
+      setIsChecked(evt as boolean)
+      changeHandler && changeHandler(getCustomEvent('change', {}, { layoutRef, detail: { value: evt } }, props))
+    } else {
+      setIsChecked(checked as boolean)
+      changeHandler && changeHandler(getCustomEvent('change', evt, { layoutRef, detail: { value: checked } }, props))
+    }
+  }
+
+  const resetValue = () => {
+    setIsChecked(false)
+  }
+
+  const getValue = () => {
+    return isChecked
+  }
+
+  if (formValuesMap) {
+    if (!props.name) {
+      warn('If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
+  }
+
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef,
+    style: { ...normalStyle, ...layoutStyle },
+    ...layoutProps,
+    ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
+  }, [
+    'checked',
+    'disabled',
+    'type',
+    'color'
+  ], {
+    layoutRef
+  })
+
+  if (type === 'checkbox') {
+    return <CheckBox
+      {...innerProps}
+      color={color}
+      style={normalStyle}
+      checked={isChecked}
+    />
+  }
+
+  return <Switch
+    {...innerProps}
+    style={normalStyle}
+    value={isChecked}
+    trackColor={{ false: '#FFF', true: color }}
+    thumbColor={isChecked ? '#FFF' : '#f4f3f4'}
+    ios_backgroundColor="#FFF"
+  />
+})
+
+_Switch.displayName = 'mpx-switch'
+
+export default _Switch

package/lib/runtime/components/react/mpx-text.tsx

@@ -4,101 +4,77 @@
  * ✘ space
  * ✘ decode
  */
-import { Text, TextStyle, TextProps, StyleSheet } from 'react-native'
-import { useRef, useEffect, forwardRef, ReactNode, ForwardedRef, JSX } from 'react';
+import { Text, TextStyle, TextProps } from 'react-native'
+import { useRef, forwardRef, ReactNode, JSX } from 'react'
 import useInnerProps from './getInnerListeners'
-// @ts-ignore
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { PERCENT_REGEX } from './utils'
-
+import { useTransformStyle, wrapChildren } from './utils'
 
 interface _TextProps extends TextProps {
   style?: TextStyle
   children?: ReactNode
   selectable?: boolean
-  'enable-offset'?: boolean
   'user-select'?: boolean
-  userSelect?: boolean
-  ['disable-default-style']?: boolean
-}
-
-const DEFAULT_STYLE = {
-  fontSize: 16
-}
-
-const transformStyle = (styleObj: TextStyle) => {
-  let { lineHeight } = styleObj
-  if (typeof lineHeight === 'string' && PERCENT_REGEX.test(lineHeight)) {
-    lineHeight = (parseFloat(lineHeight)/100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize)
-    styleObj.lineHeight = lineHeight
-  }
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
 }
 
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
   const {
-    style = [],
-    children,
+    style = {},
     selectable,
-    'enable-offset': enableOffset,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
     'user-select': userSelect,
-    'disable-default-style': disableDefaultStyle = false,
-    } = props
-
-    const layoutRef = useRef({})
-
-    const styleObj: TextStyle = StyleSheet.flatten<TextStyle>(style)
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
 
-    let defaultStyle = {}
+  const layoutRef = useRef({})
 
-    if (!disableDefaultStyle) {
-      defaultStyle = DEFAULT_STYLE
-      transformStyle(styleObj)
-    }
-
-    const { nodeRef } = useNodesRef<Text, _TextProps>(props, ref, {
-      defaultStyle
-    })
-
-    const innerProps = useInnerProps(props, {
-      ref: nodeRef
-    }, [
-      'style',
-      'children',
-      'selectable',
-      'user-select',
-      'useInherit',
-      'enable-offset'
-    ], {
-      layoutRef
-    })
-
-    useEffect(() => {
-      let measureTimeout: ReturnType<typeof setTimeout> | null = null
-      if (enableOffset) {
-        measureTimeout = setTimeout(() => {
-          nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
-            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
-          })
-        })
-        return () => {
-          if (measureTimeout) {
-            clearTimeout(measureTimeout)
-            measureTimeout = null
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  const { nodeRef } = useNodesRef<Text, _TextProps>(props, ref)
+
+  const innerProps = useInnerProps(props, {
+    ref: nodeRef,
+    style: normalStyle,
+    selectable: !!selectable || !!userSelect
+  }, [
+    'user-select'
+  ], {
+    layoutRef
+  })
+
+  return (
+    <Text
+      {...innerProps}
+    >
+      {
+        wrapChildren(
+          props,
+          {
+            hasVarDec,
+            varContext: varContextRef.current
           }
-        }
+        )
       }
-    }, [])
-
-
-    return (
-      <Text
-        style={{...defaultStyle, ...styleObj}}
-        selectable={!!selectable || !!userSelect}
-        {...innerProps}
-      >
-        {children}
-      </Text>
-    )
+    </Text>
+  )
 })
 
 _Text.displayName = 'mpx-text'

package/lib/runtime/components/react/mpx-textarea.tsx

@@ -9,7 +9,7 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import React, { forwardRef } from 'react'
+import { JSX, forwardRef } from 'react'
 import { Keyboard, TextInput } from 'react-native'
 import Input, { InputProps, PrivateInputProps } from './mpx-input'
 import { omit } from './utils'
@@ -21,13 +21,13 @@ export type TextareProps = Omit<
 >
 
 const Textarea = forwardRef<HandlerRef<TextInput, TextareProps>, TextareProps>(
-  (props, ref): React.JSX.Element => {
+  (props, ref): JSX.Element => {
     const restProps = omit(props, [
       'ref',
       'type',
       'password',
       'multiline',
-      'confirm-hold',
+      'confirm-hold'
     ])
     return (
       <Input