@react-form-fields/native-base
Version:
Native Base Form Fields
119 lines • 6.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var useConfigContext_1 = require("@react-form-fields/core/hooks/useConfigContext");
var native_base_1 = require("native-base");
var React = require("react");
var react_native_1 = require("react-native");
var context_1 = require("../shared/ThemeProvider/context");
var List_1 = require("./List");
var Modal = React.memo(React.forwardRef(function (props, ref) {
var value = props.value, visible = props.visible, label = props.label, searchable = props.searchable, options = props.options, multiple = props.multiple, handleDoneProp = props.handleDone, handleDismissProp = props.handleDismiss;
var themeContext = React.useContext(context_1.ThemeContext);
var config = useConfigContext_1.default();
config.select = config.select || {};
var _a = React.useState(false), renderOptions = _a[0], setRenderOptions = _a[1];
var _b = React.useState(''), query = _b[0], setQuery = _b[1];
var _c = React.useState(new Set()), internalValue = _c[0], setInternalValue = _c[1];
var firstValue = React.useMemo(function () { return internalValue.values().next().value; }, [internalValue]);
React.useEffect(function () {
if (!visible)
return;
if (multiple && !Array.isArray(value || [])) {
throw new Error('@react-form-fields/native-base: value of a multiple select must be an array');
}
if (!multiple && Array.isArray(value)) {
throw new Error('@react-form-fields/native-base: value of a non multiple select must be not an array');
}
setInternalValue(new Set(multiple ? value || [] : [value]));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible]);
var filteredOptions = React.useMemo(function () {
return !query ? options || [] : (options || []).filter(function (o) { return o.label.includes(query); });
}, [options, query]);
var modalHeaderStyles = React.useMemo(function () { return [styles.header, !props.fullscreen ? styles.headerContained : null]; }, [
props.fullscreen
]);
var modalContainerStyles = React.useMemo(function () { return [styles.modalContainer, props.fullscreen ? null : styles.modalContainerContained]; }, [props.fullscreen]);
var handleOnShow = React.useCallback(function () {
react_native_1.InteractionManager.runAfterInteractions(function () { return setRenderOptions(true); });
}, []);
var handleDone = React.useCallback(function () {
setQuery('');
handleDoneProp(multiple ? Array.from(internalValue) : firstValue);
}, [firstValue, handleDoneProp, internalValue, multiple]);
var handleDismiss = React.useCallback(function () {
setQuery('');
setRenderOptions(false);
handleDismissProp();
}, [handleDismissProp]);
return (React.createElement(react_native_1.Modal, { visible: visible, onRequestClose: handleDismiss, onShow: handleOnShow, transparent: true, animated: true, animationType: props.fullscreen ? 'slide' : 'fade', ref: ref },
React.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : null, style: styles.keyboardView },
React.createElement(react_native_1.View, { style: styles.modalBackdrop },
React.createElement(native_base_1.Container, { style: modalContainerStyles },
React.createElement(native_base_1.Header, { iosBarStyle: themeContext.iosStatusbar, searchBar: searchable, rounded: searchable, style: modalHeaderStyles }, searchable ? (React.createElement(native_base_1.Item, null,
React.createElement(native_base_1.Icon, tslib_1.__assign({}, (config.iconProps || {}), { name: config.select.searchIcon || 'search' })),
React.createElement(native_base_1.Input, { placeholder: label, value: query, onChangeText: setQuery }))) : (React.createElement(native_base_1.Body, { style: { justifyContent: 'center', alignItems: 'center', flex: 1 } },
React.createElement(native_base_1.Title, { style: styles.headerSearchTitle }, label)))),
React.createElement(List_1.default, tslib_1.__assign({}, props, { ref: null, options: filteredOptions, internalValue: internalValue, setInternalValue: setInternalValue, renderOptions: renderOptions })),
React.createElement(native_base_1.Footer, { style: styles.modalActions },
React.createElement(native_base_1.Button, { dark: true, transparent: true, onPress: handleDismiss },
React.createElement(native_base_1.Text, null, (config.select || { cancel: 'Cancel' }).cancel)),
React.createElement(native_base_1.Button, { transparent: true, onPress: handleDone },
React.createElement(native_base_1.Text, null, (config.select || { done: 'Done' }).done))))))));
}));
var styles = react_native_1.StyleSheet.create({
keyboardView: {
flex: 1
},
header: {
backgroundColor: 'white'
},
headerContained: {
paddingTop: 0
},
headerSearchTitle: {
color: 'black',
textAlign: 'center',
fontSize: 16
},
modalBackdrop: {
backgroundColor: '#0000009c',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
modalContainer: {
backgroundColor: 'white',
flex: 1,
height: react_native_1.Dimensions.get('screen').height,
width: react_native_1.Dimensions.get('screen').width
},
modalContainerContained: {
borderRadius: 5,
overflow: 'hidden',
elevation: 4,
shadowColor: 'black',
shadowOffset: {
width: 0,
height: 5
},
shadowOpacity: 0.24,
shadowRadius: 5,
minWidth: react_native_1.Dimensions.get('screen').width * 0.7,
maxHeight: react_native_1.Dimensions.get('screen').height * 0.8,
maxWidth: react_native_1.Dimensions.get('screen').width * 0.9
},
modalActions: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'white',
padding: 8
},
scrollView: {
paddingVertical: 10,
paddingHorizontal: 10
}
});
exports.default = native_base_1.connectStyle('ReactFormFields.SelectModal', {})(Modal);
//# sourceMappingURL=Modal.js.map