@mpxjs/webpack-plugin 2.9.59 → 2.9.62

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

@@ -0,0 +1,127 @@
+/**
+ * ✔ checked
+ * ✔ type
+ * ✔ disabled
+ * ✔ color
+ */
+import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native'
+import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react';
+import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+
+import CheckBox from './mpx-checkbox'
+import { FormContext, FormFieldValue } from './context'
+
+import { throwReactWarning } from './utils'
+
+interface _SwitchProps extends SwitchProps {
+  style?: ViewStyle
+  name?: string
+  checked?: boolean
+  type: 'switch' | 'checkbox'
+  disabled: boolean
+  color: string
+  'enable-offset'?: boolean
+  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-offset': enableOffset,
+    bindchange,
+    catchchange,
+  } = props
+
+  const [isChecked, setIsChecked] = useState<boolean>(checked)
+
+  const layoutRef = useRef({})
+
+  const changeHandler = bindchange || catchchange
+
+  let formValuesMap: Map<string, FormFieldValue> | undefined
+
+  const formContext = useContext(FormContext)
+
+  if (formContext) {
+    formValuesMap = formContext.formValuesMap
+  }
+
+  useEffect(() => {
+    setIsChecked(checked)
+  }, [checked])
+
+  const { nodeRef } = useNodesRef<Switch, _SwitchProps>(props, ref)
+
+  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) {
+      throwReactWarning('[Mpx runtime warn]: If a form component is used, the name attribute is required.')
+    } else {
+      formValuesMap.set(props.name, { getValue, resetValue })
+    }
+  }
+
+  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 innerProps = useInnerProps(props, {
+    ref: nodeRef,
+    ...enableOffset ? { onLayout } : {},
+    ...!disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}
+  }, [
+    'style',
+    'checked',
+    'disabled',
+    'type',
+    'color'
+  ], {
+    layoutRef
+  })
+
+  if (type === 'checkbox') {
+    return <CheckBox
+      {...innerProps}
+      color={color}
+      style={style}
+      checked={isChecked}
+    />
+  }
+
+  return (<Switch
+    {...innerProps}
+    style={style}
+    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,13 +4,11 @@
  * ✘ 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, useEffect, forwardRef, ReactNode, JSX } from 'react'
 import useInnerProps from './getInnerListeners'
-// @ts-ignore
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { PERCENT_REGEX } from './utils'
-
+import { transformTextStyle, DEFAULT_STYLE } from './utils'
 
 interface _TextProps extends TextProps {
   style?: TextStyle
@@ -22,83 +20,69 @@ interface _TextProps extends TextProps {
   ['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
-  }
-}
-
 const _Text = forwardRef<HandlerRef<Text, _TextProps>, _TextProps>((props, ref): JSX.Element => {
   const {
-    style = [],
+    style = {},
     children,
     selectable,
     'enable-offset': enableOffset,
     'user-select': userSelect,
     'disable-default-style': disableDefaultStyle = false,
-    } = props
-
-    const layoutRef = useRef({})
+  } = props
 
-    const styleObj: TextStyle = StyleSheet.flatten<TextStyle>(style)
+  const layoutRef = useRef({})
 
-    let defaultStyle = {}
+  let defaultStyle = {}
 
-    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
-    })
+  if (!disableDefaultStyle) {
+    defaultStyle = DEFAULT_STYLE
+    transformTextStyle(style)
+  }
 
-    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 }
-          })
+  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
-          }
+      })
+      return () => {
+        if (measureTimeout) {
+          clearTimeout(measureTimeout)
+          measureTimeout = null
         }
       }
-    }, [])
-
-
-    return (
-      <Text
-        style={{...defaultStyle, ...styleObj}}
-        selectable={!!selectable || !!userSelect}
-        {...innerProps}
-      >
-        {children}
-      </Text>
-    )
+    }
+  }, [])
+
+
+  return (
+    <Text
+      style={{ ...defaultStyle, ...style }}
+      selectable={!!selectable || !!userSelect}
+      {...innerProps}
+    >
+      {children}
+    </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,7 +21,7 @@ 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',