@eohjsc/react-native-smart-city 0.3.7 → 0.3.10

package/src/commons/FieldTemplate/ScheduleField/__test__/index.test.js

@@ -0,0 +1,179 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import ScheduleField from '../index';
+import { TESTID } from '../../../../configs/Constants';
+import { TouchableOpacity } from 'react-native';
+
+const mockSetState = jest.fn();
+
+const wrapComponent = (
+  dataItem = {
+    type: 'schedule',
+    key: 'schedule',
+    action: {
+      type: 'action_zigbee',
+      id: {
+        always: 2,
+        recurring: 4,
+        temporary: 5,
+      },
+    },
+  },
+  index = 0,
+  dataForm = [
+    {
+      type: 'schedule',
+      key: 'schedule',
+      action: {
+        type: 'action_zigbee',
+        id: {
+          always: 2,
+          recurring: 4,
+          temporary: 5,
+        },
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ScheduleField
+      dataItem={dataItem}
+      index={index}
+      setDataForm={mockSetState}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test ScheduleField', () => {
+  let tree;
+  beforeEach(() => {
+    Date.now = jest.fn(() => new Date('2022-05-30T15:50:36+01:00'));
+  });
+  afterEach(() => {
+    mockSetState.mockClear();
+  });
+
+  const onPressRecurring = async (instance, schedule) => {
+    await act(async () => {
+      await schedule.props.onPress();
+    });
+    const recurring = instance.find(
+      (el) =>
+        el.props.testID === '0' + TESTID.RECURRING_REPEAT_ITEM &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await recurring.props.onPress();
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: {
+          access_schedule: 'recurring',
+          recurring_time_end: '2022-05-30T16:50:36+01:00',
+          recurring_time_repeat: ['6'],
+          recurring_time_start: '2022-05-30T15:50:36+01:00',
+        },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 4,
+      },
+    ]);
+    mockSetState.mockClear();
+  };
+
+  const onPressTemporary = async (instance, schedule) => {
+    await act(async () => {
+      await schedule.props.onPress();
+    });
+
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: {
+          access_schedule: 'temporary',
+          temporary_time_end: '2022-05-31T15:50:36+01:00',
+          temporary_time_start: '2022-05-30T15:50:36+01:00',
+        },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 5,
+      },
+    ]);
+    const temporaryEnd = instance.find(
+      (el) =>
+        el.props.testID === TESTID.TEMPORARY_END_TEXT_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await temporaryEnd.props.onPress();
+    });
+    const dateTimePicker = instance.find(
+      (el) => el.props.testID === TESTID.WHEEL_DATE_TIME_PICKER
+    );
+    expect(dateTimePicker.props.isVisible).toBeTruthy();
+    const popupDateTimePickerDone = instance.find(
+      (el) =>
+        el.props.testID ===
+          `${TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}` &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await popupDateTimePickerDone.props.onPress();
+    });
+    expect(dateTimePicker.props.isVisible).toBeFalsy();
+    mockSetState.mockClear();
+  };
+
+  test('render ScheduleField choose schedule', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    expect(mockSetState).toBeCalledWith([
+      {
+        key: 'schedule',
+        type: 'schedule',
+        data: { access_schedule: 'always' },
+        valid: true,
+        action: {
+          id: {
+            always: 2,
+            recurring: 4,
+            temporary: 5,
+          },
+          type: 'action_zigbee',
+        },
+        action_zigbee: 2,
+      },
+    ]);
+    mockSetState.mockClear();
+    const instance = tree.root;
+    const schedule = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.ACCESS_SCHEDULE_RADIO_BUTTON &&
+        el.type === TouchableOpacity
+    );
+    expect(schedule).toHaveLength(3);
+    await onPressRecurring(instance, schedule[1]);
+    await onPressTemporary(instance, schedule[2]);
+  });
+});

package/src/commons/FieldTemplate/ScheduleField/index.js

