11import * as React from "react" ;
22import * as PropTypes from "prop-types" ;
33
4+ import { handleScrollReveal } from "./handleScrollReveal" ;
45import StyleManager from "../styles/StyleManager" ;
56import darkTheme from "../styles/darkTheme" ;
67import getTheme , { Theme as ThemeType } from "../styles/getTheme" ;
@@ -16,10 +17,6 @@ export interface DataProps {
1617 * Set theme object. [ThemeType](https://github.com/myxvisual/react-uwp/blob/master/src/index.d.ts#L43), Usually use [getTheme](https://github.com/myxvisual/react-uwp/blob/master/src/styles/getTheme.ts#L28) function to get it.
1718 */
1819 theme ?: ThemeType ;
19- /**
20- * For simple development, autoSaveTheme can read and save theme to `localStorage`. use global context `theme.saveTheme` method to save.
21- */
22- autoSaveTheme ?: boolean ;
2320 /**
2421 * set theme will update callback.
2522 */
@@ -44,7 +41,6 @@ export interface ThemeState {
4441 currTheme ?: ThemeType ;
4542}
4643
47- const customLocalStorageName = "__REACT_UWP__" ;
4844const baseClassName = "react-uwp-theme" ;
4945const themeCallback : ( theme ?: ThemeType ) => void = ( ) => { } ;
5046
@@ -67,94 +63,42 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
6763 backgroundEl : RenderToBody ;
6864
6965 getDefaultTheme : ( ) => ThemeType = ( ) => {
70- let { theme, autoSaveTheme } = this . props ;
71-
72- if ( ! IS_NODE_ENV && autoSaveTheme && ! theme ) {
73- theme = this . getLocalStorageTheme ( ) ;
74- } else {
75- theme = theme || darkTheme ;
76- }
77-
78- return theme ;
79- }
80-
81- getLocalStorageTheme : ( ) => ThemeType = ( ) => {
82- let themeConfig : any = { } ;
8366 let { theme } = this . props ;
84-
85- if ( theme ) {
86- Object . assign ( themeConfig , {
87- themeName : theme . themeName ,
88- accent : theme . accent ,
89- useFluentDesign : theme . useFluentDesign ,
90- desktopBackgroundImage : theme . desktopBackgroundImage
91- } ) ;
92- }
93-
94- const storageString = localStorage . getItem ( customLocalStorageName ) ;
95- if ( storageString ) {
96- let data : any = { } ;
97- try {
98- data = JSON . parse ( storageString ) ;
99- const { themeName, accent, useFluentDesign, desktopBackgroundImage } = data ;
100- theme = getTheme ( {
101- themeName : themeName === void 0 ? themeConfig . themeName : themeName ,
102- accent : accent === void 0 ? themeConfig . accent : accent ,
103- useFluentDesign : useFluentDesign === void 0 ? themeConfig . useFluentDesign : useFluentDesign ,
104- desktopBackgroundImage : desktopBackgroundImage === void 0 ? themeConfig . desktopBackgroundImage : desktopBackgroundImage
105- } ) ;
106- } catch ( error ) {
107- theme = this . props . theme || darkTheme ;
108- }
109- } else {
110- theme = this . props . theme || darkTheme ;
111- }
67+ theme = theme || darkTheme ;
11268
11369 return theme ;
11470 }
11571
72+ state : ThemeState = {
73+ currTheme : this . getDefaultTheme ( )
74+ } ;
75+
11676 bindNewThemeMethods : ( theme : ThemeType ) => void = ( theme : ThemeType ) => {
11777 const { scrollBarStyleSelector } = this . props ;
118- const styleManager : ReactUWP . StyleManager = new StyleManager ( { theme } ) as any ;
119- styleManager . addCSSTextWithUpdate ( getBaseCSSText ( theme as any , "uwp-base" , scrollBarStyleSelector ) ) ;
78+ const styleManager : ReactUWP . StyleManager = new StyleManager ( { theme } ) ;
79+ styleManager . addCSSTextWithUpdate ( getBaseCSSText ( theme , "uwp-base" , scrollBarStyleSelector ) ) ;
12080 Object . assign ( theme , {
12181 desktopBackground : `url(${ theme . desktopBackgroundImage } ,
12282 updateTheme : this . updateTheme ,
123- saveTheme : this . saveTheme ,
12483 addToast : this . addToast ,
12584 updateToast : this . updateToast ,
12685 deleteToast : this . deleteToast ,
12786 scrollRevealListener : this . handleScrollReveal ,
12887 forceUpdateTheme : this . forceUpdateTheme ,
12988 styleManager
130- } as any ) ;
89+ } ) ;
13190 }
13291
13392 handleNewTheme : ( theme : ThemeType ) => void = ( theme : ThemeType ) => {
13493 this . props . themeWillUpdate ( theme ) ;
13594 }
13695
137- state : ThemeState = {
138- currTheme : ( ( ) => {
139- const theme = this . getDefaultTheme ( ) ;
140- this . handleNewTheme ( theme ) ;
141- return theme ;
142- } ) ( )
143- } ;
144-
14596 getChildContext : ( ) => { theme : ThemeType } = ( ) => {
14697 return { theme : this . state . currTheme } ;
14798 }
14899
149100 componentDidMount ( ) {
150101 const { currTheme } = this . state ;
151-
152- if ( IS_NODE_ENV && this . props . autoSaveTheme ) {
153- const currTheme = this . getLocalStorageTheme ( ) ;
154- this . props . themeWillUpdate ( currTheme ) ;
155- this . setState ( { currTheme } ) ;
156- }
157-
158102 if ( IS_NODE_ENV ) setSegoeMDL2AssetsFonts ( ) ;
159103
160104 if ( currTheme . useFluentDesign && currTheme . desktopBackgroundImage && this . props . needGenerateAcrylic ) {
@@ -170,7 +114,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
170114 const { currTheme } = this . state ;
171115 const needGenerateAcrylic = this . sureNeedGenerateAcrylic ( theme ) ;
172116
173- if ( nextProps && nextProps . theme && ! this . props . autoSaveTheme ) {
117+ if ( nextProps && nextProps . theme ) {
174118 if (
175119 theme . accent !== currTheme . accent ||
176120 theme . themeName !== currTheme . themeName ||
@@ -191,7 +135,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
191135 }
192136
193137 componentWillUpdate ( nextProps : ThemeProps , nextState : ThemeState ) {
194- this . prevStyleManager = this . state . currTheme . styleManager as any ;
138+ this . prevStyleManager = this . state . currTheme . styleManager ;
195139 }
196140
197141 componentDidUpdate ( ) {
@@ -231,28 +175,6 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
231175
232176 forceUpdateTheme : ( currTheme : ThemeType ) => void = ( currTheme : ThemeType ) => this . setState ( { currTheme } ) ;
233177
234- saveTheme : ( currTheme : ThemeType ) => void = ( newTheme ?: ThemeType , callback = themeCallback ) => {
235- localStorage . setItem ( customLocalStorageName , JSON . stringify ( {
236- themeName : newTheme . themeName ,
237- accent : newTheme . accent ,
238- useFluentDesign : newTheme . useFluentDesign ,
239- desktopBackgroundImage : newTheme . desktopBackgroundImage
240- } ) ) ;
241-
242- const needGenerateAcrylic = this . sureNeedGenerateAcrylic ( newTheme ) ;
243-
244- this . handleNewTheme ( newTheme ) ;
245- this . setState ( {
246- currTheme : newTheme
247- } , ( ) => {
248- callback ( newTheme ) ;
249- if ( needGenerateAcrylic ) {
250- this . handleNewTheme ( newTheme ) ;
251- newTheme . generateAcrylicTextures ( newTheme , currTheme => this . setState ( { currTheme } ) ) ;
252- }
253- } ) ;
254- }
255-
256178 sureNeedGenerateAcrylic : ( newTheme : ThemeType ) => boolean = ( newTheme : ThemeType ) : boolean => {
257179 const { currTheme } = this . state ;
258180 let needGenerateAcrylic = newTheme . desktopBackgroundImage && this . props . needGenerateAcrylic ;
@@ -292,7 +214,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
292214
293215 findToastNodeTimers : any [ ] = [ ] ;
294216 toastId = - 1 ;
295- addToast = ( toast : React . ReactElement < any > , callback ?: ( toastId ?: number ) => void , increaseId = true , currToastId ?: number ) => {
217+ addToast ( toast : React . ReactElement < any > , callback ?: ( toastId ?: number ) => void , increaseId = true , currToastId ?: number ) {
296218 let toastId = currToastId !== void 0 ? currToastId : this . toastId ;
297219 if ( increaseId ) {
298220 toastId += 1 ;
@@ -310,58 +232,20 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
310232 }
311233 }
312234
313- updateToast = ( toastId : number , toast : React . ReactElement < any > ) => {
235+ updateToast ( toastId : number , toast : React . ReactElement < any > ) {
314236 if ( this . toastWrapper ) this . toastWrapper . updateToast ( toastId , toast ) ;
315237 }
316238
317- deleteToast = ( toastId : number ) => {
239+ deleteToast ( toastId : number ) {
318240 this . state . currTheme . toasts [ toastId ] = void 0 ;
319241 }
320242
321243 handleScrollReveal = ( e ?: Event ) => {
322- const { currTheme } = this . state ;
323- for ( const scrollReveal of currTheme . scrollReveals ) {
324- const {
325- rootElm,
326- animated,
327- setEnterStyle,
328- setLeaveStyle,
329- props : {
330- topOffset,
331- bottomOffset
332- }
333- } = scrollReveal ;
334- if ( ! rootElm ) return ;
335- const { top, height } = rootElm . getBoundingClientRect ( ) ;
336- const { innerHeight } = window ;
337-
338- let isIn = false ;
339- if ( height > innerHeight ) {
340- isIn = top < innerHeight - height * height && top > - height * 0.5 ;
341- } else {
342- isIn = top > 0 + topOffset && top + height + bottomOffset < innerHeight ;
343- }
344- if ( isIn ) {
345- if ( ! animated ) {
346- setEnterStyle ( ) ;
347- scrollReveal . animated = true ;
348- }
349- } else {
350- if ( animated ) {
351- setLeaveStyle ( ) ;
352- scrollReveal . animated = false ;
353- }
354- }
355- }
356- }
357-
358- cleanLocalStorage = ( ) => {
359- localStorage . setItem ( customLocalStorageName , "" ) ;
244+ handleScrollReveal ( this . state . currTheme ) ;
360245 }
361246
362247 render ( ) {
363248 const {
364- autoSaveTheme,
365249 theme,
366250 onGeneratedAcrylic,
367251 children,
0 commit comments