@shoutem/ui 7.1.0-beta.4 → 7.1.0-beta.6

package/components/ActionSheet/ActionSheet.js

@@ -1,183 +1,69 @@
-import React, { PureComponent } from 'react';
-import { Animated, Dimensions, TouchableOpacity } from 'react-native';
-import autoBindReact from 'auto-bind/react';
+import React, { useEffect, useMemo, useRef } from 'react';
+import ActionSheetNative from 'react-native-actions-sheet';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { IPHONE_X_HOME_INDICATOR_PADDING } from '../../const';
-import { Device } from '../../helpers';
 import { View } from '../View';
 import ActionSheetOption, { optionPropType } from './ActionSheetOption';
 
-const { height: windowHeight } = Dimensions.get('window');
-
-function getContentOffset(contentHeight = windowHeight) {
-  if (Device.isIphoneXR || Device.isIphoneX) {
-    return contentHeight + IPHONE_X_HOME_INDICATOR_PADDING;
-  }
-
-  return contentHeight;
-}
-
-const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
-
-class ActionSheet extends PureComponent {
-  static getDerivedStateFromProps(props, state) {
-    const { active } = props;
-    const { visible } = state;
-
-    if (active !== visible) {
-      return { visible: active };
+const ActionSheet = ({
+  active = false,
+  cancelOptions = undefined,
+  confirmOptions = undefined,
+  style,
+  onDismiss = undefined,
+  ...otherProps
+}) => {
+  const actionSheetRef = useRef(null);
+
+  const hasConfirmOptions = useMemo(() => !_.isEmpty(confirmOptions), [
+    confirmOptions,
+  ]);
+  const hasCancelOptions = useMemo(() => !_.isEmpty(cancelOptions), [
+    cancelOptions,
+  ]);
+
+  useEffect(() => {
+    if (active) {
+      actionSheetRef.current?.show();
+    } else {
+      actionSheetRef.current?.hide();
     }
-
-    return null;
-  }
-
-  constructor(props) {
-    super(props);
-
-    autoBindReact(this);
-
-    this.state = {
-      opacity: new Animated.Value(0),
-      yPos: new Animated.Value(0),
-      visible: false,
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const { active } = this.props;
-    const { active: prevActive } = prevProps;
-
-    if (active && !prevActive) {
-      this.handleEntryAnimation();
-    }
-
-    if (!active && prevActive) {
-      this.handleExitAnimation();
-    }
-  }
-
-  hideComponent() {
-    this.setState({ visible: false });
-  }
-
-  handleContentLayout(event) {
-    const height = _.get(event, 'nativeEvent.layout.height', 0);
-
-    this.setState({ height });
-  }
-
-  handleEntryAnimation() {
-    const { yPos, opacity } = this.state;
-
-    const toValue = 1;
-
-    Animated.parallel([
-      Animated.spring(yPos, {
-        toValue,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue,
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }
-
-  handleExitAnimation() {
-    const { yPos, opacity } = this.state;
-
-    const toValue = 0;
-
-    Animated.parallel([
-      Animated.spring(yPos, {
-        toValue,
-        useNativeDriver: true,
-      }),
-      Animated.timing(opacity, {
-        toValue,
-        delay: 100,
-        duration: 150,
-        useNativeDriver: false,
-      }),
-    ]).start(this.hideComponent);
-  }
-
-  handleInactiveAreaPress() {
-    const { onDismiss } = this.props;
-
-    if (onDismiss) {
-      onDismiss();
-    }
-  }
-
-  render() {
-    const { confirmOptions, cancelOptions, style } = this.props;
-    const { opacity, yPos, visible, height } = this.state;
-
-    const hasConfirmOptions = !_.isEmpty(confirmOptions);
-    const hasCancelOptions = !_.isEmpty(cancelOptions);
-
-    if (!visible || (!hasConfirmOptions && !hasCancelOptions)) {
-      return null;
-    }
-
-    return (
-      <AnimatedTouchable
-        activeOpacity={1}
-        onPress={this.handleInactiveAreaPress}
-        style={[
-          style.container,
-          {
-            backgroundColor: opacity.interpolate({
-              inputRange: [0, 1],
-              outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.3)'],
-            }),
-          },
-        ]}
-      >
-        <Animated.View
-          onLayout={this.handleContentLayout}
-          style={[
-            style.contentContainer,
-            {
-              transform: [
-                {
-                  translateY: yPos.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [getContentOffset(height), 0],
-                  }),
-                },
-              ],
-            },
-          ]}
-        >
-          {hasConfirmOptions && (
+  }, [active]);
+
+  return (
+    <ActionSheetNative
+      gestureEnabled
+      ref={actionSheetRef}
+      onClose={onDismiss}
+      containerStyle={style.container}
+      {...otherProps}
+    >
+      <View style={style.contentContainer}>
+        {hasConfirmOptions && (
+          <View style={style.segmentContainer}>
+            {_.map(confirmOptions, option => (
+              <ActionSheetOption key={option.title} option={option} />
+            ))}
+          </View>
+        )}
+        {hasCancelOptions && (
+          <View styleName="md-gutter-top">
             <View style={style.segmentContainer}>
-              {_.map(confirmOptions, option => (
-                <ActionSheetOption key={option.title} option={option} />
+              {_.map(cancelOptions, option => (
+                <ActionSheetOption
+                  key={option.title}
+                  cancelOption
+                  option={option}
+                />
               ))}
             </View>
-          )}
-          {hasCancelOptions && (
-            <View styleName="md-gutter-top">
-              <View style={style.segmentContainer}>
-                {_.map(cancelOptions, option => (
-                  <ActionSheetOption
-                    key={option.title}
-                    cancelOption
-                    option={option}
-                  />
-                ))}
-              </View>
-            </View>
-          )}
-        </Animated.View>
-      </AnimatedTouchable>
-    );
-  }
-}
+          </View>
+        )}
+      </View>
+    </ActionSheetNative>
+  );
+};
 
 ActionSheet.propTypes = {
   style: PropTypes.object.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.4",
+  "version": "7.1.0-beta.6",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -41,12 +41,14 @@
     "react-native-vimeo-iframe": "^1.2.1",
     "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
+    "react-native-actions-sheet": "0.9.3",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
-    "react-native": ">=0.61.5"
+    "react-native": ">=0.61.5",
+    "react-native-gesture-handler": "*"
   },
   "devDependencies": {
     "@babel/core": "7.16.7",

package/theme.js

@@ -2714,13 +2714,7 @@ export default () => {
 
     'shoutem.ui.ActionSheet': {
       container: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
+        backgroundColor: 'transparent',
       },
       contentContainer: {
         marginHorizontal: 8,
@@ -2744,10 +2738,11 @@ export default () => {
       text: {
         fontSize: 15,
         letterSpacing: 0.38,
-        color: '#000000',
+        color: resolveVariable('primaryButtonText.color'),
         lineHeight: 24,
       },
       cancelText: {
+        color: resolveVariable('errorText.color'),
         textAlign: 'center',
         fontWeight: resolveFontWeight('700'),
       },

package/web/style/Alert.scss

@@ -17,7 +17,7 @@
 }
 
 .alert-actions {
-  border-top: 1px solid #ABABAB;
+  border-top: 1px solid #DEDEDE;
   margin: 20px 0px 0px 0px;
 }
 
@@ -56,10 +56,14 @@
   width: 50%;
 }
 
-.third-width {
-  width: 33%;
+.button-height {
+  height: 50px;
 }
 
 .border-right {
-  border-right: 1px solid #ABABAB;
+  border-right: 1px solid #DEDEDE;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #DEDEDE;
 }