@r0b0t3d/react-native-collapsible 1.0.1 → 1.2.0-alpha.0

package/lib/commonjs/components/CollapsibleContainer.js

@@ -9,7 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
+var _useInternalCollapsibleContext = _interopRequireDefault(require("../hooks/useInternalCollapsibleContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -24,7 +26,7 @@ function CollapsibleContainer({
   const {
     containerRef,
     handleContainerHeight
-  } = (0, _useInternalCollapsibleContext.useInternalCollapsibleContext)();
+  } = (0, _useInternalCollapsibleContext.default)();
   const handleContainerLayout = (0, _react.useCallback)(layout => {
     const height = layout.nativeEvent.layout.height;
     handleContainerHeight(height);

package/lib/commonjs/components/CollapsibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["CollapsibleContainer","children","props","containerRef","handleContainerHeight","handleContainerLayout","layout","height","nativeEvent","styles","container","style","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAMe,SAASA,oBAAT,CAA8B;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAA9B,EAA6D;AAC1E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJ,mEADF;AAGA,QAAMC,qBAAqB,GAAG,wBAC3BC,MAAD,IAA+B;AAC7B,UAAMC,MAAM,GAAGD,MAAM,CAACE,WAAP,CAAmBF,MAAnB,CAA0BC,MAAzC;AACAH,IAAAA,qBAAqB,CAACG,MAAD,CAArB;AACD,GAJ2B,EAK5B,CAACH,qBAAD,CAL4B,CAA9B;AAQA,sBACE,6BAAC,iBAAD,eACMF,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmBR,KAAK,CAACS,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEN;AAJZ,MAMGJ,QANH,CADF;AAUD;;AAED,MAAMQ,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AACTI,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\nimport { useInternalCollapsibleContext } from '../hooks/useInternalCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n  children: Element;\n};\n\nexport default function CollapsibleContainer({ children, ...props }: Props) {\n  const { containerRef, handleContainerHeight } =\n    useInternalCollapsibleContext();\n\n  const handleContainerLayout = useCallback(\n    (layout: LayoutChangeEvent) => {\n      const height = layout.nativeEvent.layout.height;\n      handleContainerHeight(height);\n    },\n    [handleContainerHeight]\n  );\n\n  return (\n    <View\n      {...props}\n      ref={containerRef}\n      style={[styles.container, props.style]}\n      onLayout={handleContainerLayout}\n    >\n      {children}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]}
+{"version":3,"sources":["CollapsibleContainer.tsx"],"names":["CollapsibleContainer","children","props","containerRef","handleContainerHeight","handleContainerLayout","layout","height","nativeEvent","styles","container","style","StyleSheet","create","flex","overflow"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAMe,SAASA,oBAAT,CAA8B;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAA9B,EAA6D;AAC1E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MACJ,6CADF;AAGA,QAAMC,qBAAqB,GAAG,wBAC3BC,MAAD,IAA+B;AAC7B,UAAMC,MAAM,GAAGD,MAAM,CAACE,WAAP,CAAmBF,MAAnB,CAA0BC,MAAzC;AACAH,IAAAA,qBAAqB,CAACG,MAAD,CAArB;AACD,GAJ2B,EAK5B,CAACH,qBAAD,CAL4B,CAA9B;AAQA,sBACE,6BAAC,iBAAD,eACMF,KADN;AAEE,IAAA,GAAG,EAAEC,YAFP;AAGE,IAAA,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmBR,KAAK,CAACS,KAAzB,CAHT;AAIE,IAAA,QAAQ,EAAEN;AAJZ,MAMGJ,QANH,CADF;AAUD;;AAED,MAAMQ,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AACTI,IAAAA,IAAI,EAAE,CADG;AAETC,IAAAA,QAAQ,EAAE;AAFD;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport { LayoutChangeEvent, StyleSheet, View, ViewProps } from 'react-native';\nimport useInternalCollapsibleContext from '../hooks/useInternalCollapsibleContext';\n\ntype Props = Omit<ViewProps, 'ref' | 'onLayout'> & {\n  children: Element;\n};\n\nexport default function CollapsibleContainer({ children, ...props }: Props) {\n  const { containerRef, handleContainerHeight } =\n    useInternalCollapsibleContext();\n\n  const handleContainerLayout = useCallback(\n    (layout: LayoutChangeEvent) => {\n      const height = layout.nativeEvent.layout.height;\n      handleContainerHeight(height);\n    },\n    [handleContainerHeight]\n  );\n\n  return (\n    <View\n      {...props}\n      ref={containerRef}\n      style={[styles.container, props.style]}\n      onLayout={handleContainerLayout}\n    >\n      {children}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    overflow: 'hidden',\n  },\n});\n"]}

package/lib/commonjs/components/CollapsibleView.js

@@ -47,7 +47,7 @@ function CollapsibleView({
     });
   }, []);
   const handleLayout = (0, _react.useCallback)(event => {
-    if (event.nativeEvent.layout.height > 0) {
+    if (event.nativeEvent.layout.height >= 0) {
       actualHeight.value = event.nativeEvent.layout.height;
     }
   }, []);
@@ -114,7 +114,7 @@ function CollapsibleHeaderText({
   return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     activeOpacity: 0.9,
     onPress: onToggle,
-    style: [style]
+    style: style
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.headerContainer
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
@@ -130,7 +130,8 @@ const styles = _reactNative.StyleSheet.create({
   },
   content: {},
   headerContainer: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    alignItems: 'center'
   },
   headerTitle: {
     flex: 1

package/lib/commonjs/components/CollapsibleView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CollapsibleView.tsx"],"names":["key","CollapsibleView","initialState","collapseState","renderHeader","children","containerStyle","collapsedBackgroundColor","expandedBackgroundColor","actualHeight","contentKey","newValue","value","onToggle","overshootClamping","handleLayout","event","nativeEvent","layout","height","wrapperStyle","damping","stiffness","contentHeight","undefined","containerAnimatedStyle","backgroundColor","headerProps","collapsed","styles","wrapper","content","CollapsibleHeaderText","title","style","titleStyle","icon","iconInitialAngle","iconStyle","rotate","transform","headerContainer","headerTitle","StyleSheet","create","overflow","flexDirection","flex"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n  LayoutChangeEvent,\n  StyleProp,\n  StyleSheet,\n  Text,\n  TextStyle,\n  TouchableOpacity,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  interpolateColor,\n  interpolate,\n} from 'react-native-reanimated';\n\nexport type CollapsibleHeaderProps = {\n  onToggle: () => void;\n  collapsed: Animated.SharedValue<number>;\n};\n\ntype Props = {\n  initialState?: 'collapsed' | 'expanded';\n  collapseState?: Animated.SharedValue<number>;\n  renderHeader: (props: CollapsibleHeaderProps) => ReactNode;\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n  collapsedBackgroundColor?: string;\n  expandedBackgroundColor?: string;\n  useDynamicLayout?: boolean;\n};\n\nlet key = 0;\nexport default function CollapsibleView({\n  initialState = 'collapsed',\n  collapseState = useSharedValue(0),\n  renderHeader,\n  children,\n  containerStyle,\n  collapsedBackgroundColor,\n  expandedBackgroundColor,\n}: Props) {\n  const actualHeight = useSharedValue(11110);\n  const contentKey = useMemo(() => `collapsible-view-${key++}`, []);\n\n  useEffect(() => {\n    const newValue = initialState === 'collapsed' ? 0 : 1;\n    if (newValue === collapseState.value) {\n      return;\n    }\n    collapseState.value = newValue;\n  }, [initialState]);\n\n  const onToggle = useCallback(() => {\n    collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {\n      overshootClamping: true,\n    });\n  }, []);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    if (event.nativeEvent.layout.height > 0) {\n      actualHeight.value = event.nativeEvent.layout.height;\n    }\n  }, []);\n\n  const wrapperStyle = useAnimatedStyle(\n    () => ({\n      height: withSpring(collapseState.value === 1 ? actualHeight.value : 0, {\n        damping: 5,\n        stiffness: 130,\n        overshootClamping: true,\n      }),\n    }),\n    [actualHeight, contentKey]\n  );\n\n  const contentHeight = useAnimatedStyle(\n    () => ({\n      height: actualHeight.value > 0 ? actualHeight.value : undefined,\n    }),\n    [actualHeight, contentKey]\n  );\n\n  // @ts-ignore\n  const containerAnimatedStyle = useAnimatedStyle(() => {\n    if (collapsedBackgroundColor && expandedBackgroundColor) {\n      return {\n        backgroundColor: interpolateColor(\n          collapseState.value,\n          [0, 1],\n          [collapsedBackgroundColor, expandedBackgroundColor]\n        ),\n      };\n    }\n    return {};\n  }, []);\n\n  const headerProps = useMemo(\n    () => ({ onToggle, collapsed: collapseState }),\n    [onToggle, collapseState]\n  );\n\n  return (\n    <Animated.View\n      style={[containerStyle, containerAnimatedStyle]}\n      pointerEvents=\"box-none\"\n    >\n      <View pointerEvents=\"box-none\">{renderHeader(headerProps)}</View>\n      <Animated.View\n        style={[styles.wrapper, wrapperStyle]}\n        pointerEvents=\"box-none\"\n      >\n        <Animated.View\n          style={[styles.content, contentHeight]}\n          pointerEvents=\"box-none\"\n        >\n          <View\n            key={contentKey}\n            onLayout={handleLayout}\n            pointerEvents=\"box-none\"\n          >\n            {children}\n          </View>\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nexport function CollapsibleHeaderText({\n  title,\n  collapsed,\n  onToggle,\n  style,\n  titleStyle,\n  icon,\n  iconInitialAngle = 0,\n  children,\n}: {\n  title: string;\n  style?: StyleProp<ViewStyle>;\n  titleStyle?: StyleProp<TextStyle>;\n  icon?: ReactNode;\n  iconInitialAngle?: number;\n  children?: ReactNode;\n} & CollapsibleHeaderProps) {\n  const iconStyle = useAnimatedStyle(() => {\n    const rotate = interpolate(\n      collapsed.value,\n      [0, 1],\n      [iconInitialAngle, 180]\n    );\n    return {\n      transform: [\n        {\n          rotate: `${rotate}deg`,\n        },\n      ],\n    };\n  }, [iconInitialAngle]);\n\n  return (\n    <TouchableOpacity activeOpacity={0.9} onPress={onToggle} style={[style]}>\n      <View style={styles.headerContainer}>\n        <Text style={[styles.headerTitle, titleStyle]}>{title}</Text>\n        {icon && <Animated.View style={iconStyle}>{icon}</Animated.View>}\n      </View>\n      {children}\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    overflow: 'hidden',\n  },\n  content: {},\n  headerContainer: {\n    flexDirection: 'row',\n  },\n  headerTitle: {\n    flex: 1,\n  },\n});\n"]}
+{"version":3,"sources":["CollapsibleView.tsx"],"names":["key","CollapsibleView","initialState","collapseState","renderHeader","children","containerStyle","collapsedBackgroundColor","expandedBackgroundColor","actualHeight","contentKey","newValue","value","onToggle","overshootClamping","handleLayout","event","nativeEvent","layout","height","wrapperStyle","damping","stiffness","contentHeight","undefined","containerAnimatedStyle","backgroundColor","headerProps","collapsed","styles","wrapper","content","CollapsibleHeaderText","title","style","titleStyle","icon","iconInitialAngle","iconStyle","rotate","transform","headerContainer","headerTitle","StyleSheet","create","overflow","flexDirection","alignItems","flex"],"mappings":"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","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n  LayoutChangeEvent,\n  StyleProp,\n  StyleSheet,\n  Text,\n  TextStyle,\n  TouchableOpacity,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withSpring,\n  interpolateColor,\n  interpolate,\n} from 'react-native-reanimated';\n\nexport type CollapsibleHeaderProps = {\n  onToggle: () => void;\n  collapsed: Animated.SharedValue<number>;\n};\n\ntype Props = {\n  initialState?: 'collapsed' | 'expanded';\n  collapseState?: Animated.SharedValue<number>;\n  renderHeader: (props: CollapsibleHeaderProps) => ReactNode;\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n  collapsedBackgroundColor?: string;\n  expandedBackgroundColor?: string;\n  useDynamicLayout?: boolean;\n};\n\nlet key = 0;\nexport default function CollapsibleView({\n  initialState = 'collapsed',\n  collapseState = useSharedValue(0),\n  renderHeader,\n  children,\n  containerStyle,\n  collapsedBackgroundColor,\n  expandedBackgroundColor,\n}: Props) {\n  const actualHeight = useSharedValue(11110);\n  const contentKey = useMemo(() => `collapsible-view-${key++}`, []);\n\n  useEffect(() => {\n    const newValue = initialState === 'collapsed' ? 0 : 1;\n    if (newValue === collapseState.value) {\n      return;\n    }\n    collapseState.value = newValue;\n  }, [initialState]);\n\n  const onToggle = useCallback(() => {\n    collapseState.value = withSpring(collapseState.value === 0 ? 1 : 0, {\n      overshootClamping: true,\n    });\n  }, []);\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    if (event.nativeEvent.layout.height >= 0) {\n      actualHeight.value = event.nativeEvent.layout.height;\n    }\n  }, []);\n\n  const wrapperStyle = useAnimatedStyle(\n    () => ({\n      height: withSpring(collapseState.value === 1 ? actualHeight.value : 0, {\n        damping: 5,\n        stiffness: 130,\n        overshootClamping: true,\n      }),\n    }),\n    [actualHeight, contentKey]\n  );\n\n  const contentHeight = useAnimatedStyle(\n    () => ({\n      height: actualHeight.value > 0 ? actualHeight.value : undefined,\n    }),\n    [actualHeight, contentKey]\n  );\n\n  // @ts-ignore\n  const containerAnimatedStyle = useAnimatedStyle(() => {\n    if (collapsedBackgroundColor && expandedBackgroundColor) {\n      return {\n        backgroundColor: interpolateColor(\n          collapseState.value,\n          [0, 1],\n          [collapsedBackgroundColor, expandedBackgroundColor]\n        ),\n      };\n    }\n    return {};\n  }, []);\n\n  const headerProps = useMemo(\n    () => ({ onToggle, collapsed: collapseState }),\n    [onToggle, collapseState]\n  );\n\n  return (\n    <Animated.View\n      style={[containerStyle, containerAnimatedStyle]}\n      pointerEvents=\"box-none\"\n    >\n      <View pointerEvents=\"box-none\">{renderHeader(headerProps)}</View>\n      <Animated.View\n        style={[styles.wrapper, wrapperStyle]}\n        pointerEvents=\"box-none\"\n      >\n        <Animated.View\n          style={[styles.content, contentHeight]}\n          pointerEvents=\"box-none\"\n        >\n          <View\n            key={contentKey}\n            onLayout={handleLayout}\n            pointerEvents=\"box-none\"\n          >\n            {children}\n          </View>\n        </Animated.View>\n      </Animated.View>\n    </Animated.View>\n  );\n}\n\nexport function CollapsibleHeaderText({\n  title,\n  collapsed,\n  onToggle,\n  style,\n  titleStyle,\n  icon,\n  iconInitialAngle = 0,\n  children,\n}: {\n  title: string | Element;\n  style?: StyleProp<ViewStyle>;\n  titleStyle?: StyleProp<TextStyle>;\n  icon?: ReactNode;\n  iconInitialAngle?: number;\n  children?: ReactNode;\n} & CollapsibleHeaderProps) {\n  const iconStyle = useAnimatedStyle(() => {\n    const rotate = interpolate(\n      collapsed.value,\n      [0, 1],\n      [iconInitialAngle, 180]\n    );\n    return {\n      transform: [\n        {\n          rotate: `${rotate}deg`,\n        },\n      ],\n    };\n  }, [iconInitialAngle]);\n\n  return (\n    <TouchableOpacity activeOpacity={0.9} onPress={onToggle} style={style}>\n      <View style={styles.headerContainer}>\n        <Text style={[styles.headerTitle, titleStyle]}>{title}</Text>\n        {icon && <Animated.View style={iconStyle}>{icon}</Animated.View>}\n      </View>\n      {children}\n    </TouchableOpacity>\n  );\n}\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    overflow: 'hidden',\n  },\n  content: {},\n  headerContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  headerTitle: {\n    flex: 1,\n  },\n});\n"]}

package/lib/commonjs/components/{CollapsibleHeaderContainer.js → header/CollapsibleHeaderContainer.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CollapsibleHeaderContainer;
 
-var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
+var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,14 +13,14 @@ var _reactNative = require("react-native");
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _useCollapsibleContext = _interopRequireDefault(require("../hooks/useCollapsibleContext"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /* eslint-disable react-hooks/exhaustive-deps */
 let key = 0;
 
@@ -34,7 +34,7 @@ function CollapsibleHeaderContainer({
   } = (0, _useCollapsibleContext.default)();
   const {
     handleHeaderContainerLayout
-  } = (0, _useInternalCollapsibleContext.useInternalCollapsibleContext)();
+  } = (0, _useInternalCollapsibleContext.default)();
   const headerHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   (0, _react.useEffect)(() => {
     return () => handleHeaderContainerLayout(contentKey, undefined);
@@ -67,19 +67,20 @@ function CollapsibleHeaderContainer({
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [styles.container, headerStyle, internalStyle],
+    style: [headerStyle, internalStyle],
     pointerEvents: "box-none"
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     key: contentKey,
     onLayout: handleHeaderLayout,
     pointerEvents: "box-none",
-    style: containerStyle
+    style: [styles.container, containerStyle]
   }, children));
 }
 
 const styles = _reactNative.StyleSheet.create({
   container: {
-    backgroundColor: 'white'
+    backgroundColor: 'white',
+    marginTop: _reactNative.Platform.OS === 'android' ? -1 : 0
   }
 });
 //# sourceMappingURL=CollapsibleHeaderContainer.js.map

package/lib/commonjs/components/header/CollapsibleHeaderContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CollapsibleHeaderContainer.tsx"],"names":["key","CollapsibleHeaderContainer","children","containerStyle","contentKey","scrollY","handleHeaderContainerLayout","headerHeight","undefined","handleHeaderLayout","nativeEvent","layout","height","value","duration","headerTranslate","Animated","Extrapolate","CLAMP","headerStyle","transform","translateY","minHeight","internalStyle","zIndex","styles","container","StyleSheet","create","backgroundColor","marginTop","Platform","OS"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAQA;;AAOA;;;;;;;;AAlBA;AAyBA,IAAIA,GAAG,GAAG,CAAV;;AAEe,SAASC,0BAAT,CAAoC;AACjDC,EAAAA,QADiD;AAEjDC,EAAAA;AAFiD,CAApC,EAGL;AACR,QAAMC,UAAU,GAAG,oBAAQ,MAAO,sBAAqBJ,GAAG,EAAG,EAA1C,EAA6C,EAA7C,CAAnB;AACA,QAAM;AAAEK,IAAAA;AAAF,MAAc,qCAApB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAkC,6CAAxC;AACA,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAMD,2BAA2B,CAACF,UAAD,EAAaI,SAAb,CAAxC;AACD,GAFD,EAEG,EAFH;AAIA,QAAMC,kBAAkB,GAAG,wBACzB,CAAC;AACCC,IAAAA,WAAW,EAAE;AACXC,MAAAA,MAAM,EAAE;AAAEC,QAAAA;AAAF;AADG;AADd,GAAD,KAIyB;AACvBL,IAAAA,YAAY,CAACM,KAAb,GAAqB,uCAAWD,MAAX,EAAmB;AACtCE,MAAAA,QAAQ,EAAE;AAD4B,KAAnB,CAArB;AAGAR,IAAAA,2BAA2B,CAACF,UAAD,EAAaQ,MAAb,CAA3B;AACD,GAVwB,EAWzB,CAACR,UAAD,EAAaE,2BAAb,CAXyB,CAA3B;AAcA,QAAMS,eAAe,GAAG,4CACtB,MACE,wCACEV,OAAO,CAACQ,KADV,EAEE;AACA,GAAC,CAAC,GAAF,EAAO,CAAP,EAAU,MAAV,CAHF,EAIE,CAAC,GAAD,EAAM,CAAN,EAAS,CAAC,MAAV,CAJF,EAKEG,+BAASC,WAAT,CAAqBC,KALvB,CAFoB,EAStB,EATsB,CAAxB;AAYA,QAAMC,WAAW,GAAG,6CAAiB,MAAM;AACzC,WAAO;AACLC,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAEN,eAAe,CAACF;AAA9B,OAAD,CADN;AAELS,MAAAA,SAAS,EAAEf,YAAY,CAACM;AAFnB,KAAP;AAID,GALmB,EAKjB,CAACN,YAAD,EAAeQ,eAAf,CALiB,CAApB;AAOA,QAAMQ,aAAa,GAAG,oBAAQ,MAAM;AAClC,WAAO;AACLC,MAAAA,MAAM,EAAE,SAASxB;AADZ,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CAACmB,WAAD,EAAcI,aAAd,CADT;AAEE,IAAA,aAAa,EAAC;AAFhB,kBAIE,6BAAC,iBAAD;AACE,IAAA,GAAG,EAAEnB,UADP;AAEE,IAAA,QAAQ,EAAEK,kBAFZ;AAGE,IAAA,aAAa,EAAC,UAHhB;AAIE,IAAA,KAAK,EAAE,CAACgB,MAAM,CAACC,SAAR,EAAmBvB,cAAnB;AAJT,KAMGD,QANH,CAJF,CADF;AAeD;;AAED,MAAMuB,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,SAAS,EAAEC,sBAASC,EAAT,KAAgB,SAAhB,GAA4B,CAAC,CAA7B,GAAiC;AAFnC;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport React, { ReactNode, useCallback, useEffect, useMemo } from 'react';\nimport {\n  LayoutChangeEvent,\n  Platform,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\n\ntype Props = {\n  children: ReactNode;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nlet key = 0;\n\nexport default function CollapsibleHeaderContainer({\n  children,\n  containerStyle,\n}: Props) {\n  const contentKey = useMemo(() => `collapsible-header-${key++}`, []);\n  const { scrollY } = useCollapsibleContext();\n  const { handleHeaderContainerLayout } = useInternalCollapsibleContext();\n  const headerHeight = useSharedValue(0);\n\n  useEffect(() => {\n    return () => handleHeaderContainerLayout(contentKey, undefined);\n  }, []);\n\n  const handleHeaderLayout = useCallback(\n    ({\n      nativeEvent: {\n        layout: { height },\n      },\n    }: LayoutChangeEvent) => {\n      headerHeight.value = withTiming(height, {\n        duration: 200,\n      });\n      handleHeaderContainerLayout(contentKey, height);\n    },\n    [contentKey, handleHeaderContainerLayout]\n  );\n\n  const headerTranslate = useDerivedValue(\n    () =>\n      interpolate(\n        scrollY.value,\n        // FIXME: can improve by geting maxY value of header and sticky views\n        [-250, 0, 100000],\n        [250, 0, -100000],\n        Animated.Extrapolate.CLAMP\n      ),\n    []\n  );\n\n  const headerStyle = useAnimatedStyle(() => {\n    return {\n      transform: [{ translateY: headerTranslate.value }],\n      minHeight: headerHeight.value,\n    };\n  }, [headerHeight, headerTranslate]);\n\n  const internalStyle = useMemo(() => {\n    return {\n      zIndex: 100000 - key,\n    };\n  }, []);\n\n  return (\n    <Animated.View\n      style={[headerStyle, internalStyle]}\n      pointerEvents=\"box-none\"\n    >\n      <View\n        key={contentKey}\n        onLayout={handleHeaderLayout}\n        pointerEvents=\"box-none\"\n        style={[styles.container, containerStyle]}\n      >\n        {children}\n      </View>\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    marginTop: Platform.OS === 'android' ? -1 : 0,\n  },\n});\n"]}

package/lib/commonjs/components/{StickyView.js → header/StickyView.js}

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = StickyView;
 
-var _useInternalCollapsibleContext = require("../hooks/useInternalCollapsibleContext");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _useCollapsibleContext = _interopRequireDefault(require("../hooks/useCollapsibleContext"));
+var _useCollapsibleContext = _interopRequireDefault(require("../../hooks/useCollapsibleContext"));
+
+var _useInternalCollapsibleContext = _interopRequireDefault(require("../../hooks/useInternalCollapsibleContext"));
 
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
@@ -31,47 +31,34 @@ function StickyView({
   const key = (0, _react.useMemo)(() => `sticky_${stickyKey++}`, []);
   const viewRef = (0, _react.useRef)(null);
   const {
-    containerRef,
     handleStickyViewLayout,
-    stickyViewTops
-  } = (0, _useInternalCollapsibleContext.useInternalCollapsibleContext)();
+    stickyViewTops,
+    stickyViewPositions
+  } = (0, _useInternalCollapsibleContext.default)();
   const {
     scrollY
   } = (0, _useCollapsibleContext.default)();
-  const layoutValues = (0, _reactNativeReanimated.useSharedValue)({
-    top: 0,
-    height: 0
-  });
   (0, _react.useEffect)(() => {
     return () => handleStickyViewLayout(key, undefined);
   }, []);
   const handleLayout = (0, _react.useCallback)(() => {
-    if (viewRef.current && containerRef.current) {
-      viewRef.current.measureLayout( // @ts-ignore
-      containerRef.current, (left, top, width, height) => {
-        handleStickyViewLayout(key, {
-          left,
-          top,
-          width,
-          height
-        });
-        layoutValues.value = {
-          top,
-          height
-        };
-      }, () => {});
-    }
-  }, [handleStickyViewLayout]);
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    handleStickyViewLayout(key, viewRef);
+  }, [handleStickyViewLayout, key]);
+  const translateY = (0, _reactNativeReanimated.useDerivedValue)(() => {
     const top = stickyViewTops.value[key] || 0;
-    const inputMid = layoutValues.value.top - top;
-    const translateY = (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, inputMid, inputMid + 100000], [0, 0, 100000], _reactNativeReanimated.Extrapolate.CLAMP);
+    const layoutValues = stickyViewPositions.value[key] || {
+      top: 0
+    };
+    const inputMid = layoutValues.top - top;
+    return (0, _reactNativeReanimated.interpolate)(scrollY.value, [0, inputMid, inputMid + 100000], [0, 0, 100000], _reactNativeReanimated.Extrapolate.CLAMP);
+  }, []);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
     return {
       transform: [{
-        translateY: translateY
+        translateY: translateY.value
       }]
     };
-  }, [stickyViewTops, layoutValues, scrollY]);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
     key: key // @ts-ignore
     ,

package/lib/commonjs/components/header/StickyView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["StickyView.tsx"],"names":["stickyKey","StickyView","children","style","key","viewRef","handleStickyViewLayout","stickyViewTops","stickyViewPositions","scrollY","undefined","handleLayout","translateY","top","value","layoutValues","inputMid","Extrapolate","CLAMP","animatedStyle","transform","styles","container","StyleSheet","create","backgroundColor","zIndex"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AALA;AAiBA,IAAIA,SAAS,GAAG,CAAhB;;AAEe,SAASC,UAAT,CAAoB;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAApB,EAAgD;AAC7D,QAAMC,GAAG,GAAG,oBAAQ,MAAO,UAASJ,SAAS,EAAG,EAApC,EAAuC,EAAvC,CAAZ;AACA,QAAMK,OAAO,GAAG,mBAAa,IAAb,CAAhB;AACA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,cAA1B;AAA0CC,IAAAA;AAA1C,MACJ,6CADF;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAc,qCAApB;AAEA,wBAAU,MAAM;AACd,WAAO,MAAMH,sBAAsB,CAACF,GAAD,EAAMM,SAAN,CAAnC;AACD,GAFD,EAEG,EAFH;AAIA,QAAMC,YAAY,GAAG,wBAAY,MAAM;AACrCL,IAAAA,sBAAsB,CAACF,GAAD,EAAMC,OAAN,CAAtB;AACD,GAFoB,EAElB,CAACC,sBAAD,EAAyBF,GAAzB,CAFkB,CAArB;AAIA,QAAMQ,UAAU,GAAG,4CAAgB,MAAM;AACvC,UAAMC,GAAG,GAAGN,cAAc,CAACO,KAAf,CAAqBV,GAArB,KAA6B,CAAzC;AACA,UAAMW,YAAY,GAAGP,mBAAmB,CAACM,KAApB,CAA0BV,GAA1B,KAAkC;AAAES,MAAAA,GAAG,EAAE;AAAP,KAAvD;AACA,UAAMG,QAAQ,GAAGD,YAAY,CAACF,GAAb,GAAmBA,GAApC;AACA,WAAO,wCACLJ,OAAO,CAACK,KADH,EAEL,CAAC,CAAD,EAAIE,QAAJ,EAAcA,QAAQ,GAAG,MAAzB,CAFK,EAGL,CAAC,CAAD,EAAI,CAAJ,EAAO,MAAP,CAHK,EAILC,mCAAYC,KAJP,CAAP;AAMD,GAVkB,EAUhB,EAVgB,CAAnB;AAYA,QAAMC,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,SAAS,EAAE,CACT;AACER,QAAAA,UAAU,EAAEA,UAAU,CAACE;AADzB,OADS;AADN,KAAP;AAOD,GARqB,EAQnB,EARmB,CAAtB;AAUA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,GAAG,EAAEV,GADP,CAEE;AAFF;AAGE,IAAA,GAAG,EAAEC,OAHP;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,SAAR,EAAmBH,aAAnB,EAAkChB,KAAlC,CALT;AAME,IAAA,aAAa,EAAC;AANhB,KAQGD,QARH,CADF;AAYD;;AAED,MAAMmB,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,eAAe,EAAE,OADR;AAETC,IAAAA,MAAM,EAAE;AAFC;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport useCollapsibleContext from '../../hooks/useCollapsibleContext';\nimport useInternalCollapsibleContext from '../../hooks/useInternalCollapsibleContext';\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n} from 'react-native-reanimated';\n\ntype Props = {\n  style?: StyleProp<ViewStyle>;\n  children: Element;\n};\n\nlet stickyKey = 0;\n\nexport default function StickyView({ children, style }: Props) {\n  const key = useMemo(() => `sticky_${stickyKey++}`, []);\n  const viewRef = useRef<View>(null);\n  const { handleStickyViewLayout, stickyViewTops, stickyViewPositions } =\n    useInternalCollapsibleContext();\n  const { scrollY } = useCollapsibleContext();\n\n  useEffect(() => {\n    return () => handleStickyViewLayout(key, undefined);\n  }, []);\n\n  const handleLayout = useCallback(() => {\n    handleStickyViewLayout(key, viewRef);\n  }, [handleStickyViewLayout, key]);\n\n  const translateY = useDerivedValue(() => {\n    const top = stickyViewTops.value[key] || 0;\n    const layoutValues = stickyViewPositions.value[key] || { top: 0 };\n    const inputMid = layoutValues.top - top;\n    return interpolate(\n      scrollY.value,\n      [0, inputMid, inputMid + 100000],\n      [0, 0, 100000],\n      Extrapolate.CLAMP\n    );\n  }, []);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      transform: [\n        {\n          translateY: translateY.value,\n        },\n      ],\n    };\n  }, []);\n\n  return (\n    <Animated.View\n      key={key}\n      // @ts-ignore\n      ref={viewRef}\n      onLayout={handleLayout}\n      style={[styles.container, animatedStyle, style]}\n      pointerEvents=\"box-none\"\n    >\n      {children}\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    backgroundColor: 'white',\n    zIndex: 10,\n  },\n});\n"]}

package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PullToRefreshContainer;
+
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _usePullToRefreshContext = _interopRequireDefault(require("./usePullToRefreshContext"));
+
+var _reactNative = require("react-native");
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function PullToRefreshContainer({
+  children,
+  scrollY
+}) {
+  const scrollRef = (0, _react.useRef)();
+  const panRef = (0, _react.useRef)();
+  const {
+    refreshValue,
+    internalRefreshing,
+    internalHeight
+  } = (0, _usePullToRefreshContext.default)();
+  const gestureHandler = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
+    onStart: (_, ctx) => {
+      ctx.startY = internalRefreshing.value ? refreshValue.value : 0;
+    },
+    onActive: (event, ctx) => {
+      if (scrollY.value <= 1) {
+        const tranY = event.translationY + ctx.startY;
+        const clampedValue = (0, _utils.rubberClamp)(tranY, 0, internalHeight.value);
+        refreshValue.value = clampedValue;
+
+        if (clampedValue > internalHeight.value) {
+          internalRefreshing.value = true;
+        }
+      } else {
+        refreshValue.value = 0;
+      }
+    },
+    onEnd: () => {
+      if (refreshValue.value > 0) {
+        const value = internalRefreshing.value ? internalHeight.value : 0;
+        refreshValue.value = (0, _reactNativeReanimated.withTiming)(value);
+      }
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
+    ref: panRef,
+    simultaneousHandlers: scrollRef,
+    onGestureEvent: gestureHandler,
+    shouldCancelWhenOutside: false,
+    enableTrackpadTwoFingerGesture: true,
+    maxPointers: 1
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: _reactNative.StyleSheet.absoluteFill
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler, {
+    ref: scrollRef,
+    simultaneousHandlers: panRef
+  }, children)));
+}
+//# sourceMappingURL=PullToRefreshContainer.js.map

