@eohjsc/react-native-smart-city 0.3.89 → 0.3.91

package/src/commons/DateTimeRangeChange/index.js

@@ -1,12 +1,13 @@
-import React, { memo, useCallback, useState } from 'react';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
+import moment from 'moment/moment';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
-import { Colors } from '../../configs';
 import Text from '../Text';
+import { Colors } from '../../configs';
 import DateTimeButton from './DateTimeButton';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import moment from 'moment/moment';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { DATE_TIME_FORMAT } from '../../configs/Constants';
 
 const DateTimeRangeChange = memo(
   ({
@@ -18,11 +19,12 @@ const DateTimeRangeChange = memo(
     selectEnd,
     inline = true,
   }) => {
-    const format = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
+    const format = showTime ? DATE_TIME_FORMAT.DMY_HM : DATE_TIME_FORMAT.DMY;
     const mode = showTime ? 'datetime' : 'date';
     const t = useTranslations();
-    const ensureDateStart = moment(startTime);
-    const ensureDateEnd = moment(endTime);
+
+    const [startDate, setStartDate] = useState(moment(startTime));
+    const [endDate, setEndDate] = useState(moment(endTime));
 
     const [eventPicker, setEventPicker] = useState({
       showModalEnd: false,
@@ -30,34 +32,18 @@ const DateTimeRangeChange = memo(
     });
 
     const onStart = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: true,
-        showModalEnd: false,
-      }));
+      setEventPicker({ showModalStart: true });
     }, []);
+
     const onEnd = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: false,
-        showModalEnd: true,
-      }));
+      setEventPicker({ showModalEnd: true });
     }, []);
+
     const onConfirmStart = useCallback(
       (date) => {
         const selectedDate = date ? moment(date) : moment().valueOf();
-        setEventPicker((state) => {
-          if (typeof date === 'number') {
-            onCancel();
-            return state;
-          }
-          return {
-            ...state,
-            showModalStart: false,
-            showModalEnd: true,
-          };
-        });
         selectStart(selectedDate);
+        onCancel();
       },
       [onCancel, selectStart]
     );
@@ -65,30 +51,27 @@ const DateTimeRangeChange = memo(
     const onConfirmEnd = useCallback(
       (date) => {
         const selectedDate = date ? moment(date) : moment().valueOf();
-        setEventPicker((state) => {
-          if (typeof date === 'number') {
-            onCancel();
-            return state;
-          }
-
-          return {
-            ...state,
-            showModalEnd: false,
-          };
-        });
         selectEnd(selectedDate);
+        onCancel();
       },
       [onCancel, selectEnd]
     );
 
     const onCancel = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
+      setEventPicker({
         showModalEnd: false,
         showModalStart: false,
-      }));
+      });
     }, []);
 
