Merge pull request #13 from mohit23x/type-enhancemets

fix issue #10

Author: mohit23x

.npmignore

@@ -0,0 +1,4 @@
+example/
+lib/
+assets/
+.github/

build/Sheet.d.ts

@@ -1,13 +1,10 @@
-import type { ConstantsType, Fn, NamedStyles } from './type';
-export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>, O = S> {
-    result: O;
-    source: Fn<T, S>;
-    nativeSheet: O;
-    constructor(sourceFn: Fn<T, S>);
-    calc(globalVars: T, constants: ConstantsType, activeIndex: number): O;
-    getResult(): O;
+import type { ConstantsType, Fn, NamedStyles, StyleSheetType } from './type';
+export default class Sheet<T, P extends NamedStyles<P> | NamedStyles<any>> {
+    result: StyleSheetType<P>;
+    source: Fn<T, P>;
+    constructor(sourceFn: Fn<T, P>);
+    calc(globalVars: T, constants: ConstantsType, activeIndex: number): StyleSheetType<P>;
+    getResult(): StyleSheetType<P>;
     clearResult(): void;
     calcStyles(globalVars: T, constants: ConstantsType, activeIndex: number): void;
-    calcStyle(key: string, styleProps: any): void;
-    calcNative(): void;
 }

build/Sheet.js

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_native_1 = require("react-native");
 class Sheet {
     constructor(sourceFn) {
-        this.nativeSheet = {};
         this.source = sourceFn;
         this.result = {};
     }
     calc(globalVars, constants, activeIndex) {
         this.clearResult();
         this.calcStyles(globalVars, constants, activeIndex);
-        this.calcNative();
         return this.getResult();
     }
     getResult() {
@@ -45,15 +42,5 @@ class Sheet {
             });
         }
     }
-    calcStyle(key, styleProps) {
-        // @ts-ignore
-        this.nativeSheet[key] = styleProps;
-    }
-    calcNative() {
-        if (Object.keys(this.result).length) {
-            const rnStyleSheet = react_native_1.StyleSheet.create(this.nativeSheet);
-            Object.assign(this.result, rnStyleSheet);
-        }
-    }
 }
 exports.default = Sheet;

build/Sugar.d.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Fn, buildEventType, NamedStyles, ConstantsType } from './type';
+import { Fn, buildEventType, NamedStyles, ConstantsType, StyleSheetType } from './type';
 import Sheet from './Sheet';
 export default class Sugar<T> {
     builded: boolean;
@@ -99,7 +99,7 @@ export default class Sugar<T> {
     _refresh(): void;
     build(themeObj: T): void;
     configure(newConstants: Partial<ConstantsType>): void;
-    create<P extends NamedStyles<P> | NamedStyles<any>>(objFn: Fn<T, P>): P;
+    create<P extends NamedStyles<P> | NamedStyles<any>>(objFn: Fn<T, P>): StyleSheetType<P>;
     _calculateActiveIndex(): void;
     _calcSheets(): void;
     _callListeners(event: buildEventType): void;

build/type.d.ts

@@ -17,8 +17,10 @@ export declare type NamedStyles<T> = {
 };
 export declare type S = NamedStyles<any>;
 export declare type Fn<T, P> = (theme: T, constants: ConstantsType) => P extends NamedStyles<P> ? NamedStyles<P> : P;
-export declare type StyleSheetType<T> = {
-    [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+export declare type StyleSheetType<P> = {
+    [K in keyof P]: {
+        [J in keyof P[K]]: P[K][J] extends Array<any> ? J extends 'transform' | 'transformMatrix' ? P[K][J] : P[K][J][number] : P[K][J];
+    };
 };
 export declare type buildEventType = 'build';
 export declare type ThemeProp<T> = {

lib/Sheet.ts

@@ -1,28 +1,23 @@
-import { StyleSheet } from 'react-native';
 import type { ConstantsType, Fn, NamedStyles, StyleSheetType } from './type';
 
 export default class Sheet<
   T,
-  S extends NamedStyles<S> | NamedStyles<any>,
-  O = S
-  > {
-  public result: O;
-  public source: Fn<T, S>;
-  public nativeSheet: O = {} as O;
+  P extends NamedStyles<P> | NamedStyles<any>> {
+  public result: StyleSheetType<P>;
+  public source: Fn<T, P>;
 
-  constructor(sourceFn: Fn<T, S>) {
+  constructor(sourceFn: Fn<T, P>) {
     this.source = sourceFn;
-    this.result = {} as O;
+    this.result = {} as StyleSheetType<P>;
   }
 
-  calc(globalVars: T, constants: ConstantsType, activeIndex: number): O {
+  calc(globalVars: T, constants: ConstantsType, activeIndex: number): StyleSheetType<P> {
     this.clearResult();
     this.calcStyles(globalVars, constants, activeIndex);
-    this.calcNative();
     return this.getResult();
   }
 
-  getResult(): O {
+  getResult(): StyleSheetType<P> {
     return this.result;
   }
 
@@ -59,16 +54,4 @@ export default class Sheet<
       });
     }
   }
-
-  calcStyle(key: string, styleProps: any): void {
-    // @ts-ignore
-    this.nativeSheet[key] = styleProps;
-  }
-
-  calcNative(): void {
-    if (Object.keys(this.result).length) {
-      const rnStyleSheet = StyleSheet.create(this.nativeSheet);
-      Object.assign(this.result, rnStyleSheet);
-    }
-  }
 }

lib/Sugar.ts

@@ -145,16 +145,18 @@ export default class Sugar<T> {
     this._refresh();
   }
 
-  create<P extends NamedStyles<P> | NamedStyles<any>>(objFn: Fn<T, P>): P {
+  create<P extends NamedStyles<P> | NamedStyles<any>>(
+    objFn: Fn<T, P>
+  ): StyleSheetType<P> {
     if (typeof objFn === 'function') {
       const sheet = new Sheet(objFn);
       this.sheets.push(sheet);
       if (this.builded) {
         sheet.calc(this.theme, this.constants, this.activeIndex);
       }
-      return sheet.getResult() as P;
+      return sheet.getResult() as StyleSheetType<P>;
     }
-    return objFn as P;
+    return objFn as StyleSheetType<P>;
   }
 
   _calculateActiveIndex(): void {

lib/type.tsx

@@ -4,7 +4,6 @@ import Sugar from './Sugar';
 
 export type ConstantsType = typeof constants;
 
-
 export type SugarViewStyle = {
   [P in keyof ViewStyle]: ViewStyle[P] | Array<ViewStyle[P]>;
 };
@@ -22,11 +21,21 @@ export type NamedStyles<T> = {
 
 export type S = NamedStyles<any>;
 
-export type Fn<T, P> = (theme: T, constants: ConstantsType) => P extends NamedStyles<P> ? NamedStyles<P> : P;
-
-export type StyleSheetType<T> = {
-  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
+export type Fn<T, P> = (
+  theme: T,
+  constants: ConstantsType
+) => P extends NamedStyles<P> ? NamedStyles<P> : P;
+
+export type StyleSheetType<P> = {
+  [K in keyof P]: {
+    [J in keyof P[K]]: P[K][J] extends Array<any>
+      ? J extends 'transform' | 'transformMatrix'
+        ? P[K][J]
+        : P[K][J][number]
+      : P[K][J];
+  };
 };
+
 export type buildEventType = 'build';
 
 export type ThemeProp<T> = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sugar-style",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React Native Stylesheet alternative with theme support",
   "author": "mohit23x",
   "license": "MIT",