package/lib/commonjs/components/pullToRefresh/PullToRefreshContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PullToRefreshContainer.tsx"],"names":["PullToRefreshContainer","children","scrollY","scrollRef","panRef","refreshValue","internalRefreshing","internalHeight","gestureHandler","onStart","_","ctx","startY","value","onActive","event","tranY","translationY","clampedValue","onEnd","StyleSheet","absoluteFill"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;;;;;;;AAOe,SAASA,sBAAT,CAAgC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAhC,EAA8D;AAC3E,QAAMC,SAAS,GAAG,oBAAlB;AACA,QAAMC,MAAM,GAAG,oBAAf;AACA,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,QAAMC,cAAc,GAAG,sDAA0B;AAC/CC,IAAAA,OAAO,EAAE,CAACC,CAAD,EAAIC,GAAJ,KAAiB;AACxBA,MAAAA,GAAG,CAACC,MAAJ,GAAaN,kBAAkB,CAACO,KAAnB,GAA2BR,YAAY,CAACQ,KAAxC,GAAgD,CAA7D;AACD,KAH8C;AAI/CC,IAAAA,QAAQ,EAAE,CAACC,KAAD,EAAQJ,GAAR,KAAqB;AAC7B,UAAIT,OAAO,CAACW,KAAR,IAAiB,CAArB,EAAwB;AACtB,cAAMG,KAAK,GAAGD,KAAK,CAACE,YAAN,GAAqBN,GAAG,CAACC,MAAvC;AACA,cAAMM,YAAY,GAAG,wBAAYF,KAAZ,EAAmB,CAAnB,EAAsBT,cAAc,CAACM,KAArC,CAArB;AACAR,QAAAA,YAAY,CAACQ,KAAb,GAAqBK,YAArB;;AACA,YAAIA,YAAY,GAAGX,cAAc,CAACM,KAAlC,EAAyC;AACvCP,UAAAA,kBAAkB,CAACO,KAAnB,GAA2B,IAA3B;AACD;AACF,OAPD,MAOO;AACLR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,CAArB;AACD;AACF,KAf8C;AAgB/CM,IAAAA,KAAK,EAAE,MAAM;AACX,UAAId,YAAY,CAACQ,KAAb,GAAqB,CAAzB,EAA4B;AAC1B,cAAMA,KAAK,GAAGP,kBAAkB,CAACO,KAAnB,GAA2BN,cAAc,CAACM,KAA1C,GAAkD,CAAhE;AACAR,QAAAA,YAAY,CAACQ,KAAb,GAAqB,uCAAWA,KAAX,CAArB;AACD;AACF;AArB8C,GAA1B,CAAvB;AAwBA,sBACE,6BAAC,4CAAD;AACE,IAAA,GAAG,EAAET,MADP;AAEE,IAAA,oBAAoB,EAAED,SAFxB;AAGE,IAAA,cAAc,EAAEK,cAHlB;AAIE,IAAA,uBAAuB,EAAE,KAJ3B;AAKE,IAAA,8BAA8B,MALhC;AAME,IAAA,WAAW,EAAE;AANf,kBAQE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEY,wBAAWC;AAAjC,kBACE,6BAAC,mDAAD;AAA0B,IAAA,GAAG,EAAElB,SAA/B;AAA0C,IAAA,oBAAoB,EAAEC;AAAhE,KACGH,QADH,CADF,CARF,CADF;AAgBD","sourcesContent":["import {\n  NativeViewGestureHandler,\n  PanGestureHandler,\n} from 'react-native-gesture-handler';\nimport React, { useRef } from 'react';\nimport Animated, {\n  useAnimatedGestureHandler,\n  withTiming,\n} from 'react-native-reanimated';\nimport usePullToRefreshContext from './usePullToRefreshContext';\nimport { StyleSheet } from 'react-native';\nimport { rubberClamp } from './utils';\n\ntype Props = {\n  children: React.ReactNode;\n  scrollY: Animated.SharedValue<number>;\n};\n\nexport default function PullToRefreshContainer({ children, scrollY }: Props) {\n  const scrollRef = useRef();\n  const panRef = useRef();\n  const { refreshValue, internalRefreshing, internalHeight } =\n    usePullToRefreshContext();\n\n  const gestureHandler = useAnimatedGestureHandler({\n    onStart: (_, ctx: any) => {\n      ctx.startY = internalRefreshing.value ? refreshValue.value : 0;\n    },\n    onActive: (event, ctx: any) => {\n      if (scrollY.value <= 1) {\n        const tranY = event.translationY + ctx.startY;\n        const clampedValue = rubberClamp(tranY, 0, internalHeight.value);\n        refreshValue.value = clampedValue;\n        if (clampedValue > internalHeight.value) {\n          internalRefreshing.value = true;\n        }\n      } else {\n        refreshValue.value = 0;\n      }\n    },\n    onEnd: () => {\n      if (refreshValue.value > 0) {\n        const value = internalRefreshing.value ? internalHeight.value : 0;\n        refreshValue.value = withTiming(value);\n      }\n    },\n  });\n\n  return (\n    <PanGestureHandler\n      ref={panRef}\n      simultaneousHandlers={scrollRef}\n      onGestureEvent={gestureHandler}\n      shouldCancelWhenOutside={false}\n      enableTrackpadTwoFingerGesture\n      maxPointers={1}\n    >\n      <Animated.View style={StyleSheet.absoluteFill}>\n        <NativeViewGestureHandler ref={scrollRef} simultaneousHandlers={panRef}>\n          {children}\n        </NativeViewGestureHandler>\n      </Animated.View>\n    </PanGestureHandler>\n  );\n}\n"]}

