@eohjsc/react-native-smart-city 0.3.27 → 0.3.30

package/index.js

@@ -19,6 +19,7 @@ import MyUnit from './src/commons/Dashboard/MyUnit';
 import SharedUnit from './src/commons/Unit/SharedUnit';
 import { Action } from './src/context/actionType';
 import { withRemoteControl } from './src/hoc';
+import DevModeStack from './src/navigations/Main';
 
 export {
   AddSubUnitStack,
@@ -44,4 +45,5 @@ export {
   SCWrapper,
   Action,
   withRemoteControl,
+  DevModeStack,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.27",
+  "version": "0.3.30",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Action/ItemQuickAction.js

@@ -88,6 +88,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
   return (
     <TouchableOpacity
       testID={TESTID.ITEM_QUICK_ACTION_PRESS}
+      accessibilityLabel={`${TESTID.ITEM_QUICK_ACTION_PRESS}-${sensor?.id}`}
       onPress={onActionPress}
     >
       <View style={wrapperStyle}>

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -16,7 +16,6 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     action_on_data,
     is_display_lock,
     text1,
-    text2,
     text3,
     text_door_lock,
   } = configuration || {};
@@ -56,7 +55,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       {
         style: styles.buttonActionCurtainCenter,
         icon: Images.buttonPauseCurtain,
-        text: text2,
+        text: '',
         onPress: onButtonStopPress,
         testID: TESTID.BUTTON_TEMPLATE_2,
       },

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -18,6 +18,7 @@ const OnOffButtonTemplate = memo(
             style={styles.bigCircle}
             onPress={triggerAction}
             testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
+            accessibilityLabel={`${TESTID.ON_OFF_BUTTON}-${id}`}
           >
             <View style={styles.smallCircle}>
               <Icon
@@ -31,6 +32,7 @@ const OnOffButtonTemplate = memo(
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
                 testID={`${TESTID.SENSOR_STATUS}-${id}`}
+                accessibilityLabel={`${TESTID.SENSOR_STATUS}-${id}`}
               >
                 {isOn ? configuration.text_on : configuration.text_off}
               </Text>

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
+import React, { memo, useCallback, useState, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './SliderRangeTemplateStyles';
@@ -13,30 +13,38 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const [valueBrightness, setValueBrightness] = useState(0);
   const [valueBrightnessTemp, setValueBrightnessTemp] = useState(0);
+  const [isFirstTime, setIsFirstTime] = useState(true);
+
   const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeBrightness = useCallback(
-    (value) => {
-      doAction(
+    async (value) => {
+      await doAction(
         configuration?.action_brightness_data,
         JSON.stringify({ value_brness: value })
       );
+      await setValueBrightness(value);
+      await setValueBrightnessTemp(value);
     },
     [configuration?.action_brightness_data, doAction]
   );
 
-  const percentBrightness = useMemo(() => {
-    return valueBrightnessTemp || valueBrightness || 0;
-  }, [valueBrightness, valueBrightnessTemp]);
-
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    let valueBrness = configValue?.value;
-    if (valueBrness >= 0 && valueBrightness >= 0) {
-      setValueBrightness(valueBrness);
+    if (configValue?.value >= 0 && isFirstTime) {
+      setValueBrightness(configValue?.value);
+      setIsFirstTime(false);
+    } else if (configValue?.value === valueBrightnessTemp) {
+      setValueBrightness(valueBrightnessTemp);
     }
-  }, [configuration.config, configValues, configuration, valueBrightness]);
+  }, [
+    configuration.config,
+    configValues,
+    configuration,
+    isFirstTime,
+    valueBrightnessTemp,
+  ]);
 
   return (
     <View style={styles.viewBrightness}>
@@ -49,9 +57,9 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
       <View style={styles.RightBrightness}>
         <View style={styles.slider}>
           <SliderRange
-            value={valueBrightnessTemp}
+            value={valueBrightness}
             onSlidingComplete={onChangeBrightness}
-            onValueChange={setValueBrightnessTemp}
+            onValueChange={setValueBrightness}
             step={1}
             minimumValue={0}
             maximumValue={100}
@@ -64,7 +72,7 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
         </View>
         <View style={styles.valuePercent}>
           <Text type="Label" style={styles.textValuePercent}>
-            {`${percentBrightness}%`}
+            {`${valueBrightness}%`}
           </Text>
         </View>
       </View>

package/src/commons/ActionTemplate/CurtainAction.js

@@ -0,0 +1,60 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './CurtainActionStyles';
+
+const CurtainAction = ({ configuration, onPress, template }) => {
+  const { open_action, close_action, stop_action, text1, text2, text3 } =
+    configuration || {};
+
+  const onPressActionClose = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text1,
+        action: close_action,
+        template,
+      });
+  }, [onPress, text1, close_action, template]);
+
+  const onPressActionStop = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text2,
+        action: stop_action,
+        template,
+      });
+  }, [onPress, text2, stop_action, template]);
+
+  const onPressActionOpen = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text3,
+        action: open_action,
+        template,
+      });
+  }, [onPress, text3, open_action, template]);
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressActionClose}>
+        <Text type="H4" style={styles.textwithline}>
+          {text1}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressActionStop}>
+        <Text type="H4" style={styles.textwithline}>
+          {text2}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressActionOpen}>
+        <Text type="H4" style={styles.textwithline}>
+          {text3}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default memo(CurtainAction);

