feat: enhancements

src/framework/theme/index.ts

@@ -17,6 +17,10 @@ export {
   withStyles,
 } from './component';
 
-export { ModalService } from './service';
+export {
+  all,
+  allWithRest,
+  ModalService,
+} from './service';
 
 export * from './type';

src/framework/theme/service/index.ts

@@ -1,3 +1,4 @@
 export * from './theme';
 export * from './style';
 export * from './modal';
+export * from './props';

src/framework/theme/service/props/index.ts

@@ -0,0 +1,4 @@
+export {
+  all,
+  allWithRest,
+} from './props.service';

src/framework/theme/service/props/props.service.ts

@@ -0,0 +1,48 @@
+export interface Props {
+  [key: string]: any;
+}
+
+export interface RestProps {
+  rest?: Partial<Props>;
+}
+
+export type AllOfProps = Partial<Props>;
+
+export type AllWithRestProps = Partial<Props> & RestProps;
+
+/**
+ * Retrieves all props included in `from` array
+ *
+ * @param source (Props) - source object
+ * @param from (string[]) - array of keys needed to retrieve from `source`
+ *
+ * @return (Partial<Props>) - object with keys contained in `from` array
+ */
+export function all(source: Props | undefined, from: string[]): AllOfProps {
+  if (!source) {
+    return {};
+  }
+
+  return from.reduce((acc: Partial<AllOfProps>, prop: string): Partial<AllOfProps> => {
+    return { ...acc, [prop]: source[prop] };
+  }, {});
+}
+
+/**
+ * Retrieves all props included in `from` array, rest props includes in under the `rest` key
+ */
+export function allWithRest(source: Props | undefined, from: string[]): AllWithRestProps {
+  if (!source) {
+    return { rest: {} };
+  }
+
+  return Object.keys(source).reduce((acc: Partial<AllWithRestProps>, prop: string): Partial<AllWithRestProps> => {
+    const { rest, ...allOf } = acc;
+
+    if (from.includes(prop)) {
+      return { ...allOf, [prop]: source[prop], rest };
+    }
+
+    return { ...allOf, rest: { ...rest, [prop]: source[prop] } };
+  }, {});
+}

src/framework/theme/service/props/props.spec.ts

@@ -0,0 +1,70 @@
+import {
+  all,
+  AllOfProps,
+  allWithRest,
+  AllWithRestProps,
+  Props,
+} from './props.service';
+
+describe('@props: service checks', () => {
+
+  const json = (value: any): string => JSON.stringify(value);
+
+  const props: Props = {
+    backgroundColor: 'black',
+    color: 'white',
+    fontSize: 32,
+  };
+
+  const textProps: string[] = [
+    'color',
+    'fontSize',
+  ];
+
+  describe('* all', () => {
+
+    it('* non-null', () => {
+      const retrievedProps: AllOfProps = all(props, textProps);
+
+      expect(json(retrievedProps)).toEqual(json({
+        color: 'white',
+        fontSize: 32,
+      }));
+    });
+
+    it('* nullable', () => {
+      const retrievedProps: AllOfProps = all(undefined, textProps);
+
+      expect(json(retrievedProps)).toEqual(json({}));
+    });
+
+  });
+
+  describe('* allWithRest', () => {
+
+    it('* non-null', () => {
+      const retrievedProps: AllWithRestProps = allWithRest(props, textProps);
+
+      const { rest, ...allOf } = retrievedProps;
+
+      expect(json(allOf)).toEqual(json({
+        color: 'white',
+        fontSize: 32,
+      }));
+
+      expect(json(rest)).toEqual(json({
+        backgroundColor: 'black',
+      }));
+    });
+
+    it('* nullable', () => {
+      const retrievedProps: AllWithRestProps = allWithRest(undefined, textProps);
+
+      expect(json(retrievedProps)).toEqual(json({
+        rest: {},
+      }));
+    });
+
+  });
+
+});

src/framework/ui/avatar/avatar.component.tsx