package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PullToRefreshProvider;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNativeReanimated = require("react-native-reanimated");
+
+var _usePullToRefreshContext = require("./usePullToRefreshContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function PullToRefreshProvider({
+  children
+}) {
+  const refreshValue = (0, _reactNativeReanimated.useSharedValue)(0);
+  const internalRefreshing = (0, _reactNativeReanimated.useSharedValue)(false);
+  const internalHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const context = (0, _react.useMemo)(() => {
+    return {
+      refreshValue: refreshValue,
+      internalRefreshing,
+      internalHeight
+    };
+  }, [refreshValue, internalRefreshing, internalHeight]);
+  return /*#__PURE__*/_react.default.createElement(_usePullToRefreshContext.PullToRefreshContext.Provider, {
+    value: context
+  }, children);
+}
+//# sourceMappingURL=PullToRefreshProvider.js.map

package/lib/commonjs/components/pullToRefresh/PullToRefreshProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PullToRefreshProvider.tsx"],"names":["PullToRefreshProvider","children","refreshValue","internalRefreshing","internalHeight","context"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAMe,SAASA,qBAAT,CAA+B;AAAEC,EAAAA;AAAF,CAA/B,EAAoD;AACjE,QAAMC,YAAY,GAAG,2CAAe,CAAf,CAArB;AACA,QAAMC,kBAAkB,GAAG,2CAAe,KAAf,CAA3B;AACA,QAAMC,cAAc,GAAG,2CAAe,CAAf,CAAvB;AAEA,QAAMC,OAAO,GAAG,oBAAQ,MAAM;AAC5B,WAAO;AACLH,MAAAA,YAAY,EAAEA,YADT;AAELC,MAAAA,kBAFK;AAGLC,MAAAA;AAHK,KAAP;AAKD,GANe,EAMb,CAACF,YAAD,EAAeC,kBAAf,EAAmCC,cAAnC,CANa,CAAhB;AAQA,sBACE,6BAAC,6CAAD,CAAsB,QAAtB;AAA+B,IAAA,KAAK,EAAEC;AAAtC,KACGJ,QADH,CADF;AAKD","sourcesContent":["import React, { useMemo } from 'react';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { PullToRefreshContext } from './usePullToRefreshContext';\n\ntype Props = {\n  children: React.ReactNode;\n};\n\nexport default function PullToRefreshProvider({ children }: Props) {\n  const refreshValue = useSharedValue(0);\n  const internalRefreshing = useSharedValue(false);\n  const internalHeight = useSharedValue(0);\n\n  const context = useMemo(() => {\n    return {\n      refreshValue: refreshValue,\n      internalRefreshing,\n      internalHeight,\n    };\n  }, [refreshValue, internalRefreshing, internalHeight]);\n\n  return (\n    <PullToRefreshContext.Provider value={context}>\n      {children}\n    </PullToRefreshContext.Provider>\n  );\n}\n"]}

