@eohjsc/react-native-smart-city 0.2.84 → 0.2.85

package/assets/images/brightness.svg

@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 3.90845C8.79471 3.90824 7.61636 4.26551 6.61406 4.93507C5.61177 5.60463 4.83056 6.55639 4.36924 7.66998C3.90791 8.78357 3.78721 10.009 4.02239 11.1912C4.25757 12.3734 4.83807 13.4593 5.69046 14.3115C6.54286 15.1638 7.62885 15.7441 8.81109 15.979C9.99333 16.214 11.2187 16.0931 12.3322 15.6316C13.4457 15.1701 14.3974 14.3887 15.0667 13.3863C15.7361 12.3839 16.0932 11.2055 16.0928 10.0001C16.0922 8.38449 15.4501 6.83522 14.3076 5.6929C13.1651 4.55058 11.6157 3.90872 10.0001 3.90845ZM10.0001 14.6376C9.08332 14.6378 8.18709 14.3662 7.4247 13.8571C6.66232 13.3479 6.06802 12.6242 5.71696 11.7773C5.36589 10.9304 5.27383 9.99847 5.4524 9.09928C5.63097 8.20008 6.07216 7.37403 6.72019 6.72557C7.36821 6.07711 8.19397 5.63536 9.09304 5.45618C9.99212 5.277 10.9241 5.36844 11.7712 5.71893C12.6184 6.06943 13.3425 6.66324 13.8522 7.42528C14.3618 8.18731 14.634 9.08336 14.6344 10.0001C14.6336 11.2293 14.1452 12.4079 13.2763 13.2773C12.4075 14.1467 11.2292 14.636 10.0001 14.6376Z" fill="#BFBFBF"/>
+<path d="M9.37419 0.866699H10.6242C10.6936 0.866699 10.7284 0.901421 10.7284 0.970866V2.96774C10.7284 3.03719 10.6936 3.07191 10.6242 3.07191H9.37419C9.30474 3.07191 9.27002 3.03719 9.27002 2.96774V0.970866C9.27002 0.901421 9.30474 0.866699 9.37419 0.866699Z" fill="#BFBFBF"/>
+<path d="M3.09933 3.98419L3.98321 3.10031C4.03232 3.0512 4.08142 3.0512 4.13053 3.10031L5.54253 4.51231C5.59164 4.56141 5.59164 4.61052 5.54253 4.65962L4.65865 5.54351C4.60954 5.59261 4.56044 5.59261 4.51133 5.54351L3.09933 4.1315C3.05022 4.0824 3.05022 4.03329 3.09933 3.98419Z" fill="#BFBFBF"/>
+<path d="M0.970866 9.27197H2.96774C3.03719 9.27197 3.07191 9.3067 3.07191 9.37614V10.6261C3.07191 10.6956 3.03719 10.7303 2.96774 10.7303H0.970866C0.901421 10.7303 0.866699 10.6956 0.866699 10.6261V9.37614C0.866699 9.3067 0.901421 9.27197 0.970866 9.27197Z" fill="#BFBFBF"/>
+<path d="M3.10079 15.8697L4.5128 14.4577C4.5619 14.4086 4.61101 14.4086 4.66011 14.4577L5.54399 15.3416C5.5931 15.3907 5.5931 15.4398 5.54399 15.4889L4.13199 16.9009C4.08289 16.95 4.03378 16.95 3.98468 16.9009L3.10079 16.017C3.05169 15.9679 3.05169 15.9188 3.10079 15.8697Z" fill="#BFBFBF"/>
+<path d="M9.37614 16.9282H10.6261C10.6956 16.9282 10.7303 16.9629 10.7303 17.0324V19.0293C10.7303 19.0987 10.6956 19.1334 10.6261 19.1334H9.37614C9.3067 19.1334 9.27197 19.0987 9.27197 19.0293V17.0324C9.27197 16.9629 9.3067 16.9282 9.37614 16.9282Z" fill="#BFBFBF"/>
+<path d="M14.4572 15.3404L15.3411 14.4565C15.3902 14.4074 15.4393 14.4074 15.4884 14.4565L16.9004 15.8685C16.9496 15.9176 16.9496 15.9667 16.9004 16.0158L16.0166 16.8997C15.9675 16.9488 15.9184 16.9488 15.8692 16.8997L14.4572 15.4877C14.4081 15.4386 14.4081 15.3895 14.4572 15.3404Z" fill="#BFBFBF"/>
+<path d="M17.0324 9.26978H19.0293C19.0987 9.26978 19.1334 9.3045 19.1334 9.37394V10.6239C19.1334 10.6934 19.0987 10.7281 19.0293 10.7281H17.0324C16.9629 10.7281 16.9282 10.6934 16.9282 10.6239V9.37394C16.9282 9.3045 16.9629 9.26978 17.0324 9.26978Z" fill="#BFBFBF"/>
+<path d="M14.4558 4.51109L15.8678 3.09908C15.9169 3.04998 15.966 3.04998 16.0151 3.09908L16.899 3.98297C16.9481 4.03207 16.9481 4.08118 16.899 4.13028L15.487 5.54229C15.4379 5.59139 15.3888 5.59139 15.3397 5.54229L14.4558 4.6584C14.4067 4.6093 14.4067 4.56019 14.4558 4.51109Z" fill="#BFBFBF"/>
+<path d="M9.89605 6.07715C8.87128 6.10077 7.89643 6.52444 7.18002 7.25756C6.4636 7.99068 6.0625 8.97503 6.0625 10.0001C6.0625 11.0251 6.4636 12.0095 7.18002 12.7426C7.89643 13.4757 8.87128 13.8994 9.89605 13.923C9.92367 13.923 9.95017 13.912 9.9697 13.8925C9.98924 13.8729 10.0002 13.8464 10.0002 13.8188V6.18132C10.0002 6.15369 9.98924 6.12719 9.9697 6.10766C9.95017 6.08812 9.92367 6.07715 9.89605 6.07715Z" fill="#BFBFBF"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.84",
+  "version": "0.2.85",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -174,6 +174,7 @@
     "react-native-parsed-text": "^0.0.22",
     "react-native-permissions": "^2.1.5",
     "react-native-popover-view": "^4.0.3",
