@momo-kits/foundation 0.115.2-beta.13 → 0.115.3-beta.2

package/Divider/DashDivider.tsx

@@ -0,0 +1,45 @@
+import React, {useContext} from 'react';
+import {View, ViewStyle} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+import Svg, {Line} from 'react-native-svg';
+
+export interface DashDividerProps {
+  /**
+   * Custom styles for dash divider
+   */
+  style?: ViewStyle;
+}
+
+const DashDivider: React.FC<DashDividerProps> = ({style}) => {
+  const {theme} = useContext(ApplicationContext);
+  const borderColor = theme.colors.border.default;
+
+  return (
+    <View
+      style={[
+        {
+          width: '100%',
+          height: 1,
+          marginVertical: Spacing.XS,
+        },
+        style,
+      ]}>
+      <Svg height="1" width="100%">
+        <Line
+          x1="0"
+          y1="0"
+          x2="100%"
+          y2="0"
+          stroke={borderColor}
+          strokeWidth="1"
+          strokeDasharray={`4, 4`}
+          strokeLinecap={'round'}
+          strokeLinejoin={'miter'}
+        />
+      </Svg>
+    </View>
+  );
+};
+
+export {DashDivider};

package/Divider/index.tsx

@@ -1,21 +1,37 @@
 import React, {useContext} from 'react';
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {DashDivider} from './DashDivider';
 
-const Divider = () => {
+export interface DividerProps {
+  /**
+   * Custom styles for divider
+   */
+  style?: ViewStyle;
+
+  /**
+   * Enable margin vertical 4px
+   */
+  useMargin?: boolean;
+}
+
+const Divider: React.FC<DividerProps> = ({style, useMargin = true}) => {
   const {theme} = useContext(ApplicationContext);
 
   return (
     <View
-      style={{
-        height: 1,
-        width: '100%',
-        backgroundColor: theme.colors.border.default,
-        marginVertical: Spacing.XS,
-      }}
+      style={[
+        style,
+        {
+          height: 1,
+          width: '100%',
+          backgroundColor: theme.colors.border.default,
+          marginVertical: useMargin ? Spacing.XS : 0,
+        },
+      ]}
     />
   );
 };
 
-export {Divider};
+export {Divider, DashDivider};

package/Input/InputOTP.tsx

@@ -12,7 +12,6 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import {
@@ -25,7 +24,6 @@ import {scaleSize, Text} from '../Text';
 import {ErrorView, getBorderColor} from './common';
 import {CaretProps, InputOTPProps} from './index';
 import styles from './styles';
-import {Icon} from "../Icon";
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -134,10 +132,6 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
-    const onClearText = () => {
-      _onChangeText('');
-    };
-
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
       for (let i = 0; i < inputLength; i++) {
@@ -221,11 +215,6 @@ const InputOTP = forwardRef(
               </Text>
             </View>
           )}
-          {value.length > 0 && focused && (
-            <TouchableOpacity onPress={onClearText} style={styles.clearIcon}>
-              <Icon source={'24_navigation_close_circle_full'} size={12} />
-            </TouchableOpacity>
-          )}
           <View style={styles.otpInputsView}>
             {length ? renderInputs(length) : renderUnidentifiedInputs()}
           </View>

package/Input/styles.ts

@@ -150,14 +150,8 @@ export default StyleSheet.create({
   otpInput: {
     height: 56,
     borderRadius: Radius.S,
-    justifyContent: 'center',
     borderWidth: 1,
   },
-  clearIcon: {
-    position: 'absolute',
-    right: Spacing.M,
-    zIndex: 4,
-  },
   otpFloatingView: {
     position: 'absolute',
     top: -Spacing.M + 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.115.2-beta.13",
+  "version": "0.115.3-beta.2",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -20,7 +20,8 @@
     "@react-navigation/routers": "5.7.4",
     "react-native-reanimated": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-reanimated.git#v1.13.4_gradle_7",
     "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
-    "@react-navigation/stack": "https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
+    "@react-navigation/stack": "https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git",
+    "react-native-svg": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-svg.git#v12.1.0.public_fix_not_found_bounds_ios"
   },
   "peerDependencies": {
     "react-native": "*"