Skip to content

Commit 621875c

Browse files
32penkinartyorsh
32penkin
authored and
artyorsh
committed
refactor(playground): screen refactor
1 parent 318c038 commit 621875c

37 files changed

+2228
-568
lines changed

‎src/playground/src/app.component.tsx

Lines changed: 233 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,246 @@
11
import React from 'react';
22
import { default as mapping } from '@eva/eva';
33
import { theme } from '@eva/theme-eva';
4-
import { ApplicationProvider } from '@kitten/theme';
5-
import { withNavigation } from './navigation';
6-
import * as Screens from './ui/screen';
4+
import {
5+
ApplicationProvider,
6+
ThemeType,
7+
} from '@kitten/theme';
8+
import {
9+
ThemeContext,
10+
ContextType,
11+
} from './ui/themeContext';
12+
import { Router } from './navigation';
13+
14+
interface State {
15+
currentTheme: 'light' | 'dark';
16+
theme: ThemeType;
17+
}
718

819
export default class App extends React.Component {
920

21+
public state: State = {
22+
currentTheme: 'light',
23+
theme: theme,
24+
};
25+
26+
private toggleTheme = (themeName: 'light' | 'dark'): void => {
27+
let newTheme: ThemeType = null;
28+
if (themeName === 'light') {
29+
newTheme = theme;
30+
} else {
31+
newTheme = darkTheme;
32+
}
33+
this.setState({
34+
currentTheme: themeName,
35+
theme: newTheme,
36+
});
37+
};
38+
1039
public render(): React.ReactNode {
11-
const { Home: RootScreen, ...screens } = Screens;
12-
const Router: React.ComponentClass = withNavigation(RootScreen, screens);
40+
const { currentTheme } = this.state;
41+
const contextValue: ContextType = {
42+
currentTheme: currentTheme,
43+
toggleTheme: this.toggleTheme,
44+
};
1345

1446
return (
15-
<ApplicationProvider
16-
mapping={mapping}
17-
theme={theme}>
18-
<Router/>
19-
</ApplicationProvider>
47+
<ThemeContext.Provider value={contextValue}>
48+
<ApplicationProvider
49+
mapping={mapping}
50+
theme={this.state.theme}>
51+
<Router/>
52+
</ApplicationProvider>
53+
</ThemeContext.Provider>
2054
);
2155
}
2256
}
2357