@@ -0,0 +1,176 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import styles from './ScheduleFieldStyles';
+import moment from 'moment';
+
+import Text from '../../Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import AccessScheduleItem from '../../../screens/GuestInfo/components/AccessScheduleItem';
+import RecurringDetail from '../../../screens/GuestInfo/components/RecurringDetail';
+import TemporaryDetail from '../../../screens/GuestInfo/components/TemporaryDetail';
+import { useBoolean } from '../../../hooks/Common';
+import WheelDateTimePicker from '../../WheelDateTimePicker';
+import { ACCESS_SCHEDULE } from '../../../screens/GuestInfo/constant';
+
+const ScheduleField = ({ dataItem, index, setDataForm, dataForm }) => {
+  const t = useTranslations();
+  const [accessSchedule, setAccessSchedule] = useState('always');
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment(),
+    setter: null,
+  });
+  const [recurringTimeStart, setRecurringTimeStart] = useState(moment());
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState(
+    moment().add(1, 'hours')
+  );
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState([]);
+  const [temporaryTimeStart, setTemporaryTimeStart] = useState(moment());
+  const [temporaryTimeEnd, setTemporaryTimeEnd] = useState(
+    moment().add(1, 'days')
+  );
+  useEffect(() => {
+    if (accessSchedule === ACCESS_SCHEDULE.ALWAYS) {
+      dataItem.valid = true;
+      dataItem.data = {
+        access_schedule: accessSchedule,
+      };
+    } else if (accessSchedule === ACCESS_SCHEDULE.RECURRING) {
+      dataItem.valid = true;
+      dataItem.data = {
+        access_schedule: accessSchedule,
+        recurring_time_start: recurringTimeStart.format(),
+        recurring_time_end: recurringTimeEnd.format(),
+        recurring_time_repeat: recurringTimeRepeat,
+      };
+    } else if (accessSchedule === ACCESS_SCHEDULE.TEMPORARY) {
+      if (temporaryTimeStart > temporaryTimeEnd) {
+        dataItem.valid = false;
+      } else {
+        dataItem.valid = true;
+        dataItem.data = {
+          access_schedule: accessSchedule,
+          temporary_time_start: temporaryTimeStart.format(),
+          temporary_time_end: temporaryTimeEnd.format(),
+        };
+      }
+    }
+    dataItem[dataItem.action.type] = dataItem.action.id[accessSchedule];
+    dataForm[index] = dataItem;
+    setDataForm([...dataForm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    accessSchedule,
+    recurringTimeEnd,
+    recurringTimeRepeat,
+    recurringTimeStart,
+    temporaryTimeEnd,
+    temporaryTimeStart,
+  ]);
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      releaseLockShowing();
+      setStateDateTimePicker((state) => ({
+        ...state,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [releaseLockShowing]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    acquireLockShowing();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      isVisible: false,
+    }));
+  }, [setStateDateTimePicker, acquireLockShowing]);
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = stateDateTimePicker.setter;
+      setter && setter(moment(timeData));
+    },
+    [stateDateTimePicker]
+  );
+
+  const listAccessSchedule = useMemo(
+    () => [
+      {
+        text: t(`${ACCESS_SCHEDULE.ALWAYS}`),
+        value: ACCESS_SCHEDULE.ALWAYS,
+        detail: () => <></>,
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.RECURRING}`),
+        value: ACCESS_SCHEDULE.RECURRING,
+        detail: () => (
+          <RecurringDetail
+            onShowSetDateTime={onShowSetDateTime}
+            recurringTimeStart={recurringTimeStart}
+            recurringTimeEnd={recurringTimeEnd}
+            recurringTimeRepeat={recurringTimeRepeat}
+            setRecurringTimeStart={setRecurringTimeStart}
+            setRecurringTimeEnd={setRecurringTimeEnd}
+            setRecurringTimeRepeat={setRecurringTimeRepeat}
+          />
+        ),
+      },
+      {
+        text: t(`${ACCESS_SCHEDULE.TEMPORARY}`),
+        value: ACCESS_SCHEDULE.TEMPORARY,
+        detail: () => (
+          <TemporaryDetail
+            onShowSetDateTime={onShowSetDateTime}
+            temporaryTimeStart={temporaryTimeStart}
+            temporaryTimeEnd={temporaryTimeEnd}
+            setTemporaryTimeStart={setTemporaryTimeStart}
+            setTemporaryTimeEnd={setTemporaryTimeEnd}
+          />
+        ),
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      onShowSetDateTime,
+      recurringTimeEnd,
+      recurringTimeRepeat,
+      recurringTimeStart,
+      temporaryTimeEnd,
+      temporaryTimeStart,
+    ]
+  );
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{t('access_schedule')}</Text>
+
+      {listAccessSchedule.map((item, i) => (
+        <AccessScheduleItem
+          key={i}
+          item={item}
+          isSelected={item.value === accessSchedule}
+          onSelect={setAccessSchedule}
+          isSetupGeneratePasscode
+        />
+      ))}
+      <WheelDateTimePicker
+        mode={stateDateTimePicker.mode}
+        isVisible={stateDateTimePicker.isVisible && lockShowing}
+        defaultValue={stateDateTimePicker.defaultValue}
+        onPicked={onDateTimePicked}
+        onCancel={onHideSetDateTime}
+        onHide={releaseLockShowing}
+      />
+    </View>
+  );
+};
+
+export default memo(ScheduleField);

package/src/commons/Form/CurrencyInput.js

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
 import {
   View,
   TextInput,
@@ -6,6 +12,7 @@ import {
   TouchableWithoutFeedback,
   Platform,
 } from 'react-native';
+import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -125,6 +132,13 @@ const CurrencyInput = ({
     return textInputValue.toString().length < 2 ? -12 : 0;
   }, [textInputValue]);
 
+  useEffect(() => {
+    const isAndroid = Platform.OS === 'android';
+    isAndroid && AndroidKeyboardAdjust.setAdjustResize();
+
+    return () => isAndroid && AndroidKeyboardAdjust.setAdjustPan();
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
       <View style={styles.wrap}>

package/src/commons/Form/TextInputPassword.js

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     paddingTop: 12,
     paddingBottom: 12,
-    paddingHorizontal: 20,
+    paddingRight: 20,
     backgroundColor: Colors.White,
     // ...Theme.shadow,
     shadowColor: Colors.Gray13,

package/src/commons/FullLoading/index.js

@@ -22,7 +22,8 @@ const styles = StyleSheet.create({
     left: 0,
     bottom: 0,
     right: 0,
-    zIndex: 10,
+    zIndex: 1000, // works on ios
+    elevation: 1000, // works on android
   },
   background: {
     backgroundColor: colorOpacity(Colors.White, 0.8),

package/src/commons/Header/HeaderCustom.js

@@ -6,6 +6,7 @@ import { Icon } from '@ant-design/react-native';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import { notImplemented } from '../../utils/Utils';
 
 const HeaderCustom = ({
   title = '',
@@ -33,7 +34,7 @@ const HeaderCustom = ({
   };
 
   const handleClose = useCallback(() => {
-    onClose ? onClose() : alert(t('feature_under_development'));
+    onClose ? onClose() : notImplemented(t);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/commons/HeaderAni/index.js

@@ -6,6 +6,7 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import Text from '../../commons/Text';
 import { Colors, Constants } from '../../configs';
+import { TESTID } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 44;
@@ -89,7 +90,11 @@ const HeaderAni = memo(
             },
           ]}
         >
-          <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
+          <TouchableOpacity
+            style={styles.btnBack}
+            onPress={onPressLeft}
+            testID={TESTID.ICON_BACK}
+          >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/HorizontalPicker/index.js

@@ -76,8 +76,8 @@ const HorizontalPicker = ({
   }, [maximum, minimum, time]);
 
   useEffect(() => {
-    const scrollListener = scrollX.addListener(({ value }) => {
-      isCanChangeValue && onChangeValue && onChangeValue(value);
+    const scrollListener = scrollX.addListener(({ value: scrollValue }) => {
+      isCanChangeValue && onChangeValue && onChangeValue(scrollValue);
     });
     return () => scrollX.removeListener(scrollListener);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/commons/MediaPlayerDetail/Styles/MediaPlayerDetailStyles.js

@@ -68,12 +68,6 @@ export default StyleSheet.create({
     right: 0,
     bottom: 0,
   },
-  firstOpenCamera: {
-    zIndex: -9999,
-    position: 'absolute',
-    width: 1,
-    height: 1,
-  },
   loading: {
     position: 'absolute',
     zIndex: 10,

package/src/commons/MediaPlayerDetail/index.js

@@ -13,7 +13,6 @@ import {
   Text,
   TouchableOpacity,
   Platform,
-  ActivityIndicator,
 } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -43,18 +42,14 @@ const MediaPlayerDetail = ({
   height,
 }) => {
   const { setAction } = useContext(SCContext);
-  const { isFirstOpenCamera, camera_opened } = useSCContextSelector(
-    (state) => state.app
-  );
+  const { camera_opened } = useSCContextSelector((state) => state.app);
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
 
   const onTapPause = useCallback(() => {
-    if (!isFirstOpenCamera) {
-      setPaused(false);
-      id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
-    }
-  }, [id, isFirstOpenCamera, setAction]);
+    setPaused(false);
+    id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
+  }, [id, setAction]);
 
   const onTapGoDetail = useCallback(() => {
     if (!paused) {
@@ -72,40 +67,46 @@ const MediaPlayerDetail = ({
   }, []);
 
   const getWidthHeight = useCallback(() => {
-    let width = 0,
-      height = 0;
+    let newWidth = 0,
+      newHeight = 0;
     switch (amount) {
       case 1:
-        width = Constants.width;
-        height = 224;
+        newWidth = Constants.width;
+        newHeight = 224;
         break;
       case 4:
-        width = Constants.width / 2;
-        height = 112;
+        newWidth =
+          Constants.width /
+          (Platform.OS === 'ios' && Constants.width < 400 ? 1.5 : 2);
+        newHeight = 112;
         break;
       case 6:
-        width = Constants.width / 3;
-        height = 112;
+        newWidth = Constants.width / 3;
+        newHeight = 112;
         break;
       default:
-        width = Constants.width - 28;
-        height = 162;
+        newWidth = Constants.width - 28;
+        newHeight = 162;
         break;
     }
     return {
-      width,
-      height,
+      width: newWidth,
+      height: newHeight,
     };
   }, [amount]);
 
   const renderCamera = useMemo(() => {
+    if (!uri) {
+      return null;
+    }
     return (
       <VLCPlayer
         autoAspectRatio={true}
+        resizeMode="cover"
         videoAspectRatio={
-          width && height
-            ? `${width}:${height}`
-            : `${getWidthHeight().width}:${getWidthHeight().height}`
+          amount
+            ? `${getWidthHeight().width}:${getWidthHeight().height}`
+            : `${width}:${height}`
         }
         source={{
           initType: 2,
@@ -126,31 +127,20 @@ const MediaPlayerDetail = ({
           styles.player,
           style,
           {
-            width: width || getWidthHeight().width,
-            height: height || getWidthHeight().height,
+            width: amount ? getWidthHeight().width : width,
+            height: amount ? getWidthHeight().height : height,
           },
-          isFirstOpenCamera && styles.firstOpenCamera,
         ]}
         isLive={true}
       />
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uri, isFirstOpenCamera]);
+  }, [uri]);
 
   useEffect(() => {
     setPaused(isPaused);
   }, [isPaused]);
 
-  useEffect(() => {
-    if (isFirstOpenCamera) {
-      const to = setTimeout(() => {
-        setAction(Action.IS_FIRST_OPEN_CAMERA, false);
-        clearTimeout(to);
-      }, 1000);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFirstOpenCamera]);
-
   useEffect(() => {
     if (id && !(camera_opened || []).some((item) => item === id)) {
       setPaused(true);
@@ -161,14 +151,6 @@ const MediaPlayerDetail = ({
   const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={[styles.wrap, wrapStyles]}>
-      {isFirstOpenCamera && Platform.OS === 'ios' && (
-        <>
-          {renderCamera}
-          <View style={styles.loading}>
-            <ActivityIndicator size={'small'} color={Colors.Primary} />
-          </View>
-        </>
-      )}
       <View style={[styles.loadingWrap]}>
         <Text style={styles.loadingText}>{t('loading')}</Text>
       </View>
@@ -194,7 +176,7 @@ const MediaPlayerDetail = ({
             />
           </View>
         ) : (
-          !isFirstOpenCamera && renderCamera
+          renderCamera
         )}
 
         <View style={styles.buttonView}>

package/src/commons/MenuActionAddnew/index.js

@@ -59,6 +59,7 @@ const MenuActionAddnew = memo(
               data={dataActions}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
+              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionList/index.js

@@ -57,6 +57,7 @@ const MenuActionList = memo(
               data={listItem}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
+              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionMore/index.js

@@ -50,7 +50,7 @@ const MenuActionMore = memo(
         isVisible={isVisible}
         arrowStyle={styles.wrap}
       >
-        <ScrollView>
+        <ScrollView scrollIndicatorInsets={{ right: 1 }}>
           {listMenuItem.map((item, index) => {
             return (
               <TouchableOpacity