@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/commons/ActionTemplate/index.js

@@ -0,0 +1,69 @@
+import React, { memo, useState, useCallback } from 'react';
+import { View } from 'react-native';
+import Modal from 'react-native-modal';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './ActionTemplateStyles';
+import OnOffButtonAction from './OnOffButtonAction';
+import OneButtonAction from './OneButtonAction';
+import ThreeButtonAction from './ThreeButtonAction';
+import SelectActionCard from '../SelectActionCard';
+
+const ActionTemplate = memo(({ data, onSelectAction, action }) => {
+  const t = useTranslations();
+  const [visible, setVisible] = useState(false);
+  const onClose = () => setVisible(false);
+  const onPress = () => setVisible(true);
+
+  const onPressSelectAction = useCallback(
+    (action) => {
+      setVisible(false);
+      onSelectAction && onSelectAction({ ...action });
+    },
+    [onSelectAction]
+  );
+
+  const renderAction = useCallback(
+    (data) => {
+      return data.map((item) => {
+        switch (item.template) {
+          case 'on_off_button_action_template':
+            return (
+              <OnOffButtonAction {...item} onPress={onPressSelectAction} />
+            );
+          case 'one_button_action_template':
+            return <OneButtonAction {...item} onPress={onPressSelectAction} />;
+          case 'three_button_action_template':
+            return (
+              <ThreeButtonAction {...item} onPress={onPressSelectAction} />
+            );
+          default:
+            break;
+        }
+      });
+    },
+    [onPressSelectAction]
+  );
+
+  return (
+    <>
+      <SelectActionCard
+        onPress={onPress}
+        action={action?.name}
+        title={t('action')}
+      />
+
+      <Modal
+        isVisible={visible}
+        onBackButtonPress={onClose}
+        onBackdropPress={onClose}
+      >
+        <View style={styles.popoverStyle}>
+          <View style={styles.modalHeader}>{renderAction(data)}</View>
+        </View>
+      </Modal>
+    </>
+  );
+});
+
+export default ActionTemplate;

package/src/commons/Automate/ItemAddNewScriptAction.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, TouchableWithoutFeedback } from 'react-native';
+import Text from '../Text';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Colors } from '../../configs';
+import styles from './ItemAddNewScriptActionStyles';
+
+const ItemAddNewScriptAction = ({ order, title, onAddNew }) => {
+  return (
+    <TouchableWithoutFeedback onPress={onAddNew}>
+      <View style={styles.wrap}>
+        <View style={[styles.wrapOrder, styles.border]}>
+          <Text type="H4" color={Colors.Gray9} bold>
+            {`${order}`.padStart(2, '0')}
+          </Text>
+        </View>
+        <View style={[styles.wrapItem, styles.border]}>
+          <View style={styles.wrapIcon}>
+            <IconOutline name="plus" size={22} color={Colors.Gray8} />
+          </View>
+          <Text type="H4" color={Colors.Gray8}>
+            {title}
+          </Text>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default ItemAddNewScriptAction;

package/src/commons/Automate/ItemAddNewScriptActionStyles.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    marginHorizontal: 16,
+    marginBottom: 16,
+    height: 110,
+  },
+  wrapOrder: {
+    padding: 8,
+    marginRight: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapItem: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  wrapIcon: {
+    width: 32,
+    height: 32,
+    backgroundColor: Colors.Gray3,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 24,
+  },
+  border: {
+    borderRadius: 5,
+    borderWidth: 2,
+    borderColor: Colors.Gray4,
+    borderStyle: 'dashed',
+  },
+});

package/src/commons/Automate/ItemAutomate.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './ItemAutomateStyles';
+import { AUTOMATES } from '../../configs/Constants';
+
+const ItemAutomate = ({ type, isSelected = false, onPress = () => {} }) => {
+  const item = AUTOMATES[type];
+  const Icon = item?.icon;
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.wrap, isSelected && styles.active]}
+    >
+      <View style={styles.row}>
+        <View style={styles.wrapIcon}>
+          <Icon />
+        </View>
+        <View>
+          <Text type="H4" bold>
+            {item?.title}
+          </Text>
+          <Text type="Label" color={Colors.Gray8} numberOfLines={1}>
+            {item?.explanation}
+          </Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default ItemAutomate;