package/lib/commonjs/components/pullToRefresh/RefreshControl.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RefreshControl;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _usePullToRefreshContext = _interopRequireDefault(require("./usePullToRefreshContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function RefreshControl({
+  height = 100,
+  refreshing,
+  onRefresh,
+  renderAnimation
+}) {
+  const {
+    refreshValue,
+    internalRefreshing,
+    internalHeight
+  } = (0, _usePullToRefreshContext.default)();
+  (0, _react.useEffect)(() => {
+    internalHeight.value = height;
+  }, [height]);
+  (0, _react.useEffect)(() => {
+    internalRefreshing.value = refreshing;
+  }, [refreshing]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    return {
+      height: refreshValue.value
+    };
+  }, []);
+  const handleRefresh = (0, _react.useCallback)(() => {
+    console.log('refresh');
+    onRefresh();
+  }, [onRefresh]);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => internalRefreshing.value, (result, prev) => {
+    if (result !== prev) {
+      if (result) {
+        (0, _reactNativeReanimated.runOnJS)(handleRefresh)();
+      } else {
+        refreshValue.value = (0, _reactNativeReanimated.withTiming)(0);
+      }
+    }
+  });
+  const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    return {
+      progress: internalRefreshing.value ? undefined : Math.min(refreshValue.value / height, 1)
+    };
+  }, [height]);
+  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
+    style: [styles.container, animatedStyle]
+  }, renderAnimation(animatedProps));
+}
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=RefreshControl.js.map

