@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -7,7 +7,7 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
-  let format = 'DD.MM.YY hh:mm';
+  let format = 'DD.MM.YY HH:mm';
   if (formatType === 'date') {
     format = 'DD.MM.YY';
   }
@@ -16,7 +16,7 @@ const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
       <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
         {moment(time).format(format)}
       </Text>
-      <IconOutline name={'calendar'} size={16} color={Colors.Gray8} />
+      <IconOutline style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
 });
@@ -40,4 +40,9 @@ const styles = StyleSheet.create({
   txtTime: {
     marginRight: 4,
   },
+  iconDateTime: {
+    marginBottom: 4,
+    fontSize: 16,
+    color: Colors.Gray8,
+  },
 });

package/src/commons/Device/HistoryChart.js

@@ -11,7 +11,7 @@ import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
-import ThreeButtonHistory from '../ThreeButtonHistory';
+import FourButtonFilterHistory from '../FourButtonFilterHistory';
 import { formatMoney } from '../../utils/Utils';
 
 export const dateTimeType = {
@@ -33,98 +33,102 @@ const HistoryChart = memo(
     endDate,
     setEndDate,
     setStartDate,
+    groupBy,
     setGroupBy,
     configuration,
   }) => {
     const t = useTranslations();
-    const dateNow = moment().valueOf();
     const [chartOptions, setChartOptions] = useState({
       index: -1,
       showAll: true,
     });
     const [eventPicker, setEventPicker] = useState({
-      currentChangeTime: '',
       showModalEnd: false,
       showModalStart: false,
       startTime: startDate ? startDate : moment().subtract(1, 'day').valueOf(),
-      endTime: dateNow,
+      endTime: endDate ? endDate : moment().valueOf(),
     });
     const [price, setPrice] = useState(null);
 
     const onStart = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: 'start',
+      setEventPicker((state) => ({
+        ...state,
         showModalStart: true,
         showModalEnd: false,
-      });
-    }, [eventPicker]);
+      }));
+    }, []);
     const onEnd = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: 'end',
-        show: true,
+      setEventPicker((state) => ({
+        ...state,
         showModalStart: false,
         showModalEnd: true,
-      });
-    }, [eventPicker]);
-    const onConfirmStart = (date) => {
-      if (typeof date === 'number') {
-        onCancel();
-        return;
-      }
-      if (moment(date).valueOf() < eventPicker.endTime) {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalStart: false,
-          startTime: moment(date).valueOf(),
-        });
-      } else {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalStart: false,
-          startTime: moment(date).valueOf(),
-          endTime: moment(date).add(1, 'day').valueOf(),
+      }));
+    }, []);
+    const onConfirmStart = useCallback(
+      (date) => {
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          if (moment(date).valueOf() < state.endTime) {
+            setStartDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalStart: false,
+              startTime: moment(date).valueOf(),
+            };
+          } else {
+            setStartDate(moment(date).valueOf());
+            setEndDate(moment(date).add(1, 'day').valueOf());
+            return {
+              ...state,
+              showModalStart: false,
+              startTime: moment(date).valueOf(),
+              endTime: moment(date).add(1, 'day').valueOf(),
+            };
+          }
         });
-      }
-
-      setStartDate(moment(date).valueOf());
-    };
+      },
+      [onCancel, setStartDate, setEndDate]
+    );
 
-    const onConfirmEnd = (date) => {
-      if (typeof date === 'number') {
-        onCancel();
-        return;
-      }
-      if (moment(date).valueOf() >= eventPicker.startTime) {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalEnd: false,
-          endTime: moment(date).valueOf(),
+    const onConfirmEnd = useCallback(
+      (date) => {
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          if (moment(date).valueOf() > state.startTime) {
+            setEndDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalEnd: false,
+              endTime: moment(date).valueOf(),
+            };
+          } else {
+            setStartDate(moment(date).add(-1, 'day').valueOf());
+            setEndDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalEnd: false,
+              startTime: moment(date).add(-1, 'day').valueOf(),
+              endTime: moment(date).valueOf(),
+            };
+          }
         });
