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

package/Application/Components/HeaderRight.tsx

@@ -50,7 +50,6 @@ const HeaderRight: React.FC<any> = props => {
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   preventClose,
-  useSystemTools = true,
   useShortcut = false,
   useMore = false,
   tools = [],
@@ -199,7 +198,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     navigator?.maxApi?.dispatchFunction?.(
       'showTools',
       {
-        useSystemTools,
         tools,
         context,
       },

package/Application/types.ts

@@ -98,7 +98,6 @@ export type Tool = {
   name: {vi: string; en: string};
   key: string;
   showBadge?: boolean;
-  showRightIcon?: boolean;
   onPress: () => void;
 };
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.115.2-beta.10",
+  "version": "0.115.2-beta.11",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},