@shoutem/ui 6.4.3 → 6.5.0-rc.0

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/SvgIcons/SkipTrackIcon.js

@@ -0,0 +1,49 @@
+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 };

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';
@@ -60,6 +61,7 @@ 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.4.3",
+  "version": "6.5.0-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -3225,5 +3225,29 @@ 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),
+      },
+    },
+    'shoutem.ui.SkipTrackIcon': {
+      rotated: { transform: [{ rotate: '180deg' }] },
+      icon: {
+        size: responsiveHeight(24),
+        color: '#FFF',
+        strokeWidth: 2,
+        triangleHeight: responsiveHeight(16),
+        triangleWidth: responsiveWidth(12),
+      },
+    },
   };
 };