react-native-unistyles 2.0.0-alpha.15 → 2.0.0-alpha.17
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/lib/commonjs/common.js +10 -9
- package/lib/commonjs/common.js.map +1 -1
- package/lib/commonjs/core/UnistyleRegistry.js +17 -4
- package/lib/commonjs/core/UnistyleRegistry.js.map +1 -1
- package/lib/commonjs/useStyles.js +1 -8
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/utils/index.js +0 -30
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mq.js +37 -83
- package/lib/commonjs/utils/mq.js.map +1 -1
- package/lib/module/common.js +10 -9
- package/lib/module/common.js.map +1 -1
- package/lib/module/core/UnistyleRegistry.js +17 -4
- package/lib/module/core/UnistyleRegistry.js.map +1 -1
- package/lib/module/useStyles.js +1 -8
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/utils/index.js +1 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mq.js +36 -82
- package/lib/module/utils/mq.js.map +1 -1
- package/lib/typescript/src/common.d.ts +10 -9
- package/lib/typescript/src/common.d.ts.map +1 -1
- package/lib/typescript/src/core/UnistyleRegistry.d.ts +39 -3
- package/lib/typescript/src/core/UnistyleRegistry.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +48 -3
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/breakpoints.d.ts +10 -7
- package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/types/core.d.ts +2 -3
- package/lib/typescript/src/types/core.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +0 -1
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/stylesheet.d.ts +3 -10
- package/lib/typescript/src/types/stylesheet.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/mq.d.ts +4 -9
- package/lib/typescript/src/utils/mq.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/common.ts +10 -9
- package/src/core/UnistyleRegistry.ts +19 -4
- package/src/types/breakpoints.ts +17 -14
- package/src/types/core.ts +3 -4
- package/src/types/index.ts +0 -1
- package/src/types/stylesheet.ts +3 -10
- package/src/useStyles.ts +4 -14
- package/src/utils/index.ts +1 -1
- package/src/utils/mq.ts +20 -88
- package/lib/commonjs/types/mq.js +0 -6
- package/lib/commonjs/types/mq.js.map +0 -1
- package/lib/module/types/mq.js +0 -2
- package/lib/module/types/mq.js.map +0 -1
- package/lib/typescript/src/types/mq.d.ts +0 -3
- package/lib/typescript/src/types/mq.d.ts.map +0 -1
- package/src/types/mq.ts +0 -3
package/src/types/breakpoints.ts
CHANGED
@@ -1,24 +1,26 @@
|
|
1
1
|
import type { ColorValue, OpaqueColorValue } from 'react-native'
|
2
2
|
import type { UnistylesTheme } from '../types'
|
3
|
-
import type {
|
3
|
+
import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
|
4
|
+
import type { TransformStyles } from './core'
|
4
5
|
|
5
|
-
type
|
6
|
+
type ExtractTransformArray<T> = T extends object
|
7
|
+
? { [K in keyof T]: ExtractBreakpoints<T[K]> }
|
8
|
+
: never
|
6
9
|
|
7
|
-
type ExtractBreakpoints<T> = T extends
|
8
|
-
?
|
9
|
-
|
10
|
-
|
11
|
-
? T[
|
12
|
-
|
13
|
-
: ExtractBreakpoints<T[K]>
|
14
|
-
|
15
|
-
|
10
|
+
type ExtractBreakpoints<T> = T extends object
|
11
|
+
? keyof T extends BreakpointsOrMediaQueries
|
12
|
+
? T[keyof T]
|
13
|
+
: T extends Array<ToDeepUnistyles<TransformStyles>>
|
14
|
+
? Array<ExtractTransformArray<T[number]>>
|
15
|
+
: {
|
16
|
+
[K in keyof T]: ExtractBreakpoints<T[K]>
|
17
|
+
}
|
18
|
+
: T
|
16
19
|
|
17
20
|
type ParseNestedObject<T> = T extends (...args: infer A) => infer R
|
18
21
|
? (...args: A) => ParseNestedObject<R>
|
19
|
-
:
|
20
|
-
?
|
21
|
-
: T extends { variants: infer R }
|
22
|
+
: T extends object
|
23
|
+
? T extends { variants: infer R }
|
22
24
|
? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
|
23
25
|
: {
|
24
26
|
[K in keyof T]: T[K] extends object
|
@@ -27,6 +29,7 @@ type ParseNestedObject<T> = T extends (...args: infer A) => infer R
|
|
27
29
|
: ExtractBreakpoints<T[K]>
|
28
30
|
: T[K]
|
29
31
|
}
|
32
|
+
: T
|
30
33
|
|
31
34
|
type FlattenVariants<T> = T extends object
|
32
35
|
? {
|
package/src/types/core.ts
CHANGED
@@ -15,7 +15,6 @@ import type {
|
|
15
15
|
} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
|
16
16
|
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
|
17
17
|
import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
|
18
|
-
import type { MediaQuery } from './mq'
|
19
18
|
|
20
19
|
export type ShadowOffset = {
|
21
20
|
width: number,
|
@@ -44,7 +43,7 @@ export type ScreenSize = {
|
|
44
43
|
|
45
44
|
export type RNStyle = ViewStyle | TextStyle | ImageStyle
|
46
45
|
export type RNValue = number | string | undefined
|
47
|
-
export type NestedStyle = Record<keyof UnistylesBreakpoints |
|
48
|
-
export type NestedStylePairs = Array<[keyof UnistylesBreakpoints |
|
46
|
+
export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>
|
47
|
+
export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>
|
49
48
|
export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
|
50
|
-
export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST
|
49
|
+
export type CreateStylesFactory<ST> = (theme: UnistylesTheme) => ST
|
package/src/types/index.ts
CHANGED
package/src/types/stylesheet.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
|
2
2
|
import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
|
3
3
|
import type { UnistylesBreakpoints } from '../global'
|
4
|
-
import type { MediaQuery } from './mq'
|
5
4
|
|
6
5
|
// these props are treated differently to nest breakpoints and media queries
|
7
6
|
type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
|
@@ -19,18 +18,12 @@ type UnistyleNestedStyles = {
|
|
19
18
|
type Variants = {
|
20
19
|
variants?: {
|
21
20
|
[variantName: string]: {
|
22
|
-
[variant: string]:
|
23
|
-
[propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
|
24
|
-
[key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
|
25
|
-
} & {
|
26
|
-
[propName in NestedTypes]?: UnistyleNestedStyles[propName]
|
27
|
-
}
|
28
|
-
}
|
21
|
+
[variant: string]: Omit<UnistylesValues, 'variants'>
|
29
22
|
}
|
30
23
|
}
|
31
24
|
}
|
32
25
|
|
33
|
-
type ToDeepUnistyles<T> = {
|
26
|
+
export type ToDeepUnistyles<T> = {
|
34
27
|
[K in keyof T]?: T[K] | {
|
35
28
|
[key in BreakpointsOrMediaQueries]?: T[K]
|
36
29
|
}
|
@@ -39,7 +32,7 @@ type ToDeepUnistyles<T> = {
|
|
39
32
|
type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
|
40
33
|
|
41
34
|
export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
|
42
|
-
export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints |
|
35
|
+
export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
|
43
36
|
|
44
37
|
export type UnistylesValues = {
|
45
38
|
[propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
|
package/src/useStyles.ts
CHANGED
@@ -22,22 +22,13 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
|
|
22
22
|
variantsMap?: ExtractVariantNames<typeof stylesheet>
|
23
23
|
): ParsedStylesheet<ST> => {
|
24
24
|
const { theme, layout, plugins } = useUnistyles()
|
25
|
-
|
26
|
-
if (!stylesheet) {
|
27
|
-
return {
|
28
|
-
theme,
|
29
|
-
breakpoint: layout.breakpoint,
|
30
|
-
styles: {} as ReactNativeStyleSheet<ST>
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
25
|
const variants = useVariants(variantsMap)
|
35
26
|
const parsedStyles = useMemo(() => typeof stylesheet === 'function'
|
36
27
|
? stylesheet(theme)
|
37
28
|
: stylesheet, [theme, stylesheet, layout])
|
38
29
|
|
39
30
|
const dynamicStyleSheet = useMemo(() => Object
|
40
|
-
.entries(parsedStyles)
|
31
|
+
.entries(parsedStyles || {})
|
41
32
|
.reduce((acc, [key, value]) => {
|
42
33
|
if (typeof value === 'function') {
|
43
34
|
return {
|
@@ -56,13 +47,12 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
|
|
56
47
|
variants
|
57
48
|
)
|
58
49
|
})
|
59
|
-
}, {}),
|
60
|
-
|
61
|
-
) as ReactNativeStyleSheet<ST>
|
50
|
+
}, {}), [layout, parsedStyles, variants, plugins]
|
51
|
+
)
|
62
52
|
|
63
53
|
return {
|
64
54
|
theme,
|
65
55
|
breakpoint: layout.breakpoint,
|
66
|
-
styles: dynamicStyleSheet
|
56
|
+
styles: dynamicStyleSheet as ReactNativeStyleSheet<ST>
|
67
57
|
}
|
68
58
|
}
|
package/src/utils/index.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
export { mq
|
1
|
+
export { mq } from './mq'
|
2
2
|
export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq } from './mqParser'
|
3
3
|
export { getValueForBreakpoint } from './breakpoints'
|
4
4
|
export { proxifyFunction, parseStyle } from './styles'
|
package/src/utils/mq.ts
CHANGED
@@ -2,43 +2,25 @@ import type { Nullable } from '../types'
|
|
2
2
|
import type { UnistylesBreakpoints } from '../global'
|
3
3
|
import { unistyles } from '../core'
|
4
4
|
|
5
|
-
export const MQSymbol = Symbol('unistyles-mq')
|
6
|
-
export const MQWidth = Symbol('unistyles-mq-width')
|
7
|
-
export const MQHeight = Symbol('unistyles-mq-height')
|
8
|
-
export const MQWidthAndHeight = Symbol('unistyles-mq-width-and-height')
|
9
|
-
export const MQHeightAndWidth = Symbol('unistyles-mq-height-and-width')
|
10
|
-
|
11
5
|
type MQValue = keyof UnistylesBreakpoints | number
|
12
6
|
|
13
7
|
type MQHandler = {
|
14
8
|
only: {
|
15
|
-
width(wMin?: Nullable<MQValue>, wMax?: MQValue):
|
16
|
-
height(hMin?: Nullable<MQValue>, hMax?: MQValue):
|
9
|
+
width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol,
|
10
|
+
height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol,
|
17
11
|
},
|
18
12
|
width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
|
19
13
|
and: {
|
20
|
-
height(hMin?: Nullable<MQValue>, hMax?: MQValue):
|
14
|
+
height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol
|
21
15
|
}
|
22
16
|
},
|
23
17
|
height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
|
24
18
|
and: {
|
25
|
-
width(wMin?: Nullable<MQValue>, wMax?: MQValue):
|
19
|
+
width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol
|
26
20
|
}
|
27
21
|
}
|
28
22
|
}
|
29
23
|
|
30
|
-
type FinalHandler = {
|
31
|
-
[MQSymbol]: true
|
32
|
-
}
|
33
|
-
|
34
|
-
enum MQProp {
|
35
|
-
toString = 'toString',
|
36
|
-
width = 'width',
|
37
|
-
height = 'height',
|
38
|
-
only = 'only',
|
39
|
-
and = 'and'
|
40
|
-
}
|
41
|
-
|
42
24
|
const getMQValue = (value: Nullable<MQValue>) => {
|
43
25
|
if (typeof value === 'number') {
|
44
26
|
return value
|
@@ -51,71 +33,21 @@ const getMQValue = (value: Nullable<MQValue>) => {
|
|
51
33
|
return unistyles.registry.breakpoints[value] ?? 0
|
52
34
|
}
|
53
35
|
|
54
|
-
const
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
get: (target, prop, receiver) => {
|
64
|
-
if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
|
65
|
-
return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
|
66
|
-
}
|
67
|
-
|
68
|
-
return Reflect.get(target, prop, receiver)
|
69
|
-
}
|
70
|
-
})
|
71
|
-
}
|
72
|
-
}
|
73
|
-
|
74
|
-
return Reflect.get(target, prop, receiver)
|
75
|
-
}
|
76
|
-
})
|
77
|
-
|
78
|
-
const heightHandler = (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => new Proxy({} as MQHandler, {
|
79
|
-
get: (target, prop, receiver) => {
|
80
|
-
if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
|
81
|
-
return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]`
|
82
|
-
}
|
83
|
-
|
84
|
-
if (prop === MQProp.and) {
|
85
|
-
return {
|
86
|
-
height: (hMin: MQValue = 0, hMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
|
87
|
-
get: (target, prop, receiver) => {
|
88
|
-
if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
|
89
|
-
return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
|
90
|
-
}
|
91
|
-
|
92
|
-
return Reflect.get(target, prop, receiver)
|
93
|
-
}
|
94
|
-
})
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
return Reflect.get(target, prop, receiver)
|
99
|
-
}
|
100
|
-
})
|
101
|
-
|
102
|
-
export const mq = new Proxy<MQHandler>({} as MQHandler, {
|
103
|
-
get: (target, prop, receiver) => {
|
104
|
-
if (prop === MQProp.only) {
|
105
|
-
return {
|
106
|
-
width: heightHandler,
|
107
|
-
height: widthHandler
|
108
|
-
}
|
109
|
-
}
|
110
|
-
|
111
|
-
if (prop === MQProp.height) {
|
112
|
-
return widthHandler
|
36
|
+
export const mq: MQHandler = {
|
37
|
+
only: {
|
38
|
+
width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
|
39
|
+
height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
|
40
|
+
},
|
41
|
+
width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
|
42
|
+
and: {
|
43
|
+
height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
|
44
|
+
(`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
|
113
45
|
}
|
114
|
-
|
115
|
-
|
116
|
-
|
46
|
+
}),
|
47
|
+
height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
|
48
|
+
and: {
|
49
|
+
width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
|
50
|
+
(`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
|
117
51
|
}
|
118
|
-
|
119
|
-
|
120
|
-
}
|
121
|
-
})
|
52
|
+
})
|
53
|
+
}
|
package/lib/commonjs/types/mq.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/mq.ts"],"mappings":""}
|
package/lib/module/types/mq.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/mq.ts"],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/types/mq.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE1F,MAAM,MAAM,UAAU,GAAG,OAAO,QAAQ,GAAG,OAAO,QAAQ,GAAG,OAAO,OAAO,GAAG,OAAO,gBAAgB,GAAG,OAAO,gBAAgB,CAAA"}
|
package/src/types/mq.ts
DELETED