@fountain-ui/core 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.16.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.16.0) (2022-03-07)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
 # [1.15.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.15.0) (2022-01-25)
 
 **Note:** Version bump only for package @fountain-ui/core

package/build/commonjs/Tabs/Tabs.js

@@ -50,6 +50,8 @@ function Tabs(props) {
     children,
     index: indexProp,
     disableIndicator = false,
+    keyboardDismissMode = 'none',
+    keyboardShouldPersistTaps = 'never',
     onChange,
     scrollable = false,
     scrollValue: scrollValueProp,
@@ -115,6 +117,12 @@ function Tabs(props) {
       }, ...prev.slice(index + 1)]);
     };
 
+    const onMouseDown = e => {
+      if (keyboardShouldPersistTaps === 'always') {
+        e.preventDefault();
+      }
+    };
+
     const onPress = () => {
       var _child$props$onPress, _child$props;
 
@@ -130,6 +138,7 @@ function Tabs(props) {
       enableIndicator: enableIndicatorPlaceholder,
       onLayout,
       onPress,
+      onMouseDown,
       variant,
       selected,
       style: scrollable ? undefined : styles.fixedTab
@@ -155,7 +164,9 @@ function Tabs(props) {
     ref: scrollViewRef,
     scrollsToTop: false,
     showsHorizontalScrollIndicator: false,
-    showsVerticalScrollIndicator: false
+    showsVerticalScrollIndicator: false,
+    keyboardDismissMode: keyboardDismissMode,
+    keyboardShouldPersistTaps: keyboardShouldPersistTaps
   }, tabElements, indicator) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tabElements, indicator));
 }
 

package/build/commonjs/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","children","index","indexProp","disableIndicator","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","scrollViewRef","React","useRef","tabCount","Children","count","coordinates","setCoordinates","useState","Array","internalScrollValue","Animated","useSharedValue","isReadyToRenderIndicator","useEffect","animateTab","value","withTiming","duration","easing","Easing","out","exp","undefined","snapTab","scrollView","current","coordinate","defaultCoordinate","tabWidth","x2","x1","x","scrollTo","y","animated","tabElements","map","child","onLayout","event","width","nativeEvent","layout","prev","slice","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","indicator"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport { useWidth } from '../internal/hooks';\nimport type TabsProps from './TabsProps';\nimport TabCoordinate, { defaultCoordinate } from './TabCoordinate';\nimport TabIndicator from './TabIndicator';\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\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useWidth();\n\n    const scrollViewRef = React.useRef<ScrollView | null>(null);\n\n    const tabCount = React.Children.count(children);\n    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));\n\n    const internalScrollValue = Animated.useSharedValue(0);\n    const scrollValue = scrollValueProp || internalScrollValue;\n\n    const isReadyToRenderIndicator = isEveryDefined(coordinates);\n\n    React.useEffect(() => {\n        const animateTab = (index: number) => {\n            internalScrollValue.value = Animated.withTiming(index, {\n                duration: 200,\n                easing: Easing.out(Easing.exp),\n            });\n        };\n\n        if (scrollValueProp === undefined) {\n            animateTab(indexProp);\n        }\n    }, [indexProp, scrollValueProp, internalScrollValue]);\n\n    React.useEffect(() => {\n        const snapTab = (index: number) => {\n            const scrollView = scrollViewRef.current;\n            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;\n\n            if (scrollView) {\n                const tabWidth = coordinate.x2 - coordinate.x1;\n                const x = coordinate.x1 + tabWidth / 2;\n\n                scrollView.scrollTo({ x, y: 0, animated: true });\n            }\n        };\n\n        snapTab(indexProp);\n    }, [indexProp, containerWidth, coordinates]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            setCoordinates(prev => ([\n                ...prev.slice(0, index),\n                { x1: x, x2: x + width },\n                ...prev.slice(index + 1),\n            ]));\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return React.cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <>\n                    {tabElements}\n                    {indicator}\n                </>\n            )}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","scrollViewRef","React","useRef","tabCount","Children","count","coordinates","setCoordinates","useState","Array","internalScrollValue","Animated","useSharedValue","isReadyToRenderIndicator","useEffect","animateTab","value","withTiming","duration","easing","Easing","out","exp","undefined","snapTab","scrollView","current","coordinate","defaultCoordinate","tabWidth","x2","x1","x","scrollTo","y","animated","tabElements","map","child","onLayout","event","width","nativeEvent","layout","prev","slice","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","indicator"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport { useWidth } from '../internal/hooks';\nimport type TabsProps from './TabsProps';\nimport TabCoordinate, { defaultCoordinate } from './TabCoordinate';\nimport TabIndicator from './TabIndicator';\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\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useWidth();\n\n    const scrollViewRef = React.useRef<ScrollView | null>(null);\n\n    const tabCount = React.Children.count(children);\n    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));\n\n    const internalScrollValue = Animated.useSharedValue(0);\n    const scrollValue = scrollValueProp || internalScrollValue;\n\n    const isReadyToRenderIndicator = isEveryDefined(coordinates);\n\n    React.useEffect(() => {\n        const animateTab = (index: number) => {\n            internalScrollValue.value = Animated.withTiming(index, {\n                duration: 200,\n                easing: Easing.out(Easing.exp),\n            });\n        };\n\n        if (scrollValueProp === undefined) {\n            animateTab(indexProp);\n        }\n    }, [indexProp, scrollValueProp, internalScrollValue]);\n\n    React.useEffect(() => {\n        const snapTab = (index: number) => {\n            const scrollView = scrollViewRef.current;\n            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;\n\n            if (scrollView) {\n                const tabWidth = coordinate.x2 - coordinate.x1;\n                const x = coordinate.x1 + tabWidth / 2;\n\n                scrollView.scrollTo({ x, y: 0, animated: true });\n            }\n        };\n\n        snapTab(indexProp);\n    }, [indexProp, containerWidth, coordinates]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            setCoordinates(prev => ([\n                ...prev.slice(0, index),\n                { x1: x, x2: x + width },\n                ...prev.slice(index + 1),\n            ]));\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return React.cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <>\n                    {tabElements}\n                    {indicator}\n                </>\n            )}\n        </View>\n    );\n};\n"]}