package/lib/commonjs/components/pullToRefresh/RefreshControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RefreshControl.tsx"],"names":["RefreshControl","height","refreshing","onRefresh","renderAnimation","refreshValue","internalRefreshing","internalHeight","value","animatedStyle","handleRefresh","console","log","result","prev","animatedProps","progress","undefined","Math","min","styles","container","StyleSheet","create","overflow"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AAOA;;;;;;;;AAVA;AAmBe,SAASA,cAAT,CAAwB;AACrCC,EAAAA,MAAM,GAAG,GAD4B;AAErCC,EAAAA,UAFqC;AAGrCC,EAAAA,SAHqC;AAIrCC,EAAAA;AAJqC,CAAxB,EAKL;AACR,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,kBAAhB;AAAoCC,IAAAA;AAApC,MACJ,uCADF;AAGA,wBAAU,MAAM;AACdA,IAAAA,cAAc,CAACC,KAAf,GAAuBP,MAAvB;AACD,GAFD,EAEG,CAACA,MAAD,CAFH;AAIA,wBAAU,MAAM;AACdK,IAAAA,kBAAkB,CAACE,KAAnB,GAA2BN,UAA3B;AACD,GAFD,EAEG,CAACA,UAAD,CAFH;AAIA,QAAMO,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLR,MAAAA,MAAM,EAAEI,YAAY,CAACG;AADhB,KAAP;AAGD,GAJqB,EAInB,EAJmB,CAAtB;AAMA,QAAME,aAAa,GAAG,wBAAY,MAAM;AACtCC,IAAAA,OAAO,CAACC,GAAR,CAAY,SAAZ;AACAT,IAAAA,SAAS;AACV,GAHqB,EAGnB,CAACA,SAAD,CAHmB,CAAtB;AAKA,kDACE,MAAMG,kBAAkB,CAACE,KAD3B,EAEE,CAACK,MAAD,EAASC,IAAT,KAAkB;AAChB,QAAID,MAAM,KAAKC,IAAf,EAAqB;AACnB,UAAID,MAAJ,EAAY;AACV,4CAAQH,aAAR;AACD,OAFD,MAEO;AACLL,QAAAA,YAAY,CAACG,KAAb,GAAqB,uCAAW,CAAX,CAArB;AACD;AACF;AACF,GAVH;AAaA,QAAMO,aAAa,GAAG,6CAAiB,MAAM;AAC3C,WAAO;AACLC,MAAAA,QAAQ,EAAEV,kBAAkB,CAACE,KAAnB,GACNS,SADM,GAENC,IAAI,CAACC,GAAL,CAASd,YAAY,CAACG,KAAb,GAAqBP,MAA9B,EAAsC,CAAtC;AAHC,KAAP;AAKD,GANqB,EAMnB,CAACA,MAAD,CANmB,CAAtB;AAQA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,CAACmB,MAAM,CAACC,SAAR,EAAmBZ,aAAnB;AAAtB,KACGL,eAAe,CAACW,aAAD,CADlB,CADF;AAKD;;AAED,MAAMK,MAAM,GAAGE,wBAAWC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AACTG,IAAAA,QAAQ,EAAE;AADD;AADoB,CAAlB,CAAf","sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useCallback, useEffect } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n  runOnJS,\n  useAnimatedProps,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  withTiming,\n} from 'react-native-reanimated';\nimport usePullToRefreshContext from './usePullToRefreshContext';\n\ntype Props = {\n  height?: number;\n  refreshing: boolean;\n  onRefresh: () => void;\n  renderAnimation: (animatedProps: any) => React.ReactNode;\n};\n\nexport default function RefreshControl({\n  height = 100,\n  refreshing,\n  onRefresh,\n  renderAnimation,\n}: Props) {\n  const { refreshValue, internalRefreshing, internalHeight } =\n    usePullToRefreshContext();\n\n  useEffect(() => {\n    internalHeight.value = height;\n  }, [height]);\n\n  useEffect(() => {\n    internalRefreshing.value = refreshing;\n  }, [refreshing]);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      height: refreshValue.value,\n    };\n  }, []);\n\n  const handleRefresh = useCallback(() => {\n    console.log('refresh');\n    onRefresh();\n  }, [onRefresh]);\n\n  useAnimatedReaction(\n    () => internalRefreshing.value,\n    (result, prev) => {\n      if (result !== prev) {\n        if (result) {\n          runOnJS(handleRefresh)();\n        } else {\n          refreshValue.value = withTiming(0);\n        }\n      }\n    }\n  );\n\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      progress: internalRefreshing.value\n        ? undefined\n        : Math.min(refreshValue.value / height, 1),\n    };\n  }, [height]);\n\n  return (\n    <Animated.View style={[styles.container, animatedStyle]}>\n      {renderAnimation(animatedProps)}\n    </Animated.View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n});\n"]}

