update ActionSheet

apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js

@@ -60,8 +60,8 @@ export const ActionSheetColorsSection = ({item, close}) => {
           eSendEvent(refreshNotesPage);
         }}
         customStyle={{
-          width: DDS.isTab ? 400 / 10 : dWidth / 10,
+          width: DDS.isTab ? 400 / 10 : dWidth / 9,
-          height: DDS.isTab ? 400 / 10 : dWidth / 10,
+          height: DDS.isTab ? 400 / 10 : dWidth / 9,
           borderRadius: 100,
           justifyContent: 'center',
           alignItems: 'center',

apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import { Platform, View } from 'react-native';
+import {Platform, View} from 'react-native';
 import ActionSheet from 'react-native-actions-sheet';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { useSettingStore } from '../../provider/stores';
+import {useSettingStore} from '../../provider/stores';
-import { editing } from '../../utils';
+import {editing} from '../../utils';
-import { hexToRGBA } from '../../utils/ColorUtils';
+import {hexToRGBA} from '../../utils/ColorUtils';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
-import { EditorWebView, textInput } from '../../views/Editor/Functions';
+import {EditorWebView, textInput} from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
-import { focusEditor } from '../../views/Editor/tiny/toolbar/constants';
+import {focusEditor} from '../../views/Editor/tiny/toolbar/constants';
-import { Toast } from '../Toast';
+import {Toast} from '../Toast';
-import { GetPremium } from './GetPremium';
+import {GetPremium} from './GetPremium';
 
 const ActionSheetWrapper = ({
   children,
@@ -20,13 +20,14 @@ const ActionSheetWrapper = ({
   onClose,
   onOpen,
   closeOnTouchBackdrop = true,
-  onHasReachedTop
+  onHasReachedTop,
+  keyboardMode,
 }) => {
   const [state] = useTracked();
   const {colors} = state;
   const deviceMode = useSettingStore(state => state.deviceMode);
-  const largeTablet = deviceMode === "tablet"
+  const largeTablet = deviceMode === 'tablet';
-  const smallTablet = deviceMode === "smallTablet"
+  const smallTablet = deviceMode === 'smallTablet';
 
   const insets = useSafeAreaInsets();
   const style = React.useMemo(() => {
@@ -34,8 +35,8 @@ const ActionSheetWrapper = ({
       width: largeTablet || smallTablet ? 500 : '100%',
       backgroundColor: colors.bg,
       zIndex: 10,
-      paddingTop:10,
+      paddingTop: 10,
-      paddingBottom:0,
+      paddingBottom: 0,
       borderBottomRightRadius: largeTablet ? 10 : 1,
       borderBottomLeftRadius: largeTablet ? 10 : 1,
       borderTopRightRadius: 10,
@@ -75,6 +76,8 @@ const ActionSheetWrapper = ({
       initialOffsetFromBottom={1}
       onPositionChanged={onHasReachedTop}
       closeOnTouchBackdrop={closeOnTouchBackdrop}
+      keyboardMode={keyboardMode}
+      closeOnPressBack={closeOnTouchBackdrop}
       indicatorColor={
         Platform.OS === 'ios'
           ? hexToRGBA(colors.accent + '19')
@@ -94,7 +97,7 @@ const ActionSheetWrapper = ({
       }
       onClose={_onClose}>
       {children}
-      <View style={{height: Platform.OS === 'ios' ? insets.bottom / 2 :0}} />
+      <View style={{height: Platform.OS === 'ios' ? insets.bottom / 2 : 0}} />
     </ActionSheet>
   );
 };

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
 import {
-  ActivityIndicator,
   Clipboard,
   Dimensions,
   Keyboard,
@@ -44,7 +43,6 @@ import {SIZE} from '../../utils/SizeUtils';
 import {sleep, timeConverter} from '../../utils/TimeUtils';
 import {Button} from '../Button';
 import {presentDialog} from '../Dialog/functions';
-import {PressableButton} from '../PressableButton';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 import {ActionSheetColorsSection} from './ActionSheetColorsSection';
@@ -57,7 +55,6 @@ export const ActionSheetComponent = ({
   hasColors = false,
   hasTags = false,
   rowItems = [],
-  columnItems = [],
   getRef,
 }) => {
   const [state, dispatch] = useTracked();
@@ -515,7 +512,6 @@ export const ActionSheetComponent = ({
     },
   ];
 
-  const columnItemsData = [];
   let columnsCount = rowItems.length < 5 ? rowItems.length : 5;
   const _renderRowItem = rowItem => (
     <TouchableOpacity
@@ -772,10 +768,13 @@ export const ActionSheetComponent = ({
           data={rowItemsData.filter(
             i => rowItems.indexOf(i.name) > -1 && !i.hidden,
           )}
-          keyExtractor={(item) => item.title}
+          keyExtractor={item => item.title}
           numColumns={rowItems.length < 5 ? rowItems.length : 5}
           style={{
             marginTop: note.type !== 'note' ? 10 : 0,
+            borderTopWidth: 1,
+            borderColor: colors.nav,
+            paddingTop: 20,
           }}
           columnWrapperStyle={{
             justifyContent: 'flex-start',