@eohjsc/react-native-smart-city 0.4.96 → 0.4.97

package/package.json

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

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

@@ -76,10 +76,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
         config_value: isOn ? 0 : 1,
       };
     }
-
-    if (device_type === DEVICE_TYPE.LG_THINQ) {
-      setTempIsOn((prev) => !prev);
-    }
+    setTempIsOn((prev) => !prev);
     await doAction(action_data, data);
     updateStatusFromPusher(); // todo Bang read about this magic
 

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -46,7 +46,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
         <AlertAction
           visible={stateAlert.visible}
           hideModal={hideAlertAction}
-          title={t('change')}
+          title={t('enter_parameters')}
           message={stateAlert.message}
           leftButtonTitle={stateAlert.leftButton}
           leftButtonClick={hideAlertAction}

package/src/commons/OneTapTemplate/OptionsDropdownActionTemplateStyles.js

@@ -44,7 +44,4 @@ export default StyleSheet.create({
     marginBottom: 24,
     marginTop: 16,
   },
-  flexContent: {
-    //   flexDirection: 'row',
-  },
 });

package/src/commons/OneTapTemplate/SliderRangeActionTemplate.js

@@ -0,0 +1,97 @@
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './TextBoxActionTemplateStyles';
+import { Colors } from '../../configs';
+import SelectActionCard from '../SelectActionCard';
+import Text from '../Text';
+import { useConfigGlobalState } from '../../iot/states';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { ModalCustom } from '../Modal';
+import _TextInput from '../Form/TextInput';
+
+const SliderRangeActionTemplate = ({ device, item, onSelectAction }) => {
+  const t = useTranslations();
+  const [visible, setVisible] = useState(false);
+  const onClose = () => setVisible(false);
+  const onPress = () => setVisible(true);
+  const { configuration, template, title } = item;
+  const { config, action } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+
+  useEffect(() => {
+    const configValue = configValues[config.id]?.value;
+    setValue(configValue);
+  }, [configValues, config]);
+
+  const onPressDone = useCallback(() => {
+    let actionData = { value: value };
+    setValue(value);
+    onSelectAction &&
+      onSelectAction({
+        index: item.index,
+        action,
+        data: actionData,
+        template,
+      });
+    onClose();
+  }, [value, onSelectAction, item.index, action, template]);
+
+  return (
+    <>
+      <SelectActionCard onPress={onPress} action={value} title={title} />
+
+      <ModalCustom
+        isVisible={visible}
+        onBackButtonPress={onClose}
+        onBackdropPress={onClose}
+      >
+        <View style={styles.popoverStyle}>
+          <View>
+            <Text type="H4" bold style={styles.textWithLine}>
+              {t('enter_value')}
+            </Text>
+            <View style={styles.modalContent}>
+              <_TextInput
+                wrapStyle={styles.wrapInputStyle}
+                value={value}
+                onChange={onInputChange}
+                keyboardType={'numeric'}
+              />
+            </View>
+            <View style={styles.wrapButton}>
+              <TouchableOpacity
+                onPress={onClose}
+                accessibilityLabel={AccessibilityLabel.BUTTON_CANCEL}
+              >
+                <Text type="H4" bold color={Colors.Primary}>
+                  {t('cancel')}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={onPressDone}
+                accessibilityLabel={AccessibilityLabel.BUTTON_DONE}
+                disabled={!value}
+              >
+                <Text
+                  type="H4"
+                  bold
+                  color={!value ? Colors.Gray : Colors.Primary}
+                >
+                  {t('done')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </ModalCustom>
+    </>
+  );
+};
+
+export default memo(SliderRangeActionTemplate);

package/src/commons/OneTapTemplate/TextBoxActionTemplate.js

@@ -0,0 +1,96 @@
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './TextBoxActionTemplateStyles';
+import { Colors } from '../../configs';
+import SelectActionCard from '../SelectActionCard';
+import Text from '../Text';
+import { useConfigGlobalState } from '../../iot/states';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { ModalCustom } from '../Modal';
+import _TextInput from '../Form/TextInput';
+
+const TextBoxActionTemplate = ({ device, item, onSelectAction }) => {
+  const t = useTranslations();
+  const [visible, setVisible] = useState(false);
+  const onClose = () => setVisible(false);
+  const onPress = () => setVisible(true);
+  const { configuration, template, title } = item;
+  const { config, action } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+
+  useEffect(() => {
+    const configValue = configValues[config.id]?.value;
+
+    setValue(configValue);
+  }, [configValues, config]);
+
+  const onPressDone = useCallback(() => {
+    let actionData = { value: value };
+    setValue(value);
+    onSelectAction &&
+      onSelectAction({
+        index: item.index,
+        action,
+        data: actionData,
+        template,
+      });
+    onClose();
+  }, [value, onSelectAction, item.index, action, template]);
+
+  return (
+    <>
+      <SelectActionCard onPress={onPress} action={value} title={title} />
+      <ModalCustom
+        isVisible={visible}
+        onBackButtonPress={onClose}
+        onBackdropPress={onClose}
+      >
+        <View style={styles.popoverStyle}>
+          <View>
+            <Text type="H4" bold style={styles.textWithLine}>
+              {t('enter_parameters')}
+            </Text>
+            <View style={styles.modalContent}>
+              <_TextInput
+                wrapStyle={styles.wrapInputStyle}
+                value={value}
+                onChange={onInputChange}
+              />
+            </View>
+            <View style={styles.wrapButton}>
+              <TouchableOpacity
+                onPress={onClose}
+                accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_CANCEL}
+              >
+                <Text type="H4" bold color={Colors.Primary}>
+                  {t('cancel')}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={onPressDone}
+                accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_DONE}
+                disabled={!value}
+              >
+                <Text
+                  type="H4"
+                  bold
+                  color={!!value ? Colors.Primary : Colors.Gray}
+                >
+                  {t('done')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </ModalCustom>
+    </>
+  );
+};
+
+export default memo(TextBoxActionTemplate);

