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

package/src/Custom/Charts/CLineChart.js

@@ -1,193 +0,0 @@
-import React, { useState } from 'react';
-import { Defs, LinearGradient, Stop } from 'react-native-svg';
-import { View, Dimensions, TouchableOpacity, Platform } from 'react-native';
-import { LineChart, Grid, XAxis, YAxis } from 'react-native-svg-charts';
-import { Circle, G, Line, Rect, Text } from 'react-native-svg';
-import CText from '../../CustomComponents/CText';
-import moment from 'moment';
-import SDatePickerNew from '../../StaticComponents/SDatePickerNew';
-import { normalize } from '../../CommonStyle/componentStyle';
-import { ScrollView } from 'react-native';
-import { ArrayCheck, isBNUL, ValueCheck } from '../../CommonStyle/ComponentFunctions';
-
-
-export default function CLineChart(props) {
-
-    const [index, setIndex] = useState(1);
-    const [propsData, setPropsData] = useState(props.data);
-    const [data, setData] = useState(isBNUL(propsData) ? (propsData).map(({ value }) => parseFloat(value)) : []);
-    const axesSvg = { fontSize: normalize(11), fill: 'grey' };
-    const verticalContentInset = { top: 5, bottom: 5 };
-    const xAxisHeight = 30;
-
-    const Gradient = () => (
-        <Defs key={'gradient'}>
-            <LinearGradient id={'gradient'} x1={'0'} y={'0%'} x2={'100%'} y2={'0%'}>
-                <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'} />
-                <Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'} />
-            </LinearGradient>
-        </Defs>
-    );
-
-    const Tooltip = ({ x, y }) => (
-
-        propsData[index] != undefined ?
-            <G
-                x={10}
-                key={'tooltip'}
-                onPress={() => console.log('tooltip clicked')}
-            >
-                <G y={50}>
-                    <Rect
-                        height={normalize(30)}
-                        width={normalize(70)}
-                        stroke={'grey'}
-                        fill={'white'}
-                        ry={10}
-                        rx={10}
-                    />
-                    <Text
-                        x={75 / 2}
-                        dy={normalize(10)}
-                        alignmentBaseline={'middle'}
-                        textAnchor={'middle'}
-                        stroke={'rgb(134, 65, 244)'}
-                    >
-                        {`${data[index]}`}
-                    </Text>
-
-                    <Text
-                        x={75 / 2}
-                        dy={normalize(25)}
-                        alignmentBaseline={'middle'}
-                        textAnchor={'middle'}
-                        stroke={'rgb(134, 65, 244)'}
-                        fontSize={'7'}
-                    >
-                        {`${propsData[index].date}`}
-                    </Text>
-                </G>
-                <G x={75 / 2}>
-                    <Circle
-                        cy={y(data[index])}
-                        r={6}
-                        stroke={'rgb(134, 65, 244)'}
-                        strokeWidth={2}
-                        fill={'white'}
-                    />
-                </G>
-            </G> : null
-    );
-
-    const Decorator = ({ x, y, data }) => {
-        return data.map((value, index) => (
-            <Circle
-                onPress={() => setIndex(index)}
-                key={index}
-                cx={x(index)}
-                cy={y(value)}
-                r={6}
-                stroke={'rgb(134, 65, 244)'}
-                fill={'white'}
-            />
-        ));
-    };
-
-    return (
-        data != null && data != undefined && data.length > 0 ?
-            <>
-                <View style={{ alignItems: 'flex-start', borderWidth: 0, borderColor: 'green', backgroundColor: 'white' }}>
-                    <View style={{ flexDirection: 'row', borderWidth: 0 }}>
-                        <YAxis
-                            data={data}
-                            style={{ borderWidth: 0 }}
-                            contentInset={verticalContentInset}
-                            svg={axesSvg}
-                        />
-                        <View style={{ flex: 1, borderWidth: 0 }}>
-                            <LineChart
-                                style={{ height: normalize(150) }}
-                                data={data}
-                                contentInset={{ top: normalize(10), bottom: normalize(10), left: normalize(10), right: normalize(10) }}
-                                svg={{
-                                    strokeWidth: normalize(3),
-                                    stroke: 'url(#gradient)',
-                                }}
-                            >
-                                <Grid
-                                    direction="HORIZONTAL"
-                                // direction='VERTICAL'
-                                />
-                                <Gradient />
-                                {/* <Tooltip /> */}
-                                <Decorator />
-                            </LineChart>
-                        </View>
-                    </View>
-                    <XAxis
-                        style={{ marginHorizontal: 0, height: normalize(55), borderWidth: 0, width: '100%' }}
-                        data={propsData}
-                        formatLabel={(value, index) => propsData[index].displayvalue}
-                        contentInset={{ left: normalize(20), right: normalize(10)}}
-                        svg={{ fontSize: normalize(7), fontWeight: 'bold', fill: 'black', translateY: normalize(15), rotation: normalize(75), originY: 0 }}
-                    />
-                </View>
-            </>
-            : null
-    );
-}
-
-
-{/* <CLinechart
-component={Line}
-data={Line.data}
- /> */}
-
-
-// var Line = {
-//     "keyid": 3,
-//     "customcomponent": "CLinechart",
-//     "heading": "JULY",
-//     "data": [
-//         {
-//             "value": 220,
-//             "display": "JUL 18"
-//         },
-//         {
-//             "value": 189,
-//             "display": "JUL 17"
-//         },
-//         {
-//             "value": 178,
-//             "display": "JUL 16"
-//         },
-//         {
-//             "value": 170,
-//             "display": "JUL 15"
-//         },
-//         {
-//             "value": 156,
-//             "display": "JUL 14"
-//         },
-//         {
-//             "value": 196,
-//             "display": "JUL 13"
-//         },
-//         {
-//             "value": 122,
-//             "display": "JUL 12"
-//         },
-//         {
-//             "value": 139,
-//             "display": "JUL 11"
-//         },
-//         {
-//             "value": 167,
-//             "display": "JUL 10"
-//         },
-//         {
-//             "value": 145,
-//             "display": "JUL 09"
-//         }
-//     ]
-// }

