@momo-kits/foundation 1.0.0

package/Consts/styles.ts

@@ -0,0 +1,137 @@
+import {StyleSheet} from 'react-native';
+
+const Styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  flexCenter: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowSpace: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rowWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  columnSpace: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  columnSpaceRight: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+  },
+  columnCenter: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  columnCenterRight: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  //padding
+  padding4: {
+    padding: 4,
+  },
+  padding8: {
+    padding: 8,
+  },
+  padding16: {
+    padding: 16,
+  },
+  padding24: {
+    padding: 24,
+  },
+  padding32: {
+    padding: 32,
+  },
+  //margin
+  margin4: {
+    margin: 4,
+  },
+  margin8: {
+    margin: 8,
+  },
+  margin16: {
+    margin: 16,
+  },
+  margin24: {
+    margin: 24,
+  },
+  margin32: {
+    margin: 32,
+  },
+  //paddingHorizontal
+  paddingHorizontal4: {
+    paddingHorizontal: 4,
+  },
+  paddingHorizontal8: {
+    paddingHorizontal: 8,
+  },
+  paddingHorizontal16: {
+    paddingHorizontal: 16,
+  },
+  paddingHorizontal24: {
+    paddingHorizontal: 24,
+  },
+  //paddingVertical
+  paddingVertical4: {
+    paddingVertical: 4,
+  },
+  paddingVertical8: {
+    paddingVertical: 8,
+  },
+  paddingVertical16: {
+    paddingVertical: 16,
+  },
+  paddingVertical24: {
+    paddingVertical: 24,
+  },
+  //button
+  buttonContent: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    flexDirection: 'row',
+  },
+
+  headerRightButton: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  //text
+  textCenter: {textAlign: 'center'},
+  //card
+  card: {
+    shadowColor: 'gray',
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+});
+
+export {Styles};

package/ContentLoader/index.tsx

@@ -0,0 +1,71 @@
+import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import {Animated, Platform, useWindowDimensions, View} from 'react-native';
+import {
+  ContentLoaderTypes,
+  LinearGradient,
+  NavigationContext,
+  Styles,
+} from '../index';
+import styles from './styles';
+
+const ContentLoader: React.FC<ContentLoaderTypes> = props => {
+  const {width} = useWindowDimensions();
+  const {theme} = useContext(NavigationContext);
+  const beginShimmerPosition = useRef(new Animated.Value(-1)).current;
+  const {style} = props;
+
+  const shimmerColors = [
+    theme.colors.border + '40',
+    theme.colors.border + '80',
+    theme.colors.border,
+  ];
+  const location = [0.3, 0.5, 0.7];
+  const linearTranslate = beginShimmerPosition.interpolate({
+    inputRange: [-1, 1],
+    outputRange: [0, width],
+  });
+  const animatedValue = useMemo(() => {
+    return Animated.loop(
+      Animated.timing(beginShimmerPosition, {
+        toValue: 1,
+        delay: 0,
+        duration: 1000,
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    );
+  }, [beginShimmerPosition]);
+
+  useEffect(() => {
+    animatedValue.start();
+    return () => {
+      animatedValue.stop();
+    };
+  }, [animatedValue]);
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={[Styles.flex, {backgroundColor: shimmerColors[0]}]}>
+        <Animated.View
+          style={[Styles.flex, {transform: [{translateX: linearTranslate}]}]}>
+          <LinearGradient
+            colors={shimmerColors}
+            style={[Styles.flex, {width: width}]}
+            start={{
+              x: -1,
+              y: 0.5,
+            }}
+            end={{
+              x: 2,
+              y: 0.5,
+            }}
+            locations={location}
+          />
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+ContentLoader.defaultProps = {};
+
+export {ContentLoader};

package/ContentLoader/styles.ts

@@ -0,0 +1,5 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  container: {overflow: 'hidden', width: '100%', height: '100%'},
+});

package/ContentLoader/types.ts

@@ -0,0 +1,3 @@
+export type ContentLoaderTypes = {
+  style?: object;
+};

package/Divider/index.js

@@ -0,0 +1,43 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {ApplicationContext} from '@components';
+import styles from './styles';
+
+const Index = props => {
+  const {theme} = useContext(ApplicationContext);
+  const {color, thickness, direction} = props;
+
+  let style = [
+    styles.horizontal,
+    {
+      backgroundColor: color ?? theme.colors.border,
+      height: thickness,
+    },
+  ];
+
+  if (direction === 'vertical') {
+    style = [
+      styles.vertical,
+      {
+        backgroundColor: color ?? theme.colors.border,
+        width: thickness,
+      },
+    ];
+  }
+  return <View style={style} />;
+};
+
+Index.propTypes = {
+  color: PropTypes.string,
+  thickness: PropTypes.number,
+  direction: PropTypes.oneOf('horizontal', 'vertical'),
+};
+
+Index.defaultProps = {
+  color: null,
+  thickness: 1,
+  direction: 'horizontal',
+};
+
+export default Index;

package/Divider/styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  horizontal: {
+    width: '100%',
+  },
+  vertical: {
+    height: '100%',
+  },
+});