@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.2

package/src/StaticComponents/SOverlay.js

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, StyleSheet, View, Text, Image, TextInput, ScrollView, Dimensions } from 'react-native';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import popupStyles, {
+    getListviewItem,
+    getListviewItemText,
+} from '../CommonStyle/PopupStyle';
+import Icons from '../Common/Icons';
+import { isBNU } from '../CommonStyle/ComponentFunctions';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+const SOverlay = (props) => {
+    // const { width, height } = useDimensions().window
+    const [isdropdownshow, setDropdownShow] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [isLoading, setIsLoading] = useState(true);
+    const [text, onChangeText] = useState(props.value);
+
+    useEffect(() => {
+        isBNU(props.overlay) && props.overlay == true ? setDropdownShow(true) : null;
+    }, [props.overlay]);
+
+    function getOverlayChildrenWrapperStyle() {
+        return ({
+            borderRadius: 20,
+            height: Dimensions.get('screen').height * 0.60,
+        });
+    }
+
+    function getPopupTextAreaContainer() {
+        return (
+            {
+                justifyContent: 'center',
+                width: Dimensions.get('screen').width * 0.90,
+                alignItems: 'center',
+                marginTop: Dimensions.get('screen').height * 0.01,
+            }
+        );
+    }
+
+    function getPopupTextAreaChildContainer(bordercolor) {
+        return (
+            {
+                flexDirection: 'row',
+                borderWidth: 1,
+                borderColor: bordercolor,
+                width: '96%',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                borderRadius: 7,
+                margin: Dimensions.get('screen').height * 0.003,
+                marginBottom: Dimensions.get('screen').height * 0.003,
+                height: Dimensions.get('screen').height * 0.40,
+                backgroundColor: '#fff',
+                marginTop: 0,
+            }
+        );
+    }
+
+    function getPopupTextAreaChildContainer(bordercolor) {
+        return (
+            {
+                flexDirection: 'row',
+                borderWidth: 1,
+                borderColor: bordercolor,
+                width: '96%',
+                justifyContent: 'flex-start',
+                alignItems: 'center',
+                borderRadius: 7,
+                margin: Dimensions.get('screen').height * 0.003,
+                marginBottom: Dimensions.get('screen').height * 0.003,
+                height: Dimensions.get('screen').height * 0.40,
+                backgroundColor: '#fff',
+                marginTop: 0,
+            }
+        );
+    }
+
+    function getPopupTextAreaStyle() {
+        return (
+            {
+                ...ComponentStyles.input_Text,
+                textAlignVertical: 'top',
+                width: '98%',
+                marginLeft: '1%',
+                padding: 0, height: '100%',
+                marginBottom: -(Dimensions.get('screen').height * 0.003),
+            }
+        );
+    }
+
+    return (
+        <View>
+            <TouchableOpacity onPress={() => setDropdownShow(true)}>
+                <Icons.MaterialCommunityIcons
+                    name="comment-edit"
+                    color={props.iconcolor ? props.iconcolor : 'darkblue'}
+                    size={props.size ? normalize(props.size) : normalize(26)}
+
+                />
+
+            </TouchableOpacity>
+
+            {isdropdownshow ?
+                <CModalOverlay visible={true}
+                    onClose={() => {
+                        setDropdownShow(false);
+                        if (props.setOverlay) {
+                            props.setOverlay(false);
+                        }
+                    }}
+                    closeOnTouchOutside
+                    animationType="zoomIn"
+                    containerStyle={ComponentStyles.popup_containerStyle}
+                    childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+                    animationDuration={500}
+                >
+                    <TouchableOpacity style={{ position: 'absolute', right: 5, zIndex: 1, marginTop: normalize(5) }}
+                        onPress={() => {
+                            setDropdownShow(false);
+                            if (props.setOverlay) {
+                                props.setOverlay(false);
+                            }
+                        }}
+                    >
+                        <Icons.AntDesign name={'closecircle'}
+                            color={'#094485'} size={normalize(20)} />
+                    </TouchableOpacity>
+                    <View >
+                        <Text style={[ComponentStyles.popup_heading]}>Text Area </Text>
+                        <View style={getPopupTextAreaContainer()}>
+                            <View style={getPopupTextAreaChildContainer('black')}>
+                                <TextInput
+                                    editable={true} // To scroll data , Editable is checked in onChangeText props
+                                    keyboardType={'default'}
+                                    placeholder={''}
+                                    placeholderTextColor={'lightgray'}
+                                    onChangeText={onChangeText}
+                                    value={text}
+                                    numberOfLines={5}
+                                    multiline={true}
+                                    scrollEnabled
+                                    style={getPopupTextAreaStyle()}
+                                />
+                            </View>
+
+                            <View style={popupStyles.overlay_screen_button_view}>
+                                <TouchableOpacity
+                                    style={popupStyles.overlay_screen_small_button_style}
+                                    onPress={() => {
+                                        setDropdownShow(false, props.onChangeText(text));
+                                        if (props.setOverlay) {
+                                            props.setOverlay(false);
+                                        }
+                                    }}>
+                                    <Text style={popupStyles.overlay_screen_button_text}>OK</Text>
+                                </TouchableOpacity>
+                                <TouchableOpacity
+                                    style={popupStyles.overlay_screen_small_button_style}
+                                    onPress={() => onChangeText('')}
+                                >
+                                    <Text style={popupStyles.overlay_screen_button_text}>CLEAR</Text>
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    </View>
+                </CModalOverlay>
+                : null}
+        </View>
+    );
+};
+
+const layoutstyles = StyleSheet.create({
+
+});
+
+export default SOverlay;