58+
const darkTheme: ThemeType = {
59+
'color-basic-100': '#FFFFFF',
60+
'color-basic-200': '#F7F8FA',
61+
'color-basic-300': '#EDF0F4',
62+
'color-basic-400': '#DDE1EB',
63+
'color-basic-500': '#C8CEDB',
64+
'color-basic-600': '#A7B0C1',
65+
'color-basic-700': '#657084',
66+
'color-basic-800': '#2E384F',
67+
'color-basic-900': '#232A40',
68+
'color-basic-1000': '#1A1F33',
69+
'color-basic-1100': '#131729',
70+
71+
'color-primary-100': '#F2F6FF',
72+
'color-primary-200': '#D9E4FF',
73+
'color-primary-300': '#A6C1FF',
74+
'color-primary-400': '#598BFF',
75+
'color-primary-500': '#3366FF',
76+
'color-primary-600': '#284DE0',
77+
'color-primary-700': '#2541CC',
78+
'color-primary-800': '#192F9E',
79+
'color-primary-900': '#14236E',
80+
81+
'color-secondary-100': '#F7F2FF',
82+
'color-secondary-200': '#E0D1FF',
83+
'color-secondary-300': '#C5A8FF',
84+
'color-secondary-400': '#A375FF',
85+
'color-secondary-500': '#884DFF',
86+
'color-secondary-600': '#6A39DB',
87+
'color-secondary-700': '#4F28B8',
88+
'color-secondary-800': '#371B94',
89+
'color-secondary-900': '#26117A',
90+
91+
'color-tertiary-100': '#FFDED6',
92+
'color-tertiary-200': '#FFDED6',
93+
'color-tertiary-300': '#FFDED6',
94+
'color-tertiary-400': '#FFDED6',
95+
'color-tertiary-500': '#FFDED6',
96+
'color-tertiary-600': '#FFDED6',
97+
'color-tertiary-700': '#FFDED6',
98+
'color-tertiary-800': '#FFDED6',
99+
'color-tertiary-900': '#FFDED6',
100+
101+
'color-success-100': '#F0FFF5',
102+
'color-success-200': '#CCFCE3',
103+
'color-success-300': '#8CFAC7',
104+
'color-success-400': '#2CE69B',
105+
'color-success-500': '#00D68F',
106+
'color-success-600': '#00B887',
107+
'color-success-700': '#00997A',
108+
'color-success-800': '#007D6C',
109+
'color-success-900': '#004A42',
110+
111+
'color-info-100': '#F2F8FF',
112+
'color-info-200': '#C7E2FF',
113+
'color-info-300': '#94CBFF',
114+
'color-info-400': '#42AAFF',
115+
'color-info-500': '#0095FF',
116+
'color-info-600': '#006FD6',
117+
'color-info-700': '#0057C2',
118+
'color-info-800': '#0041A8',
119+
'color-info-900': '#002885',
120+
121+
'color-warning-100': '#FFFDF2',
122+
'color-warning-200': '#FFF1C2',
123+
'color-warning-300': '#FFE59E',
124+
'color-warning-400': '#FFC94D',
125+
'color-warning-500': '#FFAA00',
126+
'color-warning-600': '#DB8B00',
127+
'color-warning-700': '#B86E00',
128+
'color-warning-800': '#945400',
129+
'color-warning-900': '#703C00',
130+
131+
'color-danger-100': '#FFF2F2',
132+
'color-danger-200': '#FFD6D9',
133+
'color-danger-300': '#FFA8B4',
134+
'color-danger-400': '#FF708D',
135+
'color-danger-500': '#FF3D71',
136+
'color-danger-600': '#DB2C66',
137+
'color-danger-700': '#B81D5B',
138+
'color-danger-800': '#94124E',
139+
'color-danger-900': '#700940',
140+
141+
'background-color-default-1': '$color-basic-800',
142+
'background-color-default-2': '$color-basic-900',
143+
'background-color-default-3': '$color-basic-1000',
144+
'background-color-default-4': '$color-basic-1100',
145+
146+
'background-color-alternative-1': '$color-basic-100',
147+
'background-color-alternative-2': '$color-basic-200',
148+
'background-color-alternative-3': '$color-basic-300',
149+
'background-color-alternative-4': '$color-basic-400',
150+
151+
'background-color-primary-1': '$color-primary-500',
152+
'background-color-primary-2': '$color-primary-600',
153+
'background-color-primary-3': '$color-primary-700',
154+
'background-color-primary-4': '$color-primary-800',
155+
156+
'border-color-default-1': '$color-basic-800',
157+
'border-color-default-2': '$color-basic-900',
158+
'border-color-default-3': '$color-basic-1000',
159+
'border-color-default-4': '$color-basic-1100',
160+
'border-color-default-5': '$color-basic-1100',
161+
162+
'border-color-alternative-1': '$color-basic-100',
163+
'border-color-alternative-2': '$color-basic-200',
164+
'border-color-alternative-3': '$color-basic-3000',
165+
'border-color-alternative-4': '$color-basic-400',
166+
'border-color-alternative-5': '$color-basic-500',
167+
168+
'border-color-primary-1': '$color-primary-500',
169+
'border-color-primary-2': '$color-primary-600',
170+
'border-color-primary-3': '$color-primary-700',
171+
'border-color-primary-4': '$color-primary-800',
172+
'border-color-primary-5': '$color-primary-900',
173+
174+
'text-color-default': '$color-basic-100',
175+
'text-color-alternative': '$color-basic-1000',
176+
'text-color-control': '$color-basic-100',
177+
'text-color-disabled': '$color-basic-700',
178+
'text-color-hint': '$color-basic-600',
179+
180+
'text-color-primary': '$color-primary-default',
181+
'text-color-primary-active': '$color-primary-active',
182+
'text-color-primary-disabled': '$color-primary-disabled',
183+
184+
'text-color-success': '$color-success-default',
185+
'text-color-success-active': '$color-success-active',
186+
'text-color-success-disabled': '$color-success-disabled',
187+
188+
'text-color-info': '$color-info-default',
189+
'text-color-info-active': '$color-info-active',
190+
'text-color-info-disabled': '$color-info-disabled',
191+
192+
'text-color-warning': '$color-warning-default',
193+
'text-color-warning-active': '$color-warning-active',
194+
'text-color-warning-disabled': '$color-warning-disabled',
195+
196+
'text-color-danger': '$color-danger-default',
197+
'text-color-danger-active': '$color-danger-active',
198+
'text-color-danger-disabled': '$color-danger-disabled',
199+
200+
'icon-color-default': '$color-basic-500',
201+
'icon-color-active': '$color-basic-400',
202+
'icon-color-control': '$color-basic-100',
203+
'icon-color-hint': '$color-basic-700',
204+
'icon-color-disabled': '$color-basic-800',
205+
206+
'outline-color': '$color-basic-700',
207+
208+
'color-basic-default': '$color-basic-700',
209+
'color-basic-active': '$color-basic-900',
210+
'color-basic-focus': '$color-basic-1000',
211+
'color-basic-disabled': '$color-basic-600',
212+
213+
'color-primary-default': '$color-primary-500',
214+
'color-primary-active': '$color-primary-600',
215+
'color-primary-focus': '$color-primary-700',
216+
'color-primary-disabled': '$color-primary-200',
217+
218+
'color-success-default': '$color-success-500',
219+
'color-success-active': '$color-success-600',
220+
'color-success-focus': '$color-success-700',
221+
'color-success-disabled': '$color-success-200',
222+
223+
'color-info-default': '$color-info-500',
224+
'color-info-active': '$color-info-600',
225+
'color-info-focus': '$color-info-700',
226+
'color-info-disabled': '$color-info-300',
227+
228+
'color-warning-default': '$color-warning-500',
229+
'color-warning-active': '$color-warning-600',
230+
'color-warning-focus': '$color-warning-700',
231+
'color-warning-disabled': '$color-warning-300',
232+
233+
'color-danger-default': '$color-danger-500',
234+
'color-danger-active': '$color-danger-600',
235+
'color-danger-focus': '$color-danger-700',
236+
'color-danger-disabled': '$color-danger-300',
237+
238+
'color-alternative': '$color-basic-100',
239+
240+
'color-white': '#FFFFFF',
241+
'color-black': '#0D1C2E',
242+
243+
'font-primary-color': '#0D1C2E',
244+
'font-primary-inverse-color': '#FFFFFF',
245+
};
246+

‎src/playground/src/navigation/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export {
2-
withNavigation,
3-
Props as NavigatorProps,
42
RouteType,
3+
Router,
4+
routes,
55
} from './navigation.component';

0 commit comments

Comments
 (0)