+    useEffect(() => {
+      setStartDate(moment(startTime));
+    }, [startTime]);
+
+    useEffect(() => {
+      setEndDate(moment(endTime));
+    }, [endTime]);
+
     return (
       <View
         style={[styles.dateTimeView, !inline && styles.spaceBetween, style]}
@@ -99,7 +82,7 @@ const DateTimeRangeChange = memo(
           </Text>
           <DateTimeButton onPress={onStart} style={!inline && styles.button}>
             <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
-              {ensureDateStart.format(format)}
+              {startDate.format(format)}
             </Text>
           </DateTimeButton>
         </View>
@@ -109,13 +92,13 @@ const DateTimeRangeChange = memo(
           </Text>
           <DateTimeButton onPress={onEnd} style={!inline && styles.button}>
             <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
-              {ensureDateEnd.format(format)}
+              {endDate.format(format)}
             </Text>
           </DateTimeButton>
         </View>
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={ensureDateStart._d}
+          date={startDate.valueOf()}
           mode={mode}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
@@ -128,7 +111,7 @@ const DateTimeRangeChange = memo(
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={ensureDateEnd._d}
+          date={endDate.valueOf()}
           mode={mode}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}
@@ -138,7 +121,7 @@ const DateTimeRangeChange = memo(
           cancelTextIOS={t('cancel')}
           confirmTextIOS={t('confirm')}
           maximumDate={new Date()}
-          minimumDate={ensureDateStart._d}
+          minimumDate={startDate.valueOf()}
         />
       </View>
     );

package/src/commons/Device/Emergency/__test__/EmergencyButton.test.js

@@ -18,7 +18,7 @@ describe('Test EmergencyButton', () => {
   let tree;
   it('create EmergencyButton', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -29,7 +29,7 @@ describe('Test EmergencyButton', () => {
   it('long press EmergencyButton', async () => {
     const mockFunction = jest.fn();
     await act(async () => {
-      tree = renderer.create(wrapComponent(mockFunction));
+      tree = await renderer.create(wrapComponent(mockFunction));
     });
 
     const instance = tree.root;

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -39,7 +39,7 @@ describe('Test EmergencyDetail', () => {
     };
     useIsFocused.mockImplementation(() => true);
     await act(async () => {
-      tree = renderer.create(wrapComponent(item));
+      tree = await renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
     const button = instance.findAllByType(VLCPlayer);

package/src/commons/Device/FlatListItems.js

@@ -177,7 +177,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
   },
   viewMore: {
-    top: 20,
+    top: 10,
     paddingVertical: 5,
     borderColor: Colors.Gray5,
     borderWidth: 1,

package/src/commons/Device/Hanet/ItemHanetDevice.test.js

@@ -36,7 +36,7 @@ describe('Test ItemHanetDevice', () => {
 
   it('render ItemHanetDevice', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent(props));
+      tree = await renderer.create(wrapComponent(props));
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableWithoutFeedback);
@@ -49,7 +49,7 @@ describe('Test ItemHanetDevice', () => {
   it('render ItemHanetDevice sensor has icon', async () => {
     props.sensor.icon_kit = 'icon';
     await act(async () => {
-      tree = renderer.create(wrapComponent(props));
+      tree = await renderer.create(wrapComponent(props));
     });
     const instance = tree.root;
     const touches = instance.findAllByType(TouchableWithoutFeedback);

package/src/commons/Device/HistoryChart.js

@@ -9,17 +9,10 @@ import Button from '../../commons/Button';
 import CurrencyInput from '../../commons/Form/CurrencyInput';
 import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
 import ChartAggregationOption from '../ChartAggregationOption';
 import { formatMoney } from '../../utils/Utils';
 
-export const dateTimeType = {
-  date: 'date',
-  time: 'time',
-  dateTime: 'datetime',
-};
-
 const { width } = Dimensions.get('window');
 
 const HistoryChart = memo(
@@ -50,25 +43,10 @@ const HistoryChart = memo(
     });
     const [price, setPrice] = useState(null);
 
-    const onStart = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: true,
-        showModalEnd: false,
-      }));
-    }, []);
-    const onEnd = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalStart: false,
-        showModalEnd: true,
-      }));
-    }, []);
-    const onConfirmStart = useCallback(
+    const selectStart = useCallback(
       (date) => {
         setEventPicker((state) => {
           if (typeof date === 'number') {
-            onCancel();
             return state;
           }
           if (moment(date) < state.endTime) {
@@ -89,15 +67,15 @@ const HistoryChart = memo(
             };
           }
         });
+        onCancel();
       },
       [onCancel, setStartDate, setEndDate]
     );
 
-    const onConfirmEnd = useCallback(
+    const selectEnd = useCallback(
       (date) => {
         setEventPicker((state) => {
           if (typeof date === 'number') {
-            onCancel();
             return state;
           }
           if (moment(date).add(1, 'day') > state.startTime) {
@@ -120,6 +98,7 @@ const HistoryChart = memo(
             };
           }
         });
+        onCancel();
       },
       [onCancel, setStartDate, setEndDate]
     );
@@ -197,8 +176,8 @@ const HistoryChart = memo(
           ) && (
             <DateTimeRangeChange
               startTime={eventPicker.startTime}
-              onStart={onStart}
-              onEnd={onEnd}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
               endTime={eventPicker.endTime}
               formatType={formatType}
             />
@@ -234,28 +213,6 @@ const HistoryChart = memo(
             {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
           </Text>
         )}
-        <DateTimePickerModal
-          isVisible={eventPicker.showModalStart}
-          date={eventPicker.startTime?._d}
-          mode={formatType || 'datetime'}
-          onConfirm={onConfirmStart}
-          onCancel={onCancel}
-          display="spinner"
-          headerTextIOS={t('pick_a_date')}
-          cancelTextIOS={t('cancel')}
-          confirmTextIOS={t('confirm')}
-        />
-        <DateTimePickerModal
-          isVisible={eventPicker.showModalEnd}
-          date={eventPicker.endTime?._d}
-          mode={formatType || 'datetime'}
-          onConfirm={onConfirmEnd}
-          onCancel={onCancel}
-          display="spinner"
-          headerTextIOS={t('pick_a_date')}
-          cancelTextIOS={t('cancel')}
-          confirmTextIOS={t('confirm')}
-        />
       </View>
     );
   }

package/src/commons/Device/LinearChart/LinearChart.test.js

@@ -18,7 +18,7 @@ describe('Test LinearChart', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<LinearChart datas={data} />);
+      tree = await renderer.create(<LinearChart datas={data} />);
     });
     const instance = tree.root;
     const views = instance.findAllByType(View);

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -36,14 +36,13 @@ describe('Test ProgressBar', () => {
       configuration: { max_value: 100 },
       value: 8,
     };
-    const data = [{ value: 10 }];
+    const data = [{ value: 10, unit: 'oC' }];
     await act(async () => {
-      tree = renderer.create(wrapComponent(item, data));
+      tree = await renderer.create(wrapComponent(item, data));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toBe('Value bar');
-    expect(texts[1].props.children).toEqual(['Max value', ': ', 100]);
-    expect(texts[2].props.children).toEqual([10, ' ', undefined]);
+    expect(texts[1].props.children).toEqual('Max value: 100 oC');
   });
 });

package/src/commons/Device/ProgressBar/index.js

@@ -23,7 +23,7 @@ const ProgressBar = memo(({ data = [], item }) => {
       </Text>
 
       <Text size={16} style={styles.textMaxValue}>
-        {t('max_value')}: {maxValue}
+        {`${t('max_value')}: ${maxValue} ${unit || measure}`}
       </Text>
 
       <View style={styles.wrapProgressBar}>
@@ -36,9 +36,11 @@ const ProgressBar = memo(({ data = [], item }) => {
           borderWidth={0}
           borderRadius={10}
         />
-        <Text style={styles.textValue}>
-          {value} {unit || measure}
-        </Text>
+        <View>
+          <Text numberOfLines={1} style={styles.textValue}>
+            {value}
+          </Text>
+        </View>
       </View>
     </View>
   );

package/src/commons/Device/ProgressBar/styles.js

@@ -6,29 +6,32 @@ export default StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column', //column direction
-    marginRight: 60,
-    marginLeft: 60,
+    marginHorizontal: 30,
     borderWidth: 1,
-    padding: 12,
+    padding: 16,
     borderRadius: 8,
     borderColor: Colors.Gray4,
     marginBottom: 12,
   },
   textLabel: {
-    paddingHorizontal: 16,
+    paddingHorizontal: 15,
     paddingTop: 8,
   },
   textMaxValue: {
-    textAlign: 'right',
+    marginTop: 20,
+    marginLeft: 14,
+    textAlign: 'left',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
   },
   wrapProgressBar: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 8,
   },
   textValue: {
     marginLeft: 8,
+    width: 45,
   },
 });

package/src/commons/Device/RainningSensor/__test__/CurrentRainSensor.test.js

@@ -19,7 +19,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
@@ -38,7 +38,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
@@ -47,7 +47,7 @@ describe('Test CurrentRainSensor', () => {
 
   it('render CurrentRainSensor data empty', async () => {
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={[]} />);
+      tree = await renderer.create(<CurrentRainSensor data={[]} />);
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
@@ -66,7 +66,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const fimage = instance.findAllByType(FImage);
@@ -85,7 +85,7 @@ describe('Test CurrentRainSensor', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(<CurrentRainSensor data={data} />);
+      tree = await renderer.create(<CurrentRainSensor data={data} />);
     });
     const instance = tree.root;
     const iconComponent = instance.findAllByType(IconComponent);

package/src/commons/Device/SonosSpeaker/__test__/SonosSpeaker.test.js

@@ -18,7 +18,7 @@ describe('Test SonosSpeaker', () => {
   let tree;
   it('create SonosSpeaker', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -28,7 +28,7 @@ describe('Test SonosSpeaker', () => {
 
   it('Test handleClickButton', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;
@@ -43,7 +43,7 @@ describe('Test SonosSpeaker', () => {
 
   it('Test onValueChange', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/commons/Device/WindDirection/Compass/Compass.test.js

@@ -20,7 +20,7 @@ describe('Test Compass', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(wrapComponent(data));
+      tree = await renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -29,7 +29,7 @@ describe('Test Compass', () => {
 
   it('create Compass data null', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent([]));
+      tree = await renderer.create(wrapComponent([]));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);

package/src/commons/Device/WindSpeed/LinearChart/index.js

@@ -80,7 +80,7 @@ const LinearChart = memo(
             const scatterValues = getTickValues(item).stringDataArr;
             const maxValueLine = getMaxValueIndex(item.data);
             return (
-              <G>
+              <G key={index}>
                 <VictoryScatter
                   standalone={false}
                   data={scatterValues}

package/src/commons/Device/__test__/DeviceAlertStatus.test.js

@@ -30,7 +30,7 @@ describe('Test Device Alert Status', () => {
         },
       ];
       await act(async () => {
-        tree = renderer.create(wrapComponent(data));
+        tree = await renderer.create(wrapComponent(data));
       });
       const instance = tree.root;
       const item = instance.find(
@@ -49,7 +49,7 @@ describe('Test Device Alert Status', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(wrapComponent(data));
+      tree = await renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const item = instance.findAll(
@@ -65,7 +65,7 @@ describe('Test Device Alert Status', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(wrapComponent(data));
+      tree = await renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const item = instance.findAll(

package/src/commons/Device/__test__/DisconnectedView.test.js

@@ -18,7 +18,7 @@ describe('Test DisconnectedView', () => {
   it('render DisconnectedView icon test', async () => {
     const sensor = { icon: 'test' };
     await act(async () => {
-      tree = renderer.create(wrapComponent(sensor));
+      tree = await renderer.create(wrapComponent(sensor));
     });
     const instance = tree.root;
     const suggestion = instance.findByProps({ testID: 'suggestions' });
@@ -30,7 +30,7 @@ describe('Test DisconnectedView', () => {
     const isDeviceHasBle = true;
     const sensor = { icon: 'test' };
     await act(async () => {
-      tree = renderer.create(wrapComponent(sensor, isDeviceHasBle));
+      tree = await renderer.create(wrapComponent(sensor, isDeviceHasBle));
     });
     const instance = tree.root;
     const suggestion = instance.findByProps({ testID: 'suggestions' });

package/src/commons/Device/__test__/FlatListItems.test.js

@@ -27,7 +27,7 @@ describe('Test FlatListItems', () => {
       },
     ];
     await act(async () => {
-      tree = renderer.create(wrapComponent(data));
+      tree = await renderer.create(wrapComponent(data));
     });
     const instance = tree.root;
     const touch = instance.find(

package/src/commons/Device/__test__/SensorConnectedStatus.test.js

@@ -16,7 +16,7 @@ describe('Test Sensor Connected Status', () => {
 
   it('render Sensor Connected Status', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const item = instance.find(

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

@@ -19,7 +19,7 @@ describe('Test DisplayChecking', () => {
 
   it('create LoadingMessage', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent(visible, onClose, message));
+      tree = await renderer.create(wrapComponent(visible, onClose, message));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);

package/src/commons/Form/__test__/CurrencyInput.test.js

@@ -9,7 +9,7 @@ describe('Test CurrencyInput', () => {
   const testCurrencyInputWithValue = (value) => {
     it('test CurrencyInput with value', async () => {
       await act(async () => {
-        tree = renderer.create(
+        tree = await renderer.create(
           <CurrencyInput value={value} minValue={0} maxValue={100000} />
         );
       });
@@ -27,7 +27,7 @@ describe('Test CurrencyInput', () => {
   it('test CurrencyInput change text', async () => {
     const mockOnChange = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <CurrencyInput
           value={20}
           minValue={-10}

package/src/commons/Form/__test__/TextInput.test.js

@@ -8,7 +8,7 @@ describe('Test _TextInput', () => {
   it('render _TextInput', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <_TextInput
           label={1234}
           defaultValue={'station.name'}
@@ -28,7 +28,7 @@ describe('Test _TextInput', () => {
   it('render _TextInput lable null', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <_TextInput
           label={true}
           defaultValue={'station.name'}

package/src/commons/Form/__test__/TextInputPassword.test.js

@@ -9,7 +9,7 @@ describe('Test _TextInputPassword', () => {
   it('render _TextInputPassword', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <_TextInputPassword
           secureTextEntry
           label={'1234'}
@@ -35,7 +35,7 @@ describe('Test _TextInputPassword', () => {
   it('render _TextInputPassword lable null', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         <_TextInputPassword
           label={false}
           secureTextEntry

package/src/commons/FullLoading/__test__/index.test.js

@@ -24,7 +24,7 @@ describe('Test FullLoading', () => {
   };
   it('render FullLoading no custom', async () => {
     await act(async () => {
-      tree = renderer.create(wrapComponent(props));
+      tree = await renderer.create(wrapComponent(props));
     });
     const instance = tree.root;
     const activityIndicator = instance.findAllByType(ActivityIndicator);
@@ -32,7 +32,7 @@ describe('Test FullLoading', () => {
   });
   it('render FullLoading custom', async () => {
     await act(async () => {
-      tree = renderer.create(
+      tree = await renderer.create(
         wrapComponent({ ...props, customIcon: <Image /> })
       );
     });