@shoutem/ui 6.4.3 → 6.5.0-rc.1

package/components/AnimatedScrollingText.js

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import PropTypes from 'prop-types';
+import { connectStyle } from '@shoutem/theme';
+import { ScrollView } from './ScrollView';
+import { Text } from './Text';
+
+const DEFAULT_CONFIG = {
+  animationDuration: widthDiff => Math.max(widthDiff * 50, 2000),
+  waitDuration: 2000,
+};
+
+const AnimatedScrollingText = ({ text, config, style }) => {
+  const translateX = useRef(new Animated.Value(0)).current;
+
+  const [containerWidth, setContainerWidth] = useState();
+  const [textWidth, setTextWidth] = useState();
+
+  const widthDiff = textWidth - containerWidth;
+
+  useEffect(() => {
+    let animation;
+
+    if (widthDiff > 0) {
+      animation = Animated.loop(
+        Animated.sequence([
+          // Animate scroll to the end of the text
+          Animated.timing(translateX, {
+            toValue: -widthDiff,
+            duration: config.animationDuration(widthDiff),
+            useNativeDriver: true,
+          }),
+          // Animate scroll back to start of the text
+          Animated.timing(translateX, {
+            toValue: 0,
+            duration: config.animationDuration(widthDiff),
+            useNativeDriver: true,
+          }),
+          // Wait X sec before starting animation again
+          Animated.timing(translateX, {
+            toValue: 0,
+            duration: config.waitDuration,
+            useNativeDriver: true,
+          }),
+        ]),
+      );
+
+      animation.start();
+    }
+
+    return () => animation?.stop();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [widthDiff]);
+
+  const handleContainerLayout = e => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
+  const handleTextLayout = e => {
+    setTextWidth(e.nativeEvent.layout.width);
+  };
+
+  return (
+    <ScrollView
+      onLayout={handleContainerLayout}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={style.scrollContainer}
+      contentContainerStyle={style.scrollContentContainer}
+    >
+      <Animated.View
+        style={[
+          style.textContainer,
+          widthDiff > 0 ? { transform: [{ translateX }] } : {},
+        ]}
+      >
+        <Text onLayout={handleTextLayout} style={style.text}>
+          {text}
+        </Text>
+      </Animated.View>
+    </ScrollView>
+  );
+};
+
+AnimatedScrollingText.propTypes = {
+  text: PropTypes.string.isRequired,
+  config: PropTypes.object,
+  style: PropTypes.object,
+};
+
+AnimatedScrollingText.defaultProps = {
+  config: DEFAULT_CONFIG,
+  style: {},
+};
+
+const StyledAnimatedScrollingText = connectStyle(
+  'shoutem.ui.AnimatedScrollingText',
+)(AnimatedScrollingText);
+export { StyledAnimatedScrollingText as AnimatedScrollingText };

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/components/ToastMessage/README.md

@@ -9,7 +9,7 @@ New component used for multiple types of alerts, or simple action prompts. The c
 Most of the time, you will want to use one of the four standard methods of showing a toast using this package.
 
 - Toast.showInfo
-- Toast.showAlert
+- Toast.showAction
 - Toast.showError
 - Toast.showSuccess
 
@@ -33,7 +33,7 @@ Toast.showInfo({
 ```jsx
 import { Toast } from '@shoutem/ui';
 ...
-Toast.showAlert({
+Toast.showAction({
   title: 'Stop',
   message: `Hammer time`,
   iconSource: require('../assets/actionIcon.png'),

package/index.js

@@ -25,6 +25,7 @@ export {
 
 // Components
 export { ActionSheet } from './components/ActionSheet';
+export { AnimatedScrollingText } from './components/AnimatedScrollingText';
 export { Button } from './components/Button';
 export { Card } from './components/Card';
 export { CategoryPicker } from './components/CategoryPicker';

package/package.json

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

package/theme.js

@@ -3225,5 +3225,19 @@ export default () => {
         color: '#88C242',
       },
     },
+    'shoutem.ui.AnimatedScrollingText': {
+      text: {
+        color: resolveVariable('text'),
+        fontSize: responsiveHeight(15),
+        fontWeight: resolveFontWeight('600'),
+        flexWrap: 'nowrap',
+      },
+      scrollContainer: {
+        maxHeight: responsiveHeight(20),
+      },
+      scrollContentContainer: {
+        maxHeight: responsiveHeight(20),
+      },
+    },
   };
 };