@widergy/mobile-ui 1.8.0 → 1.8.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.8.2](https://github.com/widergy/mobile-ui/compare/v1.8.1...v1.8.2) (2024-05-10)
+
+
+### Bug Fixes
+
+* uttracker dashes ([#281](https://github.com/widergy/mobile-ui/issues/281)) ([d676fc2](https://github.com/widergy/mobile-ui/commit/d676fc24a4301779bc091cffe54f69bee375a8a8))
+
+## [1.8.1](https://github.com/widergy/mobile-ui/compare/v1.8.0...v1.8.1) (2024-05-09)
+
+
+### Bug Fixes
+
+* safeareaview for utworkflowcontainer ([#283](https://github.com/widergy/mobile-ui/issues/283)) ([f3bcac4](https://github.com/widergy/mobile-ui/commit/f3bcac45899d6859800264ce7e24c4f09d65ebea))
+
 # [1.8.0](https://github.com/widergy/mobile-ui/compare/v1.7.0...v1.8.0) (2024-05-07)
 
 

package/lib/components/UTTopbar/index.js

@@ -24,6 +24,7 @@ const UTTopbar = ({
 
   const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
 
+  // If you are trying to render this in the example of mobile-ui, comment this useFocusEffect block or it will crash
   useFocusEffect(
     useCallback(() => {
       const onBackPress = () => {
@@ -36,6 +37,7 @@ const UTTopbar = ({
       return () => subscription.remove();
     }, [goBack])
   );
+  // up to here
 
   return (
     <View>

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { bool, number } from 'prop-types';
+import merge from 'lodash/merge';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import { IS_IOS } from '../../../../utils/platformUtils/constants';
+
+import ownStyles from './styles';
+
+const Connector = ({ currentPosition = 0, first, nextPosition = 0, style }) => {
+  const themedStyles = merge({}, ownStyles, style);
+
+  return (
+    <View
+      style={[themedStyles.wrapper(currentPosition, first, nextPosition), IS_IOS && themedStyles.wrapperIOS]}
+    >
+      <View style={[themedStyles.connector, IS_IOS && themedStyles.connectorIOS]} />
+    </View>
+  );
+};
+
+Connector.propTypes = {
+  currentPosition: number,
+  first: bool,
+  nextPosition: number,
+  style: ViewPropTypes.style
+};
+
+export default Connector;

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

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+import { OVAL_SIZE } from '../../styles';
+
+export default StyleSheet.create({
+  connector: {
+    borderColor: 'gray',
+    borderLeftWidth: 2,
+    borderStyle: 'dashed',
+    flexGrow: 1
+  },
+  connectorIOS: {
+    borderWidth: 2,
+    margin: -3,
+    marginLeft: 0,
+    flex: 1
+  },
+  wrapper: (currentPosition, first, nextPosition) => ({
+    height: nextPosition - currentPosition - OVAL_SIZE - (first ? 5 : 0) - 10,
+    paddingLeft: OVAL_SIZE / 2 - 1,
+    position: 'absolute',
+    top: currentPosition + OVAL_SIZE + (first ? 5 : 0) + 5,
+    width: 2
+  }),
+  wrapperIOS: {
+    overflow: 'hidden',
+    width: OVAL_SIZE
+  }
+});

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { bool, func } from 'prop-types';
+import { bool, func, number } from 'prop-types';
 import merge from 'lodash/merge';
 
 import Label from '../../../Label';
@@ -12,30 +12,25 @@ import ownStyles, { ownVariantStyles } from './styles';
 
 const ERROR_ICON_SIZE = 16;
 
-const Step = ({
-  first,
-  isActive,
-  isCompleted,
-  last,
-  setFirstStepPosition,
-  setLastStepPosition,
-  step,
-  style = {},
-  variant
-}) => {
+const Step = ({ first, index, isActive, isCompleted, setStepsPositions, step, style = {}, variant }) => {
   const stepCompleted = isCompleted(step.id);
   const stepActive = isActive(step.id);
 
   const themedStyles = merge({}, ownStyles, ownVariantStyles[variant], style[variant]);
-
   const [stepIconOffset, setStepIconOffset] = useState(0);
+  const [currentPosition, setCurrentPosition] = useState(0);
+
+  useEffect(() => {
+    setStepsPositions(prev => {
+      const newPrev = [...prev];
+      newPrev[index] = currentPosition + stepIconOffset;
+      return newPrev;
+    });
+  }, [stepIconOffset, currentPosition, setCurrentPosition, index, setStepsPositions]);
 
   return (
     <View
-      onLayout={e => {
-        if (first) setFirstStepPosition(e.nativeEvent.layout.y + stepIconOffset);
-        if (last) setLastStepPosition(e.nativeEvent.layout.y + stepIconOffset);
-      }}
+      onLayout={e => setCurrentPosition(e.nativeEvent.layout.y)}
       style={[
         themedStyles.outerContainer,
         stepCompleted && themedStyles.completedOuterContainer,
@@ -44,7 +39,7 @@ const Step = ({
       ]}
     >
       <View
-        onLayout={e => (first || last) && setStepIconOffset(e.nativeEvent.layout.y)}
+        onLayout={e => setStepIconOffset(e.nativeEvent.layout.y)}
         style={[
           themedStyles.container,
           stepCompleted && themedStyles.completedContainer,
@@ -102,11 +97,10 @@ const Step = ({
 
 Step.propTypes = {
   first: bool,
+  index: number,
   isActive: func,
   isCompleted: func,
-  last: bool,
-  setFirstStepPosition: func,
-  setLastStepPosition: func,
+  setStepsPositions: func,
   step: StepPropTypes,
   variant: VariantPropTypes
 };

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

@@ -14,12 +14,15 @@ export const ownVariantStyles = {
     },
     activeTitleColor: 'red',
     completedContainer: {
-      borderColor: '#F38595'
+      borderColor: 'red'
     },
     completedInnerContainer: {
-      backgroundColor: '#F38595'
+      backgroundColor: 'red'
+    },
+    completedOuterContainer: {
+      opacity: 0.5
     },
-    completedTitleColor: '#F38595'
+    completedTitleColor: 'red'
   },
   [STANDARD]: {
     activeContainer: {
@@ -30,12 +33,15 @@ export const ownVariantStyles = {
     },
     activeTitleColor: 'blue',
     completedContainer: {
-      borderColor: '#93ACFF'
+      borderColor: 'blue'
     },
     completedInnerContainer: {
-      backgroundColor: '#93ACFF'
+      backgroundColor: 'blue'
+    },
+    completedOuterContainer: {
+      opacity: 0.5
     },
-    completedTitleColor: '#93ACFF'
+    completedTitleColor: 'blue'
   }
 };
 

package/lib/components/UTTracker/index.js

@@ -1,9 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
-import { number, string } from 'prop-types';
+import { number, object, string } from 'prop-types';
 import Collapsible from 'react-native-collapsible';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import Icon from '../Icon';
 import Touchable from '../Touchable';
@@ -12,7 +11,7 @@ import { useTheme } from '../../theming';
 
 import ownStyles, { DETAILS_ICON_CARD_SIZE, DETAILS_ICON_FLAT_SIZE, ownModeStyles } from './styles';
 import Step from './components/Step';
-import Connectors from './components/Connectors';
+import Connector from './components/Connector';
 import SubStep from './components/SubStep';
 import { DetailsTabPropTypes, ModePropTypes, StepsPropTypes, VariantPropTypes } from './propTypes';
 import { CARD, FLAT, STANDARD } from './constants';
@@ -21,11 +20,8 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, ownModeStyles[mode], theme.UTTracker, style);
 
-  const [stepperHeight, setStepperHeight] = useState(0);
-  const [lastStepPosition, setLastStepPosition] = useState(0);
-  const [firstStepPosition, setFirstStepPosition] = useState(0);
-
   const [isCollapsed, setIsCollapsed] = useState(true);
+  const [stepsPositions, setStepsPositions] = useState([]);
 
   const isCompleted = stepNumber => stepNumber < currentStep;
   const isActive = stepNumber => stepNumber === currentStep;
@@ -57,22 +53,17 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
           </Touchable>
         )}
         {steps && (
-          <View onLayout={e => setStepperHeight(e.nativeEvent.layout.height)}>
-            <Connectors
-              style={themedStyles.connectors}
-              {...{ firstStepPosition, lastStepPosition, stepperHeight }}
-            />
+          <View>
             {steps.map((step, index) => (
               <Fragment key={step.id}>
                 <Step
                   first={index === 0}
-                  last={index === steps.length - 1}
                   style={themedStyles.step}
                   {...{
+                    index,
                     isActive,
                     isCompleted,
-                    setFirstStepPosition,
-                    setLastStepPosition,
+                    setStepsPositions,
                     step,
                     variant
                   }}
@@ -83,6 +74,13 @@ const UTTracker = ({ currentStep, detailsTab, mode = CARD, steps, style, title,
                       <SubStep key={subStep.id} {...subStep} style={themedStyles.subStep} />
                     ))}
                 </Collapsible>
+                {index !== steps.length - 1 && (
+                  <Connector
+                    currentPosition={stepsPositions[index]}
+                    first={index === 0}
+                    nextPosition={stepsPositions[index + 1]}
+                  />
+                )}
               </Fragment>
             ))}
           </View>
@@ -112,7 +110,8 @@ UTTracker.propTypes = {
   detailsTab: DetailsTabPropTypes,
   mode: ModePropTypes,
   steps: StepsPropTypes,
-  style: ViewPropTypes.style,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: object,
   title: string,
   variant: VariantPropTypes
 };

package/lib/components/UTTracker/propTypes.js

@@ -2,11 +2,11 @@ import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
 
 import { CARD, ERROR, FLAT, STANDARD } from './constants';
 
-export const SubStepsPropTypes = arrayOf(shape({ id: number, subtitle: string, title: string }));
+export const SubStepPropTypes = shape({ id: number, subtitle: string, title: string });
 
 export const StepPropTypes = shape({
   id: number,
-  subSteps: arrayOf(SubStepsPropTypes),
+  subSteps: arrayOf(SubStepPropTypes),
   subtitle: string,
   title: string
 });

package/lib/components/UTWorkflowContainer/versions/V1/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { View, ScrollView } from 'react-native';
+import { SafeAreaView, ScrollView } from 'react-native';
 import { number, func, shape, bool, string, element } from 'prop-types';
 import { merge } from 'lodash';
 
@@ -40,7 +40,7 @@ const UTWorkflowContainer = ({
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer, style);
 
   return (
-    <View style={themedStyles.container}>
+    <SafeAreaView style={themedStyles.container}>
       {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
       <ScrollView contentContainerStyle={themedStyles.content}>
         {title && (
@@ -70,7 +70,7 @@ const UTWorkflowContainer = ({
           }}
         />
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 UTWorkflowContainer.propTypes = {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [