@eohjsc/react-native-smart-city 0.2.56 → 0.2.60

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

@@ -1,231 +0,0 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import ThreeButtonHistory from '../index';
-import moment from 'moment';
-import SelectMonth from '../SelectMonth';
-import { TESTID } from '../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
-import CalendarHeader from '../CalendarHeader';
-import ViewButtonBottom from '../../ViewButtonBottom';
-import BottomSheet from '../../BottomSheet';
-import styles from '../styles';
-
-const wrapComponent = (props) => (
-  <SCProvider initState={mockSCStore({})}>
-    <ThreeButtonHistory {...props} />
-  </SCProvider>
-);
-
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
-describe('test ThreeButtonHistory', () => {
-  Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
-  let tree;
-  let props;
-  const startDate = moment().add(-7, 'days').valueOf();
-  const endDate = moment().valueOf();
-  const mockSetStartDate = jest.fn();
-  const mockSetEndDate = jest.fn();
-  const mockSetGroupBy = jest.fn();
-
-  beforeEach(() => {
-    mockSetStartDate.mockClear();
-    mockSetEndDate.mockClear();
-    mockSetGroupBy.mockClear();
-    props = {
-      startDate,
-      endDate,
-      setStartDate: mockSetStartDate,
-      setEndDate: mockSetEndDate,
-      setGroupBy: mockSetGroupBy,
-    };
-  });
-
-  const openCalendar = async (instance) => {
-    const historyButtons = instance.findAll(
-      (el) =>
-        el.props.testID === TESTID.HISTORY_BUTTON &&
-        el.type === TouchableOpacity
-    );
-    expect(historyButtons).toHaveLength(3);
-    await act(async () => {
-      await historyButtons[2].props.onPress();
-    });
-  };
-
-  const testSelectGroupBy = async (index, groupBy) => {
-    await act(async () => {
-      tree = await create(wrapComponent(props));
-    });
-    const instance = tree.root;
-    const historyButtons = instance.findAll(
-      (el) =>
-        el.props.testID === TESTID.HISTORY_BUTTON &&
-        el.type === TouchableOpacity
-    );
-    await act(async () => {
-      await historyButtons[index].props.onPress();
-    });
-    expect(mockSetGroupBy).toBeCalledWith(groupBy);
-  };
-
-  test('test group by date', async () => {
-    await testSelectGroupBy(2, 'date');
-  });
-
-  test('test group by week', async () => {
-    await testSelectGroupBy(0, 'week');
-  });
-
-  test('test group by month', async () => {
-    await testSelectGroupBy(1, 'month');
-  });
-
-  test('test calendar change month', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(props));
-    });
-    const instance = tree.root;
-
-    await openCalendar(instance);
-    const calendar = instance.find(
-      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
-    );
-    const calendarHeader = instance.findByType(CalendarHeader);
-    expect(calendarHeader.props.currentMonth.toString()).toBe(
-      moment().toString()
-    );
-    // Click calendar title
-    await act(async () => {
-      await calendarHeader.props.onPressTitle();
-    });
-    const selectMonth = instance.findByType(SelectMonth);
-    expect(selectMonth).toBeDefined();
-    expect(calendar.props.style).toBe(styles.displayNone);
-    // Click arrow left
-    await act(async () => {
-      await calendarHeader.props.onSubtractMonth();
-    });
-    expect(calendarHeader.props.currentMonth.toString()).toBe(
-      moment().add(-1, 'month').toString()
-    );
-    // Click arrow right
-    await act(async () => {
-      await calendarHeader.props.onAddMonth();
-    });
-    expect(calendarHeader.props.currentMonth.toString()).toBe(
-      moment().toString()
-    );
-    // Click arrow right
-    await act(async () => {
-      await calendarHeader.props.onAddMonth();
-    });
-    expect(calendarHeader.props.currentMonth.toString()).toBe(
-      moment().toString()
-    ); // exceeded limit
-  });
-
-  test('test press Done', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(props));
-    });
-    const instance = tree.root;
-    const modal = instance.findByType(BottomSheet);
-
-    await openCalendar(instance);
-    expect(modal.props.isVisible).toBeTruthy();
-
-    const calendar = instance.find(
-      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
-    );
-    const calendarHeader = instance.findByType(CalendarHeader);
-    const viewButtonBottom = instance.findByType(ViewButtonBottom);
-    // Click calendar title
-    await act(async () => {
-      await calendarHeader.props.onPressTitle();
-    });
-    expect(calendar.props.style).toBe(styles.displayNone);
-    // Click Done
-    await act(async () => {
-      await viewButtonBottom.props.onRightClick();
-    });
-    expect(calendar.props.style).not.toBe(styles.displayNone);
-    // Click Done
-    await act(async () => {
-      await viewButtonBottom.props.onRightClick();
-    });
-    expect(mockSetStartDate).toBeCalled();
-    expect(mockSetEndDate).toBeCalled();
-    expect(modal.props.isVisible).toBeFalsy();
-  });
-
-  test('test press Cancel', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(props));
-    });
-    const instance = tree.root;
-    const modal = instance.findByType(BottomSheet);
-
-    await openCalendar(instance);
-    expect(modal.props.isVisible).toBeTruthy();
-
-    const calendar = instance.find(
-      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
-    );
-    const calendarHeader = instance.findByType(CalendarHeader);
-    const viewButtonBottom = instance.findByType(ViewButtonBottom);
-    // Click calendar title
-    await act(async () => {
-      await calendarHeader.props.onPressTitle();
-    });
-    expect(calendar.props.style).toBe(styles.displayNone);
-    // Click Cancel
-    await act(async () => {
-      await viewButtonBottom.props.onLeftClick();
-    });
-    expect(calendar.props.style).not.toBe(styles.displayNone);
-    // Click Cancel
-    await act(async () => {
-      await viewButtonBottom.props.onLeftClick();
-    });
-    expect(modal.props.isVisible).toBeFalsy();
-  });
-
-  test('test calendar select date range', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(props));
-    });
-    const instance = tree.root;
-
-    await openCalendar(instance);
-    const calendar = instance.find(
-      (el) => el.props.testID === TESTID.HISTORY_CALENDAR
-    );
-
-    const selectDate = async (date) => {
-      await act(async () => {
-        await calendar.props.onDayPress({ dateString: date });
-      });
-    };
-    await selectDate('2021-09-20');
-    await selectDate('2021-09-02');
-    await selectDate('2021-09-09');
-    await selectDate('2021-09-10');
-    await selectDate('2021-09-05');
-    await selectDate('2021-09-05');
-    await selectDate('2021-09-20');
-    const viewButtonBottom = instance.findByType(ViewButtonBottom);
-    await act(async () => {
-      await viewButtonBottom.props.onRightClick();
-    });
-    expect(mockSetStartDate).toBeCalledWith(moment('2021-09-10').valueOf());
-    expect(mockSetEndDate).toBeCalledWith(moment('2021-09-20').valueOf());
-  });
-});

