@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.6

package/src/CustomComponents/CCommentOverlay.js

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Text, View, ScrollView, Dimensions, FlatList, TouchableOpacity, TextInput, KeyboardAvoidingView, TouchableWithoutFeedback } from 'react-native';
+import { isBNU, isBNUL, isNU, normalize } from '../CommonStyle/ComponentFunctions';
+import HOCIcons from '../HOC/HOCIcons';
+import CDetailView from './CDetailView';
+import CAwesomeButton from './CAwesomeButton';
+import { Global } from '../../../../../src/Common/Global';
+import CModalOverlay from './CModalOverlay';
+
+export default function CEditorOverlay(props) {
+
+  const [refresh, setRefresh] = useState(0);
+  const [overlay, setOverlay] = useState(true);
+  const [autofocus, setAutoFocus] = useState(false);
+  const [Comments, setComments] = useState(isNU(props.data) ? props.data : null);
+
+  function getOverlayChildrenWrapperStyle() {
+
+    return isNU(props.overlaystyle) ?
+      props.overlaystyle
+      :
+      {
+        borderRadius: 10,
+        height: Dimensions.get('window').height * 0.3,
+        borderWidth: 3,
+        borderColor: 'darkblue',
+        alignSelf: 'center',
+        width: Dimensions.get('screen').width * 0.9,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        padding: 0,
+        backgroundColor: 'transparent',
+      };
+  }
+
+  function FnOnchangeText(text) {
+    setAutoFocus((prevAutoFocus) => false);
+    setComments((prevComments) => text);
+    props.data = text;
+    props.callback(text);
+    // memoizedCallback(text);
+  }
+
+  const FnEditSomeContent = useMemo(() => { // to edit only the added text , first text cannot be edited because it is restricted by its length
+    return (text) => {
+      const newTextAfterHello = text.substring(props.editcontent.length);
+      const newNewText = `${props.editcontent}${newTextAfterHello}`;
+      setComments(newNewText);
+      props.callback(newNewText);
+    };
+  }, []);
+
+  const handleChangeText = useMemo(() => {
+    return props.editcontentstatus ? FnEditSomeContent : FnOnchangeText;
+  }, [props.editcontentstatus]);
+
+  return (
+
+    // overlay ? (
+    <CModalOverlay
+      visible={overlay}
+      onClose={() => {
+        setAutoFocus(false),
+          setOverlay(false),
+          setRefresh(refresh + 1),
+          (isBNU(props.OverlayClose) ? props.OverlayClose(true) : null);
+      }}
+      closeOnTouchOutside
+      animationType="zoomIn"
+      containerStyle={{ backgroundColor: 'transparent' }}
+      childrenWrapperStyle={getOverlayChildrenWrapperStyle()}
+      animationDuration={500}>
+      <CDetailView
+        overlay={true}
+      >
+        <View style={{ borderRadius: 10, flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '100%',
+              marginTop: normalize(5),
+            }}>
+            <Text
+              style={{
+                color: Global.AppTheme.primary_color,
+                fontSize: normalize(11),
+                fontWeight: 'bold',
+              }}>
+              {' '}
+            </Text>
+            <Text
+              style={{
+                color: Global.AppTheme.primary_color,
+                fontSize: normalize(12),
+                fontWeight: 'bold',
+              }}>
+              {isBNU(props.heading) ? props.heading : 'COMMENTS'}
+            </Text>
+            <TouchableOpacity
+              onPress={() => {
+                setAutoFocus(false),
+                  setOverlay(false),
+                  setRefresh(refresh + 1),
+                  (isBNU(props.OverlayClose) ? props.OverlayClose(true) : null);
+              }}>
+              <HOCIcons.FontAwesome5 name={'angle-double-down'} size={normalize(25)} style={{ marginHorizontal: normalize(5) }} color={Global.AppTheme.primary_color} />
+            </TouchableOpacity>
+          </View>
+          <View style={{ flex: 1, width: '100%', alignSelf: 'center', justifyContent: 'flex-start', alignItems: 'center' }}>
+
+
+            <TextInput
+              style={{
+                // flex: 1,
+                minHeight: normalize(100),
+                fontWeight: 'bold',
+                borderWidth: 1,
+                borderColor: '#bdbdbdc4',
+                borderRadius: 6,
+                width: '95%',
+                textAlignVertical: 'top',
+                paddingVertical: normalize(10),
+                paddingHorizontal: normalize(10),
+                backgroundColor: '#ebebebc4',
+                marginVertical: normalize(5),
+                color: 'black',
+                fontSize: normalize(15),
+              }}
+              // autoFocus={autofocus ? true : false}
+              value={Comments}
+              underlineColorAndroid="transparent"
+              placeholder="Type Here"
+              placeholderTextColor="lightgrey"
+              onChangeText={handleChangeText}
+              numberOfLines={5}
+              multiline={props.disablemultiline ? false : true}
+            >
+              {/* {props.data ? props.data : null} */}
+            </TextInput>
+          </View>
+
+
+          <View style={{ paddingHorizontal: normalize(10), flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start', borderWidth: 0, width: '100%' }}>
+            <CAwesomeButton
+              callback={(k) => {
+                setAutoFocus(false),
+                  setOverlay(false),
+                  setRefresh(refresh + 1),
+                  (isBNU(props.onsavecallback) ? props.onsavecallback(Comments) : null);
+              }}
+              buttonstyle={{
+                'borderRadius': 10,
+                'borderWidth': 0.5,
+                'height': Dimensions.get('screen').height * 0.07,
+                'width': Dimensions.get('screen').height * 0.07,
+                'backgroundColor': '#f2f3ff',
+                'paddingHorizontal': 0,
+                'raiseLevel': 4,
+                'paddingBottom': 0,
+                'borderColor': 'lightblue',
+                'paddingTop': 0,
+                'style': {
+                  padding: 0,
+                  marginHorizontal: normalize(2),
+                  marginVertical: normalize(2),
+                },
+              }}
+              viewstyle={{
+                borderWidth: 0,
+                borderRadius: 0,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              icon={
+                props.footericon ?
+                  props.footericon :
+                  {
+                    'icongroup': 1,
+                    'name': 'select1',
+                    'color': 'darkblue',
+                    'size': normalize(20),
+                    'style': {
+                      textAlign: 'center',
+                    },
+                  }}
+              text={{
+                fontSize: normalize(7),
+                fontWeight: 'bold',
+                color: 'darkblue',
+                textAlign: 'center',
+              }}
+              displaytext={props.footerbuttontext ? props.footerbuttontext : 'Select'}
+            />
+          </View>
+        </View>
+      </CDetailView>
+    </CModalOverlay>
+    // ) : null
+  );
+}

package/src/CustomComponents/CComments.js

@@ -0,0 +1,162 @@
+import React, { useState, useEffect, memo } from 'react';
+import { Text, View, Image, TouchableOpacity, TextInput, Dimensions } from 'react-native';
+// import {
+//     useDimensions
+// } from '@react-native-community/hooks';
+import { colors } from '../CommonStyle/commonStyle';
+import { normalize } from '../CommonStyle/componentStyle';
+import popupStyles, {
+    getPopupTextAreaChildContainer,
+    getPopupTextAreaStyle,
+} from '../CommonStyle/PopupStyle';
+import Entypo from 'react-native-vector-icons/Entypo';
+import { notifyMessage } from '../CommonStyle/ComponentFunctions';
+// import SCheckbox from '../Static Components/SCheckbox';
+
+function CComments(props) {
+    const { width, height } = Dimensions.get('window');
+    const [data, setData] = useState(props.data);
+    const [isShow, setIsShow] = useState(false);
+    const [comment, setComment] = useState('');
+    const [infectioncontrol, setInfectioncontrol] = useState('');
+    var test = [];
+
+    useEffect(() => {
+        setData(props.data);
+        data.functionname == 'comments' ?
+            (data.comments != null && data.comments != undefined ?
+                setComment(data.comments)
+                : null)
+            :
+            null;
+    }, []);
+
+    const FooterArray = [
+        {
+            key: 1,
+            display: 'Patient',
+            checked: false,
+        },
+        {
+            key: 2,
+            display: 'Doctor',
+            checked: false,
+        },
+        {
+            key: 3,
+            display: 'Nurse',
+            checked: false,
+        },
+        {
+            key: 4,
+            display: 'Staff',
+            checked: false,
+        },
+    ];
+
+
+    function saveRemarks() {
+        if (data.functionname == 'comments') {
+            setData({ ...data, ['comments']: comment });
+            // props.refresh(1)
+            // props.IconColour(true)
+            props.visibility(false);
+        }
+        else {
+            let dataset = {
+
+            };
+            NetworkServiceCall('post', buttonapi, output)
+                .then(function (response) {
+                    if (response.httpstatus == 200) {
+
+                    }
+                    else {
+                        notifyMessage('Comment Not Saved',2);
+                    }
+                });
+        }
+    }
+    function ChangeValue(changevalue) {
+        if (data.functionname == 'comments') {
+            setComment(changevalue);
+            // data.itemedited == false ? data.itemedited = true : null
+            data.comments = changevalue;
+        } else {
+            setInfectioncontrol(changevalue);
+        }
+    }
+    return (
+        <View>
+            <Text style={{ alignSelf: 'center', fontSize: normalize(12), fontWeight: 'bold', marginTop: normalize(-5) }}>{data.name}</Text>
+            <View
+                style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    marginTop: height * 0.01,
+                }}
+
+            >
+                <View style={getPopupTextAreaChildContainer(width, height, data.hasOwnProperty('itemedited') && data.itemedited ? colors.color_editedindication_Border : colors.color_componentBordercolor)}>
+                    <TextInput
+                        editable={true} // To scroll data , Editable is checked in onChangeText props
+                        keyboardType={data.hasOwnProperty('keyboardtype') ? data.keyboardtype : 'default'}
+                        placeholder={data.hasOwnProperty('iseditable') && data.iseditable ?
+                            data.hasOwnProperty('placeholder') && data.placeholder != null && data.placeholder.length > 2 ? data.placeholder : 'Type Here'
+                            : ''
+                        }
+                        placeholderTextColor={'lightgray'}
+                        // onChangeText={changevalue => data.hasOwnProperty('iseditable') && data.iseditable ? ChangeValue(changevalue) : null}
+                        onChangeText={changevalue => ChangeValue(changevalue)}
+                        // value={data.value}
+                        value={data.functionname == 'comments' ? comment : infectioncontrol}
+                        numberOfLines={5}
+                        multiline={true}
+                        scrollEnabled
+                        style={getPopupTextAreaStyle(width, height)}
+                    />
+                </View>
+
+                {data.functionname == 'infectioncontrol' ?
+                    <View style={{ flexDirection: 'row', justifyContent: 'space-around', width: '100%' }}>
+                        {FooterArray.map((data, i) => {
+                            return (
+                                <View>
+                                    <Text>{data.display}</Text>
+                                    {/* <SCheckbox
+                                        onChangeData={val =>
+                                            val == undefined
+                                                ? null
+                                                : data.checked = val
+                                        }
+                                        value={data.checked}
+                                    /> */}
+                                </View>
+                            );
+                        })}
+                    </View>
+                    : null}
+
+                <View style={popupStyles.overlay_screen_button_view}>
+
+                    <TouchableOpacity
+                        style={popupStyles.overlay_screen_small_button_style}
+                        onPress={() => saveRemarks()}>
+                        <Entypo name="save" color="green" size={normalize(20)} />
+                        <Text style={popupStyles.overlay_screen_button_text}>Save</Text>
+                    </TouchableOpacity>
+
+                    <TouchableOpacity
+                        style={popupStyles.overlay_screen_small_button_style}
+                        onPress={() => data.comments && data.comments != null && data.comments.length > 0 || infectioncontrol != null && infectioncontrol != undefined && infectioncontrol.length > 0 ? ChangeValue('') : null}
+                    >
+                        <Entypo name="brush" color="#fc6c6c" size={normalize(20)} />
+                        <Text style={popupStyles.overlay_screen_button_text}>Clear</Text>
+                    </TouchableOpacity>
+                </View>
+
+            </View>
+        </View>
+    );
+}
+export default memo(CComments);

package/src/CustomComponents/CContainerView.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, View} from 'react-native';
+import { Global } from '../../../../../src/Common/Global';
+
+const CContainerView = props => {
+
+    const styles = StyleSheet.create({
+        CContainerView : {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            backgroundColor: Global.AppTheme.primary_color,
+        },
+    });
+
+    return (
+        <View style={styles.CContainerView}>
+            {props.children}
+        </View>
+    );
+};
+
+export default CContainerView;