feat(fscomponents): refactor ProductItem component to be option based

BREAKING CHANGE: Individual ProductItemVertical, etc... components no longer exist BREAKING CHANGE: Button props have been updated to match theme Add theme to fscomponents
brandingbrand · Jul 18, 2018 · 9eb16ef · 9eb16ef
1 parent 74aadba
commit 9eb16ef
Show file tree

Hide file tree

Showing 49 changed files with 720 additions and 1,465 deletions.
diff --git a/packages/fscomponents/src/components/Button.tsx b/packages/fscomponents/src/components/Button.tsx
@@ -13,29 +13,16 @@ import {
 } from 'react-native';
 
 import { darken } from '../lib/color';
+import { border, palette } from '../styles/variables';
 import {
   style as S,
   stylesSize,
-  stylesTextColor,
   stylesTextSize
 } from '../styles/Button';
 import { Loading } from './Loading';
 
 const DEFAULT_TINT_PERC = 15;
 
-export interface StylesColor {
-  primary: string;
-  secondary: string;
-  success: string;
-  info: string;
-  warning: string;
-  alert: string;
-  dark: string;
-  light: string;
-  disabled: string;
-  link: string;
-}
-
 export interface ButtonProps extends Pick<TouchableHighlightProperties, 'hitSlop'> {
   title: string;
   accessibilityLabel?: string;
@@ -44,55 +31,35 @@ export interface ButtonProps extends Pick<TouchableHighlightProperties, 'hitSlop
   onLongPress?: () => void;
   titleStyle?: StyleProp<TextStyle>;
   underlayColor?: string;
-  variables?: {
-    color: any;
-  };
   icon?: ImageURISource;
   iconStyle?: StyleProp<ImageStyle>;
   viewStyle?: StyleProp<ViewStyle>;
 
-  // color
-  primary?: boolean;
-  secondary?: boolean;
-  success?: boolean;
-  warning?: boolean;
-  alert?: boolean;
-  dark?: boolean;
+  // style
+  palette?: typeof palette;
+  color?: keyof typeof palette;
+  size?: keyof typeof stylesSize;
+
+  // types
   light?: boolean;
   link?: boolean;
 
   // state
   disabled?: boolean;
   loading?: boolean;
 
-  // size
-  large?: boolean;
-  small?: boolean;
+  // expand horizontally
   full?: boolean;
 }
 
-export class Button extends PureComponent<ButtonProps> {
-  stylesColor: StylesColor;
-
-  constructor(props: ButtonProps) {
-    super(props);
-
-    const { variables = { color: {} } } = props;
+export interface ButtonState {
+  palette: any;
+}
 
-    // TODO: stylesColor should be state and this should run inside getDerivedStateFromProps
-    this.stylesColor = {
-      alert: variables.color.alert || '#f9373e',
-      dark: variables.color.dark || '#555555',
-      disabled: variables.color.disabled || '#eeeeee',
-      info: variables.color.info || '#3adb76',
-      light: variables.color.light || '#eeeeee',
-      link: 'transparent',
-      primary: variables.color.primary || '#4078c0',
-      secondary: variables.color.secondary || '#707070',
-      success: variables.color.success || '#3adb76',
-      warning: variables.color.warning || '#ffae00'
-    };
-  }
+export class Button extends PureComponent<ButtonProps, ButtonState> {
+  state: ButtonState = {
+    palette: this.props.palette || palette
+  };
 
   render(): any {
     const {
@@ -103,24 +70,31 @@ export class Button extends PureComponent<ButtonProps> {
       underlayColor,
       full,
       accessibilityLabel,
-      hitSlop
+      hitSlop,
+      size = 'medium',
+      color = 'primary',
+      light,
+      link
     } = this.props;
 
-    const color = this.getColor(this.props);
-    const size = this.getSize(this.props);
+    const { palette } = this.state;
 
     return (
       <TouchableHighlight
         accessibilityLabel={accessibilityLabel || title}
         onPress={onPress}
         onLongPress={onLongPress}
         underlayColor={
-          underlayColor || darken(this.stylesColor[color], DEFAULT_TINT_PERC)
+          underlayColor || darken(palette[color], DEFAULT_TINT_PERC)
         }
         hitSlop={hitSlop}
         style={[
           S.container,
-          { backgroundColor: this.stylesColor[color] },
+          {
+            backgroundColor: light || link ? 'transparent' : palette[color],
+            borderColor: light ? palette[color] : undefined,
+            borderWidth: light ? border.width : 0
+          },
           stylesSize[size],
           full && S.full,
           style
@@ -140,11 +114,15 @@ export class Button extends PureComponent<ButtonProps> {
       iconStyle,
       title,
       titleStyle,
-      viewStyle
+      viewStyle,
+      size = 'medium',
+      color = 'primary',
+      light,
+      link
     } = this.props;
 
-    const color = this.getColor(this.props);
-    const size = this.getSize(this.props);
+    const { palette } = this.state;
+    const onColor = 'on' + color.charAt(0).toUpperCase() + color.slice(1);
 
     if (loading) {
       return <Loading />;
@@ -155,12 +133,7 @@ export class Button extends PureComponent<ButtonProps> {
           <Text
             style={[
               S.text,
-              {
-                color:
-                  color === 'link'
-                    ? this.stylesColor.primary
-                    : stylesTextColor[color]
-              },
+              { color: light || link ? palette[color] : palette[onColor] },
               stylesTextSize[size],
               titleStyle
             ]}
@@ -171,42 +144,4 @@ export class Button extends PureComponent<ButtonProps> {
       );
     }
   }
-
-  private getColor = (props: ButtonProps) => {
-    if (props.primary) {
-      return 'primary';
-    }
-    if (props.secondary) {
-      return 'secondary';
-    }
-    if (props.success) {
-      return 'success';
-    }
-    if (props.warning) {
-      return 'warning';
-    }
-    if (props.alert) {
-      return 'alert';
-    }
-    if (props.dark) {
-      return 'dark';
-    }
-    if (props.light) {
-      return 'light';
-    }
-    if (props.disabled) {
-      return 'disabled';
-    }
-    if (props.link) {
-      return 'link';
-    }
-    return 'primary';
-  }
-
-  private getSize = (props: ButtonProps) => {
-    if (props.small) {
-      return 'small';
-    }
-    return 'large';
-  }
 }
diff --git a/packages/fscomponents/src/components/MultiCarousel/__stories__/MultiCarousel.story.tsx b/packages/fscomponents/src/components/MultiCarousel/__stories__/MultiCarousel.story.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react'; // tslint:disable-line:no-implicit-dependencies
 import { action } from '@storybook/addon-actions'; // tslint:disable-line:no-implicit-dependencies
 import { MultiCarousel } from '../MultiCarousel';
-import { ProductItemVerticalList } from '../../ProductItem/ProductItemVerticalList';
+import { ProductItem } from '../../ProductItem';
 import Decimal from 'decimal.js';
 
 const productItems = [...Array(10)].map((a, i) => ({
@@ -13,7 +13,7 @@ const productItems = [...Array(10)].map((a, i) => ({
 
 const renderItem = (item: any) => {
   return (
-    <ProductItemVerticalList
+    <ProductItem
       id={item.id}
       handle={item.title}
       title={item.title}