react-native-boxes 1.4.41 → 1.4.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.4.41",
+  "version": "1.4.43",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {

package/src/Analytics.ts

@@ -0,0 +1,29 @@
+export const ViewType = {
+    BUTTON: 'button',
+    TEXT: 'text',
+    DIALOG: 'dialog',
+    DROPDOWN: 'dropdown',
+    WEBVIEW: 'webview',
+    BOX: 'box',
+    SWITCH: 'switch',
+    IMAGE: 'image',
+    TOOLBAR: 'toolbar',
+    BOTTOMBAR: 'bottombar'
+}
+export const TrackerUtils = {
+    textOf(value: any) {
+        if (typeof value == 'string') {
+            return value
+        }
+        if (typeof value == 'object') {
+            return 'object'
+        }
+        return "undefined"
+    }
+}
+export const UAType = {
+    CLICK: 'click',
+    VIEW: 'view',
+    NAVIGATE: 'navigate'
+}
+export type AnalyticTracker = (action: string, view: string, text?: string, extra?: any) => void

package/src/Bar.tsx

@@ -8,6 +8,7 @@ import { Icon, getIcon } from "./Image";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { PressableView } from "./Button";
 import { isDesktop, isWeb } from "./utils";
+import { UAType, ViewType } from "./Analytics";
 
 export interface Option {
     id: string,
@@ -88,6 +89,7 @@ export function SimpleToolbar(props: SimpleToolbarProps) {
                     margin: 0,
                 }}>
                     <PressableView onPress={() => {
+                        theme.onTrack(UAType.CLICK, ViewType.TOOLBAR, 'back')
                         props.onHomePress && props.onHomePress()
                     }}>
                         {HomeIcon && <HomeIcon color={props.forgroundColor || theme.colors.invert.text} />}
@@ -109,6 +111,7 @@ export function SimpleToolbar(props: SimpleToolbarProps) {
                                     key={opt.id}
                                     accessibilityHint={title}
                                     onPress={() => {
+                                        theme.onTrack(UAType.CLICK, ViewType.TOOLBAR, 'option-' + opt.id)
                                         opt.onClick && opt.onClick(opt.id)
                                     }}>
                                     <ActionIcon
@@ -165,7 +168,6 @@ export function BottomNavBar(props: ViewProps &
             <PressableView
                 style={{
                     flex: 1,
-                    backgroundColor: 'red',
                     justifyContent: 'center',
                     alignItems: 'center',
                     margin: 0,
@@ -176,6 +178,7 @@ export function BottomNavBar(props: ViewProps &
                 key={op.id}
                 onPress={() => {
                     op.onClick && op.onClick(op.id)
+                    theme.onTrack(UAType.CLICK, ViewType.BOTTOMBAR, 'option-' + op.id)
                     props.onSelect(op.id)
                 }}>
                 <Center >

package/src/Button.tsx

@@ -4,6 +4,7 @@ import { ThemeContext } from "./ThemeContext";
 import { Center, HBox } from "./Box";
 import { TextView, TextViewProps } from "./Text";
 import { getIcon } from "./Image";
+import { TrackerUtils, UAType, ViewType } from "./Analytics";
 
 export type ButtonViewProps = TextProps & TouchableHighlightProps & { icon?: any, text?: string, textStyle?: TextStyle, children?: any }
 
@@ -40,6 +41,10 @@ export function TransparentButton(props: TextProps & TouchableHighlightProps
     return (
         <TouchableHighlight
             {...props}
+            onPress={(e) => {
+                props.onPress && props.onPress(e)
+                theme.onTrack(UAType.CLICK, ViewType.BUTTON, (props.text || TrackerUtils.textOf(props.children)))
+            }}
             onPressIn={onPressIn}
             onPressOut={onPressOut}
             underlayColor={theme.colors.transparent}
@@ -108,6 +113,10 @@ export function ButtonView(props: ButtonViewProps) {
     return (
         <TouchableHighlight
             {...props}
+            onPress={(e) => {
+                props.onPress && props.onPress(e)
+                theme.onTrack(UAType.CLICK, ViewType.BUTTON, (props['aria-label'] ? props['aria-label'] + '-' : '') + (props.text || TrackerUtils.textOf(props.children)))
+            }}
             onPressIn={onPressIn}
             onPressOut={onPressOut}
             underlayColor={props.underlayColor || theme.colors.accentLight}
@@ -182,6 +191,10 @@ export function RightIconButton(props: ButtonViewProps) {
     return (
         <TouchableHighlight
             {...props}
+            onPress={(e) => {
+                props.onPress && props.onPress(e)
+                theme.onTrack(UAType.CLICK, ViewType.BUTTON, (props.text || TrackerUtils.textOf(props.children)))
+            }}
             onPressIn={onPressIn}
             onPressOut={onPressOut}
             underlayColor={props.underlayColor || theme.colors.accentLight}
@@ -301,22 +314,37 @@ export function LoadingButton(props: TextProps & TouchableHighlightProps
 
 
 export function PressableView(props: PressableProps) {
-
     //@ts-ignore
     return (<Pressable {...props} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1.0 }, props.style]} />)
 }
 
-export function SwitchView(props: SwitchProps) {
+export function SwitchView(props: SwitchProps & { text: string, orientation: 'row' | 'column' }) {
     const theme = useContext(ThemeContext)
     return (
-        <Switch
-            trackColor={{
-                false: theme.colors.caption,
-                true: theme.colors.success
-            }}
-            thumbColor={props.value ? theme.colors.invert.text : theme.colors.text}
-            ios_backgroundColor={theme.colors.caption}
-            {...props}
-        />
+        <HBox style={[{
+            flexDirection: props.orientation || 'row',
+            alignContent: 'center',
+            alignItems: 'center'
+        }, props.style]}>
+            <Switch
+                trackColor={{
+                    false: theme.colors.caption,
+                    true: theme.colors.success
+                }}
+                thumbColor={props.value ? theme.colors.invert.text : theme.colors.text}
+                ios_backgroundColor={theme.colors.caption}
+                onValueChange={(value) => {
+                    props.onValueChange && props.onValueChange(value)
+                    theme.onTrack(UAType.CLICK, ViewType.SWITCH, (props.text) + '-' + value, { value })
+                }}
+                {...props}
+            />
+            {
+                props.text && (
+                    <TextView>{props.text}</TextView>
+                )
+            }
+        </HBox>
+
     )
 }

package/src/Modal.tsx

@@ -11,6 +11,7 @@ import { CompositeTextInputView, CompositeTextInputViewProps } from './Input';
 import * as WebBrowser from 'expo-web-browser';
 import { TransparentCenterToolbar } from './Bar';
 import { GestureDetector, Gesture, Directions } from 'react-native-gesture-handler';
+import { TrackerUtils, UAType, ViewType } from './Analytics';
 
 
 export type BottomSheetProps = {
@@ -37,6 +38,8 @@ export const BottomSheet = (props: BottomSheetProps) => {
 
     useEffect(() => {
         setModalVisible(props.visible)
+        if (props.visible)
+            theme.onTrack(UAType.VIEW, ViewType.DIALOG, (TrackerUtils.textOf(props.title)))
     }, [props.visible])
 
     function cancel() {
@@ -264,6 +267,7 @@ export function Expand(props: ViewProps & {
     const toggleExpand = () => {
         let newValue = !expanded
         setExpanded(newValue);
+        theme.onTrack(UAType.CLICK, ViewType.DIALOG, (newValue ? 'expand' : 'collaps') + '-' + props.title)
     };
     var onLayoutContent = (event: LayoutChangeEvent) => {
         if (!contentHeight) {
@@ -402,6 +406,11 @@ export const DropDownView = (props: DropDownViewProps) => {
     };
     const onSelect = (selectedId: string, opt: DropDownViewOption) => {
         props.onSelect(selectedId, opt)
+        theme.onTrack(UAType.CLICK, ViewType.DROPDOWN, 'select-' + props.title, {
+            value: selectedId,
+            title: opt.title,
+            displayType: displayType
+        })
         setVisible(false)
     }
     const shouldShowLabel = props.listType == 'horizontal-list' ? !visible : true
@@ -656,11 +665,12 @@ export function ConfirmationDialog(props: ConfirmationDialogProps) {
                     padding: theme.dimens.space.lg,
                     textAlign: 'center'
                 }}>{props.message}</TextView>}
-                <ButtonView text={confirmText as string} onPress={() => {
+                <ButtonView aria-label={props.title as string} text={confirmText as string} onPress={() => {
                     props.onDismiss && props.onDismiss()
                     props.onConfirm && props.onConfirm()
                 }} />
                 <TertiaryButtonView
+                    aria-label={props.title as string}
                     style={{
                         marginTop: 0
                     }}
@@ -703,6 +713,10 @@ export function WebBrowserView(props: {
     };
 
     useEffect(() => {
+        theme.onTrack(UAType.VIEW, ViewType.WEBVIEW, 'webview-' + props.title, {
+            url: props.url,
+            message: props.openMessage
+        })
         if (result == null)
             _handlePressButtonAsync()
     }, [])

package/src/ThemeContext.ts

@@ -3,6 +3,7 @@ import { Colors, Dimens, createStyle, DarkColors, LightColors, Fonts } from "./S
 import { randomColor } from "./utils"
 import { I18n, _i18n } from "./I18n"
 import { EdgeInsets } from "react-native-safe-area-context"
+import { AnalyticTracker } from "./Analytics"
 const DEFAULT_STYLE = createStyle(Dimens, Colors, Fonts)
 export class Theme {
     appname: string = ''
@@ -11,6 +12,7 @@ export class Theme {
     colors: typeof Colors
     fonts: typeof Fonts
     i18n: I18n
+    onTrack: AnalyticTracker
     insets?: EdgeInsets
     randomColor = randomColor
     constructor(appname = '',
@@ -18,7 +20,8 @@ export class Theme {
         dimens = Dimens,
         fonts = Fonts,
         styles = DEFAULT_STYLE,
-        i18n = _i18n) {
+        i18n = _i18n,
+        onTrack = () => { }) {
         this.appname = appname
         this.fonts = fonts ?? Fonts
         this.colors = colors ?? Colors
@@ -26,9 +29,14 @@ export class Theme {
         this.fonts = fonts ?? Fonts
         this.styles = styles ?? createStyle(this.dimens, this.colors, this.fonts)
         this.i18n = i18n
+        this.onTrack = onTrack
     }
     setInsets(insets: EdgeInsets) {
         this.insets = insets
     }
+
+    setTracking(onTrack: AnalyticTracker) {
+        this.onTrack = onTrack
+    }
 }
 export const ThemeContext = createContext(new Theme())