Allow select scheme to change color scheme manually (#1430)

s123121 · web-flow · commit 14f43f07f800 · 2021-07-29T10:06:10.000+03:00
* add select scheme method

* add set scheme method

* add getScheme
diff --git a/generatedTypes/components/badge/index.d.ts b/generatedTypes/components/badge/index.d.ts
@@ -92,7 +92,7 @@ declare class Badge extends PureComponent<BadgeProps> {
     styles: ReturnType<typeof createStyles>;
     static displayName: string;
     constructor(props: BadgeProps);
-    get size(): number | "small" | "default" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
+    get size(): number | "default" | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
     getAccessibilityProps(): {
         accessible: boolean;
         accessibilityRole: string;
@@ -357,7 +357,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
     /**
      * the badge size (default, small)
      */
-    size?: number | "small" | "default" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large" | undefined;
+    size?: number | "default" | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large" | undefined;
     /**
      * Press handler
      */
diff --git a/generatedTypes/incubator/TextField/usePreset.d.ts b/generatedTypes/incubator/TextField/usePreset.d.ts
@@ -119,7 +119,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     clearTextOnFocus?: boolean | undefined;
     dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
     enablesReturnKeyAutomatically?: boolean | undefined;
-    keyboardAppearance?: "light" | "dark" | "default" | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
     passwordRules?: string | null | undefined;
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
@@ -450,7 +450,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     clearTextOnFocus?: boolean | undefined;
     dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
     enablesReturnKeyAutomatically?: boolean | undefined;
-    keyboardAppearance?: "light" | "dark" | "default" | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
     passwordRules?: string | null | undefined;
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
@@ -893,7 +893,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     clearTextOnFocus?: boolean | undefined;
     dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
     enablesReturnKeyAutomatically?: boolean | undefined;
-    keyboardAppearance?: "light" | "dark" | "default" | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
     passwordRules?: string | null | undefined;
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
diff --git a/generatedTypes/style/colors.d.ts b/generatedTypes/style/colors.d.ts
@@ -8,9 +8,11 @@ declare type Schemes = {
         [key: string]: string;
     };
 };
+declare type SchemeType = 'default' | 'light' | 'dark';
 export declare class Colors {
     [key: string]: any;
     schemes: Schemes;
+    currentScheme: SchemeType;
     constructor();
     /**
      * Load custom set of colors
@@ -26,6 +28,16 @@ export declare class Colors {
      * schemes - two sets of map of colors e.g {light: {screen: 'white'}, dark: {screen: 'black'}}
      */
     loadSchemes(schemes: Schemes): void;
+    /**
+     * Get app's current color scheme
+     */
+    getScheme(): 'light' | 'dark';
+    /**
+     * Set color scheme for app
+     * arguments:
+     * scheme - color scheme e.g light/dark/default
+     */
+    setScheme(scheme: SchemeType): void;
     /**
      * Add alpha to hex or rgb color
      * arguments:
@@ -118,18 +130,13 @@ declare const colorObject: Colors & {
     purple20: string;
     purple30: string;
     purple40: string;
-    /**
-     * Add alpha to hex or rgb color
-     * arguments:
-     * p1 - hex color / R part of RGB
-     * p2 - opacity / G part of RGB
-     * p3 - B part of RGB
-     * p4 - opacity
-     */
     purple50: string;
     purple60: string;
     purple70: string;
     purple80: string;
+    /**
+     * Get app's current color scheme
+     */
     violet10: string;
     violet20: string;
     violet30: string;
diff --git a/src/commons/asBaseComponent.tsx b/src/commons/asBaseComponent.tsx
@@ -37,8 +37,10 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
       Appearance.removeChangeListener(this.appearanceListener);
     }
 
-    appearanceListener: Appearance.AppearanceListener = ({colorScheme}) => {
-      this.setState({colorScheme});
+    appearanceListener: Appearance.AppearanceListener = () => {
+      // iOS 13 and above will trigger this call with the wrong colorScheme value. So just ignore returned colorScheme for now
+      // https://github.com/facebook/react-native/issues/28525
+      this.setState({colorScheme: Appearance.getColorScheme()});
     };
 
     static getThemeProps = (props: any, context: any) => {
diff --git a/src/commons/modifiers.ts b/src/commons/modifiers.ts
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import {Appearance, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {Typography, Colors, BorderRadiuses, Spacings, ThemeManager} from '../style';
 import {BorderRadiusesLiterals} from '../style/borderRadiuses';
 import TypographyPresets from '../style/typographyPresets';
@@ -97,7 +97,7 @@ export type ContainerModifiers =
   BackgroundColorModifier;
 
 export function extractColorValue(props: Dictionary<any>) {
-  const scheme = Appearance.getColorScheme() || 'light';
+  const scheme = Colors.getScheme();
   const schemeColors = Colors.schemes[scheme];
   const allColorsKeys: Array<keyof typeof Colors> = [..._.keys(Colors), ..._.keys(schemeColors)];
   const colorPropsKeys = _.chain(props)
@@ -110,7 +110,7 @@ export function extractColorValue(props: Dictionary<any>) {
 
 export function extractBackgroundColorValue(props: Dictionary<any>) {
   let backgroundColor;
-  const scheme = Appearance.getColorScheme() || 'light';
+  const scheme = Colors.getScheme();
   const schemeColors = Colors.schemes[scheme];
 
   const keys = Object.keys(props);
diff --git a/src/style/colors.ts b/src/style/colors.ts
@@ -8,17 +8,21 @@ import {colorsPalette, themeColors} from './colorsPalette';
 import ColorName from './colorName';
 
 type Schemes = {light: {[key: string]: string}; dark: {[key: string]: string}};
+type SchemeType = 'default' | 'light' | 'dark'
 
 export class Colors {
   [key: string]: any;
   schemes: Schemes = {light: {}, dark: {}};
+  currentScheme: SchemeType = 'default';
 
   constructor() {
     const colors = Object.assign(colorsPalette, themeColors);
     Object.assign(this, colors);
 
-    Appearance.addChangeListener(({colorScheme}: Appearance.AppearancePreferences) => {
-      Object.assign(this, this.schemes[colorScheme ?? 'light']);
+    Appearance.addChangeListener(() => {
+      if (this.currentScheme === 'default') {
+        Object.assign(this, this.schemes[Appearance.getColorScheme() ?? 'light']);
+      }
     });
   }
   /**
@@ -46,8 +50,30 @@ export class Colors {
     }
 
     this.schemes = schemes;
-    const colorScheme = Appearance.getColorScheme();
-    Object.assign(this, this.schemes[colorScheme ?? 'light']);
+    const colorScheme = this.getScheme();
+    Object.assign(this, this.schemes[colorScheme]);
+  }
+
+  /**
+   * Get app's current color scheme
+   */
+  getScheme(): 'light' | 'dark' {
+    const scheme = this.currentScheme === 'default' ? Appearance.getColorScheme() : this.currentScheme;
+    return scheme ?? 'light';
+  }
+
+  /**
+   * Set color scheme for app
+   * arguments:
+   * scheme - color scheme e.g light/dark/default
+   */
+  setScheme(scheme: SchemeType) {
+    if (!['light', 'dark', 'default'].includes(scheme)) {
+      throw new Error(`${scheme} is invalid colorScheme, please use 'light' | 'dark' | 'default'`);
+    }
+    this.currentScheme = scheme;
+    const colorScheme = this.getScheme();
+    Object.assign(this, this.schemes[colorScheme]);
   }
 
   /**