package/src/Custom/Charts/CPieChart.js

@@ -1,186 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Dimensions, View, Text as RNText, TouchableOpacity, Platform } from 'react-native';
-import { PieChart } from 'react-native-svg-charts';
-import { Circle, G, Line, Text } from 'react-native-svg';
-import CText from '../../CustomComponents/CText';
-import moment from 'moment';
-import SDatePickerNew from '../../StaticComponents/SDatePickerNew';
-import { normalize } from '../../CommonStyle/componentStyle';
-
-export default function CPiechart(props) {
-    const [data, setData] = useState(props.data);
-    // console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>",props.data)
-    const [Nested, setNested] = useState(false);
-    const [visibility, setVisibility] = useState(true);
-    const [colorcode, setColorCode] = useState(props.colorArr != undefined && props.colorArr != null ? (props.colorArr).filter(word => word != undefined) : null);
-    const [styles, setStyles] = useState(props.style != undefined ? props.style : {
-        'innerRadius': normalize(52),
-        'outerRadius': normalize(30),
-        'labelRadius': normalize(70),
-        'height': 0.35,
-    });
-    const pieData =
-        data != undefined && data.filter(value => value.value > 0)
-            .map((value, index) => ({
-                value: value.value,
-                svg: { fill: colorcode != undefined ? colorcode[index] : getPieColor(index) },
-                key: `pie-${index}`,
-            }));
-
-    function getDateWisePieChart(params) {
-        setData([
-            {
-                'value': 33,
-                'display': '2022',
-            },
-            {
-                'value': 29,
-                'display': '2021',
-            },
-        ]);
-    }
-    const Labels = ({ slices }) => {
-        return slices.map((slice, index) => {
-            const { labelCentroid, pieCentroid, data } = slice;
-            return (
-                <G key={index}>
-                    <Line
-                        x1={labelCentroid[0]}
-                        y1={labelCentroid[1]}
-                        x2={pieCentroid[0]}
-                        y2={pieCentroid[1]}
-                        stroke={data.svg.fill}
-                    />
-
-                    <G x={labelCentroid[0]} y={labelCentroid[1]}>
-                        <Circle r={normalize(13)} fill={data.svg.fill} />
-                        <Circle r={normalize(11)} fill={'white'} />
-                        <Text
-                            key={index}
-                            x={-0.5}
-                            y={1.5}
-                            fill={'black'}
-                            textAnchor={'middle'}
-                            alignmentBaseline={'middle'}
-                            fontSize={normalize(10)}
-                            fontWeight={'bolder'}
-                            stroke={'white'}
-                            opacity={'1'}
-                            strokeWidth={0.4}>
-                            {data.value}
-                        </Text>
-                    </G>
-                </G>
-            );
-        });
-    };
-
-    function getPreviousInfo() {
-        setNested(true);
-    }
-
-    return (
-        pieData.length > 0 && visibility ?
-            <View style={{}}>
-                {Nested ?
-                    <CText>KKK</CText> : null}
-
-                <View style={{ paddingVertical: 0, marginTop: 0 }}>
-
-                    {props.component != undefined ?
-                        <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
-                            <CText style={{ fontSize: normalize(15), paddingHorizontal: 5, fontWeight: 'bold', color: 'black' }}>{props.component != undefined ? props.component.heading : ''}</CText>
-                        </View> : null}
-
-                    {props.component != undefined && props.component.date != undefined ?
-                        <View>
-                            <SDatePickerNew
-                                callBack={val => (val == undefined ? null : getDateWisePieChart(val))} />
-                        </View> : null}
-
-                    <View style={{ flexDirection: 'row', alignItems: 'center'}}>
-                        <View style={{ flexDirection: 'row' }}>
-                            <PieChart
-                                style={{
-                                    marginTop:normalize(-8),
-                                    height: Dimensions.get('screen').height *
-                                        (styles.height), width: Dimensions.get('screen').width * 0.6,
-                                }}
-                                data={pieData}
-                                innerRadius={normalize(styles.innerRadius)}
-                                outerRadius={normalize(styles.outerRadius)}
-                                labelRadius={normalize(styles.labelRadius)}
-                            >
-                                <Labels />
-                            </PieChart>
-                        </View>
-
-                        {/* <View style={{ paddingLeft: 15 }}>
-                            {data != undefined ? data.map((display, p) => {
-                                return (
-                                    display != null && display != undefined ?
-                                        <View key={p} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: normalize(4) }}>
-                                            <View style={{
-                                                paddingVertical: normalize(5), paddingHorizontal: normalize(4),
-                                                backgroundColor: getPieColor(p), borderRadius: 5, alignItems: 'center', justifyContent: 'center',
-                                                marginRight: 5
-                                            }}>
-                                                <CText style={{ fontSize: normalize(12), color: 'black', fontWeight: 'bold', color: 'white' }}>{display.value}</CText>
-                                            </View>
-                                            <CText style={{ fontSize: normalize(12), color: 'black', fontWeight: '500' }}>{display.display}</CText>
-                                        </View> : null)
-                            }) : null}
-                        </View> */}
-                    </View>
-                </View>
-            </View> : null
-    );
-    function getPieColor(params) {
-        switch (params) {
-            case 0: return 'blue';
-            case 1: return 'green';
-            case 2: return '#cf0404';
-            case 3: return '#24bfde';
-            case 4: return '#7b36bc';
-            case 5: return '#f28909';
-            case 6: return '#0cd3cd';
-            case 7: return '#ad400a';
-            default: return 'black';
-        }
-    }
-}
-
-{/* <CPiechart
-component={PieChart}
-data={PieChart.data}
-style={{
-    "innerRadius": normalize(52),
-    "outerRadius": normalize(30),
-    "labelRadius": normalize(70),
-    "height": 0.27
-}} /> */}
-
-// var PieChart = {
-//     "keyid": 3,
-//     "customcomponent": "CPiechart",
-//     "heading": "Monthly Profit",
-//     // "date": "2021-03-01",
-//     "data": [
-//         {
-//             "value": 23,
-//             "display": "JANUVARY"
-//         },
-//         {
-//             "value": 35,
-//             "display": "FEBRUVARY"
-//         },
-//         {
-//             "value": 40,
-//             "display": "MARCH"
-//         },
-//         {
-//             "value": 87,
-//             "display": "APRIL"
-//         }
-//     ]
-// }

