@widergy/mobile-ui 1.12.6 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Bug Fixes
+
+* utmenu passes selected item value to onclose func ([#307](https://github.com/widergy/mobile-ui/issues/307)) ([b82c033](https://github.com/widergy/mobile-ui/commit/b82c033a284dfa3d647930cd33b0c5b0dfd269ce))
+
 ## [1.12.6](https://github.com/widergy/mobile-ui/compare/v1.12.5...v1.12.6) (2024-07-03)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -1,6 +1,7 @@
 import { arrayOf, bool, element, func, oneOf, shape, string } from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { WINDOW_HEIGHT } from '../../utils/scaleUtils';
 import UTMenu from '../UTMenu';
@@ -21,7 +22,8 @@ const UTAutocomplete = ({
   MenuOptionComponent,
   options,
   persistSelectedOption = false,
-  variant
+  variant,
+  styles: propStyles
 }) => {
   const [selectedOption, setSelectedOption] = useState();
 
@@ -54,6 +56,7 @@ const UTAutocomplete = ({
         options={options}
         selectedOption={selectedOption?.id}
         withAutocomplete
+        styles={propStyles?.UTMenu}
       >
         <UTTextInput
           disabled={disabled}
@@ -94,7 +97,8 @@ UTAutocomplete.propTypes = {
     })
   ),
   persistSelectedOption: bool,
-  variant: string
+  variant: string,
+  styles: ViewPropTypes.style
 };
 
 export default UTAutocomplete;

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/lib/components/UTMenu/components/ListView/index.js

@@ -28,7 +28,7 @@ class ListView extends PureComponent {
 
   handleOnPress = item => {
     const { handleOptionPress, onPress } = this.props;
-    return handleOptionPress(item.action || (() => onPress(item)));
+    return handleOptionPress(item.action || (() => onPress(item)), item?.value);
   };
 
   renderItem = ({ item }) => {

package/lib/components/UTMenu/index.js

@@ -3,6 +3,7 @@ import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, Vi
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
 import UTTextInput from '../UTTextInput';
+import Surface from '../Surface';
 
 import MenuOption from './components/MenuOption';
 import ListView from './components/ListView';
@@ -101,15 +102,15 @@ const UTMenu = ({
     setTimeout(() => setIsOpen(true), 20);
     if (onOpen) onOpen();
   };
-  const closeMenu = () => {
+  const closeMenu = value => {
     setIsOpen(false);
     setQuery('');
-    if (onClose) onClose();
+    if (onClose) onClose(value);
   };
 
-  const handleOptionPress = action => {
+  const handleOptionPress = (action, value) => {
     action();
-    if (!isMultiple) closeMenu();
+    if (!isMultiple) closeMenu(value);
   };
 
   const focusSearchInput = () => withAutocomplete && searchTextInputRef.current?.focus();
@@ -140,14 +141,14 @@ const UTMenu = ({
         <TouchableOpacity onPress={closeMenu} style={styles.overlayTouchable}>
           <View style={styles.overlay} />
         </TouchableOpacity>
-        <View
+        <Surface
           style={[styles.menu, position, fullWidth && { width: anchorMeasure?.width }, propStyles?.menu]}
           ref={menuRef}
           onLayout={handleMenuLayout}
         >
           <KeyboardAvoidingView behavior="height">
             {withAutocomplete && (
-              <View style={styles.searchContainer}>
+              <View style={[styles.searchContainer, propStyles?.searchContainer]}>
                 <UTTextInput
                   InputRef={searchTextInputRef}
                   value={query}
@@ -177,7 +178,7 @@ const UTMenu = ({
               isMultiple={isMultiple}
             />
           </KeyboardAvoidingView>
-        </View>
+        </Surface>
       </Modal>
     </Fragment>
   );

package/lib/components/UTMenu/styles.js

@@ -7,7 +7,6 @@ export default StyleSheet.create({
     left: 0,
     backgroundColor: 'white',
     borderRadius: 8,
-    elevation: 5,
     paddingVertical: 4
   },
   overlay: {

package/package.json

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