Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Listing components #65

Merged
merged 17 commits into from
Jul 16, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/container/ListingContainer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -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);
}
};
Expand All @@ -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}
Expand Down Expand Up @@ -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}
Expand All @@ -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)}
Expand Down
26 changes: 15 additions & 11 deletions src/stories/components/ColorShapeInputComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}>
Expand All @@ -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
Expand All @@ -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" />
Expand All @@ -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>
);
Expand All @@ -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,
Expand Down
49 changes: 28 additions & 21 deletions src/stories/components/IdleComponent.js
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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;
21 changes: 21 additions & 0 deletions src/stories/components/ListingColumnComponent.js
Original file line number Diff line number Diff line change
@@ -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;
25 changes: 25 additions & 0 deletions src/stories/components/ListingItemComponent.js
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 16 additions & 0 deletions src/stories/components/ListingLabelComponent.js
Original file line number Diff line number Diff line change
@@ -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;
12 changes: 12 additions & 0 deletions src/stories/components/ListingRowComponent.js
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 15 additions & 0 deletions src/stories/components/SectionBreakComponent.js
Original file line number Diff line number Diff line change
@@ -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;
Loading