@eohjsc/react-native-smart-city 0.3.71 → 0.3.73

package/index.js

@@ -9,7 +9,6 @@ import { UnitStack } from './src/navigations/UnitStack';
 import { EmergencyContactsStack } from './src/navigations/EmergencyContactsStack';
 import { AddUnitStack } from './src/navigations/AddUnitStack';
 import SharedStack from './src/navigations/SharedStack';
-import Explore from './src/screens/Explore';
 import { AddLGDeviceStack } from './src/navigations/AddLGDeviceStack';
 import { initSCConfig } from './src/configs';
 import AutomateStack from './src/navigations/AutomateStack';
@@ -34,7 +33,6 @@ export {
   UnitStack,
   AddUnitStack,
   SharedStack,
-  Explore,
   SCProvider,
   SCContext,
   AddLGDeviceStack,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.71",
+  "version": "0.3.73",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -119,7 +119,6 @@
     "@react-native-community/segmented-control": "^2.1.1",
     "@react-native-community/slider": "^3.0.3",
     "@react-native-community/toolbar-android": "^0.1.0-rc.2",
-    "@react-native-community/viewpager": "^4.1.4",
     "@react-native-picker/picker": "^1.16.7",
     "@react-navigation/bottom-tabs": "^5.8.0",
     "@react-navigation/drawer": "^5.9.0",
@@ -129,6 +128,7 @@
     "@testing-library/react-hooks": "^6.0.0",
     "apisauce": "^2.1.5",
     "axios": "^0.19.2",
+    "deprecated-react-native-prop-types": "^2.3.0",
     "dotenv": "^8.2.0",
     "google-libphonenumber": "^3.2.10",
     "home-assistant-js-websocket": "^5.7.0",
@@ -153,7 +153,6 @@
     "react-native-android-keyboard-adjust": "^1.2.0",
     "react-native-android-location-enabler": "^1.2.2",
     "react-native-android-wifi": "^0.0.41",
-    "react-native-animated-ellipsis": "^2.0.0",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
     "react-native-ble-plx": "^2.0.3",
@@ -174,11 +173,13 @@
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-linear-gradient": "^2.5.6",
+    "react-native-loading-dots": "^1.3.2",
     "react-native-localize": "^1.4.1",
     "react-native-maps": "0.27.1",
     "react-native-maps-directions": "^1.8.0",
     "react-native-modal": "^11.5.6",
     "react-native-modal-datetime-picker": "^8.9.3",
+    "react-native-new-snap-carousel": "^3.9.3",
     "react-native-onesignal": "^4.3.1",
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
@@ -190,8 +191,6 @@
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
     "react-native-screens": "^2.9.0",
-    "react-native-slider": "^0.11.0",
-    "react-native-snap-carousel": "4.0.0-beta.5",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } from 'react';
 import { View } from 'react-native';
-import Slider from 'react-native-slider';
+import Slider from '@react-native-community/slider';
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
 import ButtonWrapper from './ButtonWrapper';

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -56,7 +56,7 @@ const OnOffSmartLock = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
   }, [config, configValues, configuration, is_on_value]);
 
   return (
-    <>
+    <View style={styles.wrap}>
       <View>
         <TouchableOpacity
           onPress={handleActionSmartLock}
@@ -78,7 +78,7 @@ const OnOffSmartLock = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
           {t(isUnlock ? 'door_is_open' : 'door_is_close')}
         </Text>
       </View>
-    </>
+    </View>
   );
 });
 

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLockStyle.js

