[5.2.1]refactor: List style

components/input/Input.tsx

@@ -323,6 +323,7 @@ const InternalInput: React.ForwardRefRenderFunction<TextInput, InputProps> = (
       )
     }
   }, [feedbackIcon, hasFeedback, statusClassName, styles.suffix, suffix])
+
   return (
     <View style={[styles.container, style]}>
       {prefixDom}

components/input/style/index.tsx

@@ -13,6 +13,10 @@ export interface InputStyle {
 export default (theme: Theme) =>
   StyleSheet.create<InputStyle>({
     container: {
+      width: '100%',
+      maxWidth: '100%',
+      maxHeight: '100%',
+      minHeight: 24,
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
@@ -21,6 +25,10 @@ export default (theme: Theme) =>
     input: {
       flex: 1,
       overflow: 'hidden',
+      width: '100%',
+      maxWidth: '100%',
+      maxHeight: '100%',
+      minHeight: 24,
       fontSize: theme.font_size_heading,
       paddingVertical: theme.prefix_padding,
       textAlignVertical: 'center',

components/list/ListItem.tsx

@@ -12,6 +12,7 @@ import {
 import Icon from '../icon'
 import DisabledContext from '../provider/DisabledContext'
 import { useTheme } from '../style'
+import AntmView from '../view'
 import { ListItemPropsType } from './PropsType'
 import ListStyles, { ListItemStyle } from './style/index'
 
@@ -97,72 +98,79 @@ const InternalListItem: React.ForwardRefRenderFunction<
 
   // ================  children  ================
   const contentDom = useMemo(() => {
-    if (Array.isArray(children)) {
-      const tempContentDom: any[] = []
-      children.forEach((el, index) => {
-        if (React.isValidElement(el)) {
-          tempContentDom.push(el)
-        } else {
-          tempContentDom.push(
-            <Text
-              style={[itemStyles.Content]}
-              {...numberOfLines}
-              key={`${index}-children`}>
-              {el}
-            </Text>,
-          )
-        }
-      })
-      return <View style={itemStyles.column}>{tempContentDom}</View>
+    if (typeof children === 'string') {
+      return (
+        <Text style={itemStyles.Content} {...numberOfLines}>
+          {children}
+        </Text>
+      )
     }
     if (React.isValidElement(children)) {
-      return <View style={itemStyles.column}>{children}</View>
+      if (typeof children.props.children === 'function') {
+        return <AntmView style={[itemStyles.Content]}>{children}</AntmView>
+      }
+      return (
+        <AntmView
+          children={children}
+          {...children.props}
+          style={[itemStyles.Content, children.props.style]}
+        />
+      )
     }
-    if (typeof children === 'string') {
+    if (Array.isArray(children)) {
       return (
-        <View style={itemStyles.column}>
-          <Text style={itemStyles.Content} {...numberOfLines}>
-            {children}
-          </Text>
+        <View style={itemStyles.Content}>
+          {React.Children.map(children, (child) =>
+            typeof child === 'string' ? (
+              <Text style={itemStyles.Content} {...numberOfLines}>
+                {child}
+              </Text>
+            ) : (
+              child
+            ),
+          )}
         </View>
       )
     }
-  }, [children, itemStyles.Content, itemStyles.column, numberOfLines])
+  }, [children, itemStyles.Content, numberOfLines])
 
   // ====================  extra  ========================
   const extraDom = useMemo(() => {
+    if (typeof extra === 'string') {
+      return (
+        <Text style={itemStyles.Extra} {...numberOfLines}>
+          {extra}
+        </Text>
+      )
+    }
     if (React.isValidElement(extra)) {
-      const extraChildren = extra.props.children
-      if (Array.isArray(extraChildren)) {
-        return React.cloneElement(extra, {
-          // @ts-ignore
-          children: extraChildren.map((el, index) => {
-            if (typeof el === 'string') {
-              return (
-                <Text
-                  {...numberOfLines}
-                  style={[itemStyles.Extra]}
-                  key={`${index}-children`}>
-                  {el}
-                </Text>
-              )
-            }
-            return el
-          }),
-        })
+      if (typeof extra.props.children === 'function') {
+        return <AntmView style={[itemStyles.Extra]}>{extra}</AntmView>
       }
-      return extra
+      return (
+        <AntmView
+          children={extra}
+          {...extra.props}
+          style={[itemStyles.Extra, extra.props.style]}
+        />
+      )
     }
-    if (typeof extra === 'string') {
+    if (Array.isArray(extra)) {
       return (
-        <View style={[itemStyles.column]}>
-          <Text style={itemStyles.Extra} {...numberOfLines}>
-            {extra}
-          </Text>
+        <View style={itemStyles.Extra}>
+          {React.Children.map(extra, (child) =>
+            typeof child === 'string' ? (
+              <Text style={itemStyles.Extra} {...numberOfLines}>
+                {child}
+              </Text>
+            ) : (
+              child
+            ),
+          )}
         </View>
       )
     }
-  }, [extra, itemStyles.Extra, itemStyles.column, numberOfLines])
+  }, [extra, itemStyles.Extra, numberOfLines])
 
   // ====================  arrow  ========================
   const arrowDom = useMemo(() => {

components/list/index.en-US.md

@@ -64,17 +64,18 @@ interface ListStyle {
 
 ```typescript
 interface ListItemStyle {
-  underlayColor: ViewStyle
-  Item: ViewStyle
-  Line: ViewStyle
+  underlayColor: ViewStyle // ListItem is a TouchableHighlight
+  Item: ViewStyle // ListItem wrap
+  Line: ViewStyle // borderBottom
+
   Thumb: ImageStyle
   Content: TextStyle
   Extra: TextStyle
-  Arrow: TextStyle
-  ArrowV: TextStyle
+
+  Arrow: TextStyle  // horizontal arrow
+  ArrowV: TextStyle // up/down arrow
   multipleLine: ViewStyle
   multipleThumb: ImageStyle
-  column: ViewStyle
 }
 ```
 ### BriefStyle interface

components/list/index.zh-CN.md

@@ -62,17 +62,18 @@ interface ListStyle {
 
 ```typescript
 interface ListItemStyle {
-  underlayColor: ViewStyle
-  Item: ViewStyle
-  Line: ViewStyle
+  underlayColor: ViewStyle // ListItem其实是一个TouchableHighlight
+  Item: ViewStyle // ListItem wrap
+  Line: ViewStyle // borderBottom
+
   Thumb: ImageStyle
   Content: TextStyle
   Extra: TextStyle
-  Arrow: TextStyle
-  ArrowV: TextStyle
+
+  Arrow: TextStyle  // horizontal arrow
+  ArrowV: TextStyle // up/down arrow
   multipleLine: ViewStyle
   multipleThumb: ImageStyle
-  column: ViewStyle
 }
 ```
 ### BriefStyle 语义化样式

components/list/style/index.tsx

@@ -18,7 +18,6 @@ export interface ListItemStyle {
   ArrowV: TextStyle
   multipleLine: ViewStyle
   multipleThumb: ImageStyle
-  column: ViewStyle
 }
 
 export interface BriefStyle {
@@ -47,19 +46,18 @@ export default (variables: Theme) =>
       backgroundColor: variables.fill_body,
     },
     Body: {
+      position: 'relative',
       backgroundColor: variables.fill_base,
       borderTopWidth: StyleSheet.hairlineWidth,
-      borderTopColor: variables.border_color_base,
+      borderTopColor: variables.border_color_thin,
     },
     BodyBottomLine: {
       position: 'absolute',
       bottom: 0,
       left: 0,
       right: 0,
-      height: 1,
-      backgroundColor: variables.fill_base,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      borderBottomColor: variables.border_color_base,
+      height: StyleSheet.hairlineWidth,
+      backgroundColor: variables.border_color_thin,
     },
     Item: {
       flexGrow: 1,
@@ -87,12 +85,15 @@ export default (variables: Theme) =>
       color: variables.color_text_base,
       fontSize: variables.font_size_heading,
       textAlignVertical: 'center',
+      flex: 1,
     },
     Extra: {
       color: variables.color_text_caption,
       fontSize: variables.font_size_heading,
       textAlign: 'right',
       textAlignVertical: 'center',
+      paddingLeft: variables.h_spacing_md,
+      maxWidth: variables.list_extra_max_width,
     },
     Brief: {
       minHeight: variables.font_size_icontext,
@@ -117,8 +118,4 @@ export default (variables: Theme) =>
       width: variables.icon_size_lg,
       height: variables.icon_size_lg,
     },
-    column: {
-      flex: 1,
-      flexDirection: 'column',
-    },
   })

components/style/themes/default.tsx

@@ -116,6 +116,7 @@ export default {
   // list
   list_item_height_sm: 35,
   list_item_height: 44,
+  list_extra_max_width: '70%',
 
   // tabs
   // tabs_fill: brandPrimary,