@shoutem/ui 7.1.0-beta.0 → 7.1.0-beta.10

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/components/EmptyListImage.js

@@ -37,9 +37,15 @@ class EmptyListImage extends PureComponent {
     } = this.props;
     const EmptyStateImage = this.resolveImage();
 
+    // SVG cannot receive array of style elements on Web
+    const resolvedStyle = {
+      ...style.image,
+      ...imageStyle,
+    };
+
     return (
       <View styleName="vertical h-center ">
-        <EmptyStateImage style={[style.image, imageStyle]} />
+        <EmptyStateImage style={resolvedStyle} />
         <Title styleName="title" style={[style.title, titleStyle]}>
           {title}
         </Title>

package/components/HorizontalPager/HorizontalPager.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { InteractionManager, LayoutAnimation, ScrollView } from 'react-native';
+import { InteractionManager, LayoutAnimation, ScrollView, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -219,7 +219,14 @@ class HorizontalPager extends PureComponent {
       );
 
       return (
-        <View key={pageIndex} style={{ width: containerWidth }}>
+        <View
+          key={pageIndex}
+          style={{ 
+            width: containerWidth, 
+            ...(Platform.OS === 'web' && {
+              height: '100%',
+            })
+          }}>
           {pageContent}
         </View>
       );

package/components/ImagePreview.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Image, Modal, TouchableOpacity, View } from 'react-native';
+import { ImagePropTypes } from 'deprecated-react-native-prop-types';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
 import { makeZoomable } from '@shoutem/animation';
@@ -84,7 +85,7 @@ class ImagePreview extends PureComponent {
 ImagePreview.propTypes = {
   style: PropTypes.object.isRequired,
   height: PropTypes.number,
-  source: Image.propTypes.source,
+  source: ImagePropTypes.source,
   width: PropTypes.number,
 };
 

package/components/ListView.js

@@ -7,6 +7,7 @@ import {
   StatusBar,
   View,
 } from 'react-native';
+import { RefreshControl as WebRefreshControl } from 'react-native-web-refresh-control';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -37,15 +38,18 @@ class ListView extends PureComponent {
   static getDerivedStateFromProps(props, state) {
     const isLoading = props.loading;
 
-    if (isLoading) {
-      if (state.status !== Status.IDLE) {
-        // We are already in a loading status
-        return state;
-      }
-
+    // If data is loading but no status updates were triggered, set status to loading.
+    if (isLoading && state.status === Status.IDLE) {
       return { status: Status.LOADING };
     }
-    return { status: Status.IDLE };
+
+    // If loading is done, set status back to idle.
+    if (!isLoading && state.status === Status.LOADING) {
+      return { status: Status.IDLE}
+    }
+
+    // Return all other statuses as they are.
+    return { status: state.status ?? Status.IDLE };
   }
 
   constructor(props, context) {
@@ -78,6 +82,14 @@ class ListView extends PureComponent {
 
     if (onRefresh) {
       onRefresh();
+
+      // Adding timeout, until onRefresh becomes async function. Then, we'll be able to know when
+      // refresh is done and set status back to idle.
+      setTimeout(() => {
+        this.setState({
+          status: Status.IDLE,
+        });
+      }, 500);
     }
   }
 
@@ -302,6 +314,17 @@ class ListView extends PureComponent {
     };
     delete refreshControlStyle.tintColor;
 
+    if (Platform.OS === 'web') {
+      return (
+        <WebRefreshControl
+          onRefresh={this.onRefresh}
+          refreshing={status === Status.REFRESHING}
+          tintColor={style.refreshControl.tintColor}
+          style={refreshControlStyle}
+        />
+      );
+    }
+
     return (
       <RefreshControl
         onRefresh={this.onRefresh}

package/components/ShareButton.js

@@ -3,6 +3,7 @@ import { Platform, Share } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { unavailableInWeb } from '../services';
 import { Button } from './Button';
 import { Icon } from './Icon';
 
@@ -41,7 +42,7 @@ class ShareButton extends PureComponent {
     }
 
     return (
-      <Button onPress={this.onShare} {...otherProps}>
+      <Button onPress={unavailableInWeb(this.onShare)} {...otherProps}>
         <Icon
           name={Platform.OS === 'ios' ? 'share' : 'share-android'}
           animationName={animationName}

package/components/TextInput.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { forwardRef, PureComponent } from 'react';
-import { TextInput as RNTextInput } from 'react-native';
+import { TextInput as RNTextInput, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import { TextInputPropTypes } from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
@@ -60,14 +60,16 @@ class TextInput extends PureComponent {
       withoutBorder,
       wiggleAnimation,
       errorText,
+      height,
       ...otherStyle
     } = style;
 
+    const containerStyle = Platform.OS === "web" ? { height } : undefined;
     const hasBorder = (isFocused && highlightOnFocus) || !!errorMessage;
     const startErrorAnimation = animate && !!errorMessage;
 
     return (
-      <View>
+      <View style={containerStyle}>
         <Wiggle style={wiggleAnimation} startAnimation={startErrorAnimation}>
           <RNTextInput
             {...otherProps}
@@ -80,6 +82,7 @@ class TextInput extends PureComponent {
               ...(hasBorder ? withBorder : withoutBorder),
               ...(errorMessage ? errorBorderColor : {}),
               ...otherStyle,
+              height: 50,
             }}
             ref={forwardedRef}
           />

package/components/Video/Video.js

@@ -44,7 +44,7 @@ class Video extends PureComponent {
   }
 
   render() {
-    const { width, height, style, poster } = this.props;
+    const { width, height = '100%', style, poster } = this.props;
 
     return (
       <View style={style.container}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.0",
+  "version": "7.1.0-beta.10",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -15,7 +15,7 @@
     "@native-html/table-plugin": "5.3.1",
     "@openspacelabs/react-native-zoomable-view": "2.0.4",
     "@react-native-community/datetimepicker": "6.2.0",
-    "@shoutem/animation": "~0.15.0",
+    "@shoutem/animation": "0.17.0-beta.0",
     "@shoutem/eslint-config-react": "~1.0.6",
     "@shoutem/theme": "~0.13.2",
     "auto-bind": "4.0.0",
@@ -35,18 +35,21 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-modal": "13.0.1",
     "react-native-render-html": "6.3.4",
-    "react-native-svg": "12.3.0",
+    "react-native-svg": "15.4.0",
     "react-native-svg-transformer": "1.3.0",
     "react-native-toast-message": "2.1.5",
     "react-native-vimeo-iframe": "^1.2.1",
+    "react-native-web-refresh-control": "1.1.2",
     "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/services/index.js

@@ -1,6 +1,8 @@
+export { isAndroid, isIos, isWeb } from './platform';
+export { unavailableInWeb } from './unavailableInWeb';
 export {
-  ThemeVariableResolver,
+  createScopedResolver,
   defaultResolver,
   resolveVariable,
-  createScopedResolver,
+  ThemeVariableResolver,
 } from './variableResolver';

package/services/platform.js

@@ -0,0 +1,5 @@
+import { Platform } from 'react-native';
+
+export const isAndroid = Platform.OS === 'android';
+export const isIos = Platform.OS === 'ios';
+export const isWeb = Platform.OS === 'web';

package/services/unavailableInWeb.js

@@ -0,0 +1,29 @@
+import { Platform } from 'react-native';
+import { Toast } from '@shoutem/ui';
+import _ from 'lodash';
+
+const isWeb = Platform.OS === 'web';
+
+export const unavailableInWeb = callback => {
+  if (!isWeb) {
+    return callback;
+  }
+
+  // If callback is undefined, show toast immediatelly.
+  if (_.isUndefined(callback)) {
+    Toast.showInfo({
+      title: 'Feature currently unavailable',
+      message:
+        'This feature is currently unavailable in Web Preview. For better preview experience download Disclose app.',
+    });
+  }
+
+  // Otherwise, return callback to be executed on user action.
+
+  return () =>
+    Toast.showInfo({
+      title: 'Feature currently unavailable',
+      message:
+        'This feature is currently unavailable in Web Preview. For better preview experience download Disclose app.',
+    });
+};

package/theme.js

@@ -1,4 +1,4 @@
-import { Dimensions, Platform, StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import {
   changeColorAlpha,
   createSharedStyle,
@@ -16,7 +16,7 @@ import {
   STATUS_BAR_OFFSET,
 } from './const';
 import { Device } from './helpers';
-import { resolveVariable } from './services';
+import { isAndroid, isIos, resolveVariable } from './services';
 
 const window = Dimensions.get('window');
 
@@ -72,7 +72,7 @@ export function resolveFontFamily(
   fontWeight = 'normal',
   fontStyle = 'normal',
 ) {
-  if (Platform.OS === 'ios') {
+  if (!isAndroid) {
     return fontName;
   }
 
@@ -103,22 +103,22 @@ export function resolveFontFamily(
 // being provided to fontWeight will cause the default system font to be used, so we conditionally
 // resolve it.
 export function resolveFontWeight(fontWeight) {
-  if (Platform.OS === 'ios') {
-    return fontWeight;
+  if (isAndroid) {
+    return 'normal';
   }
 
-  return 'normal';
+  return fontWeight;
 }
 
 // Currently, resolveFontFamily will provide fontStyle styling, but any value other than 'normal'
 // being provided to fontStyle will cause the default system font to be used, so we conditionally
 // resolve it.
 export function resolveFontStyle(fontStyle) {
-  if (Platform.OS === 'ios') {
-    return fontStyle;
+  if (isAndroid) {
+    return 'normal';
   }
 
-  return 'normal';
+  return fontStyle;
 }
 
 // This function is deprecated and replaced with calculateLineHeight.
@@ -1819,7 +1819,7 @@ export default () => {
         top: Device.select({
           iPhoneX: 6,
           iPhoneXR: 8,
-          default: Platform.OS === 'android' ? 0 : -4,
+          default: isAndroid ? 0 : -4,
         }),
         left: 0,
         right: 0,
@@ -2427,7 +2427,7 @@ export default () => {
       number: {
         // Font should be monospace so that item content has same offset
         // Can not apply width to the Text for some reason
-        fontFamily: Platform.OS === 'ios' ? 'Menlo-Regular' : 'monospace',
+        fontFamily: isIos ? 'Menlo-Regular' : 'monospace',
         fontSize: 12,
       },
       bullet: {},
@@ -2475,8 +2475,7 @@ export default () => {
     'shoutem.ui.Video': {
       container: {
         backgroundColor: resolveVariable('paperColor'),
-        flex: 1,
-        height: 240,
+        height: responsiveHeight(240),
       },
     },
 
@@ -2714,13 +2713,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 +2737,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

@@ -0,0 +1,69 @@
+.alert-container {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  font-size: 15px;
+}
+
+.alert-popup {
+  border-radius: 18px;
+  padding-bottom: 0px;
+  overflow: hidden;
+}
+
+.alert-title {
+  color: black;
+  font-size: 20px;
+  margin-top: 10px;
+  margin-bottom: -10px;
+}
+
+.alert-actions {
+  border-top: 1px solid #DEDEDE;
+  margin: 20px 0px 0px 0px;
+}
+
+.alert-confirm {
+  color: cornflowerblue;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.alert-cancel {
+  color: cornflowerblue;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.alert-deny {
+  color: red;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.half-width {
+  width: 50%;
+}
+
+.button-height {
+  height: 50px;
+}
+
+.border-right {
+  border-right: 1px solid #DEDEDE;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #DEDEDE;
+}