fix typescript (#743)

wix · Apr 12, 2020 · 6b2dfaf · 6b2dfaf
1 parent 834fd9b
commit 6b2dfaf
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 56 deletions.
diff --git a/generatedTypes/commons/modifiers.d.ts b/generatedTypes/commons/modifiers.d.ts
@@ -1,4 +1,7 @@
 import _ from 'lodash';
+import { BorderRadiusesLiterals } from '../style/borderRadiuses';
+import TypographyPresets from '../style/typographyPresets';
+import { colorsPalette } from '../style/colorsPalette';
 export declare const FLEX_KEY_PATTERN: RegExp;
 export declare const PADDING_KEY_PATTERN: RegExp;
 export declare const MARGIN_KEY_PATTERN: RegExp;
@@ -32,8 +35,6 @@ declare const PADDING_VARIATIONS: {
     readonly paddingH: "paddingHorizontal";
     readonly paddingV: "paddingVertical";
 };
-export declare type PaddingModifierKeyType = keyof typeof PADDING_VARIATIONS;
-export declare type NativePaddingKeyType = typeof PADDING_VARIATIONS[PaddingModifierKeyType];
 declare const MARGIN_VARIATIONS: {
     readonly margin: "margin";
     readonly marginL: "marginLeft";
@@ -43,15 +44,30 @@ declare const MARGIN_VARIATIONS: {
     readonly marginH: "marginHorizontal";
     readonly marginV: "marginVertical";
 };
-export declare type MarginModifierKeyType = keyof typeof MARGIN_VARIATIONS;
-export declare type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginModifierKeyType];
 declare const STYLE_KEY_CONVERTERS: {
     readonly flex: "flex";
     readonly flexG: "flexGrow";
     readonly flexS: "flexShrink";
 };
-export declare type FlexModifierKeyType = keyof typeof STYLE_KEY_CONVERTERS;
-export declare type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexModifierKeyType];
+export declare type PaddingLiterals = keyof typeof PADDING_VARIATIONS;
+export declare type NativePaddingKeyType = typeof PADDING_VARIATIONS[PaddingLiterals];
+export declare type MarginLiterals = keyof typeof MARGIN_VARIATIONS;
+export declare type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginLiterals];
+export declare type FlexLiterals = keyof typeof STYLE_KEY_CONVERTERS;
+export declare type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexLiterals];
+export declare type ColorLiterals = keyof typeof colorsPalette;
+export declare type TypographyLiterals = keyof typeof TypographyPresets;
+export declare type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
+export declare type AlignmentLiterals = 'row' | 'spread' | 'center' | 'centerH' | 'centerV' | 'left' | 'right' | 'top' | 'bottom';
+export declare type Modifier<T extends string> = Partial<Record<T, boolean>>;
+export declare type TypographyModifiers = Modifier<TypographyLiterals>;
+export declare type ColorsModifiers = Modifier<ColorLiterals>;
+export declare type AlignmentModifiers = Modifier<AlignmentLiterals>;
+export declare type PaddingModifiers = Modifier<PaddingLiterals>;
+export declare type MarginModifiers = Modifier<MarginLiterals>;
+export declare type FlexModifiers = Modifier<FlexLiterals>;
+export declare type BorderRadiusModifiers = Modifier<BorderRadiusLiterals>;
+export declare type ContainerModifiers = AlignmentModifiers & PaddingModifiers & MarginModifiers & FlexModifiers & BorderRadiusModifiers;
 export declare function extractColorValue(props: Dictionary<any>): any;
 export declare function extractBackgroundColorValue(props: Dictionary<any>): any;
 export declare function extractTypographyValue(props: Dictionary<any>): undefined;

diff --git a/generatedTypes/components/text/index.d.ts b/generatedTypes/components/text/index.d.ts
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { TextProps, TextStyle } from 'react-native';
 import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
