@hitesh0009/react-native-basic-form 1.1.7 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Form.js +28 -8
  2. package/dist/types.d.ts +9 -1
  3. package/package.json +1 -1
  4. package/src/Form.tsx +68 -17
  5. package/src/types.ts +12 -2
package/dist/Form.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FlatList, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native";
2
- export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyle, inputTextStyle, buttonContainerStyle, buttonTextStyle, headerIcon, headerIconStyle, headerTextStyle, imageProps, flatlistProps, textInputProps, textProp, headerText, headerContainerStyle, containerStyle, imageContainerStyle }) => {
2
+ export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyle, inputTextStyle, buttonContainerStyle, buttonTextStyle, headerIcon, headerIconStyle, headerTextStyle, imageProps, flatlistProps, textInputProps, textProp, headerText, headerContainerStyle, containerStyle, imageContainerStyle, touchableOpacityProp, inputTextContainerStyle, inputTextGroupContainerStyle, ButtonContainerStyle, buttonGroupContainerStyle, buttonGroupStyle, }) => {
3
3
  return (<View style={[{ gap: 20 }, containerStyle]}>
4
4
  {(headerIcon || headerText) && (<View style={[{ flexDirection: "row", gap: 10 }, headerContainerStyle]}>
5
5
  {headerIcon && (<View style={imageContainerStyle}>
@@ -10,16 +10,36 @@ export const Form = ({ data, gap_bwt_keyValue = 10, gap_bwt_keys = 12, lableStyl
10
10
  </Text>)}
11
11
  </View>)}
12
12
 
13
- <FlatList {...flatlistProps} data={data} keyExtractor={(item) => item.id} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
13
+ <FlatList {...flatlistProps} data={data} keyExtractor={(item, index) => { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : index; }} ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }}/>} renderItem={({ item }) => (<View style={{ gap: gap_bwt_keyValue }}>
14
14
  {item.label && (<Text style={[styles.lable, lableStyle]}>{item.label}</Text>)}
15
15
 
16
- {item.input && (<TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={item.input.placeholder} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keyboardType}/>)}
16
+ {item.input && (<View style={inputTextContainerStyle}>
17
+ <TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={item.input.placeholder} value={item.input.value} onChangeText={item.input.onChangeText} keyboardType={item.input.keyboardType}/>
18
+ </View>)}
17
19
 
18
- {item.button && (<TouchableOpacity onPress={item.button.onPress} style={[styles.button_container, buttonContainerStyle]}>
19
- <Text style={[styles.button_text, buttonTextStyle]}>
20
- {item.button.label}
21
- </Text>
22
- </TouchableOpacity>)}
20
+ {item.inputTextGroup &&
21
+ item.inputTextGroup.map((inp, index) => (<View key={index} style={inputTextGroupContainerStyle}>
22
+ <TextInput {...textInputProps} style={[styles.inputtext, inputTextStyle]} placeholder={inp.placeholder} value={inp.value} onChangeText={inp.onChangeText} keyboardType={inp.keyboardType}/>
23
+ </View>))}
24
+
25
+ {item.button && (<View style={ButtonContainerStyle}>
26
+ <TouchableOpacity {...touchableOpacityProp} onPress={item.button.onPress} style={[styles.button_container, buttonContainerStyle]}>
27
+ <Text style={[styles.button_text, buttonTextStyle]}>
28
+ {item.button.label}
29
+ </Text>
30
+ </TouchableOpacity>
31
+ </View>)}
32
+
33
+ {item.buttonGroup && (<View style={[
34
+ { flexDirection: "row", gap: 10 },
35
+ buttonGroupContainerStyle,
36
+ ]}>
37
+ {item.buttonGroup.map((btn, index) => (<TouchableOpacity key={index} onPress={btn.onPress} style={[styles.button_container, buttonGroupStyle]}>
38
+ <Text style={[styles.button_text, buttonTextStyle]}>
39
+ {btn.label}
40
+ </Text>
41
+ </TouchableOpacity>))}
42
+ </View>)}
23
43
  </View>)}/>
24
44
  </View>);
25
45
  };
