@fountain-ui/lab 2.0.0-beta.26 → 2.0.0-beta.28
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/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetWeb.js +20 -4
- package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetWeb.js +19 -4
- package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/typescript/BottomSheet/BottomSheetProps.d.ts +2 -1
- package/package.json +3 -3
- package/src/BottomSheet/BottomSheetProps.ts +2 -1
- package/src/BottomSheet/BottomSheetWeb.tsx +17 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n */\n snapPoints: Array<number>;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n * Only number type or string type(~% format) can be used.\n */\n snapPoints: Array<number | string>;\n}> {}\n"],"mappings":""}
|
|
@@ -7,6 +7,8 @@ exports.default = BottomSheet;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
10
12
|
var _core = require("@fountain-ui/core");
|
|
11
13
|
|
|
12
14
|
var _AnimatedY = _interopRequireDefault(require("../AnimatedY"));
|
|
@@ -34,8 +36,19 @@ const useStyles = function () {
|
|
|
34
36
|
};
|
|
35
37
|
};
|
|
36
38
|
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
+
const convertHeightAsPixel = (windowHeight, value) => {
|
|
40
|
+
if (typeof value === 'number') {
|
|
41
|
+
return value;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const percentageRegex = new RegExp(/^[0-9]+%$/);
|
|
45
|
+
|
|
46
|
+
if (percentageRegex.test(value)) {
|
|
47
|
+
const percentage = parseFloat(value) / 100;
|
|
48
|
+
return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return 0;
|
|
39
52
|
};
|
|
40
53
|
|
|
41
54
|
function BottomSheet(props) {
|
|
@@ -47,6 +60,9 @@ function BottomSheet(props) {
|
|
|
47
60
|
snapPoints
|
|
48
61
|
} = props;
|
|
49
62
|
const styles = useStyles();
|
|
63
|
+
const {
|
|
64
|
+
height: windowHeight
|
|
65
|
+
} = (0, _reactNative.useWindowDimensions)();
|
|
50
66
|
|
|
51
67
|
const handleClose = () => {
|
|
52
68
|
if (onChange) {
|
|
@@ -54,8 +70,8 @@ function BottomSheet(props) {
|
|
|
54
70
|
}
|
|
55
71
|
};
|
|
56
72
|
|
|
57
|
-
const height =
|
|
58
|
-
const translateY = height - (snapPoints[index] ?? 0);
|
|
73
|
+
const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
|
|
74
|
+
const translateY = height - convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0);
|
|
59
75
|
return /*#__PURE__*/_react.default.createElement(_core.Modal, {
|
|
60
76
|
backdropOpacity: backdropOpacity,
|
|
61
77
|
onClose: handleClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","height","useWindowDimensions","handleClose","length","translateY","css","StyleSheet","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n const theme = useTheme();\n\n return {\n root: {\n justifyContent: 'flex-end',\n zIndex: theme.zIndex.dialog,\n },\n animated: {\n alignSelf: 'center',\n maxWidth: 720,\n width: '100%',\n },\n paper: {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n flexGrow: 1,\n overflow: 'hidden',\n },\n };\n};\n\nconst convertHeightAsPixel = (windowHeight: number, value: number | string): number => {\n if (typeof value === 'number') {\n return value;\n }\n\n const percentageRegex = new RegExp(/^[0-9]+%$/);\n if (percentageRegex.test(value)) {\n const percentage = parseFloat(value) / 100;\n return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);\n }\n\n return 0;\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity,\n children,\n index,\n onChange,\n snapPoints,\n } = props;\n\n const styles = useStyles();\n\n const { height: windowHeight } = useWindowDimensions();\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);\n const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <AnimatedY\n style={styles.animated}\n translateY={translateY}\n >\n <Paper\n elevation={12}\n style={[\n styles.paper,\n { height },\n ]}\n >\n {children}\n </Paper>\n </AnimatedY>\n </Modal>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAKA,MAAMA,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEJ,KAAK,CAACI,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAuBC,KAAvB,KAA0D;EACnF,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;IAC3B,OAAOA,KAAP;EACH;;EAED,MAAMC,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBH,KAArB,CAAJ,EAAiC;IAC7B,MAAMI,UAAU,GAAGC,UAAU,CAACL,KAAD,CAAV,GAAoB,GAAvC;IACA,OAAOM,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBG,IAAI,CAACC,KAAL,CAAWT,YAAY,GAAGK,UAA1B,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAce,SAASK,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGlC,SAAS,EAAxB;EAEA,MAAM;IAAEmC,MAAM,EAAElB;EAAV,IAA2B,IAAAmB,gCAAA,GAAjC;;EAEA,MAAMC,WAAW,GAAG,MAAM;IACtB,IAAIL,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMG,MAAM,GAAGnB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACA,UAAU,CAACK,MAAX,GAAoB,CAArB,CAAV,IAAqC,CAApD,CAAnC;EACA,MAAMC,UAAU,GAAGJ,MAAM,GAAInB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACF,KAAD,CAAV,IAAqB,CAApC,CAAjD;EAEA,oBACI,6BAAC,WAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEQ,WAFb;IAGI,OAAO,EAAEN,KAAK,IAAI,CAHtB;IAII,KAAK,EAAE,IAAAS,SAAA,EAAI,CAACC,gBAAA,CAAWC,YAAZ,EAA0BR,MAAM,CAAC/B,IAAjC,CAAJ;EAJX,gBAMI,6BAAC,kBAAD;IACI,KAAK,EAAE+B,MAAM,CAAC3B,QADlB;IAEI,UAAU,EAAEgC;EAFhB,gBAII,6BAAC,WAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHL,MAAM,CAACvB,KADJ,EAEH;MAAEwB;IAAF,CAFG;EAFX,GAOKL,QAPL,CAJJ,CANJ,CADJ;AAuBH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n */\n snapPoints: Array<number>;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["BottomSheetProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport default interface BottomSheetProps extends ComponentProps<{\n /**\n * Opacity for BackdropComponent\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * BottomSheet children, usually the included sub-components.\n */\n children?: React.ReactNode;\n\n /**\n * Snap index. You could also provide -1 to bottom sheet in closed state.\n */\n index: number;\n\n /**\n * Callback fired when the index is changed.\n * Important! Use memoized value.\n */\n onChange?: (newIndex: number) => void;\n\n /**\n * Points for the bottom sheet to snap to, points should be sorted from bottom to top.\n * Important! Use memoized value.\n * Only number type or string type(~% format) can be used.\n */\n snapPoints: Array<number | string>;\n}> {}\n"],"mappings":""}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useWindowDimensions } from 'react-native';
|
|
2
3
|
import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
|
|
3
4
|
import AnimatedY from '../AnimatedY';
|
|
4
5
|
|
|
@@ -23,8 +24,19 @@ const useStyles = function () {
|
|
|
23
24
|
};
|
|
24
25
|
};
|
|
25
26
|
|
|
26
|
-
const
|
|
27
|
-
|
|
27
|
+
const convertHeightAsPixel = (windowHeight, value) => {
|
|
28
|
+
if (typeof value === 'number') {
|
|
29
|
+
return value;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const percentageRegex = new RegExp(/^[0-9]+%$/);
|
|
33
|
+
|
|
34
|
+
if (percentageRegex.test(value)) {
|
|
35
|
+
const percentage = parseFloat(value) / 100;
|
|
36
|
+
return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return 0;
|
|
28
40
|
};
|
|
29
41
|
|
|
30
42
|
export default function BottomSheet(props) {
|
|
@@ -36,6 +48,9 @@ export default function BottomSheet(props) {
|
|
|
36
48
|
snapPoints
|
|
37
49
|
} = props;
|
|
38
50
|
const styles = useStyles();
|
|
51
|
+
const {
|
|
52
|
+
height: windowHeight
|
|
53
|
+
} = useWindowDimensions();
|
|
39
54
|
|
|
40
55
|
const handleClose = () => {
|
|
41
56
|
if (onChange) {
|
|
@@ -43,8 +58,8 @@ export default function BottomSheet(props) {
|
|
|
43
58
|
}
|
|
44
59
|
};
|
|
45
60
|
|
|
46
|
-
const height =
|
|
47
|
-
const translateY = height - (snapPoints[index] ?? 0);
|
|
61
|
+
const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
|
|
62
|
+
const translateY = height - convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0);
|
|
48
63
|
return /*#__PURE__*/React.createElement(Modal, {
|
|
49
64
|
backdropOpacity: backdropOpacity,
|
|
50
65
|
onClose: handleClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","
|
|
1
|
+
{"version":3,"names":["React","useWindowDimensions","Modal","Paper","StyleSheet","css","useTheme","AnimatedY","useStyles","theme","root","justifyContent","zIndex","dialog","animated","alignSelf","maxWidth","width","paper","borderBottomLeftRadius","borderBottomRightRadius","flexGrow","overflow","convertHeightAsPixel","windowHeight","value","percentageRegex","RegExp","test","percentage","parseFloat","isNaN","Math","round","BottomSheet","props","backdropOpacity","children","index","onChange","snapPoints","styles","height","handleClose","length","translateY","absoluteFill"],"sources":["BottomSheetWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport AnimatedY from '../AnimatedY';\nimport type BottomSheetProps from './BottomSheetProps';\n\ntype BottomSheetStyles = NamedStylesStringUnion<'root' | 'animated' | 'paper'>;\n\nconst useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {\n const theme = useTheme();\n\n return {\n root: {\n justifyContent: 'flex-end',\n zIndex: theme.zIndex.dialog,\n },\n animated: {\n alignSelf: 'center',\n maxWidth: 720,\n width: '100%',\n },\n paper: {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0,\n flexGrow: 1,\n overflow: 'hidden',\n },\n };\n};\n\nconst convertHeightAsPixel = (windowHeight: number, value: number | string): number => {\n if (typeof value === 'number') {\n return value;\n }\n\n const percentageRegex = new RegExp(/^[0-9]+%$/);\n if (percentageRegex.test(value)) {\n const percentage = parseFloat(value) / 100;\n return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);\n }\n\n return 0;\n};\n\nexport default function BottomSheet(props: BottomSheetProps) {\n const {\n backdropOpacity,\n children,\n index,\n onChange,\n snapPoints,\n } = props;\n\n const styles = useStyles();\n\n const { height: windowHeight } = useWindowDimensions();\n\n const handleClose = () => {\n if (onChange) {\n onChange(-1);\n }\n };\n\n const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);\n const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));\n\n return (\n <Modal\n backdropOpacity={backdropOpacity}\n onClose={handleClose}\n visible={index >= 0}\n style={css([StyleSheet.absoluteFill, styles.root])}\n >\n <AnimatedY\n style={styles.animated}\n translateY={translateY}\n >\n <Paper\n elevation={12}\n style={[\n styles.paper,\n { height },\n ]}\n >\n {children}\n </Paper>\n </AnimatedY>\n </Modal>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,KAAT,EAAgBC,KAAhB,EAAuBC,UAAvB,EAAmCC,GAAnC,EAAwCC,QAAxC,QAAwD,mBAAxD;AAEA,OAAOC,SAAP,MAAsB,cAAtB;;AAKA,MAAMC,SAAuC,GAAG,YAA+B;EAC3E,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,OAAO;IACHI,IAAI,EAAE;MACFC,cAAc,EAAE,UADd;MAEFC,MAAM,EAAEH,KAAK,CAACG,MAAN,CAAaC;IAFnB,CADH;IAKHC,QAAQ,EAAE;MACNC,SAAS,EAAE,QADL;MAENC,QAAQ,EAAE,GAFJ;MAGNC,KAAK,EAAE;IAHD,CALP;IAUHC,KAAK,EAAE;MACHC,sBAAsB,EAAE,CADrB;MAEHC,uBAAuB,EAAE,CAFtB;MAGHC,QAAQ,EAAE,CAHP;MAIHC,QAAQ,EAAE;IAJP;EAVJ,CAAP;AAiBH,CApBD;;AAsBA,MAAMC,oBAAoB,GAAG,CAACC,YAAD,EAAuBC,KAAvB,KAA0D;EACnF,IAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;IAC3B,OAAOA,KAAP;EACH;;EAED,MAAMC,eAAe,GAAG,IAAIC,MAAJ,CAAW,WAAX,CAAxB;;EACA,IAAID,eAAe,CAACE,IAAhB,CAAqBH,KAArB,CAAJ,EAAiC;IAC7B,MAAMI,UAAU,GAAGC,UAAU,CAACL,KAAD,CAAV,GAAoB,GAAvC;IACA,OAAOM,KAAK,CAACF,UAAD,CAAL,GAAoB,CAApB,GAAwBG,IAAI,CAACC,KAAL,CAAWT,YAAY,GAAGK,UAA1B,CAA/B;EACH;;EAED,OAAO,CAAP;AACH,CAZD;;AAcA,eAAe,SAASK,WAAT,CAAqBC,KAArB,EAA8C;EACzD,MAAM;IACFC,eADE;IAEFC,QAFE;IAGFC,KAHE;IAIFC,QAJE;IAKFC;EALE,IAMFL,KANJ;EAQA,MAAMM,MAAM,GAAGjC,SAAS,EAAxB;EAEA,MAAM;IAAEkC,MAAM,EAAElB;EAAV,IAA2BvB,mBAAmB,EAApD;;EAEA,MAAM0C,WAAW,GAAG,MAAM;IACtB,IAAIJ,QAAJ,EAAc;MACVA,QAAQ,CAAC,CAAC,CAAF,CAAR;IACH;EACJ,CAJD;;EAMA,MAAMG,MAAM,GAAGnB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACA,UAAU,CAACI,MAAX,GAAoB,CAArB,CAAV,IAAqC,CAApD,CAAnC;EACA,MAAMC,UAAU,GAAGH,MAAM,GAAInB,oBAAoB,CAACC,YAAD,EAAegB,UAAU,CAACF,KAAD,CAAV,IAAqB,CAApC,CAAjD;EAEA,oBACI,oBAAC,KAAD;IACI,eAAe,EAAEF,eADrB;IAEI,OAAO,EAAEO,WAFb;IAGI,OAAO,EAAEL,KAAK,IAAI,CAHtB;IAII,KAAK,EAAEjC,GAAG,CAAC,CAACD,UAAU,CAAC0C,YAAZ,EAA0BL,MAAM,CAAC/B,IAAjC,CAAD;EAJd,gBAMI,oBAAC,SAAD;IACI,KAAK,EAAE+B,MAAM,CAAC3B,QADlB;IAEI,UAAU,EAAE+B;EAFhB,gBAII,oBAAC,KAAD;IACI,SAAS,EAAE,EADf;IAEI,KAAK,EAAE,CACHJ,MAAM,CAACvB,KADJ,EAEH;MAAEwB;IAAF,CAFG;EAFX,GAOKL,QAPL,CAJJ,CANJ,CADJ;AAuBH;AAAA"}
|
|
@@ -22,7 +22,8 @@ export default interface BottomSheetProps extends ComponentProps<{
|
|
|
22
22
|
/**
|
|
23
23
|
* Points for the bottom sheet to snap to, points should be sorted from bottom to top.
|
|
24
24
|
* Important! Use memoized value.
|
|
25
|
+
* Only number type or string type(~% format) can be used.
|
|
25
26
|
*/
|
|
26
|
-
snapPoints: Array<number>;
|
|
27
|
+
snapPoints: Array<number | string>;
|
|
27
28
|
}> {
|
|
28
29
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/lab",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.28",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Fountain-UI Team",
|
|
6
6
|
"description": "Incubator for Fountain-UI React components.",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@gorhom/bottom-sheet": "4.1.3",
|
|
47
47
|
"date-fns": "^2.23.0",
|
|
48
48
|
"react-native-pager-view": "^4.2.4",
|
|
49
|
-
"react-native-safe-area-context": "^
|
|
49
|
+
"react-native-safe-area-context": "^4.0.0"
|
|
50
50
|
},
|
|
51
51
|
"react-native-builder-bob": {
|
|
52
52
|
"source": "./src",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "54684826fbd0cd45d1bbc865c4621d676055e987"
|
|
74
74
|
}
|
|
@@ -27,6 +27,7 @@ export default interface BottomSheetProps extends ComponentProps<{
|
|
|
27
27
|
/**
|
|
28
28
|
* Points for the bottom sheet to snap to, points should be sorted from bottom to top.
|
|
29
29
|
* Important! Use memoized value.
|
|
30
|
+
* Only number type or string type(~% format) can be used.
|
|
30
31
|
*/
|
|
31
|
-
snapPoints: Array<number>;
|
|
32
|
+
snapPoints: Array<number | string>;
|
|
32
33
|
}> {}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useWindowDimensions } from 'react-native';
|
|
2
3
|
import { Modal, Paper, StyleSheet, css, useTheme } from '@fountain-ui/core';
|
|
3
4
|
import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
4
5
|
import AnimatedY from '../AnimatedY';
|
|
@@ -28,8 +29,18 @@ const useStyles: UseStyles<BottomSheetStyles> = function (): BottomSheetStyles {
|
|
|
28
29
|
};
|
|
29
30
|
};
|
|
30
31
|
|
|
31
|
-
const
|
|
32
|
-
|
|
32
|
+
const convertHeightAsPixel = (windowHeight: number, value: number | string): number => {
|
|
33
|
+
if (typeof value === 'number') {
|
|
34
|
+
return value;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const percentageRegex = new RegExp(/^[0-9]+%$/);
|
|
38
|
+
if (percentageRegex.test(value)) {
|
|
39
|
+
const percentage = parseFloat(value) / 100;
|
|
40
|
+
return isNaN(percentage) ? 0 : Math.round(windowHeight * percentage);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return 0;
|
|
33
44
|
};
|
|
34
45
|
|
|
35
46
|
export default function BottomSheet(props: BottomSheetProps) {
|
|
@@ -43,14 +54,16 @@ export default function BottomSheet(props: BottomSheetProps) {
|
|
|
43
54
|
|
|
44
55
|
const styles = useStyles();
|
|
45
56
|
|
|
57
|
+
const { height: windowHeight } = useWindowDimensions();
|
|
58
|
+
|
|
46
59
|
const handleClose = () => {
|
|
47
60
|
if (onChange) {
|
|
48
61
|
onChange(-1);
|
|
49
62
|
}
|
|
50
63
|
};
|
|
51
64
|
|
|
52
|
-
const height =
|
|
53
|
-
const translateY = height - (snapPoints[index] ?? 0);
|
|
65
|
+
const height = convertHeightAsPixel(windowHeight, snapPoints[snapPoints.length - 1] ?? 0);
|
|
66
|
+
const translateY = height - (convertHeightAsPixel(windowHeight, snapPoints[index] ?? 0));
|
|
54
67
|
|
|
55
68
|
return (
|
|
56
69
|
<Modal
|