feat(View): add view component style.

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -63,18 +63,24 @@ module.exports = function getSpec ({ warn, error }) {
   const numberRegExp = /^\s*(\d+(\.\d+)?)(rpx|px|%)?\s*$/
   // RN 不支持的颜色格式
   const colorRegExp = /^\s*(lab|lch|oklab|oklch|color-mix|color|hwb|lch|light-dark).*$/
+
   const verifyValues = ({ prop, value, valueType }) => {
     // 校验 value 枚举 是否支持
     switch (valueType) {
-      case ValueType.color:
-        (numberRegExp.test(value)) && warn(`React Native property [${prop}]'s valueType is ${valueType}, we does not set type number`)
-        colorRegExp.test(value) && warn('React Native color does not support type [lab,lch,oklab,oklch,color-mix,color,hwb,lch,light-dark]')
-        return value
-      case ValueType.number:
-        (!numberRegExp.test(value)) && warn(`React Native property [${prop}] unit only supports [rpx,px,%]`)
-        return value
+      case ValueType.color: {
+        const isNumber = numberRegExp.test(value)
+        const isUnsupporttedColor = colorRegExp.test(value)
+        isNumber && warn(`React Native property [${prop}]'s valueType is ${valueType}, we does not set type number`)
+        isUnsupporttedColor && warn('React Native color does not support type [lab,lch,oklab,oklch,color-mix,color,hwb,lch,light-dark]')
+        return !isNumber && !isUnsupporttedColor
+      }
+      case ValueType.number: {
+        const isNumber = numberRegExp.test(value)
+        !isNumber && warn(`React Native property [${prop}] unit only supports [rpx,px,%]`)
+        return isNumber
+      }
       default:
-        return value
+        return true
     }
   }
   // 统一校验 value type 值类型
@@ -133,7 +139,8 @@ module.exports = function getSpec ({ warn, error }) {
       const valueType = keyMap[prop]
       const dashProp = hump2dash(prop)
       // 校验 value 类型
-      const value = verifyValues({ prop, value: values[idx], valueType })
+      verifyValues({ prop, value: values[idx], valueType })
+      const value = values[idx]
       if (isIllegalValue({ prop: dashProp, value })) {
         // 过滤不支持 value
         unsupportedValueError({ prop: dashProp, value })
@@ -208,6 +215,15 @@ module.exports = function getSpec ({ warn, error }) {
     })
   }
 
+  const formatLineHeight = ({ prop, value }) => {
+    if (!verifyValues({ prop, value, valueType: ValueType.number })) return false
+
+    return {
+      prop,
+      value: /\d+(\.\d+)?$/.test(value) ? `${Math.round(value * 100)}%` : value
+    }
+  }
+
   const getFontVariant = ({ prop, value }) => {
     if (/^(font-variant-caps|font-variant-numeric|font-variant-east-asian|font-variant-alternates|font-variant-ligatures)$/.test(prop)) {
       error(`Property [${prop}] is not supported in React Native environment, please replace [font-variant]!`)
@@ -346,6 +362,11 @@ module.exports = function getSpec ({ warn, error }) {
         ios: checkCommonValue(ValueType.color),
         android: checkCommonValue(ValueType.color)
       },
+      { // color 颜色值校验
+        test: 'line-height',
+        ios: formatLineHeight,
+        android: formatLineHeight
+      },
       { // number 值校验
         test: /.*width|height|left|right|top|bottom|radius|margin|padding|spacing|offset|size.*/i,
         ios: checkCommonValue(ValueType.number),

packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx

@@ -5,40 +5,60 @@
  * ✘ decode
  */
 import { Text, TextStyle, TextProps, StyleSheet } from 'react-native'
-import React, { useRef, useEffect, forwardRef } from 'react';
+import React, { useRef, useEffect, forwardRef, ReactNode, ForwardedRef } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from '../../useNodesRef' // 引入辅助函数
+import { PERCENT_REGX } from './utils'
 
-interface _TextProps extends TextProps {
-  style?: TextStyle
-  children?: React.ReactNode
+type ExtendedTextStyle = Omit<TextStyle, 'lineHeight'>  & {
+  lineHeight?: string | number
+};
+interface _TextProps extends Omit<TextProps, 'style'> {
+  style?: ExtendedTextStyle
+  children?: ReactNode
   selectable?: boolean
   'enable-offset'?: boolean
   'user-select'?: boolean
   userSelect?: boolean
-  useInherit?: boolean
+  ['disable-default-style']?: boolean
 }
 
 const DEFAULT_STYLE = {
   fontSize: 16
 }
 
-const _Text: React.FC<_TextProps & React.RefAttributes<any>> = forwardRef((props: _TextProps, ref: React.ForwardedRef<any>):React.JSX.Element => {
+
+const transformStyle = (styleObj: ExtendedTextStyle) => {
+  let { lineHeight } = styleObj
+  if (typeof lineHeight === 'string' && PERCENT_REGX.test(lineHeight)) {
+    lineHeight = (parseFloat(lineHeight)/100) * (styleObj.fontSize || DEFAULT_STYLE.fontSize)
+    styleObj.lineHeight = lineHeight
+  }
+}
+
+const _Text = forwardRef((props: _TextProps, ref: ForwardedRef<any>): React.JSX.Element => {
   const {
     style = [],
     children,
     selectable,
     'enable-offset': enableOffset,
     'user-select': userSelect,
-    useInherit = false,
+    'disable-default-style': disableDefaultStyle = false,
     } = props
 
     const layoutRef = useRef({})
 
-    const styleObj = StyleSheet.flatten(style)
+    const styleObj = StyleSheet.flatten<ExtendedTextStyle>(style)
+
+    let defaultStyle = {}
+
+    if (!disableDefaultStyle) {
+      defaultStyle = DEFAULT_STYLE
+      transformStyle(styleObj)
+    }
 
     const { nodeRef } = useNodesRef(props, ref, {
-      defaultStyle: DEFAULT_STYLE
+      defaultStyle
     })
 
     const innerProps = useInnerProps(props, {
@@ -74,7 +94,7 @@ const _Text: React.FC<_TextProps & React.RefAttributes<any>> = forwardRef((props
 
     return (
       <Text
-        style={{...useInherit && DEFAULT_STYLE, ...styleObj}}
+        style={{...defaultStyle, ...styleObj}}
         selectable={!!selectable || !!userSelect}
         {...innerProps}
       >