@momo-kits/foundation 0.77.7 → 0.77.8-beta.1

package/Loader/DotLoader.tsx

@@ -0,0 +1,39 @@
+import React, {FC, useContext} from 'react';
+import {View, ViewProps} from 'react-native';
+import AnimatedLottieView from 'lottie-react-native';
+import animation from '../Assets/DotAnimation.json';
+import {ApplicationContext} from '../Application';
+import {hexToRGBA} from './utils';
+
+const DotLoader: FC<ViewProps> = ({style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const arrayColor = [
+    theme.colors.primary,
+    theme.colors.secondary,
+    theme.colors.primary,
+  ];
+
+  let source = animation;
+  source.assets[0].layers[0].shapes[0].it.forEach(item => {
+    if (item.ty === 'fl' && item.c) {
+      item.c.k.forEach((fillItem, index) => {
+        if (typeof fillItem !== 'number') {
+          fillItem.s = hexToRGBA(arrayColor[index]);
+        }
+      });
+    }
+  });
+
+  return (
+    <View style={style}>
+      <AnimatedLottieView
+        source={source}
+        style={{width: 52, height: 18}}
+        autoPlay
+      />
+    </View>
+  );
+};
+
+export default DotLoader;

package/Loader/Loader.tsx

@@ -0,0 +1,14 @@
+import React, {FC} from 'react';
+import {LoaderProps} from './types';
+import DotLoader from './DotLoader';
+import Spinner from './Spinner';
+
+const Loader: FC<LoaderProps> = ({type = 'dot', style}) => {
+  if (type === 'spinner') {
+    return <Spinner style={style} />;
+  }
+
+  return <DotLoader style={style} />;
+};
+
+export default Loader;

package/Loader/ProgressBar.tsx

@@ -0,0 +1,44 @@
+import React, {FC, useContext, useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
+import styles from './styles';
+import {ProgressBarProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Radius} from '../Consts';
+
+const ProgressBar: FC<ProgressBarProps> = ({percent = 0, style}) => {
+  const {theme} = useContext(ApplicationContext);
+  const animation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(animation, {
+      toValue: percent,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [percent, animation]);
+
+  const width = animation.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View
+      style={[
+        style,
+        styles.progressContainer,
+        {backgroundColor: theme.colors.background.default},
+      ]}>
+      <Animated.View
+        style={{
+          height: 4,
+          borderRadius: Radius.XXS,
+          width,
+          backgroundColor: theme.colors.primary,
+        }}
+      />
+    </View>
+  );
+};
+
+export default ProgressBar;

package/Loader/Spinner.tsx

@@ -0,0 +1,31 @@
+import React, {FC, useContext} from 'react';
+import {View, ViewProps} from 'react-native';
+import AnimatedLottieView from 'lottie-react-native';
+import animation from '../Assets/SpinnerAnimation.json';
+import {hexToRGBA} from './utils';
+import {ApplicationContext} from '../Application';
+
+const Spinner: FC<ViewProps> = ({style}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  let source = animation;
+  source.assets[0].layers.forEach(layer => {
+    layer.shapes[0].it.forEach(item => {
+      if (item.ty === 'fl' && item.c) {
+        item.c.k = hexToRGBA(theme.colors.primary);
+      }
+    });
+  });
+
+  return (
+    <View style={style}>
+      <AnimatedLottieView
+        source={source}
+        style={{width: 24, height: 24}}
+        autoPlay
+      />
+    </View>
+  );
+};
+
+export default Spinner;

package/Loader/index.tsx

@@ -0,0 +1,4 @@
+import Loader from './Loader';
+import ProgressBar from './ProgressBar';
+
+export {Loader, ProgressBar};

package/Loader/styles.ts

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+import {Radius} from '../Consts';
+
+export default StyleSheet.create({
+  progressContainer: {
+    width: '100%',
+    height: 4,
+    borderRadius: Radius.XXS,
+  },
+});

package/Loader/types.ts

@@ -0,0 +1,11 @@
+import {ViewStyle} from 'react-native';
+
+export type LoaderProps = {
+  type?: 'dot' | 'spinner';
+  style?: ViewStyle | ViewStyle[];
+};
+
+export type ProgressBarProps = {
+  percent: number;
+  style?: ViewStyle | ViewStyle[];
+};

package/Loader/utils.ts

@@ -0,0 +1,26 @@
+export const hexToRGBA = (hex: string) => {
+  const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;
+
+  if (!/^([0-9A-Fa-f]{3}){1,2}$/.test(normalizedHex)) {
+    console.log(hex);
+    throw new Error('Invalid HEX color.');
+  }
+
+  const expandedHex =
+    normalizedHex.length === 3
+      ? normalizedHex
+          .split('')
+          .map(val => val + val)
+          .join('')
+      : normalizedHex;
+
+  const hexMatch = expandedHex.match(/.{2}/g);
+
+  if (!hexMatch) {
+    throw new Error('HEX parsing failed.');
+  }
+
+  return hexMatch
+    .map(val => parseInt(val, 16))
+    .map(val => Math.round((val / 255) * 1000) / 1000);
+};

package/index.ts

@@ -43,3 +43,5 @@ export * from './Tag';
 export * from './Tag/types';
 export * from './Pagination';
 export * from './Pagination/types';
+export * from './Loader';
+export * from './Loader/types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.7",
+    "version": "0.77.8-beta.01",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {