@eohjsc/react-native-smart-city 0.2.54 → 0.2.58

package/assets/images/SonosSpeaker/buttonpause-active.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 28H8.5V0H0.5V28ZM16.5 0V28H24.5V0H16.5Z" fill="#262626"/>
+</svg>

package/assets/images/SonosSpeaker/buttonpause-notactive.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="28" viewBox="0 0 23 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0V28L22.5 14L0.5 0Z" fill="#262626"/>
+</svg>

package/assets/images/SonosSpeaker/picture-main-notactive.svg

@@ -0,0 +1,5 @@
+<svg width="141" height="142" viewBox="0 0 141 142" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M80.0001 50.5387H60.0001C57.8001 50.5387 56.0001 52.3387 56.0001 54.5387V86.5387C56.0001 88.7387 57.8001 90.5187 60.0001 90.5187L80.0001 90.5387C82.2001 90.5387 84.0001 88.7387 84.0001 86.5387V54.5387C84.0001 52.3387 82.2001 50.5387 80.0001 50.5387ZM70.0001 54.5387C72.2001 54.5387 74.0001 56.3387 74.0001 58.5387C74.0001 60.7387 72.2001 62.5387 70.0001 62.5387C67.7801 62.5387 66.0001 60.7387 66.0001 58.5387C66.0001 56.3387 67.7801 54.5387 70.0001 54.5387ZM70.0001 86.5387C64.4801 86.5387 60.0001 82.0587 60.0001 76.5387C60.0001 71.0187 64.4801 66.5387 70.0001 66.5387C75.5201 66.5387 80.0001 71.0187 80.0001 76.5387C80.0001 82.0587 75.5201 86.5387 70.0001 86.5387ZM70.0001 70.5387C66.6801 70.5387 64.0001 73.2187 64.0001 76.5387C64.0001 79.8587 66.6801 82.5387 70.0001 82.5387C73.3201 82.5387 76.0001 79.8587 76.0001 76.5387C76.0001 73.2187 73.3201 70.5387 70.0001 70.5387Z" fill="white"/>
+<circle cx="70.1245" cy="71" r="70.1245" fill="#E8E8E8"/>
+<path d="M80 50.8755H60C57.8 50.8755 56 52.6755 56 54.8755V86.8755C56 89.0755 57.8 90.8555 60 90.8555L80 90.8755C82.2 90.8755 84 89.0755 84 86.8755V54.8755C84 52.6755 82.2 50.8755 80 50.8755ZM70 54.8755C72.2 54.8755 74 56.6755 74 58.8755C74 61.0755 72.2 62.8755 70 62.8755C67.78 62.8755 66 61.0755 66 58.8755C66 56.6755 67.78 54.8755 70 54.8755ZM70 86.8755C64.48 86.8755 60 82.3955 60 76.8755C60 71.3555 64.48 66.8755 70 66.8755C75.52 66.8755 80 71.3555 80 76.8755C80 82.3955 75.52 86.8755 70 86.8755ZM70 70.8755C66.68 70.8755 64 73.5555 64 76.8755C64 80.1955 66.68 82.8755 70 82.8755C73.32 82.8755 76 80.1955 76 76.8755C76 73.5555 73.32 70.8755 70 70.8755Z" fill="white"/>
+</svg>

package/assets/images/SonosSpeaker/picture-main.svg

@@ -0,0 +1,6 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.1" cx="100" cy="100" r="100" fill="#00979D"/>
+<circle opacity="0.5" cx="100.477" cy="100.477" r="85.4772" fill="#00979D"/>
+<circle cx="100.124" cy="100.124" r="70.1245" fill="#00979D"/>
+<path d="M110 79.9996H90.0001C87.8001 79.9996 86.0001 81.7996 86.0001 83.9996V116C86.0001 118.2 87.8001 119.98 90.0001 119.98L110 120C112.2 120 114 118.2 114 116V83.9996C114 81.7996 112.2 79.9996 110 79.9996ZM100 83.9996C102.2 83.9996 104 85.7996 104 87.9996C104 90.1996 102.2 91.9996 100 91.9996C97.7801 91.9996 96.0001 90.1996 96.0001 87.9996C96.0001 85.7996 97.7801 83.9996 100 83.9996ZM100 116C94.4801 116 90.0001 111.52 90.0001 106C90.0001 100.48 94.4801 95.9996 100 95.9996C105.52 95.9996 110 100.48 110 106C110 111.52 105.52 116 100 116ZM100 99.9996C96.6801 99.9996 94.0001 102.68 94.0001 106C94.0001 109.32 96.6801 112 100 112C103.32 112 106 109.32 106 106C106 102.68 103.32 99.9996 100 99.9996Z" fill="white"/>
+</svg>

package/assets/images/SonosSpeaker/picture-volume.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 5.5V10.5H3.83333L8 14.6667V1.33333L3.83333 5.5H0.5ZM6.33333 5.35833V10.6417L4.525 8.83333H2.16667V7.16667H4.525L6.33333 5.35833ZM11.75 8C11.75 6.525 10.9 5.25833 9.66667 4.64167V11.35C10.9 10.7417 11.75 9.475 11.75 8ZM9.66667 0.691666V2.40833C12.075 3.125 13.8333 5.35833 13.8333 8C13.8333 10.6417 12.075 12.875 9.66667 13.5917V15.3083C13.0083 14.55 15.5 11.5667 15.5 8C15.5 4.43333 13.0083 1.45 9.66667 0.691666V0.691666Z" fill="#262626"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.54",
+  "version": "0.2.58",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -39,16 +39,11 @@
     "reset-cache": "react-native start --reset-cache",
     "merge_conflict": "yarn jest && yarn update_coverage_result && yarn check_coverage_config",
     "jest": "jest --detectOpenHandles",
-    "postinstall": "npx husky install",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "sync-files ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "test:code-formatter": "prettier src/**/**/*.js --write",
-    "test:code-formatter-step-1": "prettier --check src/**/*.js",
-    "test:code-formatter-step-2": "prettier --check src/**/**/*.js",
-    "test:code-formatter-step-3": "prettier --check src/**/**/**/*.js"
+    "watch": "sync-files --watch ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
   },
   "repository": {
     "type": "git",
@@ -86,7 +81,6 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
-    "husky": "^2.7.0",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",
@@ -147,6 +141,7 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
     "react-native-ble-plx": "^2.0.1",
@@ -183,6 +178,7 @@
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
     "react-native-screens": "^2.9.0",
+    "react-native-slider": "^0.11.0",
     "react-native-snap-carousel": "4.0.0-beta.5",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
@@ -206,21 +202,6 @@
     "validator": "^13.1.1",
     "victory-native": "^35.0.1"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "yarn jest"
-    }
-  },
-  "lint-staged": {
-    "*.{js, ts}": [
-      "yarn lint",
-      "yarn test:code-formatter",
-      "yarn test:code-formatter-step-1",
-      "yarn test:code-formatter-step-2",
-      "yarn test:code-formatter-step-3"
-    ]
-  },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },

package/src/commons/AlertAction/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import Modal from 'react-native-modal';
 
+import ModalCustom from '../../commons/Modal/ModalCustom';
 import Text from '../../commons/Text';
 import ViewButtonBottom from '../ViewButtonBottom';
 import { Colors, Device } from '../../configs';
@@ -24,7 +24,7 @@ const AlertAction = ({
   animatedStyle,
 }) => {
   return (
-    <Modal
+    <ModalCustom
       isVisible={visible}
       onBackButtonPress={hideModal}
       onBackdropPress={hideModal}
@@ -58,7 +58,7 @@ const AlertAction = ({
           />
         </View>
       </Animated.View>
-    </Modal>
+    </ModalCustom>
   );
 };
 

package/src/commons/Auth/__test__/AccountList.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import AccountList from '../AccountList';
+
+describe('Test AccountList', () => {
+  let tree;
+  const accounts = [
+    {
+      id: 1,
+      name: 'test',
+      phone_number: 123456677,
+    },
+  ];
+
+  it('test render has data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={accounts} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+
+  it('test render has no data', async () => {
+    await act(() => {
+      tree = create(<AccountList accounts={[]} />);
+    });
+    const instance = tree.root;
+    const scrollViews = instance.findAllByType(ScrollView);
+    expect(scrollViews).toHaveLength(1);
+  });
+});

package/src/commons/CameraDevice/index.js

@@ -59,6 +59,8 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
             cameraName={device.configuration.name}
             handleFullScreen={handleFullScreen}
             goToPlayBack={goToPlayBack(device, { uri: station?.background })}
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       ))}

