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

package/src/Media/BarcodeScan.js

@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import { Text, View, TouchableOpacity } from 'react-native';
+// import { RNCamera } from 'react-native-camera';
+import { colors } from '../CommonStyle/commonStyle';
+import Overlay from 'react-native-modal-overlay';
+import ComponentStyles,{normalize} from '../CommonStyle/componentStyle';
+import popupStyles from '../CommonStyle/PopupStyle';
+
+class BarcodeScan extends Component {
+
+  constructor(props) {
+    super(props);
+    this.camera = null;
+    this.barcodeCodes = [];
+
+    this.state = {
+      camera: {
+        type: RNCamera.Constants.Type.back,
+        flashMode: RNCamera.Constants.FlashMode.auto,
+      },
+      isLoading: false,
+      isshowOK: false,
+      scannedBarCode: {},
+    };
+  }
+
+  onSubmit(scanResult) {
+    if (scanResult.data != null) {
+      this.props.route.params.onSelect({
+        data: scanResult.data,
+        type: scanResult.type,
+      });
+      this.props.navigation.goBack();
+    }
+  }
+
+  onBarCodeRead(scanResult) {
+    if (scanResult.data != null) {
+      if (!this.barcodeCodes.includes(scanResult.data)) {
+        if (!this.state.isshowOK) {
+          this.setState({ scannedBarCode: scanResult });
+          this.setState({ isshowOK: true });
+        }
+      }
+    }
+    return;
+  }
+
+  async takePicture() {
+    if (this.camera) {
+      const options = { quality: 0.5, base64: true };
+      const data = await this.camera.takePictureAsync(options);
+    }
+  }
+
+  pendingView() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: 'lightgreen',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Text>Waiting</Text>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <View style={layoutstyles.container}>
+        <RNCamera
+          ref={ref => {
+            this.camera = ref;
+          }}
+          defaultTouchToFocus
+          flashMode={this.state.camera.flashMode}
+          mirrorImage={false}
+          onBarCodeRead={this.onBarCodeRead.bind(this)}
+          onFocusChanged={() => { }}
+          onZoomChanged={() => { }}
+          permissionDialogTitle={'Permission to use camera'}
+          permissionDialogMessage={'We need your permission to use your camera phone'}
+          style={layoutstyles.preview}
+          type={this.state.camera.type}
+        />
+        {this.state.isshowOK ?
+          <Overlay visible={this.state.isshowOK}
+            onClose={() => this.setState({ isshowOK: false })}
+            closeOnTouchOutside
+            animationType="zoomIn"
+            containerStyle={layoutstyles.overlay_containerstyle}
+            animationDuration={500}
+            childrenWrapperStyle={layoutstyles.overlay_childwrapper_style}
+          >
+            <View style={ComponentStyles.View_col_center}>
+              <Text style={ComponentStyles.popup_heading}>Data Scanned Successfully</Text>
+              <View style={layoutstyles.overlay_screen_button_view}>
+                <TouchableOpacity
+                  style={popupStyles.overlay_screen_small_button_style}
+                  onPress={() => this.onSubmit(this.state.scannedBarCode)}>
+                  <Text style={popupStyles.overlay_screen_button_text}>OK</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={popupStyles.overlay_screen_small_button_style}
+                  onPress={() => this.setState({ isshowOK: false })}
+                >
+                  <Text style={popupStyles.overlay_screen_button_text}>CANCEL</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Overlay>
+          : null}
+      </View>
+    );
+  }
+}
+
+const layoutstyles = {
+  container: {
+    flex: 1,
+  },
+  preview: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  overlay_containerstyle: {
+    backgroundColor: 'rgba(0, 0, 0, 0.50)',
+  },
+  overlay_childwrapper_style: {
+    borderRadius: 20,
+    width: '100%',
+    backgroundColor: colors.color_Background_color,
+
+  },
+  overlay_screen_button_view: {
+    flexDirection: 'row', justifyContent: 'space-evenly', margin: 5,
+  },
+};
+
+export default BarcodeScan;
+