-      } else {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalEnd: false,
-          endTime: moment(date).valueOf(),
-          startTime: moment(date).subtract(1, 'day').valueOf(),
-        });
-      }
-      setEndDate(moment(date).valueOf());
-    };
+      },
+      [onCancel, setStartDate, setEndDate]
+    );
 
     const onCancel = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: '',
+      setEventPicker((state) => ({
+        ...state,
         showModalEnd: false,
         showModalStart: false,
-      });
-    }, [eventPicker]);
+      }));
+    }, []);
     const onShowOneChart = useCallback(
       (index) => {
         if (index === chartOptions.index) {
@@ -152,7 +156,8 @@ const HistoryChart = memo(
         return null;
       }
       const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
-      return sum * price;
+      const roundedSum = sum * price;
+      return roundedSum.toFixed();
     }, [configuration, datas, chartConfig]);
 
     const renderChart = useCallback(() => {
@@ -179,25 +184,19 @@ const HistoryChart = memo(
               {t('history')}
             </Text>
             {configuration.type === 'horizontal_bar_chart' && (
-              <ThreeButtonHistory
-                setStartDate={setStartDate}
-                setEndDate={setEndDate}
+              <FourButtonFilterHistory
+                groupBy={groupBy}
                 setGroupBy={setGroupBy}
-                startDate={startDate}
-                endDate={endDate}
               />
             )}
           </View>
-          {configuration.type !== 'horizontal_bar_chart' && (
-            <DateTimeRangeChange
-              startTime={eventPicker.startTime}
-              onStart={onStart}
-              onEnd={onEnd}
-              endTime={eventPicker.endTime}
-              date={dateNow}
-              formatType={formatType}
-            />
-          )}
+          <DateTimeRangeChange
+            startTime={eventPicker.startTime}
+            onStart={onStart}
+            onEnd={onEnd}
+            endTime={eventPicker.endTime}
+            formatType={formatType}
+          />
         </View>
         {configuration.config === 'power_consumption' && (
           <View style={styles.wrapCalculateCost}>

package/src/commons/Device/HorizontalBarChart.js

@@ -1,34 +1,19 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import HighchartsReactNative from '@highcharts/highcharts-react-native/src/HighchartsReactNative';
+import { isEmpty } from 'lodash';
 
 import { Colors } from '../../configs';
 import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
+import { arePropsEqual } from '../../utils/Utils';
 
 const HorizontalBarChart = memo(({ datas, config }) => {
-  const dataY = datas[0].data.map((item, index) => {
-    return {
-      color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
-      y: item.y,
-    };
-  });
-  const dataX = datas[0].data.map((item) => item.x);
-  const heightChart = useMemo(() => {
-    return dataX.length > 1 ? dataX.length * 55 : 90;
-  }, [dataX]);
-  const maxY = getMaxValueIndex(dataY);
-  dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
-
-  // eslint-disable-next-line no-unused-vars
-  const chartOptions = {
+  const [chartOptions, setChartOptions] = useState({
     chart: {
       type: 'bar',
       style: {
         fontFamily: 'Arial',
       },
-      scrollablePlotArea: {
-        minHeight: dataY.length * 32,
-      },
     },
     credits: {
       enabled: false,
@@ -37,7 +22,6 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       text: '',
     },
     xAxis: {
-      categories: dataX,
       title: {
         text: null,
       },
@@ -45,14 +29,6 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         enabled: true,
       },
     },
-    series: [
-      {
-        marker: { enabled: true },
-        color: Colors.Primary + '50',
-        name: JSON.stringify(config),
-        data: dataY,
-      },
-    ],
     time: {
       timezoneOffset: -7 * 60,
     },
@@ -85,7 +61,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
             const costStyle = valueStyle + 'font-weight:bold;';
 
             let label = `<span style="${valueStyle}">` + `${this.y}${unit}`;
-            if (price === null || isNaN(price)) {
+            if (price === '' || price === null || isNaN(price)) {
               return label + '</span>';
             }
 
@@ -119,7 +95,48 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         shadow: false,
       },
     },
-  };
+  });
+
+  const heightChart = useMemo(() => {
+    const dataX = datas[0].data.map((item) => item.x);
+    return dataX.length > 1 ? dataX.length * 55 : 90;
+  }, [datas]);
+
+  useEffect(() => {
+    const dataY = datas[0].data.map((item, index) => {
+      return {
+        color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
+        y: item.y,
+      };
+    });
+    const dataX = datas[0].data.map((item) => item.x);
+    const maxY = getMaxValueIndex(dataY);
+    if (!isEmpty(maxY.max)) {
+      dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
+    }
+
+    setChartOptions((options) => ({
+      ...options,
+      chart: {
+        ...options.chart,
+        scrollablePlotArea: {
+          minHeight: dataY.length * 32,
+        },
+      },
+      xAxis: {
+        ...options.xAxis,
+        categories: dataX,
+      },
+      series: [
+        {
+          marker: { enabled: true },
+          color: Colors.Primary + '50',
+          name: JSON.stringify(config),
+          data: dataY,
+        },
+      ],
+    }));
+  }, [datas, config]);
 
   return (
     <View style={[styles.container, { height: heightChart }]}>
@@ -129,7 +146,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       />
     </View>
   );
-});
+}, arePropsEqual);
 
 export default HorizontalBarChart;
 

package/src/commons/Device/LinearChart.js

@@ -3,6 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import HighchartsReactNative from '@highcharts/highcharts-react-native';
 import moment from 'moment';
 import { Colors } from '../../configs';
+import { arePropsEqual } from '../../utils/Utils';
 
 const convertData = (data = []) => {
   let arr = [];
@@ -56,6 +57,32 @@ const chartOptions = {
     },
     minRange: 3600 * 24 * 1000,
   },
+  plotOptions: {
+    series: {
+      events: {
+        legendItemClick: function () {
+          const { index, visible } = this;
+          const isHiding = (serie, i) => {
+            if (i === index) {
+              return visible;
+            }
+            return !serie.visible;
+          };
+          if (this.chart.series.every(isHiding)) {
+            this.chart.yAxis[0].update({
+              min: 0,
+              max: 100,
+            });
+          } else {
+            this.chart.yAxis[0].update({
+              min: undefined,
+              max: undefined,
+            });
+          }
+        },
+      },
+    },
+  },
 };
 
 function LinearChart({ datas }) {
@@ -93,7 +120,7 @@ function LinearChart({ datas }) {
   );
 }
 
-export default memo(LinearChart);
+export default memo(LinearChart, arePropsEqual);
 
 const styles = StyleSheet.create({
   container: {

package/src/commons/Form/CurrencyInput.js

@@ -136,6 +136,7 @@ const CurrencyInput = ({
           placeholder={placeholder}
           onSubmitEditing={onSubmitEditing}
           style={styles.input}
+          maxLength={10}
         />
         <Text
           semibold

package/src/commons/FourButtonFilterHistory/__test__/FourButtonFilterHistory.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import FourButtonFilterHistory from '../index';
+import { TouchableOpacity } from 'react-native';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <FourButtonFilterHistory {...props} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+test('test', async () => {
+  const mockSetGroupBy = jest.fn();
+  let tree;
+  let props = {
+    groupBy: 'date',
+    setGroupBy: mockSetGroupBy,
+  };
+
+  await act(async () => {
+    tree = await create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const buttons = instance.findAllByType(TouchableOpacity);
+  expect(buttons).toHaveLength(4);
+
+  const clickButton = async (index, data) => {
+    mockSetGroupBy.mockClear();
+    await act(async () => {
+      await buttons[index].props.onPress();
+    });
+    expect(mockSetGroupBy).toBeCalledWith(data);
+  };
+
+  await clickButton(0, 'date');
+  await clickButton(1, 'week');
+  await clickButton(2, 'month');
+  await clickButton(3, 'year');
+});

package/src/commons/FourButtonFilterHistory/index.js

@@ -0,0 +1,72 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './styles';
+
+const FourButtonFilterHistory = memo(({ groupBy, setGroupBy }) => {
+  const listItem = useMemo(
+    () => [
+      {
+        title: 'D',
+        data: 'date',
+      },
+
+      {
+        title: 'W',
+        data: 'week',
+      },
+
+      {
+        title: 'M',
+        data: 'month',
+      },
+
+      {
+        title: 'Y',
+        data: 'year',
+      },
+    ],
+    []
+  );
+
+  const ItemButton = memo(({ title, onPress, isSelected }) => {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={[styles.button, isSelected && styles.selectedButton]}
+      >
+        <View>
+          <Text bold color={isSelected && Colors.Primary}>
+            {title}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  const onPressButton = useCallback(
+    (data) => () => {
+      setGroupBy(data);
+    },
+    [setGroupBy]
+  );
+
+  return (
+    <View style={styles.row}>
+      {listItem &&
+        listItem.map((item, index) => {
+          return (
+            <ItemButton
+              key={index}
+              title={item.title}
+              onPress={onPressButton(item.data)}
+              isSelected={item.data === groupBy}
+            />
+          );
+        })}
+    </View>
+  );
+});
+
+export default FourButtonFilterHistory;

package/src/commons/FourButtonFilterHistory/styles.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.Gray4,
+    borderRadius: 5,
+    padding: 2,
+  },
+  button: {
+    width: 31,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 5,
+  },
+  selectedButton: {
+    backgroundColor: Colors.White,
+  },
+});

package/src/commons/ImagePicker/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import ImagePickerCrop from 'react-native-image-crop-picker';
+
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import ButtonPopup from '../ButtonPopup';
@@ -54,34 +55,29 @@ const ImagePicker = ({
     }
   }, []);
 
-  // options info: check https://github.com/react-native-image-picker/react-native-image-picker
   const captureImage = useCallback(
     async (type) => {
       let options = optionsCapture
         ? optionsCapture
         : {
             mediaType: type,
-            quality: 1,
-            saveToPhotos: true,
+            compressImageMaxWidth: 1280,
+            compressImageMaxHeight: 720,
+            compressImageQuality: 0.8,
           };
 
       let isCameraPermitted = await requestCameraPermission();
       let isStoragePermitted = await requestExternalWritePermission();
       if (isCameraPermitted && isStoragePermitted) {
-        launchCamera(options, (response) => {
-          if (response.didCancel) {
-            return;
-          } else if (response.errorCode === 'camera_unavailable') {
-            return;
-          } else if (response.errorCode === 'permission') {
-            return;
-          } else if (response.errorCode === 'others') {
-            return;
-          }
-
-          setImageUrl(response);
-          setShowImagePicker(false);
-        });
+        await ImagePickerCrop.openCamera(options)
+          .then((response) => {
+            setImageUrl(response);
+            setShowImagePicker(false);
+          })
+          .catch((e) => {
+            /* eslint-disable no-console */
+            console.log('ERROR ' + e);
+          });
       }
     },
     [
@@ -94,26 +90,24 @@ const ImagePicker = ({
   );
 
   const chooseFile = useCallback(
-    (type) => {
+    async (type) => {
       let options = optionsSelect
         ? optionsSelect
         : {
             mediaType: type,
-            quality: 1,
+            compressImageMaxWidth: 1280,
+            compressImageMaxHeight: 720,
+            compressImageQuality: 0.8,
           };
-      launchImageLibrary(options, (response) => {
-        if (response.didCancel) {
-          return;
-        } else if (response.errorCode === 'camera_unavailable') {
-          return;
-        } else if (response.errorCode === 'permission') {
-          return;
-        } else if (response.errorCode === 'others') {
-          return;
-        }
-        setImageUrl(response);
-        setShowImagePicker(false);
-      });
+      await ImagePickerCrop.openPicker(options)
+        .then((response) => {
+          setImageUrl(response);
+          setShowImagePicker(false);
+        })
+        .catch((e) => {
+          /* eslint-disable no-console */
+          console.log('ERROR ' + e);
+        });
     },
     [setImageUrl, setShowImagePicker, optionsSelect]
   );