react-native-unistyles 2.0.0-alpha.5 → 2.0.0-alpha.7
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/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/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- 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.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +11 -68
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/common.js +3 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +8 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.js +57 -155
- package/lib/commonjs/utils/mediaQueries.js.map +1 -1
- package/lib/commonjs/utils/mq.js +75 -0
- package/lib/commonjs/utils/mq.js.map +1 -0
- 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/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- 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.map +1 -1
- package/lib/module/utils/breakpoints.js +11 -68
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +2 -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.js +57 -155
- package/lib/module/utils/mediaQueries.js.map +1 -1
- package/lib/module/utils/mq.js +69 -0
- package/lib/module/utils/mq.js.map +1 -0
- 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/createStyleSheet.d.ts +2 -5
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.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 +7 -1
- 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 +4 -5
- 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 +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/mediaQueries.d.ts +8 -127
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/utils/mq.d.ts +15 -0
- package/lib/typescript/src/utils/mq.d.ts.map +1 -0
- 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/index.ts +1 -0
- package/src/types/breakpoints.ts +6 -3
- package/src/types/core.ts +25 -22
- package/src/types/cxx.ts +8 -1
- package/src/types/index.ts +1 -1
- package/src/types/mediaQueries.ts +9 -4
- package/src/useStyles.ts +3 -6
- package/src/useUnistyles.ts +11 -4
- package/src/utils/breakpoints.ts +14 -71
- package/src/utils/common.ts +2 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/mediaQueries.ts +102 -163
- package/src/utils/mq.ts +77 -0
- package/src/utils/styles.ts +13 -55
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-unistyles",
|
3
|
-
"version": "2.0.0-alpha.
|
3
|
+
"version": "2.0.0-alpha.7",
|
4
4
|
"description": "Level up your React Native StyleSheet",
|
5
5
|
"scripts": {
|
6
6
|
"test": "jest",
|
@@ -20,7 +20,16 @@
|
|
20
20
|
"src",
|
21
21
|
"lib",
|
22
22
|
"ios",
|
23
|
+
"android",
|
24
|
+
"cxx",
|
23
25
|
"react-native-unistyles.podspec",
|
26
|
+
"!lib/typescript/examples",
|
27
|
+
"!ios/build",
|
28
|
+
"!android/build",
|
29
|
+
"!android/gradle",
|
30
|
+
"!android/gradlew",
|
31
|
+
"!android/gradlew.bat",
|
32
|
+
"!android/local.properties",
|
24
33
|
"!**/*.spec.ts",
|
25
34
|
"!**/*.spec.tsx",
|
26
35
|
"!**/.*"
|
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/index.ts
CHANGED
@@ -2,6 +2,7 @@ import { unistyles } from './Unistyles'
|
|
2
2
|
import type { UnistylesThemes, UnistylesBreakpoints } from './global'
|
3
3
|
import { ScreenOrientation } from './types'
|
4
4
|
|
5
|
+
export { mq } from './utils'
|
5
6
|
export { useInitialTheme } from './useInitialTheme'
|
6
7
|
|
7
8
|
export { useStyles } from './useStyles'
|
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,8 +1,10 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
|
2
2
|
import type { ScreenSize } from './breakpoints'
|
3
|
+
import type { NestedKeys } from './core'
|
3
4
|
|
5
|
+
export type Optional<T> = T | undefined
|
4
6
|
export type Nullable<T> = T | null
|
5
|
-
export type ColorSchemeName = 'light' | 'dark'
|
7
|
+
export type ColorSchemeName = Optional<'light' | 'dark'>
|
6
8
|
|
7
9
|
export type UnistylesConfig = {
|
8
10
|
adaptiveThemes?: boolean
|
@@ -64,3 +66,8 @@ export enum UnistylesError {
|
|
64
66
|
BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
|
65
67
|
BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
|
66
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
|
package/src/useUnistyles.ts
CHANGED
@@ -1,16 +1,23 @@
|
|
1
1
|
import { NativeEventEmitter, NativeModules } from 'react-native'
|
2
2
|
import { useEffect, useState } from 'react'
|
3
|
-
import type {
|
3
|
+
import type {
|
4
|
+
UnistylesThemeEvent,
|
5
|
+
UnistylesMobileLayoutEvent,
|
6
|
+
UnistylesEvents,
|
7
|
+
ScreenSize,
|
8
|
+
UnistylesTheme
|
9
|
+
} from './types'
|
4
10
|
import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
|
5
11
|
import { unistyles } from './Unistyles'
|
12
|
+
import type { UnistylesBreakpoints } from './global'
|
6
13
|
|
7
14
|
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
8
15
|
|
9
16
|
export const useUnistyles = () => {
|
10
17
|
const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
|
11
|
-
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
|
12
|
-
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
|
13
|
-
const [screenSize, setScreenSize] = useState({
|
18
|
+
const [theme, setTheme] = useState<UnistylesTheme>(unistyles.runtime.getTheme(unistyles.runtime.themeName))
|
19
|
+
const [breakpoint, setBreakpoint] = useState<keyof UnistylesBreakpoints>(unistyles.runtime.breakpoint)
|
20
|
+
const [screenSize, setScreenSize] = useState<ScreenSize>({
|
14
21
|
width: unistyles.runtime.screen.width,
|
15
22
|
height: unistyles.runtime.screen.height
|
16
23
|
})
|
package/src/utils/breakpoints.ts
CHANGED
@@ -1,29 +1,9 @@
|
|
1
1
|
import { unistyles } from '../Unistyles'
|
2
2
|
import { isMobile, Orientation, throwError } from './common'
|
3
|
-
import type {
|
3
|
+
import type { MediaQueries } from '../types'
|
4
4
|
import { ScreenOrientation } from '../types'
|
5
|
-
import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
|
6
5
|
import type { UnistylesBreakpoints } from '../global'
|
7
6
|
|
8
|
-
/**
|
9
|
-
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
10
|
-
*
|
11
|
-
* This function takes an object where keys represent breakpoint names and values are numeric.
|
12
|
-
* It returns a new object with the same keys but sorted based on their corresponding numeric values.
|
13
|
-
* Additionally, it validates that:
|
14
|
-
* 1. The first breakpoint starts with a value of 0.
|
15
|
-
* 2. No duplicate breakpoint values exist.
|
16
|
-
*
|
17
|
-
* If the validation fails, appropriate error messages are logged to the console.
|
18
|
-
*
|
19
|
-
* @template B - An object type where keys are strings and values are numbers.
|
20
|
-
* @param {B} breakpoints - The breakpoints object to be sorted and validated.
|
21
|
-
* @returns {B} A new object with sorted and validated breakpoints.
|
22
|
-
*
|
23
|
-
* @example
|
24
|
-
* const input = { md: 768, lg: 1024, sm: 0 }
|
25
|
-
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
26
|
-
*/
|
27
7
|
export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
|
28
8
|
const sortedPairs = Object
|
29
9
|
.entries(breakpoints)
|
@@ -49,21 +29,6 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
|
|
49
29
|
return sortedBreakpoints
|
50
30
|
}
|
51
31
|
|
52
|
-
/**
|
53
|
-
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
54
|
-
*
|
55
|
-
* This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
|
56
|
-
* that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
|
57
|
-
*
|
58
|
-
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
59
|
-
* @param {number} width - The screen width to determine the breakpoint for.
|
60
|
-
* @param breakpointEntries - sorted pairs of breakpoints
|
61
|
-
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
62
|
-
*
|
63
|
-
* @example
|
64
|
-
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
65
|
-
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
66
|
-
*/
|
67
32
|
export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
|
68
33
|
const [key] = breakpointEntries
|
69
34
|
.find(([, value], index, otherBreakpoints) => {
|
@@ -80,40 +45,13 @@ export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: A
|
|
80
45
|
return key
|
81
46
|
}
|
82
47
|
|
83
|
-
|
84
|
-
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
85
|
-
*
|
86
|
-
* The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
|
87
|
-
* If no custom media query matches, the function then checks for a direct breakpoint match.
|
88
|
-
* If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
|
89
|
-
*
|
90
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
91
|
-
*
|
92
|
-
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
93
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
94
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
95
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
96
|
-
*
|
97
|
-
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
98
|
-
*
|
99
|
-
* @example
|
100
|
-
*
|
101
|
-
* const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
|
102
|
-
* const screenSize = { width: 250, height: 400 }
|
103
|
-
* const breakpoints = { sm: 300, md: 600, lg: 900 }
|
104
|
-
*
|
105
|
-
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
106
|
-
*/
|
107
|
-
export const getValueForBreakpoint = (
|
108
|
-
value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>,
|
109
|
-
breakpoint: keyof UnistylesBreakpoints,
|
110
|
-
screenSize: ScreenSize
|
111
|
-
): string | number | undefined => {
|
48
|
+
export const getValueForBreakpoint = (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>): string | number | undefined => {
|
112
49
|
// the highest priority is for custom media queries
|
113
50
|
const customMediaQueries = Object
|
114
51
|
.entries(value)
|
115
|
-
.filter(([key]) => isMediaQuery(key))
|
116
|
-
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
|
117
55
|
|
118
56
|
if (customMediaQueryKey && customMediaQueryKey in value) {
|
119
57
|
return value[customMediaQueryKey]
|
@@ -132,19 +70,24 @@ export const getValueForBreakpoint = (
|
|
132
70
|
]
|
133
71
|
}
|
134
72
|
|
73
|
+
const breakpoint = unistyles.runtime.breakpoint
|
74
|
+
|
75
|
+
if (!breakpoint) {
|
76
|
+
return undefined
|
77
|
+
}
|
78
|
+
|
135
79
|
// if user defined breakpoints, then we look for the valid one
|
136
|
-
const
|
137
|
-
const directBreakpoint = value[unifiedKey]
|
80
|
+
const directBreakpoint = value[breakpoint]
|
138
81
|
|
139
82
|
// if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
|
140
|
-
if (directBreakpoint || (
|
83
|
+
if (directBreakpoint || (breakpoint in value)) {
|
141
84
|
return directBreakpoint
|
142
85
|
}
|
143
86
|
|
144
87
|
// there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
|
145
88
|
const breakpointPairs = unistyles.runtime.sortedBreakpoints
|
146
89
|
const currentBreakpoint = breakpointPairs
|
147
|
-
.findIndex(([key]) => key ===
|
90
|
+
.findIndex(([key]) => key === breakpoint)
|
148
91
|
|
149
92
|
const availableBreakpoints = breakpointPairs
|
150
93
|
.filter(([key], index) => index < currentBreakpoint && key && key in value)
|
package/src/utils/common.ts
CHANGED
@@ -10,6 +10,8 @@ export const warn = (message: string) => {
|
|
10
10
|
|
11
11
|
export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
|
12
12
|
export const isWeb = Platform.OS === 'web'
|
13
|
+
export const isIOS = Platform.OS === 'ios'
|
14
|
+
export const isAndroid = Platform.OS === 'android'
|
13
15
|
export const isServer = typeof window === 'undefined'
|
14
16
|
|
15
17
|
export const Orientation = {
|
package/src/utils/index.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
export { normalizeStyles } from './normalizeStyles'
|
2
2
|
export * from './normalizer'
|
3
|
+
export { mq } from './mq'
|
3
4
|
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
|
4
5
|
export { proxifyFunction, parseStyle } from './styles'
|
5
6
|
export { isServer, Orientation } from './common'
|