Skip to content
GitLab
Commit 1226e4c4 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Merge branch 'test-stylesheet' into 'master' 

Change custom StyleSheet a class and add a test

See merge request !145
parents 7bb91475 ad2e633f
Hide whitespace changes
Inline Side-by-side
__tests__/style.spec.js 0 → 100644
View file @ 1226e4c4
import { StyleSheet as ReactStyleSheet, Platform } from 'react-native';
import { StyleSheet } from '../app/style';
describe('StyleSheet', () => {
it('should create a react stylesheet', () => {
expect(StyleSheet.create({
test: {
paddingBottom: 10,
paddingTop: 10,
},
})).toEqual(ReactStyleSheet.create({
test: {
paddingBottom: 10,
paddingTop: 10,
},
}));
});
it('should use the ios key for iOS styles', () => {
Platform.OS = 'ios';
expect(StyleSheet.create({
test: {
android: {
paddingTop: 20,
},
ios: {
paddingTop: 15,
},
paddingBottom: 10,
paddingTop: 10,
},
})).toEqual(ReactStyleSheet.create({
test: {
paddingBottom: 10,
paddingTop: 15,
},
}));
});
it('should use the android key for Android styles', () => {
Platform.OS = 'android';
Platform.select = ({ android }) => android;
expect(StyleSheet.create({
test: {
android: {
paddingTop: 20,
},
ios: {
paddingTop: 15,
},
paddingBottom: 10,
paddingTop: 10,
},
})).toEqual(ReactStyleSheet.create({
test: {
paddingBottom: 10,
paddingTop: 20,
},
}));
});
});
app/components/style/calendar.js
View file @ 1226e4c4
import { Dimensions } from 'react-native';
import { TOTAL_BAR_HEIGHT } from './standardHeader';
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
content: {
flex: 1,
backgroundColor: colors.background,
......
app/components/style/errorScreen.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
content: {
flex: 1,
alignItems: 'center',
......
app/components/style/event.js
View file @ 1226e4c4
import { Dimensions } from 'react-native';
import { create, colors } from '../../style';
import { StyleSheet, colors } from '../../style';
const windowWidth = Dimensions.get('window').width;
export const memberSize = (windowWidth - 64) / 3;
const styles = create({
const styles = StyleSheet.create({
eventView: {
padding: 16,
backgroundColor: colors.background,
......
app/components/style/eventCard.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
button: {
marginTop: 8,
marginBottom: 8,
......
app/components/style/eventDetailCard.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
card: {
backgroundColor: colors.white,
borderRadius: 4,
......
app/components/style/login.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
loginText: {
color: colors.white,
fontWeight: 'bold',
......
app/components/style/navigator.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
import { STATUSBAR_HEIGHT } from './standardHeader';
const styles = create({
const styles = StyleSheet.create({
flex: {
flex: 1,
},
......
app/components/style/pizza.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
content: {
flex: 1,
padding: 8,
......
app/components/style/profile.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
import { TOTAL_BAR_HEIGHT, STATUSBAR_HEIGHT } from './standardHeader';
export const HEADER_MIN_HEIGHT = TOTAL_BAR_HEIGHT;
export const HEADER_MAX_HEIGHT = 200 + STATUSBAR_HEIGHT;
export const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
const styles = create({
const styles = StyleSheet.create({
container: {
backgroundColor: colors.background,
flex: 1,
......
app/components/style/sidebar.js
View file @ 1226e4c4
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
import { STATUSBAR_HEIGHT } from './standardHeader';
const styles = create({
const styles = StyleSheet.create({
sidebar: {
backgroundColor: colors.white,
flex: 1,
......
app/components/style/standardHeader.js
View file @ 1226e4c4
import { Platform, StatusBar } from 'react-native';
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
export const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
export const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
export const TOTAL_BAR_HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
const styles = create({
const styles = StyleSheet.create({
statusBar: {
height: STATUSBAR_HEIGHT,
backgroundColor: colors.magenta,
......
app/components/style/welcome.js
View file @ 1226e4c4
import { Dimensions } from 'react-native';
import { TOTAL_BAR_HEIGHT } from './standardHeader';
import { colors, create } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = create({
const styles = StyleSheet.create({
content: {
flex: 1,
backgroundColor: colors.background,
......
app/style.js
View file @ 1226e4c4
import { StyleSheet, Platform } from 'react-native';
import { StyleSheet as ReactStyleSheet, Platform } from 'react-native';
export const colors = {
magenta: '#E62272',
......@@ -20,38 +20,16 @@ export const colors = {
darkRed: '#d15348',
};
export function create(styles) {
const platformStyles = {};
Object.keys(styles).forEach((name) => {
// eslint-disable-next-line prefer-const
let { ios, android, ...style } = { ...styles[name] };
if (ios && Platform.OS === 'ios') {
style = { ...style, ...ios };
}
if (android && Platform.OS === 'android') {
style = { ...style, ...android };
}
if (name === 'ios' && Platform.OS === 'ios') {
Object.keys(style).forEach((styleName) => {
if (platformStyles[styleName]) {
platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
}
});
}
if (name === 'android' && Platform.OS === 'android') {
Object.keys(style).forEach((styleName) => {
if (platformStyles[styleName]) {
platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
}
});
}
if (name !== 'ios' && name !== 'android') {
export class StyleSheet {
static create(styles) {
const platformStyles = {};
Object.keys(styles).forEach((name) => {
// eslint-disable-next-line prefer-const
let { ios, android, ...style } = { ...styles[name] };
style = { ...style, ...Platform.select({ android, ios }) };
platformStyles[name] = style;
}
});
});
return StyleSheet.create(platformStyles);
return ReactStyleSheet.create(platformStyles);
}
}
Supports Markdown
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