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.

Sign up for GitHub

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

issue #104 resolved #116

Merged
merged 12 commits into from
Sep 11, 2019
Merged

issue #104 resolved #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d118e95
issue #104 resolved
Aug 15, 2019
a36cbaa
PR #116, requested changes
Aug 21, 2019
7abeeaa
Update Checkbox.js
shubhamkakkar Aug 27, 2019
7f2d736
Update Block.js
shubhamkakkar Aug 27, 2019
cd153a5
Update Button.js
shubhamkakkar Aug 27, 2019
1f02587
Update Card.js
shubhamkakkar Aug 27, 2019
83194ac
Update Icon.js
shubhamkakkar Aug 27, 2019
ac42c0c
Update Input.js
shubhamkakkar Aug 27, 2019
a166c2e
Update NavBar.js
shubhamkakkar Aug 27, 2019
1dd3152
setchecked -> setChecked
shubhamkakkar Aug 30, 2019
fb6ab6c
Update Icon.js
shubhamkakkar Aug 30, 2019
548ee7a
Merge branch 'Alpha-1' into master-shubhamKakkar-issue#104
palingheorghe Sep 11, 2019
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
110 changes: 55 additions & 55 deletions src/Block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
import React, { Component } from 'react';
import React from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import PropTypes from 'prop-types';
import GalioTheme, { withGalio } from './theme';