package/src/commons/ActionTemplate/CurtainActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionTemplate/OnOffSmartLockAction.js

@@ -0,0 +1,44 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import styles from './OnOffSmartLockActionStyles';
+
+const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
+  const { action_off, action_on, text_off, text_on } = configuration || {};
+
+  const onPressActionClose = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text_off,
+        action: action_off,
+        template,
+      });
+  }, [onPress, text_off, action_off, template]);
+
+  const onPressActionOpen = useCallback(() => {
+    onPress &&
+      onPress({
+        name: text_on,
+        action: action_on,
+        template,
+      });
+  }, [onPress, text_on, action_on, template]);
+
+  return (
+    <>
+      <TouchableOpacity onPress={onPressActionClose}>
+        <Text type="H4" style={styles.textwithline}>
+          {text_off}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onPressActionOpen}>
+        <Text type="H4" style={styles.textwithline}>
+          {text_on}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+export default memo(OnOffSmartLockAction);

package/src/commons/ActionTemplate/OnOffSmartLockActionStyles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  textwithline: {
+    paddingBottom: 16,
+    paddingTop: 16,
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionTemplate/index.js

@@ -9,6 +9,8 @@ import ThreeButtonAction from './ThreeButtonAction';
 import OnOffSimpleAction from './OnOffSimpleAction';
 import SelectActionCard from '../SelectActionCard';
 import { ModalCustom } from '../Modal';
+import CurtainAction from './CurtainAction';
+import OnOffSmartLockAction from './OnOffSmartLockAction';
 
 const ActionTemplate = memo(({ data, onSelectAction }) => {
   const t = useTranslations();
@@ -66,6 +68,22 @@ const ActionTemplate = memo(({ data, onSelectAction }) => {
               key={index}
             />
           );
+        case 'curtain_action_template':
+          return (
+            <CurtainAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
+        case 'OnOffSmartLockActionTemplate':
+          return (
+            <OnOffSmartLockAction
+              {...item}
+              onPress={onPressSelectAction}
+              key={index}
+            />
+          );
       }
     });
   }, [data, onPressSelectAction]);

package/src/commons/BottomButtonView/index.js