package/src/commons/ThreeButtonHistory/index.js

@@ -1,281 +0,0 @@
-import React, { memo, useCallback, useState, useMemo, useRef } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
-import { Calendar } from 'react-native-calendars';
-import moment from 'moment';
-
-import Text from '../../commons/Text';
-import BottomSheet from '../../commons/BottomSheet';
-import SelectMonth from './SelectMonth';
-import CalendarHeader from './CalendarHeader';
-import ViewButtonBottom from '../ViewButtonBottom';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-
-import { Colors } from '../../configs';
-import { TESTID } from '../../configs/Constants';
-import styles from './styles';
-
-const ThreeButtonHistory = memo(
-  ({ startDate, endDate, setEndDate, setStartDate, setGroupBy }) => {
-    const t = useTranslations();
-    const calendarRef = useRef();
-    const [selectedIndex, setSelectedIndex] = useState(2);
-    const [isShowDate, setIsShowDate] = useState(false);
-    const [selectedStart, setSelectedStart] = useState(
-      moment(startDate).format('YYYY-MM-DD')
-    );
-    const [selectedEnd, setSelectedEnd] = useState(
-      moment(endDate).format('YYYY-MM-DD')
-    );
-
-    const [showSelectMonth, setShowSelectMonth] = useState(false);
-    const [currentMonth, setCurrentMonth] = useState(moment());
-
-    const listItem = useMemo(
-      () => [
-        {
-          id: 1,
-          dateTitle: '7D',
-        },
-        {
-          id: 2,
-          dateTitle: '1M',
-        },
-        {
-          id: 3,
-          dateTitle: (
-            <View style={styles.paddingTop2}>
-              <IconOutline
-                name="calendar"
-                color={selectedIndex === 2 ? Colors.Primary : Colors.Gray8}
-                size={21}
-              />
-            </View>
-          ),
-        },
-      ],
-      [selectedIndex]
-    );
-
-    const onPressCancel = useCallback(() => {
-      if (showSelectMonth) {
-        setShowSelectMonth(false);
-        return;
-      }
-      setIsShowDate(false);
-    }, [showSelectMonth, setShowSelectMonth]);
-
-    const onPressDone = useCallback(() => {
-      if (showSelectMonth) {
-        setShowSelectMonth(false);
-        return;
-      }
-      if (selectedStart === null || selectedEnd === null) {
-        return;
-      }
-      setIsShowDate(false);
-      setStartDate(moment(selectedStart).valueOf());
-      setEndDate(moment(selectedEnd).valueOf());
-    }, [
-      setStartDate,
-      selectedStart,
-      setEndDate,
-      selectedEnd,
-      showSelectMonth,
-      setShowSelectMonth,
-    ]);
-
-    const onDayPress = useCallback(
-      (date) => {
-        const selectedDate = date.dateString;
-        if (selectedDate === selectedStart) {
-          setSelectedStart(null);
-          return;
-        }
-        if (selectedDate === selectedEnd) {
-          setSelectedEnd(null);
-          return;
-        }
-        if (selectedStart !== null && selectedEnd !== null) {
-          return;
-        }
-        if (selectedEnd === null) {
-          setSelectedEnd(selectedDate);
-        } else {
-          if (moment(selectedDate).isAfter(selectedEnd, 'date')) {
-            setSelectedStart(selectedEnd);
-            setSelectedEnd(selectedDate);
-          } else {
-            setSelectedStart(selectedDate);
-          }
-        }
-      },
-      [selectedStart, selectedEnd]
-    );
-
-    const onPressItemButton = useCallback(
-      (index) => {
-        switch (index) {
-          case 0:
-            setGroupBy('week');
-            break;
-          case 1:
-            setGroupBy('month');
-            break;
-          case 2:
-            setGroupBy('date');
-            if (selectedIndex === 2) {
-              setIsShowDate(true);
-            }
-        }
-        setSelectedIndex(index);
-      },
-      [selectedIndex, setGroupBy]
-    );
-
-    const ItemButton = memo(
-      ({ dateTitle, onPress, isSelected }) => {
-        return (
-          <TouchableOpacity
-            onPress={onPress}
-            style={[styles.buttonDate, isSelected && styles.buttonDateActive]}
-            testID={TESTID.HISTORY_BUTTON}
-          >
-            <View>
-              <Text semibold color={isSelected && Colors.Primary}>
-                {dateTitle}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        );
-      },
-      [selectedIndex]
-    );
-
-    const onPressCalendarTitle = useCallback(() => {
-      setShowSelectMonth((state) => !state);
-    }, [setShowSelectMonth]);
-
-    const onAddMonth = useCallback(() => {
-      setCurrentMonth((oldMonth) => {
-        const newMonth = moment(oldMonth).add(1, 'months');
-        if (newMonth.isAfter(moment(), 'month')) {
-          return oldMonth;
-        }
-        calendarRef?.current?.addMonth(1);
-        return newMonth;
-      });
-    }, []);
-
-    const onSubtractMonth = useCallback(() => {
-      setCurrentMonth((oldMonth) => moment(oldMonth).add(-1, 'months'));
-      calendarRef?.current?.addMonth(-1);
-    }, []);
-
-    const onMonthSelected = useCallback(
-      (month) => {
-        setCurrentMonth((oldMonth) => {
-          const monthDiff = month.month() - oldMonth.month();
-          calendarRef?.current?.addMonth(monthDiff);
-          return month;
-        });
-      },
-      [setCurrentMonth]
-    );
-
-    const markedDates = useMemo(() => {
-      const dates = {
-        [selectedStart]: {
-          selected: true,
-          selectedColor: Colors.Primary,
-          selectedTextColor: Colors.White,
-        },
-        [selectedEnd]: {
-          selected: true,
-          selectedColor: Colors.Primary,
-          selectedTextColor: Colors.White,
-        },
-      };
-      const currDate = moment(selectedStart).startOf('day');
-      const lastDate = moment(selectedEnd).startOf('day');
-
-      while (currDate.add(1, 'days').diff(lastDate) < 0) {
-        dates[[moment(currDate).format('YYYY-MM-DD')]] = {
-          customStyles: {
-            container: {
-              borderRadius: 0,
-              width: 60,
-              backgroundColor: Colors.Gray4,
-            },
-            text: {
-              color: Colors.Black,
-            },
-          },
-          selected: true,
-          disableTouchEvent: true,
-          color: Colors.Gray4,
-        };
-      }
-      return dates;
-    }, [selectedStart, selectedEnd]);
-
-    return (
-      <>
-        <View style={styles.historyTitleRight}>
-          {listItem &&
-            listItem.map((item, index) => {
-              return (
-                <ItemButton
-                  key={index}
-                  dateTitle={item.dateTitle}
-                  onPress={() => onPressItemButton(index)}
-                  isSelected={selectedIndex === index}
-                />
-              );
-            })}
-        </View>
-        <BottomSheet
-          isVisible={isShowDate}
-          onBackdropPress={onPressCancel}
-          style={styles.modal}
-        >
-          <View style={styles.calendar}>
-            <CalendarHeader
-              currentMonth={currentMonth}
-              onAddMonth={onAddMonth}
-              onSubtractMonth={onSubtractMonth}
-              onPressTitle={onPressCalendarTitle}
-            />
-            {showSelectMonth && (
-              <SelectMonth
-                selectedMonth={currentMonth}
-                setSelectedMonth={onMonthSelected}
-              />
-            )}
-            <Calendar
-              ref={calendarRef}
-              current={currentMonth.format('YYYY-MM-DD')}
-              style={showSelectMonth && styles.displayNone}
-              markingType={'custom'}
-              onDayPress={onDayPress}
-              maxDate={moment().format('YYYY-MM-DD')}
-              markedDates={markedDates}
-              hideArrows={true}
-              renderHeader={() => <></>}
-              testID={TESTID.HISTORY_CALENDAR}
-            />
-            <View style={styles.separator} />
-            <ViewButtonBottom
-              leftTitle={t('cancel')}
-              onLeftClick={onPressCancel}
-              rightTitle={t('done')}
-              onRightClick={onPressDone}
-            />
-          </View>
-        </BottomSheet>
-      </>
-    );
-  }
-);
-
-export default ThreeButtonHistory;

