@eohjsc/react-native-smart-city 0.2.61 → 0.2.62

package/README.md

@@ -1,101 +1,148 @@
-# react-native-smart-city
+## react-native-smart-city
 
 ## Getting started
+1. Install package dependencies:
+  - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
 
-`$ npm install @eohjsc/react-native-smart-city --save`
+2. Install:
+  - Using [npm](https://www.npmjs.com/#getting-started): `npm install @eohjsc/react-native-smart-city --save`
+  - Using [Yarn](https://yarnpkg.com/): `yarn add @eohjsc/react-native-smart-city`
 
+3. Compile application using react-native run-android
 ### Mostly automatic installation
-
 `$ react-native link @eohjsc/react-native-smart-city`
 
 ## Usage
-
-Make sure that SmartCity
-Example:
-
+1. StackNavigator
 ```javascript
-import SmartCity, {
-  AddSubUnitStack,
-  EmergencyContactsStack,
+import {
+  UnitStack,
   AddMemberStack,
-  AddGatewayStack,
+  AddSubUnitStack,
   AddDeviceStack,
-  UnitStack,
-  AddUnitStack,
-  SharedStack,
-  Explore,
-  SCProvider,
+  AddGatewayStack,
   SCContext,
   AddLGDeviceStack,
   initSCConfig,
+  AddUnitStack,
   AutomateStack,
   NotificationStack,
-  MyPinnedSharedUnit,
-  SharedUnit,
-  MyUnit,
 } from '@eohjsc/react-native-smart-city';
 import { createStackNavigator } from '@react-navigation/stack';
 
 // TODO: What to do with the module?   
-const Stack = creatStackNavigation();
+const Stack = createStackNavigator();
 
 const YourStack = () => {
   // Declare yourAuthObject and params
   return (
-    <SmartCity auth={yourAuthObject}>
-      <NavigationContainer>
-        <Stack.Navigator>
-          <Stack.Screen
-            name={'MainTab'}
-            component={MainTab}
-            options={{
-              headerShown: false,
-            }}
-          />
-          <Stack.Screen
-            name={'UnitStack'}
-            component={UnitStack}
-            initialParams={params}
-            options={{
-              headerShown: false,
-            }}
-          />
-          <Stack.Screen
-            name={'AddGatewayStack'}
-            component={AddGatewayStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'AddDeviceStack'}
-            component={AddDeviceStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'AddMemberStack'}
-            component={AddMemberStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'AddSubUnitStack'}
-            component={AddSubUnitStack}
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen
-            name={'EmergencyContactsStack'}
-            component={EmergencyContactsStack}
-            options={{ headerShown: false }}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </SmartCity>
+    <Stack.Navigator>
+      <Stack.Screen
+        name={'MainTab'}
+        component={MainTab}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={'UnitStack'}
+        component={UnitStack}
+        initialParams={params}
+        options={{
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name={'AddGatewayStack'}
+        component={AddGatewayStack}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={'AddDeviceStack'}
+        component={AddDeviceStack}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={'AddMemberStack'}
+        component={AddMemberStack}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name={'AddSubUnitStack'}
+        component={AddSubUnitStack}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
   );
 };
 const MainTab = () => {
   return (
     <Tab.Navigator>
-      <Tab.Screen name={'SharedStack'} component={SharedStack} />
-      <Tab.Screen name={'Search'} component={Explore} />
+      <Tab.Screen name={'AutomateStack'} component={AutomateStack} />
+      <Tab.Screen name={'NotificationStack'} component={NotificationStack} />
     </Tab.Navigator>
   );
 };
 ```
+2. Use components
+```javascript
+import React from 'react';
+import { View } from 'react-native';
+import { MyPinnedSharedUnit, MyUnit } from '@eohjsc/react-native-smart-city';
+
+const MyScreen = () => {
+  return (
+    <View>
+        <MyUnit />
+        <MyPinnedSharedUnit />
+    </View>
+  );
+};
+```
+3. Trigger quick action
+```javascript
+import React from 'react';
+import { View, Button } from 'react-native';
+import { sendRemoteCommand } from '@eohjsc/react-native-smart-city/src/iot/RemoteControl';
+
+export const MyFunctionalComponent = () => {
+  const sensor = {
+    id: 1,
+    remote_control_options: {
+      internet: {},
+      bluetooth: {},
+    },
+  };
+  const action = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: true,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: false,
+    googlehome_actions: [],
+    icon: 'caret-up',
+    icon_kit: null,
+    id: 1,
+    key: '24240de0-5c8e-11ec-bf63-0242ac130002',
+    lg_actions: [],
+    name: 'Garage Up',
+  };
+  const handleQuickAction = async() => {
+    const result = await sendRemoteCommand(sensor, action); // Action Garage Up
+    if (result){
+      console.log('Successful control')
+    }else {
+      console.log('Control failed')
+    }
+  };
+  return (
+    <View>
+      <Button onPress={handleQuickAction} title="Example trigger quick action control Garage Up" />
+    </View>
+  );
+};
+```
+- sendRemoteCommand user needs to `have permission to control the device`, you pass in the `sensor and action` to it and it will run after calling render.  
+- `sensor` is a device in your Unit and action is the `action` key of the device.. 
+- You can take out the sensor and action from your Unit when calling the `API.UNIT.UNIT_DETAIL(unitId)` it will return all devices in 1 unit.
+- Or get sensor from `API.SENSOR.DISPLAY(sensor.id)` returns all actions of 1 device.
+- Refer YourProjectPath /node_modules/@eohjsc/react-native-smart-city/src/screens/Unit/Detail.js

package/package.json

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

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -8,11 +8,14 @@ import { TESTID } from '../../configs/Constants';
 import { Colors, Images } from '../../configs';
 import { Section } from '../../commons/Section';
 import { IconOutline } from '@ant-design/icons-react-native';
+import MenuActionAddSchedule from './hooks/MenuActionAddSchedule';
+import { useBoolean } from '../../hooks/Common';
 
 const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
   const t = useTranslations();
   const { configuration } = actionGroup;
   const [lock, setLock] = useState(false);
+  const [isShowModal, setShowModal, setHideModal] = useBoolean(false);
 
   const onButtonOpenPress = useCallback(
     () => doAction(configuration.open_action_data),
@@ -120,17 +123,22 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
           <Text type="H4" color={Colors.Gray8}>
             {t('schedule')}
           </Text>
-          <TouchableOpacity>
+          <TouchableOpacity onPress={setShowModal}>
             <IconOutline name="plus" size={20} />
           </TouchableOpacity>
         </View>
         <View>
-          <TouchableOpacity style={styles.tapToAddSchedule}>
+          <TouchableOpacity
+            onPress={setShowModal}
+            style={styles.tapToAddSchedule}
+          >
             <Text type="Body" color={Colors.Gray6} center>
               {t('tap_to_add_new_schedule')}
             </Text>
           </TouchableOpacity>
         </View>
+
+        <MenuActionAddSchedule visible={isShowModal} hideModal={setHideModal} />
       </Section>
     </>
   );

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

@@ -67,6 +67,6 @@ describe('Test CurtainButtonTemplate', () => {
     });
     const instance = wrapper.root;
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(touchableOpacities.length).toEqual(5);
+    expect(touchableOpacities.length).toEqual(18);
   });
 });

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import MenuActionAddSchedule from '../hooks/MenuActionAddSchedule';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import RecurringDetail from '../hooks/RecurringDetail';
+import WheelDateTimePicker from '../../WheelDateTimePicker';
+
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MenuActionAddSchedule />
+  </SCProvider>
+);
+
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('axios');
+
+describe('Test MenuActionAddSchedule', () => {
+  let tree;
+
+  test('test render MenuActionAddSchedule', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const recurringDetail = instance.findByType(RecurringDetail);
+    await act(async () => {
+      recurringDetail.props.onShowSetDateTime();
+    });
+
+    const wheelDateTimePicker = instance.findByType(WheelDateTimePicker);
+
+    await act(async () => {
+      wheelDateTimePicker.props.onPicked();
+    });
+
+    await act(async () => {
+      wheelDateTimePicker.props.onCancel();
+    });
+
+    expect(wheelDateTimePicker.props.isVisible).toEqual(false);
+  });
+});