package/build/module/Tabs/Tabs.js

@@ -30,6 +30,8 @@ export default function Tabs(props) {
     children,
     index: indexProp,
     disableIndicator = false,
+    keyboardDismissMode = 'none',
+    keyboardShouldPersistTaps = 'never',
     onChange,
     scrollable = false,
     scrollValue: scrollValueProp,
@@ -87,6 +89,12 @@ export default function Tabs(props) {
       }, ...prev.slice(index + 1)]);
     };
 
+    const onMouseDown = e => {
+      if (keyboardShouldPersistTaps === 'always') {
+        e.preventDefault();
+      }
+    };
+
     const onPress = () => {
       var _child$props$onPress, _child$props;
 
@@ -102,6 +110,7 @@ export default function Tabs(props) {
       enableIndicator: enableIndicatorPlaceholder,
       onLayout,
       onPress,
+      onMouseDown,
       variant,
       selected,
       style: scrollable ? undefined : styles.fixedTab
@@ -125,7 +134,9 @@ export default function Tabs(props) {
     ref: scrollViewRef,
     scrollsToTop: false,
     showsHorizontalScrollIndicator: false,
-    showsVerticalScrollIndicator: false
+    showsVerticalScrollIndicator: false,
+    keyboardDismissMode: keyboardDismissMode,
+    keyboardShouldPersistTaps: keyboardShouldPersistTaps
   }, tabElements, indicator) : /*#__PURE__*/React.createElement(React.Fragment, null, tabElements, indicator));
 }
 ;

