@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

package/src/commons/ThreeButtonHistory/CalendarHeaderStyles.js

@@ -1,17 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  wrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-  },
-  arrow: {
-    transform: [{ rotate: '180deg' }],
-  },
-  button: {
-    padding: 8,
-  },
-});

package/src/commons/ThreeButtonHistory/SelectMonth.js

@@ -1,53 +0,0 @@
-import React, { memo, useMemo, useCallback } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import moment from 'moment';
-
-import Text from '../Text';
-import styles from './SelectMonthStyles';
-import { Colors } from '../../configs';
-
-const SelectMonth = memo(({ selectedMonth, setSelectedMonth }) => {
-  const months = useMemo(() => {
-    return Array.from({ length: 12 }, (_, i) => moment(selectedMonth).month(i));
-  }, [selectedMonth]);
-
-  const MonthItem = useCallback(
-    ({ month }) => {
-      const isSelected = month.isSame(selectedMonth, 'month');
-      const isDisabled = month.isAfter(moment(), 'month');
-      const textColor = isSelected
-        ? Colors.White
-        : isDisabled
-        ? Colors.Gray6
-        : Colors.Gray9;
-      const backgroundColor = isSelected ? Colors.Primary : Colors.Transparent;
-
-      const onPress = () => setSelectedMonth(month);
-
-      return (
-        <View style={styles.wrapItem}>
-          <TouchableOpacity
-            onPress={onPress}
-            disabled={isDisabled}
-            style={[styles.item, { backgroundColor }]}
-          >
-            <Text color={textColor} semibold>
-              {month.format('MMM')}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      );
-    },
-    [selectedMonth, setSelectedMonth]
-  );
-
-  return (
-    <View style={styles.wrap}>
-      {months.map((month, index) => (
-        <MonthItem key={index} month={month} />
-      ))}
-    </View>
-  );
-});
-
-export default SelectMonth;

package/src/commons/ThreeButtonHistory/SelectMonthStyles.js

@@ -1,29 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { Constants } from '../../configs';
-
-const marginItem = 40;
-const marginHorizontal = 24;
-const widthItem = (Constants.width - marginHorizontal * 2 - marginItem * 2) / 3;
-const heightItem = (widthItem / 36) * 16;
-
-export default StyleSheet.create({
-  wrap: {
-    marginHorizontal: 24,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexWrap: 'wrap',
-  },
-  wrapItem: {
-    width: widthItem,
-    height: heightItem,
-    marginBottom: 4,
-    paddingVertical: 4,
-    paddingHorizontal: 8,
-  },
-  item: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 4,
-  },
-});

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import { TouchableOpacity } from 'react-native';
-import SelectMonth from '../SelectMonth';
-import moment from 'moment';
-
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    memo: (x) => x,
-  };
-});
-
-test('test SelectMonth', () => {
-  let tree;
-  const mockSetSelectedMonth = jest.fn();
-  const currentMonth = moment();
-
-  act(() => {
-    tree = create(
-      <SelectMonth
-        selectedMonth={currentMonth}
-        setSelectedMonth={mockSetSelectedMonth}
-      />
-    );
-  });
-  const instance = tree.root;
-  const monthItems = instance.findAllByType(TouchableOpacity);
-  expect(monthItems).toHaveLength(12);
-
-  for (let i = 0; i < 12; i++) {
-    act(() => {
-      monthItems[i].props.onPress();
-    });
-    expect(mockSetSelectedMonth).toBeCalledWith(moment(currentMonth).month(i));
-  }
-});

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

@@ -1,240 +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 });
-      });
-    };
-    // 2 -> 9
-    await selectDate('2021-09-20'); // 2 -> 20
-    await selectDate('2021-09-01'); // 1 -> 20
-    await selectDate('2021-09-15'); // 1 -> 15
-    await selectDate('2021-09-05'); // 5 -> 15
-    await selectDate('2021-09-15'); // 5 -> null
-    await selectDate('2021-09-05'); // null -> null
-    await selectDate('2021-09-10'); // 10 -> null
-    await selectDate('2021-09-05'); // 5 -> 10
-    await selectDate('2021-09-10'); // 5 -> null
-    await selectDate('2021-09-20'); // 5 -> 20
-    await selectDate('2021-09-05'); // null -> 20
-    await selectDate('2021-09-25'); // 20 -> 25
-    await selectDate('2021-09-20'); // null -> 25
-    await selectDate('2021-09-10'); // 10 -> 25
-
-    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-25').valueOf());
-  });
-});