package/src/commons/CardShadow/index.js

@@ -7,7 +7,7 @@ const Card = memo(({ title, children, style }) => {
   return (
     <View style={[styles.card, style]}>
       {title && <Text style={styles.headerTitle}>{title}</Text>}
-      <View>{children}</View>
+      {children}
     </View>
   );
 });

package/src/commons/CardShadow/styles.js

@@ -3,11 +3,9 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   card: {
-    marginTop: 14,
-    marginBottom: 14,
+    marginVertical: 14,
     marginHorizontal: 16,
     padding: 16,
-    flexDirection: 'column',
     backgroundColor: Colors.White,
     borderRadius: 10,
     shadowColor: Colors.Shadow,

package/src/commons/DateTimeRangeChange/index.js

@@ -23,7 +23,7 @@ const DateTimeRangeChange = memo(
         style={[styles.dateTimeView, !inline && styles.spaceBetween, style]}
       >
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
-          <Text size={12} color={Colors.Gray7}>
+          <Text type="Label" color={Colors.Gray7}>
             {t('from')}
           </Text>
           <DateTimeButton
@@ -35,7 +35,7 @@ const DateTimeRangeChange = memo(
           />
         </View>
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
-          <Text size={12} color={Colors.Gray7}>
+          <Text type="Label" color={Colors.Gray7}>
             {t('to')}
           </Text>
           <DateTimeButton

package/src/commons/Device/HistoryChart.js

@@ -5,8 +5,8 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import TextInput from '../../commons/Form/TextInput';
 import Button from '../../commons/Button';
+import CurrencyInput from '../../commons/Form/CurrencyInput';
 import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
@@ -49,8 +49,7 @@ const HistoryChart = memo(
       startTime: startDate ? startDate : moment().subtract(1, 'day').valueOf(),
       endTime: dateNow,
     });
-    const [price, setPrice] = useState('');
-    const [priceDisplay, setPriceDisplay] = useState('');
+    const [price, setPrice] = useState(null);
 
     const onStart = useCallback(() => {
       setEventPicker({
@@ -137,20 +136,6 @@ const HistoryChart = memo(
       [chartOptions]
     );
 
-    const onChangePrice = useCallback(
-      (input) => {
-        const validInput = input.replace(/\D/g, '');
-        setPrice(validInput);
-        setPriceDisplay(validInput);
-      },
-      [setPrice, setPriceDisplay]
-    );
-    const onPriceFocus = useCallback(() => {
-      setPriceDisplay(price);
-    }, [price]);
-    const onPriceBlur = useCallback(() => {
-      setPriceDisplay(price !== '' ? formatMoney(price) : '');
-    }, [price]);
     const onCalculateCost = useCallback(() => {
       setChartConfig((config) => ({
         ...config,
@@ -211,7 +196,6 @@ const HistoryChart = memo(
               endTime={eventPicker.endTime}
               date={dateNow}
               formatType={formatType}
-              inline={false}
             />
           )}
         </View>
@@ -221,17 +205,13 @@ const HistoryChart = memo(
               {t('input_price_to_calculate_electricity_cost')}
             </Text>
             <View style={styles.row}>
-              <TextInput
-                onFocus={onPriceFocus}
-                onBlur={onPriceBlur}
-                value={priceDisplay}
-                onChange={onChangePrice}
+              <CurrencyInput
+                value={price}
+                onChange={setPrice}
+                minValue={0}
+                maxValue={100000000}
+                placeholder={'0'}
                 onSubmitEditing={onCalculateCost}
-                placeholder={'0đ'}
-                keyboardType="numeric"
-                textInputStyle={styles.textInput}
-                wrapStyle={styles.wrapTextInput}
-                borderBottomOnly
               />
               <Button
                 type="primary"
@@ -298,17 +278,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-  },
-  wrapTextInput: {
-    flex: 1,
-    marginRight: 16,
-  },
-  textInput: {
-    marginTop: 0,
-    paddingTop: 0,
-    paddingLeft: 0,
-    fontSize: 18,
-    lineHeight: 24,
+    marginTop: 8,
   },
   buttonCalculate: {
     width: null,

package/src/commons/Device/HorizontalBarChart.js

@@ -85,7 +85,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
             const costStyle = valueStyle + 'font-weight:bold;';
 
             let label = `<span style="${valueStyle}">` + `${this.y}${unit}`;
-            if (price === '' || isNaN(price)) {
+            if (price === null || isNaN(price)) {
               return label + '</span>';
             }
 

package/src/commons/Device/LinearChart.js

@@ -56,40 +56,6 @@ const chartOptions = {
     },
     minRange: 3600 * 24 * 1000,
   },
-  plotOptions: {
-    series: {
-      point: {
-        events: {
-          click: () => {
-            let series = this.series.chart.series;
-            const seriesIndex = this.series.index;
-            for (let i = 0; i < series.length; i++) {
-              if (series[i].index !== seriesIndex) {
-                series[i].visible ? series[i].hide() : series[i].show();
-              }
-            }
-            return false;
-          },
-        },
-      },
-      events: {
-        legendItemClick: (event) => {
-          if (!this.visible) {
-            return true;
-          }
-          let seriesIndex = this.index;
-          let series = this.chart.series;
-          for (let i = 0; i < series.length; i++) {
-            if (series[i].index !== seriesIndex) {
-              series[i].visible ? series[i].hide() : series[i].show();
-            }
-          }
-          return false;
-        },
-      },
-      showInNavigator: true,
-    },
-  },
 };
 
 function LinearChart({ datas }) {

package/src/commons/Device/PMSensor/PMSensorIndicatior.js

@@ -29,7 +29,7 @@ const PMSensorIndicatior = memo(({ data, style }) => {
     <FlatList
       bounces={false}
       numColumns={1}
-      horizontal={isScrollMode}
+      horizontal={true}
       contentContainerStyle={[
         styles.standard,
         !isScrollMode && styles.centerItem,

package/src/commons/Device/PMSensor/PMSensorIndicatorStyles.js

@@ -7,6 +7,7 @@ export default StyleSheet.create({
     marginBottom: 10,
   },
   centerItem: {
-    justifyContent: 'space-evenly',
+    flex: 1,
+    justifyContent: 'center',
   },
 });

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Text from '../../../Text';
+import SonosSpeaker from '..';
+import { TouchableOpacity } from 'react-native';
+import Slider from 'react-native-slider';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <SonosSpeaker />
+  </SCProvider>
+);
+
+describe('Test SonosSpeaker', () => {
+  let tree;
+  test('create SonosSpeaker', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const textElement = instance.findAllByType(Text);
+    expect(textElement[0]).toBeDefined();
+  });
+
+  test('Test handleClickButton', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    const textElement = instance.findAllByType(Text);
+
+    act(() => {
+      touchableOpacity[0].props.onPress();
+    });
+    expect(textElement[1].props.children).toEqual('Pause');
+  });
+
+  test('Test onValueChange', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const slider = instance.findByType(Slider);
+
+    act(() => {
+      slider.props.onValueChange(40);
+    });
+    expect(slider.props.value).toEqual(40);
+  });
+});

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

@@ -0,0 +1,88 @@
+import React, { memo, useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { Icon } from '@ant-design/react-native';
+import Slider from 'react-native-slider';
+
+import Text from '../../Text';
+import { Colors } from '../../../configs';
+import SvgSonosSpeaker from '../../../../assets/images/SonosSpeaker/picture-main.svg';
+import SvgSoundSonosSpeaker from '../../../../assets/images/SonosSpeaker/picture-volume.svg';
+import SvgButtonPauseActive from '../../../../assets/images/SonosSpeaker/buttonpause-active.svg';
+import SvgButtonPauseNotActive from '../../../../assets/images/SonosSpeaker/buttonpause-notactive.svg';
+import SvgSonosSpeakerNotActive from '../../../../assets/images/SonosSpeaker/picture-main-notactive.svg';
+import styles from './styles';
+
+const SonosSpeaker = memo(() => {
+  const t = useTranslations();
+  const [value, setValue] = useState(30);
+  const [active, setActive] = useState(true);
+
+  const handleClickButton = () => {
+    setActive(!active);
+  };
+
+  return (
+    <View>
+      <View style={styles.container}>
+        <Text type="H4">MIC DROP (Steve aoki)</Text>
+        <Text color={Colors.Gray7}>
+          {active ? t('now_playing') : t('pause')}
+        </Text>
+        <TouchableOpacity
+          delayLongPress={3000}
+          style={styles.imageMain}
+          onPress={handleClickButton}
+        >
+          {active ? (
+            <SvgSonosSpeaker />
+          ) : (
+            <View style={styles.sonosSpeakerNotActive}>
+              <SvgSonosSpeakerNotActive />
+            </View>
+          )}
+        </TouchableOpacity>
+        <View style={styles.threeButton}>
+          <TouchableOpacity style={styles.buttonLeft}>
+            <Icon name={'backward'} size={35} color={Colors.Black} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.buttonCenter}
+            onPress={handleClickButton}
+          >
+            {active ? <SvgButtonPauseActive /> : <SvgButtonPauseNotActive />}
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.buttonRight}>
+            <Icon name={'forward'} size={35} color={Colors.Black} />
+          </TouchableOpacity>
+        </View>
+      </View>
+      <View style={styles.volumeButton}>
+        <View style={styles.imageVolumeButton}>
+          <View style={styles.imageSoundSonos}>
+            <SvgSoundSonosSpeaker />
+          </View>
+          <Text type="H4" style={styles.textVolumeLeft}>
+            {t('volume')}
+          </Text>
+        </View>
+        <View style={styles.containerSlider}>
+          <Slider
+            value={value}
+            onValueChange={(value) => setValue(value)}
+            step={1}
+            minimumValue={0}
+            maximumValue={100}
+            thumbTintColor={Colors.Gray3}
+            minimumTrackTintColor={Colors.Primary}
+            maximumTrackTintColor={Colors.Gray3}
+            trackStyle={styles.slider}
+          />
+        </View>
+        <Text style={styles.textVolumeRight}>{value}%</Text>
+      </View>
+    </View>
+  );
+});
+
+export default SonosSpeaker;

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

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imageMain: {
+    marginTop: 25,
+    height: 200,
+  },
+  sonosSpeakerNotActive: {
+    marginTop: 30,
+  },
+  imageSoundSonos: {
+    marginBottom: 3,
+  },
+  containerSlider: {
+    flex: 1,
+  },
+  emergencyDescription: {
+    color: Colors.Gray8,
+    textAlign: 'center',
+  },
+  threeButton: {
+    flexDirection: 'row',
+    marginTop: 30,
+  },
+  buttonCenter: {
+    marginHorizontal: 50,
+    marginTop: 3,
+  },
+  volumeButton: {
+    flexDirection: 'row',
+    marginTop: 35,
+    justifyContent: 'space-between',
+  },
+  textVolumeRight: {
+    margin: 5,
+    marginLeft: 20,
+    marginRight: 20,
+  },
+  textVolumeLeft: {
+    marginLeft: 10,
+    marginRight: 70,
+  },
+  imageVolumeButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 20,
+  },
+  slider: {
+    height: 10,
+    borderRadius: 10,
+  },
+});