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

package/README.md

@@ -132,7 +132,7 @@ const MyScreen = () => {
 };
 ```
 
-3. Trigger quick action
+3. Trigger quick action 
 
 ```javascript
 import React from 'react';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.94",
+  "version": "0.4.96",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -196,13 +196,13 @@
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",
-    "react-native-udp": "^4.1.7",
+    "react-native-udp": "4.1.3",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.41",
     "react-native-webview": "11.22.7",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
-    "react-native-wifi-reborn": "^4.11.0",
+    "react-native-wifi-reborn": "4.5.0",
     "react-navigation": "^2.2.0",
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -91,10 +91,7 @@ const SliderRangeTemplate = memo(
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4" style={styles.LeftTextBrightness}>
-          {item?.title || item?.label || t('brightness')}
-        </Text>
-
+        <Text type="H4">{item?.title || item?.label || t('brightness')}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import Text from '../../commons/Text';
+import { AlertAction } from '../../commons';
+import { useDropdownAction } from './hooks/useDropdownAction';
+import { useConfigGlobalState } from '../../iot/states';
+import styles from './TextBoxTemplateStyle';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import _TextInput from '../Form/TextInput';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
+
+const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
+  const t = useTranslations();
+  const { label, configuration } = item;
+  const { action_data, config } = configuration;
+  const [configValues] = useConfigGlobalState('configValues');
+  const [value, setValue] = useState();
+
+  const { stateAlert, hideAlertAction, onShowAlert } = useDropdownAction();
+
+  const onDone = useCallback(() => {
+    doAction(action_data, JSON.stringify({ value: value }));
+    hideAlertAction();
+  }, [doAction, action_data, value, hideAlertAction]);
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+  return (
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
+      <View>
+        <Text type="H4">{label}</Text>
+      </View>
+
+      <View style={styles.iconAndText}>
+        <Text type="H4">{configValues[config.id]?.value}</Text>
+        <TouchableOpacity
+          style={styles.iconAndTextOption}
+          onPress={onShowAlert}
+          accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
+        >
+          <IconOutline name="edit" size={20} />
+        </TouchableOpacity>
+        <AlertAction
+          visible={stateAlert.visible}
+          hideModal={hideAlertAction}
+          title={t('change')}
+          message={stateAlert.message}
+          leftButtonTitle={stateAlert.leftButton}
+          leftButtonClick={hideAlertAction}
+          rightButtonTitle={stateAlert.rightButton}
+          rightButtonClick={onDone}
+          rightDisabled={!value}
+        >
+          <_TextInput
+            wrapStyle={styles.wrapInputStyle}
+            value={value}
+            onChange={onInputChange}
+          />
+        </AlertAction>
+      </View>
+    </View>
+  );
+};
+
+export default TextBoxTemplate;

