@adiraku/react-native-ui 1.2.3-snapshot.4 → 1.2.3-snapshot.6

package/src/components/BottomSheet/BottomSheet.component.tsx

@@ -1,238 +1,217 @@
-import * as React from 'react';
-import { Animated, Dimensions, PanResponder, View } from 'react-native';
-import Modal from 'react-native-modal';
-
-import { getStyle } from './BottomSheet.style';
-import { Typography } from '../typography/typography.component';
-
-import type { BottomSheetProps } from './BottomSheet.type';
-import { TouchableHighlight } from 'react-native';
-
-type BottomSheetRefHandle = {
-  open: () => void;
-  close: () => void;
-};
-
-export type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
-
-const deviceWindow = Dimensions.get('window');
-
-const BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
-  (props, ref) => {
-    const {
-      onDismiss,
-      title,
-      titleProps = {},
-      subtitle,
-      subtitleProps = {},
-      dismissIcon = null,
-      dismissIconProps = {},
-      action = null,
-      largeIcon = null,
-      largeIconContainerHeight = 50,
-      maxSheetHeight = 0.85,
-      sheetHeader,
-      backdropTransitionOutTiming = 0,
-      onBackdropPress = () => {},
-      onBackButtonPress = () => {},
-      children,
-      ...rest
-    } = props;
-
-    const computedStyle = getStyle();
-
-    const [visibility, setVisibility] = React.useState(false);
-    const panY = React.useRef(new Animated.Value(deviceWindow.height)).current;
-
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return {
-          open() {
-            setVisibility(true);
-          },
-          close() {
-            setVisibility(false);
-          },
-        };
-      },
-      []
-    );
-
-    const handleDismiss = () => {
-      setVisibility(false);
-      closeAnim.start(onDismiss);
-    };
-
-    const resetPositionAnim = Animated.timing(panY, {
-      toValue: 0,
-      duration: 300,
-      useNativeDriver: true,
-    });
-
-    const closeAnim = Animated.timing(panY, {
-      toValue: deviceWindow.height,
-      duration: 300,
-      useNativeDriver: true,
-    });
-
-    const translateY = panY.interpolate({
-      inputRange: [-1, 0, 1],
-      outputRange: [0, 0, 1],
-    });
-
-    React.useEffect(() => {
-      resetPositionAnim.start();
-    }, [resetPositionAnim]);
-
-    const panResponders = React.useRef(
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => false,
-        onPanResponderMove: Animated.event([null, { dy: panY }], {
-          useNativeDriver: false,
-        }),
-        onPanResponderRelease: (_, gs) => {
-          if (gs.dy > 0 && gs.vy > 0.3) {
-            return handleDismiss();
-          }
-          return resetPositionAnim.start();
-        },
-      })
-    ).current;
-
-    const renderSheetHeader = () => {
-      if (sheetHeader) {
-        return sheetHeader;
-      }
-      return (
-        <View style={[computedStyle.sheetHeaderWrapper]}>
-          <View style={[computedStyle.sheetHeader]}>
-            <View
-              style={[
-                {
-                  maxWidth: ((deviceWindow.width - 32) / 8) * 2,
-                  minWidth: ((deviceWindow.width - 32) / 8) * 2,
-                },
-              ]}
-            >
-              {!!dismissIcon && (
-                <TouchableHighlight
-                  onPress={handleDismiss}
-                  style={[computedStyle.sheetDismissIconWrapper]}
-                  underlayColor={'transparent'}
-                  {...dismissIconProps}
-                >
-                  {dismissIcon}
-                </TouchableHighlight>
-              )}
-            </View>
-            <View
-              style={[
-                {
-                  maxWidth: ((deviceWindow.width - 32) / 8) * 4,
-                  minWidth: ((deviceWindow.width - 32) / 8) * 4,
-                },
-              ]}
-            >
-              {!!title && (
-                <Typography
-                  variant="subtitle1"
-                  style={[computedStyle.textCenter]}
-                  numberOfLines={2}
-                  {...titleProps}
-                >
-                  {title}
-                </Typography>
-              )}
-            </View>
-            <View
-              style={[
-                {
-                  maxWidth: ((deviceWindow.width - 32) / 8) * 2,
-                  minWidth: ((deviceWindow.width - 32) / 8) * 2,
-                },
-                computedStyle.sheetActionWrapper,
-              ]}
-            >
-              {action || null}
-            </View>
-          </View>
-          {!!subtitle && (
-            <Typography
-              variant="body2"
-              numberOfLines={2}
-              style={[computedStyle.textCenter]}
-              {...subtitleProps}
-            >
-              {subtitle}
-            </Typography>
-          )}
-        </View>
-      );
-    };
-
-    const renderLargeIconComponent = () => {
-      return (
-        <View
-          style={[
-            computedStyle.largeIconContainer,
-            { height: largeIconContainerHeight },
-          ]}
-        >
-          <View style={[computedStyle.largeIconAbsoluteWrapper]}>
-            {largeIcon}
-          </View>
-          {!!dismissIcon && (
-            <TouchableHighlight
-              onPress={handleDismiss}
-              style={[computedStyle.sheetDismissIconWrapper, { position: 'absolute', left: 16, zIndex:99 }]}
-              underlayColor={'transparent'}
-              {...dismissIconProps}
-            >
-              {dismissIcon}
-            </TouchableHighlight>
-          )}
-        </View>
-      );
-    };
-    return (
-      <Modal
-        isVisible={visibility}
-        backdropTransitionOutTiming={backdropTransitionOutTiming}
-        onBackdropPress={() => {
-          onBackdropPress();
-          handleDismiss();
-        }}
-        onBackButtonPress={() => {
-          onBackButtonPress();
-          handleDismiss();
-        }}
-        onSwipeComplete={() => handleDismiss()}
-        style={{ flex: 1, margin: 0 }}
-        {...rest}
-      >
-        <Animated.View
-          style={[
-            computedStyle.container,
-            {
-              maxHeight: deviceWindow.height * maxSheetHeight,
-              transform: [{ translateY: translateY }],
-            },
-          ]}
-        >
-          <View
-            style={[computedStyle.sheetIndicatorWrapper]}
-            {...panResponders.panHandlers}
-          >
-            {!largeIcon && <View style={computedStyle.sliderIndicator} />}
-          </View>
-          {largeIcon ? renderLargeIconComponent() : renderSheetHeader()}
-          {children}
-        </Animated.View>
-      </Modal>
-    );
-  }
-);
-
-export { BottomSheet };
+import * as React from 'react';
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+import Modal from 'react-native-modal';
+
+import { getStyle } from './BottomSheet.style';
+import { Typography } from '../typography/typography.component';
+
+import type { BottomSheetProps } from './BottomSheet.type';
+
+type BottomSheetRefHandle = {
+  open: () => void;
+  close: () => void;
+};
+
+export type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
+
+const deviceWindow = Dimensions.get('window');
+
+const BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
+  (props, ref) => {
+    const {
+      onDismiss,
+      title,
+      titleProps = {},
+      subtitle,
+      subtitleProps = {},
+      dismissIcon = null,
+      dismissIconProps = {},
+      action = null,
+      largeIcon = null,
+      largeIconContainerHeight = 50,
+      maxSheetHeight = 0.85,
+      sheetHeader,
+      backdropTransitionOutTiming = 0,
+      onBackdropPress = () => {},
+      onBackButtonPress = () => {},
+      children,
+      ...rest
+    } = props;
+
+    const computedStyle = getStyle();
+
+    const [visibility, setVisibility] = React.useState(false);
+    const panY = React.useRef(new Animated.Value(deviceWindow.height)).current;
+
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return {
+          open() {
+            setVisibility(true);
+          },
+          close() {
+            setVisibility(false);
+          },
+        };
+      },
+      []
+    );
+
+    const handleDismiss = () => {
+      setVisibility(false);
+      closeAnim.start(onDismiss);
+    };
+
+    const resetPositionAnim = Animated.timing(panY, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    });
+
+    const closeAnim = Animated.timing(panY, {
+      toValue: deviceWindow.height,
+      duration: 300,
+      useNativeDriver: true,
+    });
+
+    const translateY = panY.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [0, 0, 1],
+    });
+
+    React.useEffect(() => {
+      resetPositionAnim.start();
+    }, [resetPositionAnim]);
+
+    const panResponders = React.useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => false,
+        onPanResponderMove: Animated.event([null, { dy: panY }], {
+          useNativeDriver: false,
+        }),
+        onPanResponderRelease: (_, gs) => {
+          if (gs.dy > 0 && gs.vy > 0.3) {
+            return handleDismiss();
+          }
+          return resetPositionAnim.start();
+        },
+      })
+    ).current;
+
+    const renderSheetHeader = () => {
+      if (sheetHeader) {
+        return sheetHeader;
+      }
+      return (
+        <View style={[computedStyle.sheetHeaderWrapper]}>
+          <View style={[computedStyle.sheetHeader]}>
+            {!!dismissIcon && (
+              <TouchableHighlight
+                onPress={handleDismiss}
+                style={[computedStyle.sheetDismissIconWrapper]}
+                underlayColor={'transparent'}
+                {...dismissIconProps}
+              >
+                {dismissIcon}
+              </TouchableHighlight>
+            )}
+            {!!title && (
+              <Typography
+                variant="subtitle1"
+                style={[computedStyle.textCenter]}
+                numberOfLines={2}
+                {...titleProps}
+              >
+                {title}
+              </Typography>
+            )}
+            {action && (
+              <View style={[computedStyle.sheetActionWrapper]}>{action}</View>
+            )}
+          </View>
+          {!!subtitle && (
+            <Typography
+              variant="body2"
+              numberOfLines={2}
+              style={[computedStyle.textCenter, computedStyle.subtitleText]}
+              {...subtitleProps}
+            >
+              {subtitle}
+            </Typography>
+          )}
+        </View>
+      );
+    };
+
+    const renderLargeIconComponent = () => {
+      return (
+        <View
+          style={[
+            computedStyle.largeIconContainer,
+            { height: largeIconContainerHeight },
+          ]}
+        >
+          <View style={[computedStyle.largeIconAbsoluteWrapper]}>
+            {largeIcon}
+          </View>
+          {!!dismissIcon && (
+            <TouchableHighlight
+              onPress={handleDismiss}
+              style={[computedStyle.sheetDismissIconWrapper]}
+              underlayColor={'transparent'}
+              {...dismissIconProps}
+            >
+              {dismissIcon}
+            </TouchableHighlight>
+          )}
+        </View>
+      );
+    };
+    return (
+      <Modal
+        isVisible={visibility}
+        backdropTransitionOutTiming={backdropTransitionOutTiming}
+        onBackdropPress={() => {
+          onBackdropPress();
+          handleDismiss();
+        }}
+        onBackButtonPress={() => {
+          onBackButtonPress();
+          handleDismiss();
+        }}
+        onSwipeComplete={() => handleDismiss()}
+        style={{ flex: 1, margin: 0 }}
+        {...rest}
+      >
+        <Animated.View
+          style={[
+            computedStyle.container,
+            {
+              maxHeight: deviceWindow.height * maxSheetHeight,
+              transform: [{ translateY: translateY }],
+            },
+          ]}
+        >
+          <View
+            style={[computedStyle.sheetIndicatorWrapper]}
+            {...panResponders.panHandlers}
+          >
+            {!largeIcon && <View style={computedStyle.sliderIndicator} />}
+          </View>
+          {largeIcon ? renderLargeIconComponent() : renderSheetHeader()}
+          {children}
+        </Animated.View>
+      </Modal>
+    );
+  }
+);
+
+export { BottomSheet };

