@eohjsc/react-native-smart-city 0.3.91 → 0.3.93

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

@@ -1,13 +1,23 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import { Switch } from 'react-native';
 
 import { mockSCStore } from '../../../context/mockStore';
 import { SCProvider } from '../../../context';
 import SwitchButtonTemplate from '../OnOffTemplate/SwitchButtonTemplate';
+import { useConfigGlobalState } from '../../../iot/states';
 
-const wrapComponent = (actionGroup, mockDoAction) => (
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
+
+const wrapComponent = (actionGroup, mockDoAction, isOn) => (
   <SCProvider initState={mockSCStore({})}>
-    <SwitchButtonTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+    <SwitchButtonTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      isOn={isOn}
+    />
   </SCProvider>
 );
 
@@ -50,37 +60,64 @@ describe('Test SwitchButtonTemplate', () => {
       action_off_data: action_off_data,
       icon_off: 'caret-up',
       text_off: 'OFF',
+      config: 1,
     },
   };
   let wrapper;
 
-  const assertRender = async () => {
+  const assertRender = async (state) => {
     const mockDoAction = jest.fn();
 
     await act(async () => {
-      wrapper = create(wrapComponent(actionGroup, mockDoAction));
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction));
     });
 
     const renderJson = wrapper.toJSON();
+    const switchButton = wrapper.root.findByType(Switch);
+
     expect(renderJson[1].props?.visible).toEqual(false);
     expect(renderJson[1]?.type).toEqual('Modal');
+    expect(switchButton.props.value).toEqual(state);
   };
 
   it('render state on', async () => {
-    await assertRender(true, 'ON');
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 1,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender(true);
   });
 
   it('render state off', async () => {
-    await assertRender(false, 'OFF');
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        1: {
+          value: 0,
+        },
+      },
+      jest.fn(),
+    ]);
+    await assertRender(false);
   });
 
   const assertActionCall = async (state, action_data) => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = create(wrapComponent(actionGroup, mockDoAction));
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, state));
     });
-
     expect(mockDoAction).not.toHaveBeenCalled();
