@fountain-ui/core 2.0.0-beta.21 → 2.0.0-beta.24
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/Tabs/ScrollableTabsView.js +2 -1
- package/build/commonjs/Tabs/ScrollableTabsView.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +1 -0
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/commonjs/Tabs/useScrollViewReaction.js +20 -12
- package/build/commonjs/Tabs/useScrollViewReaction.js.map +1 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js +2 -4
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useSyncAnimatedValue.js +2 -1
- package/build/commonjs/hooks/useSyncAnimatedValue.js.map +1 -1
- package/build/commonjs/store/MockStore.js +5 -1
- package/build/commonjs/store/MockStore.js.map +1 -1
- package/build/commonjs/store/SimpleStore.js +21 -15
- package/build/commonjs/store/SimpleStore.js.map +1 -1
- package/build/commonjs/store/index.js.map +1 -1
- package/build/commonjs/store/types.js.map +1 -1
- package/build/module/Tabs/ScrollableTabsView.js +2 -1
- package/build/module/Tabs/ScrollableTabsView.js.map +1 -1
- package/build/module/Tabs/Tabs.js +1 -0
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/module/Tabs/useScrollViewReaction.js +20 -12
- package/build/module/Tabs/useScrollViewReaction.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +3 -5
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useSyncAnimatedValue.js +2 -1
- package/build/module/hooks/useSyncAnimatedValue.js.map +1 -1
- package/build/module/store/MockStore.js +5 -1
- package/build/module/store/MockStore.js.map +1 -1
- package/build/module/store/SimpleStore.js +21 -15
- package/build/module/store/SimpleStore.js.map +1 -1
- package/build/module/store/index.js.map +1 -1
- package/build/module/store/types.js.map +1 -1
- package/build/typescript/Tabs/ScrollableTabsView.d.ts +1 -0
- package/build/typescript/Tabs/useScrollViewReaction.d.ts +1 -1
- package/build/typescript/store/MockStore.d.ts +5 -4
- package/build/typescript/store/SimpleStore.d.ts +7 -6
- package/build/typescript/store/index.d.ts +1 -1
- package/build/typescript/store/types.d.ts +5 -3
- package/package.json +2 -2
- package/src/Tabs/ScrollableTabsView.tsx +3 -1
- package/src/Tabs/Tabs.tsx +1 -0
- package/src/Tabs/useScrollViewReaction.ts +21 -11
- package/src/hooks/useCollapsibleAppBar.ts +3 -3
- package/src/hooks/useSyncAnimatedValue.ts +2 -1
- package/src/store/MockStore.ts +8 -4
- package/src/store/SimpleStore.ts +26 -19
- package/src/store/index.ts +1 -1
- package/src/store/types.ts +6 -3
|
@@ -18,12 +18,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
18
18
|
function ScrollableTabsView(props) {
|
|
19
19
|
const {
|
|
20
20
|
coordinates,
|
|
21
|
+
initialIndex,
|
|
21
22
|
...scrollViewProps
|
|
22
23
|
} = props;
|
|
23
24
|
const {
|
|
24
25
|
scrollViewRef,
|
|
25
26
|
onLayout
|
|
26
|
-
} = (0, _useScrollViewReaction.default)(coordinates);
|
|
27
|
+
} = (0, _useScrollViewReaction.default)(initialIndex, coordinates);
|
|
27
28
|
return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, _extends({
|
|
28
29
|
ref: scrollViewRef,
|
|
29
30
|
onLayout: onLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ScrollableTabsView","props","coordinates","scrollViewProps","scrollViewRef","onLayout","useScrollViewReaction"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n const {\n coordinates,\n ...scrollViewProps\n } = props;\n\n const { scrollViewRef, onLayout } = useScrollViewReaction(coordinates);\n\n return (\n <ScrollView\n ref={scrollViewRef}\n onLayout={onLayout}\n {...scrollViewProps}\n />\n );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;;;
|
|
1
|
+
{"version":3,"names":["ScrollableTabsView","props","coordinates","initialIndex","scrollViewProps","scrollViewRef","onLayout","useScrollViewReaction"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n initialIndex: number;\n coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n const {\n coordinates,\n initialIndex,\n ...scrollViewProps\n } = props;\n\n const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);\n\n return (\n <ScrollView\n ref={scrollViewRef}\n onLayout={onLayout}\n {...scrollViewProps}\n />\n );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;;;AAOe,SAASA,kBAAT,CAA4BC,KAA5B,EAA4D;EACvE,MAAM;IACFC,WADE;IAEFC,YAFE;IAGF,GAAGC;EAHD,IAIFH,KAJJ;EAMA,MAAM;IAAEI,aAAF;IAAiBC;EAAjB,IAA8B,IAAAC,8BAAA,EAAsBJ,YAAtB,EAAoCD,WAApC,CAApC;EAEA,oBACI,6BAAC,uBAAD;IACI,GAAG,EAAEG,aADT;IAEI,QAAQ,EAAEC;EAFd,GAGQF,eAHR,EADJ;AAOH;;AAAA"}
|
|
@@ -143,6 +143,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(function Tabs(props, ref) {
|
|
|
143
143
|
coordinates: coordinates,
|
|
144
144
|
directionalLockEnabled: true,
|
|
145
145
|
horizontal: true,
|
|
146
|
+
initialIndex: realInitialIndex,
|
|
146
147
|
scrollsToTop: false,
|
|
147
148
|
showsHorizontalScrollIndicator: false,
|
|
148
149
|
showsVerticalScrollIndicator: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","useEffect","subscribe","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const setTab = (newIndex: number) => {\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n });\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n scrollable={scrollable}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={styles.scrollableContainer}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","forwardRef","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","useSyncAnimatedValue","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","useImperativeHandle","styles","coordinates","updateCoordinate","useTabCoordinates","canRenderIndicator","isEveryTabCoordinatesDefined","indexStore","useIndexStore","useEffect","subscribe","tabElements","React","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","cloneElement","enableIndicator","undefined","tabIndicator","css"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const setTab = (newIndex: number) => {\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n });\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n scrollable={scrollable}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={styles.scrollableContainer}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n initialIndex={realInitialIndex}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ var _InternalContext = _interopRequireDefault(require("./InternalContext"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
function useScrollViewReaction(coordinates) {
|
|
14
|
+
function useScrollViewReaction(initialIndex, coordinates) {
|
|
15
15
|
const scrollViewRef = (0, _react.useRef)(null);
|
|
16
16
|
const lastScrolledXRef = (0, _react.useRef)(NaN);
|
|
17
17
|
const {
|
|
@@ -34,23 +34,31 @@ function useScrollViewReaction(coordinates) {
|
|
|
34
34
|
const onLayout = (0, _react.useCallback)(() => {
|
|
35
35
|
scrollToX(lastScrolledXRef.current);
|
|
36
36
|
}, []);
|
|
37
|
-
(0, _react.
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
const prevCoordinate = coordinates[prevIndex];
|
|
37
|
+
const computeNextScrollX = (0, _react.useCallback)(index => {
|
|
38
|
+
const prevIndex = index - 1;
|
|
39
|
+
const prevCoordinate = coordinates[prevIndex];
|
|
41
40
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
if (prevCoordinate) {
|
|
42
|
+
const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
|
|
43
|
+
return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
|
|
44
|
+
}
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
return 0;
|
|
47
|
+
}, [coordinates]);
|
|
48
|
+
(0, _react.useEffect)(() => {
|
|
49
|
+
if (Number.isNaN(lastScrolledXRef.current)) {
|
|
50
|
+
const x = computeNextScrollX(initialIndex);
|
|
49
51
|
|
|
52
|
+
if (x > 0) {
|
|
53
|
+
scrollToX(x);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}, [initialIndex, computeNextScrollX]);
|
|
57
|
+
(0, _react.useEffect)(() => {
|
|
50
58
|
return indexStore.subscribe(currentIndex => {
|
|
51
59
|
scrollToX(computeNextScrollX(currentIndex));
|
|
52
60
|
});
|
|
53
|
-
}, [indexStore,
|
|
61
|
+
}, [indexStore, computeNextScrollX]);
|
|
54
62
|
return {
|
|
55
63
|
scrollViewRef,
|
|
56
64
|
onLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useScrollViewReaction","coordinates","scrollViewRef","useRef","lastScrolledXRef","NaN","indexStore","useContext","InternalContext","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","onLayout","useCallback","
|
|
1
|
+
{"version":3,"names":["useScrollViewReaction","initialIndex","coordinates","scrollViewRef","useRef","lastScrolledXRef","NaN","indexStore","useContext","InternalContext","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","onLayout","useCallback","computeNextScrollX","index","prevIndex","prevCoordinate","prevTabWidth","x2","x1","Math","floor","useEffect","isNaN","subscribe","currentIndex"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport type TabCoordinate from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\nexport interface UseScrollViewReaction {\n scrollViewRef: MutableRefObject<ScrollView | null>;\n onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n initialIndex: number,\n coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n const scrollViewRef = useRef<ScrollView | null>(null);\n\n const lastScrolledXRef = useRef<number>(NaN);\n\n const { indexStore } = useContext(InternalContext);\n\n const scrollToX = (x: number) => {\n if (Number.isFinite(x)) {\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n lastScrolledXRef.current = x;\n }\n };\n\n const onLayout = useCallback(() => {\n scrollToX(lastScrolledXRef.current);\n }, []);\n\n const computeNextScrollX = useCallback((index: number): number => {\n const prevIndex = index - 1;\n const prevCoordinate = coordinates[prevIndex];\n\n if (prevCoordinate) {\n const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;\n return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);\n }\n\n return 0;\n }, [coordinates]);\n\n useEffect(() => {\n if (Number.isNaN(lastScrolledXRef.current)) {\n const x = computeNextScrollX(initialIndex);\n if (x > 0) {\n scrollToX(x);\n }\n }\n }, [initialIndex, computeNextScrollX]);\n\n useEffect(() => {\n return indexStore.subscribe(currentIndex => {\n scrollToX(computeNextScrollX(currentIndex));\n });\n }, [indexStore, computeNextScrollX]);\n\n return { scrollViewRef, onLayout };\n};\n"],"mappings":";;;;;;;AACA;;AAGA;;;;AAOe,SAASA,qBAAT,CACXC,YADW,EAEXC,WAFW,EAGU;EACrB,MAAMC,aAAa,GAAG,IAAAC,aAAA,EAA0B,IAA1B,CAAtB;EAEA,MAAMC,gBAAgB,GAAG,IAAAD,aAAA,EAAeE,GAAf,CAAzB;EAEA,MAAM;IAAEC;EAAF,IAAiB,IAAAC,iBAAA,EAAWC,wBAAX,CAAvB;;EAEA,MAAMC,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAR,aAAa,CAACW,OAAd,gFAAuBC,QAAvB,CAAgC;QAAEJ,CAAF;QAAKK,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAZ,gBAAgB,CAACS,OAAjB,GAA2BH,CAA3B;IACH;EACJ,CAND;;EAQA,MAAMO,QAAQ,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAC/BT,SAAS,CAACL,gBAAgB,CAACS,OAAlB,CAAT;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,MAAMM,kBAAkB,GAAG,IAAAD,kBAAA,EAAaE,KAAD,IAA2B;IAC9D,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAA1B;IACA,MAAME,cAAc,GAAGrB,WAAW,CAACoB,SAAD,CAAlC;;IAEA,IAAIC,cAAJ,EAAoB;MAChB,MAAMC,YAAY,GAAGD,cAAc,CAACE,EAAf,GAAoBF,cAAc,CAACG,EAAxD;MACA,OAAOC,IAAI,CAACC,KAAL,CAAWL,cAAc,CAACG,EAAf,GAAoBF,YAAY,GAAG,CAA9C,CAAP;IACH;;IAED,OAAO,CAAP;EACH,CAV0B,EAUxB,CAACtB,WAAD,CAVwB,CAA3B;EAYA,IAAA2B,gBAAA,EAAU,MAAM;IACZ,IAAIjB,MAAM,CAACkB,KAAP,CAAazB,gBAAgB,CAACS,OAA9B,CAAJ,EAA4C;MACxC,MAAMH,CAAC,GAAGS,kBAAkB,CAACnB,YAAD,CAA5B;;MACA,IAAIU,CAAC,GAAG,CAAR,EAAW;QACPD,SAAS,CAACC,CAAD,CAAT;MACH;IACJ;EACJ,CAPD,EAOG,CAACV,YAAD,EAAemB,kBAAf,CAPH;EASA,IAAAS,gBAAA,EAAU,MAAM;IACZ,OAAOtB,UAAU,CAACwB,SAAX,CAAqBC,YAAY,IAAI;MACxCtB,SAAS,CAACU,kBAAkB,CAACY,YAAD,CAAnB,CAAT;IACH,CAFM,CAAP;EAGH,CAJD,EAIG,CAACzB,UAAD,EAAaa,kBAAb,CAJH;EAMA,OAAO;IAAEjB,aAAF;IAAiBe;EAAjB,CAAP;AACH;;AAAA"}
|
|
@@ -83,8 +83,7 @@ function useCollapsibleAppBar() {
|
|
|
83
83
|
]);
|
|
84
84
|
const indexRef = (0, _react.useRef)(0);
|
|
85
85
|
const offsetsRef = (0, _react.useRef)([]);
|
|
86
|
-
|
|
87
|
-
const onScrollViewChanged = nextIndex => {
|
|
86
|
+
const onScrollViewChanged = (0, _react.useCallback)(nextIndex => {
|
|
88
87
|
const prevIndex = indexRef.current;
|
|
89
88
|
|
|
90
89
|
if (prevIndex === nextIndex) {
|
|
@@ -101,8 +100,7 @@ function useCollapsibleAppBar() {
|
|
|
101
100
|
if (translateY.value < 0 && savedOffsetY < appBarHeight) {
|
|
102
101
|
translateY.value = (0, _reactNativeReanimated.withTiming)(0, ANIMATION_CONFIG);
|
|
103
102
|
}
|
|
104
|
-
};
|
|
105
|
-
|
|
103
|
+
}, [appBarHeight]);
|
|
106
104
|
const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
|
|
107
105
|
onBeginDrag: () => {
|
|
108
106
|
if (keyboardDismissMode === 'on-drag') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n };\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(Keyboard.dismiss)();\n }\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n },\n }, [keyboardDismissMode, appBarHeight]);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAQA;;AACA;;AACA;;AACA;;;;AA8BA,MAAMA,cAAiC,GAAG;EACtCC,mBAAmB,EAAE;AADiB,CAA1C;AAIA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AAEA,MAAMC,uBAAuB,GAAGC,qBAAA,CAASC,EAAT,KAAgB,KAAhD;;AAEe,SAASC,oBAAT,GAAwF;EAAA,IAA1DC,WAA0D,uEAAnCR,cAAmC;EACnG,MAAM;IAAEC;EAAF,IAA6C,EAC/C,GAAGD,cAD4C;IAE/C,GAAGQ;EAF4C,CAAnD;EAKA,MAAMC,MAAM,GAAG,IAAAC,wBAAA,GAAf;EAEA,MAAMC,cAAc,GAAG,IAAAC,6CAAA,GAAvB;EAEA,MAAM,CAACC,YAAD,EAAeC,cAAf,IAAiC,IAAAC,gBAAA,GAAvC;EACA,MAAM,CAACC,wBAAD,EAA2BC,0BAA3B,IAAyD,IAAAF,gBAAA,GAA/D;EAEA,MAAMG,aAAa,GAAG,IAAAC,sCAAA,EAAgB,MAAM,CAACH,wBAAvB,EAAiD,CAACA,wBAAD,CAAjD,CAAtB;EAEA,MAAMI,UAAU,GAAG,IAAAC,qCAAA,EAAuB,CAAvB,CAAnB;EACA,MAAMC,cAAc,GAAG,IAAAD,qCAAA,EAAuB,CAAvB,CAAvB;EACA,MAAME,WAAW,GAAG,IAAAF,qCAAA,EAAuB,CAAvB,CAApB;EACA,MAAMG,UAAU,GAAG,IAAAH,qCAAA,EAAwB,KAAxB,CAAnB;EAEA,MAAMI,cAAc,GAAG,IAAAC,0BAAA,EAAkB,CAAlB,CAAvB;EACA,MAAMC,aAAa,GAAG,IAAAC,uCAAA,EAAiB,MAAM;IACzC,MAAMC,SAAS,GAAG,CAAC;MAAET,UAAU,EAAEA,UAAU,CAACU;IAAzB,CAAD,CAAlB;;IAEA,IAAIzB,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACvB,OAAO;QACHuB,SADG;QAEHE,SAAS,EAAEP,UAAU,CAACM,KAAX,GAAmBL,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C;MAFvD,CAAP;IAIH;;IACD,IAAI1B,qBAAA,CAASC,EAAT,KAAgB,SAApB,EAA+B;MAC3B,OAAO;QACHuB,SADG;QAEHG,SAAS,EAAER,UAAU,CAACM,KAAX,GAAmBL,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEO,SAAnC,GAA+C;MAFvD,CAAP;IAIH;;IACD,IAAI3B,qBAAA,CAASC,EAAT,KAAgB,KAApB,EAA2B;MACvB,OAAO;QACHuB,SADG;QAEHI,WAAW,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,WAF1B;QAGHC,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YAH3B;QAIHC,YAAY,EAAEV,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEU,YAJ3B;QAKHC,aAAa,EAAEZ,UAAU,CAACM,KAAX,GAAmBL,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEW,aAAnC,GAAmD;MAL/D,CAAP;IAOH;;IACD,OAAO,EAAP;EACH,CAzBqB,EAyBnB;IACC;AACR;AACA;EAHO,CAzBmB,CAAtB;EA+BA,MAAMC,QAAQ,GAAG,IAAAC,aAAA,EAAe,CAAf,CAAjB;EACA,MAAMC,UAAU,GAAG,IAAAD,aAAA,EAAsB,EAAtB,CAAnB;;EAEA,MAAME,mBAAmB,GAAIC,SAAD,IAAuB;IAC/C,MAAMC,SAAS,GAAGL,QAAQ,CAACM,OAA3B;;IACA,IAAID,SAAS,KAAKD,SAAlB,EAA6B;MACzB;IACH;;IAEDF,UAAU,CAACI,OAAX,CAAmBD,SAAnB,IAAgCnB,WAAW,CAACO,KAA5C;IAEA,MAAMc,YAAY,GAAGL,UAAU,CAACI,OAAX,CAAmBF,SAAnB,KAAiC,CAAtD;IACAlB,WAAW,CAACO,KAAZ,GAAoBc,YAApB;IAEAP,QAAQ,CAACM,OAAT,GAAmBF,SAAnB,CAX+C,CAa/C;;IACAjB,UAAU,CAACM,KAAX,GAAmBc,YAAY,GAAG,CAAlC,CAd+C,CAgB/C;;IACA,IAAIxB,UAAU,CAACU,KAAX,GAAmB,CAAnB,IAAwBc,YAAY,GAAG/B,YAA3C,EAAyD;MACrDO,UAAU,CAACU,KAAX,GAAmB,IAAAe,iCAAA,EAAW,CAAX,EAAc3C,gBAAd,CAAnB;IACH;EACJ,CApBD;;EAsBA,MAAM4C,aAAa,GAAG,IAAAC,+CAAA,EAAyB;IAC3CC,WAAW,EAAE,MAAM;MACf,IAAI/C,mBAAmB,KAAK,SAA5B,EAAuC;QACnC,IAAAgD,8BAAA,EAAQC,qBAAA,CAASC,OAAjB;MACH;;MACD7B,cAAc,CAACQ,KAAf,GAAuBV,UAAU,CAACU,KAAlC;IACH,CAN0C;IAO3CsB,eAAe,EAAE,MAAM;MACnB9B,cAAc,CAACQ,KAAf,GAAuBV,UAAU,CAACU,KAAlC;IACH,CAT0C;IAU3CuB,QAAQ,EAAGC,KAAD,IAAW;MACjB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEA,MAAMC,EAAE,GAAGtC,UAAU,CAACU,KAAtB;MACA,MAAM6B,KAAK,GAAGzC,aAAa,CAACY,KAA5B;;MAEA,IAAI1B,uBAAJ,EAA6B;QACzB,MAAMwD,EAAE,GAAGL,OAAO,GAAGhC,WAAW,CAACO,KAAjC;QAEAV,UAAU,CAACU,KAAX,GAAmByB,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBM,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASzC,cAAc,CAACQ,KAAf,GAAuB8B,EAAhC,EAAoCD,KAApC,CAAT,EAAqD,CAArD,CAAtC;QAEAnC,UAAU,CAACM,KAAX,GAAmByB,OAAO,GAAGnC,UAAU,CAACU,KAArB,GAA6B,CAAhD;MACH,CAND,MAMO;QACH,IAAIyB,OAAO,GAAG,CAACI,KAAf,EAAsB;UAClB,IAAID,EAAE,KAAK,CAAX,EAAc;YACVtC,UAAU,CAACU,KAAX,GAAmB,IAAAe,iCAAA,EAAWgB,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS,CAACR,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAAX,EAAmDzD,gBAAnD,CAAnB;UACH;QACJ,CAJD,MAIO;UACH,IAAIwD,EAAE,KAAKC,KAAX,EAAkB;YACdvC,UAAU,CAACU,KAAX,GAAmB,IAAAe,iCAAA,EAAW,CAAX,EAAc3C,gBAAd,CAAnB;UACH;QACJ;;QAEDsB,UAAU,CAACM,KAAX,GAAmByB,OAAO,GAAG,CAA7B;QAEAhC,WAAW,CAACO,KAAZ,GAAoByB,OAApB;MACH;IACJ,CArC0C;IAsC3CS,SAAS,EAAGV,KAAD,IAAW;MAClB/B,WAAW,CAACO,KAAZ,GAAoBwB,KAAK,CAACE,aAAN,CAAoBC,CAAxC;IACH,CAxC0C;IAyC3CQ,aAAa,EAAGX,KAAD,IAAW;MACtB,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;MAEAlC,WAAW,CAACO,KAAZ,GAAoByB,OAApB;MAEA,MAAMG,EAAE,GAAGtC,UAAU,CAACU,KAAtB;MACA,MAAM6B,KAAK,GAAGzC,aAAa,CAACY,KAA5B,CANsB,CAQtB;;MACA,IAAI4B,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;QACxB;MACH;;MAED,MAAMQ,SAAS,GAAGP,KAAK,GAAG,GAA1B;MAEA,MAAMQ,cAAc,GAAIT,EAAE,GAAGQ,SAAL,IAAkBX,OAAO,GAAG1C,YAA7B,GAA6C,CAA7C,GAAiD8C,KAAxE;MAEAnC,UAAU,CAACM,KAAX,GAAmByB,OAAO,GAAGY,cAAV,GAA2B,CAA9C;MAEA/C,UAAU,CAACU,KAAX,GAAmB,IAAAe,iCAAA,EAAWsB,cAAX,EAA2BjE,gBAA3B,CAAnB;IACH;EA7D0C,CAAzB,EA8DnB,CAACD,mBAAD,EAAsBY,YAAtB,CA9DmB,CAAtB;EAgEA,MAAMuD,cAAc,GAAGpD,wBAAwB,GAAG,CAAlD;EAEA,MAAMqD,WAAW,GAAG,CAChB1C,aADgB,EAEhB;IAAE2C,UAAU,EAAE3D,cAAc,CAAC4D;EAA7B,CAFgB,EAGhBH,cAAc,GAAG3D,MAAM,CAAC+D,QAAV,GAAqBC,SAHnB,CAApB;EAMA,OAAO;IACHJ,WADG;IAEHvD,cAFG;IAGHG,0BAHG;IAIHoC,QAAQ,EAAEP,aAJP;IAKHN,mBALG;IAMHkC,mBAAmB,EAAE;MAAEH,GAAG,EAAEH,cAAc,GAAGvD,YAAH,GAAkB;IAAvC;EANlB,CAAP;AAQH;;AAAA"}
|
|
1
|
+
{"version":3,"names":["defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","useElevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = useCallback((nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }, [appBarHeight]);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(Keyboard.dismiss)();\n }\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n },\n }, [keyboardDismissMode, appBarHeight]);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
@@ -11,9 +11,10 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
function useSyncAnimatedValue(config) {
|
|
13
13
|
const {
|
|
14
|
-
initialValue,
|
|
14
|
+
initialValue: maybeInitialValue,
|
|
15
15
|
shouldSyncAlways = false
|
|
16
16
|
} = config;
|
|
17
|
+
const initialValue = maybeInitialValue ?? 0;
|
|
17
18
|
const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(initialValue)).current;
|
|
18
19
|
const indexRef = (0, _react.useRef)(initialValue);
|
|
19
20
|
(0, _react.useEffect)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useSyncAnimatedValue","config","initialValue","shouldSyncAlways","animatedValue","useRef","Animated","Value","current","indexRef","useEffect","maybeId","addListener","newValue","value","undefined","removeListener","getCurrentValue"],"sources":["useSyncAnimatedValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport type { SyncAnimatedValue } from '../types';\n\nexport interface SyncAnimatedValueConfig {\n initialValue: number;\n shouldSyncAlways?: boolean;\n}\n\nexport default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {\n const {\n initialValue,\n shouldSyncAlways = false,\n } = config;\n\n const animatedValue = useRef(new Animated.Value(initialValue)).current;\n\n const indexRef = useRef<number>(initialValue);\n\n useEffect(() => {\n const maybeId = shouldSyncAlways ? animatedValue.addListener((newValue) => {\n indexRef.current = newValue.value;\n }) : undefined;\n\n return () => {\n if (maybeId != null) {\n animatedValue.removeListener(maybeId);\n }\n };\n }, [shouldSyncAlways]);\n\n return {\n animatedValue,\n initialValue,\n getCurrentValue: () => indexRef.current,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAQe,SAASA,oBAAT,CAA8BC,MAA9B,EAAkF;EAC7F,MAAM;IACFC,
|
|
1
|
+
{"version":3,"names":["useSyncAnimatedValue","config","initialValue","maybeInitialValue","shouldSyncAlways","animatedValue","useRef","Animated","Value","current","indexRef","useEffect","maybeId","addListener","newValue","value","undefined","removeListener","getCurrentValue"],"sources":["useSyncAnimatedValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport type { SyncAnimatedValue } from '../types';\n\nexport interface SyncAnimatedValueConfig {\n initialValue: number;\n shouldSyncAlways?: boolean;\n}\n\nexport default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {\n const {\n initialValue: maybeInitialValue,\n shouldSyncAlways = false,\n } = config;\n\n const initialValue = maybeInitialValue ?? 0;\n const animatedValue = useRef(new Animated.Value(initialValue)).current;\n\n const indexRef = useRef<number>(initialValue);\n\n useEffect(() => {\n const maybeId = shouldSyncAlways ? animatedValue.addListener((newValue) => {\n indexRef.current = newValue.value;\n }) : undefined;\n\n return () => {\n if (maybeId != null) {\n animatedValue.removeListener(maybeId);\n }\n };\n }, [shouldSyncAlways]);\n\n return {\n animatedValue,\n initialValue,\n getCurrentValue: () => indexRef.current,\n };\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAQe,SAASA,oBAAT,CAA8BC,MAA9B,EAAkF;EAC7F,MAAM;IACFC,YAAY,EAAEC,iBADZ;IAEFC,gBAAgB,GAAG;EAFjB,IAGFH,MAHJ;EAKA,MAAMC,YAAY,GAAGC,iBAAiB,IAAI,CAA1C;EACA,MAAME,aAAa,GAAG,IAAAC,aAAA,EAAO,IAAIC,qBAAA,CAASC,KAAb,CAAmBN,YAAnB,CAAP,EAAyCO,OAA/D;EAEA,MAAMC,QAAQ,GAAG,IAAAJ,aAAA,EAAeJ,YAAf,CAAjB;EAEA,IAAAS,gBAAA,EAAU,MAAM;IACZ,MAAMC,OAAO,GAAGR,gBAAgB,GAAGC,aAAa,CAACQ,WAAd,CAA2BC,QAAD,IAAc;MACvEJ,QAAQ,CAACD,OAAT,GAAmBK,QAAQ,CAACC,KAA5B;IACH,CAFkC,CAAH,GAE3BC,SAFL;IAIA,OAAO,MAAM;MACT,IAAIJ,OAAO,IAAI,IAAf,EAAqB;QACjBP,aAAa,CAACY,cAAd,CAA6BL,OAA7B;MACH;IACJ,CAJD;EAKH,CAVD,EAUG,CAACR,gBAAD,CAVH;EAYA,OAAO;IACHC,aADG;IAEHH,YAFG;IAGHgB,eAAe,EAAE,MAAMR,QAAQ,CAACD;EAH7B,CAAP;AAKH;;AAAA"}
|
|
@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
8
|
class MockStore {
|
|
9
|
-
dispatch(
|
|
9
|
+
dispatch(action) {// do nothing
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
getState() {
|
|
13
|
+
throw new Error('stub!');
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
removeAllListeners() {// do nothing
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["MockStore","dispatch","
|
|
1
|
+
{"version":3,"names":["MockStore","dispatch","action","getState","Error","removeAllListeners","subscribe","listener"],"sources":["MockStore.ts"],"sourcesContent":["import { MonoStore, StoreSubscription, DispatchAction } from './types';\n\nexport default class MockStore<S> implements MonoStore<S> {\n\n dispatch(action: DispatchAction<S>): void {\n // do nothing\n }\n\n getState(): S {\n throw new Error('stub!');\n }\n\n removeAllListeners(): void {\n // do nothing\n }\n\n subscribe(listener: (state: S) => void): StoreSubscription {\n return () => void 0;\n }\n\n};\n"],"mappings":";;;;;;;AAEe,MAAMA,SAAN,CAA2C;EAEtDC,QAAQ,CAACC,MAAD,EAAkC,CACtC;EACH;;EAEDC,QAAQ,GAAM;IACV,MAAM,IAAIC,KAAJ,CAAU,OAAV,CAAN;EACH;;EAEDC,kBAAkB,GAAS,CACvB;EACH;;EAEDC,SAAS,CAACC,QAAD,EAAkD;IACvD,OAAO,MAAM,KAAK,CAAlB;EACH;;AAhBqD;;;AAkBzD"}
|
|
@@ -12,36 +12,42 @@ function refEqual(a, b) {
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
class SimpleStore {
|
|
15
|
-
constructor(
|
|
16
|
-
_defineProperty(this, "
|
|
15
|
+
constructor(initialState) {
|
|
16
|
+
_defineProperty(this, "state", void 0);
|
|
17
17
|
|
|
18
18
|
_defineProperty(this, "listeners", []);
|
|
19
19
|
|
|
20
|
-
this.
|
|
20
|
+
this.state = initialState;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const index = this.listeners.indexOf(listener);
|
|
27
|
-
this.listeners.splice(index, 1);
|
|
28
|
-
};
|
|
29
|
-
}
|
|
23
|
+
dispatch(action) {
|
|
24
|
+
// @ts-ignore
|
|
25
|
+
const nextState = typeof action === 'function' ? action(this.state) : action; // Do not dispatch if state ref is equal
|
|
30
26
|
|
|
31
|
-
|
|
32
|
-
// Do not dispatch if data ref is equal
|
|
33
|
-
if (refEqual(this.data, data)) {
|
|
27
|
+
if (refEqual(this.state, nextState)) {
|
|
34
28
|
return;
|
|
35
29
|
}
|
|
36
30
|
|
|
37
|
-
this.
|
|
31
|
+
this.state = nextState;
|
|
38
32
|
|
|
39
33
|
for (const id in this.listeners) {
|
|
40
34
|
const listener = this.listeners[id];
|
|
41
|
-
listener === null || listener === void 0 ? void 0 : listener(
|
|
35
|
+
listener === null || listener === void 0 ? void 0 : listener(nextState);
|
|
42
36
|
}
|
|
43
37
|
}
|
|
44
38
|
|
|
39
|
+
getState() {
|
|
40
|
+
return this.state;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
subscribe(listener) {
|
|
44
|
+
this.listeners.push(listener);
|
|
45
|
+
return () => {
|
|
46
|
+
const index = this.listeners.indexOf(listener);
|
|
47
|
+
this.listeners.splice(index, 1);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
|
|
45
51
|
removeAllListeners() {
|
|
46
52
|
this.listeners.splice(0, this.listeners.length);
|
|
47
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["refEqual","a","b","SimpleStore","constructor","
|
|
1
|
+
{"version":3,"names":["refEqual","a","b","SimpleStore","constructor","initialState","state","dispatch","action","nextState","id","listeners","listener","getState","subscribe","push","index","indexOf","splice","removeAllListeners","length"],"sources":["SimpleStore.ts"],"sourcesContent":["import type { DispatchAction, MonoStore, StoreSubscription } from './types';\n\nfunction refEqual(a: any, b: any): boolean {\n return a === b;\n}\n\nexport default class SimpleStore<S> implements MonoStore<S> {\n\n private state: S;\n\n private listeners: Array<(state: S) => void> = [];\n\n constructor(initialState: S) {\n this.state = initialState;\n }\n\n dispatch(action: DispatchAction<S>): void {\n // @ts-ignore\n const nextState = typeof action === 'function' ? action(this.state) : action;\n\n // Do not dispatch if state ref is equal\n if (refEqual(this.state, nextState)) {\n return;\n }\n\n this.state = nextState;\n for (const id in this.listeners) {\n const listener = this.listeners[id];\n listener?.(nextState);\n }\n }\n\n getState(): S {\n return this.state;\n }\n\n subscribe(listener: (state: S) => void): StoreSubscription {\n this.listeners.push(listener);\n\n return () => {\n const index = this.listeners.indexOf(listener);\n this.listeners.splice(index, 1);\n };\n }\n\n removeAllListeners(): void {\n this.listeners.splice(0, this.listeners.length);\n }\n\n};\n"],"mappings":";;;;;;;;;AAEA,SAASA,QAAT,CAAkBC,CAAlB,EAA0BC,CAA1B,EAA2C;EACvC,OAAOD,CAAC,KAAKC,CAAb;AACH;;AAEc,MAAMC,WAAN,CAA6C;EAMxDC,WAAW,CAACC,YAAD,EAAkB;IAAA;;IAAA,mCAFkB,EAElB;;IACzB,KAAKC,KAAL,GAAaD,YAAb;EACH;;EAEDE,QAAQ,CAACC,MAAD,EAAkC;IACtC;IACA,MAAMC,SAAS,GAAG,OAAOD,MAAP,KAAkB,UAAlB,GAA+BA,MAAM,CAAC,KAAKF,KAAN,CAArC,GAAoDE,MAAtE,CAFsC,CAItC;;IACA,IAAIR,QAAQ,CAAC,KAAKM,KAAN,EAAaG,SAAb,CAAZ,EAAqC;MACjC;IACH;;IAED,KAAKH,KAAL,GAAaG,SAAb;;IACA,KAAK,MAAMC,EAAX,IAAiB,KAAKC,SAAtB,EAAiC;MAC7B,MAAMC,QAAQ,GAAG,KAAKD,SAAL,CAAeD,EAAf,CAAjB;MACAE,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGH,SAAH,CAAR;IACH;EACJ;;EAEDI,QAAQ,GAAM;IACV,OAAO,KAAKP,KAAZ;EACH;;EAEDQ,SAAS,CAACF,QAAD,EAAkD;IACvD,KAAKD,SAAL,CAAeI,IAAf,CAAoBH,QAApB;IAEA,OAAO,MAAM;MACT,MAAMI,KAAK,GAAG,KAAKL,SAAL,CAAeM,OAAf,CAAuBL,QAAvB,CAAd;MACA,KAAKD,SAAL,CAAeO,MAAf,CAAsBF,KAAtB,EAA6B,CAA7B;IACH,CAHD;EAIH;;EAEDG,kBAAkB,GAAS;IACvB,KAAKR,SAAL,CAAeO,MAAf,CAAsB,CAAtB,EAAyB,KAAKP,SAAL,CAAeS,MAAxC;EACH;;AAzCuD;;;AA2C3D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as SimpleStore } from './SimpleStore';\nexport { default as MockStore } from './MockStore';\nexport type { MonoStore } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as SimpleStore } from './SimpleStore';\nexport { default as MockStore } from './MockStore';\nexport type { MonoStore, DispatchAction } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface StoreSubscription {\n (): void;\n}\n\nexport interface MonoStore<
|
|
1
|
+
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface StoreSubscription {\n (): void;\n}\n\nexport type DispatchAction<State> = State | ((prevState: State) => State);\n\nexport interface MonoStore<S> {\n dispatch: (action: DispatchAction<S>) => void;\n getState: () => S;\n subscribe: (listener: (state: S) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n"],"mappings":""}
|
|
@@ -6,12 +6,13 @@ import useScrollViewReaction from './useScrollViewReaction';
|
|
|
6
6
|
export default function ScrollableTabsView(props) {
|
|
7
7
|
const {
|
|
8
8
|
coordinates,
|
|
9
|
+
initialIndex,
|
|
9
10
|
...scrollViewProps
|
|
10
11
|
} = props;
|
|
11
12
|
const {
|
|
12
13
|
scrollViewRef,
|
|
13
14
|
onLayout
|
|
14
|
-
} = useScrollViewReaction(coordinates);
|
|
15
|
+
} = useScrollViewReaction(initialIndex, coordinates);
|
|
15
16
|
return /*#__PURE__*/React.createElement(ScrollView, _extends({
|
|
16
17
|
ref: scrollViewRef,
|
|
17
18
|
onLayout: onLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ScrollView","useScrollViewReaction","ScrollableTabsView","props","coordinates","scrollViewProps","scrollViewRef","onLayout"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n const {\n coordinates,\n ...scrollViewProps\n } = props;\n\n const { scrollViewRef, onLayout } = useScrollViewReaction(coordinates);\n\n return (\n <ScrollView\n ref={scrollViewRef}\n onLayout={onLayout}\n {...scrollViewProps}\n />\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,qBAAP,MAAkC,yBAAlC;
|
|
1
|
+
{"version":3,"names":["React","ScrollView","useScrollViewReaction","ScrollableTabsView","props","coordinates","initialIndex","scrollViewProps","scrollViewRef","onLayout"],"sources":["ScrollableTabsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { ScrollViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport TabCoordinate from './TabCoordinate';\nimport useScrollViewReaction from './useScrollViewReaction';\n\nexport interface ScrollableTabsViewProps extends ScrollViewProps {\n initialIndex: number;\n coordinates: TabCoordinate[];\n}\n\nexport default function ScrollableTabsView(props: ScrollableTabsViewProps) {\n const {\n coordinates,\n initialIndex,\n ...scrollViewProps\n } = props;\n\n const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);\n\n return (\n <ScrollView\n ref={scrollViewRef}\n onLayout={onLayout}\n {...scrollViewProps}\n />\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT,QAA2B,cAA3B;AAEA,OAAOC,qBAAP,MAAkC,yBAAlC;AAOA,eAAe,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;EACvE,MAAM;IACFC,WADE;IAEFC,YAFE;IAGF,GAAGC;EAHD,IAIFH,KAJJ;EAMA,MAAM;IAAEI,aAAF;IAAiBC;EAAjB,IAA8BP,qBAAqB,CAACI,YAAD,EAAeD,WAAf,CAAzD;EAEA,oBACI,oBAAC,UAAD;IACI,GAAG,EAAEG,aADT;IAEI,QAAQ,EAAEC;EAFd,GAGQF,eAHR,EADJ;AAOH;AAAA"}
|
|
@@ -118,6 +118,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
|
|
|
118
118
|
coordinates: coordinates,
|
|
119
119
|
directionalLockEnabled: true,
|
|
120
120
|
horizontal: true,
|
|
121
|
+
initialIndex: realInitialIndex,
|
|
121
122
|
scrollsToTop: false,
|
|
122
123
|
showsHorizontalScrollIndicator: false,
|
|
123
124
|
showsVerticalScrollIndicator: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","styles","coordinates","updateCoordinate","canRenderIndicator","indexStore","subscribe","tabElements","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const setTab = (newIndex: number) => {\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n });\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n scrollable={scrollable}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={styles.scrollableContainer}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["React","cloneElement","forwardRef","useEffect","useImperativeHandle","View","css","useTheme","useSyncAnimatedValue","TabIndicator","ScrollableTabsView","IndexAwareTab","useTabCoordinates","useIndexStore","InternalContext","isEveryTabCoordinatesDefined","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","ref","children","initialIndex","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","style","variant","UNSTABLE_sharedIndex","fallbackSharedIndex","initialValue","sharedIndex","realInitialIndex","setTab","newIndex","animatedValue","setValue","styles","coordinates","updateCoordinate","canRenderIndicator","indexStore","subscribe","tabElements","Children","map","child","index","onLayout","event","x","width","nativeEvent","layout","onMouseDown","e","preventDefault","onPress","tabElement","enableIndicator","undefined","tabIndicator"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, useEffect, useImperativeHandle } from 'react';\nimport type { GestureResponderEvent, LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport { useSyncAnimatedValue } from '../hooks';\nimport type TabsProps from './TabsProps';\nimport type { TabsInstance } from './types';\nimport TabIndicator from './TabIndicator';\nimport ScrollableTabsView from './ScrollableTabsView';\nimport IndexAwareTab from './IndexAwareTab';\nimport useTabCoordinates from './useTabCoordinates';\nimport useIndexStore from './useIndexStore';\nimport InternalContext from './InternalContext';\nimport { isEveryTabCoordinatesDefined } from './utils';\n\ntype TabsStyleKeys =\n | 'root'\n | 'fixedRoot'\n | 'fixedTab'\n | 'scrollableContainer';\n\ntype TabsStyles = NamedStylesStringUnion<TabsStyleKeys>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {},\n fixedRoot: {\n flexDirection: 'row',\n },\n fixedTab: {\n flex: 1,\n },\n scrollableContainer: {\n paddingHorizontal: theme.spacing(1),\n },\n };\n};\n\nconst Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {\n const {\n children,\n initialIndex = 0,\n disableIndicator = false,\n keyboardDismissMode = 'none',\n keyboardShouldPersistTaps = 'never',\n onChange,\n scrollable = false,\n style,\n variant = 'primary',\n UNSTABLE_sharedIndex,\n } = props;\n\n const fallbackSharedIndex = useSyncAnimatedValue({ initialValue: initialIndex });\n const sharedIndex = UNSTABLE_sharedIndex ?? fallbackSharedIndex;\n const realInitialIndex = sharedIndex.initialValue;\n\n const setTab = (newIndex: number) => {\n sharedIndex.animatedValue.setValue(newIndex);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n setTab,\n }),\n [sharedIndex],\n );\n\n const styles = useStyles();\n\n const [coordinates, updateCoordinate] = useTabCoordinates(children);\n\n const canRenderIndicator = isEveryTabCoordinatesDefined(coordinates, children);\n\n const indexStore = useIndexStore(sharedIndex);\n\n useEffect(() => {\n return indexStore.subscribe(newIndex => {\n onChange?.(newIndex);\n });\n }, [indexStore, onChange]);\n\n const tabElements = React.Children.map(children, (child, index) => {\n const onLayout = (event: LayoutChangeEvent) => {\n const { x, width } = event.nativeEvent.layout;\n\n updateCoordinate(index, x, width);\n };\n\n const onMouseDown = (e: GestureResponderEvent) => {\n if (keyboardShouldPersistTaps === 'always') {\n e.preventDefault();\n }\n };\n\n const onPress = () => {\n setTab(index);\n\n // @ts-ignore\n child.props.onPress?.();\n };\n\n // @ts-ignore\n const tabElement = cloneElement(child, {\n enableIndicator: !disableIndicator && !canRenderIndicator,\n onLayout,\n onPress,\n onMouseDown,\n variant,\n style: scrollable ? undefined : styles.fixedTab,\n });\n\n return (\n <IndexAwareTab\n children={tabElement}\n index={index}\n initialIndex={realInitialIndex}\n />\n );\n });\n\n const tabIndicator = canRenderIndicator ? (\n <TabIndicator\n coordinates={coordinates}\n disabled={disableIndicator}\n initialIndex={realInitialIndex}\n scrollable={scrollable}\n />\n ) : null;\n\n return (\n <InternalContext.Provider value={{ indexStore }}>\n <View\n style={css([\n styles.root,\n scrollable ? undefined : styles.fixedRoot,\n style,\n ])}\n >\n {scrollable ? (\n <ScrollableTabsView\n automaticallyAdjustContentInsets={false}\n bounces={false}\n contentContainerStyle={styles.scrollableContainer}\n coordinates={coordinates}\n directionalLockEnabled={true}\n horizontal={true}\n initialIndex={realInitialIndex}\n scrollsToTop={false}\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n keyboardDismissMode={keyboardDismissMode}\n keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n >\n {tabElements}\n {tabIndicator}\n </ScrollableTabsView>\n ) : (\n <React.Fragment>\n {tabElements}\n {tabIndicator}\n </React.Fragment>\n )}\n </View>\n </InternalContext.Provider>\n );\n});\n\nexport default Tabs;\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useContext, useEffect, useRef } from 'react';
|
|
2
2
|
import InternalContext from './InternalContext';
|
|
3
|
-
export default function useScrollViewReaction(coordinates) {
|
|
3
|
+
export default function useScrollViewReaction(initialIndex, coordinates) {
|
|
4
4
|
const scrollViewRef = useRef(null);
|
|
5
5
|
const lastScrolledXRef = useRef(NaN);
|
|
6
6
|
const {
|
|
@@ -23,23 +23,31 @@ export default function useScrollViewReaction(coordinates) {
|
|
|
23
23
|
const onLayout = useCallback(() => {
|
|
24
24
|
scrollToX(lastScrolledXRef.current);
|
|
25
25
|
}, []);
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
const prevCoordinate = coordinates[prevIndex];
|
|
26
|
+
const computeNextScrollX = useCallback(index => {
|
|
27
|
+
const prevIndex = index - 1;
|
|
28
|
+
const prevCoordinate = coordinates[prevIndex];
|
|
30
29
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
if (prevCoordinate) {
|
|
31
|
+
const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
|
|
32
|
+
return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
|
|
33
|
+
}
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
return 0;
|
|
36
|
+
}, [coordinates]);
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (Number.isNaN(lastScrolledXRef.current)) {
|
|
39
|
+
const x = computeNextScrollX(initialIndex);
|
|
38
40
|
|
|
41
|
+
if (x > 0) {
|
|
42
|
+
scrollToX(x);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}, [initialIndex, computeNextScrollX]);
|
|
46
|
+
useEffect(() => {
|
|
39
47
|
return indexStore.subscribe(currentIndex => {
|
|
40
48
|
scrollToX(computeNextScrollX(currentIndex));
|
|
41
49
|
});
|
|
42
|
-
}, [indexStore,
|
|
50
|
+
}, [indexStore, computeNextScrollX]);
|
|
43
51
|
return {
|
|
44
52
|
scrollViewRef,
|
|
45
53
|
onLayout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useContext","useEffect","useRef","InternalContext","useScrollViewReaction","coordinates","scrollViewRef","lastScrolledXRef","NaN","indexStore","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","onLayout","computeNextScrollX","index","prevIndex","prevCoordinate","prevTabWidth","x2","x1","Math","floor","subscribe","currentIndex"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport type TabCoordinate from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\nexport interface UseScrollViewReaction {\n scrollViewRef: MutableRefObject<ScrollView | null>;\n onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n const scrollViewRef = useRef<ScrollView | null>(null);\n\n const lastScrolledXRef = useRef<number>(NaN);\n\n const { indexStore } = useContext(InternalContext);\n\n const scrollToX = (x: number) => {\n if (Number.isFinite(x)) {\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n lastScrolledXRef.current = x;\n }\n };\n\n const onLayout = useCallback(() => {\n scrollToX(lastScrolledXRef.current);\n }, []);\n\n
|
|
1
|
+
{"version":3,"names":["useCallback","useContext","useEffect","useRef","InternalContext","useScrollViewReaction","initialIndex","coordinates","scrollViewRef","lastScrolledXRef","NaN","indexStore","scrollToX","x","Number","isFinite","current","scrollTo","y","animated","onLayout","computeNextScrollX","index","prevIndex","prevCoordinate","prevTabWidth","x2","x1","Math","floor","isNaN","subscribe","currentIndex"],"sources":["useScrollViewReaction.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport type { ScrollView, ViewProps } from 'react-native';\nimport type TabCoordinate from './TabCoordinate';\nimport InternalContext from './InternalContext';\n\nexport interface UseScrollViewReaction {\n scrollViewRef: MutableRefObject<ScrollView | null>;\n onLayout: ViewProps['onLayout'];\n}\n\nexport default function useScrollViewReaction(\n initialIndex: number,\n coordinates: TabCoordinate[],\n): UseScrollViewReaction {\n const scrollViewRef = useRef<ScrollView | null>(null);\n\n const lastScrolledXRef = useRef<number>(NaN);\n\n const { indexStore } = useContext(InternalContext);\n\n const scrollToX = (x: number) => {\n if (Number.isFinite(x)) {\n scrollViewRef.current?.scrollTo({ x, y: 0, animated: true });\n\n lastScrolledXRef.current = x;\n }\n };\n\n const onLayout = useCallback(() => {\n scrollToX(lastScrolledXRef.current);\n }, []);\n\n const computeNextScrollX = useCallback((index: number): number => {\n const prevIndex = index - 1;\n const prevCoordinate = coordinates[prevIndex];\n\n if (prevCoordinate) {\n const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;\n return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);\n }\n\n return 0;\n }, [coordinates]);\n\n useEffect(() => {\n if (Number.isNaN(lastScrolledXRef.current)) {\n const x = computeNextScrollX(initialIndex);\n if (x > 0) {\n scrollToX(x);\n }\n }\n }, [initialIndex, computeNextScrollX]);\n\n useEffect(() => {\n return indexStore.subscribe(currentIndex => {\n scrollToX(computeNextScrollX(currentIndex));\n });\n }, [indexStore, computeNextScrollX]);\n\n return { scrollViewRef, onLayout };\n};\n"],"mappings":"AACA,SAASA,WAAT,EAAsBC,UAAtB,EAAkCC,SAAlC,EAA6CC,MAA7C,QAA2D,OAA3D;AAGA,OAAOC,eAAP,MAA4B,mBAA5B;AAOA,eAAe,SAASC,qBAAT,CACXC,YADW,EAEXC,WAFW,EAGU;EACrB,MAAMC,aAAa,GAAGL,MAAM,CAAoB,IAApB,CAA5B;EAEA,MAAMM,gBAAgB,GAAGN,MAAM,CAASO,GAAT,CAA/B;EAEA,MAAM;IAAEC;EAAF,IAAiBV,UAAU,CAACG,eAAD,CAAjC;;EAEA,MAAMQ,SAAS,GAAIC,CAAD,IAAe;IAC7B,IAAIC,MAAM,CAACC,QAAP,CAAgBF,CAAhB,CAAJ,EAAwB;MAAA;;MACpB,yBAAAL,aAAa,CAACQ,OAAd,gFAAuBC,QAAvB,CAAgC;QAAEJ,CAAF;QAAKK,CAAC,EAAE,CAAR;QAAWC,QAAQ,EAAE;MAArB,CAAhC;MAEAV,gBAAgB,CAACO,OAAjB,GAA2BH,CAA3B;IACH;EACJ,CAND;;EAQA,MAAMO,QAAQ,GAAGpB,WAAW,CAAC,MAAM;IAC/BY,SAAS,CAACH,gBAAgB,CAACO,OAAlB,CAAT;EACH,CAF2B,EAEzB,EAFyB,CAA5B;EAIA,MAAMK,kBAAkB,GAAGrB,WAAW,CAAEsB,KAAD,IAA2B;IAC9D,MAAMC,SAAS,GAAGD,KAAK,GAAG,CAA1B;IACA,MAAME,cAAc,GAAGjB,WAAW,CAACgB,SAAD,CAAlC;;IAEA,IAAIC,cAAJ,EAAoB;MAChB,MAAMC,YAAY,GAAGD,cAAc,CAACE,EAAf,GAAoBF,cAAc,CAACG,EAAxD;MACA,OAAOC,IAAI,CAACC,KAAL,CAAWL,cAAc,CAACG,EAAf,GAAoBF,YAAY,GAAG,CAA9C,CAAP;IACH;;IAED,OAAO,CAAP;EACH,CAVqC,EAUnC,CAAClB,WAAD,CAVmC,CAAtC;EAYAL,SAAS,CAAC,MAAM;IACZ,IAAIY,MAAM,CAACgB,KAAP,CAAarB,gBAAgB,CAACO,OAA9B,CAAJ,EAA4C;MACxC,MAAMH,CAAC,GAAGQ,kBAAkB,CAACf,YAAD,CAA5B;;MACA,IAAIO,CAAC,GAAG,CAAR,EAAW;QACPD,SAAS,CAACC,CAAD,CAAT;MACH;IACJ;EACJ,CAPQ,EAON,CAACP,YAAD,EAAee,kBAAf,CAPM,CAAT;EASAnB,SAAS,CAAC,MAAM;IACZ,OAAOS,UAAU,CAACoB,SAAX,CAAqBC,YAAY,IAAI;MACxCpB,SAAS,CAACS,kBAAkB,CAACW,YAAD,CAAnB,CAAT;IACH,CAFM,CAAP;EAGH,CAJQ,EAIN,CAACrB,UAAD,EAAaU,kBAAb,CAJM,CAAT;EAMA,OAAO;IAAEb,aAAF;IAAiBY;EAAjB,CAAP;AACH;AAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
1
|
+
import { useCallback, useRef } from 'react';
|
|
2
2
|
import { Keyboard, Platform } from 'react-native';
|
|
3
3
|
import { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
@@ -66,8 +66,7 @@ export default function useCollapsibleAppBar() {
|
|
|
66
66
|
]);
|
|
67
67
|
const indexRef = useRef(0);
|
|
68
68
|
const offsetsRef = useRef([]);
|
|
69
|
-
|
|
70
|
-
const onScrollViewChanged = nextIndex => {
|
|
69
|
+
const onScrollViewChanged = useCallback(nextIndex => {
|
|
71
70
|
const prevIndex = indexRef.current;
|
|
72
71
|
|
|
73
72
|
if (prevIndex === nextIndex) {
|
|
@@ -84,8 +83,7 @@ export default function useCollapsibleAppBar() {
|
|
|
84
83
|
if (translateY.value < 0 && savedOffsetY < appBarHeight) {
|
|
85
84
|
translateY.value = withTiming(0, ANIMATION_CONFIG);
|
|
86
85
|
}
|
|
87
|
-
};
|
|
88
|
-
|
|
86
|
+
}, [appBarHeight]);
|
|
89
87
|
const scrollHandler = useAnimatedScrollHandler({
|
|
90
88
|
onBeginDrag: () => {
|
|
91
89
|
if (keyboardDismissMode === 'on-drag') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","scrollHandler","onBeginDrag","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n };\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(Keyboard.dismiss)();\n }\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n },\n }, [keyboardDismissMode, appBarHeight]);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["useCallback","useRef","Keyboard","Platform","runOnJS","useAnimatedScrollHandler","useAnimatedStyle","useDerivedValue","useSharedValue","withTiming","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","ANIMATION_CONFIG","duration","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","translateY","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","scrollHandler","onBeginDrag","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n if (Platform.OS === 'web') {\n return {\n transform,\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n };\n }\n if (Platform.OS === 'android') {\n return {\n transform,\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n };\n }\n if (Platform.OS === 'ios') {\n return {\n transform,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n };\n }\n return {};\n }, [\n /**\n * FIXME: Consider add `elevationStyle` to dependencies.\n */\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = useCallback((nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }, [appBarHeight]);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(Keyboard.dismiss)();\n }\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), ANIMATION_CONFIG);\n }\n } else {\n if (ty === maxTy) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n },\n }, [keyboardDismissMode, appBarHeight]);\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"],"mappings":"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"}
|
|
@@ -2,9 +2,10 @@ import { useEffect, useRef } from 'react';
|
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
3
|
export default function useSyncAnimatedValue(config) {
|
|
4
4
|
const {
|
|
5
|
-
initialValue,
|
|
5
|
+
initialValue: maybeInitialValue,
|
|
6
6
|
shouldSyncAlways = false
|
|
7
7
|
} = config;
|
|
8
|
+
const initialValue = maybeInitialValue ?? 0;
|
|
8
9
|
const animatedValue = useRef(new Animated.Value(initialValue)).current;
|
|
9
10
|
const indexRef = useRef(initialValue);
|
|
10
11
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useRef","Animated","useSyncAnimatedValue","config","initialValue","shouldSyncAlways","animatedValue","Value","current","indexRef","maybeId","addListener","newValue","value","undefined","removeListener","getCurrentValue"],"sources":["useSyncAnimatedValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport type { SyncAnimatedValue } from '../types';\n\nexport interface SyncAnimatedValueConfig {\n initialValue: number;\n shouldSyncAlways?: boolean;\n}\n\nexport default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {\n const {\n initialValue,\n shouldSyncAlways = false,\n } = config;\n\n const animatedValue = useRef(new Animated.Value(initialValue)).current;\n\n const indexRef = useRef<number>(initialValue);\n\n useEffect(() => {\n const maybeId = shouldSyncAlways ? animatedValue.addListener((newValue) => {\n indexRef.current = newValue.value;\n }) : undefined;\n\n return () => {\n if (maybeId != null) {\n animatedValue.removeListener(maybeId);\n }\n };\n }, [shouldSyncAlways]);\n\n return {\n animatedValue,\n initialValue,\n getCurrentValue: () => indexRef.current,\n };\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AACA,SAASC,QAAT,QAAyB,cAAzB;AAQA,eAAe,SAASC,oBAAT,CAA8BC,MAA9B,EAAkF;EAC7F,MAAM;IACFC,
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","Animated","useSyncAnimatedValue","config","initialValue","maybeInitialValue","shouldSyncAlways","animatedValue","Value","current","indexRef","maybeId","addListener","newValue","value","undefined","removeListener","getCurrentValue"],"sources":["useSyncAnimatedValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { Animated } from 'react-native';\nimport type { SyncAnimatedValue } from '../types';\n\nexport interface SyncAnimatedValueConfig {\n initialValue: number;\n shouldSyncAlways?: boolean;\n}\n\nexport default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {\n const {\n initialValue: maybeInitialValue,\n shouldSyncAlways = false,\n } = config;\n\n const initialValue = maybeInitialValue ?? 0;\n const animatedValue = useRef(new Animated.Value(initialValue)).current;\n\n const indexRef = useRef<number>(initialValue);\n\n useEffect(() => {\n const maybeId = shouldSyncAlways ? animatedValue.addListener((newValue) => {\n indexRef.current = newValue.value;\n }) : undefined;\n\n return () => {\n if (maybeId != null) {\n animatedValue.removeListener(maybeId);\n }\n };\n }, [shouldSyncAlways]);\n\n return {\n animatedValue,\n initialValue,\n getCurrentValue: () => indexRef.current,\n };\n};\n"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AACA,SAASC,QAAT,QAAyB,cAAzB;AAQA,eAAe,SAASC,oBAAT,CAA8BC,MAA9B,EAAkF;EAC7F,MAAM;IACFC,YAAY,EAAEC,iBADZ;IAEFC,gBAAgB,GAAG;EAFjB,IAGFH,MAHJ;EAKA,MAAMC,YAAY,GAAGC,iBAAiB,IAAI,CAA1C;EACA,MAAME,aAAa,GAAGP,MAAM,CAAC,IAAIC,QAAQ,CAACO,KAAb,CAAmBJ,YAAnB,CAAD,CAAN,CAAyCK,OAA/D;EAEA,MAAMC,QAAQ,GAAGV,MAAM,CAASI,YAAT,CAAvB;EAEAL,SAAS,CAAC,MAAM;IACZ,MAAMY,OAAO,GAAGL,gBAAgB,GAAGC,aAAa,CAACK,WAAd,CAA2BC,QAAD,IAAc;MACvEH,QAAQ,CAACD,OAAT,GAAmBI,QAAQ,CAACC,KAA5B;IACH,CAFkC,CAAH,GAE3BC,SAFL;IAIA,OAAO,MAAM;MACT,IAAIJ,OAAO,IAAI,IAAf,EAAqB;QACjBJ,aAAa,CAACS,cAAd,CAA6BL,OAA7B;MACH;IACJ,CAJD;EAKH,CAVQ,EAUN,CAACL,gBAAD,CAVM,CAAT;EAYA,OAAO;IACHC,aADG;IAEHH,YAFG;IAGHa,eAAe,EAAE,MAAMP,QAAQ,CAACD;EAH7B,CAAP;AAKH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["MockStore","dispatch","
|
|
1
|
+
{"version":3,"names":["MockStore","dispatch","action","getState","Error","removeAllListeners","subscribe","listener"],"sources":["MockStore.ts"],"sourcesContent":["import { MonoStore, StoreSubscription, DispatchAction } from './types';\n\nexport default class MockStore<S> implements MonoStore<S> {\n\n dispatch(action: DispatchAction<S>): void {\n // do nothing\n }\n\n getState(): S {\n throw new Error('stub!');\n }\n\n removeAllListeners(): void {\n // do nothing\n }\n\n subscribe(listener: (state: S) => void): StoreSubscription {\n return () => void 0;\n }\n\n};\n"],"mappings":"AAEA,eAAe,MAAMA,SAAN,CAA2C;EAEtDC,QAAQ,CAACC,MAAD,EAAkC,CACtC;EACH;;EAEDC,QAAQ,GAAM;IACV,MAAM,IAAIC,KAAJ,CAAU,OAAV,CAAN;EACH;;EAEDC,kBAAkB,GAAS,CACvB;EACH;;EAEDC,SAAS,CAACC,QAAD,EAAkD;IACvD,OAAO,MAAM,KAAK,CAAlB;EACH;;AAhBqD;AAkBzD"}
|
|
@@ -5,36 +5,42 @@ function refEqual(a, b) {
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
export default class SimpleStore {
|
|
8
|
-
constructor(
|
|
9
|
-
_defineProperty(this, "
|
|
8
|
+
constructor(initialState) {
|
|
9
|
+
_defineProperty(this, "state", void 0);
|
|
10
10
|
|
|
11
11
|
_defineProperty(this, "listeners", []);
|
|
12
12
|
|
|
13
|
-
this.
|
|
13
|
+
this.state = initialState;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const index = this.listeners.indexOf(listener);
|
|
20
|
-
this.listeners.splice(index, 1);
|
|
21
|
-
};
|
|
22
|
-
}
|
|
16
|
+
dispatch(action) {
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
const nextState = typeof action === 'function' ? action(this.state) : action; // Do not dispatch if state ref is equal
|
|
23
19
|
|
|
24
|
-
|
|
25
|
-
// Do not dispatch if data ref is equal
|
|
26
|
-
if (refEqual(this.data, data)) {
|
|
20
|
+
if (refEqual(this.state, nextState)) {
|
|
27
21
|
return;
|
|
28
22
|
}
|
|
29
23
|
|
|
30
|
-
this.
|
|
24
|
+
this.state = nextState;
|
|
31
25
|
|
|
32
26
|
for (const id in this.listeners) {
|
|
33
27
|
const listener = this.listeners[id];
|
|
34
|
-
listener === null || listener === void 0 ? void 0 : listener(
|
|
28
|
+
listener === null || listener === void 0 ? void 0 : listener(nextState);
|
|
35
29
|
}
|
|
36
30
|
}
|
|
37
31
|
|
|
32
|
+
getState() {
|
|
33
|
+
return this.state;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
subscribe(listener) {
|
|
37
|
+
this.listeners.push(listener);
|
|
38
|
+
return () => {
|
|
39
|
+
const index = this.listeners.indexOf(listener);
|
|
40
|
+
this.listeners.splice(index, 1);
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
|
|
38
44
|
removeAllListeners() {
|
|
39
45
|
this.listeners.splice(0, this.listeners.length);
|
|
40
46
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["refEqual","a","b","SimpleStore","constructor","
|
|
1
|
+
{"version":3,"names":["refEqual","a","b","SimpleStore","constructor","initialState","state","dispatch","action","nextState","id","listeners","listener","getState","subscribe","push","index","indexOf","splice","removeAllListeners","length"],"sources":["SimpleStore.ts"],"sourcesContent":["import type { DispatchAction, MonoStore, StoreSubscription } from './types';\n\nfunction refEqual(a: any, b: any): boolean {\n return a === b;\n}\n\nexport default class SimpleStore<S> implements MonoStore<S> {\n\n private state: S;\n\n private listeners: Array<(state: S) => void> = [];\n\n constructor(initialState: S) {\n this.state = initialState;\n }\n\n dispatch(action: DispatchAction<S>): void {\n // @ts-ignore\n const nextState = typeof action === 'function' ? action(this.state) : action;\n\n // Do not dispatch if state ref is equal\n if (refEqual(this.state, nextState)) {\n return;\n }\n\n this.state = nextState;\n for (const id in this.listeners) {\n const listener = this.listeners[id];\n listener?.(nextState);\n }\n }\n\n getState(): S {\n return this.state;\n }\n\n subscribe(listener: (state: S) => void): StoreSubscription {\n this.listeners.push(listener);\n\n return () => {\n const index = this.listeners.indexOf(listener);\n this.listeners.splice(index, 1);\n };\n }\n\n removeAllListeners(): void {\n this.listeners.splice(0, this.listeners.length);\n }\n\n};\n"],"mappings":";;AAEA,SAASA,QAAT,CAAkBC,CAAlB,EAA0BC,CAA1B,EAA2C;EACvC,OAAOD,CAAC,KAAKC,CAAb;AACH;;AAED,eAAe,MAAMC,WAAN,CAA6C;EAMxDC,WAAW,CAACC,YAAD,EAAkB;IAAA;;IAAA,mCAFkB,EAElB;;IACzB,KAAKC,KAAL,GAAaD,YAAb;EACH;;EAEDE,QAAQ,CAACC,MAAD,EAAkC;IACtC;IACA,MAAMC,SAAS,GAAG,OAAOD,MAAP,KAAkB,UAAlB,GAA+BA,MAAM,CAAC,KAAKF,KAAN,CAArC,GAAoDE,MAAtE,CAFsC,CAItC;;IACA,IAAIR,QAAQ,CAAC,KAAKM,KAAN,EAAaG,SAAb,CAAZ,EAAqC;MACjC;IACH;;IAED,KAAKH,KAAL,GAAaG,SAAb;;IACA,KAAK,MAAMC,EAAX,IAAiB,KAAKC,SAAtB,EAAiC;MAC7B,MAAMC,QAAQ,GAAG,KAAKD,SAAL,CAAeD,EAAf,CAAjB;MACAE,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGH,SAAH,CAAR;IACH;EACJ;;EAEDI,QAAQ,GAAM;IACV,OAAO,KAAKP,KAAZ;EACH;;EAEDQ,SAAS,CAACF,QAAD,EAAkD;IACvD,KAAKD,SAAL,CAAeI,IAAf,CAAoBH,QAApB;IAEA,OAAO,MAAM;MACT,MAAMI,KAAK,GAAG,KAAKL,SAAL,CAAeM,OAAf,CAAuBL,QAAvB,CAAd;MACA,KAAKD,SAAL,CAAeO,MAAf,CAAsBF,KAAtB,EAA6B,CAA7B;IACH,CAHD;EAIH;;EAEDG,kBAAkB,GAAS;IACvB,KAAKR,SAAL,CAAeO,MAAf,CAAsB,CAAtB,EAAyB,KAAKP,SAAL,CAAeS,MAAxC;EACH;;AAzCuD;AA2C3D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","SimpleStore","MockStore"],"sources":["index.ts"],"sourcesContent":["export { default as SimpleStore } from './SimpleStore';\nexport { default as MockStore } from './MockStore';\nexport type { MonoStore } from './types';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,SAApB,QAAqC,aAArC"}
|
|
1
|
+
{"version":3,"names":["default","SimpleStore","MockStore"],"sources":["index.ts"],"sourcesContent":["export { default as SimpleStore } from './SimpleStore';\nexport { default as MockStore } from './MockStore';\nexport type { MonoStore, DispatchAction } from './types';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,SAApB,QAAqC,aAArC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface StoreSubscription {\n (): void;\n}\n\nexport interface MonoStore<
|
|
1
|
+
{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface StoreSubscription {\n (): void;\n}\n\nexport type DispatchAction<State> = State | ((prevState: State) => State);\n\nexport interface MonoStore<S> {\n dispatch: (action: DispatchAction<S>) => void;\n getState: () => S;\n subscribe: (listener: (state: S) => void) => StoreSubscription;\n removeAllListeners: () => void;\n}\n"],"mappings":""}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ScrollViewProps } from 'react-native';
|
|
2
2
|
import TabCoordinate from './TabCoordinate';
|
|
3
3
|
export interface ScrollableTabsViewProps extends ScrollViewProps {
|
|
4
|
+
initialIndex: number;
|
|
4
5
|
coordinates: TabCoordinate[];
|
|
5
6
|
}
|
|
6
7
|
export default function ScrollableTabsView(props: ScrollableTabsViewProps): JSX.Element;
|
|
@@ -5,4 +5,4 @@ export interface UseScrollViewReaction {
|
|
|
5
5
|
scrollViewRef: MutableRefObject<ScrollView | null>;
|
|
6
6
|
onLayout: ViewProps['onLayout'];
|
|
7
7
|
}
|
|
8
|
-
export default function useScrollViewReaction(coordinates: TabCoordinate[]): UseScrollViewReaction;
|
|
8
|
+
export default function useScrollViewReaction(initialIndex: number, coordinates: TabCoordinate[]): UseScrollViewReaction;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { MonoStore, StoreSubscription } from './types';
|
|
2
|
-
export default class MockStore<
|
|
3
|
-
dispatch(
|
|
1
|
+
import { MonoStore, StoreSubscription, DispatchAction } from './types';
|
|
2
|
+
export default class MockStore<S> implements MonoStore<S> {
|
|
3
|
+
dispatch(action: DispatchAction<S>): void;
|
|
4
|
+
getState(): S;
|
|
4
5
|
removeAllListeners(): void;
|
|
5
|
-
subscribe(listener: (
|
|
6
|
+
subscribe(listener: (state: S) => void): StoreSubscription;
|
|
6
7
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { MonoStore, StoreSubscription } from './types';
|
|
2
|
-
export default class SimpleStore<
|
|
3
|
-
private
|
|
1
|
+
import type { DispatchAction, MonoStore, StoreSubscription } from './types';
|
|
2
|
+
export default class SimpleStore<S> implements MonoStore<S> {
|
|
3
|
+
private state;
|
|
4
4
|
private listeners;
|
|
5
|
-
constructor(
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
constructor(initialState: S);
|
|
6
|
+
dispatch(action: DispatchAction<S>): void;
|
|
7
|
+
getState(): S;
|
|
8
|
+
subscribe(listener: (state: S) => void): StoreSubscription;
|
|
8
9
|
removeAllListeners(): void;
|
|
9
10
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export interface StoreSubscription {
|
|
2
2
|
(): void;
|
|
3
3
|
}
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export declare type DispatchAction<State> = State | ((prevState: State) => State);
|
|
5
|
+
export interface MonoStore<S> {
|
|
6
|
+
dispatch: (action: DispatchAction<S>) => void;
|
|
7
|
+
getState: () => S;
|
|
8
|
+
subscribe: (listener: (state: S) => void) => StoreSubscription;
|
|
7
9
|
removeAllListeners: () => void;
|
|
8
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.24",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "fecf3188c95df22fd559194feb24b8662872852b"
|
|
71
71
|
}
|
|
@@ -5,16 +5,18 @@ import TabCoordinate from './TabCoordinate';
|
|
|
5
5
|
import useScrollViewReaction from './useScrollViewReaction';
|
|
6
6
|
|
|
7
7
|
export interface ScrollableTabsViewProps extends ScrollViewProps {
|
|
8
|
+
initialIndex: number;
|
|
8
9
|
coordinates: TabCoordinate[];
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
export default function ScrollableTabsView(props: ScrollableTabsViewProps) {
|
|
12
13
|
const {
|
|
13
14
|
coordinates,
|
|
15
|
+
initialIndex,
|
|
14
16
|
...scrollViewProps
|
|
15
17
|
} = props;
|
|
16
18
|
|
|
17
|
-
const { scrollViewRef, onLayout } = useScrollViewReaction(coordinates);
|
|
19
|
+
const { scrollViewRef, onLayout } = useScrollViewReaction(initialIndex, coordinates);
|
|
18
20
|
|
|
19
21
|
return (
|
|
20
22
|
<ScrollView
|
package/src/Tabs/Tabs.tsx
CHANGED
|
@@ -148,6 +148,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
|
|
|
148
148
|
coordinates={coordinates}
|
|
149
149
|
directionalLockEnabled={true}
|
|
150
150
|
horizontal={true}
|
|
151
|
+
initialIndex={realInitialIndex}
|
|
151
152
|
scrollsToTop={false}
|
|
152
153
|
showsHorizontalScrollIndicator={false}
|
|
153
154
|
showsVerticalScrollIndicator={false}
|
|
@@ -10,6 +10,7 @@ export interface UseScrollViewReaction {
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
export default function useScrollViewReaction(
|
|
13
|
+
initialIndex: number,
|
|
13
14
|
coordinates: TabCoordinate[],
|
|
14
15
|
): UseScrollViewReaction {
|
|
15
16
|
const scrollViewRef = useRef<ScrollView | null>(null);
|
|
@@ -30,23 +31,32 @@ export default function useScrollViewReaction(
|
|
|
30
31
|
scrollToX(lastScrolledXRef.current);
|
|
31
32
|
}, []);
|
|
32
33
|
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
const prevCoordinate = coordinates[prevIndex];
|
|
34
|
+
const computeNextScrollX = useCallback((index: number): number => {
|
|
35
|
+
const prevIndex = index - 1;
|
|
36
|
+
const prevCoordinate = coordinates[prevIndex];
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
if (prevCoordinate) {
|
|
39
|
+
const prevTabWidth = prevCoordinate.x2 - prevCoordinate.x1;
|
|
40
|
+
return Math.floor(prevCoordinate.x1 + prevTabWidth / 2);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return 0;
|
|
44
|
+
}, [coordinates]);
|
|
42
45
|
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (Number.isNaN(lastScrolledXRef.current)) {
|
|
48
|
+
const x = computeNextScrollX(initialIndex);
|
|
49
|
+
if (x > 0) {
|
|
50
|
+
scrollToX(x);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, [initialIndex, computeNextScrollX]);
|
|
45
54
|
|
|
55
|
+
useEffect(() => {
|
|
46
56
|
return indexStore.subscribe(currentIndex => {
|
|
47
57
|
scrollToX(computeNextScrollX(currentIndex));
|
|
48
58
|
});
|
|
49
|
-
}, [indexStore,
|
|
59
|
+
}, [indexStore, computeNextScrollX]);
|
|
50
60
|
|
|
51
61
|
return { scrollViewRef, onLayout };
|
|
52
62
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
1
|
+
import { useCallback, useRef } from 'react';
|
|
2
2
|
import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
|
|
3
3
|
import type { WithTimingConfig } from 'react-native-reanimated';
|
|
4
4
|
import {
|
|
@@ -105,7 +105,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
|
|
|
105
105
|
const indexRef = useRef<number>(0);
|
|
106
106
|
const offsetsRef = useRef<Array<number>>([]);
|
|
107
107
|
|
|
108
|
-
const onScrollViewChanged = (nextIndex: number) => {
|
|
108
|
+
const onScrollViewChanged = useCallback((nextIndex: number) => {
|
|
109
109
|
const prevIndex = indexRef.current;
|
|
110
110
|
if (prevIndex === nextIndex) {
|
|
111
111
|
return;
|
|
@@ -125,7 +125,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
|
|
|
125
125
|
if (translateY.value < 0 && savedOffsetY < appBarHeight) {
|
|
126
126
|
translateY.value = withTiming(0, ANIMATION_CONFIG);
|
|
127
127
|
}
|
|
128
|
-
};
|
|
128
|
+
}, [appBarHeight]);
|
|
129
129
|
|
|
130
130
|
const scrollHandler = useAnimatedScrollHandler({
|
|
131
131
|
onBeginDrag: () => {
|
|
@@ -9,10 +9,11 @@ export interface SyncAnimatedValueConfig {
|
|
|
9
9
|
|
|
10
10
|
export default function useSyncAnimatedValue(config: SyncAnimatedValueConfig): SyncAnimatedValue {
|
|
11
11
|
const {
|
|
12
|
-
initialValue,
|
|
12
|
+
initialValue: maybeInitialValue,
|
|
13
13
|
shouldSyncAlways = false,
|
|
14
14
|
} = config;
|
|
15
15
|
|
|
16
|
+
const initialValue = maybeInitialValue ?? 0;
|
|
16
17
|
const animatedValue = useRef(new Animated.Value(initialValue)).current;
|
|
17
18
|
|
|
18
19
|
const indexRef = useRef<number>(initialValue);
|
package/src/store/MockStore.ts
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
import { MonoStore, StoreSubscription } from './types';
|
|
1
|
+
import { MonoStore, StoreSubscription, DispatchAction } from './types';
|
|
2
2
|
|
|
3
|
-
export default class MockStore<
|
|
3
|
+
export default class MockStore<S> implements MonoStore<S> {
|
|
4
4
|
|
|
5
|
-
dispatch(
|
|
5
|
+
dispatch(action: DispatchAction<S>): void {
|
|
6
6
|
// do nothing
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
getState(): S {
|
|
10
|
+
throw new Error('stub!');
|
|
11
|
+
}
|
|
12
|
+
|
|
9
13
|
removeAllListeners(): void {
|
|
10
14
|
// do nothing
|
|
11
15
|
}
|
|
12
16
|
|
|
13
|
-
subscribe(listener: (
|
|
17
|
+
subscribe(listener: (state: S) => void): StoreSubscription {
|
|
14
18
|
return () => void 0;
|
|
15
19
|
}
|
|
16
20
|
|
package/src/store/SimpleStore.ts
CHANGED
|
@@ -1,41 +1,48 @@
|
|
|
1
|
-
import { MonoStore, StoreSubscription } from './types';
|
|
1
|
+
import type { DispatchAction, MonoStore, StoreSubscription } from './types';
|
|
2
2
|
|
|
3
3
|
function refEqual(a: any, b: any): boolean {
|
|
4
4
|
return a === b;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
export default class SimpleStore<
|
|
7
|
+
export default class SimpleStore<S> implements MonoStore<S> {
|
|
8
8
|
|
|
9
|
-
private
|
|
9
|
+
private state: S;
|
|
10
10
|
|
|
11
|
-
private listeners: Array<(
|
|
11
|
+
private listeners: Array<(state: S) => void> = [];
|
|
12
12
|
|
|
13
|
-
constructor(
|
|
14
|
-
this.
|
|
13
|
+
constructor(initialState: S) {
|
|
14
|
+
this.state = initialState;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
dispatch(action: DispatchAction<S>): void {
|
|
18
|
+
// @ts-ignore
|
|
19
|
+
const nextState = typeof action === 'function' ? action(this.state) : action;
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
this.listeners.splice(index, 1);
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
dispatch(data: T): void {
|
|
27
|
-
// Do not dispatch if data ref is equal
|
|
28
|
-
if (refEqual(this.data, data)) {
|
|
21
|
+
// Do not dispatch if state ref is equal
|
|
22
|
+
if (refEqual(this.state, nextState)) {
|
|
29
23
|
return;
|
|
30
24
|
}
|
|
31
25
|
|
|
32
|
-
this.
|
|
26
|
+
this.state = nextState;
|
|
33
27
|
for (const id in this.listeners) {
|
|
34
28
|
const listener = this.listeners[id];
|
|
35
|
-
listener?.(
|
|
29
|
+
listener?.(nextState);
|
|
36
30
|
}
|
|
37
31
|
}
|
|
38
32
|
|
|
33
|
+
getState(): S {
|
|
34
|
+
return this.state;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
subscribe(listener: (state: S) => void): StoreSubscription {
|
|
38
|
+
this.listeners.push(listener);
|
|
39
|
+
|
|
40
|
+
return () => {
|
|
41
|
+
const index = this.listeners.indexOf(listener);
|
|
42
|
+
this.listeners.splice(index, 1);
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
39
46
|
removeAllListeners(): void {
|
|
40
47
|
this.listeners.splice(0, this.listeners.length);
|
|
41
48
|
}
|
package/src/store/index.ts
CHANGED
package/src/store/types.ts
CHANGED
|
@@ -2,8 +2,11 @@ export interface StoreSubscription {
|
|
|
2
2
|
(): void;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
export type DispatchAction<State> = State | ((prevState: State) => State);
|
|
6
|
+
|
|
7
|
+
export interface MonoStore<S> {
|
|
8
|
+
dispatch: (action: DispatchAction<S>) => void;
|
|
9
|
+
getState: () => S;
|
|
10
|
+
subscribe: (listener: (state: S) => void) => StoreSubscription;
|
|
8
11
|
removeAllListeners: () => void;
|
|
9
12
|
}
|