package/src/components/BottomSheet/BottomSheet.style.tsx

@@ -1,89 +1,98 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-
-import { Palettes, Radius, Spacing } from '../../themes';
-
-interface ComputedStyleProps {
-  overlay?: ViewStyle;
-  container?: ViewStyle;
-  overlayColor?: ViewStyle;
-  sliderIndicatorRow?: ViewStyle;
-  sliderIndicator?: ViewStyle;
-  sheetIndicatorWrapper?: ViewStyle;
-  sheetHeaderWrapper?: ViewStyle;
-  sheetHeader?: ViewStyle;
-  flex?: ViewStyle;
-  textCenter?: TextStyle;
-  sheetDismissIconWrapper?: ViewStyle;
-  sheetActionWrapper?: ViewStyle;
-  largeIconContainer?: ViewStyle;
-  largeIconAbsoluteWrapper?: ViewStyle;
-}
-
-export const getStyle = () => {
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.flex = {
-    flex: 1,
-  };
-
-  computedStyle.overlay = {
-    flex: 1,
-    justifyContent: 'flex-end',
-  };
-
-  computedStyle.container = {
-    backgroundColor: Palettes.white[50],
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    borderTopEndRadius: Spacing[16],
-    borderTopStartRadius: Spacing[16],
-  };
-
-  computedStyle.sliderIndicator = {
-    height: 5,
-    width: 100,
-    borderRadius: Radius.full,
-    backgroundColor: Palettes.grey[100],
-  };
-
-  computedStyle.sheetIndicatorWrapper = {
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
-
-  computedStyle.sheetHeader = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  };
-
-  computedStyle.sheetHeaderWrapper = {
-    paddingHorizontal: Spacing[16],
-    paddingBottom: Spacing[8],
-  };
-  computedStyle.sheetDismissIconWrapper = {
-    padding: 4,
-  };
-  computedStyle.sheetActionWrapper = {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  };
-
-  computedStyle.textCenter = {
-    textAlign: 'center',
-  };
-
-  computedStyle.largeIconContainer = {
-    alignItems: 'center',
-  };
-
-  computedStyle.largeIconAbsoluteWrapper = {
-    position: 'absolute',
-    bottom: 0,
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { ViewStyle, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  overlay?: ViewStyle;
+  container?: ViewStyle;
+  overlayColor?: ViewStyle;
+  sliderIndicatorRow?: ViewStyle;
+  sliderIndicator?: ViewStyle;
+  sheetIndicatorWrapper?: ViewStyle;
+  sheetHeaderWrapper?: ViewStyle;
+  sheetHeader?: ViewStyle;
+  flex?: ViewStyle;
+  textCenter?: TextStyle;
+  sheetDismissIconWrapper?: ViewStyle;
+  sheetActionWrapper?: ViewStyle;
+  largeIconContainer?: ViewStyle;
+  largeIconAbsoluteWrapper?: ViewStyle;
+  subtitleText?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.flex = {
+    flex: 1,
+  };
+
+  computedStyle.overlay = {
+    flex: 1,
+    justifyContent: 'flex-end',
+  };
+
+  computedStyle.container = {
+    backgroundColor: Palettes.white[50],
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    borderTopEndRadius: Spacing[16],
+    borderTopStartRadius: Spacing[16],
+  };
+
+  computedStyle.sliderIndicator = {
+    height: 5,
+    width: 100,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.grey[100],
+  };
+
+  computedStyle.sheetIndicatorWrapper = {
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  computedStyle.sheetHeader = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  computedStyle.sheetHeaderWrapper = {
+    paddingHorizontal: Spacing[16],
+    paddingBottom: Spacing[8],
+  };
+  computedStyle.sheetDismissIconWrapper = {
+    padding: 4,
+    position: 'absolute',
+    left: 0,
+    zIndex: 99,
+  };
+  computedStyle.sheetActionWrapper = {
+    justifyContent: 'flex-end',
+    position: 'absolute',
+    right: 0,
+  };
+
+  computedStyle.textCenter = {
+    textAlign: 'center',
+  };
+
+  computedStyle.largeIconContainer = {
+    alignItems: 'center',
+  };
+
+  computedStyle.largeIconAbsoluteWrapper = {
+    position: 'absolute',
+    bottom: 0,
+  };
+
+  computedStyle.subtitleText = {
+    marginTop: Spacing[8],
+  };
+
+  return StyleSheet.create(computedStyle);
+};