package/src/Media/CAudioPlay.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import { View, Image, Text, TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
+import Slider from '@react-native-community/slider';
+import Sound from 'react-native-sound';
+import { colors } from '../CommonStyle/commonStyle';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+
+export default class PlayerScreen extends React.Component {
+    static navigationOptions = props => ({
+        title: props.navigation.state.params.title,
+    });
+    constructor() {
+        super();
+        this.state = {
+            playState: 'paused', //playing, paused
+            playSeconds: 0,
+            duration: 0,
+        };
+        this.sliderEditing = false;
+    }
+
+    componentDidMount() {
+        // this.play();
+
+        this.timeout = setInterval(() => {
+            if (this.sound && this.sound.isLoaded() && this.state.playState == 'playing' && !this.sliderEditing) {
+                this.sound.getCurrentTime((seconds, isPlaying) => {
+                    this.setState({ playSeconds: seconds });
+                });
+            }
+        }, 100);
+    }
+    componentWillUnmount() {
+        if (this.sound) {
+            this.sound.release();
+            this.sound = null;
+        }
+        if (this.timeout) {
+            clearInterval(this.timeout);
+        }
+    }
+
+    onSliderEditStart = () => {
+        this.sliderEditing = true;
+    };
+    onSliderEditEnd = () => {
+        this.sliderEditing = false;
+    };
+    onSliderEditing = value => {
+        if (this.sound) {
+            this.sound.setCurrentTime(value);
+            this.setState({ playSeconds: value });
+        }
+    };
+    play = async () => {
+        if (this.sound) {
+            this.sound.play(this.playComplete);
+            this.setState({ playState: 'playing' });
+        } else {
+            const filepath = this.props.audio;
+            this.sound = new Sound(filepath,'', (error) => {
+                if (error) {
+                    this.setState({ playState: 'paused' });
+                } else {
+                    this.setState({ playState: 'playing', duration: this.sound.getDuration() });
+                    this.sound.play(this.playComplete);
+                }
+            });
+        }
+    };
+    playComplete = (success) => {
+        if (this.sound) {
+            if (success) {
+            } else {
+            }
+            this.setState({ playState: 'paused', playSeconds: 0 });
+            this.sound.setCurrentTime(0);
+        }
+    };
+
+    pause = () => {
+        if (this.sound) {
+            this.sound.pause();
+        }
+        this.setState({ playState: 'paused' });
+    };
+
+    jumpPrev15Seconds = () => { this.jumpSeconds(-15); };
+    jumpNext15Seconds = () => { this.jumpSeconds(15); };
+    jumpSeconds = (secsDelta) => {
+        if (this.sound) {
+            this.sound.getCurrentTime((secs, isPlaying) => {
+                let nextSecs = secs + secsDelta;
+                if (nextSecs < 0) {nextSecs = 0;}
+                else if (nextSecs > this.state.duration) {nextSecs = this.state.duration;}
+                this.sound.setCurrentTime(nextSecs);
+                this.setState({ playSeconds: nextSecs });
+            });
+        }
+    };
+    getAudioTimeString(seconds) {
+        const h = parseInt(seconds / (60 * 60));
+        const m = parseInt(seconds % (60 * 60) / 60);
+        const s = parseInt(seconds % 60);
+        return ((h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s));
+    }
+    render() {
+        const currentTimeString = this.getAudioTimeString(this.state.playSeconds);
+        const durationString = this.getAudioTimeString(this.state.duration);
+        return (
+            <View style={layoutstyles.main_container}>
+                <View style={layoutstyles.main_child_container}>
+                    {/* {this.props.component != undefined && this.props.component != null ?
+                        <TouchableOpacity
+                            onLongPress={() => this.props.deleterequest(this.props.component)}
+                            style={layoutstyles.left_container}>
+                            {this.props.component.hasOwnProperty("filestatus") && this.props.component.filestatus == 3 ?
+                                <Image
+                                    source={{ uri: "https://cdn.iconscout.com/icon/premium/png-256-thumb/restore-3313724-2794064.png" }}
+                                    style={layoutstyles.delete_restore_icon}
+                                />
+                                :
+                                <Image
+                                    source={{ uri: "https://cdn.iconscout.com/icon/premium/png-256-thumb/restore-3313724-2794064.png" }}
+                                    style={layoutstyles.delete_restore_icon}
+                                />
+                            }
+                        </TouchableOpacity>
+                        : null} */}
+                    <View style={layoutstyles.right_container}>
+                        <View style={layoutstyles.right_child_container}>
+                            <TouchableOpacity
+                                onPress={this.jumpPrev15Seconds}
+                                style={ComponentStyles.View_col_center}
+                            >
+                                <FontAwesome name="rotate-left" size={25} />
+                            </TouchableOpacity>
+
+                            {this.state.playState == 'playing' &&
+                                <TouchableOpacity onPress={this.pause}
+                                    style={layoutstyles.play_or_pause_container}
+                                >
+                                    <FontAwesome name="pause" size={25} />
+                                </TouchableOpacity>}
+                            {this.state.playState == 'paused' &&
+                                <TouchableOpacity onPress={this.play}
+                                    style={layoutstyles.play_or_pause_container}>
+                                    <FontAwesome name="play" size={25} />
+                                </TouchableOpacity>}
+                            <TouchableOpacity onPress={this.jumpNext15Seconds}
+                                style={ComponentStyles.View_col_center}>
+                                <FontAwesome name="rotate-right" size={25} />
+                            </TouchableOpacity>
+                        </View>
+                        <View style={layoutstyles.slider_bar_container}>
+                            <Text style={layoutstyles.duration_text}>
+                                {currentTimeString}</Text>
+                            <Slider
+                                onTouchStart={this.onSliderEditStart}
+                                onTouchEnd={this.onSliderEditEnd}
+                                onValueChange={this.onSliderEditing}
+                                value={this.state.playSeconds} maximumValue={this.state.duration}
+                                maximumTrackTintColor={colors.color_audio_minimumTrackTintColor}
+                                minimumTrackTintColor={colors.color_audio_maximumTrackTintColor} thumbTintColor={colors.color_audio_maximumTrackTintColor}
+                                style={layoutstyles.slider_bar_style}
+                            />
+                            <Text style={layoutstyles.duration_text}>
+                                {durationString}
+                            </Text>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        );
+    }
+}
+
+const layoutstyles = StyleSheet.create({
+    main_container: {
+        width: Dimensions.get('window').width * 0.7,
+        marginLeft:10,
+    },
+    slider_bar_style: {
+        flex: 1, alignSelf: 'center',
+        marginHorizontal: Platform.select({ ios: 5 }),
+    },
+    main_child_container: {
+        backgroundColor:'#DAF0FF',
+        padding: 5,
+        borderColor: colors.color_componentBordercolor, borderWidth: 0.5,
+        marginTop: Dimensions.get('window').height * 0.005,
+        borderRadius: 7,
+        justifyContent: 'center',
+        width: Dimensions.get('window').width * 0.7,
+        justifyContent: 'center', flexDirection: 'row',
+    },
+    right_container: {
+        flex: 5,
+    },
+    delete_restore_icon: {
+        width: 50, height: 50, margin: 5, alignSelf: 'center',
+    },
+    right_child_container: {
+        flexDirection: 'row', justifyContent: 'center', marginVertical: 5,
+    },
+    left_container: {
+        flex: 1, justifyContent: 'center', alignItems: 'center',
+    },
+    duration_text: {
+        color: 'black', alignSelf: 'center', fontSize: normalize(10),
+    },
+    slider_bar_container: {
+        marginVertical: 2, marginHorizontal: 2, flexDirection: 'row',
+        paddingRight: Dimensions.get('window').width * 0.02,
+    },
+
+    jumpleft_or_right_icon: {
+        width: 30, height: 30,
+    },
+    play_or_pause_container: {
+        marginHorizontal: 20, marginLeft: 25, marginRight: 25,
+    },
+    play_or_pause_icon: {
+        width: 35, height: 35,
+    },
+});
+