@momo-kits/foundation 0.115.2-beta.11 → 0.115.2-beta.13

package/Divider/index.tsx

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

package/Input/InputOTP.tsx

@@ -12,6 +12,7 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import {
@@ -24,6 +25,7 @@ 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;
@@ -132,6 +134,10 @@ const InputOTP = forwardRef(
       onChangeText?.(text);
     };
 
+    const onClearText = () => {
+      _onChangeText('');
+    };
+
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
       for (let i = 0; i < inputLength; i++) {
@@ -215,6 +221,11 @@ 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,8 +150,14 @@ 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.11",
+  "version": "0.115.2-beta.13",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},

package/Divider/DashDivider.tsx

@@ -1,45 +0,0 @@
-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};