+    const root = wrapper.root;
+
+    const item = root.findByType(Switch);
+    await act(async () => {
+      item.props.onValueChange();
+    });
+
+    expect(mockDoAction).toHaveBeenCalledWith(action_data, null);
   };
 
   it('action state on', async () => {

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

@@ -487,25 +487,6 @@ describe('Test ActionGroup', () => {
     expect(options).toHaveLength(actionGroup.configuration.options.length);
   });
 
-  it('render CurtainButtonTemplate', async () => {
-    // todo Bang remove
-    Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
-    const actionGroup = {
-      template: 'curtain_action_template',
-      title: 'Timer',
-      configuration: {},
-    };
-    const mockDoAction = jest.fn();
-    await act(async () => {
-      wrapper = renderer.create(
-        wrapComponent(actionGroup, mockDoAction, sensor)
-      );
-    });
-    const instance = wrapper.root;
-    const texts = instance.findAllByType(TouchableOpacity);
-    expect(texts).toHaveLength(3);
-  });
-
   it('render SmartTiviActionTemplate', async () => {
     Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
     const actionGroup = {

package/src/commons/ActionGroup/index.js

@@ -7,7 +7,6 @@ import NumberUpDownActionTemplate from './NumberUpDownActionTemplate';
 import OptionsDropdownActionTemplate from './OptionsDropdownActionTemplate';
 import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
-import CurtainButtonTemplate from './CurtainButtonTemplate';
 import SmartTiviActionTemplate from './SmartTiviActionTemplate/SmartTiviActionTemplate';
 import ColorPickerTemplate from './ColorPickerTemplate';
 import SliderRangeTemplate from './SliderRangeTemplate';
@@ -37,8 +36,6 @@ export const getActionComponent = (template) => {
       return OptionsDropdownActionTemplate;
     case 'TimerActionTemplate':
       return TimerActionTemplate;
-    case 'curtain_action_template':
-      return CurtainButtonTemplate;
     case 'SmartTiviActionTemplate':
       return SmartTiviActionTemplate;
     case 'color_picker_template':

package/src/commons/ActionTemplate/CurtainAction.js

@@ -37,19 +37,19 @@ const CurtainAction = ({ configuration, onPress, template }) => {
   return (
     <>
       <TouchableOpacity onPress={onPressActionClose}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text1}
         </Text>
       </TouchableOpacity>
 
       <TouchableOpacity onPress={onPressActionStop}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text2}
         </Text>
       </TouchableOpacity>
 
       <TouchableOpacity onPress={onPressActionOpen}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text3}
         </Text>
       </TouchableOpacity>

package/src/commons/ActionTemplate/CurtainActionStyles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/ActionTemplate/OnOffButtonAction.js

@@ -33,7 +33,7 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
       <TouchableOpacity onPress={onPressActionOn}>
         <Text
           type="H4"
-          style={styles.textwithline}
+          style={styles.textWithLine}
           accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
         >
           {title} {text_on}
@@ -42,7 +42,7 @@ const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
       <TouchableOpacity onPress={onPressActionOff}>
         <Text
           type="H4"
-          style={styles.textwithline}
+          style={styles.textWithLine}
           accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
         >
           {title} {text_off}

package/src/commons/ActionTemplate/OnOffButtonActionStyles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/ActionTemplate/OnOffSimpleAction.js

@@ -36,12 +36,12 @@ const OnOffSimpleAction = ({ configuration, onPress, template }) => {
         accessibilityLabel={AccessibilityLabel.ON_OFF_SIMPLE_ACTION_ON}
         onPress={onPressActionOn}
       >
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {t('text_on')}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity onPress={onPressActionOff}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {t('text_off')}
         </Text>
       </TouchableOpacity>

package/src/commons/ActionTemplate/OnOffSimpleActionStyles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/ActionTemplate/OnOffSmartLockAction.js

@@ -31,13 +31,13 @@ const OnOffSmartLockAction = ({ configuration, onPress, template }) => {
   return (
     <>
       <TouchableOpacity onPress={onPressActionClose}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text_off}
         </Text>
       </TouchableOpacity>
 
       <TouchableOpacity onPress={onPressActionOpen}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text_on}
         </Text>
       </TouchableOpacity>

package/src/commons/ActionTemplate/OnOffSmartLockActionStyles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/ActionTemplate/OneButtonAction.js

@@ -17,7 +17,7 @@ const OneButtonAction = ({ configuration, onPress, template }) => {
   return (
     <>
       <TouchableOpacity onPress={onPressAction}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text}
         </Text>
       </TouchableOpacity>

package/src/commons/ActionTemplate/OneButtonActionStyles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/ActionTemplate/ThreeButtonAction.js

@@ -35,19 +35,19 @@ const ThreeButtonAction = ({ configuration, onPress, template }) => {
   return (
     <>
       <TouchableOpacity onPress={onPressAction1}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text1}
         </Text>
       </TouchableOpacity>
 
       <TouchableOpacity onPress={onPressAction2}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text2}
         </Text>
       </TouchableOpacity>
 
       <TouchableOpacity onPress={onPressAction3}>
-        <Text type="H4" style={styles.textwithline}>
+        <Text type="H4" style={styles.textWithLine}>
           {text3}
         </Text>
       </TouchableOpacity>

package/src/commons/ActionTemplate/ThreeButtonActionStyles.js

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  textwithline: {
+  textWithLine: {
     paddingBottom: 16,
     paddingTop: 16,
     borderBottomWidth: 1,

package/src/commons/AlertAction/index.js

@@ -80,6 +80,8 @@ const AlertAction = ({
             styleButtonLeft={boxLeftButtonStyle}
             styleButtonRight={boxRightButtonStyle}
             accessibilityLabelPrefix={accessibilityLabelPrefix}
+            wrapStyle={styles.wrapViewButtonStyle}
+            disableKeyBoardAnimated
           />
         </View>
       </Animated.View>
@@ -121,6 +123,9 @@ const styles = StyleSheet.create({
   descriptionText: {
     paddingHorizontal: 16,
   },
+  wrapViewButtonStyle: {
+    position: 'relative',
+  },
 });
 
 export default AlertAction;

package/src/commons/Auth/AccountList.js

@@ -7,7 +7,7 @@ const AccountList = ({ accounts }) => {
   return (
     <ScrollView scrollIndicatorInsets={{ right: 1 }}>
       {accounts.map((account) => (
-        <AccountItem key={account.id || account.name} account={account} />
+        <AccountItem key={account.id} account={account} />
       ))}
     </ScrollView>
   );

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

@@ -10,7 +10,7 @@ describe('Test OtpInputList', () => {
   let tree;
 
   for (const code of list_code) {
-    test(`create OtpInputList ${code} onfinishInputCode is func`, async () => {
+    it(`create OtpInputList ${code} onfinishInputCode is func`, async () => {
       await act(async () => {
         tree = await renderer.create(
           <OtpInputList onfinishInputCode={mockFunc} />
@@ -19,14 +19,12 @@ describe('Test OtpInputList', () => {
 
       const instance = tree.root;
       const textInputs = instance.findAllByType(TextInput);
-      await Promise.all(
-        textInputs.map(async (el, index) => {
-          await act(async () => {
-            el.props.onFocus(code); // TODO check onFocus(code)
-            el.props.onChangeText('1');
-          });
-        })
-      );
+      for (let index = 0; index < textInputs.length; index++) {
+        await act(async () => {
+          textInputs[index].props.onFocus(code);
+          textInputs[index].props.onChangeText('1');
+        });
+      }
       expect(mockFunc).toHaveBeenCalledWith('111111');
     });
   }
@@ -37,14 +35,12 @@ describe('Test OtpInputList', () => {
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TextInput);
-    await Promise.all(
-      textInputs.map(async (el, index) => {
-        await act(async () => {
-          el.props.onFocus();
-          el.props.onChangeText('');
-        });
-      })
-    );
+    for (let index = 0; index < textInputs.length; index++) {
+      await act(async () => {
+        textInputs[index].props.onFocus();
+        textInputs[index].props.onChangeText('1');
+      });
+    }
     expect(mockFunc).toHaveBeenCalledWith('111111');
   });
 });

package/src/commons/Automate/ItemAutomate.js

@@ -5,20 +5,26 @@ import { Colors } from '../../configs';
 import styles from './ItemAutomateStyles';
 import { AUTOMATES } from '../../configs/Constants';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import { generateAutomationConditionText } from '../../screens/Automate/ScriptDetail/utils';
+import { useGetEvaluateValue } from '../../screens/Device/hooks/useEvaluateValue';
 
 const ItemAutomate = ({
-  type,
+  automate,
   isSelected = false,
   disabledOnPress = false,
-  textCondition,
   index,
   setSelectedIndex,
   onPress,
 }) => {
   const t = useTranslations();
-  const item = AUTOMATES[type];
-  const isItemOneTap = AUTOMATES[type] === AUTOMATES.one_tap;
+  const item = AUTOMATES[automate?.type];
+  const isItemOneTap = AUTOMATES[automate?.type] === AUTOMATES.one_tap;
   const Icon = item?.icon;
+  const valueEvaluation = useGetEvaluateValue(automate?.config);
+
+  const textCondition = useMemo(() => {
+    return generateAutomationConditionText(automate, valueEvaluation, t);
+  }, [automate, t, valueEvaluation]);
 
   const renderText = useMemo(() => {
     if (textCondition) {

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

@@ -7,20 +7,17 @@ import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
 import ItemAutomate from '../ItemAutomate';
 
-const wrapComponent = (rest) => (
+const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
-    <ItemAutomate {...rest} />
+    <ItemAutomate {...props} />
   </SCProvider>
 );
 
 describe('Test ItemAutomate', () => {
   let tree;
-  let defaultProps = {
-    type: 'one_tap',
-  };
   it('Test render', async () => {
     await act(async () => {
-      tree = await create(wrapComponent(defaultProps));
+      tree = await create(wrapComponent({ automate: { type: 'one_tap' } }));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
@@ -29,12 +26,15 @@ describe('Test ItemAutomate', () => {
 
   it('Test render TouchableOpacity', async () => {
     const mockOnPress = jest.fn();
-    defaultProps = {
-      type: 'one_tap',
-      onPress: mockOnPress,
-    };
     await act(async () => {
-      tree = await create(wrapComponent(defaultProps));
+      tree = await create(
+        wrapComponent({
+          automate: {
+            type: 'one_tap',
+          },
+          onPress: mockOnPress,
+        })
+      );
     });
     const instance = tree.root;
     const touchableOpacities = instance.findAllByType(TouchableOpacity);

package/src/commons/BottomButtonView/index.js

@@ -1,7 +1,8 @@
-import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { memo, useState, useEffect } from 'react';
+import { StyleSheet, Animated, Easing, Platform } from 'react-native';
 
 import { AccessibilityLabel } from '../../configs/Constants';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import Button from '../Button';
 
 const BottomButtonView = memo(
@@ -20,13 +21,28 @@ const BottomButtonView = memo(
     typeMain = 'primary',
     typeSecondary = 'cancel',
     accessibilityLabelPrefix = '',
+    disableBackgroundMainButton = false,
+    disableBackgroundSecondButton = false,
   }) => {
+    const transY = useKeyboardAnimated();
+    const [keyboardAnim] = useState(new Animated.Value(0));
+
+    useEffect(() => {
+      Animated.timing(keyboardAnim, {
+        toValue: transY,
+        duration: Platform.OS === 'ios' ? 220 : 0,
+        easing: Easing.linear(),
+        useNativeDriver: false,
+      }).start();
+    }, [keyboardAnim, transY]);
+
     return (
-      <View
+      <Animated.View
         style={[
           typeMain === 'CardShadow'
             ? styleCustom.container1
             : styleCustom.container,
+          { bottom: keyboardAnim },
           rowButton && styleCustom.horizontalContainer,
           style,
         ]}
@@ -42,6 +58,7 @@ const BottomButtonView = memo(
             textType={textTypeMain}
             style={rowButton && styleCustom.buttonMainRow}
             accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_MAIN}`}
+            disableBackground={disableBackgroundMainButton}
           />
         )}
         {secondaryTitle && (
@@ -56,9 +73,10 @@ const BottomButtonView = memo(
                 : styleCustom.buttonSecondaryColumn
             }
             accessibilityLabel={`${accessibilityLabelPrefix}${AccessibilityLabel.BOTTOM_VIEW_SECONDARY}`}
+            disableBackground={disableBackgroundSecondButton}
           />
         )}
-      </View>
+      </Animated.View>
     );
   }
 );

package/src/commons/Button/index.js

@@ -133,6 +133,7 @@ export default ({
   textSemiBold = true,
   style,
   accessibilityLabel,
+  disableBackground = false,
 }) => {
   const styleButton = ButtonStyle[type];
   const textColor = TextColor[type];
@@ -153,6 +154,7 @@ export default ({
         isCardShadow && styles.buttonLeft,
         styleButton,
         style,
+        disableBackground && styles.disableBackground,
       ]}
       onPress={onPress}
       disabled={isDisabled}
@@ -202,4 +204,7 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     backgroundColor: Colors.Gray1,
   },
+  disableBackground: {
+    backgroundColor: Colors.Transparent,
+  },
 });

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';

package/src/commons/Device/DeviceAlertStatus.js

@@ -72,8 +72,9 @@ const DeviceAlertStatus = memo(
     return (
       <View style={[style, stylesOffset.moveDownOffset]}>
         {listStatus &&
-          listStatus.map((status) => (
+          listStatus.map((status, index) => (
             <AlertStatusMachine
+              key={index}
               accessibilityLabel={AccessibilityLabel.ALERT_STATUS_MACHINE}
               message={
                 (status.standard && t(status.standard)) ||

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -9,7 +9,6 @@ import { RowUser } from '../../RowUser';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
-import _ from 'lodash';
 
 const { standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth + 86
@@ -17,6 +16,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 
 const EmergencyDetail = memo(({ item }) => {
   const t = useTranslations();
+  const { uri, preview_uri } = item?.configuration?.camera;
   const groupId = item?.configuration?.device?.group?.id;
   const isFocused = useIsFocused();
   const { listContacts, getListContacts } = useEmeragencyContacts();
@@ -35,8 +35,10 @@ const EmergencyDetail = memo(({ item }) => {
       <View style={styles.first}>
         <Text type="H4">{t('camera')}</Text>
         <MediaPlayer
-          uri={_.get(item, 'configuration.uri', '')}
+          uri={uri}
+          previewUri={preview_uri}
           style={styles.camera}
+          key={'camera-emergency'}
         />
       </View>
       <View style={styles.second}>

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -28,8 +28,10 @@ describe('Test EmergencyDetail', () => {
   it('create EmergencyDetail', async () => {
     const item = {
       configuration: {
-        uri: '123',
-        preview_uri: '123',
+        camera: {
+          uri: '123',
+          preview_uri: '123',
+        },
         device: {
           group: {
             id: 1,

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

@@ -15,7 +15,7 @@ const ProgressBar = memo(({ data = [], item }) => {
   }, [item?.configuration?.max_value]);
   const { value = 0, measure, unit } = data.length ? data[0] : {};
   const percent = value / maxValue; // a number between 0 and 1
-
+  const isNotValue = ['', null, undefined, NaN].includes(value);
   return (
     <View style={styles.container}>
       <Text size={16} style={styles.textLabel}>
@@ -28,19 +28,15 @@ const ProgressBar = memo(({ data = [], item }) => {
 
       <View style={styles.wrapProgressBar}>
         <Progress.Bar
-          progress={percent}
+          style={styles.progressBar}
+          width={null}
           height={40}
-          width={200}
-          color={Colors.Blue16}
+          progress={percent}
           unfilledColor={Colors.Blue15}
-          borderWidth={0}
-          borderRadius={10}
         />
-        <View>
-          <Text numberOfLines={1} style={styles.textValue}>
-            {value}
-          </Text>
-        </View>
+        <Text numberOfLines={1} style={styles.textValue}>
+          {isNotValue ? '--' : value}
+        </Text>
       </View>
     </View>
   );