react-native-boxes 1.4.22 → 1.4.24

package/package.json

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

package/src/Input.tsx

@@ -68,16 +68,7 @@ export function TextInputView(props: TextInputProps & {
     )
 }
 
-
-/**
- * Note: if input is inside a ScrollView in heirarchy anywhere then add keyboardShouldPersistTaps={'handled'}
- * to the scrollview else the icon click wont work
- * In case, you textinput is getting hidden due to keyboard see https://stackoverflow.com/a/77563800/6865753
-
- * @param props 
- * @returns 
- */
-export function CompositeTextInputView(props: TextInputProps & {
+export type CompositeTextInputViewProps = TextInputProps & {
     hint?: string,
     alertText?: string,
     alertTextColor?: string,
@@ -87,7 +78,17 @@ export function CompositeTextInputView(props: TextInputProps & {
     icon?: 'close' | 'eye' | string | React.Component,
     onIconPress?: ((event: GestureResponderEvent) => void) | undefined,
     textInputProps?: TextInputProps,
-}) {
+    onDone?: (txt: string) => void
+}
+/**
+ * Note: if input is inside a ScrollView in heirarchy anywhere then add keyboardShouldPersistTaps={'handled'}
+ * to the scrollview else the icon click wont work
+ * In case, you textinput is getting hidden due to keyboard see https://stackoverflow.com/a/77563800/6865753
+
+ * @param props 
+ * @returns 
+ */
+export function CompositeTextInputView(props: CompositeTextInputViewProps) {
     const theme = useContext(ThemeContext)
     const [text, setText] = useState(props.initialText)
     const [alerttext, setAlertText] = useState(props.alertText)
@@ -187,6 +188,9 @@ export function CompositeTextInputView(props: TextInputProps & {
                     }}
                 >{props.placeholder || ''}</TextView>}
                 <TextComponent
+                    onSubmitEditing={(e) => {
+                        props.onDone && props.onDone(text!)
+                    }}
                     selectionColor={props.selectionColor || theme.colors.accent}
                     secureTextEntry={props.secureTextEntry}
                     placeholderTextColor={theme.colors.caption}

package/src/List.tsx

@@ -2,7 +2,7 @@ import { ActivityIndicator, Text, View, ViewProps } from "react-native"
 import { Box, CardView, Center, HBox, VBox } from "./Box"
 import { getIcon } from "./Image"
 import { Icon } from "@expo/vector-icons/build/createIconSet"
-import { Caption, Subtitle, TextView } from "./Text"
+import { Caption, Subtitle, TextView, TitleText } from "./Text"
 import { useContext } from "react"
 import { ThemeContext } from "./ThemeContext"
 import { PressableView } from "./Button"
@@ -49,10 +49,12 @@ export type SimpleDatatableViewItemProps = {
     onPress?: () => void,
     flexRatio?: [number, number, number]
 }
+
+
 export function SimpleDatatlistViewItem(props: SimpleDatatableViewItemProps & ViewProps) {
-    const RightIcon = getIcon(props.icon, true)
+    const Icon = getIcon(props.icon, true)
     const theme = useContext(ThemeContext)
-    let flexRatio = props.flexRatio || [1, 8, 1]
+    let flexRatio = props.flexRatio || [1.5, 7.5, 1]
     let [left, middle, right] = flexRatio
     const ttl = left + right + middle
     const percentages = {
@@ -80,7 +82,7 @@ export function SimpleDatatlistViewItem(props: SimpleDatatableViewItemProps & Vi
                     width: `${percentages.left}%`,
                     maxWidth: 30
                 }}>
-                    {RightIcon && <RightIcon style={{
+                    {Icon && <Icon style={{
                         padding: theme.dimens.space.md,
                         paddingStart: 0,
                     }} />}
@@ -95,14 +97,14 @@ export function SimpleDatatlistViewItem(props: SimpleDatatableViewItemProps & Vi
                     justifyContent: 'flex-start',
                     alignContent: 'flex-start',
                 }}>
-                    {props.title && (<Subtitle style={{
+                    {props.title && (<TitleText style={{
                         marginBottom: 0,
                         paddingBottom: 0,
-                    }}>{props.title}</Subtitle>)}
+                        padding: 0,
+                    }}>{props.title}</TitleText>)}
                     {props.subtitle && (<TextView style={{
                         marginTop: 0,
                         padding: 0,
-                        paddingTop: theme.dimens.space.sm,
                     }}>{props.subtitle}</TextView>)}
                     {props.body && (<Caption style={{
                         margin: 0,