@widergy/mobile-ui 1.31.3 → 1.32.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.32.1](https://github.com/widergy/mobile-ui/compare/v1.32.0...v1.32.1) (2024-11-15)
+
+
+### Bug Fixes
+
+* [UG-2249] disabled prop added in UTSwitch ([#388](https://github.com/widergy/mobile-ui/issues/388)) ([49181f4](https://github.com/widergy/mobile-ui/commit/49181f45b61662dbedc31c377f9b013ec4a5efa5))
+
+# [1.32.0](https://github.com/widergy/mobile-ui/compare/v1.31.3...v1.32.0) (2024-11-06)
+
+
+### Features
+
+* [UGC-924] animations ut tracker ([#386](https://github.com/widergy/mobile-ui/issues/386)) ([8032b66](https://github.com/widergy/mobile-ui/commit/8032b66d2c3712672cc7bd5391f4aac81a9a3aca))
+
 ## [1.31.3](https://github.com/widergy/mobile-ui/compare/v1.31.2...v1.31.3) (2024-11-05)
 
 

package/lib/components/UTSwitch/index.js

@@ -9,6 +9,7 @@ import ownStyles from './styles';
 import switchProptypes from './proptypes';
 
 const UTSwitch = ({
+  disabled,
   style,
   onColor,
   offColor,
@@ -96,7 +97,7 @@ const UTSwitch = ({
 
   return (
     <TouchableWithoutFeedback
-      disabled={disablePress}
+      disabled={disablePress || disabled}
       onPressIn={onClick}
       onPressOut={onClickEnd}
       hitSlop={hitSlop}
@@ -116,6 +117,7 @@ const UTSwitch = ({
               ]
             })
           },
+          disabled && ownStyles.disabled,
           style
         ]}
       >

package/lib/components/UTSwitch/proptypes.js

@@ -1,7 +1,8 @@
-import { string, func, any, shape, number } from 'prop-types';
+import { string, func, any, shape, number, bool } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 export default {
+  disabled: bool,
   style: ViewPropTypes.style,
   onColor: string,
   offColor: string,

package/lib/components/UTSwitch/styles.js

@@ -12,5 +12,8 @@ export default StyleSheet.create({
     backgroundColor: 'red',
     position: 'absolute',
     zIndex: -1
+  },
+  disabled: {
+    opacity: 0.5
   }
 });

package/lib/components/UTTracker/components/Step/components/BarMask/index.js

@@ -0,0 +1,54 @@
+import { bool, number, string } from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, View } from 'react-native';
+
+import { useTheme } from '../../../../../../theming';
+import { mergeMultipleStyles } from '../../../../../../utils/styleUtils';
+import { BAR_HEIGHT_DELAY, BAR_HEIGHT_DURATION } from '../../constants';
+
+import styles, { getVariantStyles } from './styles';
+
+const BarMask = ({ stepCompleted, height, variant }) => {
+  const theme = useTheme();
+  const ownStyles = mergeMultipleStyles(styles, getVariantStyles(theme)[variant]);
+
+  const heightAnim = useRef(new Animated.Value(0)).current;
+  const [inverted, setInverted] = useState(false);
+
+  const animateCompleted = () => {
+    Animated.sequence([
+      Animated.delay(BAR_HEIGHT_DELAY),
+      Animated.timing(heightAnim, {
+        toValue: height,
+        duration: BAR_HEIGHT_DURATION / 2,
+        useNativeDriver: false
+      }),
+      Animated.timing(heightAnim, {
+        toValue: 0,
+        duration: BAR_HEIGHT_DURATION / 2,
+        useNativeDriver: false
+      })
+    ]).start();
+    setTimeout(() => setInverted(true), BAR_HEIGHT_DELAY + BAR_HEIGHT_DURATION / 2);
+  };
+
+  useEffect(() => {
+    if (stepCompleted) animateCompleted();
+    else setInverted(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepCompleted]);
+
+  return (
+    <View style={ownStyles.container(height)}>
+      <Animated.View style={[ownStyles.barMask, inverted && ownStyles.inverted, { height: heightAnim }]} />
+    </View>
+  );
+};
+
+BarMask.propTypes = {
+  stepCompleted: bool,
+  height: number,
+  variant: string
+};
+
+export default BarMask;

package/lib/components/UTTracker/components/Step/components/BarMask/styles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../../../styles';
+import { ERROR, STANDARD } from '../../../../constants';
+
+export default StyleSheet.create({
+  container: height => ({
+    height,
+    width: OVAL_SIZE,
+    top: 20,
+    position: 'absolute',
+    flex: 1,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    zIndex: 10
+  }),
+  barMask: {
+    width: 2,
+    alignSelf: 'flex-start'
+  },
+  inverted: { alignSelf: 'flex-end' }
+});
+
+export const getVariantStyles = theme => ({
+  [ERROR]: {
+    barMask: { backgroundColor: theme.Palette.error['04'] }
+  },
+  [STANDARD]: {
+    barMask: { backgroundColor: theme.Palette.accent['04'] }
+  }
+});

package/lib/components/UTTracker/components/Step/components/StepMask/index.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated } from 'react-native';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { bool, string } from 'prop-types';
+
+import { mergeMultipleStyles } from '../../../../../../utils/styleUtils';
+import { useTheme } from '../../../../../../theming';
+import {
+  ACTIVE_STEP_HEIGHT_DELAY,
+  ACTIVE_STEP_HEIGHT_DURATION,
+  COMPLETED_STEP_HEIGHT_DELAY,
+  COMPLETED_STEP_HEIGHT_DURATION
+} from '../../constants';
+
+import styles, { getVariantStyles, MASK_SIZE } from './styles';
+
+const StepMask = ({ stepCompleted, stepActive, variant }) => {
+  const theme = useTheme();
+  const ownStyles = mergeMultipleStyles(styles, getVariantStyles(theme)[variant]);
+
+  const heightAnim = useRef(new Animated.Value(MASK_SIZE)).current;
+
+  const handleCompleted = () => {
+    heightAnim.setValue(MASK_SIZE);
+    Animated.sequence([
+      Animated.delay(COMPLETED_STEP_HEIGHT_DELAY),
+      Animated.timing(heightAnim, {
+        toValue: 0,
+        duration: COMPLETED_STEP_HEIGHT_DURATION,
+        useNativeDriver: false
+      })
+    ]).start();
+  };
+
+  const handleActive = () => {
+    heightAnim.setValue(0);
+    Animated.sequence([
+      Animated.delay(ACTIVE_STEP_HEIGHT_DELAY),
+      Animated.timing(heightAnim, {
+        toValue: MASK_SIZE,
+        duration: ACTIVE_STEP_HEIGHT_DURATION,
+        useNativeDriver: false
+      })
+    ]).start();
+  };
+
+  useEffect(() => {
+    if (stepCompleted) handleCompleted();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepCompleted]);
+
+  useEffect(() => {
+    if (stepActive) handleActive();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepActive]);
+
+  return (
+    <View style={ownStyles.container}>
+      <MaskedView
+        style={ownStyles.maskContainer}
+        maskElement={
+          <View style={ownStyles.mask}>
+            <View style={ownStyles.maskElement} />
+          </View>
+        }
+      >
+        {/* Shows behind the mask */}
+        {(stepCompleted || stepActive) && (
+          <Animated.View
+            style={[ownStyles.maskBackground, stepActive && ownStyles.maskActive, { height: heightAnim }]}
+          />
+        )}
+      </MaskedView>
+    </View>
+  );
+};
+
+StepMask.propTypes = {
+  stepCompleted: bool,
+  stepActive: bool,
+  variant: string
+};
+
+export default StepMask;

package/lib/components/UTTracker/components/Step/components/StepMask/styles.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+
+import { ERROR, STANDARD } from '../../../../constants';
+
+export const MASK_SIZE = 20;
+
+export default StyleSheet.create({
+  container: {
+    height: MASK_SIZE,
+    width: MASK_SIZE,
+    position: 'absolute',
+    zIndex: 1
+  },
+  mask: {
+    // Transparent background because mask is based off alpha channel.
+    backgroundColor: 'transparent',
+    flex: 1
+  },
+  maskElement: {
+    height: MASK_SIZE,
+    width: MASK_SIZE,
+    borderColor: 'black',
+    borderWidth: 2,
+    borderRadius: MASK_SIZE / 2
+  },
+  maskBackground: { flex: 1, alignSelf: 'flex-end' },
+  maskContainer: { flex: 1, flexDirection: 'row', height: '100%' },
+  maskActive: { alignSelf: 'flex-start' }
+});
+
+export const getVariantStyles = theme => ({
+  [ERROR]: {
+    maskBackground: { backgroundColor: theme.Palette.error['04'] }
+  },
+  [STANDARD]: {
+    maskBackground: { backgroundColor: theme.Palette.accent['04'] }
+  }
+});

package/lib/components/UTTracker/components/Step/constants.js

@@ -0,0 +1,10 @@
+export const COMPLETED_STEP_OPACITY_DURATION = 300;
+export const COMPLETED_STEP_HEIGHT_DELAY = 800;
+export const COMPLETED_STEP_HEIGHT_DURATION = 300;
+
+export const ACTIVE_STEP_DELAY = 1800;
+export const ACTIVE_STEP_HEIGHT_DELAY = 1100;
+export const ACTIVE_STEP_HEIGHT_DURATION = 300;
+
+export const BAR_HEIGHT_DELAY = 800;
+export const BAR_HEIGHT_DURATION = 600;

package/lib/components/UTTracker/components/Step/index.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
-import { bool, func, number } from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Animated } from 'react-native';
+import { array, bool, func, number } from 'prop-types';
 import merge from 'lodash/merge';
 
 import { StepPropTypes, VariantPropTypes } from '../../propTypes';
@@ -8,12 +8,26 @@ import UTIcon from '../../../UTIcon';
 import UTLabel from '../../../UTLabel';
 import { ERROR } from '../../constants';
 import { useTheme } from '../../../../theming';
+import { OVAL_SIZE } from '../../styles';
 
 import { getVariantStyles, getStepStyles } from './styles';
+import StepMask from './components/StepMask';
+import BarMask from './components/BarMask';
+import { ACTIVE_STEP_DELAY, COMPLETED_STEP_OPACITY_DURATION } from './constants';
 
 const ERROR_ICON_SIZE = 16;
 
-const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, style = {}, variant }) => {
+const Step = ({
+  first,
+  index,
+  isActive,
+  isCompleted,
+  stepsPositions,
+  setStepsPositions,
+  step,
+  style = {},
+  variant
+}) => {
   const stepCompleted = isCompleted(step.id);
   const stepActive = isActive(step.id);
 
@@ -23,6 +37,25 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
   const [stepIconOffset, setStepIconOffset] = useState(0);
   const [currentPosition, setCurrentPosition] = useState(0);
 
+  const opacityAnim = useRef(new Animated.Value(1)).current;
+  const animateCompleted = () => {
+    Animated.timing(opacityAnim, {
+      toValue: 0.5,
+      duration: COMPLETED_STEP_OPACITY_DURATION,
+      useNativeDriver: true
+    }).start();
+  };
+
+  const [delayedStepActive, setDelayedStepActive] = useState(false);
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (stepActive) {
+      const timer = setTimeout(() => setDelayedStepActive(true), index === 0 ? 0 : ACTIVE_STEP_DELAY);
+      return () => clearTimeout(timer);
+    }
+    setDelayedStepActive(false);
+  }, [index, stepActive]);
+
   useEffect(() => {
     setStepsPositions(prev => {
       const newPrev = [...prev];
@@ -31,43 +64,54 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
     });
   }, [stepIconOffset, currentPosition, setCurrentPosition, index, setStepsPositions]);
 
+  useEffect(() => {
+    if (stepCompleted) animateCompleted();
+    else opacityAnim.setValue(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepCompleted]);
+
+  const barHeight = Math.max((stepsPositions[index + 1] ?? 0) - (stepsPositions[index] ?? 0) - OVAL_SIZE, 24);
+
   return (
     <View
       onLayout={e => setCurrentPosition(e.nativeEvent.layout.y)}
       style={[
         themedStyles.outerContainer,
         stepCompleted && themedStyles.completedOuterContainer,
-        stepActive && themedStyles.activeOuterContainer,
+        delayedStepActive && themedStyles.activeOuterContainer,
         !first && ownStyles.stepMargin
       ]}
     >
-      <View
+      <StepMask stepCompleted={stepCompleted} stepActive={stepActive} variant={variant} />
+      <BarMask stepCompleted={stepCompleted} height={barHeight} variant={variant} />
+      <Animated.View
         onLayout={e => setStepIconOffset(e.nativeEvent.layout.y)}
         style={[
           themedStyles.container,
           stepCompleted && themedStyles.completedContainer,
-          stepActive && themedStyles.activeContainer
+          { opacity: opacityAnim },
+          delayedStepActive && themedStyles.activeContainer
         ]}
       >
         <View
           style={[
             themedStyles.innerContainer,
             stepCompleted && themedStyles.completedInnerContainer,
-            stepActive && themedStyles.activeInnerContainer
+            delayedStepActive && themedStyles.activeInnerContainer
           ]}
         >
-          {stepActive && variant === ERROR && (
+          {delayedStepActive && variant === ERROR && (
             <UTIcon name="IconX" colorTheme="negative" size={ERROR_ICON_SIZE} style={themedStyles.icon} />
           )}
         </View>
-      </View>
-      <View style={themedStyles.textContainer}>
+      </Animated.View>
+      <Animated.View style={[themedStyles.textContainer, { opacity: opacityAnim }]}>
         {step.title && (
           <UTLabel
             variant="small"
             weight="medium"
             colorTheme={
-              stepCompleted ? 'gray' : stepActive ? (variant === ERROR ? 'error' : 'accent') : 'dark'
+              stepCompleted ? 'gray' : delayedStepActive ? (variant === ERROR ? 'error' : 'accent') : 'dark'
             }
           >
             {step.title}
@@ -80,7 +124,7 @@ const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, st
             </UTLabel>
           </View>
         )}
-      </View>
+      </Animated.View>
     </View>
   );
 };
@@ -91,6 +135,7 @@ Step.propTypes = {
   isActive: func,
   isCompleted: func,
   setStepsPositions: func,
+  stepsPositions: array,
   step: StepPropTypes,
   variant: VariantPropTypes
 };

package/lib/components/UTTracker/components/Step/styles.js

@@ -17,9 +17,6 @@ export const getVariantStyles = theme => ({
     },
     completedInnerContainer: {
       backgroundColor: theme.Palette.error['04']
-    },
-    completedOuterContainer: {
-      opacity: 0.5
     }
   },
   [STANDARD]: {
@@ -34,9 +31,6 @@ export const getVariantStyles = theme => ({
     },
     completedInnerContainer: {
       backgroundColor: theme.Palette.accent['04']
-    },
-    completedOuterContainer: {
-      opacity: 0.5
     }
   }
 });

package/lib/components/UTTracker/index.js

@@ -84,6 +84,7 @@ const UTTracker = ({
                     index,
                     isActive,
                     isCompleted,
+                    stepsPositions,
                     setStepsPositions,
                     step,
                     variant

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.31.3",
+  "version": "1.32.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -35,6 +35,7 @@
     "react-native-vector-icons": "^10.0.0"
   },
   "dependencies": {
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-navigation/native": "^6.1.9",
     "@tabler/icons-react-native": "^3.3.0",
     "@widergy/web-utils": "^2.0.0",