class Block extends Component {
render() {
const {
row,
flex,
center,
middle,
top,
bottom,
right,
left,
shadow,
space,
fluid,
height,
shadowColor,
card,
width,
safe,
children,
style,
styles,
...props
} = this.props;
function Block({
row,
flex,
center,
middle,
top,
bottom,
right,
left,
shadow,
space,
fluid,
height,
shadowColor,
card,
width,
safe,
children,
style,
styles,
...rest
}) {

const styleBlock = [
styles.block,
row && styles.row,
flex && { flex: flex === true ? 1 : flex },
center && styles.center,
middle && styles.middle,
top && styles.top,
bottom && styles.bottom,
right && styles.right,
left && styles.left,
space && { justifyContent: `space-${space}` },
shadow && styles.shadow,
fluid && styles.fluid,
card && styles.card,
height && { height },
width && { width },
shadowColor && { shadowColor },
style,
];

if (safe) {
return (
<SafeAreaView style={styleBlock} {...props}>
{children}
</SafeAreaView>
);
}
const styleBlock = [
styles.block,
row && styles.row,
flex && { flex: flex === true ? 1 : flex },
center && styles.center,
middle && styles.middle,
top && styles.top,
bottom && styles.bottom,
right && styles.right,
left && styles.left,
space && { justifyContent: `space-${space}` },
shadow && styles.shadow,
fluid && styles.fluid,
card && styles.card,
height && { height },
width && { width },
shadowColor && { shadowColor },
style,
];

if (safe) {
return (
<View {...props} style={styleBlock}>
<SafeAreaView style={styleBlock} {...rest}>
{children}
</View>
</SafeAreaView>
);
}

return (
<View style={styleBlock} {...rest}>
{children}
</View>
);
}

Block.defaultProps = {
Expand Down Expand Up @@ -143,7 +140,10 @@ const styles = theme =>
},
shadow: {
shadowColor: theme.COLORS.BLOCK,
shadowOffset: { width: 0, height: 3 },
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: theme.SIZES.BLOCK_SHADOW_OPACITY,
shadowRadius: theme.SIZES.BLOCK_SHADOW_RADIUS,
elevation: theme.SIZES.ANDROID_ELEVATION,
Expand Down
136 changes: 63 additions & 73 deletions src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,38 @@ import React from 'react';
import { ActivityIndicator, Dimensions, StyleSheet, TouchableOpacity, Text } from 'react-native';
import PropTypes from 'prop-types';
// galio components
import { Icon } from '.';
import { Icon } from './';
import GalioTheme, { withGalio } from './theme';

const { width } = Dimensions.get('window');

class Button extends React.Component {
renderContent = () => {
const {
loading,
loadingSize,
children,
onlyIcon,
icon,
iconFamily,
iconSize,
iconColor,
uppercase,
lowercase,
capitalize,
textStyle,
styles,
theme,
} = this.props;

function Button({
color,
children,
capitalize,
disabled,
iconSize,
icon,
iconFamily,
iconColor,
loading,
loadingSize,
lowercase,
onlyIcon,
opacity,
round,
radius,
style,
size,
shadowless,
shadowColor,
styles,
theme,
textStyle,
uppercase,
...rest
}) {
function renderContent() {
const textStyles = [styles.customText, textStyle];

// workaround for textTransform not supported on Expo SDK 29.0.0 or 30.0.0
Expand All @@ -37,7 +45,9 @@ class Button extends React.Component {

if (uppercase && isString) content = children.toUpperCase();
if (lowercase && isString) content = children.toLowerCase();
if (capitalize && isString) content = `${children.charAt(0).toUpperCase()}${children.slice(1)}`;
if (capitalize && isString) {
content = `${children.charAt(0).toUpperCase()}${children.slice(1)}`;
}

if (onlyIcon) {
content = (
Expand All @@ -52,61 +62,41 @@ class Button extends React.Component {
content = <Text style={textStyles}>{content}</Text>;
}

if (loading) content = <ActivityIndicator size={loadingSize} color={theme.COLORS.WHITE} />;
if (loading) {
content = <ActivityIndicator size={loadingSize} color={theme.COLORS.WHITE} />;
}

return content;
};

render() {
const {
style,
color,
size,
children,
disabled,
round,
border,
radius,
textStyle,
onlyIcon,
iconSize,
opacity,
shadowless,
shadowColor,
styles,
theme,
...rest
} = this.props;

const colorStyle = styles[color];

const buttonStyles = [
styles.defaultButton,
color && colorStyle,
color && !colorStyle && { backgroundColor: color }, // color set & no styles for that color
color === 'transparent' || styles.androidShadow,
color === 'transparent' && !shadowless && { borderWidth: 1, borderColor: theme.COLORS.WHITE },
size === 'large' ? { width: width * 0.9 } : { width: width * 0.5 },
round && { borderRadius: theme.SIZES.BASE * 2 },
onlyIcon && {
width: iconSize * 1.25,
height: iconSize * 2,
borderWidth: 0,
borderRadius: iconSize,
},
radius && { borderRadius: radius },
!shadowless && styles.shadow,
{ shadowColor: shadowColor || theme.COLORS[color.toUpperCase()] },
{ zIndex: 2 },
style,
];

return (
<TouchableOpacity disabled={disabled} activeOpacity={opacity} style={buttonStyles} {...rest}>
{this.renderContent()}
</TouchableOpacity>
);
}

const colorStyle = styles[color];

const buttonStyles = [
styles.defaultButton,
color && colorStyle,
color && !colorStyle && { backgroundColor: color }, // color set & no styles for that color
color === 'transparent' || styles.androidShadow,
color === 'transparent' && !shadowless && { borderWidth: 1, borderColor: theme.COLORS.WHITE },
size === 'large' ? { width: width * 0.9 } : { width: width * 0.5 },
round && { borderRadius: theme.SIZES.BASE * 2 },
onlyIcon && {
width: iconSize * 1.25,
height: iconSize * 2,
borderWidth: 0,
borderRadius: iconSize,
},
radius && { borderRadius: radius },
!shadowless && styles.shadow,
{ shadowColor: shadowColor || theme.COLORS[color.toUpperCase()] },
{ zIndex: 2 },
style,
];

return (
<TouchableOpacity disabled={disabled} activeOpacity={opacity} style={buttonStyles} {...rest}>
{renderContent()}
</TouchableOpacity>
);
}

Button.defaultProps = {
Expand Down
Loading