package/src/commons/ActionGroup/hooks/AccessScheduleDetailStyles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  title: {
+    marginTop: 16,
+  },
+  value: {
+    marginTop: 8,
+    marginBottom: 12,
+  },
+  repeatWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 16,
+  },
+  repeatItem: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 12,
+    borderWidth: 0,
+    borderColor: Colors.Orange,
+  },
+  repeatItemSelected: {
+    borderWidth: 1,
+  },
+  repeatText: {
+    lineHeight: 16,
+  },
+  curtainText: {
+    fontSize: 17,
+    marginTop: 12,
+    color: Colors.Gray9,
+  },
+  boder: {
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+});

package/src/commons/ActionGroup/hooks/MenuActionAddSchedule.js

@@ -0,0 +1,110 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import Text from '../../Text';
+import { ModalCustom } from '../../Modal';
+import ViewButtonBottom from '../../ViewButtonBottom';
+import WheelDateTimePicker from '../../WheelDateTimePicker';
+import moment from 'moment';
+import { useBoolean } from '../../../hooks/Common';
+import RecurringDetail from './RecurringDetail';
+import _TextInput from '../../../commons/Form/TextInput';
+import styles from './MenuActionAddScheduleStyle';
+
+const MenuActionAddSchedule = memo(({ visible, hideModal, onItemClick }) => {
+  const t = useTranslations();
+
+  const [stateDateTimePicker, setStateDateTimePicker] = useState({
+    isVisible: false,
+    mode: 'time',
+    defaultValue: moment().valueOf(),
+    setter: null,
+  });
+
+  const [lockShowing, releaseLockShowing, acquireLockShowing] =
+    useBoolean(true);
+  const [recurringTimeStart, setRecurringTimeStart] = useState('');
+  const [recurringTimeEnd, setRecurringTimeEnd] = useState('');
+  const [recurringTimeRepeat, setRecurringTimeRepeat] = useState('');
+
+  const onShowSetDateTime = useCallback(
+    (currentValue, setter, mode) => {
+      acquireLockShowing();
+      setStateDateTimePicker((state) => ({
+        ...state,
+        isVisible: true,
+        mode: mode,
+        defaultValue: currentValue,
+        setter: setter,
+      }));
+    },
+    [setStateDateTimePicker, acquireLockShowing]
+  );
+
+  const onDateTimePicked = useCallback(
+    (timeData) => {
+      const setter = stateDateTimePicker.setter;
+      setter && setter(moment(timeData));
+    },
+    [stateDateTimePicker]
+  );
+
+  const onHideSetDateTime = useCallback(() => {
+    acquireLockShowing();
+    setStateDateTimePicker((state) => ({
+      ...state,
+      isVisible: false,
+    }));
+  }, [setStateDateTimePicker, acquireLockShowing]);
+
+  return (
+    <ModalCustom
+      isVisible={visible}
+      onBackButtonPress={hideModal}
+      onBackdropPress={hideModal}
+      style={styles.container}
+    >
+      <View style={styles.popoverStyle}>
+        <View style={styles.modalWrapper}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalHeaderText}>{t('add_schedule')}</Text>
+            <View style={styles.boder} />
+            <RecurringDetail
+              onShowSetDateTime={onShowSetDateTime}
+              recurringTimeStart={recurringTimeStart}
+              recurringTimeEnd={recurringTimeEnd}
+              recurringTimeRepeat={recurringTimeRepeat}
+              setRecurringTimeStart={setRecurringTimeStart}
+              setRecurringTimeEnd={setRecurringTimeEnd}
+              setRecurringTimeRepeat={setRecurringTimeRepeat}
+            />
+
+            <Text style={styles.subName}>{t('schedule_name')}</Text>
+            <_TextInput
+              placeholder={t('enter_name')}
+              wrapStyle={styles.noMarginTop}
+              textInputStyle={styles.textInput}
+            />
+            <View style={styles.ViewButtonBottom}>
+              <ViewButtonBottom
+                leftTitle={t('cancel')}
+                onLeftClick={hideModal}
+                rightTitle={t('done')}
+              />
+            </View>
+            <WheelDateTimePicker
+              mode={stateDateTimePicker.mode}
+              isVisible={stateDateTimePicker.isVisible && lockShowing}
+              defaultValue={stateDateTimePicker.defaultValue}
+              onPicked={onDateTimePicked}
+              onCancel={onHideSetDateTime}
+              onHide={releaseLockShowing}
+            />
+          </View>
+        </View>
+      </View>
+    </ModalCustom>
+  );
+});
+export default MenuActionAddSchedule;

