@eohjsc/react-native-smart-city 0.3.81 → 0.3.83

package/package.json

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

@@ -15,6 +15,7 @@ export default StyleSheet.create({
   },
   slider: {
     width: 131,
+    transform: [{ scaleY: 2 }],
   },
   trackSlider: {
     height: 8,

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/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/Device/RainningSensor/CurrentRainSensor.js

@@ -6,6 +6,8 @@ import { Colors } from '../../../configs';
 import { CircleView } from '../../../commons';
 import Text from '../../../commons/Text';
 import IconComponent from '../../IconComponent';
+import images from '../../../configs/Images';
+import FImage from '../../FImage';
 
 const CurrentRainSensor = memo(({ data = [] }) => {
   const item = data.length
@@ -31,9 +33,14 @@ const CurrentRainSensor = memo(({ data = [] }) => {
           start={{ x: 1, y: 0 }}
           end={{ x: 1, y: 1 }}
         />
-        <IconComponent
-          icon={icon_kit_data?.icon || icon || 'CheckCircleOutlined'}
-        />
+        {icon_kit_data?.icon || icon ? (
+          <IconComponent icon={icon_kit_data?.icon || icon} />
+        ) : (
+          <FImage
+            source={images.activeCurrentSensor}
+            style={styles.iconDefault}
+          />
+        )}
         <Text style={styles.text}>{text}</Text>
       </CircleView>
     </View>
@@ -68,4 +75,8 @@ const styles = StyleSheet.create({
     lineHeight: 32,
     fontSize: 24,
   },
+  iconDefault: {
+    width: 37,
+    height: 37,
+  },
 });

package/src/commons/Device/RainningSensor/__test__/CurrentRainSensor.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { View } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import CurrentRainSensor from '../CurrentRainSensor';
+import FImage from '../../../FImage';
+import IconComponent from '../../../IconComponent';
 
 describe('Test CurrentRainSensor', () => {
   let tree;
@@ -21,7 +23,7 @@ describe('Test CurrentRainSensor', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(2);
+    expect(Views).toHaveLength(3);
   });
 
   it('render CurrentRainSensor raining: true', async () => {
@@ -40,7 +42,7 @@ describe('Test CurrentRainSensor', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(2);
+    expect(Views).toHaveLength(3);
   });
 
   it('render CurrentRainSensor data empty', async () => {
@@ -49,6 +51,44 @@ describe('Test CurrentRainSensor', () => {
     });
     const instance = tree.root;
     const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(2);
+    expect(Views).toHaveLength(3);
+  });
+  it('render CurrentRainSensor default icon', async () => {
+    const data = [
+      {
+        evaluate: {
+          text: 'default',
+          backgroundColor: '#FEFFE6',
+          borderColor: '#FADB14',
+          icon_kit_data: '',
+          icon: '',
+        },
+      },
+    ];
+    await act(async () => {
+      tree = renderer.create(<CurrentRainSensor data={data} />);
+    });
+    const instance = tree.root;
+    const fimage = instance.findAllByType(FImage);
+    expect(fimage).toHaveLength(1);
+  });
+  it('render CurrentRainSensor has icon kit and icon', async () => {
+    const data = [
+      {
+        evaluate: {
+          text: 'default',
+          backgroundColor: '#FEFFE6',
+          borderColor: '#FADB14',
+          icon_kit_data: 'http:s//',
+          icon: 'http:s//',
+        },
+      },
+    ];
+    await act(async () => {
+      tree = renderer.create(<CurrentRainSensor data={data} />);
+    });
+    const instance = tree.root;
+    const iconComponent = instance.findAllByType(IconComponent);
+    expect(iconComponent).toHaveLength(1);
   });
 });

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',

package/src/configs/Constants.js

@@ -260,6 +260,7 @@ export const NOTIFICATION_TYPES = {
   NOTIFY_REMOVE_SUB_UNIT: 'NOTIFY_REMOVE_SUB_UNIT',
   NOTIFY_REMOVE_DEVICE: 'NOTIFY_REMOVE_DEVICE',
   NOTIFY_EMERGENCY: 'NOTIFY_EMERGENCY',
+  NOTIFY_UPGRADE_SYSTEM: 'NOTIFY_UPGRADE_SYSTEM',
   NOTIFY_CHANGE_UNIT_OLD_OWNER: 'NOTIFY_CHANGE_UNIT_OLD_OWNER',
   NOTIFY_CHANGE_UNIT_NEW_OWNER: 'NOTIFY_CHANGE_UNIT_NEW_OWNER',
   AIR_QUALITY: 'AIR_QUALITY',