@shoutem/ui 7.1.0-beta.5 → 7.1.0-beta.7

package/components/ActionSheet/ActionSheet.js

@@ -12,6 +12,7 @@ const ActionSheet = ({
   confirmOptions = undefined,
   style,
   onDismiss = undefined,
+  ...otherProps
 }) => {
   const actionSheetRef = useRef(null);
 
@@ -31,7 +32,13 @@ const ActionSheet = ({
   }, [active]);
 
   return (
-    <ActionSheetNative gestureEnabled ref={actionSheetRef} onClose={onDismiss}>
+    <ActionSheetNative
+      gestureEnabled
+      ref={actionSheetRef}
+      onClose={onDismiss}
+      containerStyle={style.container}
+      {...otherProps}
+    >
       <View style={style.contentContainer}>
         {hasConfirmOptions && (
           <View style={style.segmentContainer}>

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.5",
+  "version": "7.1.0-beta.7",
   "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",
@@ -39,9 +39,10 @@
     "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.6",
+    "react-native-actions-sheet": "0.9.3",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },

package/services/index.js

@@ -1,6 +1,7 @@
+export { unavailableInWeb } from './unavailableInWeb';
 export {
-  ThemeVariableResolver,
+  createScopedResolver,
   defaultResolver,
   resolveVariable,
-  createScopedResolver,
+  ThemeVariableResolver,
 } from './variableResolver';

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

@@ -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'),
       },