@shoutem/ui 7.1.0-beta.8 → 7.1.0

package/components/ActionSheet/ActionSheet.js

@@ -43,7 +43,11 @@ const ActionSheet = ({
         {hasConfirmOptions && (
           <View style={style.segmentContainer}>
             {_.map(confirmOptions, option => (
-              <ActionSheetOption key={option.title} option={option} />
+              <ActionSheetOption
+                key={option.title}
+                option={option}
+                style={style.option}
+              />
             ))}
           </View>
         )}
@@ -55,6 +59,7 @@ const ActionSheet = ({
                   key={option.title}
                   cancelOption
                   option={option}
+                  style={style.option}
                 />
               ))}
             </View>

package/components/ActionSheet/ActionSheetOption.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { isIos } from '../../services';
 import { Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
 
@@ -9,16 +10,24 @@ export const optionPropType = PropTypes.shape({
   onPress: PropTypes.func,
 });
 
-function ActionSheetOption({ style, option, cancelOption }) {
+function ActionSheetOption({ style, option, cancelOption, nativeStyle }) {
   const { title, onPress } = option;
 
+  const useIosTextColor = nativeStyle && isIos;
+
   return (
     <TouchableOpacity
       onPress={onPress}
       style={style.container}
       styleName="horizontal"
     >
-      <Text style={[style.text, cancelOption && style.cancelText]}>
+      <Text
+        style={[
+          style.text,
+          cancelOption && style.cancelText,
+          useIosTextColor && style.iosBlueTextColor,
+        ]}
+      >
         {title}
       </Text>
     </TouchableOpacity>
@@ -28,12 +37,14 @@ function ActionSheetOption({ style, option, cancelOption }) {
 ActionSheetOption.propTypes = {
   style: PropTypes.object.isRequired,
   cancelOption: PropTypes.bool,
+  nativeStyle: PropTypes.bool,
   option: optionPropType,
 };
 
 ActionSheetOption.defaultProps = {
   option: undefined,
   cancelOption: false,
+  nativeStyle: false,
 };
 
 export default connectStyle('shoutem.ui.ActionSheetOption')(ActionSheetOption);

package/components/EmptyListImage.js

@@ -37,13 +37,29 @@ class EmptyListImage extends PureComponent {
     } = this.props;
     const EmptyStateImage = this.resolveImage();
 
+    // SVG cannot receive array of style elements on Web
+    const resolvedImageStyle = {
+      ...style.image,
+      ...imageStyle,
+    };
+
+    const resolvedTitleStyle = {
+      ...style.title,
+      ...titleStyle,
+    };
+
+    const resolvedTextStyle = {
+      ...style.message,
+      ...messageStyle,
+    };
+
     return (
       <View styleName="vertical h-center ">
-        <EmptyStateImage style={[style.image, imageStyle]} />
-        <Title styleName="title" style={[style.title, titleStyle]}>
+        <EmptyStateImage style={resolvedImageStyle} />
+        <Title styleName="title" style={resolvedTitleStyle}>
           {title}
         </Title>
-        <Text styleName="description" style={[style.message, messageStyle]}>
+        <Text styleName="description" style={resolvedTextStyle}>
           {message}
         </Text>
       </View>
@@ -52,6 +68,7 @@ class EmptyListImage extends PureComponent {
 }
 
 EmptyListImage.propTypes = {
+  style: PropTypes.object.isRequired,
   image: PropTypes.func,
   imageStyle: PropTypes.object,
   message: PropTypes.string,

package/components/Icon/Icon.web.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { View } from '../View';
+import { getIcon } from './services';
+
+function Icon({ name, style, ...otherProps }) {
+  const { color, width, height, ...otherStyle } = style;
+
+  const NamedIcon = getIcon(name);
+
+  if (!NamedIcon) {
+    // eslint-disable-next-line no-console
+    console.warn(`Icon with name '${name}' not found within the provided set`);
+
+    return null;
+  }
+
+  return (
+    // Sometimes, in web, svg icons are not resized as expected, unless svg is wrapped inside View.
+    <View>
+      <NamedIcon
+        fill={color}
+        width={width}
+        height={height}
+        style={{ ...otherStyle }}
+        {...otherProps}
+      />
+    </View>
+  );
+}
+
+Icon.propTypes = {
+  name: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+};
+
+export default connectStyle('shoutem.ui.Icon')(Icon);

package/components/Icon/assets/index.js

@@ -83,6 +83,7 @@ import playlistPlay from './playlist-play.svg';
 import plusButton from './plus-button.svg';
 import podcasts from './podcasts.svg';
 import products from './products.svg';
+import queue from './queue.svg';
 import radio from './radio.svg';
 import radiobuttonOff from './radiobutton-off.svg';
 import radiobuttonOn from './radiobutton-on.svg';
@@ -123,6 +124,7 @@ import videoCam from './video-cam.svg';
 import videoCamOff from './video-cam-off.svg';
 import videoChat from './video-chat.svg';
 import web from './web.svg';
+import wheelchair from './wheelchair.svg';
 
 export const defaultConfig = [
   { name: 'about', icon: about },
@@ -210,6 +212,7 @@ export const defaultConfig = [
   { name: 'plus-button', icon: plusButton },
   { name: 'podcasts', icon: podcasts },
   { name: 'products', icon: products },
+  { name: 'queue', icon: queue },
   { name: 'radio', icon: radio },
   { name: 'radiobutton-off', icon: radiobuttonOff },
   { name: 'radiobutton-on', icon: radiobuttonOn },
@@ -250,4 +253,5 @@ export const defaultConfig = [
   { name: 'video-cam-off', icon: videoCamOff },
   { name: 'video-chat', icon: videoChat },
   { name: 'web', icon: web },
+  { name: 'wheelchair', icon: wheelchair },
 ];

package/components/Icon/assets/queue.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 2h20v4H0V2zm0 8h20v2H0v-2zm0 6h20v2H0v-2z"/></svg>

package/components/Icon/assets/wheelchair.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 22 24">
+<title>wheelchair</title>
+<path d="M13.701 15.897l1.366 2.732c-1.031 3.188-4.004 5.371-7.353 5.371-4.246 0-7.714-3.469-7.714-7.714 0-3.241 2.036-6.134 5.076-7.246l0.228 1.754c-2.183 0.964-3.589 3.107-3.589 5.491 0 3.308 2.692 6 6 6 3.442 0 6.228-2.946 5.987-6.388zM21.040 17.237l0.777 1.527-3.429 1.714c-0.121 0.067-0.254 0.094-0.388 0.094-0.321 0-0.629-0.188-0.763-0.469l-3.201-6.388h-6.321c-0.429 0-0.804-0.335-0.857-0.763l-1.286-10.433c-0.013-0.134 0.040-0.429 0.080-0.563 0.254-0.924 1.112-1.527 2.063-1.527 1.179 0 2.143 0.964 2.143 2.143 0 1.219-1.071 2.263-2.304 2.129l0.496 3.871h5.665v1.714h-5.451l0.214 1.714h6.094c0.321 0 0.629 0.188 0.763 0.469l3.054 6.094z"></path>
+</svg>

package/components/Switch.js

@@ -2,19 +2,29 @@ import React from 'react';
 import { Switch as RNSwitch } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import { isWeb } from '../services/platform';
 import { View } from './View';
 
-const Switch = ({ value, onValueChange, style }) => (
-  <View style={style.container}>
-    <RNSwitch
-      trackColor={style.track}
-      thumbColor={style.thumb}
-      ios_backgroundColor={style.track?.false}
-      onValueChange={onValueChange}
-      value={value}
-    />
-  </View>
-);
+const Switch = ({ value, onValueChange, style }) => {
+  const webColors = {
+    trackColor: style.track?.false,
+    activeThumbColor: style.thumb,
+    activeTrackColor: style.track.true,
+  };
+
+  return (
+    <View style={style.container}>
+      <RNSwitch
+        trackColor={isWeb ? style.track?.false : style.track}
+        thumbColor={style.thumb}
+        ios_backgroundColor={style.track?.false}
+        onValueChange={onValueChange}
+        value={value}
+        {...(isWeb && webColors)}
+      />
+    </View>
+  );
+};
 
 Switch.propTypes = {
   onValueChange: PropTypes.func.isRequired,

package/components/TextInput.js

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

package/components/ToastMessage/components/ToastProgressBar.js

@@ -12,6 +12,13 @@ function ToastProgressBar({
 }) {
   const progressValue = useRef(new Animated.Value(0)).current;
 
+  const handleAnimationEnd = useCallback(() => {
+    progressValue.setValue(0);
+    if (onProgressComplete) {
+      onProgressComplete();
+    }
+  }, [onProgressComplete, progressValue]);
+
   useEffect(() => {
     if (!visible) {
       progressValue.setValue(0);
@@ -25,13 +32,6 @@ function ToastProgressBar({
     }).start(handleAnimationEnd);
   }, [visible, duration, handleAnimationEnd]);
 
-  const handleAnimationEnd = useCallback(() => {
-    progressValue.setValue(0);
-    if (onProgressComplete) {
-      onProgressComplete();
-    }
-  }, [onProgressComplete, progressValue]);
-
   return (
     <View style={style.container}>
       <Animated.View

package/html/components/SimpleHtml.js

@@ -6,7 +6,6 @@ import { iframeModel } from '@native-html/iframe-plugin';
 import table, {
   cssRulesFromSpecs,
   defaultTableStylesSpecs,
-  IGNORED_TAGS,
   tableModel,
 } from '@native-html/table-plugin';
 import autoBindReact from 'auto-bind/react';
@@ -119,7 +118,6 @@ class SimpleHtml extends PureComponent {
         ...customHtmlElementModels,
       },
       WebView,
-      ignoredTags: IGNORED_TAGS,
       domVisitors: { onElement, ...customDomVisitors },
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.8",
+  "version": "7.1.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -15,9 +15,9 @@
     "@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.17.0-beta.0",
+    "@shoutem/animation": "0.17.0",
     "@shoutem/eslint-config-react": "~1.0.6",
-    "@shoutem/theme": "~0.13.2",
+    "@shoutem/theme": "~0.14.0",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",

package/services/index.js

@@ -1,3 +1,4 @@
+export { isAndroid, isIos, isWeb } from './platform';
 export { unavailableInWeb } from './unavailableInWeb';
 export {
   createScopedResolver,

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/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 (isIos) {
     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 (!isIos) {
+    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 (!isIos) {
+    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: {},
@@ -2733,6 +2733,7 @@ export default () => {
         paddingVertical: 16,
         borderBottomWidth: 1,
         borderColor: 'rgba(130, 130, 130, 0.1)',
+        alignItems: 'center',
       },
       text: {
         fontSize: 15,
@@ -2745,6 +2746,9 @@ export default () => {
         textAlign: 'center',
         fontWeight: resolveFontWeight('700'),
       },
+      iosBlueTextColor: {
+        color: '#007AFF',
+      },
     },
 
     //
@@ -3126,7 +3130,6 @@ export default () => {
       },
       textContainer: {
         flex: 1,
-        height: responsiveHeight(48),
         justifyContent: 'space-between',
       },
       title: {