-import { MarginModifiers } from '../../../typings/modifiers';
+import { MarginModifiers } from '../../commons/modifiers';
 interface TextPropTypes extends TextProps {
     /**
      * color of the text
@@ -43,5 +43,5 @@ declare class Text extends PureComponent<PropsTypes> {
     render(): JSX.Element;
 }
 export { Text };
-declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "center" | "style" | "testID" | "modifiers" | "color" | "uppercase" | "highlightString" | "highlightStyle" | "animated" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "center" | "style" | "testID" | "color" | "uppercase" | "highlightString" | "highlightStyle" | "animated" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">>;
+declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "center" | "style" | "testID" | "modifiers" | "color" | "uppercase" | "highlightString" | "highlightStyle" | "animated" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "center" | "style" | "testID" | "color" | "uppercase" | "highlightString" | "highlightStyle" | "animated" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors">>;
 export default _default;
diff --git a/generatedTypes/components/view/index.d.ts b/generatedTypes/components/view/index.d.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ViewProps } from 'react-native';
 import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
-import { ContainerModifiers } from '../../../typings/modifiers';
+import { ContainerModifiers } from '../../commons/modifiers';
 interface ViewPropTypes extends ViewProps {
     /**
      * If true, will render as SafeAreaView
@@ -17,5 +17,5 @@ interface ViewPropTypes extends ViewProps {
     inaccessible?: boolean;
 }
 declare type PropsTypes = BaseComponentInjectedProps & ViewPropTypes & ForwardRefInjectedProps & ContainerModifiers;
-declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "row" | "center" | "left" | "right" | "centerH" | "spread" | "top" | "bottom" | "centerV" | "style" | "testID" | "modifiers" | "animated" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "useSafeArea" | "inaccessible" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture">, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "row" | "center" | "left" | "right" | "centerH" | "spread" | "top" | "bottom" | "centerV" | "style" | "testID" | "animated" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "useSafeArea" | "inaccessible" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture">>;
+declare const _default: React.ComponentType<Pick<Pick<PropsTypes, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "row" | "spread" | "center" | "centerH" | "centerV" | "left" | "right" | "top" | "bottom" | "style" | "testID" | "modifiers" | "animated" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "useSafeArea" | "inaccessible" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture">, "br0" | "br10" | "br20" | "br30" | "br40" | "br50" | "br60" | "br100" | "padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV" | "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "flex" | "flexG" | "flexS" | "row" | "spread" | "center" | "centerH" | "centerV" | "left" | "right" | "top" | "bottom" | "style" | "testID" | "animated" | "onLayout" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityStates" | "accessibilityState" | "accessibilityHint" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "useSafeArea" | "inaccessible" | "hitSlop" | "pointerEvents" | "removeClippedSubviews" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture">>;
 export default _default;
diff --git a/generatedTypes/style/themeManager.d.ts b/generatedTypes/style/themeManager.d.ts
@@ -11,6 +11,9 @@ export declare class ThemeManager {
         dividerColor: string;
         components: Extendable;
     };
+    forcedTheme: {
+        components: Extendable;
+    };
     setTheme(overrides: Dictionary<string>): void;
     getTheme(): {
         primaryColor: string;
@@ -27,7 +30,9 @@ export declare class ThemeManager {
     setItem(key: string, value: string): void;
     getItem(key: string): any;
     setComponentTheme(componentName: string, overrides: Dictionary<string> | Function): void;
+    setComponentForcedTheme(componentName: string, overrides: Dictionary<string> | Function): void;
     get components(): Extendable;
+    get forcedThemeComponents(): Extendable;
     get primaryColor(): string;
     get CTATextColor(): string;
     get CTADisabledColor(): string;

diff --git a/src/commons/modifiers.ts b/src/commons/modifiers.ts
@@ -4,7 +4,7 @@ import {Typography, Colors, BorderRadiuses, Spacings, ThemeManager} from '../sty
 import {BorderRadiusesLiterals} from '../style/borderRadiuses';
 import TypographyPresets from '../style/typographyPresets';
 import {SpacingLiterals} from '../style/spacings';
-
+import {colorsPalette} from '../style/colorsPalette';
 export const FLEX_KEY_PATTERN = /^flex(G|S)?(-\d*)?$/;
 export const PADDING_KEY_PATTERN = new RegExp(`padding[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);
 export const MARGIN_KEY_PATTERN = new RegExp(`margin[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);
@@ -42,9 +42,6 @@ const PADDING_VARIATIONS = {
   paddingV: 'paddingVertical'
 } as const;
 
-export type PaddingModifierKeyType = keyof typeof PADDING_VARIATIONS;
-export type NativePaddingKeyType = typeof PADDING_VARIATIONS[PaddingModifierKeyType];
-
 const MARGIN_VARIATIONS = {
   margin: 'margin',
   marginL: 'marginLeft',
@@ -54,17 +51,46 @@ const MARGIN_VARIATIONS = {
   marginH: 'marginHorizontal',
   marginV: 'marginVertical'
 } as const;
-export type MarginModifierKeyType = keyof typeof MARGIN_VARIATIONS;
-export type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginModifierKeyType];
 
 const STYLE_KEY_CONVERTERS = {
   flex: 'flex',
   flexG: 'flexGrow',
   flexS: 'flexShrink'
 } as const;
 
-export type FlexModifierKeyType = keyof typeof STYLE_KEY_CONVERTERS;
-export type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexModifierKeyType];
+
+export type PaddingLiterals = keyof typeof PADDING_VARIATIONS;
+export type NativePaddingKeyType = typeof PADDING_VARIATIONS[PaddingLiterals];
+export type MarginLiterals = keyof typeof MARGIN_VARIATIONS;
+export type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginLiterals];
+export type FlexLiterals = keyof typeof STYLE_KEY_CONVERTERS;
+export type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexLiterals];
+export type ColorLiterals = keyof typeof colorsPalette;
+export type TypographyLiterals = keyof typeof TypographyPresets;
+export type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
+export type AlignmentLiterals =
+| 'row' | 'spread'
+| 'center' | 'centerH' | 'centerV'
+| 'left' | 'right' | 'top' | 'bottom';
+
+export type Modifier<T extends string> = Partial<Record<T, boolean>>
+
+export type TypographyModifiers = Modifier<TypographyLiterals>;
+export type ColorsModifiers = Modifier<ColorLiterals>;
+export type AlignmentModifiers = Modifier<AlignmentLiterals>;
+export type PaddingModifiers = Modifier<PaddingLiterals>;
+export type MarginModifiers = Modifier<MarginLiterals>;
+export type FlexModifiers = Modifier<FlexLiterals>;
+export type BorderRadiusModifiers = Modifier<BorderRadiusLiterals>;
+
+export type ContainerModifiers =
+  AlignmentModifiers &
+  PaddingModifiers &
+  MarginModifiers &
+  FlexModifiers &
+  BorderRadiusModifiers;
+
+
 
 export function extractColorValue(props: Dictionary<any>) {
   // const props = this.getThemeProps();
@@ -233,7 +259,7 @@ export function extractBorderRadiusValue(props: Dictionary<any>) {
   let borderRadius;
 
   const keys = Object.keys(props);
-  const radiusProp = keys.find(prop => BorderRadiuses.getKeysPattern().test(prop) && props[prop]) as keyof typeof BorderRadiusesLiterals;
+  const radiusProp = keys.find(prop => BorderRadiuses.getKeysPattern().test(prop) && props[prop]) as BorderRadiusLiterals;
   if (radiusProp) {
     borderRadius = BorderRadiuses[radiusProp];
   }

diff --git a/src/components/text/index.tsx b/src/components/text/index.tsx
@@ -3,7 +3,7 @@ import {Text as RNText, StyleSheet, TextProps, TextStyle, Animated} from 'react-
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
 import {Colors} from '../../style';
 import _ from 'lodash';
-import {MarginModifiers} from '../../../typings/modifiers';
+import {MarginModifiers} from '../../commons/modifiers';
 
 interface TextPropTypes extends TextProps {
   /**