package/src/Custom/Loader.js

@@ -1,182 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  StyleSheet,
-  Dimensions,
-  View,
-  Modal,
-  Animated,
-  Easing,
-  Text,
-  Image,
-  Platform,
-} from 'react-native';
-import { normalize } from '../CommonStyle/componentStyle';
-import { APIURL } from '../../../../../src/Common/apiConstants';
-
-export default function Loader({
-  visible = true,
-  overlayColor = 'rgba(0,0,0,0.4)',
-  loaderColor = 'lightblue',
-  size = Platform.OS !== 'web' ? 30 : 50,
-  gifSource = { uri: `${APIURL}file/getCommonFile/image/heartpulse.gif` },
-  message = '',
-  messageStyle = {},
-  animationType = 'fade',
-  hasBackground = true,
-  borderRadius = 20,
-  shadow = true,
-}) {
-  const [rotation] = useState(new Animated.Value(0));
-  const [pulse] = useState(new Animated.Value(1));
-  const [fade] = useState(new Animated.Value(0));
-
-  // Rotation animation
-  useEffect(() => {
-    if (!gifSource) { // Only animate if not using a GIF
-      Animated.loop(
-        Animated.timing(rotation, {
-          toValue: 1,
-          duration: 1500,
-          easing: Easing.linear,
-          useNativeDriver: true,
-        })
-      ).start();
-    }
-
-    // Pulse animation
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(pulse, {
-          toValue: 1.1,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-        Animated.timing(pulse, {
-          toValue: 1,
-          duration: 800,
-          useNativeDriver: true,
-        }),
-      ])
-    ).start();
-
-    // Fade in animation
-    Animated.timing(fade, {
-      toValue: 1,
-      duration: 300,
-      useNativeDriver: true,
-    }).start();
-  }, []);
-
-  const spin = rotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  const loaderContent = gifSource ? (
-    <Image
-      style={[styles.icon_style, { width: normalize(size), height: normalize(size) }]}
-      source={gifSource}
-      resizeMode="contain"
-    />
-  ) : (
-    <Animated.View style={[
-      styles.defaultLoader,
-      {
-        borderColor: loaderColor,
-        transform: [{ rotate: spin }, { scale: pulse }],
-        width: normalize(size),
-        height: normalize(size),
-        borderWidth: normalize(size / 10),
-      },
-    ]}>
-      <View style={[
-        styles.innerCircle,
-        {
-          backgroundColor: loaderColor,
-          width: normalize(size / 2),
-          height: normalize(size / 2),
-        },
-      ]} />
-    </Animated.View>
-  );
-
-
-
-
-  return (
-    <Modal
-      animationType={animationType}
-      transparent={true}
-      visible={visible}
-      onRequestClose={() => { }}
-    >
-      <Animated.View style={[
-        styles.modalContainer,
-        {
-          backgroundColor: overlayColor,
-          opacity: fade,
-        },
-      ]}>
-        <Animated.View style={[
-          styles.loaderContainer,
-          {
-            backgroundColor: hasBackground ? 'white' : 'transparent',
-            borderRadius: normalize(borderRadius),
-            transform: [{ scale: pulse }],
-            ...(shadow && styles.shadowStyle),
-          },
-        ]}>
-          {loaderContent}
-          {message ? (
-            <Text style={[styles.messageText, messageStyle]}>
-              {message}
-            </Text>
-          ) : null}
-        </Animated.View>
-      </Animated.View>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-
-
-  modalContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loaderContainer: {
-    padding: normalize(20),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  icon_style: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  defaultLoader: {
-    borderRadius: normalize(100),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  innerCircle: {
-    borderRadius: normalize(100),
-  },
-  messageText: {
-    marginTop: normalize(15),
-    fontSize: normalize(14),
-    color: '#555',
-    textAlign: 'center',
-  },
-  shadowStyle: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-});