@eohjsc/react-native-smart-city 0.3.80 → 0.3.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.80",
+  "version": "0.3.82",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -162,7 +162,7 @@
     "react-native-credit-card-input": "^0.4.1",
     "react-native-dash": "^0.0.11",
     "react-native-deep-linking": "^2.2.0",
-    "react-native-device-info": "^5.6.3",
+    "react-native-device-info": "^10.3.0",
     "react-native-draggable-flatlist": "^2.6.2",
     "react-native-fast-image": "^8.3.2",
     "react-native-geocoder": "^0.5.0",

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

@@ -0,0 +1,63 @@
+import React, { memo, useCallback, useState } from 'react';
+import { Switch, View } from 'react-native';
+
+import Text from '../../Text';
+import { Colors } from '../../../configs';
+import styles from './OnOffButtonTemplateStyle';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+
+const SwitchButtonTemplate = memo(
+  ({ isOn, triggerAction, actionGroup = {}, isLight = false, doAction }) => {
+    const [_isOn, setIsOn] = useState(isOn);
+
+    const { configuration = {}, id } = actionGroup;
+    const {
+      action_off_data,
+      action_on_data,
+      text_on,
+      text_off,
+      color_on,
+      color_off,
+    } = configuration;
+
+    const onChangeSwitch = useCallback(() => {
+      if (_isOn) {
+        setIsOn(false);
+        doAction(action_off_data, null);
+        return;
+      }
+      doAction(action_on_data, null);
+      setIsOn(true);
+    }, [action_off_data, action_on_data, doAction, _isOn]);
+
+    return (
+      <>
+        <View style={styles.barrierControlContainer}>
+          <Switch
+            trackColor={{ false: color_off, true: color_on }}
+            ios_backgroundColor={_isOn ? color_on : color_off}
+            onValueChange={onChangeSwitch}
+            value={_isOn}
+          />
+          <Text
+            style={[
+              styles.textBig,
+              { color: _isOn ? Colors.Gray8 : Colors.Gray6 },
+            ]}
+            accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${id}`}
+          >
+            {_isOn ? text_on : text_off}
+          </Text>
+        </View>
+
+        {!!actionGroup.title && !isLight && (
+          <Text type="H3" semibold center>
+            {actionGroup.title}
+          </Text>
+        )}
+      </>
+    );
+  }
+);
+
+export default SwitchButtonTemplate;

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

@@ -1,8 +1,16 @@
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
+
 import OnOffTemplate from '../OnOffTemplate';
 import { mockSCStore } from '../../../context/mockStore';
 import { SCProvider } from '../../../context';
+import Text from '../../Text';
+import { useConfigGlobalState } from '../../../iot/states';
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
 
 const wrapComponent = (actionGroup, mockDoAction) => (
   <SCProvider initState={mockSCStore({})}>
@@ -49,45 +57,79 @@ describe('Test OneBigButtonTemplate', () => {
       action_off_data: action_off_data,
       icon_off: 'caret-up',
       text_off: 'OFF',
+      config: 1,
     },
+    template: 'on_off_button_action_template',
+    id: 1,
   };
   let wrapper;
 
-  const assertRender = async () => {
+  beforeEach(() => {
+    useConfigGlobalState.mockClear();
+  });
+
+  const assertRender = async (textValue) => {
     const mockDoAction = jest.fn();
 
     await act(async () => {
       wrapper = create(wrapComponent(actionGroup, mockDoAction));
     });
 
-    const renderJson = wrapper.toJSON();
-
-    expect(renderJson[1].props?.visible).toEqual(false);
-    expect(renderJson[1]?.type).toEqual('Modal');
+    const instance = wrapper.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts[0].props.children).toEqual(textValue);
   };
 
   it('render state on', async () => {
-    await assertRender(true, 'ON');
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 1,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender('ON');
   });
 
   it('render state off', async () => {
-    await assertRender(false, 'OFF');
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 0,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender('OFF');
   });
 
-  const assertActionCall = async (state, action_data) => {
+  const assertActionCall = async (state, action_data, data2) => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: state,
+        },
+      },
+      jest.fn(),
+    ]);
     const mockDoAction = jest.fn();
     await act(async () => {
       wrapper = create(wrapComponent(actionGroup, mockDoAction));
     });
-
-    expect(mockDoAction).not.toHaveBeenCalled();
+    const instance = wrapper.root;
+    const button = instance.findByType(TouchableOpacity);
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(mockDoAction).toHaveBeenCalledWith(action_data, data2);
   };
 
   it('action state on', async () => {
-    await assertActionCall(true, action_off_data);
+    await assertActionCall(true, action_on_data, { state: 0, value: 0 });
   });
 
   it('action state off', async () => {
-    await assertActionCall(false, action_on_data);
+    await assertActionCall(false, action_off_data, { state: 1, value: 1 });
   });
 });

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+
+import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../context';
+import SwitchButtonTemplate from '../OnOffTemplate/SwitchButtonTemplate';
+
+const wrapComponent = (actionGroup, mockDoAction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SwitchButtonTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+  </SCProvider>
+);
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useFocusEffect: jest.fn(),
+  };
+});
+
+describe('Test SwitchButtonTemplate', () => {
+  const action_on_data = {
+    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',
+  };
+
+  const action_off_data = {
+    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',
+  };
+  const actionGroup = {
+    configuration: {
+      action_on: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
+      action_on_data: action_on_data,
+      icon_on: 'caret-up',
+      text_on: 'ON',
+      action_off: '5ed1d4dc-a905-47cd-b0c9-f979644bd21b',
+      action_off_data: action_off_data,
+      icon_off: 'caret-up',
+      text_off: 'OFF',
+    },
+  };
+  let wrapper;
+
+  const assertRender = async () => {
+    const mockDoAction = jest.fn();
+
+    await act(async () => {
+      wrapper = create(wrapComponent(actionGroup, mockDoAction));
+    });
+
+    const renderJson = wrapper.toJSON();
+    expect(renderJson[1].props?.visible).toEqual(false);
+    expect(renderJson[1]?.type).toEqual('Modal');
+  };
+
+  it('render state on', async () => {
+    await assertRender(true, 'ON');
+  });
+
+  it('render state off', async () => {
+    await assertRender(false, 'OFF');
+  });
+
+  const assertActionCall = async (state, action_data) => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = create(wrapComponent(actionGroup, mockDoAction));
+    });
+
+    expect(mockDoAction).not.toHaveBeenCalled();
+  };
+
+  it('action state on', async () => {
+    await assertActionCall(true, action_off_data);
+  });
+
+  it('action state off', async () => {
+    await assertActionCall(false, action_on_data);
+  });
+});

package/src/commons/ActionGroup/index.js

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

package/src/commons/Device/ProgressBar/__test__/ProgressBar.test.js

@@ -0,0 +1,49 @@
+/* eslint-disable promise/prefer-await-to-callbacks */
+import React from 'react';
+import { useSelector } from 'react-redux';
+import renderer, { act } from 'react-test-renderer';
+
+import ProgressBar from '..';
+import Text from '../../../Text';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+const wrapComponent = (item, data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ProgressBar item={item} data={data} />
+  </SCProvider>
+);
+
+describe('Test ProgressBar', () => {
+  let tree;
+  beforeEach(() => {
+    const localState = {
+      language: 'en',
+    };
+    useSelector.mockImplementation((cb) => {
+      return cb(localState);
+    });
+  });
+
+  it('render ProgressBar', async () => {
+    const item = {
+      label: 'Value bar',
+      configuration: { max_value: 100 },
+      value: 8,
+    };
+    const data = [{ value: 10 }];
+    await act(async () => {
+      tree = renderer.create(wrapComponent(item, data));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts[0].props.children).toBe('Value bar');
+    expect(texts[1].props.children).toEqual(['Max value', ': ', 100]);
+    expect(texts[2].props.children).toEqual([10, '%']);
+  });
+});

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

@@ -0,0 +1,45 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+
+import { Colors } from '../../../configs';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Text from '../../Text';
+import styles from './styles';
+
+const ProgressBar = memo(({ data = [], item }) => {
+  const t = useTranslations();
+
+  const maxValue = useMemo(() => {
+    return Number(item?.configuration?.max_value) || 60;
+  }, [item?.configuration?.max_value]);
+  const value = data.length ? data[0].value : 0;
+  const percent = value / maxValue; // a number between 0 and 1
+
+  return (
+    <View style={styles.container}>
+      <Text size={16} style={styles.textLabel}>
+        {item?.label || 'Label'}
+      </Text>
+
+      <Text size={16} style={styles.textMaxValue}>
+        {t('max_value')}: {maxValue}
+      </Text>
+
+      <View style={styles.wrapProgressBar}>
+        <Progress.Bar
+          progress={percent}
+          height={40}
+          width={200}
+          color={Colors.Blue16}
+          unfilledColor={Colors.Blue15}
+          borderWidth={0}
+          borderRadius={10}
+        />
+        <Text style={styles.textValue}>{value}%</Text>
+      </View>
+    </View>
+  );
+});
+
+export default ProgressBar;

package/src/commons/Device/ProgressBar/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column', //column direction
+    marginRight: 60,
+    marginLeft: 60,
+    borderWidth: 1,
+    padding: 12,
+    borderRadius: 8,
+    borderColor: Colors.Gray4,
+  },
+  textLabel: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  textMaxValue: {
+    textAlign: 'right',
+  },
+  wrapProgressBar: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 8,
+  },
+  textValue: {
+    marginLeft: 8,
+  },
+});

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import PopoverComponent from '../index';
+import Popover from 'react-native-popover-view';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <PopoverComponent {...data} />
+  </SCProvider>
+);
+const mockOnCloseComplete = jest.fn();
+describe('Test PopoverComponent', () => {
+  let tree;
+
+  it('Test Popover', async () => {
+    await act(async () => {
+      tree = await create(
+        wrapComponent({ isVisible: true, onCloseComplete: mockOnCloseComplete })
+      );
+    });
+    const instance = tree.root;
+    const popover = instance.findByType(Popover);
+    await act(async () => {
+      popover.props.onCloseComplete();
+    });
+    expect(popover.props.isVisible).toEqual(true);
+    expect(mockOnCloseComplete).toBeCalled();
+  });
+});

package/src/configs/Colors.js

@@ -120,6 +120,7 @@ export const Colors = {
   Blue13: '#E2F0F8',
   Blue14: '#D9ECFF',
   Blue15: '#99CCFF',
+  Blue16: '#0059B2',
 
   //Range Volcano:
   Volcano3: '#FFBB96',