package/src/commons/ActionGroup/TextBoxTemplateStyle.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrapOrderItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+  },
+  wrap: {
+    padding: 16,
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderRadius: 10,
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  iconAndText: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconAndTextOption: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  wrapInputStyle: {
+    marginRight: 14,
+    paddingLeft: 14,
+  },
+});

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { AlertAction } from '../..';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+import TextBoxTemplate from '../TextBoxTemplate';
+import _TextInput from '../../Form/TextInput';
+import { Colors } from '../../../configs';
+
+const wrapComponent = (item, mockDoAction, isWidgetOrder = false) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TextBoxTemplate
+      item={item}
+      doAction={mockDoAction}
+      isWidgetOrder={isWidgetOrder}
+    />
+  </SCProvider>
+);
+
+jest.mock('../../../iot/Monitor');
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{ 5: { value: 2 } }, null],
+}));
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useFocusEffect: jest.fn(),
+  };
+});
+
+describe('Test OptionsDropdownActionTemplate', () => {
+  const actionData = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: true,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: false,
+    googlehome_actions: [],
+    icon: 'caret-up',
+    id: 20,
+    key: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
+  };
+
+  let displayItem;
+  let sensor;
+  let wrapper;
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    displayItem = {
+      label: 'label',
+      configuration: {
+        title: 'Fan Speed',
+        action_data: actionData,
+        config: { id: 5 },
+        icon: 'slack',
+      },
+    };
+    sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+  });
+
+  it('render template', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction));
+    });
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
+    expect(views[0].props.style).toEqual({
+      padding: 16,
+      marginHorizontal: 16,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: Colors.Gray4,
+      borderRadius: 10,
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+    });
+    const buttonEdit = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.TEXT_BOX_BUTTON_EDIT &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await buttonEdit.props.onPress();
+    });
+    const alertAction = instance.findByType(AlertAction);
+    expect(alertAction.props.visible).toBeTruthy();
+    expect(alertAction.props.rightDisabled).toBeTruthy();
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      await textInput.props.onChange('123');
+    });
+    expect(alertAction.props.rightDisabled).toBeFalsy();
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionData,
+      JSON.stringify({ value: '123' })
+    );
+  });
+  it('render template isWidgetOrder change position', async () => {
+    const mockDoAction = jest.fn();
+    sensor.is_managed_by_backend = true;
+    await act(async () => {
+      wrapper = await create(wrapComponent(displayItem, mockDoAction, true));
+    });
+    const instance = wrapper.root;
+    const views = instance.findAllByType(View);
+
+    expect(views[0].props.style).toEqual({
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+    });
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -13,6 +13,7 @@ import SliderRangeTemplate from './SliderRangeTemplate';
 import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
 import TwoButtonTemplate from './TwoButtonTemplate';
 import SwitchButtonTemplate from './OnOffTemplate/SwitchButtonTemplate';
+import TextBoxTemplate from './TextBoxTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -46,6 +47,8 @@ export const getActionComponent = (template) => {
       return TwoButtonTemplate;
     case 'switch_button_action_template':
       return SwitchButtonTemplate;
+    case 'TextBoxTemplate':
+      return TextBoxTemplate;
     default:
       return null;
   }

package/src/commons/AlertAction/index.js

@@ -23,6 +23,7 @@ const AlertAction = ({
   boxLeftButtonStyle,
   boxRightButtonStyle,
   transY = 0,
+  rightDisabled = false,
 }) => {
   const [keyboardAnim] = useState(new Animated.Value(0));
 
@@ -82,6 +83,7 @@ const AlertAction = ({
             accessibilityLabelPrefix={accessibilityLabelPrefix}
             wrapStyle={styles.wrapViewButtonStyle}
             disableKeyBoardAnimated
+            rightDisabled={rightDisabled}
           />
         </View>
       </Animated.View>

package/src/configs/AccessibilityLabel.js

@@ -559,6 +559,8 @@ export default {
   NUMBER_UP_DOWN_ACTION_DONE: 'NUMBER_UP_DOWN_ACTION_DONE',
   NUMBER_ACTION_UP: 'NUMBER_ACTION_UP',
   NUMBER_ACTION_DOWN: 'NUMBER_ACTION_DOWN',
+  //TestBoxTemplate
+  TEXT_BOX_BUTTON_EDIT: 'TEXT_BOX_BUTTON_EDIT',
 
   // OnOffButtonAction
   ON_OFF_BUTTON_ACTION_TITLE: 'ON_OFF_BUTTON_ACTION_TITLE',

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

@@ -43,7 +43,9 @@ const NewActionWrapper = ({ name, children, canNext, onNext, nextTitle }) => {
         isShowSeparator
         wrapTitleStyle={styles.wrapTitleStyle}
       />
-      <KeyboardAwareScrollView>{children}</KeyboardAwareScrollView>
+      <KeyboardAwareScrollView contentContainerStyle={styles.scroll}>
+        {children}
+      </KeyboardAwareScrollView>
       {hasNext && (
         <BottomButtonView
           style={styles.bottomButtonView}

package/src/screens/Automate/AddNewAction/Styles/SelectActionStyles.js

@@ -81,4 +81,7 @@ export default StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
   },
+  scroll: {
+    paddingBottom: 200,
+  },
 });

package/src/screens/ChangePosition/index.js

@@ -61,7 +61,7 @@ const ChangePosition = () => {
             <View style={styles.disableSensor} />
             <View style={styles.widgetOrder}>
               <SensorDisplayItem
-                isWidgetOrder
+                isWidgetOrder={true}
                 item={item}
                 sensor={sensor}
                 offsetTitle={offsetTitle}

package/src/screens/Device/__test__/detail.test.js

@@ -18,14 +18,14 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import Routes from '../../../utils/Route';
 import api from '../../../utils/Apis/axios';
-import { watchMultiConfigs } from '../../../iot/Monitor';
+import { useWatchConfigs } from '../../../hooks/IoT';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-jest.mock('../../../iot/Monitor', () => {
+jest.mock('../../../hooks/IoT', () => {
   return {
-    ...jest.requireActual('../../../iot/Monitor'),
-    watchMultiConfigs: jest.fn(),
+    ...jest.requireActual('../../../hooks/IoT'),
+    useWatchConfigs: jest.fn(),
   };
 });
 
@@ -195,7 +195,7 @@ describe('test DeviceDetail', () => {
     useLayoutEffectSpy.mockImplementation(() => setState);
     mock.reset();
     mockedNavigate.mockClear();
-    watchMultiConfigs.mockReset();
+    useWatchConfigs.mockReset();
   });
 
   it('render DeviceDetail render SensorDisplayItem', async () => {
@@ -810,7 +810,7 @@ describe('test DeviceDetail', () => {
         el.props.accessibilityLabel === AccessibilityLabel.SENSOR_DISPLAY_ITEM
     );
     expect(sensorDisplayItem.length).toEqual(1);
-    expect(watchMultiConfigs).toHaveBeenCalledWith([]);
+    expect(useWatchConfigs).toHaveBeenCalledWith([]);
   });
 
   it('watch action config', async () => {
@@ -838,7 +838,7 @@ describe('test DeviceDetail', () => {
       tree = await create(wrapComponent(store, account, route));
     });
 
-    expect(watchMultiConfigs).toHaveBeenCalledWith([]);
+    expect(useWatchConfigs).toHaveBeenCalledWith([]);
   });
 
   it('watch stages grid action config', async () => {
@@ -869,6 +869,6 @@ describe('test DeviceDetail', () => {
       tree = await create(wrapComponent(store, account, route));
     });
 
-    expect(watchMultiConfigs).toHaveBeenCalledWith([]);
+    expect(useWatchConfigs).toHaveBeenCalledWith([]);
   });
 });

package/src/screens/Device/components/SensorDisplayItem.js

@@ -170,6 +170,7 @@ export const SensorDisplayItem = ({
     case 'slider_range_template':
     case 'two_button_action_template':
     case 'switch_button_action_template':
+    case 'TextBoxTemplate':
       return (
         <ActionGroup
           accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}

package/src/screens/Device/detail.js

@@ -32,6 +32,7 @@ import {
   useBluetoothDeviceConnected,
   useHomeAssistantDeviceConnected,
   useEoHBackendDeviceConnected,
+  useWatchConfigs,
 } from '../../hooks/IoT';
 import { useDisconnectedDevice } from './hooks/useDisconnectedDevice';
 import { useDeviceWatchConfigControl } from './hooks/useDeviceWatchConfigControl';
@@ -59,7 +60,6 @@ import { useReceiveNotifications } from '../../hooks';
 import useChipJsonConfiguration, {
   useConnectChipMqtt,
 } from '../../hooks/useMqtt';
-import { watchMultiConfigs } from '../../iot/Monitor';
 
 const DeviceDetail = ({ route }) => {
   const configIdsTemp = useRef([]);
@@ -67,9 +67,7 @@ const DeviceDetail = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
   const token = useSCContextSelector((state) => state.auth.account.token);
-  const { isLockWhenPickColor, appState } = useSCContextSelector(
-    (state) => state.app
-  );
+  const { isLockWhenPickColor } = useSCContextSelector((state) => state.app);
 
   const { setAction } = useContext(SCContext);
   const [offsetTitle, setOffsetTitle] = useState(1);
@@ -612,6 +610,8 @@ const DeviceDetail = ({ route }) => {
     }, [display.items, isNetworkConnected, sensor, mqttConfigs])
   );
 
+  useWatchConfigs(configIdsTemp.current);
+
   const isShowEmergencyResolve =
     display.items.filter(
       (item) =>
@@ -719,10 +719,6 @@ const DeviceDetail = ({ route }) => {
     SCConfig.setCurrentSensorDisplay(sensor);
   }, [sensor]);
 
-  useEffect(() => {
-    appState === 'active' && watchMultiConfigs(configIdsTemp.current);
-  }, [appState]);
-
   const shouldRender =
     loading.displayTemplate === false &&
     loading.isConnected === false &&