package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePullToRefreshContext;
+exports.PullToRefreshContext = void 0;
+
+var _react = require("react");
+
+// @ts-ignore
+const PullToRefreshContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.PullToRefreshContext = PullToRefreshContext;
+
+function usePullToRefreshContext() {
+  const ctx = (0, _react.useContext)(PullToRefreshContext);
+
+  if (!ctx) {
+    throw new Error('Component should be wrapped with withCollapsibleContext');
+  }
+
+  return ctx;
+}
+//# sourceMappingURL=usePullToRefreshContext.js.map

package/lib/commonjs/components/pullToRefresh/usePullToRefreshContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePullToRefreshContext.ts"],"names":["PullToRefreshContext","usePullToRefreshContext","ctx","Error"],"mappings":";;;;;;;;AAAA;;AAGA;AACO,MAAMA,oBAAoB,gBAAG,0BAAwC,EAAxC,CAA7B;;;AAEQ,SAASC,uBAAT,GAAmC;AAChD,QAAMC,GAAG,GAAG,uBAAWF,oBAAX,CAAZ;;AACA,MAAI,CAACE,GAAL,EAAU;AACR,UAAM,IAAIC,KAAJ,CAAU,yDAAV,CAAN;AACD;;AACD,SAAOD,GAAP;AACD","sourcesContent":["import { createContext, useContext } from 'react';\nimport type { PullToRefreshContextType } from '../../types';\n\n// @ts-ignore\nexport const PullToRefreshContext = createContext<PullToRefreshContextType>({});\n\nexport default function usePullToRefreshContext() {\n  const ctx = useContext(PullToRefreshContext);\n  if (!ctx) {\n    throw new Error('Component should be wrapped with withCollapsibleContext');\n  }\n  return ctx;\n}\n"]}

