react-native-boxes 1.4.30 → 1.4.32

package/package.json

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

package/src/Modal.tsx

@@ -364,22 +364,22 @@ 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
 
     initialVisile?: Boolean,
     title?: string,
-    listType?: 'sheet' | 'horizontal-list'
     displayType?: 'button' | 'input',
-    onRenderOption?: (opt: DropDownViewOption) => any,
+    onRenderOption?: (opt: DropDownViewOption, setSelected?: (selectedId: string, opt: DropDownViewOption) => void) => any,
     forceDialogSelectOnWeb?: Boolean
     swipeToCloseDisabled?: boolean
 } & CompositeTextInputViewProps
@@ -393,11 +393,16 @@ 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 onSelect = (selectedId: string, opt: DropDownViewOption) => {
+        props.onSelect(selectedId, opt)
+        setVisible(false)
+    }
     const shouldShowLabel = props.listType == 'horizontal-list' ? !visible : true
     if (Platform.OS == 'web' && !props.forceDialogSelectOnWeb) {
         return (
@@ -416,7 +421,7 @@ export const DropDownView = (props: DropDownViewProps) => {
                 {
                     props.options.map(opt => {
                         if (props.onRenderOption) {
-                            return props.onRenderOption(opt)
+                            return props.onRenderOption(opt, onSelect)
                         }
                         return (
                             <option
@@ -437,6 +442,12 @@ export const DropDownView = (props: DropDownViewProps) => {
                 {
                     (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
@@ -454,18 +465,20 @@ export const DropDownView = (props: DropDownViewProps) => {
                             renderItem={(item) => {
                                 const opt = item.item
                                 if (props.onRenderOption) {
-                                    return props.onRenderOption(opt)
+                                    return props.onRenderOption(opt, onSelect)
                                 }
                                 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.5,
-                                            height: theme.dimens.space.xl * 1.5,
-                                            backgroundColor: props.selectedId == opt?.id ?
+                                            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
                                         }}>
@@ -493,7 +506,7 @@ export const DropDownView = (props: DropDownViewProps) => {
                                 {
                                     props.options.map((opt, idx) => {
                                         if (props.onRenderOption) {
-                                            return props.onRenderOption(opt)
+                                            return props.onRenderOption(opt, onSelect)
                                         }
                                         return (
                                             <TertiaryButtonView
@@ -563,7 +576,6 @@ export const DropDownView = (props: DropDownViewProps) => {
 }
 
 
-
 export type ConfirmationDialogProps = {
     visible: boolean,
     title?: string | React.Component,