Skip to content
This repository has been archived by the owner on Jun 15, 2022. It is now read-only.

Commit

Permalink
feature: persist local theme selection & remove lodash
Browse files Browse the repository at this point in the history
  • Loading branch information
@radko93
radko93 committed Aug 27, 2020
1 parent 9987202 commit 791cfe0
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 265 deletions.
10 changes: 4 additions & 6 deletions package.json
View file
Expand Up @@ -26,7 +26,6 @@
"@react-navigation/stack": "^5.9.0",
"base64-arraybuffer": "^0.2.0",
"js-base64": "^3.4.5",
"lodash": "^4.17.20",
"moment": "^2.27.0",
"react": "16.11.0",
"react-native": "0.62.2",
Expand All @@ -53,7 +52,7 @@
"react-native-webview": "^10.7.0",
"react-navigation-header-buttons": "^5.0.2",
"sn-textview": "standardnotes/sn-textview#f42f0bf",
"snjs": "standardnotes/snjs#0ae8394",
"snjs": "standardnotes/snjs#c4d97d8",
"standard-notes-rn": "standardnotes/standard-notes-rn",
"styled-components": "^5.1.1"
},
Expand All @@ -65,12 +64,11 @@
"@types/faker": "^4.1.12",
"@types/jest": "^26.0.10",
"@types/js-base64": "^3.0.0",
"@types/lodash": "^4.14.159",
"@types/react-native": "0.62.18",
"@types/react-native-vector-icons": "^6.4.5",
"@types/styled-components": "^5.1.2",
"@typescript-eslint/eslint-plugin": "^3.9.1",
"@typescript-eslint/parser": "^3.9.1",
"@typescript-eslint/eslint-plugin": "^3.10.1",
"@typescript-eslint/parser": "^3.10.1",
"babel-jest": "^26.3.0",
"bugsnag-sourcemaps": "^1.3.0",
"concurrently": "^5.3.0",
Expand All @@ -84,7 +82,7 @@
"npm-run-all": "^4.1.5",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.1.0",
"prettier": "^2.1.1",
"prettier-plugin-organize-imports": "^1.1.1",
"react-test-renderer": "16.11.0",
"replace-in-file": "^6.1.0",
Expand Down
5 changes: 2 additions & 3 deletions src/screens/SideMenu/MainSideMenu.tsx
View file
Expand Up @@ -4,7 +4,6 @@ import { ApplicationContext } from '@Root/ApplicationContext';
import { SCREEN_SETTINGS } from '@Screens/screens';
import { ICON_BRUSH, ICON_SETTINGS } from '@Style/icons';
import { StyleKit, StyleKitContext, ThemeContent } from '@Style/StyleKit';
import _ from 'lodash';
import React, {
Fragment,
useCallback,
Expand Down Expand Up @@ -115,12 +114,12 @@ export const MainSideMenu = ({ drawerRef }: Props): JSX.Element => {
currentTheme.package_info && currentTheme.package_info.dock_icon;

if (dockIcon && dockIcon.type === 'circle') {
_.merge(desc, {
Object.assign(desc, {
backgroundColor: dockIcon.background_color,
borderColor: dockIcon.border_color,
});
} else {
_.merge(desc, {
Object.assign(desc, {
backgroundColor: theme.stylekitInfoColor,
borderColor: theme.stylekitInfoColor,
});
Expand Down
88 changes: 51 additions & 37 deletions src/style/StyleKit.ts
View file
Expand Up @@ -6,7 +6,6 @@ import {
LIGHT_CONTENT,
statusBarColorForTheme,
} from '@Style/utils';
import _ from 'lodash';
import React from 'react';
import {
Alert,
Expand All @@ -17,13 +16,22 @@ import {
TextStyle,
ViewStyle,
} from 'react-native';
import { ContentType, removeFromArray, SNComponent, SNTheme } from 'snjs';
import {
ContentType,
removeFromArray,
SNComponent,
SNTheme,
StorageValueModes,
} from 'snjs';
import { UuidString } from 'snjs/dist/@types/types';
import THEME_DARK_JSON from './Themes/blue-dark.json';
import THEME_BLUE_JSON from './Themes/blue.json';
import THEME_RED_JSON from './Themes/red.json';
import { StyleKitTheme } from './Themes/styled-components';

const LIGHT_THEME_KEY = 'lightTheme';
const DARK_THEME_KEY = 'darkTheme';

type ThemeChangeObserver = () => Promise<void> | void;

export interface ThemeContent {
Expand Down Expand Up @@ -168,8 +176,7 @@ export class StyleKit {

assignThemeForMode(themeId: string) {
const currentMode = Appearance.getColorScheme() || 'light'; // set to light in case of no support for dark theme
// TODO: Save theme to storage
// ThemeManager.get().setThemeForMode({ mode: mode, theme: theme });
this.setThemeForMode(currentMode, themeId);

/**
* If we're changing the theme for a specific mode and we're currently on
Expand All @@ -183,54 +190,61 @@ export class StyleKit {
}
}

private async setThemeForMode(mode: 'light' | 'dark', themeId: string) {
return this.application.setValue(
mode === 'dark' ? DARK_THEME_KEY : LIGHT_THEME_KEY,
themeId,
StorageValueModes.Nonwrapped
);
}

private async getThemeForMode(mode: 'light' | 'dark') {
return this.application.getValue(
mode === 'dark' ? DARK_THEME_KEY : LIGHT_THEME_KEY,
StorageValueModes.Nonwrapped
);
}

/**
* When downloading an external theme, we can't depend on it having all the
* variables present. So we will merge them with this template variable list
* to make sure the end result has all variables the app expects. Return a
* copy as the result may be modified before use.
*/
templateVariables() {
return _.clone(THEME_BLUE_JSON);
return Object.assign({}, THEME_BLUE_JSON);
}

private resetToSystemTheme() {
this.activateTheme(Object.keys(this.themeData)[0]);
}

private async resolveInitialTheme() {
// const currentMode = Appearance.getColorScheme();
const currentMode = Appearance.getColorScheme() || 'light';
const runDefaultTheme = () => {
const defaultTheme = SystemThemes.Dark;

// TODO: save to starege
const defaultTheme =
Appearance.getColorScheme() === 'light'
? SystemThemes.Dark
: SystemThemes.Blue;

this.setActiveTheme(defaultTheme);
};

// TODO: load from storage

// TODO: get theme for mode
// const themeData = ThemeManager.get().getThemeForMode(currentMode);

return runDefaultTheme();

// try {
// const matchingTheme = _.find(this.systemThemes, { uuid: themeData.uuid });
// let newTheme;
const savedThemeId = await this.getThemeForMode(currentMode);

// /** Use latest app theme data if preference is a previous system theme. */
// if (matchingTheme) {
// newTheme = matchingTheme;
// } else {
// newTheme = new SNTheme(themeData);
// newTheme.isSwapIn = true;
// }

// this.setActiveTheme(newTheme);
// } catch (e) {
// console.error('Error parsing initial theme', e);
// return runDefaultTheme();
// }
try {
const matchingTheme = this.systemThemes().find(
systemTheme => systemTheme.uuid === savedThemeId
);
if (matchingTheme) {
this.setActiveTheme(matchingTheme.uuid);
} else {
runDefaultTheme();
}
} catch (e) {
console.error('Error parsing initial theme', e);
return runDefaultTheme();
}
}

keyboardColorForActiveTheme() {
Expand All @@ -257,7 +271,7 @@ export class StyleKit {
/** Merge default variables to ensure this theme has all the variables. */
const themeData = this.findOrCreateDataForTheme(themeId);
const variables = themeData.variables;
themeData.variables = _.merge(this.templateVariables(), variables);
themeData.variables = Object.assign(this.templateVariables(), variables);

this.activeThemeId = themeId;

Expand Down Expand Up @@ -364,17 +378,17 @@ export class StyleKit {
return;
}
let data = this.findOrCreateDataForTheme(theme.uuid);
const appliedVariables = _.merge(this.templateVariables(), variables);
const appliedVariables = Object.assign(this.templateVariables(), variables);
data.variables = {
...appliedVariables,
...StyleKit.constants,
};
this.activateTheme(theme.uuid);
}

activateTheme(themeId: string) {
private activateTheme(themeId: string) {
this.setActiveTheme(themeId);
// this.assignThemeForMode(themeId);
this.assignThemeForMode(themeId);
}

// activatePreferredTheme() {
Expand Down Expand Up @@ -402,7 +416,7 @@ export class StyleKit {
const updatedVariables = await this.downloadTheme(theme);

/** Merge default variables to ensure this theme has all the variables. */
const appliedVariables = _.merge(
const appliedVariables = Object.assign(
this.templateVariables(),
updatedVariables
);
Expand Down
157 changes: 0 additions & 157 deletions src/style/ThemeManager.ts
View file

This file was deleted.

0 comments on commit 791cfe0

Please sign in to comment.