@@ -6,7 +6,7 @@ export default StyleSheet.create({
     flex: 1,
   },
   wrap: {
-    paddingHorizontal: 16,
+    padding: 16,
   },
   section: {
     borderRadius: 10,

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/__test__/index.test.js

@@ -5,6 +5,7 @@ import SetupGeneratePasscode from '../index';
 import { mockSCStore } from '../../../../../context/mockStore';
 import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
+import WheelDateTimePicker from '../../../../WheelDateTimePicker';
 
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -66,17 +67,17 @@ describe('Test SetupGeneratePasscode', () => {
     expect(changeTime[0]).toBeDefined();
     expect(changeDuration[0]).toBeDefined();
 
-    await changeDuration[0].props.onPressSetMinute();
-    await changeDuration[0].props.onPressSelectCircle();
-    await changeTime[0].props.onPressSetTime();
+    await act(async () => {
+      await changeDuration[0].props.onPressSetMinute();
+    });
+    await act(async () => {
+      await changeDuration[0].props.onPressSelectCircle();
+    });
+    await act(async () => {
+      await changeTime[0].props.onPressSetTime();
+    });
 
-    const wheelDateTimePicker = instance.findAll(
-      (item) =>
-        item.props.accessibilityLabel ===
-        `${AccessibilityLabel.WHEEL_DATE_TIME_PICKER_BUTTON}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
-    );
-    await wheelDateTimePicker[5].props.onClick();
-    await wheelDateTimePicker[11].props.onClick();
-    await wheelDateTimePicker[17].props.onClick();
+    const wheelDateTimePicker = instance.findAllByType(WheelDateTimePicker);
+    expect(wheelDateTimePicker).toHaveLength(3);
   });
 });

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -5,7 +5,7 @@ import styles from './SliderRangeTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
-import SliderRange from 'react-native-slider';
+import Slider from '@react-native-community/slider';
 import { useConfigGlobalState } from '../../iot/states';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
@@ -75,7 +75,7 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
         </Text>
       </View>
       <View style={styles.RightBrightness}>
-        <SliderRange
+        <Slider
           style={styles.slider}
           value={valueBrightness}
           onSlidingComplete={onChangeBrightness}
@@ -89,7 +89,6 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
           trackStyle={styles.trackSlider}
           thumbStyle={styles.thumbSlider}
         />
-
         <View style={styles.valuePercent}>
           <Text type="Label" style={styles.textValuePercent}>
             {`${valueBrightness}%`}

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -189,6 +189,7 @@ const SmartTiviActionTemplate = memo(
                 FakeDataChannel.map((item, index) => {
                   return (
                     <RectangleButton
+                      key={index}
                       type="row"
                       onPress={onPressButton(
                         SMART_TIVI_BUTTON.CHANNEL_BUTTON,

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonCircle.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ThreeButtonCircle from '../components/ThreeButtonCircle';
+
+const mockOnButton1Press = jest.fn();
+const mockOnButton2Press = jest.fn();
+const mockOnButton3Press = jest.fn();
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonCircle {...props} />
+  </SCProvider>
+);
+
+describe('Test ThreeButtonCircle', () => {
+  let props = {
+    icon1: 'icon1',
+    text1: 'text1',
+    icon2: 'icon2',
+    text2: 'text2',
+    icon3: 'icon3',
+    text3: 'text3',
+    onButton1Press: mockOnButton1Press,
+    onButton2Press: mockOnButton2Press,
+    onButton3Press: mockOnButton3Press,
+  };
+  let wrapper;
+
+  it('render ThreeButtonCircle', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(3);
+  });
+  it('render ThreeButtonCircle onPressButton', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacities[0].props.onPress();
+    });
+    expect(mockOnButton1Press).toBeCalled();
+  });
+});

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonDefault.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ThreeButtonDefault from '../components/ThreeButtonDefault';
+
+const mockOnButton1Press = jest.fn();
+const mockOnButton2Press = jest.fn();
+const mockOnButton3Press = jest.fn();
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonDefault {...props} />
+  </SCProvider>
+);
+
+describe('Test ThreeButtonDefault', () => {
+  let props = {
+    icon1: 'icon1',
+    text1: 'text1',
+    icon2: 'icon2',
+    text2: 'text2',
+    icon3: 'icon3',
+    text3: 'text3',
+    onButton1Press: mockOnButton1Press,
+    onButton2Press: mockOnButton2Press,
+    onButton3Press: mockOnButton3Press,
+  };
+  let wrapper;
+
+  it('render ThreeButtonDefault', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(3);
+  });
+  it('render ThreeButtonDefault onPressButton', async () => {
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(props));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacities[0].props.onPress();
+    });
+    expect(mockOnButton1Press).toBeCalled();
+  });
+});

package/src/commons/ActionGroup/{__test__ → ThreeButtonTemplate/__test__}/ThreeButtonTemplate.test.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import { TouchableOpacity } from 'react-native';
 
-import ThreeButtonTemplate from '../ThreeButtonTemplate';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import ThreeButtonTemplate from '..';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ThreeButtonDefault from '../components/ThreeButtonDefault';
+import ThreeButtonCircle from '../components/ThreeButtonCircle';
 
 const wrapComponent = (actionGroup) => (
   <SCProvider initState={mockSCStore({})}>
@@ -13,7 +14,7 @@ const wrapComponent = (actionGroup) => (
 );
 
 describe('Test ThreeButtonTemplate', () => {
-  const actionGroup = {
+  let actionGroup = {
     configuration: {
       action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
       action1_data: {
@@ -61,12 +62,24 @@ describe('Test ThreeButtonTemplate', () => {
 
   let wrapper;
 
-  it('render ThreeButtonTemplate', async () => {
+  it('render ThreeButtonDefault', async () => {
     await act(async () => {
       wrapper = renderer.create(wrapComponent(actionGroup));
     });
     const instance = wrapper.root;
-    const touchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(touchableOpacities.length).toEqual(3);
+    const ThreeButtonDefaults = instance.findAllByType(ThreeButtonDefault);
+    expect(ThreeButtonDefaults).toHaveLength(1);
+  });
+  it('render ThreeButtonCircle', async () => {
+    const actionGroupCT = {
+      ...actionGroup,
+      configuration: { ...actionGroup?.configuration, layout: 'circle' },
+    };
+    await act(async () => {
+      wrapper = renderer.create(wrapComponent(actionGroupCT));
+    });
+    const instance = wrapper.root;
+    const ThreeButtonCircles = instance.findAllByType(ThreeButtonCircle);
+    expect(ThreeButtonCircles).toHaveLength(1);
   });
 });

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonCircle.js

@@ -0,0 +1,103 @@
+import React, { memo, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import styles from './ThreeButtonCircleStyles';
+import Text from '../../../Text';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import IconComponent from '../../../IconComponent';
+import buttonCircleSmall from '../../../../Images/ThreeButton/buttonCircleSmall.png';
+import buttonCircleBig from '../../../../Images/ThreeButton/buttonCircleBig.png';
+import FImage from '../../../FImage';
+
+const ThreeButtonCircle = memo(
+  ({
+    icon1,
+    text1,
+    icon2,
+    text2,
+    icon3,
+    text3,
+    onButton1Press,
+    onButton2Press,
+    onButton3Press,
+  }) => {
+    const listButton = useMemo(() => {
+      return [
+        {
+          id: 1,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_CIRCLE_TEMPLATE_1,
+            onPress: onButton1Press,
+          },
+          fimage: {
+            source: buttonCircleSmall,
+            style: styles.iconSmall,
+            text: text1,
+            icon: icon1,
+          },
+        },
+        {
+          id: 2,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_CIRCLE_TEMPLATE_2,
+            onPress: onButton2Press,
+          },
+          fimage: {
+            source: buttonCircleBig,
+            style: styles.iconBig,
+            text: text2,
+            icon: icon2,
+          },
+        },
+        {
+          id: 3,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_CIRCLE_TEMPLATE_3,
+            onPress: onButton3Press,
+          },
+          fimage: {
+            source: buttonCircleSmall,
+            style: styles.iconSmall,
+            text: text3,
+            icon: icon3,
+          },
+        },
+      ];
+    }, [
+      icon1,
+      icon2,
+      icon3,
+      onButton1Press,
+      onButton2Press,
+      onButton3Press,
+      text1,
+      text2,
+      text3,
+    ]);
+
+    return (
+      <View style={styles.threeButtonCircle}>
+        {listButton.map((item, index) => {
+          return (
+            <TouchableOpacity
+              accessibilityLabel={item?.button?.accessibilityLabel}
+              onPress={item?.button?.onPress}
+              key={item?.id || index}
+            >
+              <View style={styles.buttonAction}>
+                <FImage
+                  source={item?.fimage.source}
+                  style={[styles.center, item?.fimage?.style]}
+                >
+                  <IconComponent icon={item?.fimage?.icon} />
+                  <Text style={styles.text}>{item?.fimage?.text}</Text>
+                </FImage>
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+export default ThreeButtonCircle;

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonCircleStyles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  threeButtonCircle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  iconSmall: {
+    height: 102,
+    width: 102,
+    marginBottom: 12,
+  },
+  iconBig: {
+    height: 170,
+    width: 170,
+    paddingBottom: 10,
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonAction: {
+    flex: 1,
+    aspectRatio: 1,
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    resizeMode: 'contain',
+  },
+});

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefault.js

@@ -0,0 +1,96 @@
+import React, { memo, useMemo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import styles from './ThreeButtonDefaultStyles';
+import Text from '../../../Text';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import IconComponent from '../../../IconComponent';
+
+const ThreeButtonDefault = memo(
+  ({
+    icon1,
+    text1,
+    icon2,
+    text2,
+    icon3,
+    text3,
+    onButton1Press,
+    onButton2Press,
+    onButton3Press,
+  }) => {
+    const Icon2CT = () => {
+      return icon2 === 'stop' ? (
+        <View style={styles.squareStop} />
+      ) : (
+        <IconComponent icon={icon2} iconSize={30} />
+      );
+    };
+
+    const listButton = useMemo(() => {
+      return [
+        {
+          id: 1,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_1,
+            onPress: onButton1Press,
+          },
+          icon: icon1,
+          text: text1,
+        },
+        {
+          id: 2,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_2,
+            onPress: onButton2Press,
+          },
+          icon: icon2,
+          text: text2,
+        },
+        {
+          id: 3,
+          button: {
+            accessibilityLabel: AccessibilityLabel.BUTTON_TEMPLATE_3,
+            onPress: onButton3Press,
+          },
+          icon: icon3,
+          text: text3,
+        },
+      ];
+    }, [
+      icon1,
+      icon2,
+      icon3,
+      onButton1Press,
+      onButton2Press,
+      onButton3Press,
+      text1,
+      text2,
+      text3,
+    ]);
+
+    return (
+      <View style={styles.threeButtonDefault}>
+        {listButton.map((item, index) => {
+          return (
+            <TouchableOpacity
+              accessibilityLabel={item?.button?.accessibilityLabel}
+              style={styles.buttonAction}
+              onPress={item?.button?.onPress}
+              key={item?.id || index}
+            >
+              <View style={styles.imageButton}>
+                {item?.id === 2 ? (
+                  <Icon2CT />
+                ) : (
+                  <IconComponent icon={item?.icon} iconSize={30} />
+                )}
+              </View>
+              <Text style={styles.text}>{item?.text}</Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+export default ThreeButtonDefault;

package/src/commons/ActionGroup/{ThreeButtonTemplateStyle.js → ThreeButtonTemplate/components/ThreeButtonDefaultStyles.js}

@@ -1,12 +1,8 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../configs';
+import { Colors } from '../../../../configs';
 
 export default StyleSheet.create({
-  wrap: {
-    flex: 1,
-    marginBottom: 16,
-  },
-  threeButton: {
+  threeButtonDefault: {
     flexDirection: 'row',
     justifyContent: 'space-around',
     padding: 16,
@@ -15,15 +11,7 @@ export default StyleSheet.create({
     borderColor: Colors.Gray4,
     borderRadius: 10,
   },
-  imageButton: {
-    height: 32,
-    marginBottom: 7,
-  },
-  text: {
-    fontSize: 14,
-    lineHeight: 22,
-  },
-  buttonActionDoor: {
+  buttonAction: {
     flex: 1,
     aspectRatio: 1,
     marginHorizontal: 4,
@@ -34,6 +22,14 @@ export default StyleSheet.create({
     borderColor: Colors.Gray3,
     borderRadius: 10,
   },
+  imageButton: {
+    height: 32,
+    marginBottom: 7,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
   squareStop: {
     marginHorizontal: 8,
     marginVertical: 8,
@@ -44,23 +40,4 @@ export default StyleSheet.create({
     backgroundColor: Colors.Primary,
     borderRadius: 1,
   },
-  lockSwitch: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 7,
-  },
-  iconLock: {
-    paddingBottom: 7,
-  },
-  textLockDoor: {
-    paddingLeft: 12,
-    height: 24,
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  lockDoor: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingLeft: 5,
-  },
 });