@shoutem/ui 5.2.2 → 5.2.3

package/components/Button.js

@@ -5,12 +5,12 @@ import { connectStyle } from '@shoutem/theme';
 
 class Button extends PureComponent {
   render() {
-    const { style, ...otherProps } = this.props;
+    const { style } = this.props;
     const { underlayColor, ...otherStyle } = style;
 
     return (
       <TouchableOpacity
-        {...otherProps}
+        {...this.props}
         style={otherStyle}
         underlayColor={underlayColor}
       />

package/components/Icon/assets/delete.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82322 3.82322C9.87011 3.77634 9.9337 3.75 10 3.75H14C14.0663 3.75 14.1299 3.77634 14.1768 3.82322C14.2237 3.87011 14.25 3.9337 14.25 4V6.25H9.75V4C9.75 3.9337 9.77634 3.87011 9.82322 3.82322ZM8.25 6.25V4C8.25 3.53587 8.43437 3.09075 8.76256 2.76256C9.09075 2.43437 9.53587 2.25 10 2.25H14C14.4641 2.25 14.9092 2.43437 15.2374 2.76256C15.5656 3.09075 15.75 3.53587 15.75 4V6.25H18.9912H19.0071H20C20.4142 6.25 20.75 6.58579 20.75 7C20.75 7.41421 20.4142 7.75 20 7.75H19.6901L18.7498 19.0337C18.741 19.7508 18.4523 20.4368 17.9445 20.9445C17.4288 21.4603 16.7293 21.75 16 21.75H8C7.27065 21.75 6.57118 21.4603 6.05546 20.9445C5.54767 20.4368 5.25898 19.7508 5.25021 19.0337L4.3099 7.75H4C3.58579 7.75 3.25 7.41421 3.25 7C3.25 6.58579 3.58579 6.25 4 6.25H4.9929H5.00877H8.25ZM15 7.75H9H5.8151L6.74741 18.9377C6.74914 18.9584 6.75 18.9792 6.75 19C6.75 19.3315 6.8817 19.6495 7.11612 19.8839C7.35054 20.1183 7.66848 20.25 8 20.25H16C16.3315 20.25 16.6495 20.1183 16.8839 19.8839C17.1183 19.6495 17.25 19.3315 17.25 19C17.25 18.9792 17.2509 18.9584 17.2526 18.9377L18.1849 7.75H15ZM10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V17C10.75 17.4142 10.4142 17.75 10 17.75C9.58579 17.75 9.25 17.4142 9.25 17V11C9.25 10.5858 9.58579 10.25 10 10.25ZM14.75 11C14.75 10.5858 14.4142 10.25 14 10.25C13.5858 10.25 13.25 10.5858 13.25 11V17C13.25 17.4142 13.5858 17.75 14 17.75C14.4142 17.75 14.75 17.4142 14.75 17V11Z" fill="black"/>
+</svg>

package/components/Icon/assets/index.js

@@ -23,6 +23,7 @@ import close from './close.svg';
 import comment from './comment.svg';
 import comments from './comments.svg';
 import deals from './deals.svg';
+import deleteIcon from './delete.svg';
 import directions from './directions.svg';
 import downArrow from './down-arrow.svg';
 import download from './download.svg';
@@ -38,10 +39,10 @@ import eyeCrossed from './eye-crossed.svg';
 import facebook from './facebook.svg';
 import facebookLogo from './facebook-logo.svg';
 import folder from './folder.svg';
+import forward from './forward.svg';
 import forward5 from './forward-5.svg';
 import forward10 from './forward-10.svg';
 import forward30 from './forward-30.svg';
-import forward from './forward.svg';
 import friends from './friends.svg';
 import gallery from './gallery.svg';
 import garbageCan from './garbage-can.svg';
@@ -83,10 +84,10 @@ import radiobuttonOff from './radiobutton-off.svg';
 import radiobuttonOn from './radiobutton-on.svg';
 import receipt from './receipt.svg';
 import refresh from './refresh.svg';
+import replay from './replay.svg';
 import replay5 from './replay-5.svg';
 import replay10 from './replay-10.svg';
 import replay30 from './replay-30.svg';
-import replay from './replay.svg';
 import restaurant from './restaurant.svg';
 import restaurantMenu from './restaurant-menu.svg';
 import restore from './restore.svg';
@@ -97,8 +98,8 @@ import search from './search.svg';
 import settings from './settings.svg';
 import share from './share.svg';
 import shareAndroid from './share-android.svg';
-import sleep from './sleep.svg';
 import sidebar from './sidebar.svg';
+import sleep from './sleep.svg';
 import socialWall from './social-wall.svg';
 import stamp from './stamp.svg';
 import stop from './stop.svg';
@@ -142,6 +143,7 @@ export const defaultConfig = [
   { name: 'comment', icon: comment },
   { name: 'comments', icon: comments },
   { name: 'deals', icon: deals },
+  { name: 'delete', icon: deleteIcon },
   { name: 'directions', icon: directions },
   { name: 'down-arrow', icon: downArrow },
   { name: 'download', icon: download },

package/components/ImagePreview.js

@@ -8,9 +8,6 @@ import Icon from './Icon/Icon';
 
 const ZoomableImage = makeZoomable(Image);
 
-const CLOSE_ICON_NAME = 'clear';
-const CLOSE_ICON_SIZE = 25;
-
 /**
  * Renders an ImagePreview which shows an inline image preview.
  * When clicked, the image is displayed in full screen.

package/components/Lightbox.js

@@ -1,4 +1,4 @@
-import { default as Lightbox } from 'react-native-lightbox';
+import Lightbox from 'react-native-lightbox';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 

package/components/ScrollView/ScrollView.js

@@ -64,16 +64,18 @@ class ScrollView extends PureComponent {
   }
 
   addIphoneXPadding(style) {
-    if (typeof style.paddingBottom !== 'number') {
-      style.paddingBottom = 0;
+    const resolvedStyle = { ...style };
+
+    if (typeof resolvedStyle.paddingBottom !== 'number') {
+      resolvedStyle.paddingBottom = 0;
     }
 
-    style.paddingBottom = Device.select({
-      iPhoneX: style.paddingBottom + IPHONE_X_HOME_INDICATOR_PADDING,
-      default: style.paddingBottom,
+    resolvedStyle.paddingBottom = Device.select({
+      iPhoneX: resolvedStyle.paddingBottom + IPHONE_X_HOME_INDICATOR_PADDING,
+      default: resolvedStyle.paddingBottom,
     });
 
-    return style;
+    return resolvedStyle;
   }
 
   render() {

package/components/TextInput.js

@@ -81,7 +81,9 @@ class TextInput extends PureComponent {
           />
         </Wiggle>
         {!!errorMessage && (
-          <Caption styleName="form-error sm-gutter-top" style={errorText}>{errorMessage}</Caption>
+          <Caption styleName="form-error sm-gutter-top" style={errorText}>
+            {errorMessage}
+          </Caption>
         )}
       </View>
     );

package/components/Touchable.js

@@ -13,13 +13,13 @@ import { View } from './View';
  */
 class Touchable extends PureComponent {
   render() {
-    const { children, style, styleName, ...otherProps } = this.props;
+    const { children, style, styleName } = this.props;
     const { touchableNativeFeedback, touchableOpacity, ...otherStyle } = style;
 
     if (Platform.OS === 'android') {
       return (
         <TouchableNativeFeedback
-          {...otherProps}
+          {...this.props}
           style={touchableNativeFeedback}
         >
           <View virtual style={otherStyle} styleName={styleName}>
@@ -31,7 +31,7 @@ class Touchable extends PureComponent {
 
     return (
       <TouchableOpacity
-        {...otherProps}
+        {...this.props}
         style={{
           ...otherStyle,
           ...touchableOpacity,

package/components/TouchableNativeFeedback.js

@@ -5,12 +5,12 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableNativeFeedback extends PureComponent {
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { background, useForeground, ...otherStyle } = style;
 
     return (
       <RNTouchableNativeFeedback
-        {...otherProps}
+        {...this.props}
         style={otherStyle}
         background={background}
         useForeground={useForeground}

package/components/TouchableOpacity.js

@@ -4,12 +4,12 @@ import { connectStyle } from '@shoutem/theme';
 
 class TouchableOpacity extends PureComponent {
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { activeOpacity, ...otherStyle } = style;
 
     return (
       <RNTouchableOpacity
-        {...otherProps}
+        {...this.props}
         style={otherStyle}
         activeOpacity={activeOpacity}
       >

package/components/View.js

@@ -7,21 +7,18 @@ import { LinearGradient } from './LinearGradient';
 
 class View extends PureComponent {
   render() {
-    const { children, style, ...otherProps } = this.props;
+    const { children, style } = this.props;
     const { backgroundGradient, ...viewStyle } = style;
 
     let gradient = null;
     if (backgroundGradient) {
       gradient = (
-        <LinearGradient
-          styleName="fill-parent"
-          style={style.backgroundGradient}
-        />
+        <LinearGradient styleName="fill-parent" style={backgroundGradient} />
       );
     }
 
     return (
-      <RNView {...otherProps} style={viewStyle}>
+      <RNView {...this.props} style={viewStyle}>
         {gradient}
         {children}
       </RNView>

package/package.json

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