package/src/commons/Automate/ItemAutomateStyles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    height: 76,
+    backgroundColor: Colors.White,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 8,
+    marginTop: 16,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 14,
+    elevation: 9,
+  },
+  active: {
+    borderWidth: 2,
+    borderColor: Colors.Primary,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  wrapIcon: {
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+});

package/src/commons/Automate/ItemScriptAction.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import FImage from '../FImage';
+import styles from './ItemScriptActionStyles';
+
+const ItemScriptAction = ({ order, item }) => {
+  return (
+    <View style={styles.wrap}>
+      <View style={[styles.wrapOrder, styles.border]}>
+        <Text type="H4" color={Colors.Gray9} bold>
+          {`${order}`.padStart(2, '0')}
+        </Text>
+      </View>
+      <View style={[styles.wrapItem, styles.border]}>
+        <View style={styles.wrapIcon}>
+          <FImage
+            source={{ uri: item?.sensor_icon_kit }}
+            style={styles.iconItem}
+          />
+        </View>
+        <View>
+          <View style={styles.row}>
+            <Text
+              type="Label"
+              color={Colors.Gray7}
+              bold
+              style={styles.unitName}
+            >
+              {item?.unit_name}
+            </Text>
+            <Text type="Label">{item.station_name}</Text>
+          </View>
+          <Text type="H4" bold style={styles.deviceName}>
+            {item?.sensor_name}
+          </Text>
+          <Text type="H4">{item?.action_name}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default ItemScriptAction;

package/src/commons/Automate/ItemScriptActionStyles.js

@@ -0,0 +1,42 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    marginHorizontal: 16,
+    marginBottom: 16,
+    height: 110,
+  },
+  wrapOrder: {
+    padding: 10,
+    marginRight: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapItem: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  wrapIcon: {
+    height: '100%',
+    marginRight: 24,
+  },
+  border: {
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  unitName: {
+    marginRight: 4,
+  },
+  iconItem: {
+    width: 40,
+    height: 40,
+  },
+});

package/src/commons/BottomScrollPicker/index.js

@@ -0,0 +1,58 @@
+import React, { memo, useState, useCallback } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import Picker from '../WheelDateTimePicker/Picker';
+import BottomSheet from '../BottomSheet';
+import ViewButtonBottom from '../ViewButtonBottom';
+
+import styles from './styles';
+import { range } from '../../utils/Converter/array';
+
+const BottomScrollPicker = ({ isVisible, onPicked, onHide, min, max }) => {
+  const t = useTranslations();
+  const [number, setNumber] = useState(min);
+
+  const numberData = range(min, max, 1).map((item) => ({
+    text: item,
+    value: item,
+  }));
+
+  const onChangeNumber = useCallback(
+    (data, _) => {
+      setNumber(data.value);
+    },
+    [setNumber]
+  );
+
+  const onCancel = useCallback(() => {
+    onHide && onHide();
+  }, [onHide]);
+
+  const onDone = useCallback(() => {
+    onPicked && onPicked(number);
+    onHide && onHide();
+  }, [number, onHide, onPicked]);
+
+  return (
+    <BottomSheet isVisible={isVisible} onHide={onCancel} title={t('set_hour')}>
+      <View style={styles.container}>
+        <Picker
+          dataSource={numberData}
+          selectedIndex={0}
+          onValueChange={onChangeNumber}
+          keyPrefix="hour"
+          style={styles.picker}
+        />
+      </View>
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={onCancel}
+        rightTitle={t('done')}
+        onRightClick={onDone}
+      />
+    </BottomSheet>
+  );
+};
+
+export default memo(BottomScrollPicker);

package/src/commons/BottomScrollPicker/styles.js

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 180,
+  },
+  picker: {
+    width: 120,
+  },
+});

package/src/commons/BottomSheet/index.js

