@dokuhero/react-native-components
Version:
Sets of React Native components that works with dokuhero/react-native-theme and react-i18next
93 lines • 5.4 kB
JavaScript
import { withTheme } from '@dokuhero/react-native-theme';
import React from 'react';
import { StyleSheet } from 'react-native';
import { CustomPicker } from 'react-native-custom-picker';
import { Icon, ListItem } from 'react-native-elements';
import { globalStyles } from '../styles';
import { Utils } from '../utils';
import { ItemIdentity } from './ItemIdentity';
export function DropdownPicker(props) {
var DropdownPickerComponent = withTheme(function (_a) {
var theme = _a.theme, options = _a.options, title = _a.title, getOptionAvatar = _a.getOptionAvatar, getOptionText = _a.getOptionText, allowClear = _a.allowClear, onChange = _a.onChange, value = _a.value, footerText = _a.footerText, footerIcon = _a.footerIcon, footerAction = _a.footerAction, containerStyle = _a.containerStyle, modalStyle = _a.modalStyle, fieldContainerStyle = _a.fieldContainerStyle, optionContainerStyle = _a.optionContainerStyle, fieldTextStyle = _a.fieldTextStyle, optionTextStyle = _a.optionTextStyle, placeholder = _a.placeholder, titleStyle = _a.titleStyle, titleContainerStyle = _a.titleContainerStyle, footerContainerStyle = _a.footerContainerStyle, footerTextStyle = _a.footerTextStyle, hideFieldChevron = _a.hideFieldChevron, hideOptionChevron = _a.hideOptionChevron, placeholderTextStyle = _a.placeholderTextStyle;
var smMargin = theme.space.small || 10;
var fieldTpl = function (item, contrStyle, textStyle, clearFn, margin, hideChevron) {
if (margin === void 0) { margin = 0; }
return (<ListItem wrapperStyle={[
{
marginLeft: margin,
marginRight: margin || -smMargin
}
]} containerStyle={[contrStyle, { paddingBottom: 5 }]} hideChevron={!!!clearFn || hideChevron} avatar={getOptionAvatar ? (<ItemIdentity avatar={getOptionAvatar(item)} size={28}/>) : (undefined)} titleStyle={textStyle} textInputStyle={textStyle} subtitleStyle={textStyle} rightTitleStyle={textStyle} title={getOptionText(item)} rightIcon={allowClear ? (<Icon name="x" type="feather" size={28} containerStyle={{
margin: 0,
width: 45
}} onPress={allowClear ? clearFn : undefined}/>) : (undefined)}/>);
};
return (<CustomPicker modalStyle={modalStyle} containerStyle={containerStyle} style={{ marginHorizontal: smMargin * 2 }} value={value} maxHeight={400} options={options || []} onValueChange={onChange} placeholder={placeholder || title} headerTemplate={title
? function () { return (<ListItem hideChevron title={Utils.toUpper(title)} titleStyle={[
{
fontFamily: theme.fontName.bold,
fontWeight: 'bold',
color: theme.color.primaryReverse
},
titleStyle
]} containerStyle={[
{ backgroundColor: theme.color.primary },
titleContainerStyle
]}/>); }
: undefined} optionTemplate={function (_a) {
var item = _a.item;
return fieldTpl(item, [
{
borderBottomColor: theme.color.grey,
borderBottomWidth: StyleSheet.hairlineWidth
},
optionContainerStyle
], [globalStyles.inputText, optionTextStyle], undefined, smMargin, hideOptionChevron);
}} fieldTemplate={function (_a) {
var selectedItem = _a.selectedItem, defaultText = _a.defaultText, clear = _a.clear;
return selectedItem !== null && selectedItem !== undefined ? (fieldTpl(selectedItem, [
{
borderBottomColor: theme.color.grey,
borderBottomWidth: 1
},
fieldContainerStyle
], [globalStyles.inputText, fieldTextStyle], clear, undefined, hideFieldChevron)) : (<ListItem title={defaultText} titleStyle={[
globalStyles.inputText,
{
color: theme.color.lighter,
marginLeft: 0,
marginRight: 0
},
fieldTextStyle,
placeholderTextStyle
]} wrapperStyle={{
marginLeft: 0,
marginRight: -smMargin
}} containerStyle={[
{
borderBottomColor: theme.color.grey,
borderBottomWidth: 1
},
fieldContainerStyle
]}/>);
}} footerTemplate={footerText
? function (_a) {
var close = _a.close;
return (<ListItem leftIcon={footerIcon} title={footerText} hideChevron containerStyle={footerContainerStyle} titleStyle={[
{
fontFamily: theme.fontName.semiBold,
color: theme.color.darker
},
footerTextStyle
]} onPress={function () {
if (footerAction) {
footerAction();
}
close();
}}/>);
}
: undefined}/>);
});
return <DropdownPickerComponent {...props}/>;
}
//# sourceMappingURL=DropdownPicker.js.map