@eohjsc/react-native-smart-city 0.7.7 → 0.7.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -118,8 +118,8 @@
     "lint-staged": "^12.4.1",
     "lodash": "^4.17.19",
     "lottie-react-native": "^6.7.2",
-    "metro-react-native-babel-preset": "0.73.9",
     "md5": "^2.3.0",
+    "metro-react-native-babel-preset": "0.73.9",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "node-html-parser": "^2.0.2",
@@ -155,7 +155,7 @@
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^2.17.1",
     "react-native-get-location": "^2.0.0",
-    "react-native-image-crop-picker": "^0.37.2",
+    "react-native-image-crop-picker": "^0.41.4",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import * as Progress from 'react-native-progress';
+import LabelValue from '..';
+import Text from '../../../Text';
+
+describe('Test LabelValue', () => {
+  let tree;
+  let item;
+  let data;
+  beforeEach(() => {
+    item = {
+      label: 'Distance',
+      configuration: {
+        align: 'align_left',
+        color: '#eb144c',
+        min_value: 0,
+        max_value: 100,
+        status_bar: true,
+      },
+    };
+    data = [{ value: 10, unit: 'm' }];
+  });
+  it('render LabelValue', async () => {
+    await act(async () => {
+      tree = await renderer.create(
+        <LabelValue item={item} data={data} isWidgetOrder={false} />
+      );
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    const progressBar = instance.findByType(Progress.Bar);
+
+    expect(texts[0].props.children).toEqual('Distance');
+    expect(texts[1].props.children).toEqual('10 m');
+    expect(texts[1].props.style.alignSelf).toEqual('flex-start');
+    expect(progressBar.props.color).toEqual('#eb144c');
+    expect(progressBar.props.progress).toEqual(0.1);
+  });
+  it('render LabelValue with invalid data, align right', async () => {
+    item.configuration.align = 'align_right';
+    await act(async () => {
+      tree = await renderer.create(
+        <LabelValue item={item} isWidgetOrder={false} />
+      );
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    const progressBar = instance.findByType(Progress.Bar);
+
+    expect(texts[0].props.children).toEqual('Distance');
+    expect(texts[1].props.children).toEqual('-- ');
+    expect(texts[1].props.style.alignSelf).toEqual('flex-end');
+    expect(progressBar.props.color).toEqual('#eb144c');
+    expect(progressBar.props.progress).toEqual(0);
+  });
+  it('render LabelValue with status bar false, align middle', async () => {
+    item.configuration.status_bar = false;
+    item.configuration.align = 'align_middle';
+    await act(async () => {
+      tree = await renderer.create(
+        <LabelValue item={item} data={data} isWidgetOrder={true} />
+      );
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    const progressBar = instance.findAllByType(Progress.Bar);
+
+    expect(texts[0].props.children).toEqual('Distance');
+    expect(texts[1].props.children).toEqual('10 m');
+    expect(texts[1].props.style.alignSelf).toEqual('center');
+    expect(progressBar.length).toEqual(0);
+  });
+});

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

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+
+import { Colors } from '../../../configs';
+import Text from '../../Text';
+import styles from './styles';
+
+const LabelValue = memo(({ data = [], item, isWidgetOrder }) => {
+  const {
+    configuration: { align, color, max_value, min_value, status_bar },
+    label,
+  } = item;
+  const { value, unit = '' } = data.length ? data[0] : {};
+  const percent = ((value ?? min_value) - min_value) / (max_value - min_value);
+  const alignValueText =
+    align === 'align_middle'
+      ? 'center'
+      : align === 'align_left'
+      ? 'flex-start'
+      : 'flex-end';
+
+  return (
+    <View style={[styles.container, isWidgetOrder && styles.wrapOrderItem]}>
+      <Text type="H3" semibold color={Colors.Gray9} style={styles.textLabel}>
+        {label}
+      </Text>
+      <Text
+        bold
+        type="H1"
+        style={{ ...styles.textValue, alignSelf: alignValueText }}
+      >
+        {`${value ?? '--'} ${unit}`}
+      </Text>
+      {!!status_bar && (
+        <Progress.Bar
+          style={styles.progressBar}
+          width={null}
+          height={8}
+          unfilledColor={Colors.Gray4}
+          progress={percent}
+          color={color}
+        />
+      )}
+    </View>
+  );
+});
+
+export default LabelValue;

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

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    marginLeft: 15,
+    marginRight: 15,
+    marginBottom: 10,
+    padding: 5,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    borderStyle: 'solid',
+  },
+  wrapOrderItem: {
+    marginBottom: 0,
+  },
+  textLabel: {
+    marginLeft: 8,
+    marginTop: 8,
+  },
+  textValue: {
+    margin: 8,
+  },
+  progressBar: {
+    borderWidth: 0,
+    borderRadius: 10,
+    marginHorizontal: 8,
+  },
+});

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

@@ -17,6 +17,7 @@ import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
 import MockAdapter from 'axios-mock-adapter';
 import api from '../../../utils/Apis/axios';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
+import LabelValue from '../../../commons/Device/LabelValue';
 
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
@@ -410,4 +411,25 @@ describe('Test SensorDisplayItem', () => {
       isWidgetOrder: undefined,
     });
   });
+  it('test render LabelValue', async () => {
+    const item = {
+      id: 10452,
+      order: 0,
+      template: 'LabelValue',
+      configuration: {},
+      is_configuration_ready: true,
+    };
+
+    const sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+
+    await act(async () => {
+      tree = await renderer.create(wrapComponent({ item, sensor }));
+    });
+    const instance = tree.root;
+    const displayItems = instance.findAllByType(LabelValue);
+    expect(displayItems).toHaveLength(1);
+  });
 });

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

@@ -8,6 +8,7 @@ import FlatListItems from '../../../commons/Device/FlatListItems';
 import FooterInfo from '../../../commons/Device/FooterInfo';
 import PMSensorIndicator from '../../../commons/Device/PMSensor/PMSensorIndicator';
 import ProgressBar from '../../../commons/Device/ProgressBar';
+import LabelValue from '../../../commons/Device/LabelValue';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import Compass from '../../../commons/Device/WindDirection/Compass';
@@ -216,6 +217,15 @@ export const SensorDisplayItem = ({
           isWidgetOrder={isWidgetOrder}
         />
       );
+    // use the same method to get data for circle_mini
+    case 'LabelValue':
+      return (
+        <LabelValue
+          data={getDataCircleMini(item)}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
     case 'value':
       switch (type || template) {
         case 'circle':