diff --git a/src/framework/ui/common/props.ts b/src/framework/ui/common/props.ts index ed3530e1d..425f2afae 100644 --- a/src/framework/ui/common/props.ts +++ b/src/framework/ui/common/props.ts @@ -29,3 +29,62 @@ export const TextStyleProps: string[] = [ 'textAlignVertical', 'includeFontPadding', ]; + +export const FlexStyleProps: string[] = [ + 'alignContent', + 'alignItems', + 'alignSelf', + 'aspectRatio', + 'borderBottomWidth', + 'borderEndWidth', + 'borderLeftWidth', + 'borderRightWidth', + 'borderStartWidth', + 'borderTopWidth', + 'borderWidth', + 'bottom', + 'display', + 'end', + 'flex', + 'flexBasis', + 'flexDirection', + 'flexGrow', + 'flexShrink', + 'flexWrap', + 'height', + 'justifyContent', + 'left', + 'margin', + 'marginBottom', + 'marginEnd', + 'marginHorizontal', + 'marginLeft', + 'marginRight', + 'marginStart', + 'marginTop', + 'marginVertical', + 'maxHeight', + 'maxWidth', + 'minHeight', + 'minWidth', + 'overflow', + 'padding', + 'paddingBottom', + 'paddingEnd', + 'paddingHorizontal', + 'paddingLeft', + 'paddingRight', + 'paddingStart', + 'paddingTop', + 'paddingVertical', + 'position', + 'right', + 'start', + 'top', + 'width', + 'zIndex', + + // ios + + 'direction', +]; diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx index bd2377475..5ca449195 100644 --- a/src/framework/ui/input/input.component.tsx +++ b/src/framework/ui/input/input.component.tsx @@ -6,7 +6,6 @@ import { TextInputProps, TextStyle, View, - ViewProps, } from 'react-native'; import { allWithRest, @@ -23,26 +22,24 @@ import { Text as TextComponent, Props as TextProps, } from '../text/text.component'; -import { TextStyleProps } from '@kitten/ui/common/props'; +import { + TextStyleProps, + FlexStyleProps, +} from '../common/props'; const Text = styled(TextComponent); type IconElement = React.ReactElement; -type LabelElement = React.ReactElement; - -interface CaptionStyles { - container: StyleType; - text: StyleType; - icon: StyleType; -} +type TextElement = React.ReactElement; +type IconProp = (style: StyleType) => React.ReactElement; interface InputProps { status?: string; disabled?: boolean; label?: string; caption?: string; - captionIcon?: (style: StyleType) => React.ReactElement; - icon?: (style: StyleType) => React.ReactElement; + captionIcon?: IconProp; + icon?: IconProp; } export type Props = InputProps & StyledComponentProps & TextInputProps; @@ -67,7 +64,8 @@ export class Input extends React.Component { private getComponentStyle = (style: StyleType): StyleType => { const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style); - const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps); + const { rest: containerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps); + const { rest: inputContainerStyle, ...derivedContainerStyle } = allWithRest(containerStyle, FlexStyleProps); const { textMarginHorizontal, @@ -97,12 +95,17 @@ export class Input extends React.Component { return { container: { - ...derivedContainerStyle, ...styles.container, + ...derivedContainerStyle, }, inputContainer: { ...containerParameters, ...styles.inputContainer, + ...inputContainerStyle, + }, + captionContainer: { + marginTop: captionMarginTop, + ...styles.captionContainer, }, text: { marginHorizontal: textMarginHorizontal, @@ -127,80 +130,59 @@ export class Input extends React.Component { fontWeight: labelFontWeight, ...styles.label, }, - caption: { - text: { - color: captionTextColor, - fontSize: captionTextFontSize, - fontWeight: captionTextFontWeight, - lineHeight: captionTextLineHeight, - }, - icon: { - width: captionIconWidth, - height: captionIconHeight, - tintColor: captionIconTintColor, - marginRight: captionIconMarginRight, - }, - container: { - marginTop: captionMarginTop, - ...styles.captionContainer, - }, + captionIcon: { + width: captionIconWidth, + height: captionIconHeight, + tintColor: captionIconTintColor, + marginRight: captionIconMarginRight, + ...styles.captionIcon, + }, + captionLabel: { + fontSize: captionTextFontSize, + fontWeight: captionTextFontWeight, + lineHeight: captionTextLineHeight, + color: captionTextColor, + ...styles.captionLabel, }, }; }; - private renderIconElement = (style: StyleType, - icon: (style: StyleType) => IconElement): IconElement | null => { - - return icon ? icon(style) : null; + private renderIconElement = (style: StyleType, icon: IconProp): IconElement => { + return icon(style); }; - private renderTextElement = (style: StyleType, text: string): LabelElement => { + private renderTextElement = (style: StyleType, text: string): TextElement => { return ( {text} ); }; - private renderText = (style: StyleType, text: string): LabelElement | null => { - const hasText: boolean = text && text.length !== 0; - - return hasText ? this.renderTextElement(style, text) : null; - }; + public render(): React.ReactElement { + const { themedStyle, disabled, label, icon, caption, captionIcon, ...restProps } = this.props; + const style: StyleType = this.getComponentStyle(themedStyle); - private renderCaptionElement = (style: CaptionStyles): React.ReactElement | null => { - const { caption, captionIcon } = this.props; - const icon: IconElement | null = this.renderIconElement(style.icon, captionIcon); - const text: LabelElement | null = this.renderText(style.text, caption); + const iconElement: IconElement = icon ? this.renderIconElement(style.icon, icon) : null; + const labelElement: TextElement = label ? this.renderTextElement(style.label, label) : null; + const captionIconElement: IconElement = captionIcon ? this.renderIconElement(style.captionIcon, captionIcon) : null; + const captionLabelElement: TextElement = caption ? this.renderTextElement(style.captionLabel, caption) : null; return ( - {icon} - {text} - - ); - }; - - public render(): React.ReactElement { - const { themedStyle, disabled, label, icon, ...restProps } = this.props; - const componentStyle: StyleType = this.getComponentStyle(themedStyle); - const inputIcon: IconElement | null = this.renderIconElement(componentStyle.icon, icon); - const inputLabel: LabelElement | null = this.renderText(componentStyle.label, label); - const caption: React.ReactElement | null = - this.renderCaptionElement(componentStyle.caption); - - return ( - - {inputLabel} - + {labelElement} + - {inputIcon} + {iconElement} + + + {captionIconElement} + {captionLabelElement} - {caption} ); } @@ -214,13 +196,15 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', }, + captionContainer: { + flexDirection: 'row', + alignItems: 'center', + }, text: { flex: 1, }, icon: {}, label: {}, - captionContainer: { - flexDirection: 'row', - alignItems: 'center', - }, + captionIcon: {}, + captionLabel: {}, }); diff --git a/src/framework/ui/input/input.spec.tsx.snap b/src/framework/ui/input/input.spec.tsx.snap index cba8be206..701214c9f 100644 --- a/src/framework/ui/input/input.spec.tsx.snap +++ b/src/framework/ui/input/input.spec.tsx.snap @@ -212,8 +212,6 @@ exports[`@input: matches snapshot * appearance * label + caption 1`] = `