package/lib/commonjs/components/pullToRefresh/utils.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clamp = clamp;
+exports.rubberClamp = exports.rubberBandClamp = exports.springConfig = void 0;
+
+const springConfig = velocity => {
+  'worklet';
+
+  return {
+    stiffness: 1000,
+    damping: 500,
+    mass: 3,
+    overshootClamping: true,
+    restDisplacementThreshold: 0.01,
+    restSpeedThreshold: 0.01,
+    velocity
+  };
+};
+
+exports.springConfig = springConfig;
+
+function clamp(value, lowerbound, upperbound) {
+  'worklet';
+
+  return Math.min(Math.max(value, lowerbound), upperbound);
+}
+/**
+ * calculates rubber value
+ *
+ * @param x distance from the edge
+ * @param dim dimension, either width or height
+ * @param coeff constant value, UIScrollView uses 0.55
+ * @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim
+ */
+
+
+const rubberBandClamp = (x, dim, coeff) => {
+  'worklet';
+
+  return (1.0 - 1.0 / (x * coeff / dim + 1.0)) * dim;
+};
+
+exports.rubberBandClamp = rubberBandClamp;
+
+const rubberClamp = (y, topBound, bottomBound, coeff = 0.55) => {
+  'worklet';
+
+  const clampedY = clamp(y, topBound, bottomBound);
+  const diff = Math.abs(y - clampedY);
+  const sign = clampedY > y ? -1 : 1;
+  const dimension = bottomBound - topBound;
+  return clampedY + sign * rubberBandClamp(diff, dimension, coeff);
+};
+
+exports.rubberClamp = rubberClamp;
+//# sourceMappingURL=utils.js.map

