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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.95",
+  "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/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}