@adiraku/react-native-ui 0.2.1 → 0.2.3

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

@@ -1,228 +1,228 @@
-import * as React from 'react';
-import {
-  Animated,
-  Dimensions,
-  PanResponder,
-  Modal,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-
-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 BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
-  (props, ref) => {
-    const {
-      onDismiss,
-      title,
-      titleProps = {},
-      subtitle,
-      subtitleProps = {},
-      isOverlayDismissDisabled = false,
-      dismissIcon = null,
-      dismissIconProps = {},
-      action = null,
-      largeIcon = null,
-      largeIconContainerHeight = 50,
-      animationType = 'slide',
-      children,
-    } = props;
-    const screenHeight = Dimensions.get('screen').height;
-    const screenWidth = Dimensions.get('screen').width;
-    const panY = React.useRef(new Animated.Value(screenHeight)).current;
-
-    const [visibility, setVisibility] = React.useState(false);
-
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return {
-          open() {
-            setVisibility(true);
-          },
-          close() {
-            setVisibility(false);
-          },
-        };
-      },
-      []
-    );
-
-    const computedStyle = getStyle();
-
-    const resetPositionAnim = Animated.timing(panY, {
-      toValue: 0,
-      duration: 300,
-      useNativeDriver: true,
-    });
-
-    const closeAnim = Animated.timing(panY, {
-      toValue: screenHeight,
-      duration: 300,
-      useNativeDriver: true,
-    });
-
-    const translateY = panY.interpolate({
-      inputRange: [-1, 0, 1],
-      outputRange: [0, 0, 1],
-    });
-
-    const handleDismiss = () => {
-      setVisibility(false);
-      closeAnim.start(onDismiss);
-    };
-
-    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 = () => {
-      return (
-        <View style={[computedStyle.sheetHeaderWrapper]}>
-          <View style={[computedStyle.sheetHeader]}>
-            <View
-              style={[
-                {
-                  maxWidth: ((screenWidth - 32) / 8) * 2,
-                  minWidth: ((screenWidth - 32) / 8) * 2,
-                },
-              ]}
-            >
-              {!!dismissIcon && (
-                <TouchableHighlight
-                  onPress={handleDismiss}
-                  style={[computedStyle.sheetDismissIconWrapper]}
-                  underlayColor={'transparent'}
-                  {...dismissIconProps}
-                >
-                  {dismissIcon}
-                </TouchableHighlight>
-              )}
-            </View>
-            <View
-              style={[
-                {
-                  maxWidth: ((screenWidth - 32) / 8) * 4,
-                  minWidth: ((screenWidth - 32) / 8) * 4,
-                },
-              ]}
-            >
-              {!!title && (
-                <Typography
-                  variant="subtitle1"
-                  style={[computedStyle.textCenter]}
-                  numberOfLines={2}
-                  {...titleProps}
-                >
-                  {title}
-                </Typography>
-              )}
-            </View>
-            <View
-              style={[
-                {
-                  maxWidth: ((screenWidth - 32) / 8) * 2,
-                  minWidth: ((screenWidth - 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>
-        </View>
-      );
-    };
-
-    return (
-      <Modal
-        animated
-        animationType={animationType}
-        visible={visibility}
-        transparent
-        onRequestClose={handleDismiss}
-      >
-        <View style={[computedStyle.flex, computedStyle.overlayColor]}>
-          <TouchableWithoutFeedback
-            onPress={handleDismiss}
-            disabled={isOverlayDismissDisabled}
-          >
-            <View style={[computedStyle.overlay]} />
-          </TouchableWithoutFeedback>
-          <Animated.View
-            style={{
-              ...computedStyle.container,
-              transform: [{ translateY: translateY }],
-            }}
-          >
-            <View>
-              <View
-                style={[computedStyle.sheetIndicatorWrapper]}
-                {...panResponders.panHandlers}
-              >
-                {!largeIcon && <View style={computedStyle.sliderIndicator} />}
-              </View>
-              {largeIcon ? renderLargeIconComponent() : renderSheetHeader()}
-            </View>
-
-            {children}
-          </Animated.View>
-        </View>
-      </Modal>
-    );
-  }
-);
-
-export { BottomSheet };
+import * as React from 'react';
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  Modal,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+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 BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
+  (props, ref) => {
+    const {
+      onDismiss,
+      title,
+      titleProps = {},
+      subtitle,
+      subtitleProps = {},
+      isOverlayDismissDisabled = false,
+      dismissIcon = null,
+      dismissIconProps = {},
+      action = null,
+      largeIcon = null,
+      largeIconContainerHeight = 50,
+      animationType = 'slide',
+      children,
+    } = props;
+    const screenHeight = Dimensions.get('screen').height;
+    const screenWidth = Dimensions.get('screen').width;
+    const panY = React.useRef(new Animated.Value(screenHeight)).current;
+
+    const [visibility, setVisibility] = React.useState(false);
+
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return {
+          open() {
+            setVisibility(true);
+          },
+          close() {
+            setVisibility(false);
+          },
+        };
+      },
+      []
+    );
+
+    const computedStyle = getStyle();
+
+    const resetPositionAnim = Animated.timing(panY, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    });
+
+    const closeAnim = Animated.timing(panY, {
+      toValue: screenHeight,
+      duration: 300,
+      useNativeDriver: true,
+    });
+
+    const translateY = panY.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [0, 0, 1],
+    });
+
+    const handleDismiss = () => {
+      setVisibility(false);
+      closeAnim.start(onDismiss);
+    };
+
+    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 = () => {
+      return (
+        <View style={[computedStyle.sheetHeaderWrapper]}>
+          <View style={[computedStyle.sheetHeader]}>
+            <View
+              style={[
+                {
+                  maxWidth: ((screenWidth - 32) / 8) * 2,
+                  minWidth: ((screenWidth - 32) / 8) * 2,
+                },
+              ]}
+            >
+              {!!dismissIcon && (
+                <TouchableHighlight
+                  onPress={handleDismiss}
+                  style={[computedStyle.sheetDismissIconWrapper]}
+                  underlayColor={'transparent'}
+                  {...dismissIconProps}
+                >
+                  {dismissIcon}
+                </TouchableHighlight>
+              )}
+            </View>
+            <View
+              style={[
+                {
+                  maxWidth: ((screenWidth - 32) / 8) * 4,
+                  minWidth: ((screenWidth - 32) / 8) * 4,
+                },
+              ]}
+            >
+              {!!title && (
+                <Typography
+                  variant="subtitle1"
+                  style={[computedStyle.textCenter]}
+                  numberOfLines={2}
+                  {...titleProps}
+                >
+                  {title}
+                </Typography>
+              )}
+            </View>
+            <View
+              style={[
+                {
+                  maxWidth: ((screenWidth - 32) / 8) * 2,
+                  minWidth: ((screenWidth - 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>
+        </View>
+      );
+    };
+
+    return (
+      <Modal
+        animated
+        animationType={animationType}
+        visible={visibility}
+        transparent
+        onRequestClose={handleDismiss}
+      >
+        <View style={[computedStyle.flex, computedStyle.overlayColor]}>
+          <TouchableWithoutFeedback
+            onPress={handleDismiss}
+            disabled={isOverlayDismissDisabled}
+          >
+            <View style={[computedStyle.overlay]} />
+          </TouchableWithoutFeedback>
+          <Animated.View
+            style={{
+              ...computedStyle.container,
+              transform: [{ translateY: translateY }],
+            }}
+          >
+            <View>
+              <View
+                style={[computedStyle.sheetIndicatorWrapper]}
+                {...panResponders.panHandlers}
+              >
+                {!largeIcon && <View style={computedStyle.sliderIndicator} />}
+              </View>
+              {largeIcon ? renderLargeIconComponent() : renderSheetHeader()}
+            </View>
+
+            {children}
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+export { BottomSheet };

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

@@ -1,88 +1,88 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-import { Dimensions, StyleSheet } from 'react-native';
-
-import { Palettes, Radius, Spacing } from '../../../src/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.overlayColor = {
-    backgroundColor: 'rgba(0,0,0,0.2)',
-  };
-
-  computedStyle.container = {
-    maxHeight: (Dimensions.get('window').height / 8) * 7,
-    borderTopRightRadius: Radius[16],
-    borderTopLeftRadius: Radius[16],
-    backgroundColor: Palettes.whiteDark[50],
-  };
-  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],
-  };
-  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 { Dimensions, StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../../src/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.overlayColor = {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+  };
+
+  computedStyle.container = {
+    maxHeight: (Dimensions.get('window').height / 8) * 7,
+    borderTopRightRadius: Radius[16],
+    borderTopLeftRadius: Radius[16],
+    backgroundColor: Palettes.whiteDark[50],
+  };
+  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],
+  };
+  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);
+};