package/src/commons/ThreeButtonHistory/index.js

@@ -1,310 +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 [showCalendar, setShowCalendar] = 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 onCalendarCancel = useCallback(() => {
-      if (showSelectMonth) {
-        setShowSelectMonth(false);
-        return;
-      }
-      setShowCalendar(false);
-    }, [showSelectMonth, setShowSelectMonth]);
-
-    const onCalendarDone = useCallback(() => {
-      if (showSelectMonth) {
-        setShowSelectMonth(false);
-        return;
-      }
-      if (selectedStart === null || selectedEnd === null) {
-        return;
-      }
-      setShowCalendar(false);
-      setStartDate(moment(selectedStart).valueOf());
-      setEndDate(moment(selectedEnd).valueOf());
-    }, [
-      setStartDate,
-      selectedStart,
-      setEndDate,
-      selectedEnd,
-      showSelectMonth,
-      setShowSelectMonth,
-    ]);
-
-    const onDateSelected = useCallback(
-      (date) => {
-        const selectedDate = date.dateString;
-        const mmSelectedDate = moment(selectedDate);
-        onMonthSelected(mmSelectedDate);
-
-        if (selectedDate === selectedStart) {
-          setSelectedStart(null);
-          return;
-        }
-        if (selectedDate === selectedEnd) {
-          setSelectedEnd(null);
-          return;
-        }
-
-        if (!!selectedStart && !!selectedEnd) {
-          if (mmSelectedDate.isAfter(selectedEnd, 'date')) {
-            setSelectedEnd(selectedDate);
-            return;
-          }
-          if (mmSelectedDate.isBefore(selectedStart, 'date')) {
-            setSelectedStart(selectedDate);
-            return;
-          }
-          if (
-            Math.abs(mmSelectedDate.diff(selectedStart, 'days')) <=
-            Math.abs(mmSelectedDate.diff(selectedEnd, 'days'))
-          ) {
-            setSelectedStart(selectedDate);
-          } else {
-            setSelectedEnd(selectedDate);
-          }
-          return;
-        }
-
-        if (selectedStart) {
-          if (mmSelectedDate.isBefore(selectedStart, 'date')) {
-            setSelectedStart(selectedDate);
-            setSelectedEnd(selectedStart);
-          } else {
-            setSelectedEnd(selectedDate);
-          }
-          return;
-        }
-
-        if (selectedEnd) {
-          if (mmSelectedDate.isAfter(selectedEnd, 'date')) {
-            setSelectedStart(selectedEnd);
-            setSelectedEnd(selectedDate);
-          } else {
-            setSelectedStart(selectedDate);
-          }
-          return;
-        }
-
-        setSelectedStart(selectedDate);
-      },
-      [selectedStart, selectedEnd, onMonthSelected]
-    );
-
-    const onPressItemButton = useCallback(
-      (index) => () => {
-        switch (index) {
-          case 0:
-            setGroupBy('week');
-            break;
-          case 1:
-            setGroupBy('month');
-            break;
-          case 2:
-            setGroupBy('date');
-            selectedIndex === 2 && setShowCalendar(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,
-          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={showCalendar}
-          onBackdropPress={onCalendarCancel}
-          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={onDateSelected}
-              maxDate={moment().format('YYYY-MM-DD')}
-              markedDates={markedDates}
-              hideArrows={true}
-              renderHeader={() => <></>}
-              testID={TESTID.HISTORY_CALENDAR}
-            />
-            <View style={styles.separator} />
-            <ViewButtonBottom
-              leftTitle={t('cancel')}
-              onLeftClick={onCalendarCancel}
-              rightTitle={t('done')}
-              onRightClick={onCalendarDone}
-            />
-          </View>
-        </BottomSheet>
-      </>
-    );
-  }
-);
-
-export default ThreeButtonHistory;