@eohjsc/react-native-smart-city 0.3.28 → 0.3.31

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 { 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' ? (
@@ -60,7 +62,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
             style={styles.textLockDoor}
             testID={TESTID.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
+          testID={TESTID.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
+          testID={TESTID.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
+          testID={TESTID.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>
     </>
   );
 });

package/src/commons/ActionGroup/TwoButtonTemplate/index.js

@@ -10,149 +10,151 @@ import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import Text from '../../Text';
 import styles from './TwoButtonTemplateStyles';
 
-const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
-  const { configuration } = actionGroup;
-  const { button1, button2 } = configuration;
-  const [isOn, setIsOn] = useState(true);
-  const [isStart, setIsStart] = useState(true);
-  const [configValues] = useConfigGlobalState('configValues');
-  const isLight = false;
+const TwoButtonTemplate = memo(
+  ({ actionGroup = {}, doAction, sensor = {} }) => {
+    const { configuration = {} } = actionGroup;
+    const { button1, button2 } = configuration;
+    const [isOn, setIsOn] = useState(true);
+    const [isStart, setIsStart] = useState(true);
+    const [configValues] = useConfigGlobalState('configValues');
+    const isLight = false;
 
-  const triggerAction1 = useCallback(async () => {
-    if (button1?.action_on_data && button1?.action_off_data) {
-      if (isOn) {
-        await doAction(button1?.action_off_data, null);
-      } else {
-        await doAction(button1?.action_on_data, null);
+    const triggerAction1 = useCallback(async () => {
+      if (button1?.action_on_data && button1?.action_off_data) {
+        if (isOn) {
+          await doAction(button1?.action_off_data, null);
+        } else {
+          await doAction(button1?.action_on_data, null);
+        }
       }
-    }
-    if (sensor?.is_managed_by_backend) {
-      configuration.config &&
-        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
-        watchMultiConfigs([configuration.config]);
-    }
-  }, [
-    button1,
-    configuration.config,
-    doAction,
-    isOn,
-    sensor?.is_managed_by_backend,
-    sensor.device_type,
-  ]);
+      if (sensor?.is_managed_by_backend) {
+        configuration.config &&
+          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+          watchMultiConfigs([configuration.config]);
+      }
+    }, [
+      button1,
+      configuration.config,
+      doAction,
+      isOn,
+      sensor?.is_managed_by_backend,
+      sensor.device_type,
+    ]);
 
-  const triggerAction2 = useCallback(async () => {
-    if (button2?.action_on_data && button2?.action_off_data) {
-      if (isStart) {
-        await doAction(button2?.action_off_data, null);
-      } else {
-        await doAction(button2?.action_on_data, null);
+    const triggerAction2 = useCallback(async () => {
+      if (button2?.action_on_data && button2?.action_off_data) {
+        if (isStart) {
+          await doAction(button2?.action_off_data, null);
+        } else {
+          await doAction(button2?.action_on_data, null);
+        }
+      }
+      if (
+        sensor?.is_managed_by_backend &&
+        sensor.device_type === DEVICE_TYPE.LG_THINQ
+      ) {
+        configuration.config && watchMultiConfigs([configuration.config]);
       }
-    }
-    if (
-      sensor?.is_managed_by_backend &&
-      sensor.device_type === DEVICE_TYPE.LG_THINQ
-    ) {
-      configuration.config && watchMultiConfigs([configuration.config]);
-    }
-  }, [
-    button2?.action_off_data,
-    button2?.action_on_data,
-    configuration.config,
-    doAction,
-    isStart,
-    sensor?.is_managed_by_backend,
-    sensor.device_type,
-  ]);
+    }, [
+      button2?.action_off_data,
+      button2?.action_on_data,
+      configuration.config,
+      doAction,
+      isStart,
+      sensor?.is_managed_by_backend,
+      sensor.device_type,
+    ]);
+
+    useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
 
-  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+    useEffect(() => {
+      const configValue1 = configValues[button1?.config];
+      const configValue2 = configValues[button2?.config];
+      if (button1?.is_on_value && button1?.is_on_value.length > 0) {
+        setIsOn(button1?.is_on_value.includes(configValue1?.value));
+        return;
+      }
+      if (button2?.is_on_value && button2?.is_on_value.length > 0) {
+        setIsStart(button2?.is_on_value.includes(configValue2?.value));
+        return;
+      }
 
-  useEffect(() => {
-    const configValue1 = configValues[button1?.config];
-    const configValue2 = configValues[button2?.config];
-    if (button1?.is_on_value && button1?.is_on_value.length > 0) {
-      setIsOn(button1?.is_on_value.includes(configValue1?.value));
-      return;
-    }
-    if (button2?.is_on_value && button2?.is_on_value.length > 0) {
-      setIsStart(button2?.is_on_value.includes(configValue2?.value));
-      return;
-    }
+      setIsOn(configValue1?.value);
+      setIsStart(configValue2?.value);
+    }, [
+      configuration.config,
+      configValues,
+      configuration.is_on_value,
+      configuration,
+      button1?.config,
+      button1?.is_on_value,
+      button2?.config,
+      button2?.is_on_value,
+    ]);
 
-    setIsOn(configValue1?.value);
-    setIsStart(configValue2?.value);
-  }, [
-    configuration.config,
-    configValues,
-    configuration.is_on_value,
-    configuration,
-    button1?.config,
-    button1?.is_on_value,
-    button2?.config,
-    button2?.is_on_value,
-  ]);
+    const RenderTwoButtonAction = () => {
+      const buttons = [
+        {
+          icon_on: button1?.icon_on,
+          icon_off: button1?.icon_off,
+          text_on: button1?.text_on,
+          text_off: button1?.text_off,
+          onPress: triggerAction1,
+          isCheckOnOff: isOn,
+          testID: TESTID.BUTTON_TEMPLATE_1,
+        },
+        {
+          icon_on: button2?.icon_on,
+          icon_off: button2?.icon_off,
+          text_on: button2?.text_on,
+          text_off: button2?.text_off,
+          onPress: triggerAction2,
+          isCheckOnOff: isStart,
+          testID: TESTID.BUTTON_TEMPLATE_1,
+        },
+      ];
+      return (
+        <>
+          {buttons.map((item, index) => (
+            <TouchableOpacity
+              testID={item.testID}
+              style={styles.bigCircle}
+              onPress={item.onPress}
+            >
+              <View style={styles.smallCircle}>
+                <Icon
+                  name={item?.isCheckOnOff ? item?.icon_on : item?.icon_off}
+                  size={44}
+                  color={item?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}
+                />
+                <Text
+                  style={[
+                    styles.textBig,
+                    { color: item?.isCheckOnOff ? Colors.Gray8 : Colors.Gray6 },
+                  ]}
+                >
+                  {item?.isCheckOnOff ? item?.text_on : item?.text_off}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          ))}
+        </>
+      );
+    };
 
-  const RenderTwoButtonAction = () => {
-    const buttons = [
-      {
-        icon_on: button1?.icon_on,
-        icon_off: button1?.icon_off,
-        text_on: button1?.text_on,
-        text_off: button1?.text_off,
-        onPress: triggerAction1,
-        isCheckOnOff: isOn,
-        testID: TESTID.BUTTON_TEMPLATE_1,
-      },
-      {
-        icon_on: button2?.icon_on,
-        icon_off: button2?.icon_off,
-        text_on: button2?.text_on,
-        text_off: button2?.text_off,
-        onPress: triggerAction2,
-        isCheckOnOff: isStart,
-        testID: TESTID.BUTTON_TEMPLATE_1,
-      },
-    ];
     return (
       <>
-        {buttons.map((item, index) => (
-          <TouchableOpacity
-            testID={item.testID}
-            style={styles.bigCircle}
-            onPress={item.onPress}
-          >
-            <View style={styles.smallCircle}>
-              <Icon
-                name={item?.isCheckOnOff ? item?.icon_on : item?.icon_off}
-                size={44}
-                color={item?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}
-              />
-              <Text
-                style={[
-                  styles.textBig,
-                  { color: item?.isCheckOnOff ? Colors.Gray8 : Colors.Gray6 },
-                ]}
-              >
-                {item?.isCheckOnOff ? item?.text_on : item?.text_off}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        ))}
+        <View style={styles.wrap}>
+          <RenderTwoButtonAction />
+        </View>
+        {!!actionGroup.title && !isLight && (
+          <Text size={20} semibold center>
+            {actionGroup.title}
+          </Text>
+        )}
       </>
     );
-  };
-
-  return (
-    <>
-      <View style={styles.wrap}>
-        <RenderTwoButtonAction />
-      </View>
-      {!!actionGroup.title && !isLight && (
-        <Text size={20} semibold center>
-          {actionGroup.title}
-        </Text>
-      )}
-    </>
-  );
-});
+  }
+);
 
 export default TwoButtonTemplate;

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

@@ -174,7 +174,7 @@ describe('Test ActionGroup', () => {
     const TextDoorLock = instance.find(
       (el) => el.props.testID === TESTID.TEXT_DOOR_LOOK_ON_OFF
     );
-    expect(TextDoorLock.props.children).toEqual(['Door lock', ' ']);
+    expect(TextDoorLock.props.children).toEqual('Door lock ');
     expect(switchOnOff.length).toEqual(1);
     expect(buttons.length).toEqual(3);
     act(() => {
@@ -245,7 +245,7 @@ describe('Test ActionGroup', () => {
     const TextDoorLock = instance.find(
       (el) => el.props.testID === TESTID.TEXT_DOOR_LOOK_ON_OFF
     );
-    expect(TextDoorLock.props.children).toEqual(['Door lock', ' ']);
+    expect(TextDoorLock.props.children).toEqual('Door lock ');
     expect(switchOnOff.length).toEqual(1);
     expect(buttons.length).toEqual(3);
     act(() => {

package/src/commons/ActionGroup/index.js

@@ -1,6 +1,5 @@
+import React, { memo, useCallback, useMemo } from 'react';
 import Text from '../Text';
-import React, { memo, useMemo } from 'react';
-
 import OneBigButtonTemplate from './OneBigButtonTemplate';
 import ThreeButtonTemplate from './ThreeButtonTemplate';
 import StatesGridActionTemplate from './StatesGridActionTemplate';
@@ -14,6 +13,9 @@ import ColorPickerTemplate from './ColorPickerTemplate';
 import SliderRangeTemplate from './SliderRangeTemplate';
 import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 import TwoButtonTemplate from './TwoButtonTemplate';
+import { CardDevMode } from '../DevMode';
+import t from '../../hooks/Common/useTranslations';
+import { useSCContextSelector } from '../../context';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -52,23 +54,46 @@ export const getActionComponent = (template) => {
   }
 };
 
-const ActionGroup = memo((params) => {
-  const { actionGroup } = params;
+const isWrap = (template) => {
+  switch (template) {
+    case 'OnOffSmartLockActionTemplate':
+      return true;
+    default:
+      return false;
+  }
+};
+
+const ActionGroup = (params = {}) => {
+  const { actionGroup = {}, id } = params;
+  const { template } = actionGroup;
+  const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
+
+  const getTitle = useCallback(() => {
+    switch (template) {
+      case 'OnOffSmartLockActionTemplate':
+        return isEditingTemplate ? 'label' : 'controller';
+      default:
+        return 'label';
+    }
+  }, [template, isEditingTemplate]);
+
   const ButtonGroupComponent = useMemo(() => {
-    return getActionComponent(actionGroup.template);
-  }, [actionGroup]);
+    return getActionComponent(template);
+  }, [template]);
 
   return (
     <>
       {ButtonGroupComponent ? (
-        <ButtonGroupComponent {...params} />
+        <CardDevMode title={t(getTitle())} id={id} isWrap={isWrap(template)}>
+          <ButtonGroupComponent {...params} />
+        </CardDevMode>
       ) : (
         <Text
           center
-        >{`Invalid action template '${actionGroup.template}'`}</Text>
+        >{`Invalid action template '${actionGroup?.template}'`}</Text>
       )}
     </>
   );
-});
+};
 
-export default ActionGroup;
+export default memo(ActionGroup);

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]);