@eohjsc/react-native-smart-city 0.2.26 → 0.2.27

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import ItemScriptAction from '../ItemScriptAction';
+
+describe('Test LocationItem', () => {
+  let tree;
+  it('Test render', async () => {
+    await act(() => {
+      tree = create(<ItemScriptAction item={{}} />);
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(7);
+  });
+});

package/src/commons/BackDefault/__test__/BackDefault.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import BackDefault from '../index';
+
+describe('Test BackDefault', () => {
+  let tree;
+  test('create BackDefault', () => {
+    let goBack = () => {};
+    let color = { color: 'fff' };
+    let fixedHeight = { Height: 50 };
+    act(() => {
+      tree = renderer.create(
+        <BackDefault goBack={goBack} color={color} fixedHeight={fixedHeight} />
+      );
+    });
+    const instance = tree.root;
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons.length).toEqual(1);
+  });
+});

package/src/commons/BottomScrollPicker/index.js

@@ -35,7 +35,11 @@ const BottomScrollPicker = ({ isVisible, onPicked, onHide, min, max }) => {
   }, [number, onHide, onPicked]);
 
   return (
-    <BottomSheet isVisible={isVisible} onHide={onCancel} title={t('set_hour')}>
+    <BottomSheet
+      isVisible={isVisible}
+      onBackdropPress={onCancel}
+      title={t('set_hour')}
+    >
       <View style={styles.container}>
         <Picker
           dataSource={numberData}

package/src/commons/BottomSheet/index.js

@@ -1,17 +1,22 @@
 import React, { memo } from 'react';
 import { View } from 'react-native';
 import Modal from 'react-native-modal';
-
 import Text from '../Text';
-
 import styles from './styles';
 
-const BottomSheet = ({ isVisible, onHide, title, children }) => {
+const BottomSheet = ({
+  isVisible,
+  onBackdropPress,
+  onHide,
+  title,
+  children,
+}) => {
   return (
     <Modal
       isVisible={isVisible}
-      onBackButtonPress={onHide}
-      onBackdropPress={onHide}
+      onBackButtonPress={onBackdropPress}
+      onBackdropPress={onBackdropPress}
+      onModalHide={onHide}
       style={styles.modalContainer}
       useNativeDriver={true}
       useNativeDriverForBackdrop={true}

package/src/commons/ButtonPopup/__test__/__snapshots__/ButtonPopup.test.js.snap

@@ -26,6 +26,7 @@ exports[`Test button popup create button popup 1`] = `
   swipeThreshold={100}
   testID="MODAL_BUTTON_POPUP"
   transparent={true}
+  useNativeDriverForBackdrop={true}
   visible={false}
 >
   <View
@@ -87,6 +88,7 @@ exports[`Test button popup create button popup 1`] = `
       ]
     }
     swipeThreshold={100}
+    useNativeDriverForBackdrop={true}
   >
     <View
       style={

package/src/commons/ButtonPopup/index.js

@@ -31,6 +31,8 @@ const ButtonPopup = ({
       isVisible={visible}
       onBackButtonPress={onClose}
       onBackdropPress={onClose}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
       testID={TESTID.MODAL_BUTTON_POPUP}
     >
       <View style={styles.popoverStyle}>

package/src/commons/Calendar/index.js

@@ -0,0 +1,72 @@
+import React, { useState, useCallback } from 'react';
+import { Image } from 'react-native';
+import { Calendar } from 'react-native-calendars';
+import moment from 'moment';
+import BottomSheet from '../BottomSheet';
+import ViewButtonBottom from '../ViewButtonBottom';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { Images, Colors } from '../../configs';
+import styles from './styles';
+
+export default ({
+  isVisible,
+  onHide,
+  onConfirm,
+  defaultDate = moment(),
+  minDate,
+  maxDate,
+}) => {
+  const t = useTranslations();
+  const [dateSelected, setDateSelected] = useState(defaultDate);
+
+  const onDateSelected = useCallback(
+    (day) => {
+      setDateSelected(moment(day.timestamp));
+    },
+    [setDateSelected]
+  );
+
+  const onCancel = useCallback(() => {
+    onHide && onHide();
+  }, [onHide]);
+
+  const onDone = useCallback(() => {
+    onConfirm && onConfirm(dateSelected);
+    onHide && onHide();
+  }, [onHide, onConfirm, dateSelected]);
+
+  return (
+    <BottomSheet isVisible={isVisible} onBackdropPress={onCancel}>
+      <Calendar
+        style={styles.calendar}
+        onDayPress={onDateSelected}
+        minDate={minDate?.format('YYYY-MM-DD')}
+        maxDate={maxDate?.format('YYYY-MM-DD')}
+        onMonthChange={(month) => {}}
+        onPressArrowLeft={(subtractMonth) => subtractMonth()}
+        onPressArrowRight={(addMonth) => addMonth()}
+        markedDates={{
+          [dateSelected.format('YYYY-MM-DD')]: {
+            selected: true,
+            disableTouchEvent: true,
+            selectedColor: Colors.Primary,
+            selectedTextColor: Colors.White,
+          },
+        }}
+        enableSwipeMonths={true}
+        renderArrow={(direction) => (
+          <Image
+            source={Images.arrowLeft}
+            style={direction !== 'left' && styles.arrowRight}
+          />
+        )}
+      />
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={onCancel}
+        rightTitle={t('done')}
+        onRightClick={onDone}
+      />
+    </BottomSheet>
+  );
+};

package/src/commons/Calendar/styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  calendar: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  arrowRight: {
+    transform: [{ rotate: '180deg' }],
+  },
+});

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

@@ -7,10 +7,10 @@ import { Colors } from '../../../configs';
 import styles from './styles';
 import { TESTID } from '../../../configs/Constants';
 
-const ItemAddNew = memo(({ title, onAddNew }) => {
+const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
   return (
     <TouchableWithoutFeedback onPress={onAddNew}>
-      <View style={styles.container}>
+      <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
           <TouchableOpacity
             style={styles.buttonPlus}

package/src/commons/Explore/__test__/HeaderExplore.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Text from '../../../commons/Text';
+import HeaderExplore from '../HeaderExplore';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <HeaderExplore />
+  </SCProvider>
+);
+
+describe('Test HeaderExplore', () => {
+  let tree;
+
+  test('render HeaderExplore', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const button = instance.findAllByType(Text);
+    expect(button.length).toBe(1);
+  });
+});

package/src/commons/Explore/__test__/LocationItem.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import LocationItem from '../LocationItem';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (item, mockFunc, margin) => (
+  <SCProvider initState={mockSCStore({})}>
+    <LocationItem item={item} onPress={mockFunc} margin={margin} />
+  </SCProvider>
+);
+
+let tree;
+describe('Test LocationItem', () => {
+  test('render LocationItem', async () => {
+    const item = { background: '', name: '', address: '', distance: '' };
+    const margin = { marginLeft: 10 };
+    const mockFunc = jest.fn();
+    await act(() => {
+      tree = renderer.create(wrapComponent(item, mockFunc, margin));
+    });
+    const instance = tree.root;
+    const button = instance.findAllByType(TouchableOpacity);
+    expect(button.length).toEqual(1);
+    act(() => {
+      button[0].props.onPress();
+    });
+    expect(mockFunc).toBeCalledTimes(1);
+  });
+});

package/src/commons/Header/HeaderCustom.js

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
@@ -18,20 +18,24 @@ const HeaderCustom = ({
   titleStyles,
   isShowClose = false,
   onGoBack,
+  onClose,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const refMenuAction = useRef();
   const refAddAction = useRef();
   const handleAddAction = () => {};
-  // eslint-disable-next-line no-alert
-  const handleClose = () => alert(t('feature_under_development'));
   const handleShowMenuAction = () => showPopoverWithRef(refMenuAction);
   const handleGoback = () => {
     onGoBack && onGoBack();
     goBack();
   };
 
+  const handleClose = useCallback(() => {
+    onClose ? onClose() : alert(t('feature_under_development'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <View style={[styles.wrap, isShowSeparator && styles.separator]}>
       <TouchableOpacity style={styles.buttonBack} onPress={handleGoback}>

package/src/commons/HeaderAni/index.js

@@ -13,7 +13,14 @@ export const title_height = 44;
 export const heightHeader = default_height + title_height + paddingIos;
 
 const HeaderAni = memo(
-  ({ scrollY, onLeft, title, rightComponent, headerStyle }) => {
+  ({
+    scrollY,
+    onLeft,
+    title,
+    rightComponent,
+    headerStyle,
+    headerAniCenterStyle,
+  }) => {
     const { goBack } = useNavigation();
     const onPressLeft = useCallback(() => {
       if (onLeft) {
@@ -22,6 +29,9 @@ const HeaderAni = memo(
         goBack();
       }
     }, [goBack, onLeft]);
+
+    const headerX = headerAniCenterStyle ? 75 : 16;
+
     const titleTransformY = scrollY.interpolate({
       inputRange: [0, 2 * title_height],
       outputRange: [0, -title_height],
@@ -29,7 +39,7 @@ const HeaderAni = memo(
     });
     const titleTransformX = scrollY.interpolate({
       inputRange: [0, 2 * title_height],
-      outputRange: [0, 16],
+      outputRange: [0, headerX],
       extrapolate: 'clamp',
     });
     const titleScale = scrollY.interpolate({
@@ -44,10 +54,17 @@ const HeaderAni = memo(
     });
 
     const titleMarginRight = rightComponent ? 80 : 0;
+    const checkHeaderAniCenterStyle = headerAniCenterStyle
+      ? styles.containerNoneBorder
+      : styles.container;
 
     return (
       <Animated.View
-        style={[styles.container, headerStyle, { height: headerHeightAnim }]}
+        style={[
+          checkHeaderAniCenterStyle,
+          headerStyle,
+          { height: headerHeightAnim },
+        ]}
       >
         <View style={styles.header}>
           <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
@@ -118,6 +135,17 @@ const styles = StyleSheet.create({
     zIndex: 3,
     paddingTop: paddingIos,
   },
+  containerNoneBorder: {
+    backgroundColor: Colors.White,
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 100,
+    zIndex: 3,
+    paddingTop: paddingIos,
+  },
   content: {
     position: 'absolute',
     width: '100%',

package/src/commons/HorizontalPicker/index.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
+import { View, Animated } from 'react-native';
+import { Constants, Colors } from '../../configs';
+import Text from '../Text';
+import styles from './styles';
+
+let isCanChangeValue = false;
+
+const HorizontalPicker = ({
+  width = Constants.width,
+  onChangeValue,
+  minimum = 0,
+  maximum = 100,
+  segmentSpacing = 20,
+  step = 10,
+  stepColor = Colors.Gray7,
+  stepHeight = 40,
+  stepWidth = 2,
+  normalColor = Colors.Gray7,
+  normalHeight = 20,
+  normalWidth = 2,
+  style,
+  value = 0,
+}) => {
+  const scrollViewRef = useRef();
+  const [scrollX] = useState(new Animated.Value(0));
+
+  const spacerWidth = (width - stepWidth) / 2;
+  let time = useMemo(() => minimum, [minimum]);
+
+  const renderTime = useMemo(() => {
+    const data = [...Array(maximum - minimum + 1).keys()].map(
+      (i) => i + minimum
+    );
+    return (
+      <View style={[styles.wrap]}>
+        <View
+          style={{
+            width: spacerWidth,
+          }}
+        />
+        {data.map((i, index) => {
+          const isStep = i % step === 0;
+          return (
+            <View key={index}>
+              <View
+                key={i}
+                // eslint-disable-next-line react-native/no-inline-styles
+                style={{
+                  backgroundColor: isStep ? stepColor : normalColor,
+                  height: isStep ? stepHeight : normalHeight,
+                  width: isStep ? stepWidth : normalWidth,
+                  borderRadius: isStep ? stepWidth / 2 : normalWidth / 2,
+                  marginRight: i === maximum ? 0 : segmentSpacing,
+                }}
+              />
+              {isStep && (
+                <Text
+                  color={Colors.Gray7}
+                  style={[styles.time, time < 10 && styles.time2]}
+                >
+                  {time++}
+                </Text>
+              )}
+            </View>
+          );
+        })}
+        <View
+          style={{
+            width: (width - stepWidth) / 2,
+          }}
+        />
+      </View>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maximum, minimum, time]);
+
+  useEffect(() => {
+    const scrollListener = scrollX.addListener(({ value }) => {
+      isCanChangeValue && onChangeValue && onChangeValue(value);
+    });
+    return () => scrollX.removeListener(scrollListener);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!isCanChangeValue && scrollViewRef && scrollViewRef.current) {
+      const to1 = setTimeout(() => {
+        scrollViewRef.current.scrollTo({ x: value * 128 });
+        clearTimeout(to1);
+      }, 300);
+      const to2 = setTimeout(() => {
+        isCanChangeValue = true;
+        clearTimeout(to2);
+      }, 1000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, isCanChangeValue, scrollViewRef]);
+
+  useEffect(() => {
+    return () => (isCanChangeValue = false);
+  }, []);
+
+  return (
+    <View style={[styles.container, style]}>
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        horizontal
+        contentContainerStyle={styles.contentContainerStyle}
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: { x: scrollX },
+              },
+            },
+          ],
+          { useNativeDriver: true }
+        )}
+      >
+        {renderTime}
+      </Animated.ScrollView>
+
+      <View style={[styles.indicator]} pointerEvents="none">
+        <View style={styles.childIndicator} />
+      </View>
+    </View>
+  );
+};
+
+export default memo(HorizontalPicker);

package/src/commons/HorizontalPicker/styles.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  contentContainerStyle: {
+    justifyContent: 'flex-end',
+  },
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    position: 'absolute',
+    top: 20,
+    width: 50,
+    fontSize: 10,
+    marginLeft: 1,
+  },
+  time2: {
+    left: 2,
+  },
+  indicator: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  step: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  normal: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 4,
+  },
+  container: {
+    height: 80,
+    marginTop: 80,
+  },
+  childrenIndicator: {
+    width: 12,
+    height: 80,
+    borderRadius: 8,
+    backgroundColor: Colors.Primary,
+  },
+  childIndicator: {
+    width: 12,
+    height: 80,
+    backgroundColor: Colors.Primary,
+    borderRadius: 8,
+  },
+});

package/src/commons/Modal/__test__/ModalBottom.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+import { create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
+import { ModalBottom } from '../';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (isVisible) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ModalBottom isVisible={isVisible} />
+  </SCProvider>
+);
+
+describe('Test ModalBottom', () => {
+  let tree;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  it('Test render with isVisible', async () => {
+    await act(() => {
+      tree = create(wrapComponent(true));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(5);
+  });
+
+  it('Test render without isVisible', async () => {
+    await act(() => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(5);
+  });
+});

package/src/commons/RowItem/__test__/RowItem.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import { RowItem } from '../index';
+
+describe('Test RowUser', () => {
+  let tree;
+  test('create RowUser', () => {
+    act(() => {
+      tree = renderer.create(<RowItem text="Text" type="primary" />);
+    });
+    const instance = tree.root;
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons.length).toEqual(1);
+  });
+});

package/src/commons/RowItem/index.js

@@ -0,0 +1,61 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../configs';
+import Text from '../Text';
+import styles from './styles';
+import { CircleView } from '../CircleView';
+
+const arrColor = [
+  Colors.GeekBlue3,
+  Colors.Purple3,
+  Colors.Orange3,
+  Colors.Volcano3,
+  Colors.Blue9,
+  Colors.Green3,
+  Colors.Cyan2,
+];
+export const RowItem = memo(
+  ({
+    index = 0,
+    type, //primary | disable | undefined
+    leftIcon,
+    text,
+    subtext,
+    subtextColor = Colors.Gray6,
+    rightComponent,
+    onPress,
+  }) => {
+    const circleColorTypes = {
+      primary: 'primary',
+      disable: 'disable',
+      noneBG: 'none',
+    };
+    const circleColor = type
+      ? circleColorTypes[type]
+      : arrColor[index % arrColor.length];
+
+    return (
+      <>
+        <View style={styles.wrapItem}>
+          <TouchableOpacity onPress={onPress} disabled={type === 'disable'}>
+            <View style={styles.Border}>
+              <View style={styles.paddingLeft16}>
+                <CircleView size={40} backgroundColor={circleColor} center>
+                  {leftIcon}
+                </CircleView>
+              </View>
+              <View style={styles.columeFlex}>
+                <Text style={styles.titleName}> {text}</Text>
+                <Text style={styles.status}> {subtext}</Text>
+              </View>
+              {!!rightComponent && (
+                <View style={styles.endFlex}>{rightComponent}</View>
+              )}
+            </View>
+          </TouchableOpacity>
+        </View>
+      </>
+    );
+  }
+);