@eohjsc/react-native-smart-city 0.3.29 → 0.3.32

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

@@ -4,7 +4,7 @@ import SmartTiviActionTemplate from '../SmartTiviActionTemplate';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import { ScrollView } from 'react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = (actionGroup, doAction) => (
   <SCProvider initState={mockSCStore({})}>
@@ -28,7 +28,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const circleButtonOnOff = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.ONOFF_BUTTON
     );
     expect(circleButtonOnOff).toBeDefined();
     await act(() => {
@@ -36,7 +38,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
 
     const circleButtonExit = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.EXIT_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.EXIT_BUTTON
     );
     expect(circleButtonExit).toBeDefined();
     // expect(circleButton).toHaveLength(2);
@@ -51,7 +55,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const RectangleButtonVolume = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.VOLUME_BUTTON
     );
     expect(RectangleButtonVolume).toBeDefined();
     await act(() => {
@@ -61,7 +67,9 @@ describe('Test SmartTiviActionTemplate', () => {
       RectangleButtonVolume.props.onPressDown();
     });
     const RectangleButtonCH = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CH_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_BUTTON
     );
     expect(RectangleButtonCH).toBeDefined();
     await act(() => {
@@ -77,7 +85,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const CircleButtonBig = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.BIG_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.BIG_BUTTON
     );
     expect(CircleButtonBig).toBeDefined();
     await act(() => {
@@ -102,7 +112,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const ControlPlay = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.CONTROL_BUTTON
     );
     expect(ControlPlay).toBeDefined();
     await act(() => {
@@ -121,7 +133,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const controlHome = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.HOME_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.HOME_BUTTON
     );
     expect(controlHome).toBeDefined();
     await act(() => {
@@ -134,7 +148,9 @@ describe('Test SmartTiviActionTemplate', () => {
     });
     const instance = wrapper.root;
     const controlBack = instance.find(
-      (el) => el.props.testID === TESTID.SMART_TIVI_TEMPLATE.BACK_BUTTON
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.SMART_TIVI_TEMPLATE.BACK_BUTTON
     );
     expect(controlBack).toBeDefined();
     await act(() => {

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

@@ -4,7 +4,7 @@ import styles from './CircleButtonStyles';
 import Text from '../../../Text';
 import { Colors, Images } from '../../../../configs';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const CircleButton = memo(
   ({
@@ -42,7 +42,9 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.upButton, styles.padding16]}
                 onPress={onPressUp}
-                testID={TESTID.SMART_TIVI_TEMPLATE.UP_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.UP_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-up'} />
               </TouchableOpacity>
@@ -51,14 +53,18 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.leftButton, styles.padding16]}
                 onPress={onPressLeft}
-                testID={TESTID.SMART_TIVI_TEMPLATE.LEFT_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.LEFT_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-left'} />
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.okButton]}
                 onPress={onPressOk}
-                testID={TESTID.SMART_TIVI_TEMPLATE.OK_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.OK_BUTTON
+                }
               >
                 <Text type="H4" color={Colors.Gray9} bold>
                   OK
@@ -67,7 +73,9 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.rightButton, styles.padding16]}
                 onPress={onPressRight}
-                testID={TESTID.SMART_TIVI_TEMPLATE.RIGHT_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.RIGHT_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-right'} />
               </TouchableOpacity>
@@ -76,7 +84,9 @@ const CircleButton = memo(
               <TouchableOpacity
                 style={[styles.downButton, styles.padding16]}
                 onPress={onPressDown}
-                testID={TESTID.SMART_TIVI_TEMPLATE.DOWN_BUTTON}
+                accessibilityLabel={
+                  AccessibilityLabel.SMART_TIVI_TEMPLATE.DOWN_BUTTON
+                }
               >
                 <IconOutline size={14} name={'caret-down'} />
               </TouchableOpacity>

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

@@ -4,7 +4,7 @@ import { Colors } from '../../../../configs';
 
 import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 import { IconOutline } from '@ant-design/icons-react-native';
 
@@ -15,7 +15,9 @@ const ControlPlay = memo(
         <TouchableOpacity
           style={[styles.controlButton, styles.controlPrev]}
           onPress={onPressPrev}
-          testID={TESTID.SMART_TIVI_TEMPLATE.PREV_BUTTON}
+          accessibilityLabel={
+            AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
+          }
         >
           <IconOutline
             size={32}
@@ -27,14 +29,18 @@ const ControlPlay = memo(
         <TouchableOpacity
           style={[styles.controlButton, styles.controlStop]}
           onPress={onPressStop}
-          testID={TESTID.SMART_TIVI_TEMPLATE.STOP_BUTTON}
+          accessibilityLabel={
+            AccessibilityLabel.SMART_TIVI_TEMPLATE.STOP_BUTTON
+          }
         >
           <Pause size={48} />
         </TouchableOpacity>
         <TouchableOpacity
           style={[styles.controlButton, styles.controlNext]}
           onPress={onPressNext}
-          testID={TESTID.SMART_TIVI_TEMPLATE.NEXT_BUTTON}
+          accessibilityLabel={
+            AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
+          }
         >
           <IconOutline
             size={32}

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

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 
 import styles from './RectangleButtonStyles';
 import { KeyboardArrowUp, KeyboardArrowDown } from './Icon';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const RectangleButton = memo(
   ({ icon, onPressUp, onPressDown, wrapStyle, type, onPress }) => {
@@ -22,7 +22,9 @@ const RectangleButton = memo(
             <TouchableOpacity
               style={[styles.rectangleColumn]}
               onPress={onPressUp}
-              testID={TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON}
+              accessibilityLabel={
+                AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_UP_BUTTON
+              }
             >
               <KeyboardArrowUp size={24} name={'up'} style={styles.padding8} />
             </TouchableOpacity>
@@ -30,7 +32,9 @@ const RectangleButton = memo(
             <TouchableOpacity
               style={[styles.rectangleColumn]}
               onPress={onPressDown}
-              testID={TESTID.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON}
+              accessibilityLabel={
+                AccessibilityLabel.SMART_TIVI_TEMPLATE.CH_VOLUME_DOWN_BUTTON
+              }
             >
               <KeyboardArrowDown
                 size={24}

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -8,7 +8,7 @@ import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 import SvgClean from '../../../assets/images/Device/clean.svg';
 import SvgCirculator from '../../../assets/images/Device/circulator.svg';
 import SvgAuo from '../../../assets/images/Device/auto.svg';
@@ -72,7 +72,7 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
   return (
     <View
       style={[styles.gridItem]}
-      testID={TESTID.STATES_GRID_ACTION_GRID_ITEM}
+      accessibilityLabel={AccessibilityLabel.STATES_GRID_ACTION_GRID_ITEM}
     >
       <TouchableOpacity
         style={[styles.button, buttonOnOffStyle]}

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -1,15 +1,12 @@
 import React, { memo, useCallback, useState } from 'react';
 import { TouchableOpacity, View, Switch } from 'react-native';
 import { Icon } from '@ant-design/react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './ThreeButtonTemplateStyle';
 import Text from '../Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { Colors } from '../../configs';
-import { Card } from '../../commons/CardShadow';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const t = useTranslations();
+const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
   const { configuration } = actionGroup;
   const {
     text1,
@@ -20,7 +17,12 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     action3_data,
     action_off_data,
     action_on_data,
-  } = configuration;
+    icon1,
+    icon2,
+    icon3,
+    text_door_lock,
+    is_display_lock,
+  } = configuration || {};
   const [lock, setLock] = useState(false);
   const iconCustom = (icon) => {
     return icon === 'stop' ? (
@@ -58,9 +60,9 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
           <Icon name={icon} size={15} color={color} style={styles.iconLock} />
           <Text
             style={styles.textLockDoor}
-            testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
+            accessibilityLabel={AccessibilityLabel.TEXT_DOOR_LOOK_ON_OFF}
           >
-            {configuration.text_door_lock}{' '}
+            {`${text_door_lock} `}
           </Text>
         </View>
         <Switch
@@ -75,60 +77,48 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   };
   return (
     <>
-      <Card title={actionGroup.title ? actionGroup.title : t('controller')}>
-        <View style={styles.wrap}>
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_1}
-            style={styles.buttonActionDoor}
-            onPress={onButton1Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              <Icon
-                name={configuration.icon1}
-                size={30}
-                color={Colors.Primary}
-              />
-            </View>
-            <Text style={styles.text}>{text1}</Text>
-          </TouchableOpacity>
+      <View style={styles.wrap}>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_1}
+          style={styles.buttonActionDoor}
+          onPress={onButton1Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>
+            <Icon name={icon1} size={30} color={Colors.Primary} />
+          </View>
+          <Text style={styles.text}>{text1}</Text>
+        </TouchableOpacity>
 
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_2}
-            style={styles.buttonActionDoor}
-            onPress={onButton2Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              {iconCustom(configuration.icon2)}
-            </View>
-            <Text style={styles.text}>{text2}</Text>
-          </TouchableOpacity>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_2}
+          style={styles.buttonActionDoor}
+          onPress={onButton2Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>{iconCustom(icon2)}</View>
+          <Text style={styles.text}>{text2}</Text>
+        </TouchableOpacity>
 
-          <TouchableOpacity
-            testID={TESTID.BUTTON_TEMPLATE_3}
-            style={styles.buttonActionDoor}
-            onPress={onButton3Press}
-            underlayColor={Colors.Gray2}
-          >
-            <View style={styles.imageButton}>
-              <Icon
-                name={configuration.icon3}
-                size={30}
-                color={Colors.Primary}
-              />
-            </View>
-            <Text style={styles.text}>{text3}</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.lockSwitch}>
-          {configuration.is_display_lock &&
-            itemLock(
-              lock ? 'lock' : 'unlock',
-              lock ? Colors.Primary : Colors.Gray6
-            )}
-        </View>
-      </Card>
+        <TouchableOpacity
+          accessibilityLabel={AccessibilityLabel.BUTTON_TEMPLATE_3}
+          style={styles.buttonActionDoor}
+          onPress={onButton3Press}
+          underlayColor={Colors.Gray2}
+        >
+          <View style={styles.imageButton}>
+            <Icon name={icon3} size={30} color={Colors.Primary} />
+          </View>
+          <Text style={styles.text}>{text3}</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.lockSwitch}>
+        {is_display_lock &&
+          itemLock(
+            lock ? 'lock' : 'unlock',
+            lock ? Colors.Primary : Colors.Gray6
+          )}
+      </View>
     </>
   );
 });