@mirai/ui 2.0.32 → 2.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1385,7 +1385,7 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
|
|
|
1385
1385
|
|
|
1386
1386
|
/* breakpoints */
|
|
1387
1387
|
--mirai-ui-breakpoint-S: 480px;
|
|
1388
|
-
--mirai-ui-breakpoint-M:
|
|
1388
|
+
--mirai-ui-breakpoint-M: 1180px;
|
|
1389
1389
|
--mirai-ui-breakpoint-content: 1280px;
|
|
1390
1390
|
|
|
1391
1391
|
/* motion */
|
|
@@ -1437,8 +1437,8 @@ This _hook_ can help you know what type of device your application or component
|
|
|
1437
1437
|
- `isPortrait:bool` orientation is portrait
|
|
1438
1438
|
<!-- type -->
|
|
1439
1439
|
- `isMobile:bool` is in the mobile breakpoint (<=480)
|
|
1440
|
-
- `isTable:bool` is in the mobile breakpoint (>480px && <=
|
|
1441
|
-
- `isDesktop:bool` in in the desktop breakpoint (>
|
|
1440
|
+
- `isTable:bool` is in the mobile breakpoint (>480px && <=1180px)
|
|
1441
|
+
- `isDesktop:bool` in in the desktop breakpoint (>1180px)
|
|
1442
1442
|
|
|
1443
1443
|
Let's see a simple use of the hook:
|
|
1444
1444
|
|
|
@@ -86,7 +86,7 @@ exports[`component:<Slider> inherit:className 1`] = `
|
|
|
86
86
|
</ui-images>
|
|
87
87
|
</ui-scrollview>
|
|
88
88
|
<ui-pressable
|
|
89
|
-
class="pressable button
|
|
89
|
+
class="pressable button second"
|
|
90
90
|
tabindex="0"
|
|
91
91
|
>
|
|
92
92
|
<ui-icon
|
|
@@ -201,7 +201,7 @@ exports[`component:<Slider> prop:auto 1`] = `
|
|
|
201
201
|
</ui-images>
|
|
202
202
|
</ui-scrollview>
|
|
203
203
|
<ui-pressable
|
|
204
|
-
class="pressable button
|
|
204
|
+
class="pressable button second"
|
|
205
205
|
tabindex="0"
|
|
206
206
|
>
|
|
207
207
|
<ui-icon
|
|
@@ -316,7 +316,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
|
|
|
316
316
|
</ui-images>
|
|
317
317
|
</ui-scrollview>
|
|
318
318
|
<ui-pressable
|
|
319
|
-
class="pressable button
|
|
319
|
+
class="pressable button second"
|
|
320
320
|
tabindex="0"
|
|
321
321
|
>
|
|
322
322
|
<ui-icon
|
|
@@ -476,7 +476,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
476
476
|
</ui-images>
|
|
477
477
|
</ui-scrollview>
|
|
478
478
|
<ui-pressable
|
|
479
|
-
class="pressable button
|
|
479
|
+
class="pressable button second"
|
|
480
480
|
tabindex="0"
|
|
481
481
|
>
|
|
482
482
|
<ui-icon
|
|
@@ -512,7 +512,7 @@ exports[`component:<Slider> prop:index 1`] = `
|
|
|
512
512
|
style="width: 360px;"
|
|
513
513
|
>
|
|
514
514
|
<ui-pressable
|
|
515
|
-
class="pressable button
|
|
515
|
+
class="pressable button first"
|
|
516
516
|
tabindex="0"
|
|
517
517
|
>
|
|
518
518
|
<ui-icon
|
|
@@ -591,7 +591,7 @@ exports[`component:<Slider> prop:index 1`] = `
|
|
|
591
591
|
</ui-images>
|
|
592
592
|
</ui-scrollview>
|
|
593
593
|
<ui-pressable
|
|
594
|
-
class="pressable button
|
|
594
|
+
class="pressable button second"
|
|
595
595
|
tabindex="0"
|
|
596
596
|
>
|
|
597
597
|
<ui-icon
|
|
@@ -706,7 +706,7 @@ exports[`component:<Slider> prop:indicator 1`] = `
|
|
|
706
706
|
</ui-images>
|
|
707
707
|
</ui-scrollview>
|
|
708
708
|
<ui-pressable
|
|
709
|
-
class="pressable button
|
|
709
|
+
class="pressable button second"
|
|
710
710
|
tabindex="0"
|
|
711
711
|
>
|
|
712
712
|
<ui-icon
|
|
@@ -829,7 +829,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
|
|
|
829
829
|
</ui-images>
|
|
830
830
|
</ui-scrollview>
|
|
831
831
|
<ui-pressable
|
|
832
|
-
class="pressable button
|
|
832
|
+
class="pressable button second"
|
|
833
833
|
tabindex="0"
|
|
834
834
|
>
|
|
835
835
|
<ui-icon
|
|
@@ -975,7 +975,7 @@ exports[`component:<Slider> prop:preloadImages 1`] = `
|
|
|
975
975
|
</ui-images>
|
|
976
976
|
</ui-scrollview>
|
|
977
977
|
<ui-pressable
|
|
978
|
-
class="pressable button
|
|
978
|
+
class="pressable button second"
|
|
979
979
|
tabindex="0"
|
|
980
980
|
>
|
|
981
981
|
<ui-icon
|
|
@@ -1090,7 +1090,7 @@ exports[`component:<Slider> renders 1`] = `
|
|
|
1090
1090
|
</ui-images>
|
|
1091
1091
|
</ui-scrollview>
|
|
1092
1092
|
<ui-pressable
|
|
1093
|
-
class="pressable button
|
|
1093
|
+
class="pressable button second"
|
|
1094
1094
|
tabindex="0"
|
|
1095
1095
|
>
|
|
1096
1096
|
<ui-icon
|
|
@@ -1206,7 +1206,7 @@ exports[`component:<Slider> testId 1`] = `
|
|
|
1206
1206
|
</ui-images>
|
|
1207
1207
|
</ui-scrollview>
|
|
1208
1208
|
<ui-pressable
|
|
1209
|
-
class="pressable button
|
|
1209
|
+
class="pressable button second"
|
|
1210
1210
|
tabindex="0"
|
|
1211
1211
|
>
|
|
1212
1212
|
<ui-icon
|
package/build/hooks/useDevice.js
CHANGED
|
@@ -39,7 +39,7 @@ var useDevice = function useDevice() {
|
|
|
39
39
|
_Theme$get$breakpoint = _Theme$get.breakpointS,
|
|
40
40
|
breakpointS = _Theme$get$breakpoint === void 0 ? '480px' : _Theme$get$breakpoint,
|
|
41
41
|
_Theme$get$breakpoint2 = _Theme$get.breakpointM,
|
|
42
|
-
breakpointM = _Theme$get$breakpoint2 === void 0 ? '
|
|
42
|
+
breakpointM = _Theme$get$breakpoint2 === void 0 ? '1180px' : _Theme$get$breakpoint2;
|
|
43
43
|
var isLandscape = resolution.width >= resolution.height;
|
|
44
44
|
var isMobile = resolution.width <= (0, _helpers2.sanitizePx)(breakpointS);
|
|
45
45
|
var isTablet = !isMobile && resolution.width <= (0, _helpers2.sanitizePx)(breakpointM);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { getNavigator } from '../helpers';\nimport { Theme } from '../theme';\nimport { getResolution, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n const [resolution, setResolution] = useState(getResolution());\n\n useEffect(() => {\n const handleResize = () => setResolution(getResolution());\n\n window.addEventListener('resize', handleResize);\n\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return useMemo(() => {\n const { breakpointS = '480px', breakpointM = '
|
|
1
|
+
{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { getNavigator } from '../helpers';\nimport { Theme } from '../theme';\nimport { getResolution, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n const [resolution, setResolution] = useState(getResolution());\n\n useEffect(() => {\n const handleResize = () => setResolution(getResolution());\n\n window.addEventListener('resize', handleResize);\n\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return useMemo(() => {\n const { breakpointS = '480px', breakpointM = '1180px' } = Theme.get();\n const isLandscape = resolution.width >= resolution.height;\n const isMobile = resolution.width <= sanitizePx(breakpointS);\n const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n const navigator = getNavigator();\n\n return {\n ...resolution,\n ...navigator,\n isLandscape,\n isPortrait: !isLandscape,\n isMobile,\n isTablet,\n isDesktop: !isMobile && !isTablet,\n };\n }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE/C,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,uBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,uBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAA0DC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA7DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,QAAQ;IACrD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,oBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,oBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
|