diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 4d938231d..57189f717 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -323,6 +323,7 @@ const InternalInput: React.ForwardRefRenderFunction = ( ) } }, [feedbackIcon, hasFeedback, statusClassName, styles.suffix, suffix]) + return ( {prefixDom} diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index 63fb449fb..bbc3ca62e 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -13,6 +13,10 @@ export interface InputStyle { export default (theme: Theme) => StyleSheet.create({ 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', diff --git a/components/list/ListItem.tsx b/components/list/ListItem.tsx index aac9986ec..df8b764af 100644 --- a/components/list/ListItem.tsx +++ b/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( - - {el} - , - ) - } - }) - return {tempContentDom} + if (typeof children === 'string') { + return ( + + {children} + + ) } if (React.isValidElement(children)) { - return {children} + if (typeof children.props.children === 'function') { + return {children} + } + return ( + + ) } - if (typeof children === 'string') { + if (Array.isArray(children)) { return ( - - - {children} - + + {React.Children.map(children, (child) => + typeof child === 'string' ? ( + + {child} + + ) : ( + child + ), + )} ) } - }, [children, itemStyles.Content, itemStyles.column, numberOfLines]) + }, [children, itemStyles.Content, numberOfLines]) // ==================== extra ======================== const extraDom = useMemo(() => { + if (typeof extra === 'string') { + return ( + + {extra} + + ) + } 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 ( - - {el} - - ) - } - return el - }), - }) + if (typeof extra.props.children === 'function') { + return {extra} } - return extra + return ( + + ) } - if (typeof extra === 'string') { + if (Array.isArray(extra)) { return ( - - - {extra} - + + {React.Children.map(extra, (child) => + typeof child === 'string' ? ( + + {child} + + ) : ( + child + ), + )} ) } - }, [extra, itemStyles.Extra, itemStyles.column, numberOfLines]) + }, [extra, itemStyles.Extra, numberOfLines]) // ==================== arrow ======================== const arrowDom = useMemo(() => { diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index 20302655f..bfe8f900d 100644 --- a/components/list/index.en-US.md +++ b/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 diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index b4d66dee2..f28088f57 100644 --- a/components/list/index.zh-CN.md +++ b/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 语义化样式 diff --git a/components/list/style/index.tsx b/components/list/style/index.tsx index c9d57d9af..4e5db147f 100644 --- a/components/list/style/index.tsx +++ b/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', - }, }) diff --git a/components/style/themes/default.tsx b/components/style/themes/default.tsx index 1e1a0fd45..4239d0434 100644 --- a/components/style/themes/default.tsx +++ b/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,