package/src/commons/ThreeButtonHistory/styles.js

@@ -1,65 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { isIphoneX } from 'react-native-iphone-x-helper';
-
-import { Colors } from '../../configs';
-
-export default StyleSheet.create({
-  historyTitle: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  historyTitleRight: {
-    flexDirection: 'row',
-    backgroundColor: Colors.Gray4,
-    borderRadius: 5,
-    paddingHorizontal: 2,
-  },
-  buttonDate: {
-    alignItems: 'center',
-    marginVertical: 2,
-    borderRadius: 5,
-    paddingHorizontal: 8,
-  },
-  buttonDateActive: {
-    backgroundColor: Colors.White,
-  },
-  modal: {
-    margin: 0,
-    padding: 0,
-  },
-  calendar: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    overflow: 'hidden',
-    backgroundColor: Colors.White,
-  },
-  separator: {
-    height: 1,
-    backgroundColor: Colors.Gray3,
-    marginTop: 5,
-  },
-  wrapBottomButton: {
-    height: 56 + (isIphoneX() ? 10 : 0),
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 80,
-    flexDirection: 'row',
-    marginTop: -10,
-  },
-  button: {
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  paddingTop2: {
-    paddingTop: 2,
-  },
-  displayNone: {
-    display: 'none',
-  },
-});