+    "react-native-progress": "^5.0.0",
     "react-native-reanimated": "1.10.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
@@ -188,6 +189,7 @@
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.39",
     "react-native-webview": "^10.9.3",
+    "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "^4.5.0",
     "react-navigation": "^2.2.0",

package/src/Images/Common/SuccessfullyConnected.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8437 11.0312H20.3781C20.0593 11.0312 19.7562 11.1844 19.5687 11.4469L14.6562 18.2594L12.4312 15.1719C12.2437 14.9125 11.9437 14.7563 11.6218 14.7563H10.1562C9.95303 14.7563 9.83428 14.9875 9.95303 15.1531L13.8468 20.5531C13.9388 20.6815 14.06 20.7861 14.2005 20.8583C14.341 20.9305 14.4967 20.9681 14.6546 20.9681C14.8125 20.9681 14.9682 20.9305 15.1087 20.8583C15.2492 20.7861 15.3704 20.6815 15.4624 20.5531L22.0437 11.4281C22.1656 11.2625 22.0468 11.0312 21.8437 11.0312V11.0312Z" fill="#52C41A"/>
+<path d="M16 2C8.26875 2 2 8.26875 2 16C2 23.7312 8.26875 30 16 30C23.7312 30 30 23.7312 30 16C30 8.26875 23.7312 2 16 2ZM16 27.625C9.58125 27.625 4.375 22.4187 4.375 16C4.375 9.58125 9.58125 4.375 16 4.375C22.4187 4.375 27.625 9.58125 27.625 16C27.625 22.4187 22.4187 27.625 16 27.625Z" fill="#52C41A"/>
+</svg>

package/src/commons/ActionGroup/LightActionTemplate.js