package/src/commons/OneTapTemplate/TextBoxActionTemplateStyles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  textWithLine: {
+    padding: 16,
+  },
+  modalContent: {
+    paddingBottom: 26,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapInputStyle: {
+    width: '90%',
+  },
+  wrapButton: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+});

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import SelectActionCard from '../../SelectActionCard';
+import _TextInput from '../../Form/TextInput';
+import SliderRangeActionTemplate from '../SliderRangeActionTemplate';
+
+const mockOnSelectAction = jest.fn();
+
+const wrapComponent = (item, params = {}) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SliderRangeActionTemplate
+      item={item}
+      onSelectAction={mockOnSelectAction}
+      {...params}
+    />
+  </SCProvider>
+);
+
+describe('Test SliderRangeActionTemplate', () => {
+  let tree;
+  let data = {
+    title: 'Slider range',
+    template: 'slider_range_template',
+    configuration: {
+      keep_track_config: true,
+      config: { id: 1023 },
+      action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+    },
+  };
+
+  beforeEach(() => {
+    mockOnSelectAction.mockClear();
+  });
+
+  const renderOptions = async (params = {}) => {
+    await act(async () => {
+      tree = await create(wrapComponent(data, params));
+    });
+    const instance = tree.root;
+    const card = instance.findByType(SelectActionCard);
+    await act(async () => {
+      card.props.onPress();
+    });
+    return instance;
+  };
+
+  it('Test onPress Done', async () => {
+    const instance = await renderOptions();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).toHaveBeenCalledWith({
+      action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+      data: { value: '123' },
+      index: undefined,
+      template: 'slider_range_template',
+    });
+  });
+
+  it('Test onPress Cancel', async () => {
+    const instance = await renderOptions();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('');
+    });
+    const touchableDone = instance.find(
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    expect(touchableDone.props.disabled).toBeTruthy();
+
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel === AccessibilityLabel.BUTTON_CANCEL &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import SelectActionCard from '../../SelectActionCard';
+import TextBoxActionTemplate from '../TextBoxActionTemplate';
+import _TextInput from '../../Form/TextInput';
+
+const mockOnSelectAction = jest.fn();
+
+const wrapComponent = (item, params = {}) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TextBoxActionTemplate
+      item={item}
+      onSelectAction={mockOnSelectAction}
+      {...params}
+    />
+  </SCProvider>
+);
+
+describe('Test TextBoxActionTemplate', () => {
+  let tree;
+  let data = {
+    title: '',
+    template: 'TextBoxTemplate',
+    configuration: {
+      keep_track_config: true,
+      config: { id: 1023 },
+      action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+    },
+  };
+
+  beforeEach(() => {
+    mockOnSelectAction.mockClear();
+  });
+
+  const renderOptions = async (params = {}) => {
+    await act(async () => {
+      tree = await create(wrapComponent(data, params));
+    });
+    const instance = tree.root;
+    const card = instance.findByType(SelectActionCard);
+    await act(async () => {
+      card.props.onPress();
+    });
+    return instance;
+  };
+
+  it('Test onPress Done', async () => {
+    const instance = await renderOptions();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).toHaveBeenCalledWith({
+      action: 'b498234c-6c1a-452d-a1d1-87a314c20528',
+      data: { value: '123' },
+      index: undefined,
+      template: 'TextBoxTemplate',
+    });
+  });
+
+  it('Test onPress Cancel', async () => {
+    const instance = await renderOptions();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('');
+    });
+    const touchableDone = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_DONE &&
+        item.type === TouchableOpacity
+    );
+    expect(touchableDone.props.disabled).toBeTruthy();
+
+    const touchableOpacity = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_CANCEL &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(mockOnSelectAction).not.toHaveBeenCalled();
+  });
+});

package/src/configs/AccessibilityLabel.js

@@ -497,6 +497,7 @@ export default {
   CONNECTED_GATEWAY_UNIT_NAME: 'CONNECTED_GATEWAY_UNIT_NAME',
   CONNECTED_GATEWAY_CHIP_NAME: 'CONNECTED_GATEWAY_CHIP_NAME',
   BUTTON_DONE: 'BUTTON_DONE',
+  BUTTON_CANCEL: 'BUTTON_CANCEL',
 
   // Add New Device
   ADD_NEW_DEVICE_ADD: 'ADD_NEW_DEVICE_ADD',
@@ -561,7 +562,8 @@ export default {
   NUMBER_ACTION_DOWN: 'NUMBER_ACTION_DOWN',
   //TestBoxTemplate
   TEXT_BOX_BUTTON_EDIT: 'TEXT_BOX_BUTTON_EDIT',
-
+  TEXT_BOX_BUTTON_CANCEL: 'TEXT_BOX_BUTTON_CANCEL',
+  TEXT_BOX_BUTTON_DONE: 'TEXT_BOX_BUTTON_DONE',
   // OnOffButtonAction
   ON_OFF_BUTTON_ACTION_TITLE: 'ON_OFF_BUTTON_ACTION_TITLE',
 

package/src/screens/Automate/AddNewAction/ChooseAction.js

@@ -13,6 +13,8 @@ import Routes from '../../../utils/Route';
 import NewActionWrapper from './NewActionWrapper';
 import moment from 'moment';
 import { ToastBottomHelper } from '../../../utils/Utils';
+import TextBoxActionTemplate from '../../../commons/OneTapTemplate/TextBoxActionTemplate';
+import SliderRangeActionTemplate from '../../../commons/OneTapTemplate/SliderRangeActionTemplate';
 
 const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
   item.index = index;
@@ -58,6 +60,24 @@ const RenderActionItem = ({ device, item, handleOnSelectAction, index, t }) => {
           onSelectAction={handleOnSelectAction}
         />
       );
+    case 'slider_range_template':
+      return (
+        <SliderRangeActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
+    case 'TextBoxTemplate':
+      return (
+        <TextBoxActionTemplate
+          key={item.id}
+          device={device}
+          item={item}
+          onSelectAction={handleOnSelectAction}
+        />
+      );
     default:
       ToastBottomHelper.error(
         t('template_not_supported', { template: item.template }),

package/src/utils/I18n/translations/en.js

@@ -1469,4 +1469,6 @@ export default {
   when_value_is: 'When value is',
   template_not_supported: '"{template}" not yet supported',
   invited_user: 'Invited user {user}',
+  enter_value: 'Enter value',
+  enter_parameters: 'Enter parameters',
 };

package/src/utils/I18n/translations/vi.js

@@ -1479,4 +1479,6 @@ export default {
   when_value_is: 'Khi giá trị là',
   template_not_supported: '"{template}" chưa được hỗ trợ',
   invited_user: 'Đã mời người dùng {user}',
+  enter_value: 'Nhập giá trị',
+  enter_parameters: 'Nhập thông số',
 };