@widergy/mobile-ui 1.12.7 → 1.13.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.13.1](https://github.com/widergy/mobile-ui/compare/v1.13.0...v1.13.1) (2024-07-12)
+
+
+### Bug Fixes
+
+* utbutton for workflow summary and bottom actions ([#313](https://github.com/widergy/mobile-ui/issues/313)) ([54cf399](https://github.com/widergy/mobile-ui/commit/54cf399163784402c6545f15921ac7d30cbda89d))
+
+# [1.13.0](https://github.com/widergy/mobile-ui/compare/v1.12.7...v1.13.0) (2024-07-11)
+
+
+### Features
+
+* new loader ([#312](https://github.com/widergy/mobile-ui/issues/312)) ([2293385](https://github.com/widergy/mobile-ui/commit/229338516523e69a1d0f8104087acab2d3e9b1cb))
+
 ## [1.12.7](https://github.com/widergy/mobile-ui/compare/v1.12.6...v1.12.7) (2024-07-08)
 
 

package/lib/components/UTLoading/README.md

@@ -4,24 +4,27 @@ Wraps a component within a screen and displays a loading indicator until it's do
 
 ## Props
 
-|NAME|TYPE|REQUIRED|DESCRIPTION|
-|---|---|---|---|
-|children|PropTypes.element|Yes|The component that you want to wrap until it's done loading|
-|loading|PropTypes.bool|Yes|The boolean `loading` that you want the spinner to depend on|
-|color|PropTypes.string|No|Color of spinner. Uses the theme's primary color by default|
-|size|PropTypes.number|No|The size of the spinner, defaults to `70`|
-|thickness|PropTypes.number|No|The thickness of the spinner, defaults to `3`|
-|style|ViewPropTypes.style|No|custom style applied to the spinner's container|
-|message|PropTypes.string|No|A message to display below the spinner|
-|messageStyle|ViewPropTypes.style|No|Custom style applied to the message|
+| NAME              | TYPE                | REQUIRED |          USED BY          | DESCRIPTION                                                                                                                                               |
+| ----------------- | ------------------- | -------- | :-----------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children          | PropTypes.element   | Yes      | AnimatedCircles - Spinner | The component that you want to wrap until it's done loading                                                                                               |
+| loading           | PropTypes.bool      | Yes      | AnimatedCircles - Spinner | The boolean`loading` that you want the spinner to depend on                                                                                               |
+| color             | PropTypes.string    | No       | AnimatedCircles - Spinner | Color of spinner. Uses the theme's primary color by default                                                                                               |
+| size              | PropTypes.number    | No       |          Spinner          | The size of the spinner, defaults to`70`                                                                                                                  |
+| thickness         | PropTypes.number    | No       |          Spinner          | The thickness of the spinner, defaults to`3`                                                                                                              |
+| style             | ViewPropTypes.style | No       |          Spinner          | custom style applied to the spinner's container                                                                                                           |
+| message           | PropTypes.string    | No       |          Spinner          | A message to display below the spinner                                                                                                                    |
+| messageStyle      | ViewPropTypes.style | No       |          Spinner          | Custom style applied to the message                                                                                                                       |
+| Logo              | PropTypes.number    | No       |      AnimatedCircles      | Utility logo (png) shown above the animated circles.                                                                                                      |
+| useUtilityLoading | PropTypes.bool      | No       | AnimatedCircles - Spinner | Flag that determines whether to show the classic loader (spinner) or the new one (animated circles with utility logo).<br /> (_Default: classic loader_). |
 
 ## Example
+
 ```js
 import { Loading } from "@widergy/mobile-ui";
 
   return (
     <Label>This component does not depend on the loader</Label>
-    <UTLoading 
+    <UTLoading
       loading={this.props.loading}
       color="blue"
       size={200}
@@ -33,3 +36,4 @@ import { Loading } from "@widergy/mobile-ui";
       {your wrapped component goes here}
     </UTLoading>
   )
+```

package/lib/components/UTLoading/components/AnimatedCircles/constants.js

@@ -0,0 +1,9 @@
+export const OPACITY_LOW = 0.33;
+export const OPACITY_MEDIUM = 0.66;
+export const OPACITY_HIGH = 1;
+
+export const TRANSLATE_INITIAL_VALUE = -12;
+export const TRANSLATE_FINAL_VALUE = 0;
+
+export const TRANSLATE_DURATION = 280;
+export const OPACITY_DURATION = 200;

package/lib/components/UTLoading/components/AnimatedCircles/index.js

@@ -0,0 +1,112 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useEffect, useRef } from 'react';
+import { Animated, Image, View } from 'react-native';
+import { string, bool, node, number } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+
+import {
+  OPACITY_DURATION,
+  OPACITY_HIGH,
+  OPACITY_LOW,
+  OPACITY_MEDIUM,
+  TRANSLATE_DURATION,
+  TRANSLATE_FINAL_VALUE,
+  TRANSLATE_INITIAL_VALUE
+} from './constants';
+import styles from './styles';
+
+const AnimatedCircles = ({ children, color, loading, Logo }) => {
+  const theme = useTheme();
+  const neutralTheme = theme.Palette.neutral;
+  const lightTheme = theme.Palette.light;
+  const animations = useRef([new Animated.Value(0), new Animated.Value(0), new Animated.Value(0)]).current;
+  const opacities = useRef([
+    new Animated.Value(OPACITY_HIGH),
+    new Animated.Value(OPACITY_LOW),
+    new Animated.Value(OPACITY_MEDIUM)
+  ]).current;
+
+  useEffect(() => {
+    const onAnimate = index => {
+      const nextIndex = (index + 1) % animations.length;
+      Animated.sequence([
+        Animated.parallel([
+          Animated.timing(animations[index], {
+            duration: TRANSLATE_DURATION,
+            toValue: TRANSLATE_INITIAL_VALUE,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacities[index], {
+            duration: OPACITY_DURATION,
+            toValue: OPACITY_HIGH,
+            useNativeDriver: true
+          })
+        ]),
+        Animated.delay(500),
+        Animated.parallel([
+          Animated.timing(animations[index], {
+            duration: TRANSLATE_DURATION,
+            toValue: TRANSLATE_FINAL_VALUE,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacities[index], {
+            duration: OPACITY_DURATION,
+            toValue: OPACITY_MEDIUM,
+            useNativeDriver: true
+          }),
+          Animated.timing(animations[nextIndex], {
+            duration: TRANSLATE_DURATION,
+            toValue: TRANSLATE_INITIAL_VALUE,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacities[nextIndex], {
+            duration: OPACITY_DURATION,
+            toValue: OPACITY_HIGH,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacities[(index + 2) % animations.length], {
+            duration: OPACITY_DURATION,
+            toValue: OPACITY_LOW,
+            useNativeDriver: true
+          })
+        ])
+      ]).start(() => {
+        onAnimate(nextIndex);
+      });
+    };
+
+    onAnimate(0);
+  }, [animations, opacities]);
+
+  return loading ? (
+    <View style={{ ...styles.container, backgroundColor: lightTheme['01'] }}>
+      {Logo && <Image resizeMode="contain" source={Logo} style={styles.imageStyle} />}
+
+      <View style={styles.circlesContainer}>
+        {animations.map((_, index) => (
+          <Animated.View
+            key={index}
+            style={[
+              { ...styles.circle, backgroundColor: color || neutralTheme['04'] },
+              { transform: [{ translateY: animations[index] }], opacity: opacities[index] }
+            ]}
+          />
+        ))}
+      </View>
+    </View>
+  ) : (
+    children
+  );
+};
+
+AnimatedCircles.displayName = 'UTLoading';
+
+AnimatedCircles.propTypes = {
+  children: node,
+  color: string,
+  loading: bool,
+  Logo: number
+};
+
+export default AnimatedCircles;

package/lib/components/UTLoading/components/AnimatedCircles/styles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+
+import { verticalScale } from '../../../../utils/scaleUtils';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  circlesContainer: {
+    marginTop: 50,
+    flexDirection: 'row'
+  },
+  circle: {
+    backgroundColor: '#000000',
+    borderRadius: 10,
+    height: 16,
+    margin: 4,
+    width: 16
+  },
+  imageStyle: {
+    height: verticalScale(40)
+  }
+});

package/lib/components/UTLoading/components/Spinner/index.js

@@ -0,0 +1,56 @@
+import React, { Fragment } from 'react';
+import { number, string, bool } from 'prop-types';
+import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import Loading from '../../../Loading';
+
+import styles from './styles';
+
+const Spinner = ({
+  children,
+  color,
+  loading,
+  message,
+  messageStyle,
+  preventUnmount,
+  size,
+  style,
+  thickness
+}) => {
+  return (
+    <Fragment>
+      {!!loading && (
+        <Loading
+          style={[styles.spinner, style]}
+          message={message}
+          color={color}
+          size={size}
+          thickness={thickness}
+          messageStyle={messageStyle}
+        />
+      )}
+      {preventUnmount ? (
+        // eslint-disable-next-line react-native/no-inline-styles
+        <View style={{ display: loading ? 'none' : 'flex' }}>{children}</View>
+      ) : (
+        !loading && children
+      )}
+    </Fragment>
+  );
+};
+
+Spinner.displayName = 'UTLoading';
+
+Spinner.propTypes = {
+  color: string,
+  loading: bool,
+  message: string,
+  messageStyle: ViewPropTypes.style,
+  preventUnmount: bool,
+  size: number,
+  style: ViewPropTypes.style,
+  thickness: number
+};
+
+export default Spinner;

package/lib/components/UTLoading/index.js

@@ -1,55 +1,18 @@
-import React, { Fragment } from 'react';
-import { number, string, bool } from 'prop-types';
-import { View } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import React from 'react';
+import { bool } from 'prop-types';
 
-import Loading from '../Loading';
+import AnimatedCircles from './components/AnimatedCircles';
+import Spinner from './components/Spinner';
 
-import styles from './styles';
-
-const UTLoading = ({
-  children,
-  color,
-  loading,
-  message,
-  messageStyle,
-  preventUnmount,
-  size,
-  style,
-  thickness
-}) => {
-  return (
-    <Fragment>
-      {!!loading && (
-        <Loading
-          style={[styles.spinner, style]}
-          message={message}
-          color={color}
-          size={size}
-          thickness={thickness}
-          messageStyle={messageStyle}
-        />
-      )}
-      {preventUnmount ? (
-        <View style={{ display: loading ? 'none' : 'flex' }}>{children}</View>
-      ) : (
-        !loading && children
-      )}
-    </Fragment>
-  );
+const UTLoading = props => {
+  const { useUtilityLoading } = props || {};
+  return useUtilityLoading ? <AnimatedCircles {...props} /> : <Spinner {...props} />;
 };
 
 UTLoading.displayName = 'UTLoading';
 
 UTLoading.propTypes = {
-  color: string,
-  loading: bool,
-  message: string,
-  messageStyle: ViewPropTypes.style,
-  preventUnmount: bool,
-  size: number,
-  style: ViewPropTypes.style,
-  thickness: number
+  useUtilityLoading: bool
 };
 
 export default UTLoading;

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

@@ -3,27 +3,26 @@ import { string, func, bool } from 'prop-types';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
 
-import Button from '../../../../../../../Button';
+import UTButton from '../../../../../../../UTButton';
 import { useTheme } from '../../../../../../../../theming';
 
 import ownStyles from './styles';
 
-const ActionButton = ({ hidden, disabled, onPress, label, mode, style }) => {
+const ActionButton = ({ hidden, disabled, onPress, label, variant, style }) => {
   const theme = useTheme();
   const themedStyles = merge({}, ownStyles, theme?.UTWorkflowContainer?.actionButton, style);
 
   return (
     <View style={themedStyles.actionButton}>
-      <Button
-        containerStyle={themedStyles.buttonContainer}
-        contentStyle={themedStyles.buttonContent}
+      <UTButton
         disabled={disabled || hidden}
-        elevation={themedStyles.elevation}
-        lowerCase
-        mode={mode}
         onPress={onPress}
-        title={label}
-      />
+        size="large"
+        style={{ root: themedStyles.buttonContainer, childrenContainer: themedStyles.buttonContent }}
+        variant={variant}
+      >
+        {label}
+      </UTButton>
     </View>
   );
 };
@@ -32,7 +31,7 @@ ActionButton.propTypes = {
   disabled: bool,
   hidden: bool,
   label: string,
-  mode: string,
+  variant: string,
   onPress: func
 };
 

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/components/ActionButton/styles.js

@@ -5,6 +5,6 @@ export default StyleSheet.create({
     flexGrow: 1
   },
   buttonContainer: {
-    width: '100%'
+    alignItems: 'center'
   }
 });

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

@@ -4,14 +4,14 @@ import merge from 'lodash/merge';
 
 import Label from '../../../../../Label';
 import Surface from '../../../../../Surface';
-import Button from '../../../../../Button';
 import Icon from '../../../../../Icon';
 import Checkbox from '../../../../../Checkbox';
 import { MessagePropTypes, SummaryPropTypes } from '../../types';
+import UTButton from '../../../../../UTButton';
 
 import ActionButton from './components/ActionButton';
 import ActionButtonPropTypes from './components/ActionButton/types';
-import ownStyles, { ICON_SIZE } from './styles';
+import ownStyles from './styles';
 import { NEXT, RETURN } from './constants';
 
 const BottomActions = ({ nextButton, returnButton, summary, message, style }) => {
@@ -39,29 +39,23 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
           )}
           {summary.actions && !checkboxProps && (
             <View style={themedStyles.summaryActions}>
-              {summary.actions.map((action, index) => (
-                <Button
-                  containerStyle={themedStyles.summaryActionContainer}
-                  contentStyle={!action.title && themedStyles.summaryActionButton}
-                  elevation={action.elevation}
-                  icon={
-                    action.icon && {
-                      height: action.icon.height || ICON_SIZE,
-                      name: action.icon.name,
-                      size: action.icon.size || ICON_SIZE,
-                      type: action.icon.type,
-                      width: action.icon.width || ICON_SIZE
-                    }
-                  }
-                  key={action.name}
-                  labelColor={themedStyles.summaryActions?.labelColor || 'blue'}
-                  onPress={action.onPress}
-                  outerContainerStyles={
-                    index !== summary.actions.length - 1 && themedStyles.summaryActionsChild
-                  }
-                  secondary
-                  title={action.title}
-                />
+              {summary.actions.map(({ Icon: actionIcon, title, onPress }, index) => (
+                <UTButton
+                  Icon={actionIcon}
+                  key={actionIcon}
+                  onPress={onPress}
+                  size="small"
+                  style={{
+                    root: {
+                      ...themedStyles.summaryActionContainer,
+                      ...(index !== summary.actions.length - 1 && themedStyles.summaryActionsChild)
+                    },
+                    childrenContainer: themedStyles.summaryActionButton
+                  }}
+                  variant="semitransparent"
+                >
+                  {title}
+                </UTButton>
               ))}
             </View>
           )}
@@ -93,7 +87,7 @@ const BottomActions = ({ nextButton, returnButton, summary, message, style }) =>
         {returnButtonEnabled && (
           <ActionButton
             label={returnButton.label || RETURN}
-            mode="text"
+            variant="text"
             style={{
               actionButton: {
                 ...themedStyles.returnActionButton,

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js

@@ -1,7 +1,5 @@
 import { StyleSheet } from 'react-native';
 
-export const ICON_SIZE = 24;
-
 export default StyleSheet.create({
   actionsChild: {
     marginRight: 16
@@ -47,11 +45,8 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     padding: 16
   },
-  summaryActionButton: {
-    marginHorizontal: 8
-  },
   summaryActionContainer: {
-    minWidth: 0
+    paddingVertical: 8
   },
   summaryActions: {
     alignItems: 'center',

package/package.json

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