Merge pull request #176 from funnyzak/refactor/actionsheet

Author: funnyzak

src/components/actions-sheet/Btn.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { ColorValue, GestureResponderEvent, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
+
+type MenuButtonProps = {
+  title: string
+  onPress?: ((event: GestureResponderEvent) => void) | undefined
+  color?: ColorValue | undefined
+}
+
+function MenuButton({ title, color, onPress }: MenuButtonProps) {
+  return (
+    <TouchableHighlight accessible={true} underlayColor={'rgba(0, 0, 0, 0.15)'} onPress={onPress}>
+      <View style={styles.container}>
+        <Text style={[styles.title, { color: color ?? '#1A212E' }]}>{title}</Text>
+      </View>
+    </TouchableHighlight>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 20,
+    paddingRight: 20
+  },
+  title: {
+    fontSize: 16,
+    marginLeft: 15,
+    color: '#1A212E'
+  }
+})
+
+export default MenuButton

src/components/actions-sheet/ConfirmSheet.tsx

@@ -0,0 +1,123 @@
+/**
+ * Created by leon<[email protected]> on 22/3/10.
+ */
+import { Button } from '@src/components'
+import { translate } from '@src/i18n'
+import { SylCommon, useTheme } from '@src/theme'
+import { ITheme } from '@src/types'
+import React, { useRef } from 'react'
+import { Text, TextStyle, View, ViewStyle } from 'react-native'
+import ActionSheet, { ActionSheetRef, SheetManager, SheetProps } from 'react-native-actions-sheet'
+
+/* usage:
+  SheetManager.show('confirm-sheet', {
+    onClose: (data: any) => {
+      console.log('onClose', data)
+      showToast(data)
+    },
+    payload: {
+      title: '请确认',
+      description: '确定进行此操作吗？',
+      confirmText: '确定',
+      cancelText: '取消'
+    }
+  })
+**/
+
+const ConfirmActionSheet = (props: SheetProps) => {
+  const { theme } = useTheme()
+  const {
+    sheetId,
+    payload: {
+      title = translate('brand.name'),
+      description,
+      confirmText = translate('common.confirm'),
+      cancelText = translate('common.cancel')
+    }
+  } = props
+  const actionSheetRef = useRef<ActionSheetRef>(null)
+
+  const buttonConfirm = (yes: boolean) => {
+    console.log('buttonConfirm', yes, sheetId)
+    SheetManager.hide(sheetId, {
+      payload: yes,
+      context: 'global'
+    })
+  }
+
+  return (
+    <ActionSheet
+      id={sheetId}
+      springOffset={1}
+      onBeforeShow={(data) => console.log(data)}
+      ref={actionSheetRef}
+      statusBarTranslucent
+      drawUnderStatusBar={true}
+      gestureEnabled={true}
+      defaultOverlayOpacity={0.5}
+      containerStyle={{
+        paddingTop: theme.spacing.medium,
+        backgroundColor: theme.colors.surface,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20
+      }}>
+      <View style={[styles.container(theme), SylCommon.Card.container(theme)]}>
+        {title && <Text style={styles.title(theme)}>{title}</Text>}
+        {description && <Text style={styles.text(theme)}>{description}</Text>}
+        <View style={styles.buttonContainer(theme)}>
+          <Button
+            type="large"
+            onPress={() => buttonConfirm(false)}
+            textColor={theme.colors.titleText}
+            style={[
+              styles.button(theme),
+              {
+                backgroundColor: theme.colors.transparent
+              }
+            ]}>
+            {cancelText || translate('common.cancel')}
+          </Button>
+          <Button type="large" onPress={() => buttonConfirm(true)} style={styles.button(theme)}>
+            {confirmText || translate('common.confirm')}
+          </Button>
+        </View>
+      </View>
+    </ActionSheet>
+  )
+}
+
+const styles = {
+  safeareview: (theme: ITheme): ViewStyle => ({}),
+  container: (theme: ITheme): ViewStyle => ({
+    paddingBottom: theme.spacing.extraLarge,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    backgroundColor: theme.colors.surface
+  }),
+  title: (theme: ITheme): TextStyle => ({
+    ...theme.typography.headingTextBold,
+    paddingVertical: theme.spacing.small
+  }),
+  text: (theme: ITheme): TextStyle => ({
+    ...theme.typography.labelText,
+    width: '100%',
+    textAlign: 'left',
+    paddingVertical: theme.spacing.small
+  }),
+  buttonContainer: (theme: ITheme): ViewStyle => ({
+    paddingVertical: theme.spacing.small,
+    flexDirection: 'row',
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between'
+  }),
+  button: (theme: ITheme): ViewStyle => ({
+    width: '48%',
+    borderRadius: 20
+  })
+}
+
+export default ConfirmActionSheet

