@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/commons/UnitSummary/AirQuality/__test__/index.test.js

@@ -5,6 +5,14 @@ import AirQuality from '../index';
 import { Section } from '../../../index';
 import Text from '../../../Text';
 import { TESTID } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AirQuality {...data} />
+  </SCProvider>
+);
 
 describe('Test AirQuality', () => {
   let data;
@@ -40,12 +48,11 @@ describe('Test AirQuality', () => {
 
   test('render AirQuality', async () => {
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const sections = instance.findAllByType(Section);
     expect(sections).toHaveLength(2);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('without showBoxHistory', async () => {
@@ -54,12 +61,11 @@ describe('Test AirQuality', () => {
     data.summaryDetail.outdoor_co_id = null;
 
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const sections = instance.findAllByType(Section);
     expect(sections).toHaveLength(1);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('value is undefined', async () => {
@@ -68,7 +74,7 @@ describe('Test AirQuality', () => {
     data.summaryDetail.outdoor_co_value = undefined;
 
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const buttons = instance.findAll(
@@ -77,7 +83,6 @@ describe('Test AirQuality', () => {
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(3);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('onSelectOutdoor', async () => {
@@ -93,7 +98,7 @@ describe('Test AirQuality', () => {
     const styleInactive = { backgroundColor: '#FFFFFF', borderWidth: 1 };
 
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const buttons = instance.findAll(
@@ -112,14 +117,12 @@ describe('Test AirQuality', () => {
     expect(buttons[0].props.style).toEqual([styleTouch, styleInactive]);
     expect(buttons[1].props.style).toEqual([styleTouch, styleActive]);
     expect(buttons[2].props.style).toEqual([styleTouch, styleInactive]);
-
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('advices', async () => {
     data.summaryDetail.advices = ['Amazing Good Chop'];
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const text = instance.find(
@@ -128,13 +131,12 @@ describe('Test AirQuality', () => {
         el.type === Text
     );
     expect(text.props.children).toEqual('Amazing Good Chop');
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('without outdoor_pm2_5_value', async () => {
     data.summaryDetail.outdoor_pm2_5_value = null;
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const buttons = instance.findAll(
@@ -143,13 +145,12 @@ describe('Test AirQuality', () => {
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(2);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('without outdoor_pm10_value', async () => {
     data.summaryDetail.outdoor_pm10_value = null;
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const buttons = instance.findAll(
@@ -158,13 +159,12 @@ describe('Test AirQuality', () => {
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(2);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   test('without outdoor_co_value', async () => {
     data.summaryDetail.outdoor_co_value = null;
     act(() => {
-      tree = create(<AirQuality {...data} />);
+      tree = create(wrapComponent(data));
     });
     const instance = tree.root;
     const buttons = instance.findAll(
@@ -173,6 +173,5 @@ describe('Test AirQuality', () => {
         el.type === TouchableOpacity
     );
     expect(buttons).toHaveLength(2);
-    expect(tree.toJSON()).toMatchSnapshot();
   });
 });

package/src/commons/UnitSummary/AirQuality/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import { Section } from '../../../commons/index';
@@ -10,8 +10,10 @@ import ConfigHistoryChart from '../ConfigHistoryChart';
 
 import SegmentedRoundDisplay from './SegmentedRoundDisplay';
 import { TESTID } from '../../../configs/Constants';
+import styles from './styles';
 
 const AirQuality = memo(({ summaryDetail }) => {
+  const t = useTranslations();
   const {
     outdoor_pm10_id,
     outdoor_pm2_5_id,
@@ -121,15 +123,8 @@ const AirQuality = memo(({ summaryDetail }) => {
             totalValue={500}
             title={outdoorValues[indexOutdoor].title}
             style={styles.segment}
+            textHeader={t('text_air_quality_index')}
           />
-
-          <TouchableOpacity
-            style={[styles.touchStatus, { backgroundColor: outdoorColor }]}
-          >
-            <Text size={14} color={Colors.White}>
-              {outdoorStatus}
-            </Text>
-          </TouchableOpacity>
           {!!advices && !!advices.length && (
             <View style={styles.boxHealth}>
               <IconOutline name="alert" size={20} style={styles.iconMargin} />
@@ -173,113 +168,3 @@ const AirQuality = memo(({ summaryDetail }) => {
 });
 
 export default AirQuality;
-
-const styles = StyleSheet.create({
-  textIndoor: {
-    color: Colors.Gray9,
-    fontSize: 20,
-    marginBottom: 4,
-  },
-  textDesIndoor: {
-    color: Colors.Gray8,
-    fontSize: 12,
-    marginBottom: 16,
-  },
-  textNotAvailable: {
-    textAlign: 'center',
-  },
-  boxStatus: {
-    borderRadius: 10,
-    height: 80,
-    overflow: 'hidden',
-    flexDirection: 'row',
-    marginBottom: 16,
-  },
-  boxEmotion: {
-    height: 80,
-    width: 80,
-    backgroundColor: Colors.Yellow6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  textStatus: {
-    fontSize: 16,
-    color: Colors.Gray9,
-    marginRight: 24,
-    textAlign: 'right',
-    maxWidth: 120,
-  },
-  boxTextStatus: {
-    backgroundColor: Colors.Yellow4,
-    flex: 1,
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
-  boxNumber: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-  },
-  boxHealth: {
-    flexDirection: 'row',
-    marginBottom: 12,
-    alignItems: 'center',
-    marginTop: 10,
-  },
-  boxContentHealth: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  boxDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.Yellow6,
-    marginRight: 8,
-  },
-  textOutdoor: {
-    color: Colors.Gray9,
-    fontSize: 20,
-    marginBottom: 24,
-    marginTop: 16,
-  },
-  touchOption: {
-    borderWidth: 1,
-    borderColor: Colors.Gray5,
-    paddingHorizontal: 16,
-    paddingVertical: 5,
-    marginHorizontal: 4,
-    borderRadius: 2,
-  },
-  textOption: {
-    alignSelf: 'center',
-    marginBottom: 8,
-  },
-  touchStatus: {
-    borderRadius: 100,
-    paddingHorizontal: 24,
-    alignSelf: 'center',
-    paddingVertical: 3,
-    marginTop: 12,
-  },
-  segment: {
-    marginTop: 36,
-    alignSelf: 'center',
-  },
-  boxOutdoorValues: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  iconMargin: {
-    marginRight: 8,
-  },
-  historyChart: {
-    paddingHorizontal: 16,
-    backgroundColor: Colors.White,
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    marginTop: 16,
-  },
-});

package/src/commons/UnitSummary/AirQuality/styles.js

@@ -0,0 +1,112 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  textIndoor: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    marginBottom: 4,
+  },
+  textDesIndoor: {
+    color: Colors.Gray8,
+    fontSize: 12,
+    marginBottom: 16,
+  },
+  textNotAvailable: {
+    textAlign: 'center',
+  },
+  boxStatus: {
+    borderRadius: 10,
+    height: 80,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    marginBottom: 16,
+  },
+  boxEmotion: {
+    height: 80,
+    width: 80,
+    backgroundColor: Colors.Yellow6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textStatus: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    marginRight: 24,
+    textAlign: 'right',
+    maxWidth: 120,
+  },
+  boxTextStatus: {
+    backgroundColor: Colors.Yellow4,
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+  },
+  boxNumber: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  boxHealth: {
+    flexDirection: 'row',
+    marginBottom: 12,
+    alignItems: 'center',
+    marginTop: 36,
+  },
+  boxContentHealth: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  boxDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.Yellow6,
+    marginRight: 8,
+  },
+  textOutdoor: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    marginBottom: 24,
+    marginTop: 16,
+  },
+  touchOption: {
+    borderWidth: 1,
+    borderColor: Colors.Gray5,
+    paddingHorizontal: 16,
+    paddingVertical: 5,
+    marginHorizontal: 4,
+    borderRadius: 2,
+  },
+  textOption: {
+    paddingTop: 4,
+  },
+  touchStatus: {
+    borderRadius: 100,
+    paddingHorizontal: 24,
+    alignSelf: 'center',
+    paddingVertical: 3,
+    marginTop: 12,
+  },
+  segment: {
+    marginTop: 36,
+    alignSelf: 'center',
+  },
+  boxOutdoorValues: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  iconMargin: {
+    marginRight: 8,
+  },
+  historyChart: {
+    paddingHorizontal: 16,
+    backgroundColor: Colors.White,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    marginTop: 16,
+  },
+});

package/src/commons/UnitSummary/TotalPowerConsumption/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../configs';
 import TotalPowerBox from '../TotalPowerBox';
@@ -8,6 +8,7 @@ import Text from '../../Text';
 import { TESTID } from '../../../configs/Constants';
 
 const TotalPowerConsumption = memo(({ time, total }) => {
+  const t = useTranslations();
   return (
     <View style={styles.container}>
       <Text color={Colors.Gray9} size={16} style={styles.txtCurrent}>

package/src/commons/UnitSummary/__test__/TotalPowerConsumption.test.js

@@ -2,19 +2,25 @@ import TotalPowerConsumption from '../TotalPowerConsumption/index';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <TotalPowerConsumption
+      total={{
+        value: 10,
+      }}
+    />
+  </SCProvider>
+);
 
 describe('Test Total Power Consumption', () => {
   let tree;
 
-  test('render Total Power Consumption', () => {
-    act(() => {
-      tree = renderer.create(
-        <TotalPowerConsumption
-          total={{
-            value: 10,
-          }}
-        />
-      );
+  test('render Total Power Consumption', async () => {
+    await act(() => {
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const item = instance.find(

package/src/commons/WheelDateTimePicker/Picker.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import ScrollPicker from 'react-native-wheel-scrollview-picker';
+import Text from '../Text';
+
+import { Colors } from '../../configs';
+import styles from './styles';
+
+const PickerItem = ({ data, isSelected, align }) => {
+  return (
+    <View style={styles.wrapText}>
+      <Text
+        type={isSelected ? 'H2' : 'H3'}
+        color={isSelected ? Colors.Gray9 : Colors.Gray6}
+        bold={isSelected}
+        style={{ textAlign: align }}
+      >
+        {data.text}
+      </Text>
+    </View>
+  );
+};
+
+const Picker = ({
+  dataSource,
+  selectedIndex,
+  onValueChange,
+  keyPrefix,
+  style,
+  align = 'center',
+}) => {
+  return (
+    <View style={style}>
+      <ScrollPicker
+        dataSource={dataSource}
+        selectedIndex={selectedIndex}
+        renderItem={(data, index, isSelected) => (
+          <PickerItem
+            key={`${keyPrefix}-${index}`}
+            data={data}
+            isSelected={isSelected}
+            align={align}
+          />
+        )}
+        onValueChange={onValueChange}
+        wrapperHeight={180}
+        wrapperColor={Colors.Transparent}
+        itemHeight={60}
+        highlightColor={Colors.Transparent}
+        highlightBorderWidth={0}
+      />
+    </View>
+  );
+};
+
+export default Picker;

package/src/commons/WheelDateTimePicker/index.js

@@ -0,0 +1,160 @@
+import React, { memo, useState, useEffect, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import moment from 'moment';
+
+import Picker from './Picker';
+import Text from '../Text';
+import BottomSheet from '../BottomSheet';
+import ViewButtonBottom from '../ViewButtonBottom';
+
+import { getDateData } from '../../utils/Converter/time';
+import styles from './styles';
+
+const formatNumber = (number) => {
+  return {
+    text: `${number}`.padStart(2, '0'),
+    value: number,
+  };
+};
+
+const hourData = Array.from({ length: 24 }, (_, i) => formatNumber(i));
+const minuteData = Array.from({ length: 60 }, (_, i) => formatNumber(i));
+
+const WheelDateTimePicker = ({
+  mode,
+  isVisible,
+  defaultValue,
+  onPicked,
+  onHide,
+}) => {
+  const t = useTranslations();
+  const [dateSelected, setDateSelected] = useState();
+  const [hourSelected, setHourSelected] = useState();
+  const [minuteSelected, setMinuteSelected] = useState();
+
+  const { dateData, indexInitialDate, indexInitialHour, indexInitialMinute } =
+    useMemo(() => {
+      const date = defaultValue ? moment(defaultValue) : moment();
+      const maximumDate = moment(date).add(15, 'days');
+      const minimumDate = moment(date).add(-15, 'days');
+      const [dateData, indexDate] =
+        mode === 'datetime'
+          ? getDateData(date, maximumDate, minimumDate)
+          : [[{ value: date }], 0];
+      return {
+        dateData: dateData,
+        indexInitialDate: indexDate,
+        indexInitialHour: date.hour(),
+        indexInitialMinute: date.minute(),
+      };
+    }, [mode, defaultValue]);
+
+  useEffect(() => {
+    setDateSelected(dateData[indexInitialDate].value);
+    setHourSelected(hourData[indexInitialHour].value);
+    setMinuteSelected(minuteData[indexInitialMinute].value);
+  }, [dateData, indexInitialDate, indexInitialHour, indexInitialMinute]);
+
+  const onValueDateChange = useCallback(
+    (data, _) => {
+      setDateSelected(data.value);
+    },
+    [setDateSelected]
+  );
+
+  const onValueHourChange = useCallback(
+    (data, _) => {
+      setHourSelected(data.value);
+    },
+    [setHourSelected]
+  );
+
+  const onValueMinuteChange = useCallback(
+    (data, _) => {
+      setMinuteSelected(data.value);
+    },
+    [setMinuteSelected]
+  );
+
+  const onCancel = useCallback(() => {
+    onHide && onHide();
+  }, [onHide]);
+
+  const onDone = useCallback(() => {
+    const newDateTime = moment(dateSelected);
+    newDateTime.hour(hourSelected);
+    newDateTime.minute(minuteSelected);
+    onPicked && onPicked(newDateTime.valueOf());
+    onHide && onHide();
+  }, [dateSelected, hourSelected, minuteSelected, onHide, onPicked]);
+
+  const title = useMemo(() => {
+    if (mode === 'time') {
+      return t('set_time');
+    }
+    return t('set_date_time');
+  }, [t, mode]);
+
+  return (
+    <BottomSheet isVisible={isVisible} onHide={onCancel} title={title}>
+      {mode === 'time' ? (
+        <View style={styles.container}>
+          <Picker
+            dataSource={hourData}
+            selectedIndex={indexInitialHour}
+            onValueChange={onValueHourChange}
+            keyPrefix="hour"
+            style={styles.picker}
+          />
+          <Text type="H2" bold style={styles.twoDot}>
+            :
+          </Text>
+          <Picker
+            dataSource={minuteData}
+            selectedIndex={indexInitialMinute}
+            onValueChange={onValueMinuteChange}
+            keyPrefix="minute"
+            style={styles.picker}
+          />
+        </View>
+      ) : (
+        <View style={styles.container}>
+          <Picker
+            dataSource={dateData}
+            selectedIndex={indexInitialDate}
+            onValueChange={onValueDateChange}
+            keyPrefix="date"
+            style={styles.picker}
+            align="right"
+          />
+          <Picker
+            dataSource={hourData}
+            selectedIndex={indexInitialHour}
+            onValueChange={onValueHourChange}
+            keyPrefix="hour"
+            style={styles.picker}
+          />
+          <Text type="H2" bold style={styles.twoDot}>
+            :
+          </Text>
+          <Picker
+            dataSource={minuteData}
+            selectedIndex={indexInitialMinute}
+            onValueChange={onValueMinuteChange}
+            keyPrefix="minute"
+            style={styles.picker}
+          />
+        </View>
+      )}
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={onCancel}
+        rightTitle={t('done')}
+        onRightClick={onDone}
+      />
+    </BottomSheet>
+  );
+};
+
+export default memo(WheelDateTimePicker);

package/src/commons/WheelDateTimePicker/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 180,
+  },
+  picker: {
+    width: 120,
+  },
+  twoDot: {
+    marginTop: -4,
+  },
+  wrapText: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
+});