package/src/StaticComponents/SOverlayTextInput.js

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { View, Text, Dimensions, ScrollView, TouchableOpacity, FlatList } from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import STextInput from './STextInput';
+import Icons from '../Common/Icons';
+import { getListviewItem, getListviewItemText } from '../CommonStyle/PopupStyle';
+
+
+const SOverlayTextInput = (props) => {
+    const [dropdown, setDropdownShow] = useState(false);
+    const [searchData, setSearchData] = useState('');
+    const [displayData, setDisplayData] = useState([
+        {
+            'datavalue': 592,
+            'displayvalue': 'volume',
+            'selected': false,
+        },
+        {
+            'datavalue': 595,
+            'displayvalue': 'm',
+            'selected': false,
+        },
+        {
+            'datavalue': 596,
+            'displayvalue': 'g',
+            'selected': false,
+        },
+        {
+            'datavalue': 599,
+            'displayvalue': 'strips',
+            'selected': false,
+        },
+        {
+            'datavalue': 600,
+            'displayvalue': 'nos',
+            'selected': false,
+        },
+    ]);
+
+    // useEffect(() => {
+    //     setDropdownShow(false)
+    // }, [searchData])
+
+
+    return (
+        <View style={{ paddingLeft: normalize(8), zindex: 1 }} >
+            <STextInput
+                data={{
+                    value: searchData,
+                    itemwidth: Dimensions.get('screen').width * 0.80,
+                    displaytext: 'Test',
+                    validation: 2,
+                }}
+                onFocus={() => setDropdownShow(true)}
+                onBlur={() => setDropdownShow(false)}
+                callBack={val => (val == undefined ? null : setSearchData(val))} />
+
+            {dropdown ?
+                <View style={{ position: 'absolute', top: 60, left: normalize(125), height: 130, width: 200, zIndex: 1, backgroundColor: '#fff', alignItems: 'center', borderRadius: normalize(5) }}>
+                    {GetDropdown(displayData)}
+                </View> : null}
+        </View>
+    );
+
+    function GetDropdown(data) {
+        const newDropDownData = data.filter(function (item) {
+            const dataItem = item.displayvalue ? item.displayvalue.toUpperCase() : ''.toUpperCase();
+            const textData = searchData.toUpperCase();
+            return dataItem.indexOf(textData) > -1;
+        });
+        return (
+            <View style={{ flexDirection: 'row' }}>
+                <FlatList
+                    data={newDropDownData}
+                    renderItem={renderItem}
+                    keyboardShouldPersistTaps={'handled'}
+                    initialNumToRender={10}
+                    maxToRenderPerBatch={20}
+                    keyExtractor={(item, index) => 'key' + index}
+                />
+            </View>
+        );
+    }
+
+    function renderItem(data) {
+        return (
+            <TouchableOpacity
+                style={[getListviewItem(data.item.selected), { flexDirection: 'row', alignItems: 'center' }]}
+                onPress={() => getValue(data.item)}
+                activeOpacity={0.5}
+            >
+                <Icons.FontAwesome name="dot-circle-o" color="darkblue" size={normalize(12)}
+                    style={{ paddingHorizontal: normalize(2), paddingLeft: normalize(4) }} />
+                <Text style={getListviewItemText(false)}>
+                    {data.item.displayvalue}
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+
+    function getValue(val) {
+        setSearchData(val.displayvalue);
+        setDropdownShow(false);
+    }
+};
+export default SOverlayTextInput;
+
+
+