@hero-design/rn 8.4.0 → 8.5.0-alpha.0

package/src/components/Swipeable/Buttons.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+type Props = {
+  buttons?: React.ReactNode[];
+  isLeftButtons: boolean;
+  leftButtonContainerStyle?: StyleProp<ViewStyle>;
+  rightButtonContainerStyle?: StyleProp<ViewStyle>;
+  panAnimatedValue: Animated.ValueXY;
+  width: number;
+  canSwipeLeft?: boolean;
+  canSwipeRight?: boolean;
+  buttonWidth: number;
+};
+
+const Buttons = ({
+  buttons,
+  isLeftButtons,
+  leftButtonContainerStyle,
+  rightButtonContainerStyle,
+  panAnimatedValue,
+  width,
+  canSwipeLeft,
+  canSwipeRight,
+  buttonWidth,
+}: Props): JSX.Element => {
+  const count = buttons?.length ?? 0;
+  const leftEnd = canSwipeLeft ? -width : 0;
+  const rightEnd = canSwipeRight ? width : 0;
+  const inputRange = isLeftButtons ? [0, rightEnd] : [leftEnd, 0];
+
+  return (
+    <>
+      {buttons?.map((buttonContent, index) => {
+        const outputMultiplier = -index / count;
+        const outputRange = isLeftButtons
+          ? [0, rightEnd * outputMultiplier]
+          : [leftEnd * outputMultiplier, 0];
+
+        const transform = [
+          {
+            translateX: panAnimatedValue.x.interpolate({
+              inputRange,
+              outputRange,
+              extrapolate: 'clamp',
+            }),
+          },
+        ];
+        const buttonStyle = [
+          StyleSheet.absoluteFill,
+          { width: buttonWidth, transform },
+          isLeftButtons ? leftButtonContainerStyle : rightButtonContainerStyle,
+        ];
+
+        return (
+          <Animated.View key={index} style={buttonStyle}>
+            {buttonContent}
+          </Animated.View>
+        );
+      })}
+    </>
+  );
+};
+
+export default Buttons;

package/src/components/Swipeable/StyledSwipeable.tsx

@@ -1,11 +1,23 @@
 import styled from '@emotion/native';
-import { TouchableOpacity } from 'react-native';
+import { Animated, TouchableOpacity, View } from 'react-native';
 
 export type ActionIntent = 'primary' | 'success' | 'danger';
 
-export const StyledRectButton = styled(TouchableOpacity)<{
+const StyledRectButton = styled(TouchableOpacity)<{
   themeIntent: ActionIntent;
 }>(({ theme, themeIntent }) => ({
   flex: 1,
   backgroundColor: theme.__hd__.swipeable.colors[themeIntent],
+  alignItems: 'center',
+  justifyContent: 'center',
 }));
+
+const StyledWrapper = styled(View)<{}>(() => ({
+  flexDirection: 'row',
+}));
+
+const StyledContent = styled(Animated.View)<{}>(() => ({
+  flex: 1,
+}));
+
+export { StyledRectButton, StyledWrapper, StyledContent };

package/src/components/Swipeable/SwipeableAction.tsx

@@ -1,5 +1,7 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
 import { ActionIntent, StyledRectButton } from './StyledSwipeable';
 
 export interface SwipeableActionProps {
@@ -11,10 +13,6 @@ export interface SwipeableActionProps {
    * Callback when the action button is pressed.
    */
   onPress?: () => void;
-  /**
-   * Action button's content
-   */
-  children?: ReactNode;
   /**
    * Additional style.
    */
@@ -23,14 +21,23 @@ export interface SwipeableActionProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Name of the Icon.
+   */
+  icon: IconName;
+  /**
+   * Action label of the component.
+   */
+  label: string;
 }
 
 const SwipeableAction = ({
   intent = 'primary',
   onPress,
   style,
-  children,
   testID,
+  label,
+  icon,
 }: SwipeableActionProps) => (
   <StyledRectButton
     onPress={onPress}
@@ -38,7 +45,8 @@ const SwipeableAction = ({
     style={style}
     testID={testID}
   >
-    {children}
+    <Icon icon={icon} size="xsmall" />
+    <Typography.Text fontSize="small">{label}</Typography.Text>
   </StyledRectButton>
 );