Merge pull request #65 from iRaySpace/master

refactor: Listing components

src/container/ListingContainer/index.js

@@ -645,7 +645,6 @@ export default class ListingContainer extends React.Component {
     this.props.taxesStore
       .edit(text, this.props.stateStore.listing_state[0].taxObjects)
       .then(result => {
-        // this.setState({ taxObjects: result.slice() });
         this.props.stateStore.changeValue(
           "taxObjects",
           result.slice(),
@@ -672,12 +671,13 @@ export default class ListingContainer extends React.Component {
     }
   };
 
-  onEndReached = value => {
-    if (value === "itemStore") {
+  onEndReached = () => {
+    const { tabStatus } = this.props.stateStore.listing_state[0];
+    if (tabStatus === "0") {
       this.props.itemStore.getFromDb(20);
-    } else if (value === "categoryStore") {
+    } else if (tabStatus === "1") {
       this.props.categoryStore.getFromDb(20);
-    } else if (value === "discountStore") {
+    } else if (tabStatus === "2") {
       this.props.discountStore.getFromDb(20);
     }
   };
@@ -695,7 +695,7 @@ export default class ListingContainer extends React.Component {
           currency={getCountryCode(this.props.printerStore)}
           onClick={this.onItemClick}
           onLongPress={this.onItemLongPress}
-          onEndReached={() => this.onEndReached("itemStore")}
+          onEndReached={this.onEndReached}
         >
           <InputItem
             changeBluetoothStatus={this.getBluetoothState}
@@ -729,7 +729,7 @@ export default class ListingContainer extends React.Component {
         data={this.props.categoryStore.rows.slice().sort(sortByName)}
         onClick={this.onCategoryClick}
         onLongPress={this.onCategoryLongPress}
-        onEndReached={() => this.onEndReached("categoryStore")}
+        onEndReached={this.onEndReached}
       >
         <InputCategory
           data={this.props.categoryStore.selectedCat}
@@ -747,7 +747,7 @@ export default class ListingContainer extends React.Component {
         data={this.props.discountStore.rows.slice().sort(sortByName)}
         onClick={this.onDiscountClick}
         onLongPress={this.onDiscountLongPress}
-        onEndReached={() => this.onEndReached("discountStore")}
+        onEndReached={this.onEndReached}
       >
         <InputDiscount
           currency={getCountryCode(this.props.printerStore)}

src/stories/components/ColorShapeInputComponent.js

@@ -4,10 +4,13 @@ import { Picker } from "native-base";
 import { Row, Col, Grid } from "react-native-easy-grid";
 import { currentLanguage } from "../../translations/CurrentLanguage";
 
+import ListingLabel from "@components/ListingLabelComponent";
+
 import Icon from "react-native-vector-icons/FontAwesome";
 import translation from "../.././translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
+
 export default class ColorShapeInputComponent extends React.PureComponent {
   colorPicker() {
     const { onChangeColor } = this.props;
@@ -36,7 +39,7 @@ export default class ColorShapeInputComponent extends React.PureComponent {
     return (
       <Grid>
         <Col>
-          <Text style={styles.text}>{strings.Color}</Text>
+          <ListingLabel text={strings.Color} />
           <View style={styles.colorPickerView}>{this.colorPicker()}</View>
         </Col>
         <Col style={styles.rightCol}>
@@ -57,9 +60,9 @@ export default class ColorShapeInputComponent extends React.PureComponent {
                 width: Dimensions.get("window").width / 15,
               }}
             >
-              <Text style={{ color: "black" }}>{strings.Color}:</Text>
+              <Text style={styles.view}>{strings.Color}:</Text>
             </Col>
-            <Col style={{ justifyContent: "center" }}>{this.colorPicker()}</Col>
+            <Col style={styles.col}>{this.colorPicker()}</Col>
           </Row>
           <Row>
             <Col
@@ -68,13 +71,13 @@ export default class ColorShapeInputComponent extends React.PureComponent {
                 width: Dimensions.get("window").width / 15,
               }}
             >
-              <Text style={{ color: "black" }}>{strings.Shape}:</Text>
+              <Text style={styles.view}>{strings.Shape}:</Text>
             </Col>
-            <Col style={{ justifyContent: "center" }}>
+            <Col style={styles.col}>
               <Picker
                 mode="dropdown"
                 selectedValue={this.props.value[0].shape}
-                onValueChange={text => this.props.onChangeShape(text)}
+                onValueChange={this.props.onChangeShape}
               >
                 <Picker.Item label="Square" value="square" />
                 <Picker.Item label="Circle" value="circle" />
@@ -85,15 +88,15 @@ export default class ColorShapeInputComponent extends React.PureComponent {
           </Row>
         </Col>
         {this.props.value[0].shape && this.props.value[0].color ? (
-          <Col style={{ justifyContent: "center" }}>
+          <Col style={styles.col}>
             <Icon
-              name={this.props.value[0].shape}
               size={120}
+              name={this.props.value[0].shape}
               style={{ color: this.props.value[0].color }}
             />
           </Col>
         ) : (
-          <Col style={{ justifyContent: "center" }} />
+          <Col style={styles.color} />
         )}
       </Grid>
     );
@@ -115,10 +118,11 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     borderColor: "#D9D5DC",
   },
+  col: {
+    justifyContent: "center",
+  },
   text: {
-    color: "black",
     fontWeight: "bold",
-    marginBottom: 10,
   },
   rightCol: {
     paddingLeft: 10,

src/stories/components/IdleComponent.js

@@ -1,36 +1,21 @@
 import * as React from "react";
+import { StyleSheet } from "react-native";
 import { View, Text, Button } from "native-base";
 import { currentLanguage } from "../../translations/CurrentLanguage";
 
 import translation from "../.././translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
+
 const IdleComponent = props => (
-  <View
-    style={{
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: "#00000025",
-    }}
-  >
+  <View style={styles.view}>
     {strings.setLanguage(currentLanguage().companyLanguage)}
 
-    <View style={{ alignSelf: "center" }}>
-      <Text
-        style={{
-          textAlign: "center",
-          fontWeight: "bold",
-          color: "#043c6c",
-          marginBottom: 10,
-        }}
-      >
+    <View style={styles.innerView}>
+      <Text style={styles.text}>
         {strings.WouldYouLikeToCreateNew} {props.type}?
       </Text>
-      <Button
-        style={{ alignSelf: "center", backgroundColor: "#4B4C9D" }}
-        onPress={props.onPress}
-      >
+      <Button style={styles.button} onPress={props.onPress}>
         <Text>
           {strings.CreateNew} {props.type}
         </Text>
@@ -39,4 +24,26 @@ const IdleComponent = props => (
   </View>
 );
 
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#00000025",
+  },
+  innerView: {
+    alignSelf: "center",
+  },
+  text: {
+    textAlign: "center",
+    fontWeight: "bold",
+    color: "#043c6c",
+    marginBottom: 10,
+  },
+  button: {
+    alignSelf: "center",
+    backgroundColor: "#4b4c9d",
+  },
+});
+
 export default IdleComponent;

src/stories/components/ListingColumnComponent.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+const ListingColumnComponent = props => {
+  const { view, last } = styles;
+  const viewStyle = props.last ? StyleSheet.flatten([view, last]) : view;
+
+  return <View style={viewStyle}>{props.children}</View>;
+};
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    marginRight: 30,
+  },
+  last: {
+    marginRight: 0,
+  },
+});
+
+export default ListingColumnComponent;

src/stories/components/ListingItemComponent.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Item } from "native-base";
+
+const ListingItemComponent = props => {
+  const { item, half } = styles;
+  const itemStyle = props.half ? StyleSheet.flatten([item, half]) : item;
+
+  return (
+    <Item regular style={itemStyle}>
+      {props.children}
+    </Item>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    marginBottom: 10,
+  },
+  half: {
+    width: "50%",
+  },
+});
+
+export default ListingItemComponent;

src/stories/components/ListingLabelComponent.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text } from "native-base";
+
+const ListingLabelComponent = props => (
+  <Text style={styles.text}>{props.text}</Text>
+);
+
+const styles = StyleSheet.create({
+  text: {
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+});
+
+export default ListingLabelComponent;

src/stories/components/ListingRowComponent.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+const ListingRowComponent = props => (
+  <View style={styles.view}>{props.children}</View>
+);
+
+const styles = StyleSheet.create({
+  view: { flexDirection: "row" },
+});
+
+export default ListingRowComponent;

src/stories/components/SectionBreakComponent.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+const SectionBreakComponent = props => <View style={styles.view} />;
+
+const styles = StyleSheet.create({
+  view: {
+    borderTopWidth: 1,
+    borderTopColor: "#D9D5DC",
+    paddingTop: 10,
+    marginTop: 15,
+  },
+});
+
+export default SectionBreakComponent;