@eohjsc/react-native-smart-city 0.5.1 → 0.5.2-rc

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.5.01",
+  "version": "0.5.02-rc",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/OnOffTemplate/OnOffSimpleTemplateStyle.js

@@ -6,6 +6,7 @@ export default StyleSheet.create({
     paddingVertical: 16,
     paddingHorizontal: 16,
     marginHorizontal: 16,
+    marginBottom: 16,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState, useEffect } from 'react';
+import React, { memo, useCallback, useState, useEffect, useRef } from 'react';
 import { Slider } from '@miblanchard/react-native-slider';
 
 import { View } from 'react-native';
@@ -16,6 +16,7 @@ const SliderRangeTemplate = memo(
     const { config, min_value, max_value, action_data } = configuration;
     const [value, setValue] = useState();
     const [processing, setProcessing] = useState(false);
+    const timeout = useRef();
 
     const onSlidingStart = useCallback(() => {
       setProcessing(true);
@@ -27,11 +28,14 @@ const SliderRangeTemplate = memo(
 
     const onSlidingComplete = useCallback(
       async (number) => {
+        clearTimeout(timeout.current);
         await doAction(
           action_data,
           JSON.stringify({ value_brness: number[0], value: number[0] })
         );
-        setProcessing(false);
+        timeout.current = setTimeout(() => {
+          setProcessing(false);
+        }, 3000);
       },
       [action_data, doAction]
     );
@@ -41,6 +45,7 @@ const SliderRangeTemplate = memo(
     }, []);
 
     const onEndEditing = useCallback(async () => {
+      clearTimeout(timeout.current);
       if (value) {
         const data = parseInt(value, 10);
         await doAction(
@@ -51,7 +56,9 @@ const SliderRangeTemplate = memo(
           })
         );
       }
-      setProcessing(false);
+      timeout.current = setTimeout(() => {
+        setProcessing(false);
+      }, 3000);
     }, [action_data, doAction, value]);
 
     useEffect(() => {

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

@@ -56,6 +56,7 @@ describe('Test SliderRangeTemplate', () => {
   });
 
   it('render template SliderRangeTemplate', async () => {
+    jest.useFakeTimers();
     useConfigGlobalState.mockImplementation(() => [{}, jest.fn()]);
     const sensor = { is_managed_by_backend: true, name: 'Sensor' };
     await act(async () => {
@@ -72,6 +73,7 @@ describe('Test SliderRangeTemplate', () => {
     });
     await act(async () => {
       await sliderRange.props.onSlidingComplete([50]);
+      jest.runAllTimers();
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionData,
@@ -124,6 +126,7 @@ describe('Test SliderRangeTemplate', () => {
   });
 
   it('test change input text called doAction', async () => {
+    jest.useFakeTimers();
     useConfigGlobalState.mockImplementation(() => [
       {
         5: {
@@ -147,6 +150,7 @@ describe('Test SliderRangeTemplate', () => {
     });
     await act(async () => {
       await textInput.props.onEndEditing('60');
+      jest.runAllTimers();
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       actionData,

package/src/commons/ProcessingBar/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+
+import Text from '../Text';
+
+import { Colors, Constants } from '../../configs';
+import styles from './styles';
+
+const ProcessingBar = ({ totalPercent }) => {
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.percentLoad}>
+        <Progress.Bar
+          progress={totalPercent}
+          animated={true}
+          color={Colors.Primary}
+          indeterminateAnimationDuration={1000}
+          height={7}
+          width={Constants.width - 80}
+          useNativeDriver={true}
+        />
+        <Text style={styles.textPercentLoad}>{`${parseInt(
+          totalPercent * 100,
+          10
+        )}%`}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default ProcessingBar;

package/src/commons/ProcessingBar/styles.js

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    width: '100%',
+    top: '50%',
+    position: 'absolute',
+  },
+  screen: {
+    flex: 1,
+    width: '100%',
+  },
+  body: {
+    flex: 1,
+    width: '100%',
+    height: 'auto',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  connectingTitle: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    height: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+  modal: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalWrapper: {
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 280,
+  },
+  modalContent: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  txtCenter: {
+    textAlign: 'center',
+  },
+  wrapViewButton: {
+    position: 'relative',
+  },
+});

package/src/configs/AccessibilityLabel.js

@@ -425,6 +425,14 @@ export default {
   ICON_UNIT: 'ICON_UNIT',
   FILTER_SHARING_ITEM: 'FILTER_SHARING_ITEM',
 
+  // Share device
+  SHARE_DEVICE: {
+    CHECK_BOX_CUSTOM: 'CHECK_BOX_CUSTOM',
+    CHECK_BOX_CONFIG: 'CHECK_BOX_CONFIG',
+    EXPAND_END_DEVICE: 'EXPAND_END_DEVICE',
+    CLICK_NAME_END_DEVICE: 'CLICK_NAME_END_DEVICE',
+  },
+
   // Select subunit
 
   SELECT_SUBUNIT_NAME: 'SELECT_SUBUNIT_NAME',

package/src/navigations/AddMemberStack.js

@@ -5,7 +5,8 @@ import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 import SharingInviteMembers from '../screens/Sharing/SelectUser';
-import SharingSelectPermission from '../screens/Sharing/SharingSelectPermission';
+import UpdateShareDevice from '../screens/Sharing/UpdateShareDevice';
+import SelectShareDevice from '../screens/Sharing/SelectShareDevice';
 
 const Stack = createStackNavigator();
 
@@ -22,8 +23,12 @@ export const AddMemberStack = memo(() => {
         component={AddCommonSelectUnit}
       />
       <Stack.Screen
-        name={Route.SharingSelectPermission}
-        component={SharingSelectPermission}
+        name={Route.UpdateShareDevice}
+        component={UpdateShareDevice}
+      />
+      <Stack.Screen
+        name={Route.SelectShareDevice}
+        component={SelectShareDevice}
       />
       <Stack.Screen
         name={Route.SharingInviteMembers}

package/src/screens/AddCommon/SelectUnit.js

@@ -56,7 +56,7 @@ const AddCommonSelectUnit = ({ route }) => {
           });
           break;
         case 'AddMember':
-          navigation.navigate(Routes.SharingSelectPermission, {
+          navigation.navigate(Routes.SelectShareDevice, {
             unit,
           });
           break;

package/src/screens/AddCommon/__test__/SelectUnit.test.js

@@ -131,7 +131,7 @@ describe('Test SelectUnit container', () => {
           });
           break;
         case 'AddMember':
-          expect(mockedNavigate).toBeCalledWith('SharingSelectPermission', {
+          expect(mockedNavigate).toBeCalledWith('SelectShareDevice', {
             unit: { id: 1, name: 'Unit 1' },
           });
           break;

package/src/screens/EnterPassword/index.js

@@ -7,11 +7,12 @@ import _TextInputPassword from '../../commons/Form/TextInputPassword';
 import { axiosPut } from '../../utils/Apis/axios';
 import Text from '../../commons/Text';
 import { Colors, API } from '../../configs';
-import { FullLoading } from '../../commons';
+
 import { AccessibilityLabel } from '../../configs/Constants';
 import Routes from '../../utils/Route';
 
 import styles from './styles';
+import ProcessingBar from '../../commons/ProcessingBar';
 
 const EnterPassword = ({ route }) => {
   const { dataParams, type } = route?.params || {
@@ -78,7 +79,7 @@ const EnterPassword = ({ route }) => {
           </Text>
         </TouchableOpacity>
       </View>
-      {!!loading && <FullLoading />}
+      {!!loading && <ProcessingBar totalPercent={0.1} />}
     </View>
   );
 };

package/src/screens/Sharing/Components/CheckBoxConfig.js

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import { View, Text } from 'react-native';
+import { CheckBoxCustom } from '.';
+import styles from './Styles/CheckBoxConfigStyles';
+import t from '../../../hooks/Common/useTranslations';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+
+const CheckBoxConfig = ({
+  isChecked,
+  onPress,
+  title,
+  indexSubUnit,
+  indexEndDevice,
+  configId,
+  isControl,
+  isConfig,
+  item,
+}) => {
+  const handleOnPress = () => {
+    onPress(indexSubUnit, indexEndDevice, configId, item, isConfig, !isChecked);
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.wrapRow}>
+        <CheckBoxCustom
+          isChecked={isChecked}
+          onPress={handleOnPress}
+          wrapStyle={styles.wrapCheckBoxStyle}
+          accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.CHECK_BOX_CONFIG}-${configId}`}
+        />
+        <Text onPress={handleOnPress} style={styles.titleStyle}>
+          {title}
+        </Text>
+      </View>
+      <View>
+        {isControl && <Text>{t('can_control')}</Text>}
+        {isConfig && <Text>{t('view_only')}</Text>}
+      </View>
+    </View>
+  );
+};
+
+export default memo(CheckBoxConfig);

package/src/screens/Sharing/Components/CheckBoxCustom.js

@@ -1,22 +1,11 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, View, Image } from 'react-native';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import Images from '../../../configs/Images';
 import styles from './Styles/CheckBoxCustomStyles';
 
-const CheckBoxCustom = ({
-  isChecked,
-  onPress,
-  wrapStyle,
-  wrapViewCustom,
-  id,
-}) => {
+const CheckBoxCustom = ({ isChecked, onPress, wrapStyle, wrapViewCustom }) => {
   return (
-    <TouchableOpacity
-      style={[styles.wrapBtn, wrapStyle]}
-      onPress={onPress}
-      accessibilityLabel={`${AccessibilityLabel.CHECK_BOX_CUSTOM}-${id}`}
-    >
+    <TouchableOpacity style={[styles.wrapBtn, wrapStyle]} onPress={onPress}>
       <View
         style={[
           styles.wrapView,

package/src/screens/Sharing/Components/CheckBoxSubUnit.js

@@ -0,0 +1,35 @@
+import React, { memo, useEffect, useState } from 'react';
+import { View, Text } from 'react-native';
+import { CheckBoxCustom } from '.';
+import styles from './Styles/TitleCheckBoxStyles';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+
+const CheckBoxSubUnit = ({ isChecked, onPress, title, indexSubUnit }) => {
+  const [checked, setChecked] = useState(isChecked);
+  const handleOnPress = () => {
+    setChecked(!checked);
+    onPress(indexSubUnit, !checked);
+  };
+
+  useEffect(() => {
+    if (isChecked !== checked) {
+      setChecked(isChecked);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isChecked]);
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.wrapRow}>
+        <CheckBoxCustom
+          isChecked={checked}
+          onPress={handleOnPress}
+          accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.CHECK_BOX_CUSTOM}-${indexSubUnit}`}
+        />
+        <Text onPress={handleOnPress}>{title}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default memo(CheckBoxSubUnit);

package/src/screens/Sharing/Components/EndDevice.js

@@ -0,0 +1,93 @@
+import React, { memo, useMemo, useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { Colors } from '../../../configs';
+import styles from './Styles/DeviceItemStyles';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import IconComponent from '../../../commons/IconComponent';
+import CheckBoxConfig from './CheckBoxConfig';
+
+const EndDevice = ({
+  item,
+  onTickedChild,
+  onTickEndDevice,
+  isItemExpanded,
+  toggleExpandEndDevice,
+  indexSubUnit,
+  indexEndDevice,
+  expandEndDevice,
+}) => {
+  const { name, actions, read_configs, icon_kit, icon, isChecked } = item;
+  const [checked, setChecked] = useState(isChecked);
+
+  const dataConfig = useMemo(() => {
+    return [
+      ...actions.map((i) => ({ ...i, isControl: true })),
+      ...read_configs.map((i) => ({ ...i, isConfig: true })),
+    ];
+  }, [actions, read_configs]);
+
+  const onPressItem = () => {
+    expandEndDevice();
+    onTickEndDevice(indexSubUnit, indexEndDevice, item, !checked);
+    setChecked(!checked);
+  };
+
+  const renderData = useMemo(() => {
+    return dataConfig.map((i) => (
+      <CheckBoxConfig
+        key={i.id}
+        item={item}
+        title={i.name}
+        configId={i.id}
+        isConfig={i.isConfig}
+        isControl={i.isControl}
+        onPress={onTickedChild}
+        isChecked={i.isChecked}
+        indexSubUnit={indexSubUnit}
+        indexEndDevice={indexEndDevice}
+      />
+    ));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataConfig]);
+
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity onPress={onPressItem}>
+        <IconComponent
+          icon={icon_kit || icon}
+          size={20}
+          style={styles.viewLeft}
+        />
+      </TouchableOpacity>
+      <View style={styles.wrapRight}>
+        <View style={styles.viewRight}>
+          <Text
+            numberOfLines={1}
+            style={styles.text}
+            onPress={onPressItem}
+            accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.CLICK_NAME_END_DEVICE}-${indexEndDevice}`}
+          >
+            {name}
+          </Text>
+          {checked && (
+            <IconOutline name={'check'} color={Colors.Primary} size={20} />
+          )}
+
+          {dataConfig.length > 0 && (
+            <IconOutline
+              onPress={() => toggleExpandEndDevice()}
+              name={isItemExpanded ? 'up' : 'down'}
+              size={20}
+              color={Colors.Gray6}
+              accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.EXPAND_END_DEVICE}-${indexEndDevice}`}
+            />
+          )}
+        </View>
+        {isItemExpanded && <View style={styles.wrapExpand}>{renderData}</View>}
+      </View>
+    </View>
+  );
+};
+
+export default memo(EndDevice);

package/src/screens/Sharing/Components/Styles/CheckBoxConfigStyles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapCheckBoxStyle: {
+    marginLeft: -10,
+  },
+  titleStyle: {
+    width: 200,
+  },
+});

package/src/screens/Sharing/Components/Styles/DeviceItemStyles.js

@@ -3,16 +3,34 @@ import { Colors } from '../../../../configs';
 import { normalize } from '../../../../configs/Constants';
 
 export default StyleSheet.create({
+  wrapCheckBoxStyle: {
+    marginLeft: normalize(-10),
+  },
+  titleStyle: {
+    fontSize: 16,
+    fontWeight: 'normal',
+    width: 200,
+  },
+  wrapStyleTitle: {
+    justifyContent: 'space-between',
+  },
   wrap: {
     flexDirection: 'row',
-    marginHorizontal: normalize(16),
+    marginHorizontal: normalize(10),
+    paddingBottom: 10,
+  },
+  isRenderSeparated: {
+    paddingBottom: normalize(16),
   },
   viewLeft: {
-    marginRight: normalize(16),
+    marginRight: 16,
     width: normalize(24),
     height: normalize(24),
     marginTop: normalize(14),
   },
+  wrapRight: {
+    flex: 1,
+  },
   viewRight: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -21,44 +39,19 @@ export default StyleSheet.create({
   },
   text: {
     color: Colors.Gray9,
-    fontWeight: '400',
-    fontSize: normalize(16),
-    flex: 1,
-    paddingRight: normalize(20),
-    fontStyle: 'normal',
-  },
-  viewSeparated: {
-    height: 1,
-    backgroundColor: Colors.Gray4,
-    marginTop: normalize(16),
-  },
-  wrapRight: {
     flex: 1,
   },
-  isRenderSeparated: {
-    paddingBottom: normalize(16),
-  },
-  wrapCheckBoxStyle: {
-    marginLeft: normalize(-10),
-  },
-  wrapChild: {
-    zIndex: -1,
-    marginTop: normalize(10),
-    marginRight: normalize(30),
-  },
-  titleStyle: {
-    fontSize: 16,
-    fontWeight: 'normal',
-    width: 200,
-  },
-  wrapExpand: {
-    marginTop: 10,
-  },
   checkBox: {
     width: normalize(20),
     height: normalize(20),
   },
-  wrapStyleTitle: {
-    justifyContent: 'space-between',
+
+  wrapExpand: {
+    marginTop: 10,
+  },
+  viewSeparated: {
+    height: 1,
+    backgroundColor: Colors.Gray4,
+    marginTop: normalize(16),
   },
 });

package/src/screens/Sharing/Components/index.js

@@ -1,5 +1,4 @@
 import CheckBoxCustom from './CheckBoxCustom';
 import TitleCheckBox from './TitleCheckBox';
-import DeviceItem from './DeviceItem';
 
-export { CheckBoxCustom, TitleCheckBox, DeviceItem };
+export { CheckBoxCustom, TitleCheckBox };

package/src/screens/Sharing/InfoMemberUnit.js

@@ -19,6 +19,7 @@ import { useNavigation, useIsFocused } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import { AccessibilityLabel } from '../../configs/Constants';
 import ModalPopupCT from '../../commons/ModalPopupCT';
+import ProcessingBar from '../../commons/ProcessingBar';
 
 const InfoMemberUnit = memo(({ route }) => {
   const t = useTranslations();
@@ -40,7 +41,7 @@ const InfoMemberUnit = memo(({ route }) => {
     onPressChangeRole,
   } = useStateAlertAction();
 
-  const { removeMember } = useDataMember(unit?.id);
+  const { removeMember, isRemoving } = useDataMember(unit?.id);
   const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
 
   const canRemoveMember = useMemo(
@@ -154,10 +155,9 @@ const InfoMemberUnit = memo(({ route }) => {
   const handleShareDevice = useCallback(() => {
     if (isOwner && memberInfo?.identity === 'member') {
       navigate(Routes.AddMemberStack, {
-        screen: Routes.SharingSelectPermission,
+        screen: Routes.UpdateShareDevice,
         params: {
           unit: { id: unit?.id },
-          type: 'update_shared',
           member: memberInfo,
         },
       });
@@ -296,6 +296,8 @@ const InfoMemberUnit = memo(({ route }) => {
         <ChangeRoleContent />
       </AlertAction>
 
+      {isRemoving && <ProcessingBar totalPercent={0.1} />}
+
       <ModalPopupCT
         isVisible={isShowWarning}
         title={t('transfer_ownership')}