Skip to content

R
react-native-bucks
Commit 1ece3286 authored by yangnr's avatar yangnr
Browse files
Options

Initial commit

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2669 additions and 0 deletions
package.json 0 → 100644
View file @ 1ece3286
{
"name": "react-native-bucks",
"version": "1.0.0",
"description": "React Native Bucks & UI Toolkit",
"main": "src/index.js",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/azertys/bucks-react.git"
},
"keywords": [
"react-native",
"reactjs",
"reactnative",
"bootstrap"
],
"scripts": {
"build": "rm -rf build; webpack"
},
"author": "EpicPxls",
"license": "MIT",
"bugs": {
"url": "https://github.com/azertys/bucks-react/issues"
},
"rnpm": {
"assets": [
"./src/fonts/"
]
},
"homepage": "https://github.com/azertys/bucks-react#readme",
"dependencies": {
"immutable": "^3.8.2",
"node": "^8.10.0",
"prop-types": "^15.6.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
"react-native-side-menu": "^1.0.2",
"react-native-tab-navigator": "^0.3.4",
"react-native-pathjs-charts": "https://github.com/EpicCoders/react-native-pathjs-charts",
"react-native-vector-icons": "^4.6.0"
},
"peerDependencies": {},
"devDependencies": {}
}
src/buttons/Button.js 0 → 100755
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
TouchableNativeFeedback,
TouchableHighlight,
StyleSheet,
View,
Platform,
Text as NativeText,
} from 'react-native';
import Icon from '../icons/Icon';
import colors from '../config/colors';
import Text from '../text/Text';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const log = () =>
{
console.log('please attach method to this component'); //eslint-disable-line no-console
};
const Button = props =>
{
const {
disabled,
title,
buttonStyle,
borderRadius,
onPress,
secondary,
secondary2,
secondary3,
iconLeft,
color,
fontSize,
underlayColor,
raised,
textStyle,
containerViewStyle,
...attributes
} = props;
let {Component} = props;
if (!Component && Platform.OS === 'ios')
{
Component = TouchableHighlight;
}
if (!Component && Platform.OS === 'android')
{
Component = TouchableNativeFeedback;
}
if (!Component)
{
Component = TouchableHighlight;
}
if (Platform.OS === 'android' && (borderRadius && !attributes.background))
{
attributes.background = TouchableNativeFeedback.Ripple(
'ThemeAttrAndroid',
true
);
}
let buttonTitle = <Text
style={[
styles.text,
color && {color},
fontSize && {fontSize},
textStyle && textStyle,
secondary && {color: colors.grey0},
secondary3 && {color: colors.blue},
]}
>
{title}
</Text>;
if (typeof title === 'object') {
buttonTitle = <View
style={[
color && {color},
secondary && {color: colors.grey0},
secondary3 && {color: colors.blue},
]}
>
{title}
</View>
}
return (
<View
style={[styles.container, raised && styles.raised, containerViewStyle]}
>
<Component
underlayColor={underlayColor || 'transparent'}
onPress={onPress || log}
disabled={disabled || false}
{...attributes}
>
<View
style={[
styles.button,
secondary && {backgroundColor: colors.secondary},
secondary2 && {backgroundColor: colors.secondary2},
secondary3 && {backgroundColor: colors.secondary3, borderColor: colors.blue, borderWidth: 2},
buttonStyle && buttonStyle,
]}
>
{iconLeft ?
<Icon style={styles.iconLeft}
{...iconLeft}
/>
: null
}
{buttonTitle}
</View>
</Component>
</View>
);
};
Button.propTypes = {
buttonStyle: ViewPropTypes.style,
title: PropTypes.any,
onPress: PropTypes.any,
icon: PropTypes.object,
iconComponent: PropTypes.any,
secondary: PropTypes.bool,
secondary2: PropTypes.bool,
secondary3: PropTypes.bool,
primary1: PropTypes.bool,
primary2: PropTypes.bool,
backgroundColor: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.any,
underlayColor: PropTypes.string,
raised: PropTypes.bool,
textStyle: NativeText.propTypes.style,
disabled: PropTypes.bool,
loading: PropTypes.bool,
activityIndicatorStyle: ViewPropTypes.style,
loadingRight: PropTypes.bool,
Component: PropTypes.any,
borderRadius: PropTypes.number,
large: PropTypes.bool,
iconRight: PropTypes.bool,
iconLeft: PropTypes.object,
fontWeight: PropTypes.string,
disabledStyle: ViewPropTypes.style,
fontFamily: PropTypes.string,
containerViewStyle: ViewPropTypes.style,
rounded: PropTypes.bool,
outline: PropTypes.bool,
transparent: PropTypes.bool,
allowFontScaling: PropTypes.bool,
textNumberOfLines: PropTypes.number,
textEllipsizeMode: PropTypes.string,
};
const stylesObject = {
container: {
backgroundColor: 'transparent',
marginLeft: 15,
marginRight: 15,
},
button: {
padding: 5,
borderRadius: 33,
backgroundColor: colors.bgColor,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
text: {
color: 'white',
fontWeight: 'bold',
fontSize: normalize(12),
},
iconLeft: {
width: 18,
},
};
const styles = StyleSheet.create(stylesObject);
export default Button;
src/calendar/CalendarItem.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
Platform,
TouchableHighlight,
Text as NativeText,
} from 'react-native';
import colors from '../config/colors';
import Text from '../text/Text';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
const CalendarItem = props => {
const {
flexDirection,
containerStyle,
...attributes
} = props;
let calendarTheme = {
arrowColor: 'white',
'stylesheet.calendar.header': {
week: {
marginTop: 5,
flexDirection: 'row',
justifyContent: 'space-between'
}
}
};
return (
<Agenda
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={
{'2012-05-22': [{text: 'item 1 - any js object'}],
'2012-05-23': [{text: 'item 2 - any js object'}],
'2012-05-24': [],
'2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
}}
// callback that gets called when items for a certain month should be loaded (month became visible)
loadItemsForMonth={(month) => {console.log('trigger items loading')}}
// callback that gets called on day press
onDayPress={(day)=>{console.log('day pressed')}}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{console.log('day changed')}}
// initially selected day
selected={'2012-05-22'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// specify how each item should be rendered in agenda
renderItem={(item, firstItemInDay) => {return (<View />);}}
// specify how each date should be rendered. day can be undefined if the item is not first in that day.
renderDay={(day, item) => {return (<View />);}}
// specify how empty date content with no items should be rendered
renderEmptyDate={() => {return (<View />);}}
// specify how agenda knob should look like
renderKnob={() => {return (<View />);}}
// specify your item comparison function for increased performance
rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
// Hide knob button. Default = false
hideKnob={true}
// By default, agenda dates are marked if they have at least one item, but you can override this if needed
markedDates={{
'2012-05-16': {selected: true, marked: true},
'2012-05-17': {marked: true},
'2012-05-18': {disabled: true}
}}
// agenda theme
theme={{
...calendarTheme,
agendaDayTextColor: 'yellow',
agendaDayNumColor: 'green',
agendaTodayColor: 'red',
agendaKnobColor: 'blue'
}}
// agenda container style
style={{}}
/>
);
};
CalendarItem.propTypes = {
flexDirection: PropTypes.string,
containerStyle: ViewPropTypes.style,
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 16,
margin: 15,
paddingTop: 26,
marginBottom: 0,
marginTop: 19,
borderRadius: 8,
flexDirection: 'column',
},
calendar: {
borderTopWidth: 1,
paddingTop: 5,
borderBottomWidth: 1,
borderColor: '#eee',
height: 350
},
});
export default CalendarItem;
src/card/Card.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
Platform,
Image,
TouchableHighlight,
Text as NativeText,
} from 'react-native';
import colors from '../config/colors';
import Icon from '../icons/Icon';
import Text from '../text/Text';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const TYPES = {
mastercard: {
source: require('../images/mastercard.png'),
},
paypal: {
source: require('../images/paypal.png'),
},
visa: {
source: require('../images/visa.png'),
},
};
const Card = props => {
const {
flexDirection,
containerStyle,
wrapperStyle,
title,
subTitle,
subTitleStyle,
type,
color,
number,
expiration,
titleStyle,
...attributes
} = props;
let cardColor = color ? color : colors.blue;
return (
<View
style={[
styles.container,
containerStyle && containerStyle,
]}
{...attributes}
>
{expiration ? <View
style={[
styles.cardColorBlock,
{backgroundColor: cardColor},
]}
>
</View> : null}
<View
style={[
styles.wrapper,
wrapperStyle && wrapperStyle,
flexDirection && { flexDirection },
]}
>
<View
style={[
styles.topContainer
]}
>
<View
style={[
styles.titleSubtitleContainer
]}
>
{title !== null &&
<View>
<Text
style={[
styles.cardTitle,
titleStyle && titleStyle,
]}
>
{title}
</Text>
</View>}
{subTitle !== null &&
<View>
<Text
style={[
styles.cardSubTitle,
subTitleStyle && subTitleStyle,
]}
>
{subTitle}
</Text>
</View>}
</View>
<View>
<Image
style={styles.typeImage}
resizeMode="contain"
source={TYPES[type].source}
/>
</View>
</View>
<View
style={[
styles.numberContainer
]}
>
<Text
style={[
styles.numberAsterix
]}
>
**** **** ****
</Text>
<Text
style={[
styles.number
]}
>
{number}
</Text>
</View>
{expiration ?
<View style={[
styles.bottomContainer]}>
<View>
<Text>
{expiration}
</Text>
</View>
<View>
<TouchableHighlight>
<View
style={[
styles.moreButton
]}
>
<Text
style={[
styles.moreText
]}
>
More
</Text>
<Icon
color={colors.link}
name='chevron-right'
size={13}
/>
</View>
</TouchableHighlight>
</View>
</View> : null}
</View>
</View>
);
};
Card.defaultProps = {
// underlayColor: 'white',
// leftIconUnderlayColor: 'white',
// chevronColor: colors.grey4,
// rightIcon: { name: 'chevron-right' },
// hideChevron: true,
// roundAvatar: false,
// switchButton: false,
// textInputEditable: true,
// titleNumberOfLines: 1,
// subtitleNumberOfLines: 1,
// rightTitleNumberOfLines: 1,
};
Card.propTypes = {
flexDirection: PropTypes.string,
containerStyle: ViewPropTypes.style,
wrapperStyle: ViewPropTypes.style,
overlayStyle: ViewPropTypes.style,
title: PropTypes.string,
titleStyle: NativeText.propTypes.style,
subTitle: PropTypes.string,
subTitleStyle: NativeText.propTypes.style,
type: PropTypes.oneOf([
'mastercard',
'visa',
'paypal'
]),
number: PropTypes.string,
expiration: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 16,
margin: 15,
paddingTop: 26,
marginBottom: 0,
marginTop: 19,
borderRadius: 8,
flexDirection: 'row',
...Platform.select({
ios: {
shadowColor: 'rgba(0, 0, 0, 0.04)',
shadowOffset: { height: 10, width: 0 },
shadowOpacity: 1,
shadowRadius: 14,
},
android: {
elevation: 1,
},
}),
},
wrapper: {
backgroundColor: 'transparent',
marginLeft: 10,
flexDirection: 'column',
flex: 1,
marginBottom: 5,
},
topContainer: {
flex: 1,
flexDirection: 'row',
paddingTop: 0,
},
titleSubtitleContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
},
bottomContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 22,
},
cardColorBlock: {
height: 26,
width: 26,
borderRadius: 4,
backgroundColor: colors.blue,
},
typeImage: {
alignItems: 'flex-end',
justifyContent: 'center',
flex: 0.15,
width: 60,
height: 30,
},
cardTitle: {
fontSize: normalize(18),
textAlign: 'left',
marginBottom: 5,
color: colors.black,
letterSpacing: 1.3,
},
cardSubTitle: {
flex: 1,
color: colors.grey0,
fontSize: normalize(10),
opacity: 0.7,
...Platform.select({
ios: {
fontWeight: 'normal',
},
android: {
...fonts.android.normal,
},
}),
},
numberContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 20,
},
numberAsterix: {
fontSize: normalize(25),
color: colors.grey0,
opacity: 0.7,
letterSpacing: 2,
lineHeight: 0.1,
marginTop: 17,
},
number: {
fontSize: normalize(26),
color: colors.grey0,
marginTop: 4,
fontFamily: 'Ayuthaya',
},
moreButton: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginRight: 10,
},
moreText: {
color: colors.link,
fontSize: normalize(11),
marginRight: 10,
},
overlayContainer: {
flex: 1,
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
alignSelf: 'stretch',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default Card;
src/charts/GainLine.js 0 → 100644
View file @ 1ece3286
'use strict';
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import { Text, Circle } from 'react-native-svg';
import { SmoothLine } from 'react-native-pathjs-charts';
const GainLine = props => {
const {
data,
options,
...attributes
} = props;
let baseOptions = {
animate: {
type: 'delayed',
duration: 200
},
axisX: {
showAxis: true,
showLines: true,
showLabels: false,
showTicks: false,
zeroAxis: false,
orient: 'bottom',
label: {
fontFamily: 'Arial',
fontSize: 14,
fontWeight: true,
fill: 'transparent'
}
},
axisY: {
showAxis: true,
showLines: false,
showLabels: false,
showTicks: false,
zeroAxis: false,
orient: 'left',
label: {
fontFamily: 'Arial',
fontSize: 14,
fontWeight: true,
fill: 'transparent'
}
},
showAreas: true,
showPoints: true,
renderPoint: (graphIndex, pointIndex) => [
<Text
key="valueLegend"
fontFamily="Arial"
fontSize={14}
fontWeight="normal"
fill="transparent"
textAnchor="middle"
x={0}
y={20}
>
{data[graphIndex][pointIndex].y}
</Text>,
<Circle key="light" fill='#FFFFFF' cx={0} cy={0} r={7} fillOpacity={1} />,
<Circle key="full" fill='#1566DF' cx={0} cy={0} r={5} fillOpacity={1} />,
]
};
return (
<SmoothLine data={data} options={{...baseOptions, ...options}} xKey='x' yKey='y' />
);
};
GainLine.propTypes = {
options: PropTypes.any,
data: PropTypes.any,
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
});
export default GainLine;
\ No newline at end of file
src/checkbox/Checkbox.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
StyleSheet,
TouchableOpacity,
View,
Platform,
Text as NativeText,
} from 'react-native';
import TextElement from '../text/Text';
import fonts from '../config/fonts';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
import Icon from '../icons/Icon';
const CheckBox = props => {
const {
component,
checked,
iconRight,
title,
center,
right,
containerStyle,
textStyle,
onPress,
onLongPress,
onIconPress,
onLongIconPress,
size,
checkedIcon,
uncheckedIcon,
checkedColor,
uncheckedColor,
checkedTitle,
fontFamily,
...attributes
} = props;
const Component = component || TouchableOpacity;
let iconName = uncheckedIcon;
if (checked) {
iconName = checkedIcon;
}
return (
<Component
onLongPress={onLongPress}
onPress={onPress}
style={[styles.container, containerStyle && containerStyle]}
{...attributes}
>
<View
style={[
styles.wrapper,
right && { justifyContent: 'flex-end' },
center && { justifyContent: 'center' },
]}
>
{!iconRight &&
<Icon
color={checked ? checkedColor : uncheckedColor}
name={iconName}
size={size || 24}
onLongPress={onLongIconPress}
onPress={onIconPress}
/>}
{React.isValidElement(title)
? title
: <TextElement
style={[
styles.text,
textStyle && textStyle,
fontFamily && { fontFamily },
]}
>
{checked ? checkedTitle || title : title}
</TextElement>}
{iconRight &&
<Icon
color={checked ? checkedColor : uncheckedColor}
name={iconName}
size={size || 24}
onLongPress={onLongIconPress}
onPress={onIconPress}
/>}
</View>
</Component>
);
};
CheckBox.defaultProps = {
checked: false,
iconRight: false,
right: false,
center: false,
checkedColor: 'green',
uncheckedColor: '#bfbfbf',
checkedIcon: 'check-square-o',
uncheckedIcon: 'square-o',
size: 24,
};
CheckBox.propTypes = {
component: PropTypes.any,
checked: PropTypes.bool,
iconRight: PropTypes.bool,
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
center: PropTypes.bool,
right: PropTypes.bool,
containerStyle: ViewPropTypes.style,
textStyle: NativeText.propTypes.style,
onPress: PropTypes.func,
onLongPress: PropTypes.func,
checkedIcon: PropTypes.string,
uncheckedIcon: PropTypes.string,
iconType: PropTypes.string,
size: PropTypes.number,
checkedColor: PropTypes.string,
uncheckedColor: PropTypes.string,
checkedTitle: PropTypes.string,
onIconPress: PropTypes.func,
onLongIconPress: PropTypes.func,
fontFamily: PropTypes.string,
};
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
alignItems: 'center',
},
container: {
margin: 5,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#fafafa',
borderColor: '#ededed',
borderWidth: 1,
padding: 10,
borderRadius: 3,
},
text: {
marginLeft: 10,
marginRight: 10,
color: colors.grey1,
...Platform.select({
ios: {
fontWeight: 'bold',
},
android: {
...fonts.android.bold,
},
}),
},
});
export default CheckBox;
src/config/BackgroundImage.js 0 → 100644
View file @ 1ece3286
import { Image, ImageBackground } from 'react-native';
const BackgroundImage = ImageBackground || Image;
export default BackgroundImage;
src/config/ViewPropTypes.js 0 → 100644
View file @ 1ece3286
import { View, ViewPropTypes as RNViewPropTypes } from 'react-native';
const ViewPropTypes = RNViewPropTypes || View.propTypes;
export default ViewPropTypes;
src/config/colors.js 0 → 100644
View file @ 1ece3286
export default {
primary: '#2F80F6',
// primary1: '#4d86f7',
primary2: '#6296f9',
secondary: '#DEE9F7',
secondary2: '#515F71',
link: '#136EF1',
danger: '#FE4F68',
bgColor: '#78AEF9',
// secondary3: '#2F80F6',
grey0: '#3E4A59',
// grey1: '#43484d',
// grey2: '#5e6977',
grey3: '#86939e',
// grey4: '#bdc6cf',
// grey5: '#e1e8ee',
// dkGreyBg: '#232323',
// greyOutline: '#bbb',
// searchBg: '#303337',
// disabled: '#dadee0',
white: '#ffffff',
border: '#E9EFF7',
black: '#24272B',
pink: '#FE4E56',
yellow: '#FFBA12',
green: '#09C04C',
blue: '#4189FF',
purple: '#7153FF',
lightBlue: '#4189FF',
turquoise: '#00DDCB',
tabDefault: '#B3BFD0',
tabSelected: '#2F80F6',
tabTextDefault: '#4B5461',
tabTextSelected: '#136EF1',
sliderLeft: '#2F80F6',
sliderRight: '#D3DFEF'
};
\ No newline at end of file
src/config/fonts.js 0 → 100644
View file @ 1ece3286
export default {
ios: {
regular: {
fontFamily: 'PingFangHK-Regular, sans-serif',
},
medium: {
fontFamily: 'PingFangHK-Medium',
},
extraBoldRegular: {
fontFamily: 'Abadi MT Condensed Extra Bold Regular'
},
/* We are only allowed to use these in iOS */
SFMedium: {
fontFamily: 'SFUIText-Medium'
},
SFRegular: {
fontFamily: 'SFUIText-Regular'
},
SFSemibold: {
fontFamily: 'SFUIText-Semibold'
},
Ayuthaya: {
fontFamily: 'Ayuthaya'
}
},
android: {
regular: {
fontFamily: 'sans-serif',
},
medium: {
fontFamily: 'sans-serif-medium',
},
light: {
fontFamily: 'sans-serif-light',
},
condensed: {
fontFamily: 'sans-serif-condensed',
},
condensed_light: {
fontFamily: 'sans-serif-condensed',
fontWeight: 'light',
},
black: {
// note(brentvatne): sans-serif-black is only supported on Android 5+,
// we can detect that here and use it in that case at some point.
fontFamily: 'sans-serif',
fontWeight: 'bold',
},
thin: {
fontFamily: 'sans-serif-thin',
},
bold: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
},
},
};
src/divider/Divider.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
let styles = {};
const Divider = ({ style }) =>
<View style={[styles.container, style && style]} />;
Divider.propTypes = {
style: ViewPropTypes.style,
};
styles = StyleSheet.create({
container: {
height: 1,
backgroundColor: colors.grey5,
},
});
export default Divider;
src/form/FormInput.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
Animated,
Easing,
TextInput,
StyleSheet,
Platform,
Dimensions,
Text as NativeText,
} from 'react-native';
import colors from '../config/colors';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const { width } = Dimensions.get('window');
class FormInput extends Component {
constructor(props) {
super(props);
this.shake = this.shake.bind(this);
}
componentWillMount() {
this.shakeAnimationValue = new Animated.Value(0);
this.props.shake && this.shake();
}
componentWillReceiveProps(nextProps) {
nextProps.shake && this.props.shake !== nextProps.shake && this.shake();
}
getRef = () => {
return this.input || this.refs[this.props.textInputRef];
};
getRefHandler = () => {
if (this.props.textInputRef) {
if (typeof this.props.textInputRef === 'function') {
return input => {
this.input = input;
this.props.textInputRef(input);
};
} else {
return this.props.textInputRef;
}
} else {
return input => (this.input = input);
}
};
focus() {
this.getRef() && this.getRef().focus();
}
blur() {
this.getRef() && this.getRef().blur();
}
clearText() {
this.getRef() && this.getRef().clear();
}
shake() {
const { shakeAnimationValue } = this;
shakeAnimationValue.setValue(0);
Animated.timing(shakeAnimationValue, {
duration: 375,
toValue: 3,
ease: Easing.bounce,
}).start();
}
render() {
const {
onSuccess,
search,
containerStyle,
inputStyle,
containerRef,
selectionColor,
placeholder,
normalizeFontSize,
...attributes
} = this.props;
if(onSuccess){
containerStyle.borderColor= 'transparent';
}
if (search) {
inputStyle.color= '#D3DFEF';
containerStyle.borderColor= 'transparent';
}
const translateX = this.shakeAnimationValue.interpolate({
inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
outputRange: [0, -15, 0, 15, 0, -15, 0],
});
return (
<Animated.View
ref={containerRef}
style={[
styles.container,
containerStyle && containerStyle,
{
transform: [{ translateX }],
},
]}
>
<TextInput
ref={this.getRefHandler()}
placeholder={placeholder}
placeholderTextColor='#CED4DA'
selectionColor={selectionColor || colors.grey3}
style={[
styles.input,
{ fontSize: normalizeFontSize ? normalize(14) : 14 },
inputStyle && inputStyle,
]}
{...attributes}
/>
</Animated.View>
);
}
}
FormInput.propTypes = {
containerStyle: ViewPropTypes.style,
inputStyle: NativeText.propTypes.style,
selectionColor: PropTypes.string,
// Deprecated
textInputRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
// Deprecated
containerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
normalizeFontSize: PropTypes.bool,
shake: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
PropTypes.object,
PropTypes.number,
PropTypes.array,
]),
};
FormInput.defaultProps = {
normalizeFontSize: true,
};
const styles = StyleSheet.create({
container: {
marginLeft: 15,
marginRight: 15,
borderColor: '#CED4DA',
...Platform.select({
ios: {
borderBottomColor: colors.grey4,
borderBottomWidth: 1,
marginLeft: 20,
marginRight: 20,
},
}),
},
input: {
...Platform.select({
android: {
minHeight: 46,
width: width - 30,
},
ios: {
minHeight: 36,
width: width,
},
}),
// breaks tests - fix before release
// Invariant Violation: Invalid undefined `width` of type `string`
// supplied to `StyleSheet input`, expected `number`.
// width: '100%',
color: colors.grey3,
},
});
export default FormInput;
\ No newline at end of file
src/form/FormLabel.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet, View, Platform, Text as NativeText } from 'react-native';
import fonts from '../config/fonts';
import Text from '../text/Text';
import ViewPropTypes from '../config/ViewPropTypes';
const FormLabel = props => {
const {
containerStyle,
labelStyle,
error,
children,
fontFamily,
...attributes
} = props;
if(error){
labelStyle.color= '#FE4F68';
} else {
labelStyle.color= '#3E4A59';
}
return (
<View
style={[styles.container, containerStyle && containerStyle]}
{...attributes}
>
<Text
style={[
styles.label,
labelStyle && labelStyle,
fontFamily && { fontFamily },
]}
>
{children}
</Text>
</View>
);
};
FormLabel.defaultProps = {
error: false,
};
FormLabel.propTypes = {
containerStyle: ViewPropTypes.style,
labelStyle: NativeText.propTypes.style,
children: PropTypes.any,
error: PropTypes.bool,
fontFamily: PropTypes.string,
};
const styles = StyleSheet.create({
container: {},
label: {
marginLeft: 20,
marginRight: 20,
marginTop: 15,
marginBottom: 1,
color: '#8D959D',
fontSize: 10,
opacity: 0.9,
...Platform.select({
ios: {
fontWeight: 'bold',
},
android: {
...fonts.android.bold,
},
}),
},
});
export default FormLabel;
\ No newline at end of file
src/form/FormLogin.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import FormInput from '../form/FormInput';
import PropTypes from 'prop-types';
import FormLabel from '../form/FormLabel';
import colors from '../config/colors';
import Icon from '../icons/Icon';
import { StyleSheet, View, } from 'react-native';
const FormLogin = props => {
const {
success,
label,
icon,
placeholder,
iconName,
onSuccess,
} = props;
return (
<View>
{
onSuccess ? (
<View>
<FormLabel
labelStyle={{}}>
{label}
</FormLabel>
<FormInput
onSuccess={true}
containerStyle={{}} />
<Icon
color={colors.green}
name='check-circle'
size={18}
style={styles.inputIcon}
/>
</View>
) : <View>
<FormLabel
labelStyle={{}}>
{label}
</FormLabel>
<FormInput
placeholder={placeholder} />
</View>
}
</View>
);
};
FormLogin.defaultProps = {
success: false,
};
FormLogin.propTypes = {
success: PropTypes.bool,
label: PropTypes.string,
icon : PropTypes.bool,
iconName: PropTypes.string,
onSuccess: PropTypes.bool,
};
const styles = StyleSheet.create({
inputIcon: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10
},
});
export default FormLogin;
src/form/FormRow.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import FormInput from '../form/FormInput';
import PropTypes from 'prop-types';
import FormLabel from '../form/FormLabel';
import colors from '../config/colors';
import Icon from '../icons/Icon';
import { StyleSheet, View} from 'react-native';
const FormRow = props => {
const {
error,
label,
icon,
iconName,
hasError,
} = props;
return (
<View>
{
hasError ? (
<View style={styles.errorInput}>
<FormLabel
labelStyle={{}}
error={true} >
Please add the correct {label}
</FormLabel>
<FormInput />
<Icon
color={colors.danger}
name='question-circle'
size={20}
style={styles.inputIcon}
/>
</View>
) : <View>
<FormLabel
labelStyle={{}}>
{label}
</FormLabel>
<FormInput />
{icon ? <Icon
color={colors.link}
name={iconName}
size={20}
style={styles.inputIcon}
/> : null}
</View>
}
</View>
);
};
FormRow.defaultProps = {
error: false,
};
FormRow.propTypes = {
error: PropTypes.bool,
label: PropTypes.string,
icon : PropTypes.bool,
iconName: PropTypes.string,
hasError: PropTypes.bool,
};
const styles = StyleSheet.create({
inputIcon: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10
},
errorInput: {
borderLeftWidth: 4,
borderColor: '#FE4F68',
},
});
export default FormRow;
\ No newline at end of file
src/form/FormSearch.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import FormInput from '../form/FormInput';
import PropTypes from 'prop-types';
import Icon from '../icons/Icon';
import ViewPropTypes from '../config/ViewPropTypes';
import { StyleSheet, View} from 'react-native';
const FormSearch = props => {
const {
error,
label,
icon,
search,
search2,
iconName,
iconSearch,
iconName2,
iconSearch2,
containersStyle,
hasError,
} = props;
if (search2) {
containersStyle.backgroundColor= '#E9EFF7';
}
return (
<View style={[styles.searchBar, containersStyle && containersStyle]}>
<FormInput inputStyle={{}} containerStyle={{}} placeholder='Search' search={true} />
{search2 ? <Icon
color='#8795A8'
name={iconName}
size={20}
style={styles.inputIcon}
/> : <Icon
color='white'
name={iconName}
size={20}
style={styles.inputIcon}
/>}
{search2 ? <Icon
color='#8795A8'
name={iconSearch}
size={20}
style={styles.inputSearch}
/> : <Icon
color='white'
name={iconSearch}
size={20}
style={styles.inputSearch}
/>}
</View>
);
};
FormSearch.defaultProps = {
error: false,
search2: false,
};
FormSearch.propTypes = {
containerStyle: ViewPropTypes.style,
error: PropTypes.bool,
label: PropTypes.string,
icon : PropTypes.bool,
iconName: PropTypes.string,
hasError: PropTypes.bool,
};
const styles = StyleSheet.create({
inputIcon: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10,
},
inputSearch: {
position: 'absolute',
left: 10,
bottom: 0,
padding: 10
},
inputIcon2: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10
},
inputSearch2: {
position: 'absolute',
left: 10,
bottom: 0,
padding: 10
},
searchBar: {
backgroundColor: '#1259C4',
paddingLeft: 30,
paddingRight: 30,
position: 'absolute',
top: 7,
borderRadius: 4,
width: 350,
height: 40,
paddingTop: 3
},
});
export default FormSearch;
\ No newline at end of file
src/headers/CategoriesHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import Button from '../buttons/Button'
import Icon from '../icons/Icon';
import FormLogin from '../form/FormLogin';
import { StyleSheet, View, Text} from 'react-native';
const CategoriesHeader = props => {
return (
<View>
<View style={styles.header}>
<FormLogin
label=''
placeholder='SEARCH'
/>
<Icon
color='#fff'
name='search'
size={18}
style={styles.searchIcon}
/>
</View>
<View style={styles.navButtons}>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#FFCC54'
name='home'
size={18}
style={styles.icon1}
/><Text style={styles.textSocial}>RENT</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#F65252'
name='shower'
size={18}
style={styles.icon2}
/><Text style={styles.textSocial}>UTILITIES</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#FF844D'
name='shield'
size={18}
style={styles.icon3}
/><Text style={styles.textSocial}>INSURANCE</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#78AEF9'
name='file-text-o'
size={18}
style={styles.icon4}
/><Text style={styles.textSocial}>BILL</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#C075C9'
name='desktop'
size={18}
style={styles.icon5}
/><Text style={styles.textSocial}>ELECTRONIC</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#50C1B6'
name='black-tie'
size={18}
style={styles.icon6}
/><Text style={styles.textSocial}>CLOTHING</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#73CC72'
name='mobile'
size={18}
style={styles.icon7}
/><Text style={styles.textSocial}>GADGET</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#F45D90'
name='usd'
size={18}
style={styles.icon8}
/><Text style={styles.textSocial}>SAVINGS</Text></View>}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
header: {
height: 130,
paddingTop: 50,
},
mainTitle: {
fontSize: 16,
color: '#fff',
fontWeight: 'normal'
},
subTitle: {
fontSize: 12,
color: '#fff',
fontWeight: 'normal'
},
navButtons: {
flexDirection: 'column',
},
buttonStyle: {
flexDirection: 'row',
height: 20,
width: 300,
alignItems: 'center'
},
button: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingTop: 20,
paddingBottom: 18,
width: 300,
height: 55,
marginTop: 20,
backgroundColor: '#fff'
},
textSocial: {
color: '#595F66',
fontWeight: 'normal',
fontSize: 12,
paddingLeft: 20
},
searchIcon: {
position: 'absolute',
right: 20,
bottom: 20,
padding: 10,
backgroundColor: '#6AE1C4',
borderRadius: 22,
},
icon1: {
backgroundColor: 'rgba(255,204,84,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon2: {
backgroundColor: 'rgba(246,82,82,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon3: {
backgroundColor: 'rgba(255,132,77,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon4: {
backgroundColor: 'rgba(120,174,249,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon5: {
backgroundColor: 'rgba(192,117,201,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon6: {
backgroundColor: 'rgba(80,193,182,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon7: {
backgroundColor: 'rgba(115,204,114,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon8: {
backgroundColor: 'rgba(244,93,144,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
});
export default CategoriesHeader;
src/headers/LandingHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, Text } from 'react-native';
const LandingHeader = props => {
const {
mainTitle,
} = props;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.mainTitle}>{mainTitle}</Text>
</View>
</View>
);
};
LandingHeader.defaultProps = {
mainTitle: '',
};
LandingHeader.propTypes = {
mainTitle: PropTypes.string,
valueTitle: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
display: 'flex',
},
header: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
mainTitle: {
fontSize: 35,
marginTop: 150,
color: '#fff'
},
});
export default LandingHeader;
src/headers/LoginHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import colors from '../config/colors';
import { StyleSheet, View, Text } from 'react-native';
const LoginHeader = props => {
const {
headerTitle,
} = props;
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>{headerTitle}</Text>
</View>
);
};
LoginHeader.defaultProps = {
headerTitle: '',
};
LoginHeader.propTypes = {
headerTitle: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
backgroundColor: colors.secondary,
flex: 1,
padding: 0,
},
header: {
flexDirection: 'column',
paddingLeft: 20,
height: 200,
justifyContent: 'center',
backgroundColor: '#3083FF',
},
headerTitle: {
fontSize: 28,
fontWeight: 'normal',
color: '#fff'
},
});
export default LoginHeader;
\ No newline at end of file
src/headers/MenuHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import Button from '../buttons/Button'
import Icon from '../icons/Icon';
import { StyleSheet, View, Text, Image, } from 'react-native';
const MenuHeader = props => {
const {
mainTitle,
subTitle,
image,
imageSize,
} = props;
return (
<View>
<View style={styles.header}>
<Image
style={[MenuHeader.defaultProps.imageSize, imageSize && imageSize]}
source={image}
/>
<View style={{flexDirection: 'column', margin: 20}}>
<Text style={styles.mainTitle}>{mainTitle}</Text>
<Text style={styles.subTitle}>{subTitle}</Text>
</View>
</View>
<View style={styles.navButtons}>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='bar-chart'
size={18}
/><Text style={styles.textSocial}>DASHBOARD</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='bell-o'
size={18}
/><Text style={styles.textSocial}>NOTIFICATION</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='pie-chart'
size={18}
/><Text style={styles.textSocial}>BUDGET</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='calendar-o'
size={18}
/><Text style={styles.textSocial}>SCHEDULED PAYMENT</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='user-o'
size={18}
/><Text style={styles.textSocial}>ACCOUNTS</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='cog'
size={18}
/><Text style={styles.textSocial}>SETTINGS</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='sign-out'
size={18}
/><Text style={styles.textSocial}>SIGN OUT</Text></View>}
/>
</View>
</View>
);
};
MenuHeader.defaultProps = {
mainTitle: '',
subTitle: '',
image: require('../images/facebook.png'),
imageSize: {width: 48, height: 48}
};
MenuHeader.propTypes = {
mainTitle: PropTypes.string,
subTitle: PropTypes.string,
valueTitle: PropTypes.string,
};
const styles = StyleSheet.create({
header: {
height: 80,
flexDirection: 'row',
alignItems: 'center',
marginLeft: 30,
marginTop: 60,
},
mainTitle: {
fontSize: 16,
color: '#fff',
fontWeight: '600'
},
subTitle: {
fontSize: 12,
color: '#fff',
fontWeight: '500'
},
navButtons: {
flexDirection: 'column',
},
buttonStyle: {
flexDirection: 'row',
height: 20,
width: 300,
alignItems: 'center'
},
button: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingTop: 20,
paddingBottom: 12,
width: 300,
height: 55,
marginTop: 20,
},
textSocial: {
color: '#fff',
fontWeight: '600',
fontSize: 14,
paddingLeft: 20
},
});
export default MenuHeader;
src/headers/WalletHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../icons/Icon';
import { StyleSheet, View, Text, Image, } from 'react-native';
const WalletHeader = props => {
const {
curentBalance,
income,
expenses,
} = props;
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>Current Balance</Text>
<Text style={styles.headerSubtitle}>{curentBalance}</Text>
<View style={styles.balance}>
<View style={styles.balanceValue}>
<Icon
color='#78AEF9'
height= {26}
width= {26}
name='plus'
size={12}
style={styles.icon1} />
<View style={styles.balanceAmount}>
<Text style={styles.balanceTitle}>Income</Text>
<Text style={styles.balanceSubtitle}>{income}</Text>
</View>
</View>
<View style={styles.balanceValue}>
<Icon
color='#78AEF9'
height= {26}
width= {26}
name='minus'
size={12}
style={styles.icon1} />
<View style={styles.balanceAmount}>
<Text style={styles.balanceTitle}>Expenses</Text>
<Text style={styles.balanceSubtitle}>{expenses}</Text>
</View>
</View>
</View>
</View>
);
};
WalletHeader.defaultProps = {
curentBalance: '',
income: '',
expenses: '',
};
WalletHeader.propTypes = {
curentBalance: PropTypes.string,
income: PropTypes.string,
expenses: PropTypes.string,
};
const styles = StyleSheet.create({
header: {
flexDirection: 'column',
backgroundColor: '#78AEF9',
margin: 20,
borderRadius: 10,
padding: 20,
marginBottom: 30,
shadowColor: '#78AEF9',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.5,
shadowRadius: 15,
},
balance: {
flexDirection: 'row',
height: 40,
},
balanceValue: {
flexDirection: 'row',
flex: 1,
},
balanceAmount: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTitle: {
color: '#fff',
fontSize: 14,
fontWeight: 'normal',
},
headerSubtitle: {
color: '#fff',
fontSize: 32,
fontWeight: '300',
marginTop: 10,
marginBottom: 20,
},
balanceTitle: {
color: '#fff',
fontSize: 11,
fontWeight: 'normal',
opacity: 0.8,
},
balanceSubtitle: {
color: '#fff',
fontSize: 14,
fontWeight: 'normal',
},
icon1: {
backgroundColor: 'rgba(255,255,255,0.24)',
borderRadius: 22,
width: 25,
height: 25,
alignItems: 'center',
justifyContent: 'center',
margin: 8,
},
});
export default WalletHeader;
src/helpers/normalizeText.js 0 → 100644
View file @ 1ece3286
//
// Method to normalize size of fonts across devices
//
// Some code taken from https://jsfiddle.net/97ty7yjk/ &
// https://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus
//
// author: @xiaoneng
// date: 14/10/2016
// version: 03
//
const React = require('react-native'); // eslint-disable-line no-undef
const { PixelRatio, Dimensions } = React;
const pixelRatio = PixelRatio.get();
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
// -- Testing Only --
// const fontScale = PixelRatio.getFontScale();
// const layoutSize = PixelRatio.getPixelSizeForLayoutSize(14);
// console.log('normalizeText getPR ->', pixelRatio);
// console.log('normalizeText getFS ->', fontScale);
// console.log('normalizeText getDH ->', deviceHeight);
// console.log('normalizeText getDW ->', deviceWidth);
// console.log('normalizeText getPSFLS ->', layoutSize);
const normalize = size => {
if (pixelRatio === 2) {
// iphone 5s and older Androids
if (deviceWidth < 360) {
return size * 0.95;
}
// iphone 5
if (deviceHeight < 667) {
return size;
// iphone 6-6s
} else if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.15;
}
// older phablets
return size * 1.25;
}
if (pixelRatio === 3) {
// catch Android font scaling on small machines
// where pixel ratio / font scale ratio => 3:3
if (deviceWidth <= 360) {
return size;
}
// Catch other weird android width sizings
if (deviceHeight < 667) {
return size * 1.15;
// catch in-between size Androids and scale font up
// a tad but not too much
}
if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.2;
}
// catch larger devices
// ie iphone 6s plus / 7 plus / mi note 等等
return size * 1.27;
}
if (pixelRatio === 3.5) {
// catch Android font scaling on small machines
// where pixel ratio / font scale ratio => 3:3
if (deviceWidth <= 360) {
return size;
// Catch other smaller android height sizings
}
if (deviceHeight < 667) {
return size * 1.20;
// catch in-between size Androids and scale font up
// a tad but not too much
}
if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.25;
}
// catch larger phablet devices
return size * 1.40;
}
// if older device ie pixelRatio !== 2 || 3 || 3.5
return size;
};
module.exports = normalize; // eslint-disable-line no-undef
src/icons/Icon.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
Platform,
TouchableHighlight,
View,
StyleSheet,
Text as NativeText,
} from 'react-native';
import iconSet from 'react-native-vector-icons/FontAwesome';
import ViewPropTypes from '../config/ViewPropTypes';
const Icon = props => {
const {
name,
size,
color,
iconStyle,
component,
underlayColor,
reverse,
raised,
containerStyle,
reverseColor,
onPress,
...attributes
} = props;
let Component = View;
if (onPress) {
Component = TouchableHighlight;
}
if (component) {
Component = component;
}
let Icon = iconSet;
return (
<Component
underlayColor={reverse ? color : underlayColor || color}
style={[
(reverse || raised) && styles.button,
(reverse || raised) && {
borderRadius: size + 4,
height: size * 2 + 4,
width: size * 2 + 4,
},
raised && styles.raised,
{
backgroundColor: reverse ? color : raised ? 'white' : 'transparent',
alignItems: 'center',
justifyContent: 'center',
},
containerStyle && containerStyle,
]}
onPress={onPress}
{...attributes}
>
<Icon
style={[{ backgroundColor: 'transparent' }, iconStyle && iconStyle]}
size={size}
name={name}
color={reverse ? reverseColor : color}
/>
</Component>
);
};
Icon.propTypes = {
name: PropTypes.string,
size: PropTypes.number,
color: PropTypes.string,
component: PropTypes.func,
underlayColor: PropTypes.string,
reverse: PropTypes.bool,
raised: PropTypes.bool,
containerStyle: ViewPropTypes.style,
iconStyle: NativeText.propTypes.style,
onPress: PropTypes.func,
reverseColor: PropTypes.string,
};
Icon.defaultProps = {
underlayColor: 'white',
reverse: false,
raised: false,
size: 24,
color: 'black',
reverseColor: 'white',
};
const styles = StyleSheet.create({
button: {
margin: 7,
},
raised: {
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
},
android: {
elevation: 2,
},
}),
},
});
export default Icon;
src/index.js 0 → 100755
View file @ 1ece3286
// Core
import Button from './buttons/Button';
import CalendarItem from './calendar/CalendarItem';
import Card from './card/Card';
import GainLine from './charts/GainLine';
import CheckBox from './checkbox/Checkbox';
import BackgroundImage from './config/BackgroundImage';
import colors from './config/colors';
import fonts from './config/fonts';
import ViewPropTypes from './config/ViewPropTypes';
import Divider from './divider/Divider';
import FormInput from './form/FormInput';
import FormLabel from './form/FormLabel';
import FormLogin from './form/FormLogin';
import FormRow from './form/FormRow';
import FormSearch from './form/FormSearch';
import CategoriesHeader from './headers/CategoriesHeader';
import LandingHeader from './headers/LandingHeader';
import LoginHeader from './headers/LoginHeader';
import MenuHeader from './headers/MenuHeader';
import WalletHeader from './headers/WalletHeader';
import Icon from './icons/Icon';
import List from './list/List';
import ListItem from './list/ListItem';
import ListItemAction from './list/ListItemAction';
import DefaultMarker from './slider/DefaultMarker';
import MultiSlider from './slider/MultiSlider';
import Slider from './slider/Slider';
import TabNavigator from './tabs/TabNavigator'
import Text from './text/Text';
export {
Button,
CalendarItem,
Card,
GainLine,
CheckBox,
BackgroundImage,
colors,
fonts,
ViewPropTypes,
Divider,
FormInput,
FormRow,
FormLabel,
FormLogin,
FormSearch,
CategoriesHeader,
LandingHeader,
LoginHeader,
MenuHeader,
WalletHeader,
Icon,
List,
ListItem,
ListItemAction,
TabNavigator,
Text,
Slider,
MultiSlider,
DefaultMarker
};
src/list/List.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
const List = props => {
const { children, containerStyle, ...attributes } = props;
return (
<View
style={[styles.listContainer, containerStyle && containerStyle]}
{...attributes}
>
{children}
</View>
);
};
List.propTypes = {
children: PropTypes.any,
containerStyle: ViewPropTypes.style,
};
const styles = StyleSheet.create({
listContainer: {
marginTop: 0,
borderTopWidth: 1,
borderColor: colors.white,
backgroundColor: colors.white,
},
});
export default List;
src/list/ListItem.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/list/ListItemAction.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/save 0 → 100644
View file @ 1ece3286
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
// import { Button } from 'react-pocket';
import Button from './src/buttons/Button'
export default class App extends React.Component {
render() {
return (
<ScrollView>
<View style={styles.hero}>
<Text style={styles.heading}>Button</Text>
</View>
<Button
buttonStyle={styles.button}
title="Button"
/>
<Button
buttonStyle={styles.button}
title="Button"
secondary
/>
<Button
buttonStyle={styles.button}
title="Button"
secondary2
/>
<Button
buttonStyle={styles.button}
title="Button"
secondary3
/>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
heading: {
color: 'white',
marginTop: 10,
fontSize: 22,
},
hero: {
justifyContent: 'center',
alignItems: 'center',
padding: 40,
backgroundColor: '#fff',
},
titleContainer: {},
button: {
marginTop: 15,
},
title: {
textAlign: 'center',
color: '#5e6977'
},
socialRow: {
flexDirection: 'row',
justifyContent: 'space-around',
},
});
src/slider/DefaultMarker.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Platform, TouchableHighlight } from 'react-native';
const ViewPropTypes = require('react-native').ViewPropTypes || View.propTypes;
export default class DefaultMarker extends React.Component {
static propTypes = {
pressed: PropTypes.bool,
pressedMarkerStyle: ViewPropTypes.style,
markerStyle: ViewPropTypes.style,
enabled: PropTypes.bool,
valuePrefix: PropTypes.string,
valueSuffix: PropTypes.string,
};
render() {
return (
<TouchableHighlight>
<View
style={this.props.enabled ? [
styles.markerStyle,
this.props.markerStyle,
this.props.pressed && styles.pressedMarkerStyle,
this.props.pressed && this.props.pressedMarkerStyle,
] : [styles.markerStyle, styles.disabled]}
/>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
markerStyle: {
...Platform.select({
ios: {
height: 20,
width: 20,
borderRadius: 10,
backgroundColor: '#FFF',
shadowColor: 'rgba(0,0,0,0.06)',
shadowOffset: {
width: 1,
height: 2
},
shadowRadius: 1,
shadowOpacity: 1,
},
android: {
height: 20,
width: 20,
borderRadius: 10,
backgroundColor: '#FFF',
},
}),
},
pressedMarkerStyle: {
...Platform.select({
ios: {},
android: {
height: 20,
width: 20,
borderRadius: 20,
},
}),
},
disabled: {
opacity: 0.4,
},
});
\ No newline at end of file
src/slider/MultiSlider.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/slider/Slider.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/slider/converters.js 0 → 100644
View file @ 1ece3286
'use strict';
export function valueToPosition(value, valuesArray, sliderLength) {
var arrLength;
var index = valuesArray.indexOf(value);
if (index === -1) {
//console.log('Invalid value, array does not contain: ', value);
return null;
} else {
arrLength = valuesArray.length - 1;
return sliderLength * index / arrLength;
}
}
export function positionToValue(position, valuesArray, sliderLength) {
var arrLength;
var index;
if (position < 0 || sliderLength < position) {
//console.log('invalid position: ', position);
return null;
} else {
arrLength = valuesArray.length - 1;
index = arrLength * position / sliderLength;
return valuesArray[Math.round(index)];
}
}
export function createArray(start, end, step) {
var i;
var length;
var direction = start - end > 0 ? -1 : 1;
var result = [];
if (!step) {
//console.log('invalid step: ', step);
return result;
} else {
length = Math.abs((start - end) / step) + 1;
for (i = 0; i < length; i++) {
result.push(start + i * Math.abs(step) * direction);
}
return result;
}
}
\ No newline at end of file
src/tabs/Badge.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/tabs/Layout.js 0 → 100644
View file @ 1ece3286
'use strict';
import { PixelRatio } from 'react-native';
export default {
pixel: 1 / PixelRatio.get(),
tabBarHeight: 49,
};
\ No newline at end of file
src/tabs/StaticContainer.js 0 → 100644
View file @ 1ece3286
'use strict';
import React from 'react';
import PropTypes from 'prop-types';
export default class StaticContainer extends React.Component {
static propTypes = {
shouldUpdate: PropTypes.bool,
};
// noinspection JSAnnotator
shouldComponentUpdate(nextProps: Object): boolean {
return !!nextProps.shouldUpdate;
}
render() {
let { children } = this.props;
return children ? React.Children.only(children) : null;
}
}
\ No newline at end of file
src/tabs/Tab.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/tabs/TabBar.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/tabs/TabNavigator.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/tabs/TabNavigatorItem.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
src/text/Text.js 0 → 100644
View file @ 1ece3286
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment