@widergy/mobile-ui 2.17.0 → 2.18.0

package/lib/components/UTLoading/versions/V0/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { bool } from 'prop-types';
+
+import AnimatedCircles from './components/AnimatedCircles';
+import Spinner from './components/Spinner';
+
+const UTLoading = props => {
+  const { useUtilityLoading } = props || {};
+  return useUtilityLoading ? <AnimatedCircles {...props} /> : <Spinner {...props} />;
+};
+
+UTLoading.displayName = 'UTLoading';
+
+UTLoading.propTypes = {
+  useUtilityLoading: bool
+};
+
+export default UTLoading;

package/lib/components/UTLoading/versions/V1/components/LoaderWithLogo/index.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { bool, elementType, node, number, string } from 'prop-types';
+
+import UTLabel from '../../../../../UTLabel';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+
+import { ownStyles } from './theme';
+
+const { UTLoading: loadingIds } = TEST_IDS;
+
+const LoaderWithLogo = ({
+  children,
+  dataTestId = loadingIds.loader,
+  fullScreen = false,
+  loading,
+  LoaderRing,
+  Logo,
+  logoSize,
+  message,
+  rotationDuration,
+  size
+}) => {
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotation, {
+        duration: rotationDuration,
+        easing: Easing.linear,
+        toValue: 1,
+        useNativeDriver: false
+      })
+    ).start();
+  }, [rotation, rotationDuration]);
+
+  if (!loading) return children ?? null;
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+
+  const containerStyle = fullScreen ? ownStyles.fullScreen : ownStyles.container;
+
+  return (
+    <View style={containerStyle} testID={dataTestId}>
+      <View style={[ownStyles.ringWrapper, { height: size, width: size }]}>
+        {!!LoaderRing && (
+          <Animated.View style={[ownStyles.ringAbsolute, { transform: [{ rotate: spin }] }]}>
+            <LoaderRing height={size} width={size} />
+          </Animated.View>
+        )}
+        {!!Logo && (
+          <View style={ownStyles.logoWrapper}>
+            <Logo height={logoSize} width={logoSize} />
+          </View>
+        )}
+      </View>
+      {!!message && (
+        <UTLabel style={ownStyles.message} variant="small">
+          {message}
+        </UTLabel>
+      )}
+    </View>
+  );
+};
+
+LoaderWithLogo.displayName = 'UTLoading';
+
+LoaderWithLogo.propTypes = {
+  children: node,
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  LoaderRing: elementType,
+  Logo: elementType,
+  logoSize: number,
+  message: string,
+  rotationDuration: number,
+  size: number
+};
+
+export default LoaderWithLogo;

package/lib/components/UTLoading/versions/V1/components/LoaderWithLogo/theme.js

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+
+const WHITE = '#ffffff';
+
+export const ownStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: WHITE,
+    flex: 1,
+    justifyContent: 'center',
+    width: '100%'
+  },
+  fullScreen: {
+    alignItems: 'center',
+    backgroundColor: WHITE,
+    bottom: 0,
+    elevation: 9999,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    zIndex: 9999
+  },
+  logoWrapper: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  message: {
+    marginTop: 12,
+    textAlign: 'center'
+  },
+  ringAbsolute: {
+    position: 'absolute'
+  },
+  ringWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/lib/components/UTLoading/versions/V1/components/Spinner/constants.js

@@ -0,0 +1,5 @@
+export const SPINNER_SIZE = 72;
+export const SPINNER_THICKNESS = 5;
+export const SPINNER_ROTATION_DURATION = 1000;
+export const ARC_SWEEP_DEGREES = 270;
+export const GRADIENT_ID = 'spinnerGrad';

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

@@ -0,0 +1,143 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { arrayOf, bool, node, number, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { Circle, Defs, LinearGradient, Stop, Svg } from 'react-native-svg';
+
+import { useTheme } from '../../../../../../theming';
+import UTLabel from '../../../../../UTLabel';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+
+import {
+  ARC_SWEEP_DEGREES,
+  GRADIENT_ID,
+  SPINNER_ROTATION_DURATION,
+  SPINNER_SIZE,
+  SPINNER_THICKNESS
+} from './constants';
+import {
+  getArcColor,
+  getRadius,
+  getSpinnerSize,
+  getSpinnerThickness,
+  getTrackColor,
+  ownStyles
+} from './theme';
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+
+const { UTLoading: loadingIds } = TEST_IDS;
+
+const renderArc = (spinnerSize, radius, arcColor, spinnerThickness, arcLength, circumference, colors) => {
+  const isGradient = colors?.length === 2;
+  return (
+    <>
+      {isGradient && (
+        <Defs>
+          <LinearGradient id={GRADIENT_ID} x1="0" y1="0" x2="1" y2="0">
+            <Stop offset="0" stopColor={colors[0]} />
+            <Stop offset="1" stopColor={colors[1]} />
+          </LinearGradient>
+        </Defs>
+      )}
+      <Circle
+        cx={spinnerSize / 2}
+        cy={spinnerSize / 2}
+        r={radius}
+        stroke={isGradient ? `url(#${GRADIENT_ID})` : arcColor}
+        strokeWidth={spinnerThickness}
+        strokeLinecap="round"
+        strokeDasharray={`${arcLength} ${circumference - arcLength}`}
+        strokeDashoffset={0}
+        fill="none"
+      />
+    </>
+  );
+};
+
+const Spinner = ({
+  children,
+  colors,
+  dataTestId = loadingIds.spinner,
+  loading,
+  message,
+  preventUnmount,
+  size = SPINNER_SIZE,
+  style,
+  thickness = SPINNER_THICKNESS
+}) => {
+  const theme = useTheme();
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotation, {
+        duration: SPINNER_ROTATION_DURATION,
+        easing: Easing.linear,
+        toValue: 1,
+        useNativeDriver: true
+      })
+    ).start();
+  }, [rotation]);
+
+  if (!loading && !preventUnmount) return children ?? null;
+
+  const spinnerSize = getSpinnerSize(size);
+  const spinnerThickness = getSpinnerThickness(thickness);
+  const radius = getRadius(size, thickness);
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = (ARC_SWEEP_DEGREES / 360) * circumference;
+  const trackColor = getTrackColor(theme);
+  const arcColor = colors?.length >= 1 ? colors[0] : getArcColor(theme);
+
+  const spin = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  const spinnerContent = (
+    <View style={[ownStyles.container, style]} testID={dataTestId}>
+      <AnimatedSvg width={spinnerSize} height={spinnerSize} style={{ transform: [{ rotate: spin }] }}>
+        <Circle
+          cx={spinnerSize / 2}
+          cy={spinnerSize / 2}
+          r={radius}
+          stroke={trackColor}
+          strokeWidth={spinnerThickness}
+          fill="none"
+        />
+        {renderArc(spinnerSize, radius, arcColor, spinnerThickness, arcLength, circumference, colors)}
+      </AnimatedSvg>
+      {!!message && (
+        <UTLabel style={ownStyles.message} variant="small">
+          {message}
+        </UTLabel>
+      )}
+    </View>
+  );
+
+  if (preventUnmount) {
+    return (
+      <>
+        {!!loading && spinnerContent}
+        {/* eslint-disable-next-line react-native/no-inline-styles */}
+        <View style={{ display: loading ? 'none' : 'flex' }}>{children}</View>
+      </>
+    );
+  }
+
+  return spinnerContent;
+};
+
+Spinner.displayName = 'UTLoading';
+
+Spinner.propTypes = {
+  children: node,
+  colors: arrayOf(string),
+  dataTestId: string,
+  loading: bool,
+  message: string,
+  preventUnmount: bool,
+  style: ViewPropTypes.style,
+  size: number,
+  thickness: number
+};
+
+export default Spinner;

package/lib/components/UTLoading/versions/V1/components/Spinner/theme.js

@@ -0,0 +1,23 @@
+import { SPINNER_SIZE, SPINNER_THICKNESS } from './constants';
+
+export const ownStyles = {
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  message: {
+    marginTop: 12,
+    textAlign: 'center'
+  }
+};
+
+export const getSpinnerSize = size => size || SPINNER_SIZE;
+
+export const getSpinnerThickness = thickness => thickness || SPINNER_THICKNESS;
+
+export const getRadius = (size, thickness) => (getSpinnerSize(size) - getSpinnerThickness(thickness)) / 2;
+
+export const getArcColor = theme => theme?.UTLoading?.arcColor || theme?.colors?.primary;
+
+export const getTrackColor = theme => theme?.UTLoading?.trackColor || theme?.Palette?.light?.['04'];

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { arrayOf, bool, elementType, node, number, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import LoaderWithLogo from './components/LoaderWithLogo';
+import Spinner from './components/Spinner';
+
+const UTLoading = props => {
+  const { useUtilityLoading } = props || {};
+  return useUtilityLoading ? <LoaderWithLogo {...props} /> : <Spinner {...props} />;
+};
+
+UTLoading.displayName = 'UTLoading';
+
+UTLoading.propTypes = {
+  children: node,
+  colors: arrayOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  LoaderRing: elementType,
+  Logo: elementType,
+  logoSize: number,
+  message: string,
+  preventUnmount: bool,
+  rotationDuration: number,
+  size: number,
+  style: ViewPropTypes.style,
+  thickness: number,
+  useUtilityLoading: bool
+};
+
+export default UTLoading;

package/lib/constants/testIds.js

@@ -19,6 +19,7 @@ export const TEST_ID_CONSTANTS = {
   label: 'label',
   left: 'left',
   list: 'list',
+  loader: 'loader',
   logo: 'logo',
   modal: 'modal',
   option: 'option',
@@ -30,6 +31,7 @@ export const TEST_ID_CONSTANTS = {
   searchInput: 'searchInput',
   secondaryAction: 'secondaryAction',
   selectAll: 'selectAll',
+  spinner: 'spinner',
   subLabel: 'subLabel',
   subtitle: 'subtitle',
   tagline: 'tagline',
@@ -44,8 +46,25 @@ export const TEST_ID_CONSTANTS = {
 
 export const TEST_IDS = {
   modal: 'modal',
+  UTDatePicker: {
+    calendar: 'UTDatePicker.calendar',
+    calendarMonthYear: 'UTDatePicker.calendar.monthYear',
+    calendarNextBtn: 'UTDatePicker.calendar.nextBtn',
+    calendarPrevBtn: 'UTDatePicker.calendar.prevBtn',
+    errorMessage: 'UTDatePicker.errorMessage',
+    input: 'UTDatePicker.input',
+    monthItem: 'UTDatePicker.monthItem',
+    monthView: 'UTDatePicker.monthView',
+    root: 'UTDatePicker.root',
+    yearItem: 'UTDatePicker.yearItem',
+    yearView: 'UTDatePicker.yearView'
+  },
   roundView: 'roundView',
   skeletonLoader: 'skeletonLoader',
+  UTLoading: {
+    loader: `UTLoading.${TEST_ID_CONSTANTS.loader}`,
+    spinner: `UTLoading.${TEST_ID_CONSTANTS.spinner}`
+  },
   topbar: {
     goBack: 'topbar.goBack',
     title: 'topbar.title'

package/lib/index.js

@@ -49,6 +49,7 @@ export { default as UTCuit } from './components/UTCuit';
 export { default as UTCheckList } from './components/UTCheckList';
 export { default as UTDataCategory } from './components/UTDataCategory';
 export { default as UTDataElement } from './components/UTDataElement';
+export { default as UTDatePicker } from './components/UTDatePicker';
 export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTIcon } from './components/UTIcon';
 export { default as UTImage } from './components/UTImage';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -43,6 +43,7 @@
     "@tabler/icons-react-native": "^3.34.1",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
+    "dayjs": "^1.11.10",
     "deprecated-react-native-prop-types": "^5.0.0",
     "expo-document-picker": "^13.1.6",
     "expo-image-manipulator": "^13.1.7",
@@ -73,12 +74,12 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.0",
-    "@widergy/semantic-release-package-config": "^1.0.0",
-    "@widergy/eslint-config": "^1.0.0",
     "@react-native/babel-preset": "0.73.0",
+    "@widergy/eslint-config": "^1.0.0",
+    "@widergy/semantic-release-package-config": "^1.0.0",
+    "babel-jest": "^29.6.2",
     "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-jest": "^29.6.2",
     "babel-preset-minify": "^0.5.2",
     "eslint": "^9.38.0",
     "eslint-config-airbnb": "^19.0.4",