package/dist/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
1
+ import type { FlatListProps, ImageProps, ImageSourcePropType, ImageStyle, TextInputProps, TextProps, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native";
2
2
  export type FormInput = {
3
3
  placeholder?: string;
4
4
  value: string;
@@ -16,6 +16,8 @@ export type FormItem = {
16
16
  label?: string;
17
17
  input?: FormInput;
18
18
  button?: FormButton;
19
+ buttonGroup?: FormButton[];
20
+ inputTextGroup?: FormInput[];
19
21
  };
20
22
  export type FormProps = {
21
23
  data: FormItem[];
@@ -37,4 +39,10 @@ export type FormProps = {
37
39
  containerStyle?: ViewStyle;
38
40
  textInputProps?: TextInputProps;
39
41
  imageContainerStyle?: ViewStyle;
42
+ touchableOpacityProp?: TouchableOpacityProps;
43
+ inputTextContainerStyle?: ViewStyle;
44
+ ButtonContainerStyle?: ViewStyle;
45
+ buttonGroupContainerStyle?: ViewStyle;
46
+ buttonGroupStyle?: ViewStyle;
47
+ inputTextGroupContainerStyle?: ViewStyle;
40
48
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitesh0009/react-native-basic-form",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "description": "A lightweight, data-driven form renderer for React Native with fully controlled inputs and flexible styling.",
5
5
  "keywords": [
6
6
  "react-native",
package/src/Form.tsx CHANGED
@@ -18,8 +18,10 @@ export const Form: React.FC<FormProps> = ({
18
18
  buttonContainerStyle,
19
19
  buttonTextStyle,
20
20
  headerIcon,
21
+
21
22
  headerIconStyle,
22
23
  headerTextStyle,
24
+
23
25
  imageProps,
24
26
  flatlistProps,
25
27
  textInputProps,
@@ -27,7 +29,16 @@ export const Form: React.FC<FormProps> = ({
27
29
  headerText,
28
30
  headerContainerStyle,
29
31
  containerStyle,
30
- imageContainerStyle
32
+ imageContainerStyle,
33
+ touchableOpacityProp,
34
+
35
+ inputTextContainerStyle,
36
+ inputTextGroupContainerStyle,
37
+
38
+ ButtonContainerStyle,
39
+
40
+ buttonGroupContainerStyle,
41
+ buttonGroupStyle,
31
42
  }) => {
32
43
  return (
33
44
  <View style={[{ gap: 20 }, containerStyle]}>
@@ -53,7 +64,7 @@ export const Form: React.FC<FormProps> = ({
53
64
  <FlatList<FormItem>
54
65
  {...flatlistProps}
55
66
  data={data}
56
- keyExtractor={(item) => item.id}
67
+ keyExtractor={(item,index) => item.id ?? index}
57
68
  ItemSeparatorComponent={() => <View style={{ height: gap_bwt_keys }} />}
58
69
  renderItem={({ item }) => (
59
70
  <View style={{ gap: gap_bwt_keyValue }}>
@@ -62,25 +73,65 @@ export const Form: React.FC<FormProps> = ({
62
73
  )}
63
74
 
64
75
  {item.input && (
65
- <TextInput
66
- {...textInputProps}
67
- style={[styles.inputtext, inputTextStyle]}
68
- placeholder={item.input.placeholder}
69
- value={item.input.value}
70
- onChangeText={item.input.onChangeText}
71
- keyboardType={item.input.keyboardType}
72
- />
76
+ <View style={inputTextContainerStyle}>
77
+ <TextInput
78
+ {...textInputProps}
79
+ style={[styles.inputtext, inputTextStyle]}
80
+ placeholder={item.input.placeholder}
81
+ value={item.input.value}
82
+ onChangeText={item.input.onChangeText}
83
+ keyboardType={item.input.keyboardType}
84
+ />
85
+ </View>
73
86
  )}
74
87
 
88
+ {item.inputTextGroup &&
89
+ item.inputTextGroup.map((inp, index) => (
90
+ <View key={index} style={inputTextGroupContainerStyle}>
91
+ <TextInput
92
+ {...textInputProps}
93
+ style={[styles.inputtext, inputTextStyle]}
94
+ placeholder={inp.placeholder}
95
+ value={inp.value}
96
+ onChangeText={inp.onChangeText}
97
+ keyboardType={inp.keyboardType}
98
+ />
99
+ </View>
100
+ ))}
101
+
75
102
  {item.button && (
76
- <TouchableOpacity
77
- onPress={item.button.onPress}
78
- style={[styles.button_container, buttonContainerStyle]}
103
+ <View style={ButtonContainerStyle}>
104
+ <TouchableOpacity
105
+ {...touchableOpacityProp}
106
+ onPress={item.button.onPress}
107
+ style={[styles.button_container, buttonContainerStyle]}
108
+ >
109
+ <Text style={[styles.button_text, buttonTextStyle]}>
110
+ {item.button.label}
111
+ </Text>
112
+ </TouchableOpacity>
113
+ </View>
114
+ )}
115
+
116
+ {item.buttonGroup && (
117
+ <View
118
+ style={[
119
+ { flexDirection: "row", gap: 10 },
120
+ buttonGroupContainerStyle,
121
+ ]}
79
122
  >
80
- <Text style={[styles.button_text, buttonTextStyle]}>
81
- {item.button.label}
82
- </Text>
83
- </TouchableOpacity>
123
+ {item.buttonGroup.map((btn, index) => (
124
+ <TouchableOpacity
125
+ key={index}
126
+ onPress={btn.onPress}
127
+ style={[styles.button_container, buttonGroupStyle]}
128
+ >
129
+ <Text style={[styles.button_text, buttonTextStyle]}>
130
+ {btn.label}
131
+ </Text>
132
+ </TouchableOpacity>
133
+ ))}
134
+ </View>
84
135
  )}
85
136
  </View>
86
137
  )}
package/src/types.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { TouchableOpacity } from "./../node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.d";
1
2
  import type {
2
3
  FlatListProps,
3
4
  ImageProps,
@@ -6,6 +7,7 @@ import type {
6
7
  TextInputProps,
7
8
  TextProps,
8
9
  TextStyle,
10
+ TouchableOpacityProps,
9
11
  ViewStyle,
10
12
  } from "react-native";
11
13
 
@@ -28,6 +30,8 @@ export type FormItem = {
28
30
  label?: string;
29
31
  input?: FormInput;
30
32
  button?: FormButton;
33
+ buttonGroup?: FormButton[];
34
+ inputTextGroup?: FormInput[];
31
35
  };
32
36
 
33
37
  export type FormProps = {
@@ -53,6 +57,12 @@ export type FormProps = {
53
57
 
54
58
  headerContainerStyle?: ViewStyle;
55
59
  containerStyle?: ViewStyle;
56
- textInputProps?: TextInputProps
57
- imageContainerStyle?:ViewStyle
60
+ textInputProps?: TextInputProps;
61
+ imageContainerStyle?: ViewStyle;
62
+ touchableOpacityProp?: TouchableOpacityProps;
63
+ inputTextContainerStyle?: ViewStyle;
64
+ ButtonContainerStyle?: ViewStyle;
65
+ buttonGroupContainerStyle?: ViewStyle;
66
+ buttonGroupStyle?: ViewStyle;
67
+ inputTextGroupContainerStyle?:ViewStyle
58
68
  };