src/components/actions-sheet/MenuSheet.tsx

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react'
+import ActionSheet, { ActionSheetRef, registerSheet, SheetProps } from 'react-native-actions-sheet'
+import MenuButton from './Btn'
+
+const Sheet = (props: SheetProps) => {
+  const actionSheetRef = useRef<ActionSheetRef>(null)
+
+  return (
+    <ActionSheet
+      ref={actionSheetRef}
+      id={props.sheetId}
+      statusBarTranslucent
+      gestureEnabled={true}
+      containerStyle={{ backgroundColor: '#BFD7EA' }}
+      indicatorStyle={{ backgroundColor: 'rgba(71, 87, 114, 0.13)' }}>
+      <MenuButton title="操作 一" onPress={() => console.log('action 1')} />
+      <MenuButton title="操作 二" onPress={() => console.log('action 2')} />
+      <MenuButton title="操作 三" color={'#c0392b'} onPress={() => console.log('action 3...')} />
+    </ActionSheet>
+  )
+}
+
+registerSheet('menu-sheet', Sheet)
+
+export default Sheet

src/components/actions-sheet/index.ts

@@ -0,0 +1,16 @@
+import { registerSheet } from 'react-native-actions-sheet'
+import ConfirmSheet from './ConfirmSheet'
+import './MenuSheet'
+
+/**
+ * Registering the sheets here because otherwise sheet closes on
+ * hot reload during development.
+ */
+registerSheet('confirm-sheet', ConfirmSheet, 'global')
+
+export {}
+
+/**
+ * Since we are not importing our Sheets in any component or file, we want to make sure
+ * they are bundled by the JS bundler. Hence we will import this file in App.js.
+ */

src/components/common/Input.tsx

@@ -1,15 +1,8 @@
-import React from 'react'
-import {
-  TextInput,
-  View,
-  ViewPropTypes,
-  TextInputProps as NativeTextInputProps,
-  ViewStyle,
-  TextStyle
-} from 'react-native'
-import { Text } from './Text'
 import { useTheme } from '@src/theme'
 import { ITheme } from '@src/types'
+import React from 'react'
+import { TextInput, TextInputProps as NativeTextInputProps, TextStyle, View, ViewStyle } from 'react-native'
+import { Text } from './Text'
 
 export interface TextInputProps extends NativeTextInputProps {
   label?: string

src/components/common/Text.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { useTheme } from '@src/theme'
-import { Text as RNText, TextProps as NativeTextProps, StyleSheet, TextStyle } from 'react-native'
 import { ITheme } from '@src/types'
 import { validKey } from '@src/utils'
+import React from 'react'
+import { Text as RNText, TextProps as NativeTextProps, TextStyle } from 'react-native'
 
 // Possible value for prop "type" for Text
 const HEADING = 'heading'

src/components/toast/ToastProvider.tsx

@@ -1,6 +1,7 @@
 /**
  * Created by leon<[email protected]> on 22/3/10.
  */
+import { logInfo } from '@src/helper/logger'
 import { translate } from '@src/i18n'
 import React, { useState } from 'react'
 import { TextStyle } from 'react-native'
@@ -15,19 +16,23 @@ type Props = {
 
 const ToastProvider = ({ children }: Props) => {
   const [toast, setToast] = useState<ToastComponent | undefined>(undefined)
-  const [toastPosition, setToastPosition] = useState<ToastPositionType>('bottom')
+  const [toastPosition, setToastPosition] = useState<ToastPositionType>('center')
   const [toastOpacity, setToastOpacity] = useState<number>(1)
 
   const showToast = (opts: ToastShowType) => {
-    if (typeof opts !== 'string') {
+    logInfo('ToastProvider', 'showToast', 'opts', typeof opts, opts)
+
+    if (opts === undefined) {
+      return
+    } else if (typeof opts === 'object') {
       const { text, position, duration, callback, opacity } = opts
 
-      setToastPosition(position || 'bottom')
+      setToastPosition(position || 'center')
       setToastOpacity(opacity || 1)
 
       toast?.show(text, duration || 1500, callback)
     } else {
-      toast?.show(opts)
+      toast?.show(opts.toString())
     }
   }
 

src/helper/logger.ts

@@ -41,3 +41,11 @@
 export const logError = (error: any) => {
   console.log(error)
 }
+
+export const logInfo = (...info: any[]) => {
+  if (info[0] instanceof Error) {
+    console.error(info)
+  } else {
+    console.log(...info)
+  }
+}