package/lib/commonjs/components/pullToRefresh/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.ts"],"names":["springConfig","velocity","stiffness","damping","mass","overshootClamping","restDisplacementThreshold","restSpeedThreshold","clamp","value","lowerbound","upperbound","Math","min","max","rubberBandClamp","x","dim","coeff","rubberClamp","y","topBound","bottomBound","clampedY","diff","abs","sign","dimension"],"mappings":";;;;;;;;AAAO,MAAMA,YAAY,GAAIC,QAAD,IAAsB;AAChD;;AAEA,SAAO;AACLC,IAAAA,SAAS,EAAE,IADN;AAELC,IAAAA,OAAO,EAAE,GAFJ;AAGLC,IAAAA,IAAI,EAAE,CAHD;AAILC,IAAAA,iBAAiB,EAAE,IAJd;AAKLC,IAAAA,yBAAyB,EAAE,IALtB;AAMLC,IAAAA,kBAAkB,EAAE,IANf;AAOLN,IAAAA;AAPK,GAAP;AASD,CAZM;;;;AAcA,SAASO,KAAT,CAAeC,KAAf,EAA8BC,UAA9B,EAAkDC,UAAlD,EAAsE;AAC3E;;AAEA,SAAOC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASL,KAAT,EAAgBC,UAAhB,CAAT,EAAsCC,UAAtC,CAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMI,eAAe,GAAG,CAACC,CAAD,EAAYC,GAAZ,EAAyBC,KAAzB,KAA2C;AACxE;;AAEA,SAAO,CAAC,MAAM,OAAQF,CAAC,GAAGE,KAAL,GAAcD,GAAd,GAAoB,GAA3B,CAAP,IAA0CA,GAAjD;AACD,CAJM;;;;AAMA,MAAME,WAAW,GAAG,CACzBC,CADyB,EAEzBC,QAFyB,EAGzBC,WAHyB,EAIzBJ,KAAK,GAAG,IAJiB,KAKtB;AACH;;AAEA,QAAMK,QAAQ,GAAGf,KAAK,CAACY,CAAD,EAAIC,QAAJ,EAAcC,WAAd,CAAtB;AACA,QAAME,IAAI,GAAGZ,IAAI,CAACa,GAAL,CAASL,CAAC,GAAGG,QAAb,CAAb;AACA,QAAMG,IAAI,GAAGH,QAAQ,GAAGH,CAAX,GAAe,CAAC,CAAhB,GAAoB,CAAjC;AACA,QAAMO,SAAS,GAAGL,WAAW,GAAGD,QAAhC;AAEA,SAAOE,QAAQ,GAAGG,IAAI,GAAGX,eAAe,CAACS,IAAD,EAAOG,SAAP,EAAkBT,KAAlB,CAAxC;AACD,CAdM","sourcesContent":["export const springConfig = (velocity: number) => {\n  'worklet';\n\n  return {\n    stiffness: 1000,\n    damping: 500,\n    mass: 3,\n    overshootClamping: true,\n    restDisplacementThreshold: 0.01,\n    restSpeedThreshold: 0.01,\n    velocity,\n  };\n};\n\nexport function clamp(value: number, lowerbound: number, upperbound: number) {\n  'worklet';\n\n  return Math.min(Math.max(value, lowerbound), upperbound);\n}\n\n/**\n * calculates rubber value\n *\n * @param x distance from the edge\n * @param dim dimension, either width or height\n * @param coeff constant value, UIScrollView uses 0.55\n * @returns rubber = (1.0 – (1.0 / ((x * coeff / dim) + 1.0))) * dim\n */\nexport const rubberBandClamp = (x: number, dim: number, coeff: number) => {\n  'worklet';\n\n  return (1.0 - 1.0 / ((x * coeff) / dim + 1.0)) * dim;\n};\n\nexport const rubberClamp = (\n  y: number,\n  topBound: number,\n  bottomBound: number,\n  coeff = 0.55\n) => {\n  'worklet';\n\n  const clampedY = clamp(y, topBound, bottomBound);\n  const diff = Math.abs(y - clampedY);\n  const sign = clampedY > y ? -1 : 1;\n  const dimension = bottomBound - topBound;\n\n  return clampedY + sign * rubberBandClamp(diff, dimension, coeff);\n};\n"]}