feat(ui): props for inline styling add (#379)

akveo · Apr 30, 2019 · 9e57594 · 9e57594
1 parent 2c45eae
commit 9e57594
Show file tree

Hide file tree

Showing 31 changed files with 1,350 additions and 44 deletions.
diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx
@@ -4,6 +4,8 @@ import {
   View,
   ViewProps,
   StyleSheet,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -20,6 +22,7 @@ type ChildElement = React.ReactElement<TabProps>;
 interface TabNavigatorProps {
   children: ChildElement | ChildElement[];
   selectedIndex?: number;
+  indicatorStyle?: StyleProp<ViewStyle>;
   onSelect?: (index: number) => void;
 }
 
@@ -34,6 +37,7 @@ export class BottomNavigation extends React.Component<Props> {
   };
 
   private getComponentStyle = (style: StyleType): StyleType => {
+    const { indicatorStyle } = this.props;
     const { indicatorHeight, indicatorBackgroundColor, ...containerStyle } = style;
 
     return {
@@ -44,6 +48,7 @@ export class BottomNavigation extends React.Component<Props> {
       indicator: {
         height: indicatorHeight,
         backgroundColor: indicatorBackgroundColor,
+        ...StyleSheet.flatten(indicatorStyle),
         ...styles.indicator,
       },
     };

diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx
@@ -100,6 +100,19 @@ describe('@bottom-navigation-tab: component checks', () => {
     expect(output).toMatchSnapshot();
   });
 
+  it('* text (styled)', () => {
+    const component: RenderAPI = render(
+      <Mock
+        title='Test'
+        titleStyle={{ fontSize: 22, color: 'yellow' }}
+      />,
+    );
+
+    const { output } = shallow(component.getByType(BottomNavigatorTabComponent));
+
+    expect(output).toMatchSnapshot();
+  });
+
 });
 
 describe('@bottom-navigation: component checks', () => {
@@ -133,8 +146,9 @@ describe('@bottom-navigation: component checks', () => {
   });
 
   it('* with routes', () => {
+    const indicatorStyle: StyleType = { backgroundColor: 'red' };
     const component: RenderAPI = render(
-      <Mock>
+      <Mock indicatorStyle={indicatorStyle}>
         <ChildMock
           title='Screen 1'
           selected={false}

diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap b/src/framework/ui/bottomNavigation/bottomNavigation.spec.tsx.snap
@@ -316,6 +316,11 @@ exports[`@bottom-navigation: component checks * with routes 1`] = `
 <View
   appearance="default"
   dispatch={[Function]}
+  indicatorStyle={
+    Object {
+      "backgroundColor": "red",
+    }
+  }
   selectedIndex={0}
   style={
     Array [
@@ -448,7 +453,7 @@ exports[`@bottom-navigation: component checks * with routes 1`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#3366FF",
+          "backgroundColor": "red",
           "height": 4,
           "position": "absolute",
         },
@@ -611,6 +616,147 @@ exports[`@bottom-navigation-tab: component checks * empty 1`] = `
 />
 `;
 
+exports[`@bottom-navigation-tab: component checks * text (styled) 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  onPress={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-pitch-dark": "#0D1C2E",
+      "blue-primary": "#3366FF",
+      "color-basic-100": "#F7F8FA",
+      "color-basic-200": "#EDF0F5",
+      "color-basic-300": "#DDE1EB",
+      "color-basic-400": "#C8CEDB",
+      "color-basic-500": "#A6AEBD",
+      "color-basic-600": "#8992A3",
+      "color-basic-700": "#6A7385",
+      "color-basic-800": "#4B5466",
+      "color-basic-900": "#2C3547",
+      "color-black": "#0D1C2E",
+      "color-danger-100": "#FFF2F2",
+      "color-danger-200": "#FFD6D9",
+      "color-danger-300": "#FFA8B4",
+      "color-danger-400": "#FF708D",
+      "color-danger-500": "#FF3D71",
+      "color-danger-600": "#DB2C66",
+      "color-danger-700": "#B81D5B",
+      "color-danger-800": "#94124E",
+      "color-danger-900": "#700940",
+      "color-info-100": "#F2F8FF",
+      "color-info-200": "#C7E2FF",
+      "color-info-300": "#94CBFF",
+      "color-info-400": "#42AAFF",
+      "color-info-500": "#0095FF",
+      "color-info-600": "#006FD6",
+      "color-info-700": "#0057C2",
+      "color-info-800": "#0041A8",
+      "color-info-900": "#002885",
+      "color-primary-100": "#F2F6FF",
+      "color-primary-200": "#D9E4FF",
+      "color-primary-300": "#A6C1FF",
+      "color-primary-400": "#598BFF",
+      "color-primary-500": "#3366FF",
+      "color-primary-600": "#284DE0",
+      "color-primary-700": "#2541CC",
+      "color-primary-800": "#192F9E",
+      "color-primary-900": "#14236E",
+      "color-secondary-100": "#F7F2FF",
+      "color-secondary-200": "#E0D1FF",
+      "color-secondary-300": "#C5A8FF",
+      "color-secondary-400": "#A375FF",
+      "color-secondary-500": "#884DFF",
+      "color-secondary-600": "#6A39DB",
+      "color-secondary-700": "#4F28B8",
+      "color-secondary-800": "#371B94",
+      "color-secondary-900": "#26117A",
+      "color-success-100": "#EDFFF3",
+      "color-success-200": "#B3FFD6",
+      "color-success-300": "#8CFAC7",
+      "color-success-400": "#51F0B0",
+      "color-success-500": "#00E096",
+      "color-success-600": "#00B383",
+      "color-success-700": "#008F72",
+      "color-success-800": "#007566",
+      "color-success-900": "#00524C",
+      "color-tertiary-100": "#FFDED6",
+      "color-tertiary-200": "#FFDED6",
+      "color-tertiary-300": "#FFDED6",
+      "color-tertiary-400": "#FFDED6",
+      "color-tertiary-500": "#FFDED6",
+      "color-tertiary-600": "#FFDED6",
+      "color-tertiary-700": "#FFDED6",
+      "color-tertiary-800": "#FFDED6",
+      "color-tertiary-900": "#FFDED6",
+      "color-warning-100": "#FFFDF2",
+      "color-warning-200": "#FFF1C2",
+      "color-warning-300": "#FFE59E",
+      "color-warning-400": "#FFC94D",
+      "color-warning-500": "#FFAA00",
+      "color-warning-600": "#DB8B00",
+      "color-warning-700": "#B86E00",
+      "color-warning-800": "#945400",
+      "color-warning-900": "#703C00",
+      "color-white": "#FFFFFF",
+      "font-light-color": "#FFFFFF",
+      "font-primary-color": "#0D1C2E",
+      "font-primary-disabled-color": "#C8CEDB",
+      "font-primary-family": "",
+      "font-primary-regular-text-line-height": 16,
+      "font-primary-regular-text-size": 14,
+      "font-primary-regular-text-weight": "600",
+      "gray-100": "#f7f8fa",
+      "gray-200": "#edf0f5",
+      "gray-300": "#c8cedb",
+      "gray-400": "#a6aebd",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "opacity-transparent": "transparent",
+      "outline-color": "#DDE1EB",
+      "outline-disabled-color": "transparent",
+      "outline-disabled-width": 0,
+      "outline-width": 11,
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+  title="Test"
+  titleStyle={
+    Object {
+      "color": "yellow",
+      "fontSize": 22,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "yellow",
+        "fontSize": 22,
+        "fontWeight": "600",
+        "lineHeight": 16,
+        "marginVertical": 4,
+      }
+    }
+  >
+    Test
+  </Text>
+</TouchableOpacity>
+`;
+
 exports[`@bottom-navigation-tab: component checks * text/selected 1`] = `
 <TouchableOpacity
   activeOpacity={1}

diff --git a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx
@@ -6,6 +6,8 @@ import {
   ImageProps,
   TextProps,
   TouchableOpacityProps,
+  StyleProp,
+  TextStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -14,6 +16,7 @@ import {
 
 interface BottomNavigatorTabProps {
   title?: string;
+  titleStyle?: StyleProp<TextStyle>;
   icon?: (style: StyleType) => React.ReactElement<ImageProps>;
   selected?: boolean;
   onSelect?: (selected: boolean) => void;
@@ -32,6 +35,7 @@ export class BottomNavigationTab extends React.Component<Props> {
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
+    const { style, titleStyle } = this.props;
     const {
       iconWidth,
       iconHeight,
@@ -48,6 +52,7 @@ export class BottomNavigationTab extends React.Component<Props> {
     return {
       container: {
         ...containerStyle,
+        ...StyleSheet.flatten(style),
         ...styles.container,
       },
       icon: {
@@ -63,6 +68,7 @@ export class BottomNavigationTab extends React.Component<Props> {
         lineHeight: textLineHeight,
         fontWeight: textFontWeight,
         color: textColor,
+        ...StyleSheet.flatten(titleStyle),
         ...styles.text,
       },
     };

diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -14,17 +14,15 @@ import {
   styled,
   StyledComponentProps,
   StyleType,
-  allWithRest,
 } from '@kitten/theme';
 import {
   Props as TextProps,
   Text as TextComponent,
 } from '../text/text.component';
 import { CheckMark } from '../drawable';
-import { TextStyleProps } from '../common/props';
 
 interface CheckBoxProps {
-  style?: StyleProp<TextStyle>;
+  textStyle?: StyleProp<TextStyle>;
   text?: string;
   checked?: boolean;
   indeterminate?: boolean;
@@ -66,8 +64,7 @@ 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 { style: containerStyle, textStyle } = this.props;
 
     const {
       textMarginHorizontal,
@@ -88,7 +85,7 @@ export class CheckBox extends React.Component<Props> {
 
     return {
       container: {
-        ...derivedContainerStyle,
+        ...StyleSheet.flatten(containerStyle),
         ...styles.container,
       },
       highlightContainer: styles.highlightContainer,
@@ -103,7 +100,7 @@ export class CheckBox extends React.Component<Props> {
         fontWeight: textFontWeight,
         lineHeight: textLineHeight,
         ...styles.text,
-        ...derivedTextStyle,
+        ...StyleSheet.flatten(textStyle),
       },
       icon: {
         width: iconWidth,

diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx b/src/framework/ui/checkbox/checkbox.spec.tsx
@@ -84,6 +84,7 @@ describe('@checkbox matches snapshots', () => {
     const component: RenderAPI = renderComponent({
       checked: true,
       text: text,
+      textStyle: { fontSize: 18, color: 'red' },
     });
     const { output } = shallow(component.getByType(CheckBoxComponent));
     expect(component.getByType(TextComponent).props.children).toBe(text);

diff --git a/src/framework/ui/checkbox/checkbox.spec.tsx.snap b/src/framework/ui/checkbox/checkbox.spec.tsx.snap
@@ -765,6 +765,12 @@ exports[`@checkbox matches snapshots * with text 1`] = `
           "width": 24,
         }
       }
+      textStyle={
+        Object {
+          "color": "red",
+          "fontSize": 18,
+        }
+      }
       theme={
         Object {
           "blue-dark": "#2541CC",
@@ -889,8 +895,8 @@ exports[`@checkbox matches snapshots * with text 1`] = `
   <ForwardRef(WrappingElement)
     style={
       Object {
-        "color": "#0D1C2E",
-        "fontSize": 13,
+        "color": "red",
+        "fontSize": 18,
         "fontWeight": "600",
         "lineHeight": 24,
         "marginHorizontal": 12,