@@ -42,6 +42,7 @@ const BottomButtonView = memo(
             textType={textTypeMain}
             style={rowButton && styleCustom.buttonMainRow}
             testID={`${testIDPrefix}${TESTID.BOTTOM_VIEW_MAIN}`}
+            accessibilityLabel={TESTID.BOTTOM_VIEW_MAIN}
           />
         )}
         {secondaryTitle && (

package/src/commons/Button/index.js

@@ -133,6 +133,7 @@ export default ({
   textSemiBold = true,
   style,
   testID,
+  accessibilityLabel,
 }) => {
   const styleButton = ButtonStyle[type];
   const textColor = TextColor[type];
@@ -158,6 +159,7 @@ export default ({
       onPress={onPress}
       disabled={isDisabled}
       activeOpacity={activeOpacity}
+      accessibilityLabel={accessibilityLabel}
     >
       <View style={styles.wrap}>
         {icon}

package/src/commons/CameraDevice/index.js

@@ -17,7 +17,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
-const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
+const CameraDevice = ({ station, goToPlayBack }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const { setAction } = useContext(SCContext);
@@ -62,7 +62,6 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
             }}
             key={`camera-device-${device.id}`}
             cameraName={device.configuration.name}
-            handleFullScreen={handleFullScreen}
             goToPlayBack={goToPlayBack(device, { uri: station?.background })}
             width={standardizeWidth}
             height={standardizeHeight}

package/src/commons/ConnectingProcess/DeviceItem/DeviceItem.js

@@ -3,18 +3,26 @@ import { View } from 'react-native';
 import styles from './DeviceItemStyles';
 import FImage from '../../FImage';
 import _TextInput from '../../Form/TextInput';
+import Images from '../../../configs/Images';
 
-const DeviceItem = memo(({ icon, name, setNewName }) => {
-  return (
-    <View style={styles.container}>
-      {!!icon && <FImage source={{ uri: icon }} style={styles.iconSensor} />}
-      <_TextInput
-        value={name}
-        textInputStyle={styles.textItem}
-        onChange={setNewName}
-      />
-    </View>
-  );
-});
+const DeviceItem = memo(
+  ({ icon, name, setNewName, handleSelectionChange, isSelection }) => {
+    return (
+      <View style={styles.container}>
+        <FImage
+          source={icon ? { uri: icon } : Images.deviceIcon}
+          style={styles.iconSensor}
+        />
+        <_TextInput
+          value={name}
+          textInputStyle={styles.textItem}
+          onChange={setNewName}
+          selection={isSelection && { start: 0, end: 0 }}
+          onSelectionChange={handleSelectionChange}
+        />
+      </View>
+    );
+  }
+);
 
 export default DeviceItem;

package/src/commons/ConnectingProcess/DeviceItem/DeviceItemStyles.js

@@ -20,6 +20,8 @@ export default StyleSheet.create({
     elevation: 6,
     paddingLeft: 30,
     paddingRight: 30,
+    display: 'flex',
+    alignItems: 'center',
   },
   iconSensor: {
     width: 32,

package/src/commons/ConnectingProcess/__test__/DeviceItem.test.js

@@ -13,7 +13,7 @@ describe('Test DeviceItem button', () => {
     const instance = tree.root;
     const image = instance.findAllByType(FImage);
     const text = instance.findAllByType(_TextInput);
-    expect(image).toHaveLength(0);
+    expect(image).toHaveLength(1);
     expect(text).toHaveLength(1);
   });
 });

package/src/commons/ConnectingProcess/index.js

@@ -20,6 +20,8 @@ const ConnectingSuccess = ({
   unit_name,
   newName,
   setNewName,
+  isSelection,
+  handleSelectionChange,
 }) => {
   const t = useTranslations();
   return (
@@ -37,6 +39,8 @@ const ConnectingSuccess = ({
         icon={sensor?.icon_kit}
         name={newName}
         setNewName={setNewName}
+        handleSelectionChange={handleSelectionChange}
+        isSelection={isSelection}
       />
     </View>
   );
@@ -61,6 +65,7 @@ const ConnectingProcess = ({ route }) => {
   const [sensor, setSensor] = useState(null);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const [newName, setNewName] = useState('');
+  const [isSelection, setIsSelection] = useState(true);
 
   const connectingDevice = useCallback(async () => {
     setIsLoading(true);
@@ -166,6 +171,10 @@ const ConnectingProcess = ({ route }) => {
     unit_id,
   ]);
 
+  const handleSelectionChange = useCallback(() => {
+    setIsSelection(false);
+  }, []);
+
   useEffect(() => {
     connectingDevice();
   }, [connectingDevice]);
@@ -185,6 +194,8 @@ const ConnectingProcess = ({ route }) => {
             unit_name={unit_name}
             newName={newName}
             setNewName={setNewName}
+            isSelection={isSelection}
+            handleSelectionChange={handleSelectionChange}
           />
         )}
       </View>

package/src/commons/Dashboard/MyUnit/index.js

@@ -124,7 +124,7 @@ const MyUnit = () => {
         </View>
       );
     },
-    [myUnits.length, goToDetail]
+    [myUnits, goToDetail]
   );
 
   return (

package/src/commons/DevMode/Label.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { memo } from 'react';
+import Text from '../Text';
+import styles from './Styles/LabelStyles';
+
+const Label = ({ name = '', style }) => {
+  return <Text style={[styles.label, style]}>{name}</Text>;
+};
+
+export default memo(Label);

package/src/commons/DevMode/Search.js

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { View, Image, TextInput } from 'react-native';
+import { Images } from '../../configs';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/SearchStyles';
+
+const Search = ({ onSearch }) => {
+  return (
+    <View style={styles.wrap}>
+      <Image source={Images.search} style={styles.icon} />
+      <TextInput
+        style={styles.textInput}
+        placeholder={t('what_are_you_looking_for')}
+        onChangeText={onSearch}
+      />
+    </View>
+  );
+};
+
+export default memo(Search);

package/src/commons/DevMode/Styles/LabelStyles.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  label: {
+    fontSize: 28,
+    fontWeight: 'bold',
+  },
+});

package/src/commons/DevMode/Styles/SearchStyles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    marginVertical: 16,
+  },
+  icon: {},
+  textInput: {
+    flex: 1,
+    height: 36,
+    marginLeft: 5,
+  },
+});

package/src/commons/DevMode/index.js

@@ -0,0 +1,3 @@
+import Label from './Label';
+
+export { Label };

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

@@ -9,7 +9,11 @@ import { TESTID } from '../../../configs/Constants';
 
 const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
   return (
-    <TouchableWithoutFeedback onPress={onAddNew}>
+    <TouchableWithoutFeedback
+      onPress={onAddNew}
+      testID={TESTID.TOUCH_ADD_NEW_FAVORITES}
+      accessibilityLabel={TESTID.TOUCH_ADD_NEW_FAVORITES}
+    >
       <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
           <TouchableOpacity

package/src/commons/Device/ItemDevice.js

@@ -61,17 +61,18 @@ const ItemDevice = memo(
 
     const borderColor = (() => {
       if (!!sensor && sensor?.is_managed_by_backend) {
+        if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+          return Colors.Gray4;
+        }
         if (isConnectedViaBLE) {
           return Colors.Gray4;
         }
         if (isFetchingStatus || isConnectedViaInternet) {
           return Colors.Gray4;
         }
+        return Colors.Red6;
       }
       // not managed by backend
-      if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-        return Colors.Gray4;
-      }
       if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
         if (isGGHomeConnecting || isGGHomeConnected) {
           return Colors.Gray4;
@@ -82,6 +83,9 @@ const ItemDevice = memo(
 
     const textConnected = (() => {
       if (!!sensor && sensor?.is_managed_by_backend) {
+        if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+          return t('connected');
+        }
         if (isConnectedViaBLE) {
           return t('connected');
         }
@@ -91,11 +95,9 @@ const ItemDevice = memo(
         if (isConnectedViaInternet) {
           return t('connected');
         }
+        return t('disconnected');
       }
       // not managed by backend
-      if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-        return t('connected');
-      }
       if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
         if (isGGHomeConnecting) {
           return t('connecting');
@@ -109,6 +111,9 @@ const ItemDevice = memo(
 
     const canRenderQuickAction = (() => {
       if (!!sensor && sensor?.is_managed_by_backend) {
+        if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+          return true;
+        }
         if (isConnectedViaBLE) {
           return true;
         }
@@ -118,9 +123,6 @@ const ItemDevice = memo(
         return true;
       }
       // not managed by backend
-      if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-        return true;
-      }
       if (sensor?.device_type === DEVICE_TYPE.GOOGLE_HOME) {
         return !isGGHomeConnecting;
       }
@@ -131,6 +133,7 @@ const ItemDevice = memo(
       <TouchableWithoutFeedback
         onPress={goToSensorDisplay}
         testID={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
+        accessibilityLabel={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
       >
         <View
           style={[styles.container, wrapStyle, { borderColor }]}