@@ -0,0 +1,103 @@
+import React, { memo, useCallback, useState, useMemo } from 'react';
+import { Alert, View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './LightActionTemplateStyles';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import { Card } from '../CardShadow';
+import ColorPicker from 'react-native-wheel-color-picker';
+import SvgBrightness from '../../../assets/images/brightness.svg';
+import Slider from 'react-native-slider';
+import OnOffButtonTemplate from './OnOffTemplate/OnOffButtonTemplate';
+
+const LightActionTemplate = memo(({ actionGroup, doAction, sensor }) => {
+  const t = useTranslations();
+  const { configuration, title } = actionGroup;
+  const dataColor = useMemo(() => {
+    return configuration?.config_color;
+  }, [configuration]);
+
+  const dataBrightness = useMemo(() => {
+    return configuration?.config_brightness;
+  }, [configuration]);
+
+  const [valueComplete, setValueComplete] = useState(dataBrightness || 0);
+  const [value, setValue] = useState(dataBrightness || 0);
+  const [color, setColor] = useState(dataColor || '');
+  const [isOn] = useState(true);
+
+  const onChangeColor = useCallback(
+    (color) => {
+      setColor(color);
+      Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+
+  const onChangeBrightness = useCallback(
+    (value) => {
+      setValueComplete(value);
+      Alert.alert(t('feature_under_development'));
+    },
+    [t]
+  );
+
+  const triggerAction = useCallback(() => {
+    Alert.alert(t('feature_under_development'));
+  }, [t]);
+
+  return (
+    <View>
+      <OnOffButtonTemplate
+        isOn={isOn}
+        triggerAction={triggerAction}
+        actionGroup={actionGroup}
+        isLight={true}
+      />
+      <Card title={!!title && t(title)}>
+        <View style={styles.viewPickColor}>
+          <ColorPicker
+            style={styles.colorPicker}
+            sliderHidden={true}
+            swatches={false}
+            color={color}
+            onColorChangeComplete={(color) => onChangeColor(color)}
+            thumbSize={16}
+          />
+        </View>
+        <View style={styles.viewBrightness}>
+          <View style={styles.LeftBrightness}>
+            <SvgBrightness />
+            <Text type="H4" style={styles.LeftTextBrightness}>
+              {t('brightness')}
+            </Text>
+          </View>
+          <View style={styles.RightBrightness}>
+            <View style={styles.slider}>
+              <Slider
+                value={valueComplete}
+                onSlidingComplete={(value) => onChangeBrightness(value)}
+                onValueChange={(value) => setValue(value)}
+                step={1}
+                minimumValue={0}
+                maximumValue={100}
+                thumbTintColor={Colors.Gray3}
+                minimumTrackTintColor={Colors.Primary}
+                maximumTrackTintColor={Colors.Gray4}
+                trackStyle={styles.trackSlider}
+                thumbStyle={styles.thumbSlider}
+              />
+            </View>
+            <View style={styles.valuePercent}>
+              <Text type="Label" style={styles.textValuePercent}>
+                {`${value || 0}%`}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </Card>
+    </View>
+  );
+});
+
+export default LightActionTemplate;

package/src/commons/ActionGroup/LightActionTemplateStyles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 30,
+  },
+  viewPickColor: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  viewBrightness: {
+    paddingTop: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  slider: {
+    width: 131,
+  },
+  trackSlider: {
+    height: 8,
+    borderRadius: 30,
+  },
+  thumbSlider: {
+    backgroundColor: Colors.Primary,
+    width: 20,
+    height: 20,
+  },
+  colorPicker: {
+    width: '100%',
+    height: 'auto',
+  },
+  valuePercent: {
+    width: 40,
+    flexDirection: 'row',
+    paddingLeft: 16,
+  },
+  textValuePercent: {
+    width: 50,
+  },
+  LeftBrightness: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  LeftTextBrightness: {
+    paddingTop: 4,
+    paddingLeft: 8,
+  },
+  RightBrightness: {
+    flex: 1.2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

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

@@ -6,37 +6,39 @@ import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
 
-const OnOffButtonTemplate = memo(({ isOn, triggerAction, actionGroup }) => {
-  const { configuration } = actionGroup;
+const OnOffButtonTemplate = memo(
+  ({ isOn, triggerAction, actionGroup, isLight = false }) => {
+    const { configuration } = actionGroup;
 
-  return (
-    <>
-      <View style={styles.barrierControlContainer}>
-        <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
-          <View style={styles.smallCircle}>
-            <Icon
-              name={isOn ? configuration.icon_on : configuration.icon_off}
-              size={44}
-              color={isOn ? Colors.Green7 : Colors.Gray6}
-            />
-            <Text
-              style={[
-                styles.textBig,
-                { color: isOn ? Colors.Gray8 : Colors.Gray6 },
-              ]}
-            >
-              {isOn ? configuration.text_on : configuration.text_off}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-      {!!actionGroup.title && (
-        <Text size={20} semibold center>
-          {actionGroup.title}
-        </Text>
-      )}
-    </>
-  );
-});
+    return (
+      <>
+        <View style={styles.barrierControlContainer}>
+          <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
+            <View style={styles.smallCircle}>
+              <Icon
+                name={isOn ? configuration.icon_on : configuration.icon_off}
+                size={44}
+                color={isOn ? Colors.Green7 : Colors.Gray6}
+              />
+              <Text
+                style={[
+                  styles.textBig,
+                  { color: isOn ? Colors.Gray8 : Colors.Gray6 },
+                ]}
+              >
+                {isOn ? configuration.text_on : configuration.text_off}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        {!!actionGroup.title && !isLight && (
+          <Text size={20} semibold center>
+            {actionGroup.title}
+          </Text>
+        )}
+      </>
+    );
+  }
+);
 
 export default OnOffButtonTemplate;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Slider from 'react-native-slider';
+import ColorPicker from 'react-native-wheel-color-picker';
+
+import LightActionTemplate from '../LightActionTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LightActionTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+  </SCProvider>
+);
+
+describe('Test CurtainButtonTemplate', () => {
+  const actionGroup = {
+    configuration: {
+      action: 'b1be40f2-f482-4796-8c1a-0431ab49ab5a',
+      action_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [Array],
+        icon: '123231',
+        icon_kit: null,
+        id: 5,
+        key: 'b1be40f2-f482-4796-8c1a-0431ab49ab5a',
+        lg_actions: [Array],
+        name: 'change color',
+      },
+      config_brightness: 18,
+      config_color: 17,
+    },
+    id: 2,
+    template: 'light_action_template',
+    title: 'controller',
+  };
+
+  let wrapper;
+
+  test('render LightActionTemplate', async () => {
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup));
+    });
+    const instance = wrapper.root;
+    const slider = instance.findAllByType(Slider);
+    const colorPicker = instance.findAllByType(ColorPicker);
+    expect(slider.length).toEqual(1);
+    expect(colorPicker.length).toEqual(1);
+    await act(async () => {
+      await slider[0].props.onSlidingComplete();
+    });
+    await act(async () => {
+      await colorPicker[0].props.onColorChangeComplete();
+    });
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -10,6 +10,7 @@ import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
 import CurtainButtonTemplate from './CurtainButtonTemplate';
 import SmartTiviActionTemplate from './SmartTiviActionTemplate/SmartTiviActionTemplate';
+import LightActionTemplate from './LightActionTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -35,6 +36,8 @@ export const getActionComponent = (template) => {
       return CurtainButtonTemplate;
     case 'SmartTiviActionTemplate':
       return SmartTiviActionTemplate;
+    case 'light_action_template':
+      return LightActionTemplate;
     default:
       return null;
   }

package/src/commons/CardShadow/index.js

@@ -3,10 +3,13 @@ import { View } from 'react-native';
 import Text from '../../commons/Text';
 import styles from './styles';
 
-const Card = memo(({ title, children, style }) => {
+const Card = memo(({ title, children, style, rightHeaderComponent }) => {
   return (
     <View style={[styles.card, style]}>
-      {title && <Text style={styles.headerTitle}>{title}</Text>}
+      <View style={styles.headerTitle}>
+        {!!title && <Text style={styles.headerLeft}>{title}</Text>}
+        {!!rightHeaderComponent && rightHeaderComponent}
+      </View>
       {children}
     </View>
   );

package/src/commons/CardShadow/styles.js

@@ -17,9 +17,8 @@ export default StyleSheet.create({
     shadowRadius: 3,
     elevation: 6,
   },
-  headerTitle: {
-    display: 'flex',
-    alignItems: 'flex-end',
+  headerTitle: { justifyContent: 'space-between', flexDirection: 'row' },
+  headerLeft: {
     color: Colors.Gray8,
     fontSize: 16,
     lineHeight: 24,

package/src/commons/ConnectingProcess/DeviceItem/DeviceItem.js

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import styles from './DeviceItemStyles';
+import FImage from '../../FImage';
+import Text from '../../Text';
+
+const DeviceItem = memo(({ icon, name }) => {
+  return (
+    <View style={styles.container}>
+      {!!icon && <FImage source={{ uri: icon }} style={styles.iconSensor} />}
+      <Text style={styles.textItem}>{name}</Text>
+    </View>
+  );
+});
+
+export default DeviceItem;

package/src/commons/ConnectingProcess/DeviceItem/DeviceItemStyles.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { Constants, Colors } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 5;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 60;
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: 15,
+    borderRadius: 10,
+    width: 250,
+    height: heightItem,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    flexDirection: 'row',
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 6,
+    paddingLeft: 30,
+    paddingRight: 30,
+  },
+  iconSensor: {
+    width: 32,
+    height: 32,
+    resizeMode: 'contain',
+  },
+  textItem: {
+    marginLeft: 15,
+    fontSize: 16,
+  },
+});

package/src/commons/ConnectingProcess/__test__/Connecting.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import ConnectingProcess from '../index';
+import { SafeAreaView } from 'react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingProcess route={route} />
+  </SCProvider>
+);
+describe('Test ConnectingProcess', () => {
+  let tree;
+  test('create ConnectingProcess', () => {
+    const scan_sensor_data = { imei: 'SENSOR-afasdfas' };
+    const gateway = { id: 1, name: 'gateway' };
+    const station = { id: 1, icon_kit: 'a', name: 'station' };
+    const route = { params: { scan_sensor_data, gateway, station } };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const safeAreaView = instance.findAllByType(SafeAreaView);
+    expect(safeAreaView).toHaveLength(1);
+  });
+});

package/src/commons/ConnectingProcess/__test__/DeviceItem.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import DeviceItem from '../DeviceItem/DeviceItem';
+import FImage from '../../FImage';
+import Text from '../../Text';
+describe('Test DeviceItem button', () => {
+  let tree;
+  test('create DeviceItem button', () => {
+    act(() => {
+      tree = renderer.create(<DeviceItem />);
+    });
+    const instance = tree.root;
+    const image = instance.findAllByType(FImage);
+    const text = instance.findAllByType(Text);
+    expect(image).toHaveLength(0);
+    expect(text).toHaveLength(1);
+  });
+});