@widergy/mobile-ui 1.12.7 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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
+  useUtilityLoader: bool
 };
 
 export default UTLoading;

package/package.json

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