@eohjsc/react-native-smart-city 0.4.42 → 0.4.43

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

@@ -1,22 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 
 import { AccessibilityLabel } from '../../../configs/Constants';
 import GroupCheckBox from '..';
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useState: jest.fn(),
-}));
-
 describe('Test Group CheckBox', () => {
   let tree;
-  const mockSetState = () => {
-    const setState = jest.fn();
-    useState.mockImplementation((init) => [init, setState]);
-    return setState;
-  };
 
   const findGroupCheckBoxItem = (instance) => {
     const item = instance.find(
@@ -34,7 +24,6 @@ describe('Test Group CheckBox', () => {
         description: 'description',
       },
     ];
-    mockSetState();
     await act(async () => {
       tree = await create(<GroupCheckBox data={data} />);
     });
@@ -51,7 +40,6 @@ describe('Test Group CheckBox', () => {
       },
     ];
     const mockFunc = jest.fn();
-    const setState = mockSetState();
     await act(async () => {
       tree = await create(
         <GroupCheckBox data={data} onSelect={mockFunc} multiple />
@@ -62,9 +50,6 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       item.props.onSelect(0);
     });
-    expect(setState).toHaveBeenCalledTimes(2);
-    expect(setState).toHaveBeenNthCalledWith(1, [0]);
-    expect(setState).toHaveBeenNthCalledWith(2, [0]);
     expect(mockFunc).toHaveBeenCalledWith([
       { description: 'description', source: 'source', title: 'testItem' },
     ]);
@@ -85,7 +70,6 @@ describe('Test Group CheckBox', () => {
       },
     ];
     const mockFunc = jest.fn();
-    const setState = mockSetState();
     await act(async () => {
       tree = await create(<GroupCheckBox data={data} onSelect={mockFunc} />);
     });
@@ -94,8 +78,6 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       item.props.onSelect(0);
     });
-    expect(setState).toHaveBeenNthCalledWith(1, [0]);
-    expect(setState).toHaveBeenNthCalledWith(2, [0]);
     expect(mockFunc).toHaveBeenCalledWith({
       description: 'description 1',
       title: 'title 1',
@@ -114,8 +96,6 @@ describe('Test Group CheckBox', () => {
       },
     ];
     const mockFunc = jest.fn();
-    const setState = jest.fn();
-    useState.mockImplementation((init) => [[0], setState]);
     await act(async () => {
       tree = await create(<GroupCheckBox data={data} onSelect={mockFunc} />);
     });
@@ -128,7 +108,6 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       items[1].props.onSelect(0);
     });
-    expect(setState).toHaveBeenCalledWith([]); // called 1 time
     expect(mockFunc).toHaveBeenCalledWith({
       description: 'description 1',
       title: 'title 1',

package/src/commons/HeaderAni/index.js

@@ -1,6 +1,12 @@
 import React, { memo, useCallback } from 'react';
 import { Icon } from '@ant-design/react-native';
-import { TouchableOpacity, StyleSheet, Animated, View } from 'react-native';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  View,
+  Platform,
+} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
@@ -95,7 +101,11 @@ const HeaderAni = memo(
             onPress={onPressLeft}
             accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
-            <Icon name={'left'} size={27} color={Colors.Gray9} />
+            <Icon
+              name={Platform.OS === 'android' ? 'left-square' : 'left'}
+              size={27}
+              color={Colors.Gray9}
+            />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>
         </Animated.View>

package/src/commons/Highcharts/index.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import WebView from 'react-native-webview';
+
+const Highcharts = (props) => {
+  const [init] = useState(`<html>
+                    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
+                    <style media="screen" type="text/css">
+                    #container {
+                        width:100%;
+                        height:100%;
+                        top:0;
+                        left:0;
+                        right:0;
+                        bottom:0;
+                        position:absolute;
+                        user-select: none;
+                        -webkit-user-select: none;
+                    }
+                    </style>
+                    <head>
+                        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+                        ${
+                          props.stock
+                            ? '<script src="https://code.highcharts.com/stock/highstock.js"></script>'
+                            : '<script src="https://code.highcharts.com/highcharts.js"></script>'
+                        }
+                        ${
+                          props.more
+                            ? '<script src="https://code.highcharts.com/highcharts-more.js"></script>'
+                            : ''
+                        }
+                        ${
+                          props.guage
+                            ? '<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>'
+                            : ''
+                        }
+                        <script src="https://code.highcharts.com/modules/exporting.js"></script>
+                        <script>
+                        $(function () {
+                            Highcharts.setOptions(${JSON.stringify(
+                              props.options
+                            )});
+                            Highcharts.${
+                              props.stock ? 'stockChart' : 'chart'
+                            }('container', `);
+  const [end] = useState(`           );
+                        });
+                        </script>
+                    </head>
+                    <body>
+                        <div id="container">
+                        </div>
+                    </body>
+                </html>`);
+
+  const flattenText = (item, key) => {
+    let str = '';
+    if (item && typeof item === 'object' && item.length === undefined) {
+      str += flattenObject(item);
+    } else if (item && typeof item === 'object' && item.length !== undefined) {
+      str += '[';
+      item.forEach((k2) => {
+        str += `${flattenText(k2)}, `;
+      });
+      if (item.length > 0) {
+        str = str.slice(0, str.length - 2);
+      }
+      str += ']';
+    } else if (typeof item === 'string' && item.slice(0, 8) === 'function') {
+      str += `${item}`;
+    } else if (typeof item === 'string') {
+      // eslint-disable-next-line no-useless-escape
+      str += `\"${item.replace(/"/g, '\\"')}\"`;
+    } else {
+      str += `${item}`;
+    }
+    return str;
+  };
+
+  const flattenObject = (obj, str = '{') => {
+    Object.keys(obj).forEach(function (key) {
+      str += `${key}: ${flattenText(obj[key])}, `;
+    });
+    return `${str.slice(0, str.length - 2)}}`;
+  };
+
+  let config = JSON.stringify(props.options, (key, value) => {
+    return typeof value === 'function' ? value.toString() : value;
+  });
+
+  config = JSON.parse(config);
+  const concatHTML = `${init}${flattenObject(config)}${end}`.replace(
+    ': }',
+    ': {}'
+  );
+
+  return (
+    <WebView
+      style={[props.styles, props.webviewStyles]}
+      source={{ html: concatHTML }}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
+      scalesPageToFit={true}
+      scrollEnabled={false}
+      automaticallyAdjustContentInsets={true}
+      {...props}
+    />
+  );
+};
+
+export default Highcharts;

package/src/commons/MediaPlayerDetail/__test__/MediaPlayerFull.test.js

@@ -1,18 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import MediaPlayerFull from '../MediaPlayerFull';
 
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
-
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
     <MediaPlayerFull {...props} />
@@ -22,14 +14,7 @@ const wrapComponent = (props) => (
 describe('Test MediaPlayerFull', () => {
   let tree;
 
-  afterEach(() => {
-    useState.mockClear();
-  });
-
   it('Test render', async () => {
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    useState.mockImplementationOnce((init) => [init, mockSetState]);
     await act(async () => {
       tree = await create(
         wrapComponent({
@@ -44,18 +29,13 @@ describe('Test MediaPlayerFull', () => {
     await act(async () => {
       TouchableOpacities[0].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(false);
     await act(async () => {
       TouchableOpacities[1].props.onPress();
       TouchableOpacities[2].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(true);
   });
 
   it('Test render 2', async () => {
-    useState.mockImplementationOnce((init) => [true, mockSetState]);
-    useState.mockImplementationOnce((init) => [true, mockSetState]);
-    useState.mockImplementationOnce((init) => [init, mockSetState]);
     await act(async () => {
       tree = await create(
         wrapComponent({
@@ -72,11 +52,9 @@ describe('Test MediaPlayerFull', () => {
     await act(async () => {
       TouchableOpacities[0].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(false);
     await act(async () => {
       TouchableOpacities[1].props.onPress();
       TouchableOpacities[2].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(true);
   });
 });

package/src/commons/Modal/ModalCustom.js

@@ -16,8 +16,8 @@ const ModalCustom = (props) => {
       useNativeDriver
       animationIn={'slideInUp'}
       animationOut={'slideOutDown'}
-      animationInTiming={500}
-      animationOutTiming={500}
+      animationInTiming={400}
+      animationOutTiming={400}
       backdropColor={Colors.BlackTransparent5}
       hideModalContentWhileAnimating
       {...props}

package/src/commons/OneTapTemplate/__test__/NumberUpDownActionTemplate.test.js

@@ -11,11 +11,12 @@ import SelectActionCard from '../../SelectActionCard';
 
 const mockOnSelectAction = jest.fn();
 
-const wrapComponent = (item) => (
+const wrapComponent = (item, params = {}) => (
   <SCProvider initState={mockSCStore({})}>
     <NumberUpDownActionTemplate
       item={item}
       onSelectAction={mockOnSelectAction}
+      {...params}
     />
   </SCProvider>
 );
@@ -35,9 +36,9 @@ describe('Test NumberUpDownActionTemplate', () => {
     },
   };
 
-  const renderOptions = async () => {
+  const renderOptions = async (params = {}) => {
     await act(async () => {
-      tree = await create(wrapComponent(data));
+      tree = await create(wrapComponent(data, params));
     });
     const instance = tree.root;
     const card = instance.findByType(SelectActionCard);
@@ -98,6 +99,7 @@ describe('Test NumberUpDownActionTemplate', () => {
     });
     expect(mockOnSelectAction).toHaveBeenCalled();
   });
+
   it('Test config null show valueDefault', async () => {
     data.configuration.config = null;
     const instance = await renderOptions();

package/src/commons/Processing/index.js

@@ -149,6 +149,7 @@ const Processing = ({
             onLeftClick={goBack}
             rightTitle={t('ok')}
             onRightClick={handleOk}
+            wrapStyle={styles.wrapViewButton}
           />
         </View>
       </ModalCustom>

package/src/commons/Processing/styles.js

@@ -51,4 +51,7 @@ export default StyleSheet.create({
   txtCenter: {
     textAlign: 'center',
   },
+  wrapViewButton: {
+    position: 'relative',
+  },
 });

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -60,6 +60,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
   const activateAt = activate_at
     ? timeDifference(new Date(), moment(activate_at), true)
     : null;
+
   return (
     <TouchableWithoutFeedback
       onPress={onPressItem || goToDetail}
@@ -88,6 +89,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
             color={Colors.Gray9}
             type="Body"
             style={styles.name}
+            accessibilityLabel={AccessibilityLabel.TEXT_AUTOMATE_NAME}
           >
             {script?.name}
           </Text>

package/src/commons/Unit/HeaderUnit/index.js

@@ -4,9 +4,11 @@ import { Icon } from '@ant-design/react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
-import { Colors, Device } from '../../../configs';
+import { Colors, Device, Images } from '../../../configs';
 import Text from '../../Text';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { Image } from 'react-native';
+import { Platform } from 'react-native';
 
 const HeaderUnit = memo(
   ({
@@ -47,11 +49,7 @@ const HeaderUnit = memo(
           style={styles.btnLeft}
           onPress={onPressBack}
         >
-          <Icon
-            name={'left'}
-            size={27}
-            color={transparent ? Colors.White : Colors.Black}
-          />
+          <Image source={Images.arrowLeft} style={styles.iconBack} />
         </TouchableOpacity>
         <View style={[styles.boxTitle, styleBoxTitle]}>
           {title && (
@@ -70,7 +68,7 @@ const HeaderUnit = memo(
                 onPress={onPressAdd}
               >
                 <Icon
-                  name={'plus'}
+                  name={Platform.OS === 'android' ? 'plus-square' : 'plus'}
                   size={27}
                   color={transparent ? Colors.White : Colors.Black}
                 />
@@ -83,9 +81,10 @@ const HeaderUnit = memo(
               accessibilityLabel={idButtonMore}
             >
               <Icon
-                name={'more'}
+                name={'ellipsis'}
                 size={27}
                 color={transparent ? Colors.White : Colors.Black}
+                style={styles.iconMore}
               />
             </TouchableOpacity>
           </View>
@@ -146,4 +145,12 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: Colors.Gray4,
   },
+  iconMore: {
+    transform: [{ rotate: '90deg' }],
+  },
+  iconBack: {
+    tintColor: Colors.White,
+    width: 16,
+    height: 20,
+  },
 });

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

@@ -1,8 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import moment from 'moment';
+import { useCallback } from 'react';
 
 import { API } from '../../../configs';
-import HistoryChart from '../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../utils/Apis/axios';
 import { getPusher } from '../../../utils/Pusher';
 
@@ -101,7 +99,6 @@ export const updateConfigChart = async (
           ...config.middle.not_ready,
           ...config.middle.ready,
         ];
-
         middleDataByDay.sort((a, b) => (a.date > b.date ? 1 : -1)); // small to large
         const middleData = middleDataByDay.map((x) => x.data).flat();
         data_by_id[config.id] = [...config.head, ...middleData, ...config.tail];
@@ -114,58 +111,3 @@ export const updateConfigChart = async (
     }
   });
 };
-
-let timeoutId;
-
-const ConfigHistoryChart = ({ configs }) => {
-  const [chartData, setChartData] = useState(configs);
-  const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      let configuration = configs.filter((item) => item.id);
-      configuration.map((item) => {
-        params.append('configs', item.id);
-      });
-      params.append(
-        'date_from',
-        moment(startDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      params.append(
-        'date_to',
-        moment(endDate).utc().format('YYYY-MM-DD HH:mm:ss')
-      );
-      const { success, data } = await axiosGet(
-        API.CONFIG.DISPLAY_HISTORY_V3(),
-        {
-          params,
-        }
-      );
-      updateConfigChart(success, data, configuration, setChartData);
-    };
-
-    timeoutId = setTimeout(fetchData, 200);
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [startDate, endDate, configs]);
-
-  if (!chartData.length) {
-    return false;
-  }
-
-  return (
-    <HistoryChart
-      configuration={{ type: 'line_chart', date_format: 'DD.MM' }}
-      datas={chartData}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
-  );
-};
-
-export default ConfigHistoryChart;

package/src/commons/icon/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export const getIcon = (icon, width = 24, height = 24) => {
+  if (icon === 'clean-1') {
+    const SvgClean = require('../../../assets/images/Device/clean.svg');
+    return <SvgClean width={width} height={height} />;
+  }
+  if (icon === 'circulator-1') {
+    const SvgCirculator = require('../../../assets/images/Device/circulator.svg');
+    return <SvgCirculator width={width} height={height} />;
+  }
+  if (icon === 'auto-1') {
+    const SvgAuo = require('../../../assets/images/Device/auto.svg');
+    return <SvgAuo width={width} height={height} />;
+  }
+  if (icon === 'air-dry-1') {
+    const SvgAirDry = require('../../../assets/images/Device/air-dry.svg');
+    return <SvgAirDry width={width} height={height} />;
+  }
+  if (icon === 'door-state-1') {
+    const SvgDoorState = require('../../../assets/images/Device/door-state.svg');
+    return <SvgDoorState width={width} height={height} />;
+  }
+  if (icon === 'curent-state-1') {
+    const SvgCurrentState = require('../../../assets/images/Device/current-state.svg');
+    return <SvgCurrentState width={width} height={height} />;
+  }
+  if (icon === 'wind-strength-1') {
+    const SvgWindStrength = require('../../../assets/images/Device/wind-strength.svg');
+    return <SvgWindStrength width={width} height={height} />;
+  }
+  if (icon === 'tv') {
+    const { TV } = require('../../Images/SmartIr');
+    return <TV width={width} height={height} />;
+  }
+  if (icon === 'fan') {
+    const { Fan } = require('../../Images/SmartIr');
+    return <Fan width={width} height={height} />;
+  }
+  if (icon === 'ac') {
+    const { AC } = require('../../Images/SmartIr');
+    return <AC width={width} height={height} />;
+  }
+  if (icon === 'wm') {
+    const { WM } = require('../../Images/SmartIr');
+    return <WM width={width} height={height} />;
+  }
+  if (icon === 'fridge') {
+    const { Fridge } = require('../../Images/SmartIr');
+    return <Fridge width={width} height={height} />;
+  }
+  if (icon === 'diy') {
+    const { DIY } = require('../../Images/SmartIr');
+    return <DIY width={width} height={height} />;
+  }
+  return <></>;
+};

package/src/configs/AccessibilityLabel.js

@@ -240,6 +240,7 @@ export default {
   ICON_CLOSE: 'ICON_CLOSE',
   ICON_MORE: 'ICON_MORE',
   ICON_ARROW_RIGHT: 'ICON_ARROW_RIGHT',
+  TEXT_AUTOMATE_NAME: 'TEXT_AUTOMATE_NAME',
 
   // Parking input maunaly spot
   PARKING_SPOT_INFO_BUTTON: 'PARKING_SPOT_INFO_BUTTON',
@@ -647,6 +648,7 @@ export default {
   TOUCHABLE_ACTION_ADD_ITEM_FAVORITE: 'TOUCHABLE_ACTION_ADD_ITEM_FAVORITE',
   TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE:
     'TOUCHABLE_ACTION_ADD_ITEM_AUTOMATE_FAVORITE',
+  BUTTON_SELECT_FAVORITES: 'BUTTON_SELECT_FAVORITES',
 
   // Smart Account
   LOGIN_SMART_ACCOUNT: 'LOGIN_SMART_ACCOUNT',