react-native-unistyles 2.0.0-alpha.4 → 2.0.0-alpha.6
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/cxx/UnistylesRuntime.cpp +262 -0
- package/cxx/UnistylesRuntime.h +61 -0
- package/ios/UnistylesModule.mm +8 -3
- package/lib/commonjs/Unistyles.js +1 -1
- package/lib/commonjs/Unistyles.js.map +1 -1
- package/lib/commonjs/UnistylesEngine.js +9 -5
- package/lib/commonjs/UnistylesEngine.js.map +1 -1
- package/lib/commonjs/createStyleSheet.js.map +1 -1
- package/lib/commonjs/types/cxx.js +1 -2
- package/lib/commonjs/types/cxx.js.map +1 -1
- package/lib/commonjs/useStyles.js +0 -2
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/useUnistyles.js +9 -15
- package/lib/commonjs/useUnistyles.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +23 -70
- package/lib/commonjs/utils/breakpoints.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.js +58 -149
- package/lib/commonjs/utils/mediaQueries.js.map +1 -1
- package/lib/commonjs/utils/styles.js +11 -51
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/module/Unistyles.js +2 -2
- package/lib/module/Unistyles.js.map +1 -1
- package/lib/module/UnistylesEngine.js +7 -3
- package/lib/module/UnistylesEngine.js.map +1 -1
- package/lib/module/createStyleSheet.js.map +1 -1
- package/lib/module/types/cxx.js +1 -2
- package/lib/module/types/cxx.js.map +1 -1
- package/lib/module/useStyles.js +0 -3
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/useUnistyles.js +9 -15
- package/lib/module/useUnistyles.js.map +1 -1
- package/lib/module/utils/breakpoints.js +24 -71
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +7 -0
- package/lib/module/utils/common.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/mediaQueries.js +58 -149
- package/lib/module/utils/mediaQueries.js.map +1 -1
- package/lib/module/utils/styles.js +10 -51
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/typescript/src/Unistyles.d.ts +2 -2
- package/lib/typescript/src/Unistyles.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesEngine.d.ts +4 -1
- package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesRuntime.d.ts +2 -2
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/createStyleSheet.d.ts +2 -5
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
- package/lib/typescript/src/global.d.ts +2 -1
- package/lib/typescript/src/global.d.ts.map +1 -1
- package/lib/typescript/src/types/breakpoints.d.ts +2 -1
- package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/types/core.d.ts +18 -16
- package/lib/typescript/src/types/core.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +15 -14
- package/lib/typescript/src/types/cxx.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +1 -1
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +5 -3
- package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +2 -4
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/useUnistyles.d.ts +3 -1
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts +2 -60
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +7 -0
- package/lib/typescript/src/utils/common.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/mediaQueries.d.ts +8 -127
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/utils/styles.d.ts +1 -46
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +10 -1
- package/src/Unistyles.ts +3 -3
- package/src/UnistylesEngine.ts +12 -3
- package/src/createStyleSheet.ts +2 -5
- package/src/global.ts +2 -1
- package/src/types/breakpoints.ts +6 -3
- package/src/types/core.ts +25 -22
- package/src/types/cxx.ts +17 -16
- package/src/types/index.ts +1 -1
- package/src/types/mediaQueries.ts +9 -4
- package/src/useStyles.ts +5 -8
- package/src/useUnistyles.ts +12 -24
- package/src/utils/breakpoints.ts +31 -74
- package/src/utils/common.ts +8 -0
- package/src/utils/index.ts +1 -1
- package/src/utils/mediaQueries.ts +105 -154
- package/src/utils/styles.ts +13 -55
package/src/Unistyles.ts
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
import { UnistylesModule } from './UnistylesModule'
|
2
2
|
import { UnistylesRuntime } from './UnistylesRuntime'
|
3
|
-
import {
|
3
|
+
import { UnistylesBuiltInEngine } from './UnistylesEngine'
|
4
4
|
import { UnistyleRegistry } from './UnistyleRegistry'
|
5
5
|
import type { UnistylesBridge } from './types'
|
6
6
|
import { UnistylesError } from './types'
|
7
7
|
|
8
8
|
class Unistyles {
|
9
9
|
private _runtime: UnistylesRuntime
|
10
|
-
private _engine:
|
10
|
+
private _engine: UnistylesBuiltInEngine
|
11
11
|
private _registry: UnistyleRegistry
|
12
12
|
private _bridge: UnistylesBridge
|
13
13
|
|
@@ -22,7 +22,7 @@ class Unistyles {
|
|
22
22
|
this._bridge = global.__UNISTYLES__ as UnistylesBridge
|
23
23
|
this._registry = new UnistyleRegistry(this._bridge)
|
24
24
|
this._runtime = new UnistylesRuntime(this._bridge, this._registry)
|
25
|
-
this._engine = new
|
25
|
+
this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime)
|
26
26
|
}
|
27
27
|
|
28
28
|
public get registry() {
|
package/src/UnistylesEngine.ts
CHANGED
@@ -1,14 +1,23 @@
|
|
1
1
|
import type { UnistyleRegistry } from './UnistyleRegistry'
|
2
2
|
import type { UnistylesRuntime } from './UnistylesRuntime'
|
3
|
+
import { getKeyForCustomMediaQuery } from './utils'
|
4
|
+
import type { UnistylesEngine, NestedKeys } from './types'
|
3
5
|
|
4
|
-
|
5
|
-
export class UnistylesEngine {
|
6
|
-
// @ts-ignore
|
6
|
+
export class UnistylesBuiltInEngine implements UnistylesEngine {
|
7
7
|
constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
|
8
8
|
this.registry = registry
|
9
9
|
this.runtime = runtime
|
10
10
|
}
|
11
11
|
|
12
|
+
public isMediaQuery = (key: string) => {
|
13
|
+
const regex = /(:w|:h)/
|
14
|
+
|
15
|
+
return key.length > 0 && regex.test(key)
|
16
|
+
}
|
17
|
+
|
18
|
+
public didMatchMediaQuery = (keys: NestedKeys) =>
|
19
|
+
getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints)
|
20
|
+
|
12
21
|
// UnistylesEngine.parseStyleSheet
|
13
22
|
// UnistylesEngine.parseStyle
|
14
23
|
// UnistylesEngine.proxify
|
package/src/createStyleSheet.ts
CHANGED
@@ -1,9 +1,6 @@
|
|
1
|
-
import type { CustomNamedStyles } from './types'
|
2
|
-
import type { UnistylesThemes } from './global'
|
1
|
+
import type { CustomNamedStyles, UnistylesTheme } from './types'
|
3
2
|
|
4
|
-
|
5
|
-
|
6
|
-
export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
|
3
|
+
export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
|
7
4
|
if (typeof styles === 'function') {
|
8
5
|
return styles as X
|
9
6
|
}
|
package/src/global.ts
CHANGED
package/src/types/breakpoints.ts
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
import type { OpaqueColorValue } from 'react-native'
|
1
2
|
import type { UnistylesBreakpoints } from '../global'
|
2
3
|
import type { MediaQueries } from './mediaQueries'
|
3
4
|
|
@@ -25,7 +26,9 @@ export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBrea
|
|
25
26
|
export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
|
26
27
|
? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
|
27
28
|
: T extends object
|
28
|
-
? T extends
|
29
|
-
?
|
30
|
-
:
|
29
|
+
? T extends OpaqueColorValue
|
30
|
+
? string
|
31
|
+
: T extends Record<string, infer _V>
|
32
|
+
? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
|
33
|
+
: { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
|
31
34
|
: T
|
package/src/types/core.ts
CHANGED
@@ -15,7 +15,7 @@ import type {
|
|
15
15
|
} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
|
16
16
|
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
|
17
17
|
import type { MediaQueries } from './mediaQueries'
|
18
|
-
import type { UnistylesBreakpoints } from '../global'
|
18
|
+
import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
|
19
19
|
|
20
20
|
type ShadowOffset = {
|
21
21
|
width: number,
|
@@ -37,37 +37,40 @@ type TransformStyles =
|
|
37
37
|
& SkewYTransform
|
38
38
|
& MatrixTransform
|
39
39
|
|
40
|
-
type UnistyleNested
|
41
|
-
shadowOffset?: DeepUniStyle<ShadowOffset
|
42
|
-
textShadowOffset?: DeepUniStyle<ShadowOffset
|
43
|
-
transform?: Array<DeepUniStyle<TransformStyles
|
40
|
+
type UnistyleNested = {
|
41
|
+
shadowOffset?: DeepUniStyle<ShadowOffset>,
|
42
|
+
textShadowOffset?: DeepUniStyle<ShadowOffset>,
|
43
|
+
transform?: Array<DeepUniStyle<TransformStyles>>
|
44
44
|
}
|
45
45
|
|
46
|
-
type UniStyle<V
|
47
|
-
[innerKey in keyof
|
46
|
+
type UniStyle<V> = {
|
47
|
+
[innerKey in keyof UnistylesBreakpoints]: V
|
48
48
|
} | {
|
49
|
-
[innerKey in MediaQueries]
|
50
|
-
}
|
49
|
+
[innerKey in MediaQueries]: V
|
50
|
+
}
|
51
51
|
|
52
|
-
type DeepUniStyle<T
|
53
|
-
[K in keyof T]?: UniStyle<T[K]
|
52
|
+
type DeepUniStyle<T> = {
|
53
|
+
[K in keyof T]?: UniStyle<T[K]> | T[K]
|
54
54
|
}
|
55
55
|
|
56
56
|
// these props are treated differently to nest breakpoints and media queries
|
57
57
|
type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
|
58
58
|
|
59
|
-
type UnistyleView
|
60
|
-
type UnistyleText
|
61
|
-
type UnistyleImage
|
59
|
+
type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
|
60
|
+
type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
|
61
|
+
type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
|
62
62
|
|
63
|
-
export type StaticStyles
|
64
|
-
| UnistyleView
|
65
|
-
| UnistyleText
|
66
|
-
| UnistyleImage
|
67
|
-
& UnistyleNested
|
63
|
+
export type StaticStyles =
|
64
|
+
| UnistyleView
|
65
|
+
| UnistyleText
|
66
|
+
| UnistyleImage
|
67
|
+
& UnistyleNested
|
68
68
|
|
69
69
|
export type CustomNamedStyles<T> = {
|
70
|
-
[K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
|
71
|
-
? (...args: A) => StaticStyles
|
72
|
-
: StaticStyles
|
70
|
+
[K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
|
71
|
+
? (...args: A) => StaticStyles
|
72
|
+
: StaticStyles
|
73
73
|
}
|
74
|
+
|
75
|
+
export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
|
76
|
+
export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
|
package/src/types/cxx.ts
CHANGED
@@ -1,7 +1,10 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
|
2
|
+
import type { ScreenSize } from './breakpoints'
|
3
|
+
import type { NestedKeys } from './core'
|
2
4
|
|
5
|
+
export type Optional<T> = T | undefined
|
3
6
|
export type Nullable<T> = T | null
|
4
|
-
export type ColorSchemeName = 'light' | 'dark'
|
7
|
+
export type ColorSchemeName = Optional<'light' | 'dark'>
|
5
8
|
|
6
9
|
export type UnistylesConfig = {
|
7
10
|
adaptiveThemes?: boolean
|
@@ -34,33 +37,26 @@ export type UnistylesBridge = {
|
|
34
37
|
|
35
38
|
export enum CxxUnistylesEventTypes {
|
36
39
|
Theme = 'theme',
|
37
|
-
|
38
|
-
Breakpoint = 'breakpoint'
|
40
|
+
Layout = 'layout'
|
39
41
|
}
|
40
42
|
|
41
|
-
export type
|
43
|
+
export type UnistylesThemeEvent = {
|
42
44
|
type: CxxUnistylesEventTypes.Theme,
|
43
45
|
payload: {
|
44
46
|
themeName: keyof UnistylesThemes
|
45
47
|
}
|
46
48
|
}
|
47
49
|
|
48
|
-
export type
|
49
|
-
type: CxxUnistylesEventTypes.
|
50
|
+
export type UnistylesMobileLayoutEvent = {
|
51
|
+
type: CxxUnistylesEventTypes.Layout,
|
50
52
|
payload: {
|
51
|
-
|
52
|
-
|
53
|
+
screen: ScreenSize,
|
54
|
+
breakpoint: keyof UnistylesBreakpoints,
|
55
|
+
orientation: ScreenOrientation
|
53
56
|
}
|
54
57
|
}
|
55
58
|
|
56
|
-
export type
|
57
|
-
type: CxxUnistylesEventTypes.Breakpoint,
|
58
|
-
payload: {
|
59
|
-
breakpoint: keyof UnistylesBreakpoints
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
|
59
|
+
export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
|
64
60
|
|
65
61
|
export enum UnistylesError {
|
66
62
|
RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
|
@@ -70,3 +66,8 @@ export enum UnistylesError {
|
|
70
66
|
BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
|
71
67
|
BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
|
72
68
|
}
|
69
|
+
|
70
|
+
export interface UnistylesEngine {
|
71
|
+
isMediaQuery(key: string): boolean,
|
72
|
+
didMatchMediaQuery(keys: NestedKeys): Optional<string>,
|
73
|
+
}
|
package/src/types/index.ts
CHANGED
@@ -1,9 +1,14 @@
|
|
1
1
|
type Optional<TOptional extends string> = TOptional | ''
|
2
2
|
type Separator = ',' | ', '
|
3
|
-
|
4
|
-
type
|
5
|
-
|
6
|
-
type
|
3
|
+
type OpeningBracket = '(' | '['
|
4
|
+
type ClosingBracket = ')' | ']'
|
5
|
+
|
6
|
+
type NumericMediaQuery =
|
7
|
+
| `${OpeningBracket}${Separator}${bigint}${ClosingBracket}`
|
8
|
+
| `${OpeningBracket}${bigint}${Optional<`${Separator}${bigint}`>}${ClosingBracket}`
|
9
|
+
|
10
|
+
type WidthMediaQuery = `:w${NumericMediaQuery}`
|
11
|
+
type HeightMediaQuery = `:h${NumericMediaQuery}`
|
7
12
|
|
8
13
|
export type MediaQueries =
|
9
14
|
| `${WidthMediaQuery}${Optional<HeightMediaQuery>}`
|
package/src/useStyles.ts
CHANGED
@@ -3,12 +3,9 @@ import { StyleSheet } from 'react-native'
|
|
3
3
|
import { parseStyle, proxifyFunction } from './utils'
|
4
4
|
import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
|
5
5
|
import { useUnistyles } from './useUnistyles'
|
6
|
-
import type {
|
6
|
+
import type { UnistylesTheme } from './types'
|
7
7
|
|
8
|
-
|
9
|
-
type T = UnistylesThemes[keyof UnistylesThemes]
|
10
|
-
|
11
|
-
export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
|
8
|
+
export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>) => {
|
12
9
|
const { theme, breakpoint, screenSize } = useUnistyles()
|
13
10
|
|
14
11
|
if (!stylesheet) {
|
@@ -20,7 +17,7 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
|
|
20
17
|
}
|
21
18
|
|
22
19
|
const parsedStyles = useMemo(() => typeof stylesheet === 'function'
|
23
|
-
? stylesheet(theme
|
20
|
+
? stylesheet(theme)
|
24
21
|
: stylesheet, [theme, stylesheet])
|
25
22
|
|
26
23
|
const dynamicStyleSheet = useMemo(() => Object
|
@@ -31,13 +28,13 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
|
|
31
28
|
if (typeof value === 'function') {
|
32
29
|
return {
|
33
30
|
...acc,
|
34
|
-
[key]: proxifyFunction(value, breakpoint
|
31
|
+
[key]: proxifyFunction(value, breakpoint, screenSize)
|
35
32
|
}
|
36
33
|
}
|
37
34
|
|
38
35
|
return StyleSheet.create({
|
39
36
|
...acc,
|
40
|
-
[key]: parseStyle<ST>(style, breakpoint
|
37
|
+
[key]: parseStyle<ST>(style, breakpoint, screenSize)
|
41
38
|
})
|
42
39
|
}, {} as ST), [breakpoint, screenSize, parsedStyles])
|
43
40
|
|
package/src/useUnistyles.ts
CHANGED
@@ -1,22 +1,18 @@
|
|
1
1
|
import { NativeEventEmitter, NativeModules } from 'react-native'
|
2
2
|
import { useEffect, useState } from 'react'
|
3
|
-
import type {
|
4
|
-
|
5
|
-
CxxUnistylesSizeEvent,
|
6
|
-
CxxUnistylesThemeEvent,
|
7
|
-
UnistylesEvents
|
8
|
-
} from './types'
|
9
|
-
import { CxxUnistylesEventTypes } from './types'
|
3
|
+
import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
|
4
|
+
import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
|
10
5
|
import { unistyles } from './Unistyles'
|
11
6
|
|
12
7
|
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
13
8
|
|
14
9
|
export const useUnistyles = () => {
|
10
|
+
const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
|
15
11
|
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
|
16
12
|
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
|
17
13
|
const [screenSize, setScreenSize] = useState({
|
18
|
-
width:
|
19
|
-
height:
|
14
|
+
width: unistyles.runtime.screen.width,
|
15
|
+
height: unistyles.runtime.screen.height
|
20
16
|
})
|
21
17
|
|
22
18
|
useEffect(() => {
|
@@ -25,27 +21,18 @@ export const useUnistyles = () => {
|
|
25
21
|
(event: UnistylesEvents) => {
|
26
22
|
switch (event.type) {
|
27
23
|
case CxxUnistylesEventTypes.Theme: {
|
28
|
-
const themeEvent = event as
|
24
|
+
const themeEvent = event as UnistylesThemeEvent
|
29
25
|
|
30
26
|
setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
|
31
27
|
|
32
28
|
return
|
33
29
|
}
|
34
|
-
|
35
|
-
|
36
|
-
const sizeEvent = event as CxxUnistylesSizeEvent
|
30
|
+
case CxxUnistylesEventTypes.Layout: {
|
31
|
+
const layoutEvent = event as UnistylesMobileLayoutEvent
|
37
32
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
})
|
42
|
-
|
43
|
-
return
|
44
|
-
}
|
45
|
-
case CxxUnistylesEventTypes.Breakpoint: {
|
46
|
-
const breakpointEvent = event as CxxUnistylesBreakpointEvent
|
47
|
-
|
48
|
-
setBreakpoint(breakpointEvent.payload.breakpoint)
|
33
|
+
setBreakpoint(layoutEvent.payload.breakpoint)
|
34
|
+
setOrientation(layoutEvent.payload.orientation)
|
35
|
+
setScreenSize(layoutEvent.payload.screen)
|
49
36
|
|
50
37
|
return
|
51
38
|
}
|
@@ -60,6 +47,7 @@ export const useUnistyles = () => {
|
|
60
47
|
|
61
48
|
return {
|
62
49
|
theme,
|
50
|
+
orientation,
|
63
51
|
breakpoint,
|
64
52
|
screenSize
|
65
53
|
}
|
package/src/utils/breakpoints.ts
CHANGED
@@ -1,28 +1,9 @@
|
|
1
1
|
import { unistyles } from '../Unistyles'
|
2
|
-
import { throwError } from './common'
|
3
|
-
import type {
|
4
|
-
import {
|
2
|
+
import { isMobile, Orientation, throwError } from './common'
|
3
|
+
import type { MediaQueries } from '../types'
|
4
|
+
import { ScreenOrientation } from '../types'
|
5
5
|
import type { UnistylesBreakpoints } from '../global'
|
6
6
|
|
7
|
-
/**
|
8
|
-
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
9
|
-
*
|
10
|
-
* This function takes an object where keys represent breakpoint names and values are numeric.
|
11
|
-
* It returns a new object with the same keys but sorted based on their corresponding numeric values.
|
12
|
-
* Additionally, it validates that:
|
13
|
-
* 1. The first breakpoint starts with a value of 0.
|
14
|
-
* 2. No duplicate breakpoint values exist.
|
15
|
-
*
|
16
|
-
* If the validation fails, appropriate error messages are logged to the console.
|
17
|
-
*
|
18
|
-
* @template B - An object type where keys are strings and values are numbers.
|
19
|
-
* @param {B} breakpoints - The breakpoints object to be sorted and validated.
|
20
|
-
* @returns {B} A new object with sorted and validated breakpoints.
|
21
|
-
*
|
22
|
-
* @example
|
23
|
-
* const input = { md: 768, lg: 1024, sm: 0 }
|
24
|
-
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
25
|
-
*/
|
26
7
|
export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
|
27
8
|
const sortedPairs = Object
|
28
9
|
.entries(breakpoints)
|
@@ -48,21 +29,6 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
|
|
48
29
|
return sortedBreakpoints
|
49
30
|
}
|
50
31
|
|
51
|
-
/**
|
52
|
-
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
53
|
-
*
|
54
|
-
* This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
|
55
|
-
* that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
|
56
|
-
*
|
57
|
-
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
58
|
-
* @param {number} width - The screen width to determine the breakpoint for.
|
59
|
-
* @param breakpointEntries - sorted pairs of breakpoints
|
60
|
-
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
61
|
-
*
|
62
|
-
* @example
|
63
|
-
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
64
|
-
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
65
|
-
*/
|
66
32
|
export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
|
67
33
|
const [key] = breakpointEntries
|
68
34
|
.find(([, value], index, otherBreakpoints) => {
|
@@ -79,58 +45,49 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
|
|
79
45
|
return key
|
80
46
|
}
|
81
47
|
|
82
|
-
|
83
|
-
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
84
|
-
*
|
85
|
-
* The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
|
86
|
-
* If no custom media query matches, the function then checks for a direct breakpoint match.
|
87
|
-
* If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
|
88
|
-
*
|
89
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
90
|
-
*
|
91
|
-
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
92
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
93
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
94
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
95
|
-
*
|
96
|
-
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
97
|
-
*
|
98
|
-
* @example
|
99
|
-
*
|
100
|
-
* const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
|
101
|
-
* const screenSize = { width: 250, height: 400 }
|
102
|
-
* const breakpoints = { sm: 300, md: 600, lg: 900 }
|
103
|
-
*
|
104
|
-
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
105
|
-
*/
|
106
|
-
export const getValueForBreakpoint = (
|
107
|
-
value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
|
108
|
-
breakpoint: keyof UnistylesBreakpoints,
|
109
|
-
screenSize: ScreenSize
|
110
|
-
): string | number | undefined => {
|
48
|
+
export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): string | number | undefined => {
|
111
49
|
// the highest priority is for custom media queries
|
112
50
|
const customMediaQueries = Object
|
113
51
|
.entries(value)
|
114
|
-
.filter(([key]) => isMediaQuery(key))
|
115
|
-
const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
|
52
|
+
.filter(([key]) => unistyles.engine.isMediaQuery(key)) as Array<[keyof UnistylesBreakpoints | MediaQueries, string | number | undefined]>
|
53
|
+
// const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
|
54
|
+
const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries) as keyof typeof value
|
116
55
|
|
117
56
|
if (customMediaQueryKey && customMediaQueryKey in value) {
|
118
57
|
return value[customMediaQueryKey]
|
119
58
|
}
|
120
59
|
|
121
|
-
//
|
122
|
-
|
123
|
-
const
|
60
|
+
// at this point user didn't use custom media queries (:w, :h)
|
61
|
+
// check if user defined any breakpoints
|
62
|
+
const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
|
63
|
+
|
64
|
+
// if not then we can fallback to horizontal and portrait (mobile only)
|
65
|
+
if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
|
66
|
+
return value[
|
67
|
+
unistyles.runtime.orientation === ScreenOrientation.Portrait
|
68
|
+
? Orientation.Portrait
|
69
|
+
: Orientation.Landscape
|
70
|
+
]
|
71
|
+
}
|
72
|
+
|
73
|
+
const breakpoint = unistyles.runtime.breakpoint
|
74
|
+
|
75
|
+
if (!breakpoint) {
|
76
|
+
return undefined
|
77
|
+
}
|
78
|
+
|
79
|
+
// if user defined breakpoints, then we look for the valid one
|
80
|
+
const directBreakpoint = value[breakpoint]
|
124
81
|
|
125
82
|
// if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
|
126
|
-
if (directBreakpoint || (
|
83
|
+
if (directBreakpoint || (breakpoint in value)) {
|
127
84
|
return directBreakpoint
|
128
85
|
}
|
129
86
|
|
130
|
-
// there is no direct hit for breakpoint nor media-query,
|
87
|
+
// there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
|
131
88
|
const breakpointPairs = unistyles.runtime.sortedBreakpoints
|
132
89
|
const currentBreakpoint = breakpointPairs
|
133
|
-
.findIndex(([key]) => key ===
|
90
|
+
.findIndex(([key]) => key === breakpoint)
|
134
91
|
|
135
92
|
const availableBreakpoints = breakpointPairs
|
136
93
|
.filter(([key], index) => index < currentBreakpoint && key && key in value)
|
package/src/utils/common.ts
CHANGED
@@ -8,5 +8,13 @@ export const warn = (message: string) => {
|
|
8
8
|
console.warn(`🦄 [react-native-unistyles]: ${message}`)
|
9
9
|
}
|
10
10
|
|
11
|
+
export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
|
11
12
|
export const isWeb = Platform.OS === 'web'
|
13
|
+
export const isIOS = Platform.OS === 'ios'
|
14
|
+
export const isAndroid = Platform.OS === 'android'
|
12
15
|
export const isServer = typeof window === 'undefined'
|
16
|
+
|
17
|
+
export const Orientation = {
|
18
|
+
Landscape: 'landscape',
|
19
|
+
Portrait: 'portrait'
|
20
|
+
} as const
|
package/src/utils/index.ts
CHANGED
@@ -2,7 +2,7 @@ export { normalizeStyles } from './normalizeStyles'
|
|
2
2
|
export * from './normalizer'
|
3
3
|
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
|
4
4
|
export { proxifyFunction, parseStyle } from './styles'
|
5
|
-
export { isServer } from './common'
|
5
|
+
export { isServer, Orientation } from './common'
|
6
6
|
export {
|
7
7
|
extractValues,
|
8
8
|
getKeyForCustomMediaQuery,
|