package/src/commons/ActionGroup/hooks/MenuActionAddScheduleStyle.js

@@ -0,0 +1,69 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    margin: 0,
+  },
+  popoverStyle: {
+    width: '100%',
+    backgroundColor: Colors.White,
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    borderRadius: 10,
+  },
+  modalWrapper: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+  },
+  modalHeader: {
+    padding: 16,
+    backgroundColor: Colors.White,
+    justifyContent: 'flex-start',
+  },
+  modalHeaderText: {
+    fontSize: 17,
+    lineHeight: 24,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginVertical: 20,
+  },
+  boder: {
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+  },
+  subName: {
+    color: Colors.Gray8,
+    marginTop: 12,
+  },
+  ViewButtonBottom: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.Gray4,
+  },
+  scheduleName: {
+    fontSize: 17,
+    marginTop: 12,
+    color: Colors.Gray9,
+    marginBottom: 12,
+  },
+  noMarginTop: {
+    marginTop: 0,
+    backgroundColor: Colors.White,
+  },
+  textInput: {
+    marginTop: 0,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+    paddingLeft: 0,
+    backgroundColor: Colors.White,
+    fontSize: 17,
+    color: Colors.Gray9,
+  },
+});

package/src/commons/ActionGroup/hooks/RecurringDetail.js

