@momo-kits/calendar 0.0.74-beta → 0.72.1

package/src/MonthList.js

@@ -1,253 +1,248 @@
 /* eslint-disable react/no-did-update-set-state */
-import React, { Component } from 'react';
-import {
-    FlatList,
-    Dimensions,
-    Platform
-} from 'react-native';
+import React, {Component} from 'react';
+import {Dimensions, FlatList, Platform} from 'react-native';
 import moment from 'moment';
 import Month from './Month';
 import style from './Day/style';
-import { convertSolar2Lunar } from './LunarService';
+import LunarDateConverter from './LunarDateConverter';
+import {ScaleSize} from '@momo-kits/core-v2';
 
-const ITEM_WIDTH = Dimensions.get('window').width - 24;
+const ITEM_WIDTH = Dimensions.get('window').width - ScaleSize(24);
 const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
+
+const converter = new LunarDateConverter();
 export default class MonthList extends Component {
-    constructor(props) {
-        super(props);
-        // this.state = {
-        //     // data: [],
-        //     isDoubleDateMode: props.isDoubleDateMode
-        // };
-        this.currentDate = moment();
-        this.data = this.getMonthList();
-        this.currentScrollIndex = this.getIndexOfMonth(moment(props.selectedDate), this.data);
-        this.list = React.createRef();
-        this.heightStyle = {};
-        this.holidays = props.holidays;
+  constructor(props) {
+    super(props);
+    // this.state = {
+    //     // data: [],
+    //     isDoubleDateMode: props.isDoubleDateMode
+    // };
+    this.currentDate = moment();
+    this.data = this.getMonthList();
+    this.currentScrollIndex = this.getIndexOfMonth(
+      moment(props.selectedDate),
+      this.data,
+    );
+    this.list = React.createRef();
+    this.heightStyle = {};
+    this.holidays = props.holidays;
+  }
+
+  renderMonth = ({item, index}) => {
+    const {isDoubleDateMode, priceList, disabledWeekend} = this.props;
+    const keyMonth = moment(item.date)?.format('YYYY-MM');
+    const priceListDate = priceList?.[keyMonth]?.day;
+
+    return (
+      <Month
+        disabledWeekend={disabledWeekend}
+        {...this.props}
+        key={index}
+        month={item.date || {}}
+        dateList={item.dateList || []}
+        priceListDate={priceListDate}
+        isDoubleDateMode={isDoubleDateMode}
+      />
+    );
+  };
+
+  checkRange = (date, start, end) => {
+    if (!date || !start) return false;
+    if (!end) {
+      return date.year() === start.year() && date.month() === start.month();
     }
-
-    // componentDidUpdate(prevProps) {
-    //     const { isDoubleDateMode } = this.props;
-    //     if (isDoubleDateMode !== prevProps.isDoubleDateMode) {
-    //         this.setState({
-    //             // data: this.getMonthList(this.props),
-    //             isDoubleDateMode
-    //         });
-    //     }
-    // }
-
-    renderMonth = ({ item, index }) => {
-        const { isDoubleDateMode, priceList } = this.props;
-        const keyMonth = moment(item.date)?.format('YYYY-MM');
-        const priceListDate = priceList?.[keyMonth]?.day;
-        return (
-            <Month
-                {...this.props}
-                key={index}
-                month={item.date || {}}
-                dateList={item.dateList || []}
-                priceListDate={priceListDate}
-                isDoubleDateMode={isDoubleDateMode}
-            />
-        );
-    };
-
-    checkRange = (date, start, end) => {
-        if (!date || !start) return false;
-        if (!end) return date.year() === start.year() && date.month() === start.month();
-        if (date.year() < start.year() || (date.year() === start.year() && date.month() < start.month())) return false;
-        return !(date.year() > end.year() || (date.year() === end.year() && date.month() > end.month()));
-    };
-
-    shouldUpdate = (month, props) => {
-        if (!props) return false;
-        const {
-            startDate,
-            endDate
-        } = props;
-        const { startDate: curStartDate, endDate: curEndDate } = this.props;
-        const {
-            date
-        } = month;
-        const next = this.checkRange(date, startDate, endDate);
-        const prev = this.checkRange(date, curStartDate, curEndDate);
-        return !!(prev || next);
-    };
-
-    convertLunarToSolar(date) {
-        return date && convertSolar2Lunar ? convertSolar2Lunar(
-            date.date(),
-            date.month() + 1,
-            date.year(),
-            7
-        ) : {};
+    if (
+      date.year() < start.year() ||
+      (date.year() === start.year() && date.month() < start.month())
+    ) {
+      return false;
     }
-
-    findHoliday = (date) => {
-        const { holidays } = this.props;
-        if (date && holidays && holidays.length > 0) {
-            const day = date.date();
-            const month = date.month() + 1;
-            return holidays.find((item) => item.day === day && item.month === month);
-        }
-        return null;
-    };
-
-    checkHoliday = (date, holidays) => {
-        const holiday = this.findHoliday(date, holidays);
-        return {
-            isSolarHoliday: !!(holiday && !holiday.lunar),
-            isLunarHoliday: !!(holiday && holiday.lunar)
-        };
-    };
-
-    getDayList = (date) => {
-        let dayList;
-        const month = date.month();
-        let weekday = date.isoWeekday();
-        if (weekday === 1) {
-            dayList = [];
-        } else {
-            dayList = new Array(weekday - 1).fill({
-                empty: moment(date).subtract(1, 'h'),
-                lunarDate: this.convertLunarToSolar(date),
-                ...this.checkHoliday(date)
-            });
-        }
-        while (date.month() === month) {
-            const cloned = moment(date);
-            dayList.push({
-                date: cloned,
-                lunarDate: this.convertLunarToSolar(cloned),
-                ...this.checkHoliday(date)
-            });
-            date.add(1, 'days');
-        }
-        date.subtract(1, 'days');
-        weekday = date.isoWeekday();
-        if (weekday === 1) {
-            return dayList.concat(new Array(6).fill({
-                empty: moment(date).hour(1),
-                lunarDate: this.convertLunarToSolar(date)
-            }));
-        }
-        return dayList.concat(new Array(Math.abs(7 - weekday)).fill({
-            empty: moment(date).hour(1),
-            lunarDate: this.convertLunarToSolar(date)
-        }));
-    };
-
-    getMonthList = (props) => {
-        const minDate = moment((props || this.props).minDate).date(1);
-        const maxDate = moment((props || this.props).maxDate);
-        const monthList = [];
-        if (!maxDate || !minDate) return monthList;
-        while (maxDate > minDate || (
-            maxDate.year() === minDate.year()
-            && maxDate.month() === minDate.month()
-        )) {
-            const d = moment(minDate);
-            const month = {
-                date: d,
-                dateList: this.getDayList(d)
-            };
-            month.shouldUpdate = this.shouldUpdate(month, props);
-            monthList.push(month);
-            minDate.add(1, 'month');
-        }
-        return monthList;
+    return !(
+      date.year() > end.year() ||
+      (date.year() === end.year() && date.month() > end.month())
+    );
+  };
+
+  shouldUpdate = (month, props) => {
+    if (!props) return false;
+    const {startDate, endDate} = props;
+    const {startDate: curStartDate, endDate: curEndDate} = this.props;
+    const {date} = month;
+    const next = this.checkRange(date, startDate, endDate);
+    const prev = this.checkRange(date, curStartDate, curEndDate);
+    return !!(prev || next);
+  };
+
+  convertLunarToSolar(date) {
+    return date
+      ? converter.SolarToLunar({
+          solarDay: date.date(),
+          solarMonth: date.month() + 1,
+          solarYear: date.year(),
+        })
+      : {};
+  }
+
+  findHoliday = date => {
+    const {holidays} = this.props;
+    if (date && holidays && holidays.length > 0) {
+      const day = date.date();
+      const month = date.month() + 1;
+      return holidays.find(item => item.day === day && item.month === month);
+    }
+    return null;
+  };
+
+  checkHoliday = (date, holidays) => {
+    const holiday = this.findHoliday(date, holidays);
+    return {
+      isSolarHoliday: !!(holiday && !holiday.lunar),
+      isLunarHoliday: !!(holiday && holiday.lunar),
     };
-
-    getIndexOfMonth = (month, data) => data.findIndex((item) => item.date.isSame(month, 'month'));
-
-    // componentDidMount() {
-    //     const {
-    //         selectedDate
-    //     } = this.props;
-    //     const data = this.getMonthList();
-    //     this.currentScrollIndex = this.getIndexOfMonth(moment(selectedDate), data);
-    //     this.setState({ data });
-    // }
-    // componentDidMount() {
-    //     if (this.list.current) {
-    //         this.scrollToMonth(moment(this.props.selectedDate));
-    //     }
-    // }
-
-    // componentWillUnmount() {
-    //     const { isDoubleDateMode } = this.props;
-    //     this.setState({
-    //         // data: [],
-    //         isDoubleDateMode
-    //     });
-    // }
-
-    getCurrentVisibleMonth = (info) => {
-        const { changed } = info;
-        const { onScrollCalendar } = this.props;
-        if (changed && changed.length > 0) {
-            const { item, key, index } = changed[0];
-            if (onScrollCalendar && item && this.currentKey !== key) {
-                this.currentKey = key;
-                try {
-                    this.heightStyle = this.data && this.data[index] && this.data[index].dateList
-                        ? {
-                            height: (style.containerDayHeight * this.data[index].dateList.length / 7) + 10
-                        }
-                        : {};
-                } catch (e) {
-                    this.heightStyle = {};
-                }
-                if (onScrollCalendar) {
-                    onScrollCalendar({ date: item.date, key, currentIndex: index });
+  };
+
+  getDayList = date => {
+    let dayList;
+    const month = date.month();
+    let weekday = date.isoWeekday();
+    if (weekday === 1) {
+      dayList = [];
+    } else {
+      dayList = new Array(weekday - 1).fill({
+        empty: moment(date).subtract(1, 'h'),
+        lunarDate: this.convertLunarToSolar(date),
+        ...this.checkHoliday(date),
+      });
+    }
+    while (date.month() === month) {
+      const cloned = moment(date);
+      dayList.push({
+        date: cloned,
+        lunarDate: this.convertLunarToSolar(cloned),
+        ...this.checkHoliday(date),
+      });
+      date.add(1, 'days');
+    }
+    date.subtract(1, 'days');
+    weekday = date.isoWeekday();
+    if (weekday === 1) {
+      return dayList.concat(
+        new Array(6).fill({
+          empty: moment(date).hour(1),
+          lunarDate: this.convertLunarToSolar(date),
+        }),
+      );
+    }
+    return dayList.concat(
+      new Array(Math.abs(7 - weekday)).fill({
+        empty: moment(date).hour(1),
+        lunarDate: this.convertLunarToSolar(date),
+      }),
+    );
+  };
+
+  getMonthList = props => {
+    const minDate = moment((props || this.props).minDate).date(1);
+    const maxDate = moment((props || this.props).maxDate);
+    const monthList = [];
+    if (!maxDate || !minDate) return monthList;
+    while (
+      maxDate > minDate ||
+      (maxDate.year() === minDate.year() && maxDate.month() === minDate.month())
+    ) {
+      const d = moment(minDate);
+      const month = {
+        date: d,
+        dateList: this.getDayList(d),
+      };
+      month.shouldUpdate = this.shouldUpdate(month, props);
+      monthList.push(month);
+      minDate.add(1, 'month');
+    }
+    return monthList;
+  };
+
+  getIndexOfMonth = (month, data) =>
+    data.findIndex(item => item.date.isSame(month, 'month'));
+
+  getCurrentVisibleMonth = info => {
+    const {changed} = info;
+    const {onScrollCalendar} = this.props;
+    if (changed && changed.length > 0) {
+      const {item, key, index} = changed[0];
+      if (onScrollCalendar && item && this.currentKey !== key) {
+        this.currentKey = key;
+        try {
+          this.heightStyle =
+            this.data && this.data[index] && this.data[index].dateList
+              ? {
+                  height:
+                    (style.containerDayHeight *
+                      this.data[index].dateList.length) /
+                      7 +
+                    10,
                 }
-            }
+              : {};
+        } catch (e) {
+          this.heightStyle = {};
         }
-    };
-
-    keyExtractor = (item) => `${item.date.month() + 1}/${item.date.year()}`;
-
-    scrollToMonth = (month) => {
-        const index = this.getIndexOfMonth(month, this.data);
-        if (this.list.current && index !== -1) {
-            this.list.current.scrollToIndex({
-                index,
-                animated: true
-            });
+        if (onScrollCalendar) {
+          onScrollCalendar({
+            date: item.date,
+            key,
+            currentIndex: index,
+          });
         }
-    };
+      }
+    }
+  };
+
+  keyExtractor = item => `${item.date.month() + 1}/${item.date.year()}`;
 
-    getItemLayout = (data, index) => (
-        { length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index }
-    )
-
-    render() {
-        const { priceList } = this.props;
-        return (
-            <FlatList
-                extraData={priceList}
-                style={this.heightStyle}
-                horizontal
-                pagingEnabled
-                ref={this.list}
-                data={this.data}
-                renderItem={this.renderMonth}
-                showsHorizontalScrollIndicator={false}
-                keyExtractor={this.keyExtractor}
-                onViewableItemsChanged={this.getCurrentVisibleMonth}
-                onScrollToIndexFailed={() => {}}
-                removeClippedSubviews
-                initialNumToRender={1}
-                maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
-                windowSize={3}
-                contentContainerStyle={{ paddingTop: 5 }}
-                initialScrollIndex={this.currentScrollIndex}
-                getItemLayout={this.getItemLayout}
-                viewabilityConfig={{
-                    itemVisiblePercentThreshold: 50
-                }}
-            />
-        );
+  scrollToMonth = month => {
+    const index = this.getIndexOfMonth(month, this.data);
+    if (this.list.current && index !== -1) {
+      this.list.current.scrollToIndex({
+        index,
+        animated: true,
+      });
     }
+  };
+
+  getItemLayout = (data, index) => ({
+    length: ITEM_WIDTH,
+    offset: ITEM_WIDTH * index,
+    index,
+  });
+
+  render() {
+    const {priceList} = this.props;
+    return (
+      <FlatList
+        extraData={priceList}
+        style={this.heightStyle}
+        horizontal
+        pagingEnabled
+        ref={this.list}
+        data={this.data}
+        renderItem={this.renderMonth}
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={this.keyExtractor}
+        onViewableItemsChanged={this.getCurrentVisibleMonth}
+        onScrollToIndexFailed={() => {}}
+        // removeClippedSubviews
+        scrollEnabled
+        initialNumToRender={1}
+        maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
+        windowSize={3}
+        contentContainerStyle={{paddingTop: 5}}
+        initialScrollIndex={this.currentScrollIndex}
+        getItemLayout={this.getItemLayout}
+        viewabilityConfig={{
+          itemVisiblePercentThreshold: 50,
+        }}
+      />
+    );
+  }
 }

package/src/TabHeader.js

@@ -1,79 +1,72 @@
 import React from 'react';
-import { TouchableWithoutFeedback, View, Text } from 'react-native';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import Moment from 'moment';
 import Util from './Util';
+import {Colors, Text} from '@momo-kits/core-v2';
 
 export default class TabHeader extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            active: props.activeTab
-        };
-        this.label = props.label;
-        this.defaultDate = props.date ? Moment(props.date) : '';
-    }
-
-    onChangeTab = () => {
-        const { onChangeTab, id } = this.props;
-        if (onChangeTab) {
-            onChangeTab(id);
-        }
-    };
-
-    updateView = (date, activeTab) => {
-        this.setState({
-            date: date ? Moment(date) : '',
-            active: activeTab
-        });
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: props.activeTab,
     };
+    this.label = props.label;
+    this.defaultDate = props.date ? Moment(props.date) : '';
+  }
 
-    setActiveTab = (active) => {
-        this.setState({ active });
-    };
+  onChangeTab = () => {
+    const {onChangeTab, id} = this.props;
+    if (onChangeTab) {
+      onChangeTab(id);
+    }
+  };
 
-    render() {
-        const { label, disabled } = this.props;
-        const { date, active } = this.state;
-        const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
-        const formattedDateFromDefault = this.defaultDate ? this.defaultDate.format('DD/MM/YYYY') : '';
-        const dayOfWeekFromState = date ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -` : '';
-        const dayOfWeekFromDefault = this.defaultDate ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -` : '';
+  updateView = (date, activeTab) => {
+    this.setState({
+      date: date ? Moment(date) : '',
+      active: activeTab,
+    });
+  };
 
-        return (
-            <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
-                <View style={{
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: active ? 'white' : '#eeeeef',
-                    borderRadius: 8
-                }}
-                >
-                    <Text style={{
-                        fontSize: 12,
-                        // lineHeight: 14,
-                        color: active ? '#222222' : '#8d919d',
-                        fontWeight: 'bold'
-                    }}
-                    >
-                        {label}
+  setActiveTab = active => {
+    this.setState({active});
+  };
 
-                    </Text>
-                    <Text style={{
-                        marginTop: 3,
-                        fontSize: 12,
-                        // lineHeight: 14,
-                        color: '#8d919d'
-                    }}
-                    >
-                        <Text style={{ color: active ? '#b0006d' : '#8d919d', fontWeight: 'bold' }}>
-                            {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
+  render() {
+    const {label, disabled} = this.props;
+    const {date, active} = this.state;
+    const formattedDateFromState = date ? date.format('DD/MM/YYYY') : '';
+    const formattedDateFromDefault = this.defaultDate
+      ? this.defaultDate.format('DD/MM/YYYY')
+      : '';
+    const dayOfWeekFromState = date
+      ? `${Util.WEEKDAYSFROMMOMENT[date.day()]} -`
+      : '';
+    const dayOfWeekFromDefault = this.defaultDate
+      ? `${Util.WEEKDAYSFROMMOMENT[this.defaultDate.day()]} -`
+      : '';
 
-                        </Text>
-                        {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
-                    </Text>
-                </View>
-            </TouchableWithoutFeedback>
-        );
-    }
+    return (
+      <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: Colors.white,
+          }}>
+          <Text.Description2
+            style={{
+              fontSize: 12,
+              lineHeight: 16,
+              color: Colors.black_12,
+            }}>
+            {label}
+          </Text.Description2>
+          <Text.Description1 style={{fontWeight: active ? '600' : '400'}}>
+            {`${dayOfWeekFromState || dayOfWeekFromDefault || '--'} `}
+            {formattedDateFromState || formattedDateFromDefault || '--/--/----'}
+          </Text.Description1>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
 }