@eohjsc/react-native-smart-city 0.4.39 → 0.4.41

package/android/build.gradle

@@ -11,7 +11,7 @@
 //   - https://github.com/facebook/react-native/blob/0.58-stable/local-cli/templates/HelloWorld/android/app/build.gradle
 
 def DEFAULT_COMPILE_SDK_VERSION = 33
-def DEFAULT_BUILD_TOOLS_VERSION = '30.0.3'
+def DEFAULT_BUILD_TOOLS_VERSION = '33.0.0'
 def DEFAULT_MIN_SDK_VERSION = 24
 def DEFAULT_TARGET_SDK_VERSION = 33
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.39",
+  "version": "0.4.41",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -193,7 +193,7 @@
     "react-native-permissions": "3.4.0",
     "react-native-popover-view": "^4.0.3",
     "react-native-progress": "^5.0.0",
-    "react-native-reanimated": "^3.1.0",
+    "react-native-reanimated": "1.10.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
     "react-native-screens": "^2.9.0",

package/src/commons/Action/ItemQuickAction.js

@@ -42,6 +42,7 @@ const ItemQuickAction = memo(
     const userId = useSCContextSelector((state) => state?.auth.account.user.id);
     const onActionPress = useCallback(async () => {
       if (processing) {
+        /* istanbul ignore next */
         return;
       }
       setProcessing(true);

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -43,8 +43,8 @@ export const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
 };
 
 let hexColorTemp = '#fff';
-const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
-  const { configuration = {} } = actionGroup;
+const ColorPickerTemplate = memo(({ item = {}, doAction, sensor }) => {
+  const { configuration = {} } = item;
   const { config = undefined } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
 
@@ -76,8 +76,7 @@ const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
         setIsChangeColor(false);
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [configuration?.action_color_data, doAction, isChangeColor]
+    [configuration?.action_color_data, doAction, isChangeColor, setAction]
   );
 
   useEffect(() => {

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -11,12 +11,12 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
 
 const NumberUpDownActionTemplate = ({
-  actionGroup = {},
+  item = {},
   doAction,
   sensor = {},
   isWidgetOrder,
 }) => {
-  const { configuration = {}, title } = actionGroup;
+  const { configuration = {}, title } = item;
   const {
     action_data,
     max_value,
@@ -122,7 +122,7 @@ const NumberUpDownActionTemplate = ({
           <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
-        <Text accessibilityLabel={'abcd'} type="H2">
+        <Text accessibilityLabel={'text_format'} type="H2">
           {value !== undefined ? (
             text_format.replace('{number}', value)
           ) : (

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -10,9 +10,9 @@ import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../../configs/Constants';
 
-const OnOffSmartLock = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
+const OnOffSmartLock = memo(({ item = {}, doAction, sensor = {} }) => {
   const t = useTranslations();
-  const { configuration = {} } = actionGroup;
+  const { configuration = {} } = item;
   const { action_on_data, action_off_data, config, is_on_value } =
     configuration;
   const { is_managed_by_backend, device_type } = sensor;

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

@@ -8,8 +8,7 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import IconComponent from '../../IconComponent';
 
 const OnOffButtonTemplate = memo(
-  ({ isOn, triggerAction, actionGroup = {}, isLight = false }) => {
-    const { configuration = {}, id } = actionGroup;
+  ({ isOn, triggerAction, actionGroup = {}, isLight = false, item }) => {
     const {
       icon_on,
       icon_off,
@@ -17,7 +16,7 @@ const OnOffButtonTemplate = memo(
       icon_kit_off_data,
       text_on,
       text_off,
-    } = configuration;
+    } = actionGroup;
     const icon = useMemo(() => {
       if (isOn) {
         return icon_kit_on_data?.icon || icon_on;
@@ -31,7 +30,7 @@ const OnOffButtonTemplate = memo(
           <TouchableOpacity
             style={styles.bigCircle}
             onPress={triggerAction}
-            accessibilityLabel={`${AccessibilityLabel.ON_OFF_BUTTON}-${id}`}
+            accessibilityLabel={`${AccessibilityLabel.ON_OFF_BUTTON}-${item?.id}`}
           >
             <View style={styles.smallCircle}>
               <IconComponent
@@ -46,7 +45,7 @@ const OnOffButtonTemplate = memo(
                   styles.textBig,
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
-                accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${id}`}
+                accessibilityLabel={`${AccessibilityLabel.SENSOR_STATUS}-${item?.id}`}
               >
                 {isOn ? text_on : text_off}
               </Text>

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

@@ -8,8 +8,8 @@ import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { useConfigGlobalState } from '../../../iot/states';
 
 const SwitchButtonTemplate = memo(
-  ({ actionGroup = {}, isLight = false, doAction }) => {
-    const { configuration = {}, id } = actionGroup;
+  ({ item = {}, isLight = false, doAction }) => {
+    const { configuration = {}, id } = item;
     const {
       action_off_data,
       action_on_data,
@@ -58,9 +58,9 @@ const SwitchButtonTemplate = memo(
           </Text>
         </View>
 
-        {!!actionGroup.title && !isLight && (
+        {!!item.title && !isLight && (
           <Text type="H3" semibold center>
-            {actionGroup.title}
+            {item.title}
           </Text>
         )}
       </>

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

@@ -22,8 +22,8 @@ const getComponent = (template) => {
   }
 };
 
-const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
-  const { configuration = {} } = actionGroup;
+const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
+  const { configuration = {} } = item;
   const {
     action_on_data,
     action_off_data,
@@ -119,16 +119,17 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor = {} }) => {
   }, [getIsOnValue, device_type]);
 
   const Component = useMemo(() => {
-    return getComponent(actionGroup.template);
-  }, [actionGroup]);
+    return getComponent(item.template);
+  }, [item.template]);
 
   return (
     <View style={styles.wrap}>
       <Component
         isOn={tempIsOn}
         triggerAction={triggerAction}
-        actionGroup={actionGroup}
+        actionGroup={configuration}
         disabled={!action_on_data && !action_off_data}
+        item={item}
       />
     </View>
   );

package/src/commons/ActionGroup/OneBigButtonTemplate.js

@@ -6,8 +6,8 @@ import { Colors } from '../../configs';
 import styles from './OneBigButtonTemplateStyle';
 import IconComponent from '../IconComponent';
 
-const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
-  const { configuration = {} } = actionGroup;
+const OneBigButtonTemplate = memo(({ item = {}, doAction, sensor }) => {
+  const { configuration = {} } = item;
   const { text, action_data, icon } = configuration;
 
   const onPressDoAction = useCallback(() => {
@@ -29,9 +29,9 @@ const OneBigButtonTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
           </View>
         </TouchableOpacity>
       </View>
-      {!!actionGroup.title && (
+      {!!item.title && (
         <Text type="H3" semibold center>
-          {actionGroup.title}
+          {item.title}
         </Text>
       )}
     </>

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -12,9 +12,7 @@ import styles from './OptionsDropdownActionTemplateStyle';
 import { AccessibilityLabel, DEVICE_TYPE } from '../../configs/Constants';
 import IconComponent from '../../commons/IconComponent';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import SvgDoorState from '../../../assets/images/Device/door-state.svg';
-import SvgCurrentState from '../../../assets/images/Device/current-state.svg';
-import SvgWindStrength from '../../../assets/images/Device/wind-strength.svg';
+import { getIcon } from '../icon';
 
 function getOptionValue(option, allow_config_store_value) {
   if (option?.value_text && !allow_config_store_value) {
@@ -24,13 +22,13 @@ function getOptionValue(option, allow_config_store_value) {
 }
 
 const OptionsDropdownActionTemplate = ({
-  actionGroup = {},
+  item = {},
   doAction,
   sensor = {},
   isWidgetOrder,
 }) => {
   const t = useTranslations();
-  const { configuration = {}, title = '' } = actionGroup;
+  const { configuration = {}, title = '' } = item;
   const {
     action_data,
     options = [],
@@ -110,16 +108,7 @@ const OptionsDropdownActionTemplate = ({
   }, [config, selectedOption?.text, t]);
 
   const iconSvg = useMemo(() => {
-    switch (icon) {
-      case 'door-state-1':
-        return <SvgDoorState width={24} height={24} />;
-      case 'curent-state-1':
-        return <SvgCurrentState width={24} height={24} />;
-      case 'wind-strength-1':
-        return <SvgWindStrength width={24} height={24} />;
-      default:
-        return () => <></>;
-    }
+    return getIcon(icon);
   }, [icon]);
 
   return (
@@ -179,7 +168,7 @@ const OptionsDropdownActionTemplate = ({
                 {t('write_not_available')}
               </Text>
             )}
-            {options.map((item, index) => (
+            {options.map((option, index) => (
               <View key={index} style={styles.rowContainer}>
                 <RadioCircle active={selectedIndex === index} />
                 <TouchableOpacity
@@ -191,7 +180,7 @@ const OptionsDropdownActionTemplate = ({
                     setSelectedIndex(index);
                   }}
                 >
-                  <Text style={styles.text}>{item?.text}</Text>
+                  <Text style={styles.text}>{option?.text}</Text>
                 </TouchableOpacity>
               </View>
             ))}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -18,9 +18,9 @@ import { DEVICE_TYPE } from '../../configs/Constants';
 import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
-  ({ actionGroup = {}, doAction, sensor, item, isWidgetOrder }) => {
+  ({ item = {}, doAction, sensor, isWidgetOrder }) => {
     const t = useTranslations();
-    const { configuration = {} } = actionGroup;
+    const { configuration = {} } = item;
     const [configValues] = useConfigGlobalState('configValues');
     const {
       config = undefined,
@@ -56,6 +56,7 @@ const SliderRangeTemplate = memo(
 
     const getTextInputValue = useMemo(() => {
       if ([null, undefined, NaN].includes(valueBrightness)) {
+        /* istanbul ignore next */
         return 0;
       }
 
@@ -70,6 +71,7 @@ const SliderRangeTemplate = memo(
       }
       setValueBrightness(value);
       if (timeout.current) {
+        /* istanbul ignore next */
         clearTimeout(timeout.current);
       }
       if (value !== '') {
@@ -90,7 +92,7 @@ const SliderRangeTemplate = memo(
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
         <Text type="H4" style={styles.LeftTextBrightness}>
-          {actionGroup?.title || item?.label || t('brightness')}
+          {item?.title || item?.label || t('brightness')}
         </Text>
 
         <View style={styles.wrap}>

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -25,7 +25,7 @@ import {
 import { notImplemented } from '../../../utils/Utils';
 
 const SmartTiviActionTemplate = memo(
-  ({ actionGroup, doAction, scrollEnabled = true }) => {
+  ({ item, doAction, scrollEnabled = true }) => {
     const t = useTranslations();
     const FakeDataChannel = [
       {
@@ -50,7 +50,7 @@ const SmartTiviActionTemplate = memo(
       },
     ];
     const onPressButton = useCallback(
-      (button, item) => () => {
+      (button) => () => {
         switch (button) {
           case SMART_TIVI_BUTTON.ONOFF_BUTTON:
           case SMART_TIVI_BUTTON.EXIT_BUTTON:
@@ -74,8 +74,8 @@ const SmartTiviActionTemplate = memo(
       },
       [t]
     );
-    const iconChannels = useCallback((item) => {
-      switch (item.icon) {
+    const iconChannels = useCallback((iconChannel) => {
+      switch (iconChannel.icon) {
         case 'disney':
           return <Disney style={styles.iconChannel} />;
         case 'youtube':
@@ -186,16 +186,16 @@ const SmartTiviActionTemplate = memo(
             </View>
             <View style={styles.channelTV}>
               {!!FakeDataChannel &&
-                FakeDataChannel.map((item, index) => {
+                FakeDataChannel.map((fakeChannel, index) => {
                   return (
                     <RectangleButton
                       key={index}
                       type="row"
                       onPress={onPressButton(
                         SMART_TIVI_BUTTON.CHANNEL_BUTTON,
-                        item
+                        fakeChannel
                       )}
-                      icon={iconChannels(item)}
+                      icon={iconChannels(fakeChannel)}
                       wrapStyle={styles.buttonChannel}
                       index={index}
                     />

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -9,10 +9,7 @@ import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
 import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
-import SvgClean from '../../../assets/images/Device/clean.svg';
-import SvgCirculator from '../../../assets/images/Device/circulator.svg';
-import SvgAuo from '../../../assets/images/Device/auto.svg';
-import SvgAirDry from '../../../assets/images/Device/air-dry.svg';
+import { getIcon } from '../icon';
 
 const buttonStyle = {
   OFF: {
@@ -67,18 +64,7 @@ const GridItem = ({ item, doAction, sensor }) => {
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const iconSvg = useMemo(() => {
-    switch (icon) {
-      case 'clean-1':
-        return <SvgClean width={24} height={24} />;
-      case 'circulator-1':
-        return <SvgCirculator width={24} height={24} />;
-      case 'auto-1':
-        return <SvgAuo width={24} height={24} />;
-      case 'air-dry-1':
-        return <SvgAirDry width={24} height={24} />;
-      default:
-        return null;
-    }
+    return getIcon(icon);
   }, [icon]);
 
   return (
@@ -108,12 +94,12 @@ const GridItem = ({ item, doAction, sensor }) => {
 };
 
 const StatesGridActionTemplate = ({
-  actionGroup = {},
+  item = {},
   doAction,
   sensor = {},
   isWidgetOrder,
 }) => {
-  const { configuration = {}, title } = actionGroup;
+  const { configuration = {}, title } = item;
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
@@ -143,10 +129,10 @@ const StatesGridActionTemplate = ({
           options?.length < 4 && styles.justifyContentAround,
         ]}
       >
-        {options.map((item, index) => (
+        {options.map((option, index) => (
           <GridItem
             key={index}
-            item={item}
+            item={option}
             index={index}
             doAction={doAction}
             sensor={sensor}

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

@@ -7,14 +7,14 @@ import { mockSCStore } from '../../../../context/mockStore';
 import ThreeButtonDefault from '../components/ThreeButtonDefault';
 import ThreeButtonCircle from '../components/ThreeButtonCircle';
 
-const wrapComponent = (actionGroup) => (
+const wrapComponent = (item) => (
   <SCProvider initState={mockSCStore({})}>
-    <ThreeButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+    <ThreeButtonTemplate item={item} doAction={jest.fn()} />
   </SCProvider>
 );
 
 describe('Test ThreeButtonTemplate', () => {
-  let actionGroup = {
+  let displayItem = {
     configuration: {
       action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
       action1_data: {
@@ -64,7 +64,7 @@ describe('Test ThreeButtonTemplate', () => {
 
   it('render ThreeButtonDefault', async () => {
     await act(async () => {
-      wrapper = renderer.create(wrapComponent(actionGroup));
+      wrapper = renderer.create(wrapComponent(displayItem));
     });
     const instance = wrapper.root;
     const ThreeButtonDefaults = instance.findAllByType(ThreeButtonDefault);
@@ -72,8 +72,8 @@ describe('Test ThreeButtonTemplate', () => {
   });
   it('render ThreeButtonCircle', async () => {
     const actionGroupCT = {
-      ...actionGroup,
-      configuration: { ...actionGroup?.configuration, layout: 'circle' },
+      ...displayItem,
+      configuration: { ...displayItem?.configuration, layout: 'circle' },
     };
     await act(async () => {
       wrapper = renderer.create(wrapComponent(actionGroupCT));

package/src/commons/ActionGroup/ThreeButtonTemplate/index.js

@@ -8,8 +8,8 @@ import IconComponent from '../../IconComponent';
 import ThreeButtonCircle from './components/ThreeButtonCircle';
 import ThreeButtonDefault from './components/ThreeButtonDefault';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction, isWidgetOrder }) => {
-  const { configuration } = actionGroup;
+const ThreeButtonTemplate = memo(({ item, doAction, isWidgetOrder }) => {
+  const { configuration } = item;
   const {
     text1,
     action1_data,

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -16,9 +16,9 @@ import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import BottomScrollPicker from '../BottomScrollPicker';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
-const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
+const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
   const t = useTranslations();
-  const { configuration = {}, title } = actionGroup;
+  const { configuration = {}, title } = item;
   const [showTime, setShowTime] = useState(false);
   const [showHour, setShowHour] = useState(false);
 
@@ -156,6 +156,7 @@ const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
 
   const onSwitchOff = useCallback(() => {
     if (!isTimerOn) {
+      /* istanbul ignore next */
       return;
     }
     const { reset_value } = configuration;