secullum-react-native-ui 4.19.0 → 4.19.1-beta.0
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.
|
@@ -3,6 +3,7 @@ import { IconProps } from 'react-native-vector-icons/Icon';
|
|
|
3
3
|
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
4
4
|
declare type DropDownItemData = {
|
|
5
5
|
label: string;
|
|
6
|
+
detail?: string;
|
|
6
7
|
value: any;
|
|
7
8
|
icon?: string;
|
|
8
9
|
nativeID?: string;
|
|
@@ -18,6 +19,7 @@ export interface DropDownProperties {
|
|
|
18
19
|
style?: StyleProp<ViewStyle>;
|
|
19
20
|
disabledStyle?: StyleProp<ViewStyle>;
|
|
20
21
|
labelStyle?: StyleProp<TextStyle>;
|
|
22
|
+
detailStyle?: StyleProp<TextStyle>;
|
|
21
23
|
inputStyle?: StyleProp<TextStyle>;
|
|
22
24
|
iconComponent?: React.ComponentClass<IconProps>;
|
|
23
25
|
nativeID?: string;
|
|
@@ -36,6 +36,16 @@ class DropDownItem extends React.PureComponent {
|
|
|
36
36
|
rowView: {
|
|
37
37
|
flexDirection: 'row'
|
|
38
38
|
},
|
|
39
|
+
labelWithDetail: {
|
|
40
|
+
flex: 1
|
|
41
|
+
},
|
|
42
|
+
detail: {
|
|
43
|
+
alignSelf: 'center',
|
|
44
|
+
paddingRight: 16,
|
|
45
|
+
fontFamily: theme.fontFamily1,
|
|
46
|
+
fontSize: 14,
|
|
47
|
+
color: theme.textColor2
|
|
48
|
+
},
|
|
39
49
|
iconView: {
|
|
40
50
|
width: 100,
|
|
41
51
|
alignItems: 'center',
|
|
@@ -55,7 +65,7 @@ class DropDownItem extends React.PureComponent {
|
|
|
55
65
|
return styles;
|
|
56
66
|
};
|
|
57
67
|
this.renderOpenDropDownItem = () => {
|
|
58
|
-
const { label, icon, iconComponent, nativeID } = this.props;
|
|
68
|
+
const { label, detail, detailStyle, icon, iconComponent, nativeID } = this.props;
|
|
59
69
|
const theme = (0, theme_1.getTheme)();
|
|
60
70
|
const styles = this.getStyles();
|
|
61
71
|
if (label && icon) {
|
|
@@ -70,7 +80,8 @@ class DropDownItem extends React.PureComponent {
|
|
|
70
80
|
}
|
|
71
81
|
else if (label && !icon) {
|
|
72
82
|
return (React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.rowView },
|
|
73
|
-
React.createElement(react_native_1.Text, { style: styles.modalItem }, label)
|
|
83
|
+
React.createElement(react_native_1.Text, { style: [styles.modalItem, detail ? styles.labelWithDetail : null] }, label),
|
|
84
|
+
detail ? (React.createElement(react_native_1.Text, { style: [styles.detail, detailStyle] }, detail)) : null));
|
|
74
85
|
}
|
|
75
86
|
else if (!label && icon) {
|
|
76
87
|
return (React.createElement(react_native_1.View, { nativeID: nativeID, style: styles.iconOnlyView }, iconComponent ? (React.createElement(iconComponent, {
|
|
@@ -292,8 +303,8 @@ class DropDown extends React.Component {
|
|
|
292
303
|
return styles;
|
|
293
304
|
};
|
|
294
305
|
this.renderItemsList = (filteredItems) => {
|
|
295
|
-
const { iconComponent, virtualized } = this.props;
|
|
296
|
-
const renderItem = ({ item, index }) => (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === filteredItems.length - 1, label: item.label, value: item.value, onPress: this.handleItemPress, icon: item.icon, iconComponent: iconComponent }));
|
|
306
|
+
const { iconComponent, virtualized, detailStyle } = this.props;
|
|
307
|
+
const renderItem = ({ item, index }) => (React.createElement(DropDownItem, { nativeID: item.nativeID, first: index === 0, last: index === filteredItems.length - 1, label: item.label, detail: item.detail, detailStyle: detailStyle, value: item.value, onPress: this.handleItemPress, icon: item.icon, iconComponent: iconComponent }));
|
|
297
308
|
if (virtualized == null) {
|
|
298
309
|
return (React.createElement(react_native_1.FlatList, { data: filteredItems, initialNumToRender: filteredItems.length, keyExtractor: item => item.value.toString(), renderItem: renderItem }));
|
|
299
310
|
}
|