@shoutem/ui 6.5.0-rc.0 → 6.5.0-rc.1

package/components/Icon/assets/index.js

@@ -79,6 +79,7 @@ import pause from './pause.svg';
 import photo from './photo.svg';
 import pin from './pin.svg';
 import play from './play.svg';
+import playlistPlay from './playlist-play.svg';
 import plusButton from './plus-button.svg';
 import podcasts from './podcasts.svg';
 import products from './products.svg';
@@ -102,6 +103,7 @@ import settings from './settings.svg';
 import share from './share.svg';
 import shareAndroid from './share-android.svg';
 import sidebar from './sidebar.svg';
+import skipNext from './skip-next.svg';
 import sleep from './sleep.svg';
 import socialWall from './social-wall.svg';
 import stamp from './stamp.svg';
@@ -202,6 +204,7 @@ export const defaultConfig = [
   { name: 'photo', icon: photo },
   { name: 'pin', icon: pin },
   { name: 'play', icon: play },
+  { name: 'playlist-play', icon: playlistPlay },
   { name: 'plus-button', icon: plusButton },
   { name: 'podcasts', icon: podcasts },
   { name: 'products', icon: products },
@@ -225,6 +228,7 @@ export const defaultConfig = [
   { name: 'share', icon: share },
   { name: 'share-android', icon: shareAndroid },
   { name: 'sidebar', icon: sidebar },
+  { name: 'skip-next', icon: skipNext },
   { name: 'sleep', icon: sleep },
   { name: 'social-wall', icon: socialWall },
   { name: 'stamp', icon: stamp },

package/components/Icon/assets/playlist-play.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg enable-background="new 0 0 48 48" height="48px" id="Layer_1" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M0,0h48v48H0V0z" fill="none" id="XMLID_31_"/><g><rect height="4" id="XMLID_30_" width="24" x="8" y="20"/><rect height="4" id="XMLID_29_" width="24" x="8" y="12"/><rect height="4" id="XMLID_28_" width="16" x="8" y="28"/><polygon id="XMLID_27_" points="28,28 28,40 38,34   "/></g></g></svg>

package/components/Icon/assets/skip-next.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M12 36l17-12-17-12v24zm20-24v24h4V12h-4z"/><path d="M0 0h48v48H0z" fill="none"/></svg>

package/components/TextInput.js

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+/* eslint-disable react/no-multi-comp */
+import React, { forwardRef, PureComponent } from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import { TextInputPropTypes } from 'deprecated-react-native-prop-types';
@@ -45,6 +46,7 @@ class TextInput extends PureComponent {
       errorMessage,
       highlightOnFocus,
       style,
+      forwardedRef,
       ...otherProps
     } = this.props;
     const { isFocused } = this.state;
@@ -79,6 +81,7 @@ class TextInput extends PureComponent {
               ...(errorMessage ? errorBorderColor : {}),
               ...otherStyle,
             }}
+            ref={forwardedRef}
           />
         </Wiggle>
         {!!errorMessage && (
@@ -106,4 +109,9 @@ TextInput.defaultProps = {
 const AnimatedTextInput = connectAnimation(TextInput);
 const StyledTextInput = connectStyle('shoutem.ui.TextInput')(AnimatedTextInput);
 
-export { StyledTextInput as TextInput };
+const ForwardedTextInput = forwardRef((props, ref) => (
+  <StyledTextInput {...props} forwardedRef={ref} />
+));
+ForwardedTextInput.displayName = 'TextInput';
+
+export { ForwardedTextInput as TextInput };

package/index.js

@@ -61,7 +61,6 @@ export { ScrollView } from './components/ScrollView';
 export { SearchField } from './components/SearchField';
 export { ShareButton } from './components/ShareButton';
 export { Spinner } from './components/Spinner';
-export { SkipTrackIcon } from './components/SvgIcons/SkipTrackIcon';
 export { Switch } from './components/Switch';
 export { TabMenu } from './components/TabMenu';
 export { Caption, Heading, Subtitle, Text, Title } from './components/Text';

package/package.json

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

package/theme.js

@@ -3239,15 +3239,5 @@ export default () => {
         maxHeight: responsiveHeight(20),
       },
     },
-    'shoutem.ui.SkipTrackIcon': {
-      rotated: { transform: [{ rotate: '180deg' }] },
-      icon: {
-        size: responsiveHeight(24),
-        color: '#FFF',
-        strokeWidth: 2,
-        triangleHeight: responsiveHeight(16),
-        triangleWidth: responsiveWidth(12),
-      },
-    },
   };
 };

package/components/SvgIcons/SkipTrackIcon.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import PropTypes from 'prop-types';
-import { connectStyle } from '@shoutem/theme';
-
-const SkipTrackIcon = ({ style }) => {
-  const { container, icon = {} } = style;
-
-  const {
-    size = 0,
-    color,
-    strokeWidth = 0,
-    triangleHeight = 0,
-    triangleWidth = 0,
-  } = icon;
-
-  const halfTriangleHeight = triangleHeight / 2;
-
-  return (
-    <View style={container}>
-      <Svg width={size} height={size} viewBox="0 0 24 24">
-        <Path
-          d={`M0 ${12 -
-            halfTriangleHeight} l${triangleWidth} ${halfTriangleHeight} l-${triangleWidth} ${halfTriangleHeight} Z`}
-          fill={color}
-        />
-        <Path
-          d={`M${triangleWidth} ${12 - halfTriangleHeight} v${triangleHeight}`}
-          stroke={color}
-          strokeWidth={strokeWidth}
-        />
-      </Svg>
-    </View>
-  );
-};
-
-SkipTrackIcon.propTypes = {
-  style: PropTypes.object,
-};
-
-SkipTrackIcon.defaultProps = {
-  style: {},
-};
-
-const StyledSkipTrackIcon = connectStyle('shoutem.ui.SkipTrackIcon')(
-  SkipTrackIcon,
-);
-export { StyledSkipTrackIcon as SkipTrackIcon };