@@ -0,0 +1,97 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import { REPEAT_ITEMS } from '../../../screens/GuestInfo/constant';
+import styles from './AccessScheduleDetailStyles';
+
+const RecurringDetail = ({
+  onShowSetDateTime,
+  recurringTimeStart,
+  recurringTimeEnd,
+  recurringTimeRepeat,
+  setRecurringTimeStart,
+  setRecurringTimeEnd,
+  setRecurringTimeRepeat,
+}) => {
+  const t = useTranslations();
+  const onSetTimeStart = useCallback(() => {
+    onShowSetDateTime();
+  }, [onShowSetDateTime]);
+
+  const onSetTimeEnd = useCallback(() => {
+    onShowSetDateTime();
+  }, [onShowSetDateTime]);
+
+  const onSetRepeat = useCallback(
+    (item) => {
+      const index = recurringTimeRepeat.indexOf(item.value);
+      if (index !== -1) {
+        setRecurringTimeRepeat([
+          ...recurringTimeRepeat.slice(0, index),
+          ...recurringTimeRepeat.slice(index + 1),
+        ]);
+      } else {
+        setRecurringTimeRepeat([...recurringTimeRepeat, item.value]);
+      }
+    },
+    [recurringTimeRepeat, setRecurringTimeRepeat]
+  );
+
+  const renderRepeatItem = useCallback(
+    (item, index, isSelected) => {
+      return (
+        <TouchableOpacity
+          key={index}
+          style={[styles.repeatItem, isSelected && styles.repeatItemSelected]}
+          onPress={() => onSetRepeat(item)}
+        >
+          <Text
+            type="Body"
+            lineHeight={16}
+            color={isSelected ? Colors.Orange : item.color}
+            style={styles.repeatText}
+          >
+            {item.text}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [onSetRepeat]
+  );
+
+  return (
+    <View>
+      <Text style={styles.curtainText}>{t('curtain_opens')}</Text>
+      <TouchableOpacity onPress={onSetTimeStart}>
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          07:00 AM
+        </Text>
+      </TouchableOpacity>
+      <View style={styles.boder} />
+      <Text style={styles.curtainText}>{t('curtain_closes')}</Text>
+      <TouchableOpacity onPress={onSetTimeEnd}>
+        <Text type="Body" color={Colors.Orange} style={styles.value}>
+          12:00 AM
+        </Text>
+      </TouchableOpacity>
+      <View style={styles.boder} />
+      <Text type="Body" color={Colors.Gray8} style={styles.title}>
+        {t('repeat')}
+      </Text>
+      <View style={styles.repeatWrap}>
+        {REPEAT_ITEMS.map((item, index) =>
+          renderRepeatItem(
+            item,
+            index,
+            recurringTimeRepeat.includes(item.value)
+          )
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default RecurringDetail;

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -16,7 +16,7 @@ const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
       <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
         {moment(time).format(format)}
       </Text>
-      <IconOutline name={'calendar'} size={16} color={Colors.Gray8} />
+      <IconOutline style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
 });
@@ -40,4 +40,9 @@ const styles = StyleSheet.create({
   txtTime: {
     marginRight: 4,
   },
+  iconDateTime: {
+    marginBottom: 4,
+    fontSize: 16,
+    color: Colors.Gray8,
+  },
 });