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

package/src/StaticComponents/STimePicker.js

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import { SafeAreaView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { normalize } from '../CommonStyle/componentStyle';
+import moment from 'moment';
+import { ValueCheck, isBNUL, isNU, notifyMessage } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../Common/Global';
+import HOCIcons from '../HOC/HOCIcons';
+
+export default function STimePicker(props) {
+  const [timePicker, setTimePicker] = useState(false);
+  var y = moment(props.value, 'HH:mm:ss a');
+  var d = new Date(y);
+  const [time, setTime] = useState(ValueCheck(props.value) ? d : new Date(Date.now()));
+  const [timeZone, setTimeZone] = useState(props.value);
+
+  function showTimePicker() {
+    setTimePicker(true);
+  }
+
+  function getPreviousTime(array, index) {
+
+    let prevcodearray = array.filter((i, k) => { return k == (index - 1) ? { ...i } : undefined; });
+    let prevcode = prevcodearray[0].consultationtime;
+    return prevcode;
+  }
+
+  function getNextTime(array, index) {
+
+    let prevcodearray = array.filter((i, k) => { return k == (index + 1) ? { ...i } : undefined; });
+    let prevcode = prevcodearray[0].consultationtime;
+    return prevcode;
+  }
+
+  function onTimeSelected(event, value) {
+
+    setTimePicker(false);
+    if (event && event.type == 'set') {
+
+      if (props.checkTimeValidation) {
+        let findprevtime = ((props.currentindextime == 0) || (props.timearray.length == 1)) ? props.starttime : getPreviousTime(props.timearray, props.currentindextime);
+        let findnexttime = ((props.currentindextime == 0) || (props.timearray.length == 1) || (props.timearray.length == (props.currentindextime + 1))) ? props.endtime : getNextTime(props.timearray, props.currentindextime);
+
+        let previous = moment(findprevtime, 'hh:mm A');
+        let next = moment(findnexttime, 'hh:mm A');
+        let current = moment(value, 'hh:mm A');
+
+        if (current.isAfter(previous) && current.isBefore(next)) {
+          var x = moment(value).format('LT');
+          setTimeZone(x);
+          setTime(value);
+          props.callBack(x);
+        } else {
+          notifyMessage('Selected time is not in the desired range',3);
+        }
+      }
+      else {
+        var x = moment(value).format('LT');
+        setTimeZone(x);
+        setTime(value);
+        props.callBack(x);
+      }
+    }
+
+  }
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        {timePicker ?
+          <DateTimePicker
+            value={time != undefined ? time : new Date(Date.now())}
+            mode={'time'}
+            display={Platform.OS === 'ios' ? 'default' : 'default'}
+            is24Hour={false}
+            onChange={onTimeSelected}
+            style={styleSheet.datePicker}
+          />
+          : null
+        }
+
+        {!timePicker ?
+          <View style={{}}>
+            {props.table != undefined ? null
+              : <Text style={{ fontSize: normalize(9), paddingLeft: normalize(2) }}>{ValueCheck(props.placeholder) ? props.placeholder : 'Select Time:'}</Text>}
+
+            <TouchableOpacity
+              disabled={props.disabled ? true : false}
+              onPress={() => showTimePicker()}
+              style={
+                isNU(props.pickerstyle) ? props.pickerstyle :
+                  {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    width: props.width != undefined ? normalize(props.width) : normalize(300),
+                    height: props.height != undefined ? normalize(props.height) : normalize(35),
+                    borderWidth: 1,
+                    borderColor: 'lightgrey',
+                    backgroundColor: ValueCheck(props.bgcolor) ? props.bgcolor : '#fff',
+                    borderRadius: normalize(7),
+                  }
+              }>
+
+
+
+              {props.icon ?
+                <HOCIcons.Icons
+                  icongroup={isNU(props.icon.icongroup) ? props.icon.icongroup : 5}
+                  name={props.icon.name}
+                  size={props.icon.size}
+                  style={props.iconstyle}
+                />
+                : <MaterialCommunityIcons
+                  name="timer-outline"
+                  color={Global.AppTheme.primary_color}
+                  size={normalize(20)}
+                  style={{ paddingHorizontal: normalize(7) }}
+                />}
+
+              {isNU(props.textstyle) ?
+                <Text adjustsFontSizeToFit style={props.textstyle}>
+                  {isNU(timeZone) ? timeZone : null}
+                </Text>
+                : null}
+
+              {!isNU(props.textstyle) ?
+                <View>
+                  <Text style={{ fontSize: normalize(14), color: 'black', fontWeight: 'bold' }}>
+                    {timeZone}
+                  </Text>
+                </View>
+                : null}
+              {/* <Button title="Show Time Picker" color="green" onPress={showTimePicker} /> */}
+            </TouchableOpacity>
+          </View>
+          : null
+        }
+
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styleSheet = StyleSheet.create({
+
+  MainContainer: {
+    flex: 1,
+    // padding: 6,
+    // alignItems: 'center',
+    backgroundColor: 'white',
+  },
+
+  text: {
+    fontSize: 25,
+    color: 'red',
+    padding: 3,
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+
+  // Style for iOS ONLY...
+  datePicker: {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    width: 320,
+    height: 260,
+    display: 'flex',
+  },
+
+});