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

package/components/EmptyListImage.js

@@ -38,18 +38,28 @@ class EmptyListImage extends PureComponent {
     const EmptyStateImage = this.resolveImage();
 
     // SVG cannot receive array of style elements on Web
-    const resolvedStyle = {
+    const resolvedImageStyle = {
       ...style.image,
       ...imageStyle,
     };
 
+    const resolvedTitleStyle = {
+      ...style.title,
+      ...titleStyle,
+    };
+
+    const resolvedTextStyle = {
+      ...style.message,
+      ...messageStyle,
+    };
+
     return (
       <View styleName="vertical h-center ">
-        <EmptyStateImage style={resolvedStyle} />
-        <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>
@@ -58,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.10",
+  "version": "7.1.0-beta.12",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",