package/build/module/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tabs.tsx"],"names":["React","ScrollView","View","Animated","Easing","isEveryDefined","css","useTheme","useWidth","defaultCoordinate","TabIndicator","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","children","index","indexProp","disableIndicator","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","scrollViewRef","useRef","tabCount","Children","count","coordinates","setCoordinates","useState","Array","internalScrollValue","useSharedValue","isReadyToRenderIndicator","useEffect","animateTab","value","withTiming","duration","easing","out","exp","undefined","snapTab","scrollView","current","coordinate","tabWidth","x2","x1","x","scrollTo","y","animated","tabElements","map","child","onLayout","event","width","nativeEvent","layout","prev","slice","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","indicator"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport { useWidth } from '../internal/hooks';\nimport type TabsProps from './TabsProps';\nimport TabCoordinate, { defaultCoordinate } from './TabCoordinate';\nimport TabIndicator from './TabIndicator';\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\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useWidth();\n\n    const scrollViewRef = React.useRef<ScrollView | null>(null);\n\n    const tabCount = React.Children.count(children);\n    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));\n\n    const internalScrollValue = Animated.useSharedValue(0);\n    const scrollValue = scrollValueProp || internalScrollValue;\n\n    const isReadyToRenderIndicator = isEveryDefined(coordinates);\n\n    React.useEffect(() => {\n        const animateTab = (index: number) => {\n            internalScrollValue.value = Animated.withTiming(index, {\n                duration: 200,\n                easing: Easing.out(Easing.exp),\n            });\n        };\n\n        if (scrollValueProp === undefined) {\n            animateTab(indexProp);\n        }\n    }, [indexProp, scrollValueProp, internalScrollValue]);\n\n    React.useEffect(() => {\n        const snapTab = (index: number) => {\n            const scrollView = scrollViewRef.current;\n            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;\n\n            if (scrollView) {\n                const tabWidth = coordinate.x2 - coordinate.x1;\n                const x = coordinate.x1 + tabWidth / 2;\n\n                scrollView.scrollTo({ x, y: 0, animated: true });\n            }\n        };\n\n        snapTab(indexProp);\n    }, [indexProp, containerWidth, coordinates]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            setCoordinates(prev => ([\n                ...prev.slice(0, index),\n                { x1: x, x2: x + width },\n                ...prev.slice(index + 1),\n            ]));\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return React.cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <>\n                    {tabElements}\n                    {indicator}\n                </>\n            )}\n        </View>\n    );\n};\n"]}
+{"version":3,"sources":["Tabs.tsx"],"names":["React","ScrollView","View","Animated","Easing","isEveryDefined","css","useTheme","useWidth","defaultCoordinate","TabIndicator","useStyles","theme","root","fixedRoot","flexDirection","fixedTab","flex","scrollableContainer","paddingHorizontal","spacing","Tabs","props","children","index","indexProp","disableIndicator","keyboardDismissMode","keyboardShouldPersistTaps","onChange","scrollable","scrollValue","scrollValueProp","style","variant","otherProps","styles","containerWidth","handleLayout","scrollViewRef","useRef","tabCount","Children","count","coordinates","setCoordinates","useState","Array","internalScrollValue","useSharedValue","isReadyToRenderIndicator","useEffect","animateTab","value","withTiming","duration","easing","out","exp","undefined","snapTab","scrollView","current","coordinate","tabWidth","x2","x1","x","scrollTo","y","animated","tabElements","map","child","onLayout","event","width","nativeEvent","layout","prev","slice","onMouseDown","e","preventDefault","onPress","selected","enableIndicatorPlaceholder","cloneElement","enableIndicator","indicator"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';\nimport Animated, { Easing } from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { isEveryDefined } from '@fountain-ui/utils';\nimport { css, useTheme } from '../styles';\nimport { useWidth } from '../internal/hooks';\nimport type TabsProps from './TabsProps';\nimport TabCoordinate, { defaultCoordinate } from './TabCoordinate';\nimport TabIndicator from './TabIndicator';\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\nexport default function Tabs(props: TabsProps) {\n    const {\n        children,\n        index: indexProp,\n        disableIndicator = false,\n        keyboardDismissMode = 'none',\n        keyboardShouldPersistTaps = 'never',\n        onChange,\n        scrollable = false,\n        scrollValue: scrollValueProp,\n        style,\n        variant = 'primary',\n        ...otherProps\n    } = props;\n\n    const styles = useStyles();\n\n    const [containerWidth, handleLayout] = useWidth();\n\n    const scrollViewRef = React.useRef<ScrollView | null>(null);\n\n    const tabCount = React.Children.count(children);\n    const [coordinates, setCoordinates] = React.useState<TabCoordinate[]>(() => new Array(tabCount));\n\n    const internalScrollValue = Animated.useSharedValue(0);\n    const scrollValue = scrollValueProp || internalScrollValue;\n\n    const isReadyToRenderIndicator = isEveryDefined(coordinates);\n\n    React.useEffect(() => {\n        const animateTab = (index: number) => {\n            internalScrollValue.value = Animated.withTiming(index, {\n                duration: 200,\n                easing: Easing.out(Easing.exp),\n            });\n        };\n\n        if (scrollValueProp === undefined) {\n            animateTab(indexProp);\n        }\n    }, [indexProp, scrollValueProp, internalScrollValue]);\n\n    React.useEffect(() => {\n        const snapTab = (index: number) => {\n            const scrollView = scrollViewRef.current;\n            const coordinate: TabCoordinate = coordinates[index - 1] || defaultCoordinate;\n\n            if (scrollView) {\n                const tabWidth = coordinate.x2 - coordinate.x1;\n                const x = coordinate.x1 + tabWidth / 2;\n\n                scrollView.scrollTo({ x, y: 0, animated: true });\n            }\n        };\n\n        snapTab(indexProp);\n    }, [indexProp, containerWidth, coordinates]);\n\n    const tabElements = React.Children.map(children, (child, index) => {\n        const onLayout = (event: LayoutChangeEvent) => {\n            const { x, width } = event.nativeEvent.layout;\n\n            setCoordinates(prev => ([\n                ...prev.slice(0, index),\n                { x1: x, x2: x + width },\n                ...prev.slice(index + 1),\n            ]));\n        };\n\n        const onMouseDown = (e: GestureResponderEvent) => {\n            if (keyboardShouldPersistTaps === 'always') {\n                e.preventDefault();\n            }\n        };\n\n        const onPress = () => {\n            onChange?.(index);\n            // @ts-ignore\n            child.props.onPress?.();\n        };\n\n        const selected = index === indexProp;\n        const enableIndicatorPlaceholder = disableIndicator\n            ? false\n            : (isReadyToRenderIndicator ? false : selected);\n\n        //@ts-ignore\n        return React.cloneElement(child, {\n            enableIndicator: enableIndicatorPlaceholder,\n            onLayout,\n            onPress,\n            onMouseDown,\n            variant,\n            selected,\n            style: scrollable ? undefined : styles.fixedTab,\n        });\n    });\n\n    const indicator = (\n        <TabIndicator\n            coordinates={coordinates}\n            disabled={disableIndicator}\n            scrollable={scrollable}\n            scrollValue={scrollValue}\n        />\n    );\n\n    return (\n        <View\n            onLayout={handleLayout}\n            style={css([\n                styles.root,\n                scrollable ? undefined : styles.fixedRoot,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {scrollable ? (\n                <ScrollView\n                    automaticallyAdjustContentInsets={false}\n                    bounces={false}\n                    contentContainerStyle={styles.scrollableContainer}\n                    directionalLockEnabled={true}\n                    horizontal={true}\n                    ref={scrollViewRef}\n                    scrollsToTop={false}\n                    showsHorizontalScrollIndicator={false}\n                    showsVerticalScrollIndicator={false}\n                    keyboardDismissMode={keyboardDismissMode}\n                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}\n                >\n                    {tabElements}\n                    {indicator}\n                </ScrollView>\n            ) : (\n                <>\n                    {tabElements}\n                    {indicator}\n                </>\n            )}\n        </View>\n    );\n};\n"]}

package/build/typescript/Tabs/TabsProps.d.ts

@@ -3,6 +3,8 @@ import type { ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import type { TabVariant } from '../Tab';
 import type { OverridableComponentProps } from '../types';
+export declare type KeyboardDismissMode = 'none' | 'on-drag' | 'interactive';
+export declare type KeyboardShouldPersistTaps = 'never' | boolean | 'always' | 'handled';
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     /**
      * Collection of Tab components.
@@ -17,6 +19,16 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     disableIndicator?: boolean;
+    /**
+     * keyboard dismissing condition of dragging.
+     * @default 'none'
+     */
+    keyboardDismissMode?: KeyboardDismissMode;
+    /**
+     * keyboard persisting condition of tapping.
+     * @default 'never'
+     */
+    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps;
     /**
      * Callback fired when a tab is selected.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e4a73c0ba0c0a618713494e095b658410e720766"
+  "gitHead": "0738cec018c008c9993b8d432ca8aaa44d7c3f77"
 }

package/src/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LayoutChangeEvent, ScrollView, View } from 'react-native';
+import { GestureResponderEvent, LayoutChangeEvent, ScrollView, View } from 'react-native';
 import Animated, { Easing } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { isEveryDefined } from '@fountain-ui/utils';
@@ -39,6 +39,8 @@ export default function Tabs(props: TabsProps) {
         children,
         index: indexProp,
         disableIndicator = false,
+        keyboardDismissMode = 'none',
+        keyboardShouldPersistTaps = 'never',
         onChange,
         scrollable = false,
         scrollValue: scrollValueProp,
@@ -101,6 +103,12 @@ export default function Tabs(props: TabsProps) {
             ]));
         };
 
+        const onMouseDown = (e: GestureResponderEvent) => {
+            if (keyboardShouldPersistTaps === 'always') {
+                e.preventDefault();
+            }
+        };
+
         const onPress = () => {
             onChange?.(index);
             // @ts-ignore
@@ -117,6 +125,7 @@ export default function Tabs(props: TabsProps) {
             enableIndicator: enableIndicatorPlaceholder,
             onLayout,
             onPress,
+            onMouseDown,
             variant,
             selected,
             style: scrollable ? undefined : styles.fixedTab,
@@ -153,6 +162,8 @@ export default function Tabs(props: TabsProps) {
                     scrollsToTop={false}
                     showsHorizontalScrollIndicator={false}
                     showsVerticalScrollIndicator={false}
+                    keyboardDismissMode={keyboardDismissMode}
+                    keyboardShouldPersistTaps={keyboardShouldPersistTaps}
                 >
                     {tabElements}
                     {indicator}

package/src/Tabs/TabsProps.ts

@@ -4,6 +4,17 @@ import Animated from 'react-native-reanimated';
 import type { TabVariant } from '../Tab';
 import type { OverridableComponentProps } from '../types';
 
+export type KeyboardDismissMode =
+    'none'
+    | 'on-drag'
+    | 'interactive'; // ios only
+
+export type KeyboardShouldPersistTaps =
+    'never'
+    | boolean
+    | 'always'
+    | 'handled'; // app only
+
 export default interface TabsProps extends OverridableComponentProps<ViewProps, {
     /**
      * Collection of Tab components.
@@ -21,6 +32,18 @@ export default interface TabsProps extends OverridableComponentProps<ViewProps,
      */
     disableIndicator?: boolean;
 
+    /**
+     * keyboard dismissing condition of dragging.
+     * @default 'none'
+     */
+    keyboardDismissMode?: KeyboardDismissMode,
+
+    /**
+     * keyboard persisting condition of tapping.
+     * @default 'never'
+     */
+    keyboardShouldPersistTaps?: KeyboardShouldPersistTaps,
+
     /**
      * Callback fired when a tab is selected.
      */