secullum-react-native-ui 4.3.7 → 4.3.8-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.
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { IconProps } from 'react-native-vector-icons/Icon';
|
|
3
3
|
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
4
4
|
export interface DropDownProperties {
|
|
5
|
-
label
|
|
5
|
+
label?: string;
|
|
6
6
|
items: Array<{
|
|
7
7
|
label: string;
|
|
8
8
|
value: any;
|
|
@@ -18,6 +18,7 @@ export interface DropDownProperties {
|
|
|
18
18
|
inputStyle?: StyleProp<TextStyle>;
|
|
19
19
|
iconComponent?: React.ComponentClass<IconProps>;
|
|
20
20
|
nativeID?: string;
|
|
21
|
+
icon?: string | undefined;
|
|
21
22
|
}
|
|
22
23
|
export interface DropDownState {
|
|
23
24
|
modalOpen: boolean;
|
|
@@ -131,14 +131,11 @@ class DropDown extends React.Component {
|
|
|
131
131
|
};
|
|
132
132
|
this.getStyles = () => {
|
|
133
133
|
const theme = theme_1.getTheme();
|
|
134
|
+
const { icon } = this.props;
|
|
134
135
|
const styles = react_native_1.StyleSheet.create({
|
|
135
|
-
container: {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
borderWidth: 1,
|
|
139
|
-
borderColor: theme.borderColor1,
|
|
140
|
-
borderRadius: 3
|
|
141
|
-
},
|
|
136
|
+
container: Object.assign({ paddingHorizontal: 16, paddingVertical: 8, borderWidth: 1, borderColor: theme.borderColor1, borderRadius: 3 }, (icon ? { flexDirection: 'row' } : {}), (icon && react_native_1.Platform.OS === 'web'
|
|
137
|
+
? { minHeight: 40 }
|
|
138
|
+
: { minHeight: 48 })),
|
|
142
139
|
label: {
|
|
143
140
|
color: theme.textColor2,
|
|
144
141
|
fontFamily: theme.fontFamily3,
|
|
@@ -148,7 +145,7 @@ class DropDown extends React.Component {
|
|
|
148
145
|
text: {
|
|
149
146
|
lineHeight: 22,
|
|
150
147
|
minHeight: 22,
|
|
151
|
-
|
|
148
|
+
textAlignVertical: 'center',
|
|
152
149
|
color: theme.textColor1,
|
|
153
150
|
fontFamily: theme.fontFamily1,
|
|
154
151
|
fontSize: 16
|
|
@@ -215,6 +212,14 @@ class DropDown extends React.Component {
|
|
|
215
212
|
paddingHorizontal: 16,
|
|
216
213
|
paddingVertical: 8,
|
|
217
214
|
fontSize: 26
|
|
215
|
+
},
|
|
216
|
+
icone: {
|
|
217
|
+
color: theme.textColor2,
|
|
218
|
+
fontSize: layout_1.isTablet() ? 21 : 19,
|
|
219
|
+
marginRight: 10,
|
|
220
|
+
minWidth: 25,
|
|
221
|
+
textAlignVertical: 'center',
|
|
222
|
+
flex: 0
|
|
218
223
|
}
|
|
219
224
|
});
|
|
220
225
|
return styles;
|
|
@@ -222,13 +227,13 @@ class DropDown extends React.Component {
|
|
|
222
227
|
}
|
|
223
228
|
render() {
|
|
224
229
|
const { modalOpen } = this.state;
|
|
225
|
-
const { label, items, value, emptyMessage, style, disabled, labelStyle, inputStyle, iconComponent, nativeID } = this.props;
|
|
230
|
+
const { label, items, value, emptyMessage, style, disabled, labelStyle, inputStyle, iconComponent, nativeID, icon } = this.props;
|
|
226
231
|
const selectedItem = items.find(x => x.value === value);
|
|
227
232
|
const styles = this.getStyles();
|
|
228
233
|
const theme = theme_1.getTheme();
|
|
229
234
|
return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => this.setState({ modalOpen: true }), disabled: disabled },
|
|
230
235
|
React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, style, disabled ? styles.readonly : null] },
|
|
231
|
-
React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label),
|
|
236
|
+
icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.icone })) : (React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)),
|
|
232
237
|
this.renderClosedDropDown(selectedItem, inputStyle),
|
|
233
238
|
React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay },
|
|
234
239
|
React.createElement(react_native_1.TouchableWithoutFeedback, null,
|