@@ -0,0 +1,36 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+import Modal from 'react-native-modal';
+
+import Text from '../Text';
+
+import styles from './styles';
+
+const BottomSheet = ({ isVisible, onHide, title, children }) => {
+  return (
+    <Modal
+      isVisible={isVisible}
+      onBackButtonPress={onHide}
+      onBackdropPress={onHide}
+      style={styles.modalContainer}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+    >
+      <View style={styles.popoverStyle}>
+        <View style={styles.modalWrapper}>
+          {!!title && (
+            <View style={styles.modalHeader}>
+              <Text semibold style={styles.modalHeaderText}>
+                {title}
+              </Text>
+            </View>
+          )}
+
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default memo(BottomSheet);

package/src/commons/BottomSheet/styles.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    margin: 0,
+  },
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  modalWrapper: {
+    flex: 1,
+    backgroundColor: Colors.White,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  modalHeader: {
+    padding: 16,
+    backgroundColor: Colors.White,
+    borderBottomWidth: 1,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderColor: Colors.Gray4,
+  },
+  modalHeaderText: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+});

package/src/commons/Button/index.js

@@ -65,6 +65,10 @@ const ButtonStyle = {
     backgroundColor: Colors.White,
     borderWidth: 0,
   },
+  primaryUnderline: {
+    backgroundColor: Colors.White,
+    borderWidth: 0,
+  },
   setupBorder: {
     backgroundColor: Colors.Cyan1,
     borderRadius: 28,
@@ -97,6 +101,7 @@ const TextColor = {
   alert: Colors.White,
   alertBorder: Colors.Red6,
   underline: Colors.Gray6,
+  primaryUnderline: Colors.Primary,
   setupBorder: Colors.Primary,
   CardShadow: Colors.Gray9,
   primaryText: Colors.Primary,
@@ -133,7 +138,7 @@ export default ({
   const textColor = TextColor[type];
 
   const isDisabled = type === 'disabled' || type === 'disabledBorder';
-  const isUnderline = type === 'underline';
+  const isUnderline = type === 'underline' || type === 'primaryUnderline';
   const isCardShadow = type === 'CardShadow';
   const textSize = TextSize[textType];
   const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);

package/src/commons/CameraDevice/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './CameraDeviceStyles';
 import MediaPlayerDetail from '../MediaPlayerDetail';
@@ -16,6 +16,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 );
 
 const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
 
   const onPressViewAll = () => {

package/src/commons/ChartLoading/__test__/ChartLoading.test.js

@@ -2,19 +2,21 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import { Text } from 'react-native-svg';
 import ChartLoading from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChartLoading message="loading" />
+  </SCProvider>
+);
 
 describe('Test chart loading', () => {
   let tree;
-  test('create chart loading', () => {
-    act(() => {
-      tree = renderer.create(<ChartLoading message="loading" />);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
 
   test('create chart  message null', () => {
     act(() => {
-      tree = renderer.create(<ChartLoading />);
+      tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);

package/src/commons/ChartLoading/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import Svg, { Text } from 'react-native-svg';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const ChartLoading = ({ message }) => {
+  const t = useTranslations();
   return (
     <Svg width={'100%'} height={300}>
       <Text

package/src/commons/DateTimeRangeChange/index.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { StyleSheet, View } from 'react-native';
 
 import { Colors } from '../../configs';
@@ -8,6 +8,7 @@ import DateTimeButton from './DateTimeButton';
 
 const DateTimeRangeChange = memo(
   ({ startTime, onStart, onEnd, endTime, style, date, formatType }) => {
+    const t = useTranslations();
     return (
       <View style={[styles.dateTimeView, style]}>
         <Text size={12} color={Colors.Gray7}>

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,13 +1,14 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { timeDifference } from '../../utils/Converter/time';
 
 const DisplayTextConnected = memo(({ type }) => {
+  const t = useTranslations();
   let text = '';
   switch (type) {
     case 'GoogleHome':
@@ -21,6 +22,7 @@ const DisplayTextConnected = memo(({ type }) => {
 });
 
 const ConnectedViewHeader = memo(({ lastUpdated, type, isDisplayTime }) => {
+  const t = useTranslations();
   const lastUpdatedStr = lastUpdated
     ? timeDifference(new Date(), lastUpdated)
     : null;

package/src/commons/Device/DeviceAlertStatus.js

@@ -3,15 +3,18 @@ import { View, StyleSheet } from 'react-native';
 import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
 import { TESTID } from '../../configs/Constants';
 import { Colors } from '../../configs';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const DeviceAlertStatus = memo(
   ({ data, style, offsetTitle, setOffsetTitle }) => {
+    const t = useTranslations();
     const listStatus = data.filter((item) => item.value === 1);
 
     useEffect(() => {
       if (!!listStatus.length && offsetTitle !== listStatus.length) {
-        !!listStatus.length && setOffsetTitle(listStatus.length);
+        !!listStatus.length &&
+          setOffsetTitle &&
+          setOffsetTitle(listStatus.length);
       }
     }, [listStatus.length, offsetTitle, setOffsetTitle]);
 

package/src/commons/Device/DisconnectedView.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import { CircleView } from '../../commons';
@@ -29,6 +29,7 @@ const DeviceIcon = memo(({ sensor }) => {
 });
 
 const DisplayTextDisconnected = memo(({ type }) => {
+  const t = useTranslations();
   let text = '';
   switch (type) {
     case 'GoogleHome':
@@ -41,35 +42,42 @@ const DisplayTextDisconnected = memo(({ type }) => {
   return <Text style={styles.redStatus}>{text}</Text>;
 });
 
-const DisconnectedView = memo(({ sensor, type }) => (
-  <View style={styles.statusContainer}>
-    <CircleView size={80} backgroundColor={Colors.Gray3} style={styles.center}>
-      <CircleView size={64} backgroundColor={Colors.BG} style={styles.center}>
-        <DeviceIcon sensor={sensor} />
+const DisconnectedView = memo(({ sensor, type }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.statusContainer}>
+      <CircleView
+        size={80}
+        backgroundColor={Colors.Gray3}
+        style={styles.center}
+      >
+        <CircleView size={64} backgroundColor={Colors.BG} style={styles.center}>
+          <DeviceIcon sensor={sensor} />
+        </CircleView>
       </CircleView>
-    </CircleView>
-    <View style={styles.connectStatus}>
-      <WifiOffIcon width={16} height={16} />
-      <DisplayTextDisconnected type={type} />
-    </View>
-    <View style={styles.disconnectSuggestionContainer}>
-      <View style={styles.row}>
-        <IconOutline name={'alert'} size={16} />
-        <Text bold style={styles.boldText}>
-          {t('suggestions')}:
-        </Text>
-      </View>
-      <View style={styles.infoRow}>
-        <CircleView size={6} backgroundColor={Colors.Gray8} />
-        <Text style={styles.noticeText}>{t('check_the_power')}</Text>
+      <View style={styles.connectStatus}>
+        <WifiOffIcon width={16} height={16} />
+        <DisplayTextDisconnected type={type} />
       </View>
-      <View style={styles.infoRow}>
-        <CircleView size={6} backgroundColor={Colors.Gray8} />
-        <Text style={styles.noticeText}>{t('check_the_wifi')}</Text>
+      <View style={styles.disconnectSuggestionContainer}>
+        <View style={styles.row}>
+          <IconOutline name={'alert'} size={16} />
+          <Text bold style={styles.boldText}>
+            {t('suggestions')}:
+          </Text>
+        </View>
+        <View style={styles.infoRow}>
+          <CircleView size={6} backgroundColor={Colors.Gray8} />
+          <Text style={styles.noticeText}>{t('check_the_power')}</Text>
+        </View>
+        <View style={styles.infoRow}>
+          <CircleView size={6} backgroundColor={Colors.Gray8} />
+          <Text style={styles.noticeText}>{t('check_the_wifi')}</Text>
+        </View>
       </View>
     </View>
-  </View>
-));
+  );
+});
 
 const styles = StyleSheet.create({
   statusContainer: {