react-native-unistyles 1.0.0-beta.3 → 1.0.0-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +342 -35
- package/lib/commonjs/createUnistyles.js +25 -13
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/mediaQueries.js +2 -0
- package/lib/commonjs/mediaQueries.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.js +12 -16
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.spec.js +20 -15
- package/lib/commonjs/utils/breakpoints.spec.js.map +1 -1
- package/lib/commonjs/utils/common.js +8 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +7 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.spec.js +1 -1
- package/lib/commonjs/utils/mediaQueries.spec.js.map +1 -1
- package/lib/commonjs/utils/normalizeStyles.js +10 -0
- package/lib/commonjs/utils/normalizeStyles.js.map +1 -0
- package/lib/commonjs/utils/normalizeStyles.web.js +59 -0
- package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -0
- package/lib/commonjs/utils/styles.js +14 -12
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/commonjs/utils/styles.spec.js +17 -7
- package/lib/commonjs/utils/styles.spec.js.map +1 -1
- package/lib/module/createUnistyles.js +25 -13
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/mediaQueries.js +2 -0
- package/lib/module/mediaQueries.js.map +1 -0
- package/lib/module/utils/breakpoints.js +12 -16
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/breakpoints.spec.js +20 -15
- package/lib/module/utils/breakpoints.spec.js.map +1 -1
- package/lib/module/utils/common.js +5 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +1 -0
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mediaQueries.spec.js +1 -1
- package/lib/module/utils/mediaQueries.spec.js.map +1 -1
- package/lib/module/utils/normalizeStyles.js +3 -0
- package/lib/module/utils/normalizeStyles.js.map +1 -0
- package/lib/module/utils/normalizeStyles.web.js +52 -0
- package/lib/module/utils/normalizeStyles.web.js.map +1 -0
- package/lib/module/utils/styles.js +14 -12
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/module/utils/styles.spec.js +17 -7
- package/lib/module/utils/styles.spec.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +7 -3
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/mediaQueries.d.ts +2 -0
- package/lib/typescript/src/mediaQueries.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts +53 -13
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts +6 -6
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +2 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -0
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/normalizeStyles.d.ts +2 -0
- package/lib/typescript/src/utils/normalizeStyles.d.ts.map +1 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts +2 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.d.ts +5 -5
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +9 -2
- package/src/createUnistyles.ts +38 -16
- package/src/mediaQueries.ts +33 -0
- package/src/types.ts +96 -25
- package/src/utils/breakpoints.ts +15 -15
- package/src/utils/common.ts +8 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/normalizeStyles.ts +2 -0
- package/src/utils/normalizeStyles.web.ts +103 -0
- package/src/utils/styles.ts +32 -17
@@ -1,25 +1,65 @@
|
|
1
|
-
import type { ImageStyle, TextStyle,
|
2
|
-
import type {
|
1
|
+
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
2
|
+
import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
|
3
|
+
import type { MediaQueries } from './mediaQueries';
|
4
|
+
export type Breakpoints = Record<string, number>;
|
5
|
+
export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]];
|
3
6
|
export type ScreenSize = {
|
4
7
|
width: number;
|
5
8
|
height: number;
|
6
9
|
};
|
7
|
-
export type CreateStylesFactory<
|
8
|
-
type StyleProperty<T, B extends
|
9
|
-
[
|
10
|
-
[innerKey in keyof B]?: T[
|
10
|
+
export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST;
|
11
|
+
type StyleProperty<T, B extends Breakpoints> = {
|
12
|
+
[K in keyof T]: {
|
13
|
+
[innerKey in keyof B]?: T[K];
|
11
14
|
} | {
|
12
|
-
[innerKey in
|
13
|
-
} | T[
|
15
|
+
[innerKey in MediaQueries]?: T[K];
|
16
|
+
} | T[K];
|
14
17
|
};
|
15
|
-
|
16
|
-
|
18
|
+
type ShadowOffsetProps<B> = {
|
19
|
+
shadowOffset: {
|
20
|
+
width: number | {
|
21
|
+
[innerKey in keyof B]?: number;
|
22
|
+
} | {
|
23
|
+
[innerKey in MediaQueries]: number;
|
24
|
+
};
|
25
|
+
height: number | {
|
26
|
+
[innerKey in keyof B]?: number;
|
27
|
+
} | {
|
28
|
+
[innerKey in MediaQueries]: number;
|
29
|
+
};
|
30
|
+
};
|
17
31
|
};
|
18
|
-
|
32
|
+
type TextShadowOffsetProps<B> = {
|
33
|
+
textShadowOffset: {
|
34
|
+
width: number | {
|
35
|
+
[innerKey in keyof B]?: number;
|
36
|
+
} | {
|
37
|
+
[innerKey in MediaQueries]: number;
|
38
|
+
};
|
39
|
+
height: number | {
|
40
|
+
[innerKey in keyof B]?: number;
|
41
|
+
} | {
|
42
|
+
[innerKey in MediaQueries]: number;
|
43
|
+
};
|
44
|
+
};
|
45
|
+
};
|
46
|
+
type TransformStyles<B extends Breakpoints> = PerpectiveTransform | StyleProperty<PerpectiveTransform, B> | RotateTransform | StyleProperty<RotateTransform, B> | RotateXTransform | StyleProperty<RotateXTransform, B> | RotateYTransform | StyleProperty<RotateYTransform, B> | RotateZTransform | StyleProperty<RotateZTransform, B> | ScaleTransform | StyleProperty<ScaleTransform, B> | ScaleXTransform | StyleProperty<ScaleXTransform, B> | ScaleYTransform | StyleProperty<ScaleYTransform, B> | TranslateXTransform | StyleProperty<TranslateXTransform, B> | TranslateYTransform | StyleProperty<TranslateYTransform, B> | SkewXTransform | StyleProperty<SkewXTransform, B> | SkewYTransform | StyleProperty<SkewYTransform, B> | MatrixTransform | StyleProperty<MatrixTransform, B>;
|
47
|
+
type TransformProps<B extends Breakpoints> = {
|
48
|
+
transform: Array<TransformStyles<B>>;
|
49
|
+
};
|
50
|
+
type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
|
51
|
+
type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
|
52
|
+
type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>;
|
53
|
+
export type StaticStyles<B extends Breakpoints> = (UnistyleView | StyleProperty<UnistyleView, B>) | (UnistyleText | StyleProperty<UnistyleText, B>) | (UnistyleImage | StyleProperty<UnistyleImage, B>) & TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>;
|
54
|
+
export type CustomNamedStyles<T, B extends Breakpoints> = {
|
55
|
+
[K in keyof T]: T[K] extends (...args: infer A) => unknown ? (...args: A) => StaticStyles<B> : StaticStyles<B>;
|
56
|
+
};
|
57
|
+
type WithEmptyObject<V> = keyof V extends never ? {} : V;
|
58
|
+
export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>> ? WithEmptyObject<V> : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
|
19
59
|
[K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : T[K] extends object ? ExtractBreakpoints<T[K], B> : T[K];
|
20
60
|
};
|
21
|
-
export type RemoveKeysWithPrefix<T, B extends
|
22
|
-
[K in keyof T as K extends
|
61
|
+
export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B> : T extends object ? T extends Record<string, infer _V> ? {
|
62
|
+
[K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B>;
|
23
63
|
} : {
|
24
64
|
[K in keyof T]: RemoveKeysWithPrefix<T[K], B>;
|
25
65
|
} : T;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { ScreenSize } from '../types';
|
1
|
+
import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
|
2
2
|
/**
|
3
3
|
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
4
4
|
*
|
@@ -18,7 +18,7 @@ import type { ScreenSize } from '../types';
|
|
18
18
|
* const input = { md: 768, lg: 1024, sm: 0 }
|
19
19
|
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
20
20
|
*/
|
21
|
-
export declare const sortAndValidateBreakpoints: <B extends
|
21
|
+
export declare const sortAndValidateBreakpoints: <B extends Breakpoints>(breakpoints: B) => B;
|
22
22
|
/**
|
23
23
|
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
24
24
|
*
|
@@ -27,14 +27,14 @@ export declare const sortAndValidateBreakpoints: <B extends Record<string, numbe
|
|
27
27
|
*
|
28
28
|
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
29
29
|
* @param {number} width - The screen width to determine the breakpoint for.
|
30
|
-
* @param
|
30
|
+
* @param breakpointEntries - sorted pairs of breakpoints
|
31
31
|
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
32
32
|
*
|
33
33
|
* @example
|
34
34
|
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
35
35
|
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
36
36
|
*/
|
37
|
-
export declare const getBreakpointFromScreenWidth: <B extends
|
37
|
+
export declare const getBreakpointFromScreenWidth: <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>) => keyof B & string;
|
38
38
|
/**
|
39
39
|
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
40
40
|
*
|
@@ -47,7 +47,7 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
|
|
47
47
|
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
48
48
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
49
49
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
50
|
-
* @param
|
50
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
51
51
|
*
|
52
52
|
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
53
53
|
*
|
@@ -59,5 +59,5 @@ export declare const getBreakpointFromScreenWidth: <B extends Record<string, num
|
|
59
59
|
*
|
60
60
|
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
61
61
|
*/
|
62
|
-
export declare const getValueForBreakpoint: <B extends
|
62
|
+
export declare const getValueForBreakpoint: <B extends Breakpoints>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => string | number | undefined;
|
63
63
|
//# sourceMappingURL=breakpoints.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAGhF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,8CAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,iCAAkC,MAAM,oEAchF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,kIAGlB,UAAU,kDAEvB,MAAM,GAAG,MAAM,GAAG,SA+BpB,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,KAAK,eAA8B,CAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"normalizeStyles.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,qBAAgC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,eAAe,gCAwB3B,CAAA"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { CustomNamedStyles, ScreenSize } from '../types';
|
1
|
+
import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
|
2
2
|
/**
|
3
3
|
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
4
4
|
*
|
@@ -7,7 +7,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
|
|
7
7
|
* @param {Function} fn - The function to be proxified.
|
8
8
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
9
9
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
10
|
-
* @param
|
10
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
11
11
|
*
|
12
12
|
* @returns {Function} Returns the proxified function
|
13
13
|
*
|
@@ -20,7 +20,7 @@ import type { CustomNamedStyles, ScreenSize } from '../types';
|
|
20
20
|
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
21
21
|
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
22
22
|
*/
|
23
|
-
export declare const proxifyFunction: <B extends
|
23
|
+
export declare const proxifyFunction: <B extends Breakpoints>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => Function;
|
24
24
|
/**
|
25
25
|
* Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
|
26
26
|
*
|
@@ -33,7 +33,7 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
|
|
33
33
|
* @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
|
34
34
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
35
35
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
36
|
-
* @param
|
36
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
37
37
|
*
|
38
38
|
* @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
|
39
39
|
*
|
@@ -46,5 +46,5 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
|
|
46
46
|
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
47
47
|
* // { fontSize: '12px' }
|
48
48
|
*/
|
49
|
-
export declare const parseStyle: <T, B extends
|
49
|
+
export declare const parseStyle: <T, B extends Breakpoints>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => T;
|
50
50
|
//# sourceMappingURL=styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,8BACpB,QAAQ,4CACA,UAAU,kDAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,uGAGP,UAAU,mDAmDzB,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-unistyles",
|
3
|
-
"version": "1.0.0-beta.
|
3
|
+
"version": "1.0.0-beta.5",
|
4
4
|
"description": "Level up your React Native StyleSheet",
|
5
5
|
"scripts": {
|
6
6
|
"test": "jest",
|
@@ -68,12 +68,19 @@
|
|
68
68
|
"react": "18.2.0",
|
69
69
|
"react-native": "0.72.5",
|
70
70
|
"react-native-builder-bob": "0.23.0",
|
71
|
+
"react-native-web": "0.19.9",
|
71
72
|
"release-it": "16.2.1",
|
72
73
|
"typescript": "5.2.2"
|
73
74
|
},
|
74
75
|
"peerDependencies": {
|
75
76
|
"react": "*",
|
76
|
-
"react-native": "*"
|
77
|
+
"react-native": "*",
|
78
|
+
"react-native-web": "*"
|
79
|
+
},
|
80
|
+
"peerDependenciesMeta": {
|
81
|
+
"react-native-web": {
|
82
|
+
"optional": true
|
83
|
+
}
|
77
84
|
},
|
78
85
|
"workspaces": [
|
79
86
|
"example"
|
package/src/createUnistyles.ts
CHANGED
@@ -1,22 +1,43 @@
|
|
1
1
|
import { useContext } from 'react'
|
2
|
-
import
|
2
|
+
import { StyleSheet } from 'react-native'
|
3
|
+
import type {
|
4
|
+
Breakpoints,
|
5
|
+
CreateStylesFactory,
|
6
|
+
CustomNamedStyles,
|
7
|
+
ExtractBreakpoints,
|
8
|
+
RemoveKeysWithPrefix,
|
9
|
+
SortedBreakpointEntries
|
10
|
+
} from './types'
|
3
11
|
import { UnistylesContext } from './UnistylesTheme'
|
4
|
-
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
|
5
12
|
import { useDimensions } from './hooks'
|
13
|
+
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
|
6
14
|
|
7
|
-
export const createUnistyles = <B extends
|
8
|
-
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
|
15
|
+
export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
|
16
|
+
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
|
17
|
+
const sortedBreakpointEntries = Object
|
18
|
+
.entries(sortedBreakpoints) as SortedBreakpointEntries<B>
|
9
19
|
|
10
20
|
return {
|
11
|
-
|
21
|
+
/**
|
22
|
+
* @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
|
23
|
+
*/
|
24
|
+
createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
|
25
|
+
if (typeof styles === 'function') {
|
26
|
+
return styles as X
|
27
|
+
}
|
28
|
+
|
29
|
+
return styles as S
|
30
|
+
},
|
31
|
+
createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
|
32
|
+
if (typeof styles === 'function') {
|
33
|
+
return styles as X
|
34
|
+
}
|
35
|
+
|
36
|
+
return styles as S
|
37
|
+
},
|
12
38
|
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
|
13
39
|
const theme = useContext(UnistylesContext) as T
|
14
|
-
const
|
15
|
-
const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
|
16
|
-
const screenSize: ScreenSize = {
|
17
|
-
width: dimensions.width,
|
18
|
-
height: dimensions.height
|
19
|
-
}
|
40
|
+
const screenSize = useDimensions()
|
20
41
|
|
21
42
|
if (!stylesheet) {
|
22
43
|
return {
|
@@ -28,23 +49,24 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
|
|
28
49
|
const parsedStyles = typeof stylesheet === 'function'
|
29
50
|
? stylesheet(theme)
|
30
51
|
: stylesheet
|
52
|
+
const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
|
31
53
|
|
32
54
|
const dynamicStyleSheet = Object
|
33
55
|
.entries(parsedStyles)
|
34
56
|
.reduce((acc, [key, value]) => {
|
35
|
-
const
|
57
|
+
const style = value as CustomNamedStyles<ST, B>
|
36
58
|
|
37
59
|
if (typeof value === 'function') {
|
38
60
|
return {
|
39
61
|
...acc,
|
40
|
-
[key]: proxifyFunction<B>(value, breakpoint, screenSize,
|
62
|
+
[key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
|
41
63
|
}
|
42
64
|
}
|
43
65
|
|
44
|
-
return {
|
66
|
+
return StyleSheet.create({
|
45
67
|
...acc,
|
46
|
-
[key]: parseStyle<ST, B>(
|
47
|
-
}
|
68
|
+
[key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
|
69
|
+
})
|
48
70
|
}, {} as ST)
|
49
71
|
|
50
72
|
return {
|
@@ -0,0 +1,33 @@
|
|
1
|
+
// this is super weird, but number passes empty string and bigint does not
|
2
|
+
export type MediaQueries =
|
3
|
+
// For :w
|
4
|
+
`:w[${bigint}]` |
|
5
|
+
`:w[,${bigint}]` |
|
6
|
+
`:w[${bigint},${bigint}]` |
|
7
|
+
|
8
|
+
// For :h
|
9
|
+
`:h[${bigint}]` |
|
10
|
+
`:h[,${bigint}]` |
|
11
|
+
`:h[${bigint},${bigint}]` |
|
12
|
+
|
13
|
+
// Combinations of :w and :h
|
14
|
+
`:w[${bigint}]:h[${bigint}]` |
|
15
|
+
`:w[${bigint},${bigint}]:h[${bigint}]` |
|
16
|
+
`:w[${bigint}]:h[${bigint},${bigint}]` |
|
17
|
+
`:w[${bigint},${bigint}]:h[${bigint},${bigint}]` |
|
18
|
+
`:w[,${bigint}]:h[,${bigint}]` |
|
19
|
+
`:w[,${bigint}]:h[${bigint}]` |
|
20
|
+
`:w[${bigint}]:h[,${bigint}]` |
|
21
|
+
`:w[,${bigint}]:h[${bigint},${bigint}]` |
|
22
|
+
`:w[${bigint},${bigint}]:h[,${bigint}]` |
|
23
|
+
|
24
|
+
// Combinations of :h and :w
|
25
|
+
`:h[${bigint}]:w[${bigint}]` |
|
26
|
+
`:h[${bigint},${bigint}]:w[${bigint}]` |
|
27
|
+
`:h[${bigint}]:w[${bigint},${bigint}]` |
|
28
|
+
`:h[${bigint},${bigint}]:w[${bigint},${bigint}]` |
|
29
|
+
`:h[,${bigint}]:w[,${bigint}]` |
|
30
|
+
`:h[,${bigint}]:w[${bigint}]` |
|
31
|
+
`:h[${bigint}]:w[,${bigint}]` |
|
32
|
+
`:h[,${bigint}]:w[${bigint},${bigint}]` |
|
33
|
+
`:h[${bigint},${bigint}]:w[,${bigint}]`
|
package/src/types.ts
CHANGED
@@ -1,38 +1,109 @@
|
|
1
|
-
import type { ImageStyle, TextStyle,
|
2
|
-
import type {
|
1
|
+
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
|
2
|
+
import type {
|
3
|
+
MatrixTransform,
|
4
|
+
PerpectiveTransform,
|
5
|
+
RotateTransform,
|
6
|
+
RotateXTransform,
|
7
|
+
RotateYTransform,
|
8
|
+
RotateZTransform,
|
9
|
+
ScaleTransform,
|
10
|
+
ScaleXTransform,
|
11
|
+
ScaleYTransform,
|
12
|
+
SkewXTransform,
|
13
|
+
SkewYTransform,
|
14
|
+
TranslateXTransform,
|
15
|
+
TranslateYTransform
|
16
|
+
} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
|
17
|
+
import type { MediaQueries } from './mediaQueries'
|
18
|
+
|
19
|
+
export type Breakpoints = Record<string, number>
|
20
|
+
|
21
|
+
export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
|
3
22
|
|
4
23
|
export type ScreenSize = {
|
5
24
|
width: number,
|
6
25
|
height: number
|
7
26
|
}
|
8
27
|
|
9
|
-
export type CreateStylesFactory<
|
28
|
+
export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
|
10
29
|
|
11
|
-
type StyleProperty<T, B extends
|
12
|
-
[
|
13
|
-
[innerKey in keyof B]?: T[
|
30
|
+
type StyleProperty<T, B extends Breakpoints> = {
|
31
|
+
[K in keyof T]: {
|
32
|
+
[innerKey in keyof B]?: T[K]
|
14
33
|
} | {
|
15
|
-
[innerKey in
|
16
|
-
} | T[
|
34
|
+
[innerKey in MediaQueries]?: T[K]
|
35
|
+
} | T[K]
|
36
|
+
}
|
37
|
+
|
38
|
+
type ShadowOffsetProps<B> = {
|
39
|
+
shadowOffset: {
|
40
|
+
width: number | {
|
41
|
+
[innerKey in keyof B]?: number
|
42
|
+
} | {
|
43
|
+
[innerKey in MediaQueries]: number
|
44
|
+
},
|
45
|
+
height: number | {
|
46
|
+
[innerKey in keyof B]?: number
|
47
|
+
} | {
|
48
|
+
[innerKey in MediaQueries]: number
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
type TextShadowOffsetProps<B> = {
|
54
|
+
textShadowOffset: {
|
55
|
+
width: number | {
|
56
|
+
[innerKey in keyof B]?: number
|
57
|
+
} | {
|
58
|
+
[innerKey in MediaQueries]: number
|
59
|
+
},
|
60
|
+
height: number | {
|
61
|
+
[innerKey in keyof B]?: number
|
62
|
+
} | {
|
63
|
+
[innerKey in MediaQueries]: number
|
64
|
+
}
|
65
|
+
}
|
17
66
|
}
|
18
67
|
|
19
|
-
|
20
|
-
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
| StyleProperty<
|
27
|
-
| StyleProperty<
|
28
|
-
| StyleProperty<
|
29
|
-
|
|
30
|
-
|
31
|
-
|
68
|
+
type TransformStyles<B extends Breakpoints> =
|
69
|
+
PerpectiveTransform | StyleProperty<PerpectiveTransform, B>
|
70
|
+
| RotateTransform | StyleProperty<RotateTransform, B>
|
71
|
+
| RotateXTransform | StyleProperty<RotateXTransform, B>
|
72
|
+
| RotateYTransform | StyleProperty<RotateYTransform, B>
|
73
|
+
| RotateZTransform | StyleProperty<RotateZTransform, B>
|
74
|
+
| ScaleTransform | StyleProperty<ScaleTransform, B>
|
75
|
+
| ScaleXTransform | StyleProperty<ScaleXTransform, B>
|
76
|
+
| ScaleYTransform | StyleProperty<ScaleYTransform, B>
|
77
|
+
| TranslateXTransform | StyleProperty<TranslateXTransform, B>
|
78
|
+
| TranslateYTransform | StyleProperty<TranslateYTransform, B>
|
79
|
+
| SkewXTransform | StyleProperty<SkewXTransform, B>
|
80
|
+
| SkewYTransform | StyleProperty<SkewYTransform, B>
|
81
|
+
| MatrixTransform | StyleProperty<MatrixTransform, B>
|
82
|
+
|
83
|
+
type TransformProps<B extends Breakpoints> = {
|
84
|
+
transform: Array<TransformStyles<B>>
|
32
85
|
}
|
33
86
|
|
34
|
-
|
35
|
-
|
87
|
+
type UnistyleView = Omit<Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
|
88
|
+
type UnistyleText = Omit<Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
|
89
|
+
type UnistyleImage = Omit<Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>, 'textShadowOffset'>
|
90
|
+
|
91
|
+
export type StaticStyles<B extends Breakpoints> =
|
92
|
+
| (UnistyleView | StyleProperty<UnistyleView, B>)
|
93
|
+
| (UnistyleText | StyleProperty<UnistyleText, B>)
|
94
|
+
| (UnistyleImage | StyleProperty<UnistyleImage, B>)
|
95
|
+
& TransformProps<B> & ShadowOffsetProps<B> & TextShadowOffsetProps<B>
|
96
|
+
|
97
|
+
export type CustomNamedStyles<T, B extends Breakpoints> = {
|
98
|
+
[K in keyof T]: T[K] extends (...args: infer A) => unknown
|
99
|
+
? (...args: A) => StaticStyles<B>
|
100
|
+
: StaticStyles<B>
|
101
|
+
}
|
102
|
+
|
103
|
+
type WithEmptyObject<V> = keyof V extends never ? {} : V
|
104
|
+
|
105
|
+
export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
|
106
|
+
? WithEmptyObject<V>
|
36
107
|
: T extends (...args: infer A) => infer R
|
37
108
|
? (...args: A) => ExtractBreakpoints<R, B>
|
38
109
|
: {
|
@@ -43,10 +114,10 @@ export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends
|
|
43
114
|
: T[K]
|
44
115
|
}
|
45
116
|
|
46
|
-
export type RemoveKeysWithPrefix<T, B extends
|
117
|
+
export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
|
47
118
|
? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
|
48
119
|
: T extends object
|
49
120
|
? T extends Record<string, infer _V>
|
50
|
-
? { [K in keyof T as K extends
|
121
|
+
? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
|
51
122
|
: { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
|
52
123
|
: T
|
package/src/utils/breakpoints.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { throwError } from './common'
|
2
|
-
import type { ScreenSize } from '../types'
|
2
|
+
import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
|
3
3
|
import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
|
4
4
|
|
5
5
|
/**
|
@@ -21,7 +21,7 @@ import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
|
|
21
21
|
* const input = { md: 768, lg: 1024, sm: 0 }
|
22
22
|
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
23
23
|
*/
|
24
|
-
export const sortAndValidateBreakpoints = <B extends
|
24
|
+
export const sortAndValidateBreakpoints = <B extends Breakpoints>(breakpoints: B): B => {
|
25
25
|
const sortedPairs = Object
|
26
26
|
.entries(breakpoints)
|
27
27
|
.sort((breakpoint1, breakpoint2) => {
|
@@ -54,16 +54,15 @@ export const sortAndValidateBreakpoints = <B extends Record<string, number>>(bre
|
|
54
54
|
*
|
55
55
|
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
56
56
|
* @param {number} width - The screen width to determine the breakpoint for.
|
57
|
-
* @param
|
57
|
+
* @param breakpointEntries - sorted pairs of breakpoints
|
58
58
|
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
59
59
|
*
|
60
60
|
* @example
|
61
61
|
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
62
62
|
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
63
63
|
*/
|
64
|
-
export const getBreakpointFromScreenWidth = <B extends
|
65
|
-
const [key] =
|
66
|
-
.entries(breakpoints)
|
64
|
+
export const getBreakpointFromScreenWidth = <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>): keyof B & string => {
|
65
|
+
const [key] = breakpointEntries
|
67
66
|
.find(([, value], index, otherBreakpoints) => {
|
68
67
|
const minVal = value
|
69
68
|
const maxVal = otherBreakpoints[index + 1]?.[1]
|
@@ -90,7 +89,7 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
|
|
90
89
|
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
91
90
|
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
92
91
|
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
93
|
-
* @param
|
92
|
+
* @param breakpointPairs - sorted pairs of breakpoints
|
94
93
|
*
|
95
94
|
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
96
95
|
*
|
@@ -102,7 +101,12 @@ export const getBreakpointFromScreenWidth = <B extends Record<string, number>>(w
|
|
102
101
|
*
|
103
102
|
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
104
103
|
*/
|
105
|
-
export const getValueForBreakpoint = <B extends
|
104
|
+
export const getValueForBreakpoint = <B extends Breakpoints>(
|
105
|
+
value: Record<keyof B & string, string | number | undefined>,
|
106
|
+
breakpoint: keyof B & string,
|
107
|
+
screenSize: ScreenSize,
|
108
|
+
breakpointPairs: SortedBreakpointEntries<B>
|
109
|
+
): string | number | undefined => {
|
106
110
|
// the highest priority is for custom media queries
|
107
111
|
const customMediaQueries = Object
|
108
112
|
.entries(value)
|
@@ -123,18 +127,14 @@ export const getValueForBreakpoint = <B extends Record<string, number>>(value: R
|
|
123
127
|
}
|
124
128
|
|
125
129
|
// there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
|
126
|
-
const
|
127
|
-
.entries(breakpoints)
|
128
|
-
.map(([key, bpValue]) => [key.toLowerCase(), bpValue])
|
129
|
-
|
130
|
-
const currentBreakpoint = allBreakpoints
|
130
|
+
const currentBreakpoint = breakpointPairs
|
131
131
|
.findIndex(([key]) => key === unifiedKey)
|
132
132
|
|
133
|
-
const availableBreakpoints =
|
133
|
+
const availableBreakpoints = breakpointPairs
|
134
134
|
.filter(([key], index) => index < currentBreakpoint && key && key in value)
|
135
135
|
.map(([key]) => key)
|
136
136
|
|
137
|
-
return
|
137
|
+
return breakpointPairs.length > 0
|
138
138
|
? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof B & string]
|
139
139
|
: undefined
|
140
140
|
}
|
package/src/utils/common.ts
CHANGED
@@ -1,3 +1,11 @@
|
|
1
|
+
import { Platform } from 'react-native'
|
2
|
+
|
1
3
|
export const throwError = (message: string) => {
|
2
4
|
throw new Error(`🦄 [react-native-unistyles]: ${message}`)
|
3
5
|
}
|
6
|
+
|
7
|
+
export const warn = (message: string) => {
|
8
|
+
console.warn(`🦄 [react-native-unistyles]: ${message}`)
|
9
|
+
}
|
10
|
+
|
11
|
+
export const isWeb = () => Platform.OS === 'web'
|
package/src/utils/index.ts
CHANGED