Skip to content

Commit 318c038

Browse files
32penkin32penkin
authored
fix(theme): theme change fix (#399)
1 parent cbe5056 commit 318c038

File tree

10 files changed

+6012
-4583
lines changed

10 files changed

+6012
-4583
lines changed

‎package-lock.json

Lines changed: 5878 additions & 4476 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/framework/theme/application/application.spec.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React from 'react';
22
import {
3+
View,
4+
Button,
5+
} from 'react-native';
6+
import {
7+
fireEvent,
38
render,
49
RenderAPI,
510
shallow,
@@ -12,10 +17,39 @@ import {
1217
import {
1318
mapping,
1419
theme,
20+
themeInverse,
1521
} from '../support/tests';
22+
import { ThemeType } from '@kitten/theme';
1623

1724
describe('@app: application wrapper check', () => {
1825

26+
interface TestAppState {
27+
theme: ThemeType;
28+
}
29+
30+
class TestApp extends React.Component<any, TestAppState> {
31+
32+
public state: TestAppState = {
33+
theme: theme,
34+
};
35+
36+
private onSwitchTheme = (): void => {
37+
this.setState({ theme: themeInverse });
38+
};
39+
40+
public render(): React.ReactNode {
41+
return (
42+
<View>
43+
<Button title='Switch Theme' onPress={this.onSwitchTheme}/>
44+
<Mock
45+
mapping={mapping}
46+
theme={this.state.theme}
47+
/>
48+
</View>
49+
);
50+
}
51+
}
52+
1953
const Mock = (props?: ApplicationProviderProps): React.ReactElement<ApplicationProviderProps> => {
2054
return (
2155
<ApplicationProvider {...props} />
@@ -49,4 +83,18 @@ describe('@app: application wrapper check', () => {
4983
expect(state.styles).toMatchSnapshot();
5084
});
5185

86+
87+
it('* theme switching checks', () => {
88+
const application: RenderAPI = render(<TestApp/>);
89+
fireEvent(application.getByType(Button), 'press');
90+
const { output } = shallow(application.getByType(ApplicationProvider));
91+
92+
const stringify = (obj: any): string => {
93+
return JSON.stringify(obj);
94+
};
95+
96+
// @ts-ignore just for theme prop changing
97+
expect(stringify(output.props.theme)).toBe(JSON.stringify(themeInverse));
98+
});
99+
52100
});

‎src/framework/theme/application/applicationProvider.component.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export type ApplicationProviderProps = ComponentProps & ThemeProviderProps;
2626

2727
interface State {
2828
styles: ThemeStyleType;
29-
theme: ThemeType;
3029
}
3130

3231
/**
@@ -85,10 +84,7 @@ export class ApplicationProvider extends React.Component<ApplicationProviderProp
8584

8685
const styles: ThemeStyleType = this.createStyles(mapping, customMapping);
8786

88-
this.state = {
89-
styles,
90-
theme,
91-
};
87+
this.state = { styles };
9288
}
9389

9490
private createStyles = (mapping: SchemaType, custom: CustomSchemaType): ThemeStyleType => {
@@ -99,7 +95,9 @@ export class ApplicationProvider extends React.Component<ApplicationProviderProp
9995

10096
public render(): React.ReactNode {
10197
return (
102-
<StyleProvider {...this.state}>
98+
<StyleProvider
99+
theme={this.props.theme}
100+
styles={this.state.styles}>
103101
<ModalPanel>
104102
{this.props.children}
105103
</ModalPanel>

‎src/framework/theme/modal/modalPanel.spec.tsx.snap

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`@modal panel checks * close modal checking inner 1`] = `
4-
<Component
4+
<View
55
style={
66
Object {
77
"flex": 1,
88
}
99
}
1010
>
11-
<Component>
12-
<Component>
11+
<View>
12+
<Text>
1313
Modal Panel Test
14-
</Component>
15-
</Component>
14+
</Text>
15+
</View>
1616
<Button
1717
onPress={[Function]}
1818
testID="@modal/show"
@@ -23,22 +23,22 @@ exports[`@modal panel checks * close modal checking inner 1`] = `
2323
testID="@modal/hide-outer"
2424
title="Hide Modal"
2525
/>
26-
</Component>
26+
</View>
2727
`;
2828

2929
exports[`@modal panel checks * close modal checking outer 1`] = `
30-
<Component
30+
<View
3131
style={
3232
Object {
3333
"flex": 1,
3434
}
3535
}
3636
>
37-
<Component>
38-
<Component>
37+
<View>
38+
<Text>
3939
Modal Panel Test
40-
</Component>
41-
</Component>
40+
</Text>
41+
</View>
4242
<Button
4343
onPress={[Function]}
4444
testID="@modal/show"
@@ -49,22 +49,22 @@ exports[`@modal panel checks * close modal checking outer 1`] = `
4949
testID="@modal/hide-outer"
5050
title="Hide Modal"
5151
/>
52-
</Component>
52+
</View>
5353
`;
5454

5555
exports[`@modal panel checks * modal panel render with props / children checking 1`] = `
56-
<Component
56+
<View
5757
style={
5858
Object {
5959
"flex": 1,
6060
}
6161
}
6262
>
63-
<Component>
64-
<Component>
63+
<View>
64+
<Text>
6565
Modal Panel Test
66-
</Component>
67-
</Component>
66+
</Text>
67+
</View>
6868
<Button
6969
onPress={[Function]}
7070
testID="@modal/show"
@@ -75,22 +75,22 @@ exports[`@modal panel checks * modal panel render with props / children checking
7575
testID="@modal/hide-outer"
7676
title="Hide Modal"
7777
/>
78-
</Component>
78+
</View>
7979
`;
8080

8181
exports[`@modal panel checks * modal panel renders properly 1`] = `
82-
<Component
82+
<View
8383
style={
8484
Object {
8585
"flex": 1,
8686
}
8787
}
8888
>
89-
<Component>
90-
<Component>
89+
<View>
90+
<Text>
9191
Modal Panel Test
92-
</Component>
93-
</Component>
92+
</Text>
93+
</View>
9494
<Button
9595
onPress={[Function]}
9696
testID="@modal/show"
@@ -101,7 +101,7 @@ exports[`@modal panel checks * modal panel renders properly 1`] = `
101101
testID="@modal/hide-outer"
102102
title="Hide Modal"
103103
/>
104-
</Component>
104+
</View>
105105
`;
106106

107107
exports[`@modal-service: service checks * unexpected branch cover 1`] = `

‎src/framework/theme/style/style.spec.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ Object {
133133
"selectBorderRadius": 12,
134134
"selectHeight": 24,
135135
"selectWidth": 24,
136-
"textColor": "#000000",
136+
"textColor": "#FFFFFF",
137137
"textFontSize": 16,
138138
"textFontWeight": "500",
139139
"textMarginLeft": 12,

‎src/framework/theme/support/tests/themeInverse.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"gray-dark": "#8992A3",
88
"gray-highlight": "#EDF0F5",
99
"pink-primary": "#FF3D71",
10-
"text-primary": "#000000",
11-
"text-primary-inverse": "#ffffff",
10+
"text-primary": "#FFFFFF",
11+
"text-primary-inverse": "#000000",
1212

1313
"gray-100": "#f7f8fa",
1414
"gray-200": "#edf0f5",

0 commit comments

Comments
 (0)