react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -4
- package/cxx/UnistylesRuntime.cpp +255 -0
- package/cxx/UnistylesRuntime.h +60 -0
- package/ios/UnistylesHelpers.h +4 -0
- package/ios/UnistylesHelpers.mm +20 -0
- package/ios/UnistylesModule.h +10 -0
- package/ios/UnistylesModule.mm +158 -0
- package/lib/commonjs/common.js +26 -0
- package/lib/commonjs/common.js.map +1 -0
- package/lib/commonjs/core/UnistyleRegistry.js +38 -0
- package/lib/commonjs/core/UnistyleRegistry.js.map +1 -0
- package/lib/commonjs/core/Unistyles.js +31 -0
- package/lib/commonjs/core/Unistyles.js.map +1 -0
- package/lib/commonjs/core/UnistylesModule.js +9 -0
- package/lib/commonjs/core/UnistylesModule.js.map +1 -0
- package/lib/commonjs/core/UnistylesRuntime.js +66 -0
- package/lib/commonjs/core/UnistylesRuntime.js.map +1 -0
- package/lib/commonjs/core/index.js +13 -0
- package/lib/commonjs/core/index.js.map +1 -0
- package/lib/commonjs/createStyleSheet.js +14 -0
- package/lib/commonjs/createStyleSheet.js.map +1 -0
- package/lib/commonjs/global.js +2 -0
- package/lib/commonjs/global.js.map +1 -0
- package/lib/commonjs/hooks/index.js +10 -3
- package/lib/commonjs/hooks/index.js.map +1 -1
- package/lib/commonjs/hooks/useInitialTheme.js +17 -0
- package/lib/commonjs/hooks/useInitialTheme.js.map +1 -0
- package/lib/commonjs/hooks/useUnistyles.js +54 -0
- package/lib/commonjs/hooks/useUnistyles.js.map +1 -0
- package/lib/commonjs/index.js +35 -6
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/common.js +2 -0
- package/lib/commonjs/types/{mediaQueries.js.map → common.js.map} +1 -1
- package/lib/commonjs/types/index.js +26 -0
- package/lib/commonjs/types/index.js.map +1 -1
- package/lib/commonjs/types/mq.js +6 -0
- package/lib/{module/types/mediaQueries.js.map → commonjs/types/mq.js.map} +1 -1
- package/lib/commonjs/types/normalizer.js +6 -0
- package/lib/commonjs/types/normalizer.js.map +1 -0
- package/lib/commonjs/types/unistyles.js +6 -0
- package/lib/commonjs/types/unistyles.js.map +1 -0
- package/lib/commonjs/useStyles.js +49 -0
- package/lib/commonjs/useStyles.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.js +44 -82
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/common.js +10 -3
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +46 -17
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/module.d.js +2 -0
- package/lib/commonjs/utils/module.d.js.map +1 -0
- package/lib/commonjs/utils/mq.js +89 -0
- package/lib/commonjs/utils/mq.js.map +1 -0
- package/lib/commonjs/utils/mqParser.js +86 -0
- package/lib/commonjs/utils/mqParser.js.map +1 -0
- package/lib/commonjs/utils/normalizeStyles.web.js +13 -13
- package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -1
- package/lib/commonjs/utils/normalizer.js +89 -0
- package/lib/commonjs/utils/normalizer.js.map +1 -0
- package/lib/commonjs/utils/styles.js +17 -57
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/commonjs/utils/variants.js +20 -0
- package/lib/commonjs/utils/variants.js.map +1 -0
- package/lib/module/common.js +22 -0
- package/lib/module/common.js.map +1 -0
- package/lib/module/core/UnistyleRegistry.js +31 -0
- package/lib/module/core/UnistyleRegistry.js.map +1 -0
- package/lib/module/core/Unistyles.js +25 -0
- package/lib/module/core/Unistyles.js.map +1 -0
- package/lib/module/core/UnistylesModule.js +3 -0
- package/lib/module/core/UnistylesModule.js.map +1 -0
- package/lib/module/core/UnistylesRuntime.js +59 -0
- package/lib/module/core/UnistylesRuntime.js.map +1 -0
- package/lib/module/core/index.js +2 -0
- package/lib/module/core/index.js.map +1 -0
- package/lib/module/createStyleSheet.js +7 -0
- package/lib/module/createStyleSheet.js.map +1 -0
- package/lib/module/global.js +2 -0
- package/lib/module/global.js.map +1 -0
- package/lib/module/hooks/index.js +2 -1
- package/lib/module/hooks/index.js.map +1 -1
- package/lib/module/hooks/useInitialTheme.js +10 -0
- package/lib/module/hooks/useInitialTheme.js.map +1 -0
- package/lib/module/hooks/useUnistyles.js +47 -0
- package/lib/module/hooks/useUnistyles.js.map +1 -0
- package/lib/module/index.js +13 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/common.js +2 -0
- package/lib/module/types/common.js.map +1 -0
- package/lib/module/types/index.js +2 -1
- package/lib/module/types/index.js.map +1 -1
- package/lib/module/types/mq.js +2 -0
- package/lib/module/types/mq.js.map +1 -0
- package/lib/module/types/normalizer.js +2 -0
- package/lib/module/types/normalizer.js.map +1 -0
- package/lib/module/types/unistyles.js +2 -0
- package/lib/module/types/unistyles.js.map +1 -0
- package/lib/module/useStyles.js +42 -0
- package/lib/module/useStyles.js.map +1 -0
- package/lib/module/utils/breakpoints.js +43 -82
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +9 -1
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +6 -2
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/module.d.js +2 -0
- package/lib/module/utils/module.d.js.map +1 -0
- package/lib/module/utils/mq.js +83 -0
- package/lib/module/utils/mq.js.map +1 -0
- package/lib/module/utils/mqParser.js +79 -0
- package/lib/module/utils/mqParser.js.map +1 -0
- package/lib/module/utils/normalizeStyles.web.js +13 -13
- package/lib/module/utils/normalizeStyles.web.js.map +1 -1
- package/lib/module/utils/normalizer.js +79 -0
- package/lib/module/utils/normalizer.js.map +1 -0
- package/lib/module/utils/styles.js +17 -59
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/module/utils/variants.js +13 -0
- package/lib/module/utils/variants.js.map +1 -0
- package/lib/typescript/src/common.d.ts +17 -0
- package/lib/typescript/src/common.d.ts.map +1 -0
- package/lib/typescript/src/core/UnistyleRegistry.d.ts +15 -0
- package/lib/typescript/src/core/UnistyleRegistry.d.ts.map +1 -0
- package/lib/typescript/src/core/Unistyles.d.ts +13 -0
- package/lib/typescript/src/core/Unistyles.d.ts.map +1 -0
- package/lib/typescript/src/core/UnistylesModule.d.ts +6 -0
- package/lib/typescript/src/core/UnistylesModule.d.ts.map +1 -0
- package/lib/typescript/src/core/UnistylesRuntime.d.ts +24 -0
- package/lib/typescript/src/core/UnistylesRuntime.d.ts.map +1 -0
- package/lib/typescript/src/core/index.d.ts +2 -0
- package/lib/typescript/src/core/index.d.ts.map +1 -0
- package/lib/typescript/src/createStyleSheet.d.ts +3 -0
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -0
- package/lib/typescript/src/global.d.ts +7 -0
- package/lib/typescript/src/global.d.ts.map +1 -0
- package/lib/typescript/src/hooks/index.d.ts +2 -1
- package/lib/typescript/src/hooks/index.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useInitialTheme.d.ts +3 -0
- package/lib/typescript/src/hooks/useInitialTheme.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useUnistyles.d.ts +12 -0
- package/lib/typescript/src/hooks/useUnistyles.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +14 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/breakpoints.d.ts +13 -13
- package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/types/common.d.ts +3 -0
- package/lib/typescript/src/types/common.d.ts.map +1 -0
- package/lib/typescript/src/types/core.d.ts +34 -18
- package/lib/typescript/src/types/core.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +6 -2
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/mq.d.ts +3 -0
- package/lib/typescript/src/types/mq.d.ts.map +1 -0
- package/lib/typescript/src/types/normalizer.d.ts +20 -0
- package/lib/typescript/src/types/normalizer.d.ts.map +1 -0
- package/lib/typescript/src/types/unistyles.d.ts +37 -0
- package/lib/typescript/src/types/unistyles.d.ts.map +1 -0
- package/lib/typescript/src/useStyles.d.ts +10 -0
- package/lib/typescript/src/useStyles.d.ts.map +1 -0
- package/lib/typescript/src/utils/breakpoints.d.ts +5 -62
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +9 -1
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +6 -2
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/mq.d.ts +21 -0
- package/lib/typescript/src/utils/mq.d.ts.map +1 -0
- package/lib/typescript/src/utils/mqParser.d.ts +3 -0
- package/lib/typescript/src/utils/mqParser.d.ts.map +1 -0
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts +4 -1
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -1
- package/lib/typescript/src/utils/normalizer.d.ts +11 -0
- package/lib/typescript/src/utils/normalizer.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.d.ts +5 -49
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/lib/typescript/src/utils/variants.d.ts +3 -0
- package/lib/typescript/src/utils/variants.d.ts.map +1 -0
- package/package.json +33 -15
- package/react-native-unistyles.podspec +22 -0
- package/src/common.ts +19 -0
- package/src/core/UnistyleRegistry.ts +41 -0
- package/src/core/Unistyles.ts +34 -0
- package/src/core/UnistylesModule.ts +7 -0
- package/src/core/UnistylesRuntime.ts +73 -0
- package/src/core/index.ts +1 -0
- package/src/createStyleSheet.ts +9 -0
- package/src/global.ts +5 -0
- package/src/hooks/index.ts +2 -1
- package/src/hooks/useInitialTheme.ts +11 -0
- package/src/hooks/useUnistyles.ts +55 -0
- package/src/index.ts +30 -2
- package/src/types/breakpoints.ts +20 -20
- package/src/types/common.ts +2 -0
- package/src/types/core.ts +42 -24
- package/src/types/index.ts +6 -9
- package/src/types/mq.ts +3 -0
- package/src/types/normalizer.ts +29 -0
- package/src/types/unistyles.ts +45 -0
- package/src/useStyles.ts +56 -0
- package/src/utils/breakpoints.ts +57 -88
- package/src/utils/common.ts +10 -1
- package/src/utils/index.ts +6 -9
- package/src/utils/module.d.ts +3 -0
- package/src/utils/mq.ts +106 -0
- package/src/utils/mqParser.ts +99 -0
- package/src/utils/normalizeStyles.web.ts +21 -42
- package/src/utils/normalizer.ts +99 -0
- package/src/utils/styles.ts +29 -68
- package/src/utils/variants.ts +17 -0
- package/lib/commonjs/UnistylesTheme.js +0 -21
- package/lib/commonjs/UnistylesTheme.js.map +0 -1
- package/lib/commonjs/createUnistyles.js +0 -57
- package/lib/commonjs/createUnistyles.js.map +0 -1
- package/lib/commonjs/hooks/useDimensions.js +0 -10
- package/lib/commonjs/hooks/useDimensions.js.map +0 -1
- package/lib/commonjs/hooks/useDimensions.web.js +0 -31
- package/lib/commonjs/hooks/useDimensions.web.js.map +0 -1
- package/lib/commonjs/types/mediaQueries.js +0 -2
- package/lib/commonjs/utils/mediaQueries.js +0 -189
- package/lib/commonjs/utils/mediaQueries.js.map +0 -1
- package/lib/module/UnistylesTheme.js +0 -12
- package/lib/module/UnistylesTheme.js.map +0 -1
- package/lib/module/createUnistyles.js +0 -50
- package/lib/module/createUnistyles.js.map +0 -1
- package/lib/module/hooks/useDimensions.js +0 -3
- package/lib/module/hooks/useDimensions.js.map +0 -1
- package/lib/module/hooks/useDimensions.web.js +0 -24
- package/lib/module/hooks/useDimensions.web.js.map +0 -1
- package/lib/module/types/mediaQueries.js +0 -2
- package/lib/module/utils/mediaQueries.js +0 -176
- package/lib/module/utils/mediaQueries.js.map +0 -1
- package/lib/typescript/src/UnistylesTheme.d.ts +0 -9
- package/lib/typescript/src/UnistylesTheme.d.ts.map +0 -1
- package/lib/typescript/src/createUnistyles.d.ts +0 -10
- package/lib/typescript/src/createUnistyles.d.ts.map +0 -1
- package/lib/typescript/src/hooks/useDimensions.d.ts +0 -3
- package/lib/typescript/src/hooks/useDimensions.d.ts.map +0 -1
- package/lib/typescript/src/hooks/useDimensions.web.d.ts +0 -3
- package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +0 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +0 -8
- package/lib/typescript/src/types/mediaQueries.d.ts.map +0 -1
- package/lib/typescript/src/utils/mediaQueries.d.ts +0 -130
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +0 -1
- package/src/UnistylesTheme.tsx +0 -17
- package/src/__tests__/createUnistyles.spec.tsx +0 -192
- package/src/createUnistyles.ts +0 -70
- package/src/hooks/useDimensions.ts +0 -4
- package/src/hooks/useDimensions.web.ts +0 -30
- package/src/types/mediaQueries.ts +0 -10
- package/src/utils/mediaQueries.ts +0 -201
@@ -1,50 +0,0 @@
|
|
1
|
-
import { useContext, useMemo } from 'react';
|
2
|
-
import { StyleSheet } from 'react-native';
|
3
|
-
import { UnistylesContext } from './UnistylesTheme';
|
4
|
-
import { useDimensions } from './hooks';
|
5
|
-
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils';
|
6
|
-
export const createUnistyles = breakpoints => {
|
7
|
-
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
|
8
|
-
const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
|
9
|
-
return {
|
10
|
-
createStyleSheet: styles => {
|
11
|
-
if (typeof styles === 'function') {
|
12
|
-
return styles;
|
13
|
-
}
|
14
|
-
return styles;
|
15
|
-
},
|
16
|
-
useStyles: stylesheet => {
|
17
|
-
const theme = useContext(UnistylesContext);
|
18
|
-
const screenSize = useDimensions();
|
19
|
-
const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
|
20
|
-
if (!stylesheet) {
|
21
|
-
return {
|
22
|
-
theme,
|
23
|
-
breakpoint,
|
24
|
-
styles: {}
|
25
|
-
};
|
26
|
-
}
|
27
|
-
const parsedStyles = useMemo(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
|
28
|
-
const dynamicStyleSheet = useMemo(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
|
29
|
-
let [key, value] = _ref;
|
30
|
-
const style = value;
|
31
|
-
if (typeof value === 'function') {
|
32
|
-
return {
|
33
|
-
...acc,
|
34
|
-
[key]: proxifyFunction(value, breakpoint, screenSize, sortedBreakpointEntries)
|
35
|
-
};
|
36
|
-
}
|
37
|
-
return StyleSheet.create({
|
38
|
-
...acc,
|
39
|
-
[key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
|
40
|
-
});
|
41
|
-
}, {}), [breakpoint, screenSize, parsedStyles]);
|
42
|
-
return {
|
43
|
-
theme,
|
44
|
-
breakpoint,
|
45
|
-
styles: dynamicStyleSheet
|
46
|
-
};
|
47
|
-
}
|
48
|
-
};
|
49
|
-
};
|
50
|
-
//# sourceMappingURL=createUnistyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["useContext","useMemo","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","breakpoint","width","parsedStyles","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACHI,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACG,gBAAgB,CAAM;MAC/C,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;MAClC,MAAMiB,UAAU,GAAGhB,4BAA4B,CAAIe,UAAU,CAACE,KAAK,EAAEV,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLE,UAAU;UACVL,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMO,YAAY,GAAGtB,OAAO,CAAC,MAAM,OAAOiB,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMM,iBAAiB,GAAGvB,OAAO,CAAC,MAAMY,MAAM,CACzCC,OAAO,CAACS,YAAY,CAAC,CACrBE,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGtB,eAAe,CAAIuB,KAAK,EAAER,UAAU,EAAED,UAAU,EAAER,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC6B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGrB,UAAU,CAAQuB,KAAK,EAAET,UAAU,EAAED,UAAU,EAAER,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACS,UAAU,EAAED,UAAU,EAAEG,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHJ,KAAK;QACLE,UAAU;QACVL,MAAM,EAAEQ;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["useWindowDimensions","useDimensions"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAGlD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkBD,mBAAmB,CAAC,CAAC"}
|
@@ -1,24 +0,0 @@
|
|
1
|
-
import { useEffect, useRef, useState } from 'react';
|
2
|
-
export const useDimensions = () => {
|
3
|
-
const timerRef = useRef();
|
4
|
-
const [screenSize, setScreenSize] = useState({
|
5
|
-
width: window.innerWidth,
|
6
|
-
height: window.innerHeight
|
7
|
-
});
|
8
|
-
useEffect(() => {
|
9
|
-
const handleResize = () => {
|
10
|
-
clearTimeout(timerRef.current);
|
11
|
-
timerRef.current = setTimeout(() => setScreenSize({
|
12
|
-
width: window.innerWidth,
|
13
|
-
height: window.innerHeight
|
14
|
-
}), 100);
|
15
|
-
};
|
16
|
-
window.addEventListener('resize', handleResize);
|
17
|
-
return () => {
|
18
|
-
window.removeEventListener('resize', handleResize);
|
19
|
-
clearTimeout(timerRef.current);
|
20
|
-
};
|
21
|
-
}, []);
|
22
|
-
return screenSize;
|
23
|
-
};
|
24
|
-
//# sourceMappingURL=useDimensions.web.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","useState","useDimensions","timerRef","screenSize","setScreenSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAGnD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGH,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAa;IACrDK,KAAK,EAAEC,MAAM,CAACC,UAAU;IACxBC,MAAM,EAAEF,MAAM,CAACG;EACnB,CAAC,CAAC;EAEFX,SAAS,CAAC,MAAM;IACZ,MAAMY,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;MAE9BV,QAAQ,CAACU,OAAO,GAAGC,UAAU,CAAC,MAAMT,aAAa,CAAC;QAC9CC,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,UAAU;AACrB,CAAC"}
|
@@ -1,176 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Extracts numeric values from a coded string.
|
3
|
-
*
|
4
|
-
* The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
|
5
|
-
* It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
|
6
|
-
*
|
7
|
-
* @param {string} codedValue - The input string to extract values from.
|
8
|
-
* @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
|
9
|
-
*
|
10
|
-
* @example
|
11
|
-
* extractValues("w[100,200]") // returns [100, 200]
|
12
|
-
* extractValues("h[300]") // returns [300]
|
13
|
-
* extractValues("h[,300]") // returns [0,300]
|
14
|
-
* extractValues("h[100,]") // returns [100]
|
15
|
-
*/
|
16
|
-
export const extractValues = codedValue => {
|
17
|
-
const [lh, rh] = codedValue.replace(/[wh[\]]/g, '').split(',');
|
18
|
-
return rh ? [Number(lh), Number(rh)] : [Number(lh)];
|
19
|
-
};
|
20
|
-
|
21
|
-
/**
|
22
|
-
* Determines if the given screen size matches the specified breakpoint query.
|
23
|
-
*
|
24
|
-
* The function checks if the screen size (width and/or height) falls within the range
|
25
|
-
* specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
|
26
|
-
* or both.
|
27
|
-
*
|
28
|
-
* @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
|
29
|
-
* @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
|
30
|
-
* @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
|
31
|
-
*
|
32
|
-
* @example
|
33
|
-
* const screenSize = { width: 150, height: 350 }
|
34
|
-
* isWithinBreakpoint('w[100,200]', screenSize) // returns true
|
35
|
-
* isWithinBreakpoint('h[400]', screenSize) // returns false
|
36
|
-
*/
|
37
|
-
export const isWithinBreakpoint = (query, screenSize) => {
|
38
|
-
if (query.includes('w') && query.includes('h')) {
|
39
|
-
return isWithinTheWidthAndHeight(query, screenSize);
|
40
|
-
}
|
41
|
-
if (query.charAt(0) === 'w') {
|
42
|
-
return isWithinTheWidth(query, screenSize.width);
|
43
|
-
}
|
44
|
-
if (query.charAt(0) === 'h') {
|
45
|
-
return isWithinTheHeight(query, screenSize.height);
|
46
|
-
}
|
47
|
-
return false;
|
48
|
-
};
|
49
|
-
|
50
|
-
/**
|
51
|
-
* Determines if the given width matches the specified width range in the query.
|
52
|
-
*
|
53
|
-
* The function checks if the provided width falls within the range specified by the query.
|
54
|
-
* The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
|
55
|
-
* it's treated as a minimum width.
|
56
|
-
*
|
57
|
-
* @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
|
58
|
-
* @param {number} width - The width to check against the query.
|
59
|
-
* @returns {boolean} True if the width matches the query range, false otherwise.
|
60
|
-
*
|
61
|
-
* @example
|
62
|
-
* isWithinTheWidth('w[100,200]', 150) // returns true
|
63
|
-
* isWithinTheWidth('w[100]', 50) // returns false
|
64
|
-
* isWithinTheWidth('w[100]', 150) // returns true
|
65
|
-
*/
|
66
|
-
export const isWithinTheWidth = (query, width) => {
|
67
|
-
const [minWidth, maxWidth] = extractValues(query);
|
68
|
-
if (maxWidth && width >= minWidth && width <= maxWidth) {
|
69
|
-
return true;
|
70
|
-
}
|
71
|
-
return !maxWidth && width >= minWidth;
|
72
|
-
};
|
73
|
-
|
74
|
-
/**
|
75
|
-
* Determines if the given height matches the specified height range in the query.
|
76
|
-
*
|
77
|
-
* The function checks if the provided height falls within the range specified by the query.
|
78
|
-
* The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
|
79
|
-
* it's treated as a minimum height.
|
80
|
-
*
|
81
|
-
* @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
|
82
|
-
* @param {number} height - The height to check against the query.
|
83
|
-
* @returns {boolean} True if the height matches the query range, false otherwise.
|
84
|
-
*
|
85
|
-
* @example
|
86
|
-
* isWithinTheHeight('h[100,200]', 150) // returns true
|
87
|
-
* isWithinTheHeight('h[100]', 50) // returns false
|
88
|
-
* isWithinTheHeight('h[100]', 150) // returns true
|
89
|
-
*/
|
90
|
-
export const isWithinTheHeight = (query, height) => {
|
91
|
-
const [minHeight, maxHeight] = extractValues(query);
|
92
|
-
if (maxHeight && height >= minHeight && height <= maxHeight) {
|
93
|
-
return true;
|
94
|
-
}
|
95
|
-
return !maxHeight && height >= minHeight;
|
96
|
-
};
|
97
|
-
|
98
|
-
/**
|
99
|
-
* Determines if the given screen size matches both the specified width and height ranges in the query.
|
100
|
-
*
|
101
|
-
* The function checks if the provided screen size (both width and height) falls within the ranges
|
102
|
-
* specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
|
103
|
-
*
|
104
|
-
* @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
|
105
|
-
* @param {ScreenSize} screenSize - The screen size to check against the query.
|
106
|
-
* @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
|
107
|
-
*
|
108
|
-
* @example
|
109
|
-
* const screenSize = { width: 150, height: 350 }
|
110
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
|
111
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
|
112
|
-
*/
|
113
|
-
export const isWithinTheWidthAndHeight = (query, screenSize) => {
|
114
|
-
const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(q, screenSize)).filter(Boolean);
|
115
|
-
return result.length === 2;
|
116
|
-
};
|
117
|
-
|
118
|
-
/**
|
119
|
-
* Checks if the given query string is a valid custom media query.
|
120
|
-
*
|
121
|
-
* The valid custom media query formats include:
|
122
|
-
* - :w[200]
|
123
|
-
* - :w[0, 200]
|
124
|
-
* - :w[, 300]
|
125
|
-
* - :h[200]
|
126
|
-
* - :h[0, 500]
|
127
|
-
* - :h[,200]
|
128
|
-
* - :w[100, 300]:h[200,500]
|
129
|
-
* - :h[200,500]:w[100, 300]
|
130
|
-
*
|
131
|
-
* @param {string} query - The query string to be checked.
|
132
|
-
* @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
|
133
|
-
* @example
|
134
|
-
*
|
135
|
-
* isMediaQuery(':w[200]') // true
|
136
|
-
* isMediaQuery(':w100]') // false
|
137
|
-
*/
|
138
|
-
export const isMediaQuery = query => {
|
139
|
-
const regex = /^(?:(:w\[\d*(?:,\s?\d+)?])?(:h\[\d*(?:,\s?\d+)?])?|(:h\[\d*(?:,\s?\d+)?])?(:w\[\d*(?:,\s?\d+)?])?)$/;
|
140
|
-
return query.length > 0 && regex.test(query);
|
141
|
-
};
|
142
|
-
|
143
|
-
/**
|
144
|
-
* Retrieves the first matching custom media query key based on the provided screen size.
|
145
|
-
*
|
146
|
-
* The function processes an array of media queries and returns the first query that matches
|
147
|
-
* the given screen size. The media queries can be in formats like:
|
148
|
-
* - w[200]
|
149
|
-
* - w[0, 200]
|
150
|
-
* - w[, 300]
|
151
|
-
* - h[200]
|
152
|
-
* - h[0, 500]
|
153
|
-
* - h[,200]
|
154
|
-
* - w[100, 300]:h[200,500]
|
155
|
-
* - h[200,500]:w[100, 300]
|
156
|
-
*
|
157
|
-
* @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
|
158
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
159
|
-
* @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
|
160
|
-
* @example
|
161
|
-
*
|
162
|
-
* const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
|
163
|
-
* const size = { width: 250, height: 400 }
|
164
|
-
* getKeyForCustomMediaQuery(queries, size) // ':w[200]
|
165
|
-
*/
|
166
|
-
export const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
|
167
|
-
const [matchedQuery] = mediaQueries.flatMap(_ref => {
|
168
|
-
let [key] = _ref;
|
169
|
-
if (key.includes('w') && key.includes('h')) {
|
170
|
-
return isWithinBreakpoint(key, screenSize) ? key : undefined;
|
171
|
-
}
|
172
|
-
return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
|
173
|
-
}).filter(Boolean);
|
174
|
-
return matchedQuery;
|
175
|
-
};
|
176
|
-
//# sourceMappingURL=mediaQueries.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["extractValues","codedValue","lh","rh","replace","split","Number","isWithinBreakpoint","query","screenSize","includes","isWithinTheWidthAndHeight","charAt","isWithinTheWidth","width","isWithinTheHeight","height","minWidth","maxWidth","minHeight","maxHeight","result","filter","Boolean","map","q","length","isMediaQuery","regex","test","getKeyForCustomMediaQuery","mediaQueries","matchedQuery","flatMap","_ref","key","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.ts"],"mappings":"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"}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { PropsWithChildren } from 'react';
|
3
|
-
interface UnistylesThemeProps extends PropsWithChildren {
|
4
|
-
theme: any;
|
5
|
-
}
|
6
|
-
export declare const UnistylesContext: React.Context<{}>;
|
7
|
-
export declare const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps>;
|
8
|
-
export {};
|
9
|
-
//# sourceMappingURL=UnistylesTheme.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"UnistylesTheme.d.ts","sourceRoot":"","sources":["../../../src/UnistylesTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,UAAU,mBAAoB,SAAQ,iBAAiB;IACnD,KAAK,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,mBAAoB,CAAA;AAEjD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAOvE,CAAA"}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
|
-
export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
|
3
|
-
createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
|
4
|
-
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
|
5
|
-
theme: T;
|
6
|
-
breakpoint: keyof B & string;
|
7
|
-
styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
|
8
|
-
};
|
9
|
-
};
|
10
|
-
//# sourceMappingURL=createUnistyles.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;;;;;;;CAuD3B,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useDimensions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UAAmC,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UA0BhC,CAAA"}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
type Optional<TOptional extends string> = TOptional | '';
|
2
|
-
type Separator = ',' | ', ';
|
3
|
-
type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`;
|
4
|
-
type WidthMediaQuery = `:w${MediaQuery}`;
|
5
|
-
type HeightMediaQuery = `:h${MediaQuery}`;
|
6
|
-
export type MediaQueries = `${WidthMediaQuery}${Optional<HeightMediaQuery>}` | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`;
|
7
|
-
export {};
|
8
|
-
//# sourceMappingURL=mediaQueries.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/types/mediaQueries.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,CAAC,SAAS,SAAS,MAAM,IAAI,SAAS,GAAG,EAAE,CAAA;AACxD,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,CAAA;AAE3B,KAAK,UAAU,GAAG,IAAI,SAAS,GAAG,MAAM,GAAG,GAAG,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,SAAS,GAAG,MAAM,EAAE,CAAC,GAAG,CAAA;AAC/F,KAAK,eAAe,GAAG,KAAK,UAAU,EAAE,CAAA;AACxC,KAAK,gBAAgB,GAAG,KAAK,UAAU,EAAE,CAAA;AAEzC,MAAM,MAAM,YAAY,GAClB,GAAG,eAAe,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,GACjD,GAAG,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAA"}
|
@@ -1,130 +0,0 @@
|
|
1
|
-
import type { ScreenSize } from '../types';
|
2
|
-
/**
|
3
|
-
* Extracts numeric values from a coded string.
|
4
|
-
*
|
5
|
-
* The function is designed to process strings that have a format like "w[100,200]" or "h[300]".
|
6
|
-
* It removes characters 'w', 'h', '[', and ']' from the input string and then extracts the numbers.
|
7
|
-
*
|
8
|
-
* @param {string} codedValue - The input string to extract values from.
|
9
|
-
* @returns {Array<number>} An array of extracted numbers. Can contain one or two numbers based on the input format.
|
10
|
-
*
|
11
|
-
* @example
|
12
|
-
* extractValues("w[100,200]") // returns [100, 200]
|
13
|
-
* extractValues("h[300]") // returns [300]
|
14
|
-
* extractValues("h[,300]") // returns [0,300]
|
15
|
-
* extractValues("h[100,]") // returns [100]
|
16
|
-
*/
|
17
|
-
export declare const extractValues: (codedValue: string) => Array<number>;
|
18
|
-
/**
|
19
|
-
* Determines if the given screen size matches the specified breakpoint query.
|
20
|
-
*
|
21
|
-
* The function checks if the screen size (width and/or height) falls within the range
|
22
|
-
* specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
|
23
|
-
* or both.
|
24
|
-
*
|
25
|
-
* @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
|
26
|
-
* @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
|
27
|
-
* @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
|
28
|
-
*
|
29
|
-
* @example
|
30
|
-
* const screenSize = { width: 150, height: 350 }
|
31
|
-
* isWithinBreakpoint('w[100,200]', screenSize) // returns true
|
32
|
-
* isWithinBreakpoint('h[400]', screenSize) // returns false
|
33
|
-
*/
|
34
|
-
export declare const isWithinBreakpoint: (query: string, screenSize: ScreenSize) => boolean;
|
35
|
-
/**
|
36
|
-
* Determines if the given width matches the specified width range in the query.
|
37
|
-
*
|
38
|
-
* The function checks if the provided width falls within the range specified by the query.
|
39
|
-
* The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
|
40
|
-
* it's treated as a minimum width.
|
41
|
-
*
|
42
|
-
* @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
|
43
|
-
* @param {number} width - The width to check against the query.
|
44
|
-
* @returns {boolean} True if the width matches the query range, false otherwise.
|
45
|
-
*
|
46
|
-
* @example
|
47
|
-
* isWithinTheWidth('w[100,200]', 150) // returns true
|
48
|
-
* isWithinTheWidth('w[100]', 50) // returns false
|
49
|
-
* isWithinTheWidth('w[100]', 150) // returns true
|
50
|
-
*/
|
51
|
-
export declare const isWithinTheWidth: (query: string, width: number) => boolean;
|
52
|
-
/**
|
53
|
-
* Determines if the given height matches the specified height range in the query.
|
54
|
-
*
|
55
|
-
* The function checks if the provided height falls within the range specified by the query.
|
56
|
-
* The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
|
57
|
-
* it's treated as a minimum height.
|
58
|
-
*
|
59
|
-
* @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
|
60
|
-
* @param {number} height - The height to check against the query.
|
61
|
-
* @returns {boolean} True if the height matches the query range, false otherwise.
|
62
|
-
*
|
63
|
-
* @example
|
64
|
-
* isWithinTheHeight('h[100,200]', 150) // returns true
|
65
|
-
* isWithinTheHeight('h[100]', 50) // returns false
|
66
|
-
* isWithinTheHeight('h[100]', 150) // returns true
|
67
|
-
*/
|
68
|
-
export declare const isWithinTheHeight: (query: string, height: number) => boolean;
|
69
|
-
/**
|
70
|
-
* Determines if the given screen size matches both the specified width and height ranges in the query.
|
71
|
-
*
|
72
|
-
* The function checks if the provided screen size (both width and height) falls within the ranges
|
73
|
-
* specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
|
74
|
-
*
|
75
|
-
* @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
|
76
|
-
* @param {ScreenSize} screenSize - The screen size to check against the query.
|
77
|
-
* @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
|
78
|
-
*
|
79
|
-
* @example
|
80
|
-
* const screenSize = { width: 150, height: 350 }
|
81
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
|
82
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
|
83
|
-
*/
|
84
|
-
export declare const isWithinTheWidthAndHeight: (query: string, screenSize: ScreenSize) => boolean;
|
85
|
-
/**
|
86
|
-
* Checks if the given query string is a valid custom media query.
|
87
|
-
*
|
88
|
-
* The valid custom media query formats include:
|
89
|
-
* - :w[200]
|
90
|
-
* - :w[0, 200]
|
91
|
-
* - :w[, 300]
|
92
|
-
* - :h[200]
|
93
|
-
* - :h[0, 500]
|
94
|
-
* - :h[,200]
|
95
|
-
* - :w[100, 300]:h[200,500]
|
96
|
-
* - :h[200,500]:w[100, 300]
|
97
|
-
*
|
98
|
-
* @param {string} query - The query string to be checked.
|
99
|
-
* @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
|
100
|
-
* @example
|
101
|
-
*
|
102
|
-
* isMediaQuery(':w[200]') // true
|
103
|
-
* isMediaQuery(':w100]') // false
|
104
|
-
*/
|
105
|
-
export declare const isMediaQuery: (query: string) => boolean;
|
106
|
-
/**
|
107
|
-
* Retrieves the first matching custom media query key based on the provided screen size.
|
108
|
-
*
|
109
|
-
* The function processes an array of media queries and returns the first query that matches
|
110
|
-
* the given screen size. The media queries can be in formats like:
|
111
|
-
* - w[200]
|
112
|
-
* - w[0, 200]
|
113
|
-
* - w[, 300]
|
114
|
-
* - h[200]
|
115
|
-
* - h[0, 500]
|
116
|
-
* - h[,200]
|
117
|
-
* - w[100, 300]:h[200,500]
|
118
|
-
* - h[200,500]:w[100, 300]
|
119
|
-
*
|
120
|
-
* @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
|
121
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
122
|
-
* @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
|
123
|
-
* @example
|
124
|
-
*
|
125
|
-
* const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
|
126
|
-
* const size = { width: 250, height: 400 }
|
127
|
-
* getKeyForCustomMediaQuery(queries, size) // ':w[200]
|
128
|
-
*/
|
129
|
-
export declare const getKeyForCustomMediaQuery: (mediaQueries: Array<[string, string | number | undefined]>, screenSize: ScreenSize) => string | undefined;
|
130
|
-
//# sourceMappingURL=mediaQueries.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAQ9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
|
package/src/UnistylesTheme.tsx
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import React, { createContext } from 'react'
|
2
|
-
import type { PropsWithChildren } from 'react'
|
3
|
-
|
4
|
-
interface UnistylesThemeProps extends PropsWithChildren {
|
5
|
-
theme: any
|
6
|
-
}
|
7
|
-
|
8
|
-
export const UnistylesContext = createContext({})
|
9
|
-
|
10
|
-
export const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps> = ({
|
11
|
-
theme,
|
12
|
-
children
|
13
|
-
}) => (
|
14
|
-
<UnistylesContext.Provider value={theme}>
|
15
|
-
{children}
|
16
|
-
</UnistylesContext.Provider>
|
17
|
-
)
|