@@ -31,7 +31,7 @@ export class Avatar extends React.Component<Props> {
     // @ts-ignore: rhs operator is restricted to be number
     const borderRadius: number = roundCoefficient * baseStyle.height;
 
-    return { ...baseStyle, borderRadius };
+    return { borderRadius, ...baseStyle };
   };
 
   public render(): React.ReactElement<TouchableOpacityProps> {

src/framework/ui/button/button.component.tsx

@@ -5,11 +5,14 @@ import {
   GestureResponderEvent,
   StyleSheet,
   ImageProps,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
   StyleType,
   Interaction,
+  allWithRest,
   styled,
 } from '@kitten/theme';
 import {
@@ -20,8 +23,10 @@ import {
   ButtonAlignment,
   ButtonAlignments,
 } from './type';
+import { TextStyleProps } from '../common/props';
 
 interface ButtonProps {
+  style?: StyleProp<TextStyle>;
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   status?: string;
   size?: string;
@@ -64,6 +69,9 @@ export class Button extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
+    const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style);
+    const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps);
+
     const {
       textColor,
       textFontSize,
@@ -81,13 +89,16 @@ export class Button extends React.Component<Props> {
     return {
       container: {
         ...containerParameters,
+        ...derivedContainerStyle,
+        ...styles.container,
         flexDirection: alignment.flex(),
       },
       text: {
         color: textColor,
         fontSize: textFontSize,
         fontWeight: textFontWeight,
         marginHorizontal: textMarginHorizontal,
+        ...derivedTextStyle,
       },
       icon: {
         width: iconWidth,
@@ -128,15 +139,15 @@ export class Button extends React.Component<Props> {
   };
 
   public render(): React.ReactElement<TouchableOpacityProps> {
-    const { style, themedStyle, ...derivedProps } = this.props;
+    const { themedStyle, ...derivedProps } = this.props;
     const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
     const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
 
     return (
       <TouchableOpacity
-        {...derivedProps}
-        style={[container, style, styles.container]}
         activeOpacity={1.0}
+        {...derivedProps}
+        style={container}
         onPress={this.onPress}
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>

src/framework/ui/checkbox/checkbox.component.tsx

@@ -5,20 +5,25 @@ import {
   StyleSheet,
   TouchableOpacityProps,
   GestureResponderEvent,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
   StyleType,
   Interaction,
   styled,
+  allWithRest,
 } from '@kitten/theme';
 import {
   Text as TextComponent,
   Props as TextProps,
 } from '../text/text.component';
 import { CheckMark } from '../drawable/checkmark/checkmark.component';
+import { TextStyleProps } from '../common/props';
 
 interface CheckBoxProps {
+  style?: StyleProp<TextStyle>;
   text?: string;
   checked?: boolean;
   status?: string;
@@ -55,6 +60,9 @@ export class CheckBox extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
+    const derivedStyle: TextStyle = StyleSheet.flatten(this.props.style);
+    const { rest: derivedContainerStyle, ...derivedTextStyle } = allWithRest(derivedStyle, TextStyleProps);
+
     const {
       textColor,
       textFontSize,
@@ -71,23 +79,35 @@ export class CheckBox extends React.Component<Props> {
     } = style;
 
     return {
-      selectContainer: containerParameters,
+      container: {
+        ...derivedContainerStyle,
+        ...styles.container,
+      },
+      highlightContainer: styles.highlightContainer,
+      selectContainer: {
+        ...containerParameters,
+        ...styles.selectContainer,
+      },
       text: {
         color: textColor,
         fontSize: textFontSize,
         fontWeight: textFontWeight,
         marginLeft: textMarginLeft,
+        ...derivedTextStyle,
+        ...styles.text,
       },
       select: {
         width: selectWidth,
         height: selectHeight,
         backgroundColor: selectBackgroundColor,
+        ...styles.select,
       },
       highlight: {
         width: highlightWidth,
         height: highlightHeight,
         borderRadius: highlightBorderRadius,
         backgroundColor: highlightBackgroundColor,
+        ...styles.highlight,
       },
     };
   };
@@ -96,35 +116,35 @@ export class CheckBox extends React.Component<Props> {
     const { text } = this.props;
 
     return (
-      <Text style={[style, styles.text]} key={0}>{text}</Text>
+      <Text style={style} key={0}>{text}</Text>
     );
   };
 
   private renderComponentChildren = (style: StyleType): React.ReactNode => {
     const { text } = this.props;
 
     return [
-      text ? this.renderTextElement(style.text) : undefined,
+      text ? this.renderTextElement(style) : undefined,
     ];
   };
 
   public render(): React.ReactElement<TouchableOpacityProps> {
-    const { style, themedStyle, ...derivedProps } = this.props;
-    const { selectContainer, select, highlight, ...componentStyles } = this.getComponentStyle(themedStyle);
-    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyles);
+    const { themedStyle, ...derivedProps } = this.props;
+    const componentStyle: StyleType = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.renderComponentChildren(componentStyle.text);
 
     return (
-      <View style={[style, styles.container]}>
-        <View style={styles.highlightContainer}>
-          <View style={[highlight, styles.highlight]}/>
+      <View style={componentStyle.container}>
+        <View style={componentStyle.highlightContainer}>
+          <View style={componentStyle.highlight}/>
           <TouchableOpacity
             {...derivedProps}
-            style={[selectContainer, styles.selectContainer]}
+            style={componentStyle.selectContainer}
             activeOpacity={1.0}
             onPress={this.onPress}
             onPressIn={this.onPressIn}
             onPressOut={this.onPressOut}>
-            <CheckMark style={[select, styles.select]}/>
+            <CheckMark style={componentStyle.select}/>
           </TouchableOpacity>
         </View>
         {componentChildren}

src/framework/ui/common/props.ts

@@ -0,0 +1,31 @@
+export const TextStyleProps: string[] = [
+
+  // TextStyle
+
+  'color',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'letterSpacing',
+  'lineHeight',
+  'textAlign',
+  'textAlign',
+  'textDecorationLine',
+  'textDecorationStyle',
+  'textDecorationColor',
+  'textShadowColor',
+  'textShadowColor',
+  'textShadowOffset',
+  'textShadowRadius',
+
+  // TextStyleIOS
+
+  'textTransform',
+  'writingDirection',
+
+  // TextStyleAndroid
+
+  'textAlignVertical',
+  'includeFontPadding',
+];

src/framework/ui/common/type.ts

@@ -15,8 +15,8 @@ export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 // @ts-ignore: props override
 export interface TouchableOpacityIndexedProps extends TouchableOpacityProps {
-  onPress?: (event: GestureResponderEvent, index: number) => void;
-  onPressIn?: (event: GestureResponderEvent, index: number) => void;
-  onPressOut?: (event: GestureResponderEvent, index: number) => void;
-  onLongPress?: (event: GestureResponderEvent, index: number) => void;
+  onPress?: (index: number, event: GestureResponderEvent) => void;
+  onPressIn?: (index: number, event: GestureResponderEvent) => void;
+  onPressOut?: (index: number, event: GestureResponderEvent) => void;
+  onLongPress?: (index: number, event: GestureResponderEvent) => void;
 }

src/framework/ui/index.ts

@@ -178,6 +178,7 @@ export {
   TabProps,
   TabBarProps,
   TabViewProps,
+  TextProps,
   TooltipProps,
   ToggleProps,
   TopNavigationBarProps,