@fountain-ui/lab 2.0.0-beta.6 → 2.0.0-beta.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/build/commonjs/AnimatedY/AnimatedY.js +3 -5
- package/build/commonjs/AnimatedY/AnimatedY.js.map +1 -1
- package/build/commonjs/AnimatedY/AnimatedYProps.js.map +1 -1
- package/build/commonjs/AnimatedY/index.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetNative.js +1 -1
- package/build/commonjs/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/commonjs/BottomSheet/BottomSheetWeb.js +2 -6
- package/build/commonjs/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/commonjs/BottomSheet/TransparentBackdrop.js +1 -1
- package/build/commonjs/BottomSheet/TransparentBackdrop.js.map +1 -1
- package/build/commonjs/BottomSheet/index.js.map +1 -1
- package/build/commonjs/BottomSheet/index.native.js.map +1 -1
- package/build/commonjs/Carousel/CarouselNative.js.map +1 -1
- package/build/commonjs/Carousel/CarouselProps.js.map +1 -1
- package/build/commonjs/Carousel/CarouselWeb.js +1 -1
- package/build/commonjs/Carousel/CarouselWeb.js.map +1 -1
- package/build/commonjs/Carousel/index.js.map +1 -1
- package/build/commonjs/Carousel/index.native.js.map +1 -1
- package/build/commonjs/Carousel/utils.js +1 -1
- package/build/commonjs/Carousel/utils.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewer.js +16 -11
- package/build/commonjs/ComicViewer/ComicViewer.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerItemProps.js.map +1 -1
- package/build/commonjs/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/commonjs/ComicViewer/ViewerItem.js +4 -3
- package/build/commonjs/ComicViewer/ViewerItem.js.map +1 -1
- package/build/commonjs/ComicViewer/index.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePicker.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePickerProps.js.map +1 -1
- package/build/commonjs/DateTimePicker/DateTimePickerProvider.js.map +1 -1
- package/build/commonjs/DateTimePicker/YearPicker.js +21 -17
- package/build/commonjs/DateTimePicker/YearPicker.js.map +1 -1
- package/build/commonjs/DateTimePicker/index.js +4 -4
- package/build/commonjs/DateTimePicker/index.js.map +1 -1
- package/build/commonjs/DateTimePicker/utils.js +2 -1
- package/build/commonjs/DateTimePicker/utils.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCard.js +5 -11
- package/build/commonjs/FlipCard/FlipCard.js.map +1 -1
- package/build/commonjs/FlipCard/FlipCardProps.js.map +1 -1
- package/build/commonjs/FlipCard/index.js.map +1 -1
- package/build/commonjs/StatusBarProvider/Provider.js +1 -1
- package/build/commonjs/StatusBarProvider/Provider.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/commonjs/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
- package/build/commonjs/StatusBarProvider/index.js.map +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js +1 -1
- package/build/commonjs/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/commonjs/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/commonjs/ViewPager/index.js.map +1 -1
- package/build/commonjs/ViewPager/index.native.js.map +1 -1
- package/build/commonjs/ViewPager/utils.js +13 -11
- package/build/commonjs/ViewPager/utils.js.map +1 -1
- package/build/commonjs/hooks/index.js.map +1 -1
- package/build/commonjs/hooks/useAppbarStyles.js.map +1 -1
- package/build/commonjs/hooks/useElevationStyle.js.map +1 -1
- package/build/commonjs/hooks/useHeight.js +5 -4
- package/build/commonjs/hooks/useHeight.js.map +1 -1
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js +18 -29
- package/build/commonjs/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js +7 -9
- package/build/commonjs/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
- package/build/commonjs/hooks/useWidth.js.map +1 -1
- package/build/commonjs/index.js +10 -10
- package/build/commonjs/index.js.map +1 -1
- package/build/module/AnimatedY/AnimatedY.js +4 -4
- package/build/module/AnimatedY/AnimatedY.js.map +1 -1
- package/build/module/AnimatedY/AnimatedYProps.js.map +1 -1
- package/build/module/AnimatedY/index.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js +1 -1
- package/build/module/BottomSheet/BottomSheetNative.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetProps.js.map +1 -1
- package/build/module/BottomSheet/BottomSheetWeb.js +2 -6
- package/build/module/BottomSheet/BottomSheetWeb.js.map +1 -1
- package/build/module/BottomSheet/TransparentBackdrop.js +1 -1
- package/build/module/BottomSheet/TransparentBackdrop.js.map +1 -1
- package/build/module/BottomSheet/index.js.map +1 -1
- package/build/module/BottomSheet/index.native.js.map +1 -1
- package/build/module/Carousel/CarouselNative.js.map +1 -1
- package/build/module/Carousel/CarouselProps.js.map +1 -1
- package/build/module/Carousel/CarouselWeb.js +1 -1
- package/build/module/Carousel/CarouselWeb.js.map +1 -1
- package/build/module/Carousel/index.js.map +1 -1
- package/build/module/Carousel/index.native.js.map +1 -1
- package/build/module/Carousel/utils.js.map +1 -1
- package/build/module/ComicViewer/ComicViewer.js +16 -11
- package/build/module/ComicViewer/ComicViewer.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerItemProps.js.map +1 -1
- package/build/module/ComicViewer/ComicViewerProps.js.map +1 -1
- package/build/module/ComicViewer/ViewerItem.js +4 -3
- package/build/module/ComicViewer/ViewerItem.js.map +1 -1
- package/build/module/ComicViewer/index.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePicker.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePickerProps.js.map +1 -1
- package/build/module/DateTimePicker/DateTimePickerProvider.js.map +1 -1
- package/build/module/DateTimePicker/YearPicker.js +21 -17
- package/build/module/DateTimePicker/YearPicker.js.map +1 -1
- package/build/module/DateTimePicker/index.js.map +1 -1
- package/build/module/DateTimePicker/utils.js +2 -1
- package/build/module/DateTimePicker/utils.js.map +1 -1
- package/build/module/FlipCard/FlipCard.js +5 -5
- package/build/module/FlipCard/FlipCard.js.map +1 -1
- package/build/module/FlipCard/FlipCardProps.js.map +1 -1
- package/build/module/FlipCard/index.js.map +1 -1
- package/build/module/StatusBarProvider/Provider.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProvider.js.map +1 -1
- package/build/module/StatusBarProvider/StatusBarProviderProps.js.map +1 -1
- package/build/module/StatusBarProvider/index.js.map +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js +1 -1
- package/build/module/ViewPager/ChildrenMemoizedPage.js.map +1 -1
- package/build/module/ViewPager/ViewPagerNative.js.map +1 -1
- package/build/module/ViewPager/ViewPagerProps.js.map +1 -1
- package/build/module/ViewPager/ViewPagerWeb.js.map +1 -1
- package/build/module/ViewPager/index.js.map +1 -1
- package/build/module/ViewPager/index.native.js.map +1 -1
- package/build/module/ViewPager/utils.js +11 -10
- package/build/module/ViewPager/utils.js.map +1 -1
- package/build/module/hooks/index.js.map +1 -1
- package/build/module/hooks/useAppbarStyles.js.map +1 -1
- package/build/module/hooks/useElevationStyle.js.map +1 -1
- package/build/module/hooks/useHeight.js +4 -3
- package/build/module/hooks/useHeight.js.map +1 -1
- package/build/module/hooks/useUnstableCollapsibleAppBar.js +18 -19
- package/build/module/hooks/useUnstableCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useUnstableToggleDisplayStyle.js +7 -5
- package/build/module/hooks/useUnstableToggleDisplayStyle.js.map +1 -1
- package/build/module/hooks/useWidth.js.map +1 -1
- package/build/module/index.js.map +1 -1
- package/build/typescript/AnimatedY/AnimatedY.d.ts +0 -1
- package/build/typescript/BottomSheet/BottomSheetNative.d.ts +0 -1
- package/build/typescript/BottomSheet/BottomSheetWeb.d.ts +0 -1
- package/build/typescript/BottomSheet/TransparentBackdrop.d.ts +0 -1
- package/build/typescript/Carousel/CarouselNative.d.ts +0 -1
- package/build/typescript/ComicViewer/ComicViewer.d.ts +0 -1
- package/build/typescript/DateTimePicker/DateTimePicker.d.ts +0 -1
- package/build/typescript/DateTimePicker/YearPicker.d.ts +0 -1
- package/build/typescript/FlipCard/FlipCard.d.ts +0 -1
- package/build/typescript/StatusBarProvider/StatusBarProvider.d.ts +0 -1
- package/build/typescript/ViewPager/ViewPagerNative.d.ts +0 -1
- package/build/typescript/ViewPager/ViewPagerWeb.d.ts +0 -1
- package/build/typescript/hooks/useUnstableCollapsibleAppBar.d.ts +2 -2
- package/build/typescript/hooks/useUnstableToggleDisplayStyle.d.ts +2 -2
- package/package.json +5 -4
- package/src/AnimatedY/AnimatedY.tsx +4 -4
- package/src/FlipCard/FlipCard.tsx +6 -6
- package/src/hooks/useHeight.ts +2 -2
- package/src/hooks/useUnstableCollapsibleAppBar.ts +23 -16
- package/src/hooks/useUnstableToggleDisplayStyle.ts +6 -5
|
@@ -30,13 +30,14 @@ const useStyles = function () {
|
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
const YearPicker =
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
const YearPicker = _ref => {
|
|
34
|
+
let {
|
|
35
|
+
date,
|
|
36
|
+
locale,
|
|
37
|
+
maxDate,
|
|
38
|
+
minDate,
|
|
39
|
+
onYearPress
|
|
40
|
+
} = _ref;
|
|
40
41
|
const styles = useStyles();
|
|
41
42
|
|
|
42
43
|
const ref = _react.default.useRef(null);
|
|
@@ -67,16 +68,19 @@ const YearPicker = ({
|
|
|
67
68
|
}), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
|
|
68
69
|
data: years,
|
|
69
70
|
keyExtractor: item => item.toString(),
|
|
70
|
-
renderItem:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
71
|
+
renderItem: _ref2 => {
|
|
72
|
+
let {
|
|
73
|
+
item
|
|
74
|
+
} = _ref2;
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement(_core.Button, {
|
|
76
|
+
children: item.toString(),
|
|
77
|
+
variant: 'text',
|
|
78
|
+
onPress: () => {
|
|
79
|
+
const newDate = (0, _dateFns.setYear)(date, item);
|
|
80
|
+
onYearPress(newDate);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
},
|
|
80
84
|
getItemLayout: getItemLayout,
|
|
81
85
|
style: styles.list,
|
|
82
86
|
ref: ref
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["initYear","itemHeight","useStyles","theme","useTheme","list","marginTop","spacing","maxHeight","YearPicker","date","locale","maxDate","minDate","onYearPress","styles","ref","React","useRef","minYear","getYear","maxYear","Date","years","Array","fill","map","v","i","useEffect","current","scrollToItem","animated","item","getItemLayout","data","index","length","offset","formatDate","toString","newDate","setYear"],"sources":["YearPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { FlatList } from 'react-native';\nimport { getYear, setYear } from 'date-fns';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { Button, Column, Typography, useTheme } from '@fountain-ui/core';\nimport { formatDate } from './utils';\n\nconst initYear = 1901;\nconst itemHeight = 40;\n\ninterface YearPickerProps {\n date: Date;\n locale?: string,\n maxDate?: Date;\n minDate?: Date;\n onYearPress: (date: Date) => void;\n}\n\ntype YearPickerStyles = NamedStylesStringUnion<'list'>;\n\nconst useStyles: UseStyles<YearPickerStyles> = function (): YearPickerStyles {\n const theme = useTheme();\n\n return {\n list: {\n marginTop: theme.spacing(1),\n maxHeight: 270,\n },\n };\n};\n\nconst YearPicker = ({\n date,\n locale,\n maxDate,\n minDate,\n onYearPress,\n}: YearPickerProps) => {\n const styles = useStyles();\n\n const ref = React.useRef<FlatList | null>(null);\n\n const minYear = minDate ? getYear(minDate) : initYear;\n const maxYear = maxDate ? getYear(maxDate) : getYear(new Date());\n const years = Array(maxYear - minYear + 1).fill(minYear).map((v, i) => v + i);\n\n React.useEffect(() => {\n ref.current?.scrollToItem({\n animated: false,\n item: getYear(date),\n });\n }, [date]);\n\n const getItemLayout = (data: Array<number> | null | undefined, index: number) => ({\n length: itemHeight,\n offset: itemHeight * index,\n index,\n });\n\n return (\n <Column>\n <Typography\n children={formatDate(date, locale)}\n color={'textPrimary'}\n variant={'subtitle2'}\n />\n <FlatList\n data={years}\n keyExtractor={item => item.toString()}\n renderItem={({ item }) => (\n <Button\n children={item.toString()}\n variant={'text'}\n onPress={() => {\n const newDate = setYear(date, item);\n onYearPress(newDate);\n }}\n />\n )}\n getItemLayout={getItemLayout}\n style={styles.list}\n ref={ref}\n />\n </Column>\n );\n};\n\nexport default YearPicker;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,IAAjB;AACA,MAAMC,UAAU,GAAG,EAAnB;;AAYA,MAAMC,SAAsC,GAAG,YAA8B;EACzE,MAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,SAAS,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CADT;MAEFC,SAAS,EAAE;IAFT;EADH,CAAP;AAMH,CATD;;AAWA,MAAMC,UAAU,GAAG,QAMI;EAAA,IANH;IAChBC,IADgB;IAEhBC,MAFgB;IAGhBC,OAHgB;IAIhBC,OAJgB;IAKhBC;EALgB,CAMG;EACnB,MAAMC,MAAM,GAAGb,SAAS,EAAxB;;EAEA,MAAMc,GAAG,GAAGC,cAAA,CAAMC,MAAN,CAA8B,IAA9B,CAAZ;;EAEA,MAAMC,OAAO,GAAGN,OAAO,GAAG,IAAAO,gBAAA,EAAQP,OAAR,CAAH,GAAsBb,QAA7C;EACA,MAAMqB,OAAO,GAAGT,OAAO,GAAG,IAAAQ,gBAAA,EAAQR,OAAR,CAAH,GAAsB,IAAAQ,gBAAA,EAAQ,IAAIE,IAAJ,EAAR,CAA7C;EACA,MAAMC,KAAK,GAAGC,KAAK,CAACH,OAAO,GAAGF,OAAV,GAAoB,CAArB,CAAL,CAA6BM,IAA7B,CAAkCN,OAAlC,EAA2CO,GAA3C,CAA+C,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,GAAGC,CAA7D,CAAd;;EAEAX,cAAA,CAAMY,SAAN,CAAgB,MAAM;IAAA;;IAClB,gBAAAb,GAAG,CAACc,OAAJ,8DAAaC,YAAb,CAA0B;MACtBC,QAAQ,EAAE,KADY;MAEtBC,IAAI,EAAE,IAAAb,gBAAA,EAAQV,IAAR;IAFgB,CAA1B;EAIH,CALD,EAKG,CAACA,IAAD,CALH;;EAOA,MAAMwB,aAAa,GAAG,CAACC,IAAD,EAAyCC,KAAzC,MAA4D;IAC9EC,MAAM,EAAEpC,UADsE;IAE9EqC,MAAM,EAAErC,UAAU,GAAGmC,KAFyD;IAG9EA;EAH8E,CAA5D,CAAtB;;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,gBAAD;IACI,QAAQ,EAAE,IAAAG,iBAAA,EAAW7B,IAAX,EAAiBC,MAAjB,CADd;IAEI,KAAK,EAAE,aAFX;IAGI,OAAO,EAAE;EAHb,EADJ,eAMI,6BAAC,qBAAD;IACI,IAAI,EAAEY,KADV;IAEI,YAAY,EAAEU,IAAI,IAAIA,IAAI,CAACO,QAAL,EAF1B;IAGI,UAAU,EAAE;MAAA,IAAC;QAAEP;MAAF,CAAD;MAAA,oBACR,6BAAC,YAAD;QACI,QAAQ,EAAEA,IAAI,CAACO,QAAL,EADd;QAEI,OAAO,EAAE,MAFb;QAGI,OAAO,EAAE,MAAM;UACX,MAAMC,OAAO,GAAG,IAAAC,gBAAA,EAAQhC,IAAR,EAAcuB,IAAd,CAAhB;UACAnB,WAAW,CAAC2B,OAAD,CAAX;QACH;MANL,EADQ;IAAA,CAHhB;IAaI,aAAa,EAAEP,aAbnB;IAcI,KAAK,EAAEnB,MAAM,CAACV,IAdlB;IAeI,GAAG,EAAEW;EAfT,EANJ,CADJ;AA0BH,CAtDD;;eAwDeP,U"}
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "
|
|
6
|
+
Object.defineProperty(exports, "DateTimePickerProvider", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function () {
|
|
9
|
-
return
|
|
9
|
+
return _DateTimePickerProvider.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "
|
|
12
|
+
Object.defineProperty(exports, "default", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function () {
|
|
15
|
-
return
|
|
15
|
+
return _DateTimePicker.default;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './DateTimePicker';\nexport { default as DateTimePickerProvider } from './DateTimePickerProvider';\nexport type { default as DateTimePickerProps } from './DateTimePickerProps';"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -21,7 +21,8 @@ const localeMap = {
|
|
|
21
21
|
fr: _fr.default
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
const formatDate = (date
|
|
24
|
+
const formatDate = function (date) {
|
|
25
|
+
let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
|
25
26
|
//@ts-ignore
|
|
26
27
|
return (0, _dateFns.format)(date, 'MMMM uuuu', {
|
|
27
28
|
locale: localeMap[locale]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["localeMap","en","enLocale","de","deLocale","fr","frLocale","formatDate","date","locale","format"],"sources":["utils.ts"],"sourcesContent":["import { format } from 'date-fns';\nimport enLocale from 'date-fns/locale/en-US';\nimport deLocale from 'date-fns/locale/de';\nimport frLocale from 'date-fns/locale/fr';\n\nconst localeMap = {\n en: enLocale,\n de: deLocale,\n fr: frLocale,\n};\n\nexport const formatDate = (date: Date, locale: string = 'en'): string => {\n //@ts-ignore\n return format(date, 'MMMM uuuu', { locale: localeMap[locale] });\n};"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG;EACdC,EAAE,EAAEC,aADU;EAEdC,EAAE,EAAEC,WAFU;EAGdC,EAAE,EAAEC;AAHU,CAAlB;;AAMO,MAAMC,UAAU,GAAG,UAACC,IAAD,EAA+C;EAAA,IAAlCC,MAAkC,uEAAjB,IAAiB;EACrE;EACA,OAAO,IAAAC,eAAA,EAAOF,IAAP,EAAa,WAAb,EAA0B;IAAEC,MAAM,EAAET,SAAS,CAACS,MAAD;EAAnB,CAA1B,CAAP;AACH,CAHM"}
|
|
@@ -9,9 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _reactNativeReanimated =
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
15
13
|
|
|
16
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
15
|
|
|
@@ -40,10 +38,8 @@ function FlipCard(props) {
|
|
|
40
38
|
reanimationKey,
|
|
41
39
|
style
|
|
42
40
|
} = props;
|
|
43
|
-
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
const animatedFrontCardStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
|
|
41
|
+
const sharedAngle = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
42
|
+
const animatedFrontCardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
47
43
|
return {
|
|
48
44
|
zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,
|
|
49
45
|
transform: [{
|
|
@@ -53,8 +49,7 @@ function FlipCard(props) {
|
|
|
53
49
|
}]
|
|
54
50
|
};
|
|
55
51
|
});
|
|
56
|
-
|
|
57
|
-
const animatedBackCardStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
|
|
52
|
+
const animatedBackCardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
58
53
|
return {
|
|
59
54
|
zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,
|
|
60
55
|
transform: [{
|
|
@@ -64,10 +59,9 @@ function FlipCard(props) {
|
|
|
64
59
|
}]
|
|
65
60
|
};
|
|
66
61
|
});
|
|
67
|
-
|
|
68
62
|
(0, _react.useEffect)(() => {
|
|
69
63
|
sharedAngle.value = 0;
|
|
70
|
-
sharedAngle.value = _reactNativeReanimated.
|
|
64
|
+
sharedAngle.value = (0, _reactNativeReanimated.withTiming)(180, {
|
|
71
65
|
duration: 500
|
|
72
66
|
});
|
|
73
67
|
}, [reanimationKey]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","container","height","width","animatedCard","alignItems","backfaceVisibility","justifyContent","position","PERSPECTIVE","Z_INDEX_CHANGE_ANGLE","FlipCard","props","backCard","frontCard","reanimationKey","style","sharedAngle","useSharedValue","animatedFrontCardStyle","useAnimatedStyle","zIndex","value","transform","perspective","rotateX","animatedBackCardStyle","useEffect","withTiming","duration"],"sources":["FlipCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport type FlipCardProps from './FlipCardProps';\n\nconst styles = StyleSheet.create({\n container: {\n height: 32,\n width: 24,\n },\n animatedCard: {\n alignItems: 'center',\n backfaceVisibility: 'hidden',\n justifyContent: 'center',\n position: 'absolute',\n },\n});\n\nconst PERSPECTIVE = 100;\nconst Z_INDEX_CHANGE_ANGLE = 90;\n\nexport default function FlipCard(props: FlipCardProps) {\n const {\n backCard,\n frontCard,\n reanimationKey,\n style,\n } = props;\n\n const sharedAngle = useSharedValue(0);\n\n const animatedFrontCardStyle = useAnimatedStyle(() => {\n return {\n zIndex: sharedAngle.value < Z_INDEX_CHANGE_ANGLE ? 2 : 1,\n transform: [\n { perspective: PERSPECTIVE },\n { rotateX: `${sharedAngle.value}deg` },\n ],\n };\n });\n\n const animatedBackCardStyle = useAnimatedStyle(() => {\n return {\n zIndex: sharedAngle.value <= Z_INDEX_CHANGE_ANGLE ? 1 : 2,\n transform: [\n { perspective: PERSPECTIVE },\n { rotateX: `${(sharedAngle.value + 180)}deg` },\n ],\n };\n });\n\n useEffect(() => {\n sharedAngle.value = 0;\n sharedAngle.value = withTiming(180, { duration: 500 });\n }, [reanimationKey]);\n\n return (\n <View style={[styles.container, style]}>\n <Animated.View style={[styles.animatedCard, animatedFrontCardStyle]}>\n {frontCard}\n </Animated.View>\n\n <Animated.View style={[styles.animatedCard, animatedBackCardStyle]}>\n {backCard}\n </Animated.View>\n </View>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAGA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,SAAS,EAAE;IACPC,MAAM,EAAE,EADD;IAEPC,KAAK,EAAE;EAFA,CADkB;EAK7BC,YAAY,EAAE;IACVC,UAAU,EAAE,QADF;IAEVC,kBAAkB,EAAE,QAFV;IAGVC,cAAc,EAAE,QAHN;IAIVC,QAAQ,EAAE;EAJA;AALe,CAAlB,CAAf;;AAaA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACnD,MAAM;IACFC,QADE;IAEFC,SAFE;IAGFC,cAHE;IAIFC;EAJE,IAKFJ,KALJ;EAOA,MAAMK,WAAW,GAAG,IAAAC,qCAAA,EAAe,CAAf,CAApB;EAEA,MAAMC,sBAAsB,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IAClD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,GAAoBZ,oBAApB,GAA2C,CAA3C,GAA+C,CADpD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAER,WAAW,CAACK,KAAM;MAAhC,CAFO;IAFR,CAAP;EAOH,CAR8B,CAA/B;EAUA,MAAMI,qBAAqB,GAAG,IAAAN,uCAAA,EAAiB,MAAM;IACjD,OAAO;MACHC,MAAM,EAAEJ,WAAW,CAACK,KAAZ,IAAqBZ,oBAArB,GAA4C,CAA5C,GAAgD,CADrD;MAEHa,SAAS,EAAE,CACP;QAAEC,WAAW,EAAEf;MAAf,CADO,EAEP;QAAEgB,OAAO,EAAG,GAAGR,WAAW,CAACK,KAAZ,GAAoB,GAAK;MAAxC,CAFO;IAFR,CAAP;EAOH,CAR6B,CAA9B;EAUA,IAAAK,gBAAA,EAAU,MAAM;IACZV,WAAW,CAACK,KAAZ,GAAoB,CAApB;IACAL,WAAW,CAACK,KAAZ,GAAoB,IAAAM,iCAAA,EAAW,GAAX,EAAgB;MAAEC,QAAQ,EAAE;IAAZ,CAAhB,CAApB;EACH,CAHD,EAGG,CAACd,cAAD,CAHH;EAKA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACjB,MAAM,CAACG,SAAR,EAAmBe,KAAnB;EAAb,gBACI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAClB,MAAM,CAACM,YAAR,EAAsBe,sBAAtB;EAAtB,GACKL,SADL,CADJ,eAKI,6BAAC,8BAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAAChB,MAAM,CAACM,YAAR,EAAsBsB,qBAAtB;EAAtB,GACKb,QADL,CALJ,CADJ;AAWH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["FlipCardProps.ts"],"sourcesContent":["import React from 'react';\nimport { ComponentProps } from '@fountain-ui/core';\n\nexport default interface FlipCardProps extends ComponentProps<{\n /**\n * Element placed on backSide\n */\n backCard: React.ReactElement;\n\n /**\n * Element placed on frontSide\n */\n frontCard: React.ReactElement;\n\n /**\n * The key to reanimate Component, usually includes card content\n */\n reanimationKey?: string;\n}> {}"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './FlipCard';\nexport type { default as FlipCardProps } from './FlipCardProps';"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useStatusBarContext = exports.default = exports.StatusBarContext = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["StatusBarContext","React","createContext","useStatusBarContext","useContext","Provider"],"sources":["Provider.ts"],"sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\n\nexport interface StatusBarProviderValue {\n setTranslucent: (value: boolean) => void;\n setBackgroundColor: (value: string) => void;\n setHidden: (value: boolean) => void;\n setBarStyle: (value: StatusBarStyle, animated?: boolean) => void;\n}\n\nexport const StatusBarContext = React.createContext<StatusBarProviderValue | null>(null);\n\nexport const useStatusBarContext = () => {\n return React.useContext(StatusBarContext);\n};\n\nexport default StatusBarContext.Provider;"],"mappings":";;;;;;;AAAA;;;;AAUO,MAAMA,gBAAgB,gBAAGC,cAAA,CAAMC,aAAN,CAAmD,IAAnD,CAAzB;;;;AAEA,MAAMC,mBAAmB,GAAG,MAAM;EACrC,OAAOF,cAAA,CAAMG,UAAN,CAAiBJ,gBAAjB,CAAP;AACH,CAFM;;;eAIQA,gBAAgB,CAACK,Q"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["initialVisible","Platform","select","ios","android","StatusBarProvider","props","children","theme","useTheme","defaultColor","palette","background","default","visible","setVisible","React","useState","backgroundViewColor","setBackgroundViewColor","setBackgroundColor","value","OS","RNStatusBar","setBarStyle","animated","setHidden","setTranslucent","shouldRenderBackgroundView","inset","useSafeAreaInsets","backgroundViewStyle","css","backgroundColor","height","top","left","position","right","zIndex","statusBar"],"sources":["StatusBarProvider.tsx"],"sourcesContent":["import React from 'react';\nimport type { StatusBarStyle } from 'react-native';\nimport { Platform, StatusBar as RNStatusBar, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/core';\nimport { css } from '@fountain-ui/styles';\nimport Provider from './Provider';\nimport type StatusBarProviderProps from './StatusBarProviderProps';\n\nconst initialVisible = Platform.select({\n ios: true,\n android: false,\n});\n\nexport default function StatusBarProvider(props: StatusBarProviderProps) {\n const { children } = props;\n\n const theme = useTheme();\n const defaultColor = theme.palette.background.default;\n\n const [visible, setVisible] = React.useState(initialVisible);\n const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);\n\n const setBackgroundColor = (value: string) => {\n if (Platform.OS === 'android') {\n RNStatusBar.setBackgroundColor(value);\n }\n\n if (Platform.OS === 'ios') {\n setBackgroundViewColor(value);\n }\n };\n\n const setBarStyle = (value: StatusBarStyle, animated?: boolean) => {\n RNStatusBar.setBarStyle(value, animated);\n };\n\n const setHidden = (value: boolean) => {\n if (Platform.OS === 'ios') {\n setVisible(!value);\n }\n\n RNStatusBar.setHidden(value);\n };\n\n const setTranslucent = (value: boolean) => {\n if (Platform.OS === 'android') {\n RNStatusBar.setTranslucent(value);\n }\n };\n\n const shouldRenderBackgroundView = Platform.OS === 'ios' && visible;\n\n const inset = useSafeAreaInsets();\n const backgroundViewStyle = css([\n {\n backgroundColor: backgroundViewColor,\n height: inset.top,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n zIndex: theme.zIndex.statusBar,\n },\n ]);\n\n return (\n <Provider value={{\n setBackgroundColor,\n setBarStyle,\n setHidden,\n setTranslucent,\n }}>\n {shouldRenderBackgroundView ? (\n <View style={backgroundViewStyle}/>\n ) : null}\n {children}\n </Provider>\n );\n}"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAGA,MAAMA,cAAc,GAAGC,qBAAA,CAASC,MAAT,CAAgB;EACnCC,GAAG,EAAE,IAD8B;EAEnCC,OAAO,EAAE;AAF0B,CAAhB,CAAvB;;AAKe,SAASC,iBAAT,CAA2BC,KAA3B,EAA0D;EACrE,MAAM;IAAEC;EAAF,IAAeD,KAArB;EAEA,MAAME,KAAK,GAAG,IAAAC,cAAA,GAAd;EACA,MAAMC,YAAY,GAAGF,KAAK,CAACG,OAAN,CAAcC,UAAd,CAAyBC,OAA9C;;EAEA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwBC,cAAA,CAAMC,QAAN,CAAejB,cAAf,CAA9B;;EACA,MAAM,CAACkB,mBAAD,EAAsBC,sBAAtB,IAAgDH,cAAA,CAAMC,QAAN,CAAeP,YAAf,CAAtD;;EAEA,MAAMU,kBAAkB,GAAIC,KAAD,IAAmB;IAC1C,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,SAApB,EAA+B;MAC3BC,sBAAA,CAAYH,kBAAZ,CAA+BC,KAA/B;IACH;;IAED,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,KAApB,EAA2B;MACvBH,sBAAsB,CAACE,KAAD,CAAtB;IACH;EACJ,CARD;;EAUA,MAAMG,WAAW,GAAG,CAACH,KAAD,EAAwBI,QAAxB,KAA+C;IAC/DF,sBAAA,CAAYC,WAAZ,CAAwBH,KAAxB,EAA+BI,QAA/B;EACH,CAFD;;EAIA,MAAMC,SAAS,GAAIL,KAAD,IAAoB;IAClC,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,KAApB,EAA2B;MACvBP,UAAU,CAAC,CAACM,KAAF,CAAV;IACH;;IAEDE,sBAAA,CAAYG,SAAZ,CAAsBL,KAAtB;EACH,CAND;;EAQA,MAAMM,cAAc,GAAIN,KAAD,IAAoB;IACvC,IAAIpB,qBAAA,CAASqB,EAAT,KAAgB,SAApB,EAA+B;MAC3BC,sBAAA,CAAYI,cAAZ,CAA2BN,KAA3B;IACH;EACJ,CAJD;;EAMA,MAAMO,0BAA0B,GAAG3B,qBAAA,CAASqB,EAAT,KAAgB,KAAhB,IAAyBR,OAA5D;EAEA,MAAMe,KAAK,GAAG,IAAAC,6CAAA,GAAd;EACA,MAAMC,mBAAmB,GAAG,IAAAC,WAAA,EAAI,CAC5B;IACIC,eAAe,EAAEf,mBADrB;IAEIgB,MAAM,EAAEL,KAAK,CAACM,GAFlB;IAGIC,IAAI,EAAE,CAHV;IAIIC,QAAQ,EAAE,UAJd;IAKIC,KAAK,EAAE,CALX;IAMIH,GAAG,EAAE,CANT;IAOII,MAAM,EAAE/B,KAAK,CAAC+B,MAAN,CAAaC;EAPzB,CAD4B,CAAJ,CAA5B;EAYA,oBACI,6BAAC,iBAAD;IAAU,KAAK,EAAE;MACbpB,kBADa;MAEbI,WAFa;MAGbE,SAHa;MAIbC;IAJa;EAAjB,GAMKC,0BAA0B,gBACvB,6BAAC,iBAAD;IAAM,KAAK,EAAEG;EAAb,EADuB,GAEvB,IARR,EASKxB,QATL,CADJ;AAaH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["StatusBarProviderProps.ts"],"sourcesContent":["import React from 'react';\n\nexport default interface StatusBarProviderProp {\n /**\n * The screens where the statusbar will be visible.\n */\n children: React.ReactNode;\n}"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './StatusBarProvider';\nexport { useStatusBarContext } from './Provider';\nexport type { default as StatusBarProviderProps } from './StatusBarProviderProps';"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
function _extends() { _extends = Object.assign
|
|
14
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
15
15
|
|
|
16
16
|
const Page = function Page(props) {
|
|
17
17
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Page","props","isVisible","otherProps","React","memo","prevProps","nextProps","children","isNeighbor","rerenderKey"],"sources":["ChildrenMemoizedPage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { PageProps } from './ViewPagerProps';\n\nconst Page = function Page(props: PageProps) {\n const { isVisible, ...otherProps } = props;\n\n return (\n <View\n collapsable={false}\n {...otherProps}\n />\n );\n};\n\nexport default React.memo(Page, (prevProps, nextProps) => {\n if (prevProps.children === null && nextProps.children === null) {\n return true;\n }\n\n // isVisible is an important condition for determining memos on the web.\n // Reference ViewPagerWeb's return.\n if (prevProps.isVisible !== nextProps.isVisible) {\n return false;\n }\n\n if (nextProps.isVisible || nextProps.isNeighbor) {\n return false;\n }\n\n if (prevProps.rerenderKey !== nextProps.rerenderKey) {\n return false;\n }\n\n return prevProps.children !== null && nextProps.children !== null;\n});\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAGA,MAAMA,IAAI,GAAG,SAASA,IAAT,CAAcC,KAAd,EAAgC;EACzC,MAAM;IAAEC,SAAF;IAAa,GAAGC;EAAhB,IAA+BF,KAArC;EAEA,oBACI,6BAAC,iBAAD;IACI,WAAW,EAAE;EADjB,GAEQE,UAFR,EADJ;AAMH,CATD;;4BAWeC,cAAA,CAAMC,IAAN,CAAWL,IAAX,EAAiB,CAACM,SAAD,EAAYC,SAAZ,KAA0B;EACtD,IAAID,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA1D,EAAgE;IAC5D,OAAO,IAAP;EACH,CAHqD,CAKtD;EACA;;;EACA,IAAIF,SAAS,CAACJ,SAAV,KAAwBK,SAAS,CAACL,SAAtC,EAAiD;IAC7C,OAAO,KAAP;EACH;;EAED,IAAIK,SAAS,CAACL,SAAV,IAAuBK,SAAS,CAACE,UAArC,EAAiD;IAC7C,OAAO,KAAP;EACH;;EAED,IAAIH,SAAS,CAACI,WAAV,KAA0BH,SAAS,CAACG,WAAxC,EAAqD;IACjD,OAAO,KAAP;EACH;;EAED,OAAOJ,SAAS,CAACE,QAAV,KAAuB,IAAvB,IAA+BD,SAAS,CAACC,QAAV,KAAuB,IAA7D;AACH,CApBc,C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","index","keyboardDismissMode","loading","defaultLoading","onChange","pageComponent","defaultPageComponent","enableNeighborPageRerender","defaultEnableNeighborPageRerender","pageForceRerenderKey","scrollEnabled","style","indexRef","React","useRef","pagerRef","renderer","usePageRenderer","handlePageSelected","useCallback","e","current","nativeEvent","position","useEffect","setPage"],"sources":["ViewPagerNative.tsx"],"sourcesContent":["import React from 'react';\nimport RNViewPager, { ViewPagerOnPageSelectedEvent } from '@react-native-community/viewpager';\nimport type ViewPagerProps from './ViewPagerProps';\nimport {\n defaultEnableNeighborPageRerender,\n defaultEnableVisibleHint,\n defaultLoading,\n defaultPageComponent,\n usePageRenderer,\n} from './utils';\n\nexport default function ViewPager(props: ViewPagerProps) {\n const {\n children,\n enableVisibleHint = defaultEnableVisibleHint,\n index,\n keyboardDismissMode = 'on-drag',\n loading = defaultLoading,\n onChange,\n pageComponent = defaultPageComponent,\n enableNeighborPageRerender = defaultEnableNeighborPageRerender,\n pageForceRerenderKey,\n scrollEnabled = true,\n style,\n } = props;\n\n const indexRef = React.useRef<number>(index);\n const pagerRef = React.useRef<RNViewPager | null>(null);\n\n const renderer = usePageRenderer({\n enableVisibleHint,\n index,\n loading,\n pageComponent,\n pageForceRerenderKey,\n enableNeighborPageRerender,\n });\n\n const handlePageSelected = React.useCallback((e: ViewPagerOnPageSelectedEvent) => {\n indexRef.current = e.nativeEvent.position;\n\n if (onChange) {\n onChange(indexRef.current);\n }\n }, [onChange]);\n\n React.useEffect(() => {\n if (index !== indexRef.current) {\n pagerRef.current?.setPage(index);\n }\n }, [index]);\n\n return (\n <RNViewPager\n initialPage={index}\n keyboardDismissMode={keyboardDismissMode}\n onPageSelected={handlePageSelected}\n pageMargin={8}\n ref={pagerRef}\n scrollEnabled={scrollEnabled}\n style={style}\n >\n {renderer(children)}\n </RNViewPager>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAQe,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,iBAAiB,GAAGC,+BAFlB;IAGFC,KAHE;IAIFC,mBAAmB,GAAG,SAJpB;IAKFC,OAAO,GAAGC,qBALR;IAMFC,QANE;IAOFC,aAAa,GAAGC,2BAPd;IAQFC,0BAA0B,GAAGC,wCAR3B;IASFC,oBATE;IAUFC,aAAa,GAAG,IAVd;IAWFC;EAXE,IAYFf,KAZJ;;EAcA,MAAMgB,QAAQ,GAAGC,cAAA,CAAMC,MAAN,CAAqBd,KAArB,CAAjB;;EACA,MAAMe,QAAQ,GAAGF,cAAA,CAAMC,MAAN,CAAiC,IAAjC,CAAjB;;EAEA,MAAME,QAAQ,GAAG,IAAAC,sBAAA,EAAgB;IAC7BnB,iBAD6B;IAE7BE,KAF6B;IAG7BE,OAH6B;IAI7BG,aAJ6B;IAK7BI,oBAL6B;IAM7BF;EAN6B,CAAhB,CAAjB;;EASA,MAAMW,kBAAkB,GAAGL,cAAA,CAAMM,WAAN,CAAmBC,CAAD,IAAqC;IAC9ER,QAAQ,CAACS,OAAT,GAAmBD,CAAC,CAACE,WAAF,CAAcC,QAAjC;;IAEA,IAAInB,QAAJ,EAAc;MACVA,QAAQ,CAACQ,QAAQ,CAACS,OAAV,CAAR;IACH;EACJ,CAN0B,EAMxB,CAACjB,QAAD,CANwB,CAA3B;;EAQAS,cAAA,CAAMW,SAAN,CAAgB,MAAM;IAClB,IAAIxB,KAAK,KAAKY,QAAQ,CAACS,OAAvB,EAAgC;MAAA;;MAC5B,qBAAAN,QAAQ,CAACM,OAAT,wEAAkBI,OAAlB,CAA0BzB,KAA1B;IACH;EACJ,CAJD,EAIG,CAACA,KAAD,CAJH;;EAMA,oBACI,6BAAC,kBAAD;IACI,WAAW,EAAEA,KADjB;IAEI,mBAAmB,EAAEC,mBAFzB;IAGI,cAAc,EAAEiB,kBAHpB;IAII,UAAU,EAAE,CAJhB;IAKI,GAAG,EAAEH,QALT;IAMI,aAAa,EAAEL,aANnB;IAOI,KAAK,EAAEC;EAPX,GASKK,QAAQ,CAACnB,QAAD,CATb,CADJ;AAaH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["ViewPagerProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { ComponentProps } from '@fountain-ui/core';\n\nexport type KeyboardDismissMode = 'none' | 'on-drag';\n\nexport type PageProps = React.PropsWithChildren<ViewProps> & {\n isNeighbor: boolean;\n isVisible: boolean;\n rerenderKey?: any;\n};\n\nexport type PageComponent = React.ComponentType<PageProps>;\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ViewPagerProps extends ComponentProps<{\n /**\n * Collection of ViewPager components.\n */\n children?: React.ReactNode;\n\n /**\n * If `true`, enable page visible hint.\n * @default false\n */\n enableVisibleHint?: boolean;\n\n /**\n * If `true`, Based on the current index, the pages on the left and right are also rerender.\n * @default false\n */\n enableNeighborPageRerender?: boolean;\n\n /**\n * A number representing the index of the active page.\n */\n index: number,\n\n /**\n * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).\n * @default 'lazy'\n */\n loading?: Loading;\n\n /**\n * Callback fired when an index is changed.\n */\n onChange?: (newIndex: number) => void,\n\n /**\n * The component used to render the wrapper of the page.\n * @default 'ChildrenMemoizedPage'\n */\n pageComponent?: PageComponent,\n\n /**\n * When this value is changed, page will be rerender.\n */\n pageForceRerenderKey?: any;\n\n /**\n * Mobile only. Should pager view scroll, when scroll enabled.\n * @default true\n */\n scrollEnabled?: boolean;\n\n /**\n * Mobile only. Determines whether the keyboard gets dismissed in response to a drag.\n * @default 'on-drag'\n */\n keyboardDismissMode?: KeyboardDismissMode;\n}> {}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","overflow","position","none","display","ViewPager","props","children","enableVisibleHint","defaultEnableVisibleHint","enableNeighborPageRerender","defaultEnableNeighborPageRerender","index","loading","defaultLoading","pageComponent","defaultPageComponent","pageForceRerenderKey","style","renderer","usePageRenderer","React","Children","map","child","i","cloneElement","isVisible","absoluteFill"],"sources":["ViewPagerWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport type ViewPagerProps from './ViewPagerProps';\nimport {\n defaultEnableNeighborPageRerender,\n defaultEnableVisibleHint,\n defaultLoading,\n defaultPageComponent,\n usePageRenderer,\n} from './utils';\n\nconst styles = StyleSheet.create({\n root: {\n // @ts-ignore\n overflow: 'auto',\n position: 'relative',\n },\n none: { display: 'none' },\n});\n\nexport default function ViewPager(props: ViewPagerProps) {\n const {\n children,\n enableVisibleHint = defaultEnableVisibleHint,\n enableNeighborPageRerender = defaultEnableNeighborPageRerender,\n index,\n loading = defaultLoading,\n pageComponent = defaultPageComponent,\n pageForceRerenderKey,\n style,\n } = props;\n\n const renderer = usePageRenderer({\n enableVisibleHint,\n enableNeighborPageRerender,\n index,\n loading,\n pageComponent,\n pageForceRerenderKey,\n });\n\n return (\n <View style={[styles.root, style]}>\n {React.Children.map(renderer(children), (child, i) =>\n React.cloneElement(child as React.ReactElement, {\n isVisible: i === index,\n style: i !== index ? styles.none : StyleSheet.absoluteFill,\n }),\n )}\n </View>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAQA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACF;IACAC,QAAQ,EAAE,MAFR;IAGFC,QAAQ,EAAE;EAHR,CADuB;EAM7BC,IAAI,EAAE;IAAEC,OAAO,EAAE;EAAX;AANuB,CAAlB,CAAf;;AASe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,QADE;IAEFC,iBAAiB,GAAGC,+BAFlB;IAGFC,0BAA0B,GAAGC,wCAH3B;IAIFC,KAJE;IAKFC,OAAO,GAAGC,qBALR;IAMFC,aAAa,GAAGC,2BANd;IAOFC,oBAPE;IAQFC;EARE,IASFZ,KATJ;EAWA,MAAMa,QAAQ,GAAG,IAAAC,sBAAA,EAAgB;IAC7BZ,iBAD6B;IAE7BE,0BAF6B;IAG7BE,KAH6B;IAI7BC,OAJ6B;IAK7BE,aAL6B;IAM7BE;EAN6B,CAAhB,CAAjB;EASA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACpB,MAAM,CAACG,IAAR,EAAckB,KAAd;EAAb,GACKG,cAAA,CAAMC,QAAN,CAAeC,GAAf,CAAmBJ,QAAQ,CAACZ,QAAD,CAA3B,EAAuC,CAACiB,KAAD,EAAQC,CAAR,kBACpCJ,cAAA,CAAMK,YAAN,CAAmBF,KAAnB,EAAgD;IAC5CG,SAAS,EAAEF,CAAC,KAAKb,KAD2B;IAE5CM,KAAK,EAAEO,CAAC,KAAKb,KAAN,GAAcf,MAAM,CAACM,IAArB,GAA4BL,uBAAA,CAAW8B;EAFF,CAAhD,CADH,CADL,CADJ;AAUH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewPagerWeb';\nexport type { default as ViewPagerProps } from './ViewPagerProps';"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.native.ts"],"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.native.ts"],"sourcesContent":["export { default } from './ViewPagerNative';\n"],"mappings":";;;;;;;;;;;;AAAA"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.usePageRenderer = exports.defaultPageComponent = exports.defaultLoading = exports.
|
|
6
|
+
exports.usePageRenderer = exports.defaultPageComponent = exports.defaultLoading = exports.defaultEnableVisibleHint = exports.defaultEnableNeighborPageRerender = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -20,23 +20,25 @@ exports.defaultLoading = defaultLoading;
|
|
|
20
20
|
const defaultPageComponent = _ChildrenMemoizedPage.default;
|
|
21
21
|
exports.defaultPageComponent = defaultPageComponent;
|
|
22
22
|
|
|
23
|
-
const usePageRenderer =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
23
|
+
const usePageRenderer = _ref => {
|
|
24
|
+
let {
|
|
25
|
+
enableVisibleHint,
|
|
26
|
+
index: currentIndex,
|
|
27
|
+
loading,
|
|
28
|
+
pageComponent: PageComponent,
|
|
29
|
+
pageForceRerenderKey,
|
|
30
|
+
enableNeighborPageRerender
|
|
31
|
+
} = _ref;
|
|
32
|
+
|
|
31
33
|
const pagesStateRef = _react.default.useRef([]);
|
|
32
34
|
|
|
33
35
|
pagesStateRef.current[currentIndex] = { ...pagesStateRef.current[currentIndex],
|
|
34
36
|
visited: true
|
|
35
37
|
};
|
|
36
38
|
return children => _react.default.Children.map(children, (child, index) => {
|
|
37
|
-
var _pagesStateRef$curren
|
|
39
|
+
var _pagesStateRef$curren;
|
|
38
40
|
|
|
39
|
-
const visited = (_pagesStateRef$curren =
|
|
41
|
+
const visited = ((_pagesStateRef$curren = pagesStateRef.current[index]) === null || _pagesStateRef$curren === void 0 ? void 0 : _pagesStateRef$curren.visited) ?? false;
|
|
40
42
|
const content = loading === 'eager' || visited ? child : null;
|
|
41
43
|
const isVisible = enableVisibleHint ? index === currentIndex : false;
|
|
42
44
|
const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["defaultEnableVisibleHint","defaultEnableNeighborPageRerender","defaultLoading","defaultPageComponent","ChildrenMemoizedPage","usePageRenderer","enableVisibleHint","index","currentIndex","loading","pageComponent","PageComponent","pageForceRerenderKey","enableNeighborPageRerender","pagesStateRef","React","useRef","current","visited","children","Children","map","child","content","isVisible","isNeighborIndex"],"sources":["utils.tsx"],"sourcesContent":["import React from 'react';\nimport ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';\nimport ChildrenMemoizedPage from './ChildrenMemoizedPage';\n\nexport interface PageState {\n visited?: boolean;\n}\n\nexport interface PageRenderOption {\n enableVisibleHint: boolean;\n enableNeighborPageRerender: boolean;\n index: number;\n loading: Loading;\n pageComponent: PageComponent;\n pageForceRerenderKey?: any;\n}\n\nexport interface PageRenderer {\n (children: ViewPagerProps['children']): React.ReactNode;\n}\n\nexport const defaultEnableVisibleHint: boolean = false;\n\nexport const defaultEnableNeighborPageRerender: boolean = false;\n\nexport const defaultLoading: Loading = 'lazy';\n\nexport const defaultPageComponent: PageComponent = ChildrenMemoizedPage;\n\nexport const usePageRenderer = ({\n enableVisibleHint,\n index: currentIndex,\n loading,\n pageComponent: PageComponent,\n pageForceRerenderKey,\n enableNeighborPageRerender,\n}: PageRenderOption): PageRenderer => {\n const pagesStateRef = React.useRef<Array<PageState>>([]);\n\n pagesStateRef.current[currentIndex] = {\n ...pagesStateRef.current[currentIndex],\n visited: true,\n };\n\n return (children => React.Children.map(children, (child, index) => {\n const visited = pagesStateRef.current[index]?.visited ?? false;\n const content = (loading === 'eager' || visited) ? child : null;\n\n const isVisible = enableVisibleHint ? (index === currentIndex) : false;\n const isNeighborIndex = index === currentIndex - 1 || index === currentIndex + 1;\n\n return (\n <PageComponent\n key={index}\n children={content}\n isNeighbor={enableNeighborPageRerender && isNeighborIndex}\n isVisible={isVisible}\n rerenderKey={pageForceRerenderKey}\n />\n );\n }));\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAmBO,MAAMA,wBAAiC,GAAG,KAA1C;;AAEA,MAAMC,iCAA0C,GAAG,KAAnD;;AAEA,MAAMC,cAAuB,GAAG,MAAhC;;AAEA,MAAMC,oBAAmC,GAAGC,6BAA5C;;;AAEA,MAAMC,eAAe,GAAG,QAOO;EAAA,IAPN;IAC5BC,iBAD4B;IAE5BC,KAAK,EAAEC,YAFqB;IAG5BC,OAH4B;IAI5BC,aAAa,EAAEC,aAJa;IAK5BC,oBAL4B;IAM5BC;EAN4B,CAOM;;EAClC,MAAMC,aAAa,GAAGC,cAAA,CAAMC,MAAN,CAA+B,EAA/B,CAAtB;;EAEAF,aAAa,CAACG,OAAd,CAAsBT,YAAtB,IAAsC,EAClC,GAAGM,aAAa,CAACG,OAAd,CAAsBT,YAAtB,CAD+B;IAElCU,OAAO,EAAE;EAFyB,CAAtC;EAKA,OAAQC,QAAQ,IAAIJ,cAAA,CAAMK,QAAN,CAAeC,GAAf,CAAmBF,QAAnB,EAA6B,CAACG,KAAD,EAAQf,KAAR,KAAkB;IAAA;;IAC/D,MAAMW,OAAO,GAAG,0BAAAJ,aAAa,CAACG,OAAd,CAAsBV,KAAtB,iFAA8BW,OAA9B,KAAyC,KAAzD;IACA,MAAMK,OAAO,GAAId,OAAO,KAAK,OAAZ,IAAuBS,OAAxB,GAAmCI,KAAnC,GAA2C,IAA3D;IAEA,MAAME,SAAS,GAAGlB,iBAAiB,GAAIC,KAAK,KAAKC,YAAd,GAA8B,KAAjE;IACA,MAAMiB,eAAe,GAAGlB,KAAK,KAAKC,YAAY,GAAG,CAAzB,IAA8BD,KAAK,KAAKC,YAAY,GAAG,CAA/E;IAEA,oBACI,6BAAC,aAAD;MACI,GAAG,EAAED,KADT;MAEI,QAAQ,EAAEgB,OAFd;MAGI,UAAU,EAAEV,0BAA0B,IAAIY,eAH9C;MAII,SAAS,EAAED,SAJf;MAKI,WAAW,EAAEZ;IALjB,EADJ;EASH,CAhBmB,CAApB;AAiBH,CAhCM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';\nexport { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';\n\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useAppBarStyles","floating","position","top","left","right"],"sources":["useAppbarStyles.ts"],"sourcesContent":["import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\n\ntype AppBarStyles = NamedStylesStringUnion<'floating'>;\n\nconst useAppBarStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n return {\n floating: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n },\n };\n};\n\nexport default useAppBarStyles;"],"mappings":";;;;;;;AAIA,MAAMA,eAAwC,GAAG,YAA0B;EACvE,OAAO;IACHC,QAAQ,EAAE;MACNC,QAAQ,EAAE,UADJ;MAENC,GAAG,EAAE,CAFC;MAGNC,IAAI,EAAE,CAHA;MAINC,KAAK,EAAE;IAJD;EADP,CAAP;AAQH,CATD;;eAWeL,e"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useElevationStyle","elevation","theme","useTheme","shadow","Platform","select","android","ios","web","boxShadow"],"sources":["useElevationStyle.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport type { Elevation } from '@fountain-ui/styles';\nimport { useTheme } from '@fountain-ui/styles';\n\nexport default function useElevationStyle(elevation: Elevation) {\n const theme = useTheme();\n const shadow = theme.shadow[elevation];\n\n return Platform.select<any>({\n android: shadow?.elevation,\n ios: shadow?.shadow,\n web: shadow?.boxShadow,\n });\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEe,SAASA,iBAAT,CAA2BC,SAA3B,EAAiD;EAC5D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EACA,MAAMC,MAAM,GAAGF,KAAK,CAACE,MAAN,CAAaH,SAAb,CAAf;EAEA,OAAOI,qBAAA,CAASC,MAAT,CAAqB;IACxBC,OAAO,EAAEH,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEH,SADO;IAExBO,GAAG,EAAEJ,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEA,MAFW;IAGxBK,GAAG,EAAEL,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEM;EAHW,CAArB,CAAP;AAKH;;AAAA"}
|
|
@@ -7,17 +7,18 @@ exports.default = useHeight;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
var _reactNativeReanimated =
|
|
10
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
function useHeight(
|
|
14
|
+
function useHeight() {
|
|
15
|
+
let initialHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
16
|
+
|
|
15
17
|
const [height, setHeight] = _react.default.useState(initialHeight);
|
|
16
18
|
|
|
17
|
-
const onLayout = _reactNativeReanimated.
|
|
19
|
+
const onLayout = (0, _reactNativeReanimated.useWorkletCallback)(e => {
|
|
18
20
|
setHeight(e.nativeEvent.layout.height);
|
|
19
21
|
}, []);
|
|
20
|
-
|
|
21
22
|
return [height, onLayout];
|
|
22
23
|
}
|
|
23
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useHeight","initialHeight","height","setHeight","React","useState","onLayout","useWorkletCallback","e","nativeEvent","layout"],"sources":["useHeight.ts"],"sourcesContent":["import React from 'react';\nimport { ViewProps } from 'react-native';\nimport { useWorkletCallback } from 'react-native-reanimated';\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {\n const [height, setHeight] = React.useState<number>(initialHeight);\n\n const onLayout = useWorkletCallback((e) => {\n setHeight(e.nativeEvent.layout.height);\n }, []);\n\n return [height, onLayout];\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAIe,SAASA,SAAT,GAAkE;EAAA,IAA/CC,aAA+C,uEAA/B,CAA+B;;EAC7E,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAuBJ,aAAvB,CAA5B;;EAEA,MAAMK,QAAQ,GAAG,IAAAC,yCAAA,EAAoBC,CAAD,IAAO;IACvCL,SAAS,CAACK,CAAC,CAACC,WAAF,CAAcC,MAAd,CAAqBR,MAAtB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,OAAO,CAACA,MAAD,EAASI,QAAT,CAAP;AACH;;AAAA"}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _reactNativeReanimated =
|
|
12
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
13
13
|
|
|
14
14
|
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
15
15
|
|
|
@@ -38,7 +38,8 @@ function useLargerValueOfLastTwoValues(value) {
|
|
|
38
38
|
return Math.max(...refLatestTwoValues.current);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
function useUnstableCollapsibleAppBar(
|
|
41
|
+
function useUnstableCollapsibleAppBar() {
|
|
42
|
+
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
42
43
|
const {
|
|
43
44
|
shouldTranslateYReset
|
|
44
45
|
} = { ...defaultOptions,
|
|
@@ -49,24 +50,15 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
49
50
|
const [appBarHeight, onAppBarLayout] = (0, _useHeight.default)();
|
|
50
51
|
const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
|
|
51
52
|
const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _useHeight.default)();
|
|
52
|
-
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
const lastOffsetY = _reactNativeReanimated.default.useSharedValue(0);
|
|
60
|
-
|
|
61
|
-
const prevOffsetY = _reactNativeReanimated.default.useSharedValue(0);
|
|
62
|
-
|
|
63
|
-
const overlapped = _reactNativeReanimated.default.useSharedValue(false);
|
|
64
|
-
|
|
65
|
-
const vectorY = _reactNativeReanimated.default.useSharedValue(0);
|
|
66
|
-
|
|
53
|
+
const maxTranslateY = (0, _reactNativeReanimated.useDerivedValue)(() => -collapsibleToolbarHeight);
|
|
54
|
+
const translateY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
55
|
+
const lastTranslateY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
56
|
+
const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
57
|
+
const prevOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
58
|
+
const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
59
|
+
const vectorY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
67
60
|
const elevationStyle = (0, _useElevationStyle.default)(4);
|
|
68
|
-
|
|
69
|
-
const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
|
|
61
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
70
62
|
return _reactNative.Platform.OS === 'web' ? {
|
|
71
63
|
transform: [{
|
|
72
64
|
translateY: translateY.value
|
|
@@ -89,13 +81,11 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
89
81
|
const offsetsRef = _react.default.useRef([]);
|
|
90
82
|
|
|
91
83
|
const onScrollViewChanged = nextIndex => {
|
|
92
|
-
var _offsetsRef$current$n;
|
|
93
|
-
|
|
94
84
|
const prevIndex = indexRef.current;
|
|
95
85
|
|
|
96
86
|
if (prevIndex === nextIndex) {
|
|
97
87
|
if (shouldTranslateYReset) {
|
|
98
|
-
translateY.value = _reactNativeReanimated.
|
|
88
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
|
|
99
89
|
duration: ANIMATION_DURATION_MILLIS
|
|
100
90
|
});
|
|
101
91
|
vectorY.value = 0;
|
|
@@ -107,21 +97,21 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
107
97
|
}
|
|
108
98
|
|
|
109
99
|
offsetsRef.current[prevIndex] = lastOffsetY.value;
|
|
110
|
-
const savedOffsetY =
|
|
100
|
+
const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;
|
|
111
101
|
lastOffsetY.value = savedOffsetY;
|
|
112
102
|
indexRef.current = nextIndex; // Determine whether to overlap every time index is changed.
|
|
113
103
|
|
|
114
104
|
overlapped.value = savedOffsetY > 0; // If next ScrollView's offset is too short, expand app bar.
|
|
115
105
|
|
|
116
106
|
if (translateY.value < 0 && savedOffsetY < appBarHeight) {
|
|
117
|
-
translateY.value = _reactNativeReanimated.
|
|
107
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
|
|
118
108
|
duration: ANIMATION_DURATION_MILLIS
|
|
119
109
|
});
|
|
120
110
|
vectorY.value = 0;
|
|
121
111
|
}
|
|
122
112
|
};
|
|
123
113
|
|
|
124
|
-
const scrollHandler = _reactNativeReanimated.
|
|
114
|
+
const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
|
|
125
115
|
onBeginDrag: () => {
|
|
126
116
|
lastTranslateY.value = translateY.value;
|
|
127
117
|
},
|
|
@@ -143,13 +133,13 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
143
133
|
} else {
|
|
144
134
|
if (offsetY > -maxTy) {
|
|
145
135
|
if (ty === 0) {
|
|
146
|
-
translateY.value = _reactNativeReanimated.
|
|
136
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(Math.min(Math.max(-offsetY, maxTy), 0), {
|
|
147
137
|
duration: ANIMATION_DURATION_MILLIS
|
|
148
138
|
});
|
|
149
139
|
}
|
|
150
140
|
} else {
|
|
151
141
|
if (ty === maxTy) {
|
|
152
|
-
translateY.value = _reactNativeReanimated.
|
|
142
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
|
|
153
143
|
duration: ANIMATION_DURATION_MILLIS
|
|
154
144
|
});
|
|
155
145
|
}
|
|
@@ -175,12 +165,11 @@ function useUnstableCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
175
165
|
const threshold = maxTy * 0.5;
|
|
176
166
|
const nextTranslateY = ty > threshold || offsetY < appBarHeight ? 0 : maxTy;
|
|
177
167
|
overlapped.value = offsetY + nextTranslateY > 0;
|
|
178
|
-
translateY.value = _reactNativeReanimated.
|
|
168
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(nextTranslateY, {
|
|
179
169
|
duration: ANIMATION_DURATION_MILLIS
|
|
180
170
|
});
|
|
181
171
|
}
|
|
182
172
|
});
|
|
183
|
-
|
|
184
173
|
const hasCollapsible = collapsibleToolbarHeight > 0;
|
|
185
174
|
const appBarStyle = [animatedStyle, {
|
|
186
175
|
paddingTop: safeAreaInsets.top
|