@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

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/AlertAction/__test__/AlertAction.test.js

@@ -5,9 +5,9 @@ import AlertAction from '../index';
 
 describe('Test AlertAction', () => {
   let tree;
-  test('create AlertAction', () => {
-    act(() => {
-      tree = renderer.create(
+  test('create AlertAction', async () => {
+    await act(async () => {
+      tree = await renderer.create(
         <AlertAction visible={false} hideModal={true} title={''} />
       );
     });
@@ -16,9 +16,9 @@ describe('Test AlertAction', () => {
     expect(textInputs.length).toBe(1);
   });
 
-  test('create AlertAction have message', () => {
-    act(() => {
-      tree = renderer.create(
+  test('create AlertAction have message', async () => {
+    await act(async () => {
+      tree = await renderer.create(
         <AlertAction
           visible={true}
           hideModal={true}

package/src/commons/AlertAction/index.js

@@ -25,6 +25,8 @@ const AlertAction = ({
       isVisible={visible}
       onBackButtonPress={hideModal}
       onBackdropPress={hideModal}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
       style={styles.container}
     >
       <View style={styles.popoverStyle}>

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,39 @@
+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 = () => {},
+  disabledOnPress = false,
+}) => {
+  const item = AUTOMATES[type];
+  const Icon = item?.icon;
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabledOnPress}
+      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/Automate/__test__/ItemAutomate.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import Text from '../../Text';
+import ItemAutomate from '../ItemAutomate';
+
+describe('Test ItemAutomate', () => {
+  let tree;
+  it('Test render', async () => {
+    await act(() => {
+      tree = create(<ItemAutomate type={'one_tap'} />);
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts).toHaveLength(2);
+  });
+});

package/src/commons/Automate/__test__/ItemScriptAction.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import ItemScriptAction from '../ItemScriptAction';
+
+describe('Test LocationItem', () => {
+  let tree;
+  it('Test render', async () => {
+    await act(() => {
+      tree = create(<ItemScriptAction item={{}} />);
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(7);
+  });
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import BackDefault from '../index';
+
+describe('Test BackDefault', () => {
+  let tree;
+  test('create BackDefault', () => {
+    let goBack = () => {};
+    let color = { color: 'fff' };
+    let fixedHeight = { Height: 50 };
+    act(() => {
+      tree = renderer.create(
+        <BackDefault goBack={goBack} color={color} fixedHeight={fixedHeight} />
+      );
+    });
+    const instance = tree.root;
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons.length).toEqual(1);
+  });
+});

package/src/commons/BottomScrollPicker/index.js

@@ -0,0 +1,62 @@
+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}
+      onBackdropPress={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,41 @@
+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,
+  onBackdropPress,
+  onHide,
+  title,
+  children,
+}) => {
+  return (
+    <Modal
+      isVisible={isVisible}
+      onBackButtonPress={onBackdropPress}
+      onBackdropPress={onBackdropPress}
+      onModalHide={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/ButtonPopup/__test__/__snapshots__/ButtonPopup.test.js.snap

@@ -26,6 +26,7 @@ exports[`Test button popup create button popup 1`] = `
   swipeThreshold={100}
   testID="MODAL_BUTTON_POPUP"
   transparent={true}
+  useNativeDriverForBackdrop={true}
   visible={false}
 >
   <View
@@ -87,6 +88,7 @@ exports[`Test button popup create button popup 1`] = `
       ]
     }
     swipeThreshold={100}
+    useNativeDriverForBackdrop={true}
   >
     <View
       style={

package/src/commons/ButtonPopup/index.js

@@ -31,6 +31,8 @@ const ButtonPopup = ({
       isVisible={visible}
       onBackButtonPress={onClose}
       onBackdropPress={onClose}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
       testID={TESTID.MODAL_BUTTON_POPUP}
     >
       <View style={styles.popoverStyle}>

package/src/commons/Calendar/index.js

@@ -0,0 +1,72 @@
+import React, { useState, useCallback } from 'react';
+import { Image } from 'react-native';
+import { Calendar } from 'react-native-calendars';
+import moment from 'moment';
+import BottomSheet from '../BottomSheet';
+import ViewButtonBottom from '../ViewButtonBottom';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { Images, Colors } from '../../configs';
+import styles from './styles';
+
+export default ({
+  isVisible,
+  onHide,
+  onConfirm,
+  defaultDate = moment(),
+  minDate,
+  maxDate,
+}) => {
+  const t = useTranslations();
+  const [dateSelected, setDateSelected] = useState(defaultDate);
+
+  const onDateSelected = useCallback(
+    (day) => {
+      setDateSelected(moment(day.timestamp));
+    },
+    [setDateSelected]
+  );
+
+  const onCancel = useCallback(() => {
+    onHide && onHide();
+  }, [onHide]);
+
+  const onDone = useCallback(() => {
+    onConfirm && onConfirm(dateSelected);
+    onHide && onHide();
+  }, [onHide, onConfirm, dateSelected]);
+
+  return (
+    <BottomSheet isVisible={isVisible} onBackdropPress={onCancel}>
+      <Calendar
+        style={styles.calendar}
+        onDayPress={onDateSelected}
+        minDate={minDate?.format('YYYY-MM-DD')}
+        maxDate={maxDate?.format('YYYY-MM-DD')}
+        onMonthChange={(month) => {}}
+        onPressArrowLeft={(subtractMonth) => subtractMonth()}
+        onPressArrowRight={(addMonth) => addMonth()}
+        markedDates={{
+          [dateSelected.format('YYYY-MM-DD')]: {
+            selected: true,
+            disableTouchEvent: true,
+            selectedColor: Colors.Primary,
+            selectedTextColor: Colors.White,
+          },
+        }}
+        enableSwipeMonths={true}
+        renderArrow={(direction) => (
+          <Image
+            source={Images.arrowLeft}
+            style={direction !== 'left' && styles.arrowRight}
+          />
+        )}
+      />
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={onCancel}
+        rightTitle={t('done')}
+        onRightClick={onDone}
+      />
+    </BottomSheet>
+  );
+};

package/src/commons/Calendar/styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  calendar: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  arrowRight: {
+    transform: [{ rotate: '180deg' }],
+  },
+});

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 = () => {