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

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/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.6",
+  "version": "7.1.0-beta.8",
   "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,10 +35,11 @@
     "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",

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

@@ -2475,8 +2475,7 @@ export default () => {
     'shoutem.ui.Video': {
       container: {
         backgroundColor: resolveVariable('paperColor'),
-        flex: 1,
-        height: 240,
+        height: responsiveHeight(240),
       },
     },