react-native-boxes 1.4.29 → 1.4.31

package/package.json

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

package/src/Modal.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useContext, useEffect, useRef, useState } from 'react';
-import { Animated, Button, Easing, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps, ViewStyle } from 'react-native';
+import { Animated, Button, Easing, FlatList, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps, ViewStyle } from 'react-native';
 import { getIcon, Icon, IconProps } from './Image';
 import { getNavParamsFromDeeplink, isDesktop, isWeb } from './utils';
 import { ThemeContext } from './ThemeContext';
 import { Center, HBox, VBox, VPage } from './Box';
-import { Subtitle, TextView, Title } from './Text';
+import { Caption, Subtitle, TextView, Title } from './Text';
 import { ButtonView, ButtonViewProps, LoadingButton, PressableView, TertiaryButtonView } from './Button';
 import { CompositeTextInputView, CompositeTextInputViewProps } from './Input';
 import * as WebBrowser from 'expo-web-browser';
@@ -364,12 +364,14 @@ export function Expand(props: ViewProps & {
     );
 }
 
+
 export type DropDownViewOption = {
     id: string
     value: any
     title?: string
 }
 export type DropDownViewProps = {
+    listType?: 'sheet' | 'horizontal-list'
     options: DropDownViewOption[]
     selectedId: string,
     onSelect: (selectedId: string, opt: DropDownViewOption) => void
@@ -391,12 +393,13 @@ export const DropDownView = (props: DropDownViewProps) => {
     const displayType = props.displayType || 'input'
     const theme = useContext(ThemeContext)
     const [visible, setVisible] = useState(props.initialVisile || false)
+    const flatlistRef = useRef<FlatList<any>>()
 
     const getSelected = (): DropDownViewOption | undefined => {
         let se = props.options.find(op => op.id == props.selectedId)
         return se
     };
-
+    const shouldShowLabel = props.listType == 'horizontal-list' ? !visible : true
     if (Platform.OS == 'web' && !props.forceDialogSelectOnWeb) {
         return (
             <select
@@ -428,78 +431,140 @@ export const DropDownView = (props: DropDownViewProps) => {
             </select>
         )
     }
-
     else {
         return (
             <VBox style={props.style}>
-                <BottomSheet
-                    swipeToCloseDisabled={props.swipeToCloseDisabled}
-                    visible={visible as boolean}
-                    onDismiss={() => {
-                        setVisible(false)
-                    }}
-                    title={props.title || ''} >
-                    {
-                        props.options.map((opt, idx) => {
-                            if (props.onRenderOption) {
-                                return props.onRenderOption(opt)
-                            }
-                            return (
-                                <TertiaryButtonView
-                                    onPress={() => {
-                                        setVisible(false)
-                                        props.onSelect(opt.id, opt)
-                                    }}
-                                    style={{
-                                        padding: 0,
-                                        paddingBottom: idx == props.options.length - 1 ? theme.dimens.space.md : 0,
-                                        paddingTop: idx == 0 ? theme.dimens.space.md : 0,
-                                    }}
-                                    key={opt.id} >{opt.title || opt.value}</TertiaryButtonView>
-                            )
-                        })
-                    }
-                </BottomSheet>
 
                 {
-                    displayType == 'button' ? (
+                    (visible && props.listType == 'horizontal-list') ? (
+                        <FlatList
+                            style={[{
+                                marginTop: theme.dimens.space.sm,
+                                marginBottom: theme.dimens.space.sm,
+                            }, props.style]}
+                            //@ts-ignore
+                            ref={flatlistRef}
+                            ItemSeparatorComponent={() => {
+                                return (
+                                    <View
+                                        style={{
+                                            height: "100%",
+                                            width: theme.dimens.space.sm,
+                                            backgroundColor: theme.colors.forground,
 
-                        //@ts-ignore
-                        <ButtonView
-                            {...props}
-                            onPress={() => {
-                                setVisible(true)
+                                        }}
+                                    />
+                                );
                             }}
-                            text={getSelected()?.title || getSelected()?.id || 'select'} style={props.style}>
-                        </ButtonView>
-                    ) : (
-                        //@ts-ignore
-                        <PressableView
-                            {...props}
-                            onPress={() => {
-                                setVisible(true)
+                            horizontal={true}
+                            data={props.options}
+                            renderItem={(item) => {
+                                const opt = item.item
+                                if (props.onRenderOption) {
+                                    return props.onRenderOption(opt)
+                                }
+                                return (
+                                    <PressableView
+                                        onPress={() => {
+                                            setVisible(false)
+                                            props.onSelect(opt.id, opt)
+                                        }}>
+                                        <Center style={{
+                                            borderWidth: 1,
+                                            borderRadius: theme.dimens.space.md,
+                                            width: theme.dimens.space.xl * 1.4,
+                                            height: theme.dimens.space.xl * 1.4,
+                                            borderColor: props.selectedId == opt?.id ?
+                                                theme.colors.accent : theme.colors.background,
+                                            padding: theme.dimens.space.md
+                                        }}>
+                                            <Caption style={{
+                                                color: theme.colors.text,
+                                            }}>{opt?.title || opt.id}</Caption>
+
+                                        </Center>
+                                    </PressableView>
+                                )
                             }}
-                        >
-                            <CompositeTextInputView
-                                readOnly={true}
-                                placeholder={props.title}
+                            keyExtractor={(item) => item?.id || `${Date.now()}`}
+                            extraData={props.selectedId}
+                        />
+                    ) :
+
+                        (
+                            <BottomSheet
+                                swipeToCloseDisabled={props.swipeToCloseDisabled}
+                                visible={visible as boolean}
+                                onDismiss={() => {
+                                    setVisible(false)
+                                }}
+                                title={props.title || ''} >
+                                {
+                                    props.options.map((opt, idx) => {
+                                        if (props.onRenderOption) {
+                                            return props.onRenderOption(opt)
+                                        }
+                                        return (
+                                            <TertiaryButtonView
+                                                onPress={() => {
+                                                    setVisible(false)
+                                                    props.onSelect(opt.id, opt)
+                                                }}
+                                                style={{
+                                                    padding: 0,
+                                                    paddingBottom: idx == props.options.length - 1 ? theme.dimens.space.md : 0,
+                                                    paddingTop: idx == 0 ? theme.dimens.space.md : 0,
+                                                }}
+                                                key={opt.id} >{opt.title || opt.value}</TertiaryButtonView>
+                                        )
+                                    })
+                                }
+                            </BottomSheet>
+                        )
+                }
+
+                {
+                    shouldShowLabel && (
+                        displayType == 'button' ? (
+
+                            //@ts-ignore
+                            <ButtonView
                                 {...props}
-                                value={getSelected()?.title || getSelected()?.id || props.title}
-                                onIconPress={() => { setVisible(true) }}
-                                icon={"caret-down"}
-                                pointerEvents="none"
-                                //@ts-ignore
-                                _textInputProps={{
-                                    caretHidden: true,
-                                    placeholder: props.title || 'select',
-                                    editable: false,
-                                    selectTextOnFocus: false
+                                onPress={() => {
+                                    setVisible(true)
                                 }}
-                                hint={props.title || 'select'}
-                                initialText={getSelected()?.title || getSelected()?.id} />
-                        </PressableView>
+                                text={getSelected()?.title || getSelected()?.id || 'select'} style={props.style}>
+                            </ButtonView>
+                        ) : (
+                            //@ts-ignore
+                            <PressableView
+                                {...props}
+                                onPress={() => {
+                                    setVisible(true)
+                                }}
+                            >
+                                <CompositeTextInputView
+                                    readOnly={true}
+                                    placeholder={props.title}
+                                    {...props}
+                                    value={getSelected()?.title || getSelected()?.id || props.title}
+                                    onIconPress={() => { setVisible(true) }}
+                                    icon={"caret-down"}
+                                    pointerEvents="none"
+                                    //@ts-ignore
+                                    _textInputProps={{
+                                        caretHidden: true,
+                                        placeholder: props.title || 'select',
+                                        editable: false,
+                                        selectTextOnFocus: false
+                                    }}
+                                    hint={props.title || 'select'}
+                                    initialText={getSelected()?.title || getSelected()?.id} />
+                            </PressableView>
+                        )
                     )
                 }
+
             </VBox>
 
         )
@@ -507,6 +572,8 @@ export const DropDownView = (props: DropDownViewProps) => {
 }
 
 
+
+
 export type ConfirmationDialogProps = {
     visible: boolean,
     title?: string | React.Component,