@momo-kits/calendar 0.79.6 → 0.80.2

package/Month.tsx

@@ -0,0 +1,114 @@
+import React, {PureComponent} from 'react';
+
+import {View} from 'react-native';
+import moment from 'moment';
+import Moment from 'moment';
+import Day from './Day';
+import {scaleSize, Spacing} from '@momo-kits/foundation';
+import {MonthProps} from './types';
+import {ContainerContext} from './index';
+
+export default class Month extends PureComponent<MonthProps> {
+  rowArray;
+  temp;
+  constructor(props: MonthProps) {
+    super(props);
+    const {dateList} = props;
+    this.rowArray = new Array(dateList.length / 7).fill('');
+    this.temp = this.rowArray.map((item, i) =>
+      dateList.slice(i * 7, i * 7 + 7),
+    );
+  }
+
+  findHoliday = (date: Moment.Moment) => {
+    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: moment.Moment) => {
+    const holiday = this.findHoliday(date);
+    return {
+      isSolarHoliday: !!(holiday && !holiday.lunar),
+      isLunarHoliday: !!(holiday && holiday.lunar),
+    };
+  };
+
+  renderDayRow = (dayList: any[], index: number) => (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: Spacing.XS,
+        height: scaleSize(48),
+      }}
+      key={`row${index}`}>
+      {dayList.map((item, i) => {
+        const keyDay = moment(item.date).format('YYYY-MM-DD');
+        const priceInfo = this.props?.priceListDate?.[keyDay];
+        const {
+          minDate,
+          maxDate,
+          startDate,
+          endDate,
+          isShowLunar,
+          isDoubleDateMode,
+          disabledDays,
+        } = this.props;
+
+        const dateItem = new Date(item.date);
+        const mappedDisabledArray = disabledDays?.map(item => String(item));
+        const isDisabled = mappedDisabledArray?.includes(String(dateItem));
+
+        return (
+          <Day
+            {...this.props}
+            minDate={minDate}
+            maxDate={maxDate}
+            isShowLunar={isShowLunar}
+            isDoubleDateMode={isDoubleDateMode}
+            startDate={startDate}
+            endDate={endDate}
+            {...this.checkHoliday(item.date)}
+            date={item.date}
+            havePriceList={!!this.props.priceListDate}
+            lunarDate={item.lunarDate}
+            empty={item.empty}
+            key={`day${i.toString()}`}
+            index={i}
+            price={priceInfo?.priceAsString}
+            isBestPrice={priceInfo?.isBestPrice}
+            isDisabled={isDisabled}
+          />
+        );
+      })}
+    </View>
+  );
+
+  render() {
+    const {month} = this.props;
+    if (month) {
+      return (
+        <ContainerContext.Consumer>
+          {size => (
+            <View style={{width: size.width}}>
+              <View
+                style={{
+                  paddingHorizontal: Spacing.S,
+                  width: '100%',
+                  alignItems: 'center',
+                }}>
+                {this.temp.map((item, i) => this.renderDayRow(item, i))}
+              </View>
+            </View>
+          )}
+        </ContainerContext.Consumer>
+      );
+    }
+    return <View />;
+  }
+}

package/{src/MonthList.tsx → MonthList.tsx}

@@ -1,55 +1,70 @@
-/* eslint-disable react/no-did-update-set-state */
-import React, {Component} from 'react';
-import {Dimensions, FlatList, Platform} from 'react-native';
+import React, {Component, useCallback} from 'react';
+import {FlatList, Platform} from 'react-native';
 import moment from 'moment';
+import Moment from 'moment';
 import Month from './Month';
-import style from './Day/style';
 import LunarDateConverter from './LunarDateConverter';
-import {scaleSize} from '@momo-kits/foundation';
+import {MonthListProps, MonthListState} from './types';
+import {ContainerContext} from './index';
+import {scaleSize, Spacing} from '@momo-kits/foundation';
 
-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) {
+export default class MonthList extends Component<
+  MonthListProps,
+  MonthListState
+> {
+  currentDate;
+  data;
+  currentScrollIndex;
+  list;
+  heightStyle;
+  holidays;
+  currentKey: any;
+
+  constructor(props: MonthListProps) {
     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.list = React.createRef<FlatList>();
     this.heightStyle = {};
     this.holidays = props.holidays;
   }
 
-  renderMonth = ({item, index}) => {
-    const {isDoubleDateMode, priceList, disabledWeekend, containerWidth} =
-      this.props;
+  renderMonth = (data: {
+    item: {dateList: any; date: moment.Moment};
+    index: number;
+  }) => {
+    const {isDoubleDateMode, disabledDays, priceList, isShowLunar} = this.props;
+    const {item, index} = data;
+
     const keyMonth = moment(item.date)?.format('YYYY-MM');
-    const priceListDate = priceList?.[keyMonth]?.day;
+    const priceListDate = priceList?.[keyMonth];
 
     return (
       <Month
-        containerWidth={containerWidth}
-        disabledWeekend={disabledWeekend}
         {...this.props}
         key={index}
         month={item.date || {}}
         dateList={item.dateList || []}
         priceListDate={priceListDate}
+        isShowLunar={isShowLunar}
         isDoubleDateMode={isDoubleDateMode}
+        disabledDays={disabledDays}
       />
     );
   };
 
-  checkRange = (date, start, end) => {
+  checkRange = (
+    date: moment.Moment,
+    start: moment.Moment,
+    end: moment.Moment,
+  ) => {
     if (!date || !start) return false;
     if (!end) {
       return date.year() === start.year() && date.month() === start.month();
@@ -66,17 +81,20 @@ export default class MonthList extends Component {
     );
   };
 
-  shouldUpdate = (month, props) => {
+  shouldUpdate = (
+    month: {date: any; dateList?: any[]},
+    props?: MonthListProps,
+  ) => {
     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);
+    return prev || next;
   };
 
-  convertLunarToSolar(date) {
+  convertLunarToSolar(date: moment.Moment) {
     return date
       ? converter.SolarToLunar({
           solarDay: date.date(),
@@ -86,7 +104,7 @@ export default class MonthList extends Component {
       : {};
   }
 
-  findHoliday = date => {
+  findHoliday = (date: Moment.Moment) => {
     const {holidays} = this.props;
     if (date && holidays && holidays.length > 0) {
       const day = date.date();
@@ -96,15 +114,15 @@ export default class MonthList extends Component {
     return null;
   };
 
-  checkHoliday = (date, holidays) => {
-    const holiday = this.findHoliday(date, holidays);
+  checkHoliday = (date: moment.Moment) => {
+    const holiday = this.findHoliday(date);
     return {
       isSolarHoliday: !!(holiday && !holiday.lunar),
       isLunarHoliday: !!(holiday && holiday.lunar),
     };
   };
 
-  getDayList = date => {
+  getDayList = (date: moment.Moment) => {
     let dayList;
     const month = date.month();
     let weekday = date.isoWeekday();
@@ -144,10 +162,10 @@ export default class MonthList extends Component {
     );
   };
 
-  getMonthList = props => {
+  getMonthList = (props?: MonthListProps) => {
     const minDate = moment((props || this.props).minDate).date(1);
     const maxDate = moment((props || this.props).maxDate);
-    const monthList = [];
+    const monthList: {date: moment.Moment; dateList: any[]}[] = [];
     if (!maxDate || !minDate) return monthList;
     while (
       maxDate > minDate ||
@@ -157,18 +175,21 @@ export default class MonthList extends Component {
       const month = {
         date: d,
         dateList: this.getDayList(d),
+        shouldUpdate: false,
       };
       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'));
+  getIndexOfMonth = (month: moment.Moment, data: any[]) => {
+    return data.findIndex(item => item.date.isSame(month, 'month'));
+  };
 
-  getCurrentVisibleMonth = info => {
+  getCurrentVisibleMonth = (info: {changed: any}) => {
     const {changed} = info;
     const {onScrollCalendar} = this.props;
     if (changed && changed.length > 0) {
@@ -180,10 +201,9 @@ export default class MonthList extends Component {
             this.data && this.data[index] && this.data[index].dateList
               ? {
                   height:
-                    (style.containerDayHeight *
-                      this.data[index].dateList.length) /
-                      7 +
-                    10,
+                    (scaleSize(48) * this.data[index].dateList.length) / 7 +
+                    Spacing.L * 2 +
+                    Spacing.XS,
                 }
               : {};
         } catch (e) {
@@ -200,9 +220,10 @@ export default class MonthList extends Component {
     }
   };
 
-  keyExtractor = item => `${item.date.month() + 1}/${item.date.year()}`;
+  keyExtractor = (item: {date: Moment.Moment}) =>
+    `${item.date.month() + 1}/${item.date.year()}`;
 
-  scrollToMonth = month => {
+  scrollToMonth = (month: moment.Moment) => {
     const index = this.getIndexOfMonth(month, this.data);
     if (this.list.current && index !== -1) {
       this.list.current.scrollToIndex({
@@ -212,39 +233,49 @@ export default class MonthList extends Component {
     }
   };
 
-  getItemLayout = (data, index) => ({
-    length: ITEM_WIDTH,
-    offset: ITEM_WIDTH * index,
+  getItemLayout = (data: any, index: number, width: number) => ({
+    length: width,
+    offset: width * index,
     index,
   });
 
+  componentDidMount() {
+    setTimeout(() => {
+      this.scrollToMonth(this.currentDate);
+    }, 500);
+  }
+
   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,
-        }}
-      />
+      <ContainerContext.Consumer>
+        {size => (
+          <FlatList
+            extraData={priceList}
+            style={this.heightStyle}
+            pagingEnabled
+            horizontal
+            ref={this.list}
+            data={this.data}
+            renderItem={this.renderMonth}
+            showsHorizontalScrollIndicator={false}
+            keyExtractor={this.keyExtractor}
+            onViewableItemsChanged={this.getCurrentVisibleMonth}
+            onScrollToIndexFailed={() => {}}
+            scrollEnabled
+            initialNumToRender={3}
+            maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
+            windowSize={1}
+            initialScrollIndex={this.currentScrollIndex}
+            getItemLayout={(data, index) =>
+              this.getItemLayout(data, index, size.width)
+            }
+            viewabilityConfig={{
+              itemVisiblePercentThreshold: 50,
+            }}
+          />
+        )}
+      </ContainerContext.Consumer>
     );
   }
 }

package/{src/TabHeader.tsx → TabHeader.tsx}

@@ -2,11 +2,24 @@ import React from 'react';
 import {TouchableWithoutFeedback, View} from 'react-native';
 import Moment from 'moment';
 import Util from './Util';
-import {ApplicationContext, Colors, Text} from '@momo-kits/foundation';
+import {
+  ApplicationContext,
+  Colors,
+  Radius,
+  Spacing,
+  Text,
+} from '@momo-kits/foundation';
+import {TabHeaderProps, TabHeaderState} from './types';
+
+export default class TabHeader extends React.Component<
+  TabHeaderProps,
+  TabHeaderState
+> {
+  label;
+  defaultDate;
 
-export default class TabHeader extends React.Component {
   static contextType = ApplicationContext;
-  constructor(props) {
+  constructor(props: TabHeaderProps) {
     super(props);
     this.state = {
       active: props.activeTab,
@@ -17,19 +30,17 @@ export default class TabHeader extends React.Component {
 
   onChangeTab = () => {
     const {onChangeTab, id} = this.props;
-    if (onChangeTab) {
-      onChangeTab(id);
-    }
+    onChangeTab?.(id);
   };
 
-  updateView = (date, activeTab) => {
+  updateView = (date: Moment.Moment, activeTab: boolean) => {
     this.setState({
       date: date ? Moment(date) : '',
       active: activeTab,
     });
   };
 
-  setActiveTab = active => {
+  setActiveTab = (active: boolean) => {
     this.setState({active});
   };
 
@@ -52,10 +63,17 @@ export default class TabHeader extends React.Component {
     return (
       <TouchableWithoutFeedback disabled={disabled} onPress={this.onChangeTab}>
         <View
-          style={{
-            flex: 1,
-            backgroundColor: theme.colors.background.surface,
-          }}>
+          style={[
+            {
+              flex: 1,
+              padding: Spacing.S,
+              borderRadius: Radius.S,
+            },
+            active &&
+              !disabled && {
+                backgroundColor: theme.colors.background.surface,
+              },
+          ]}>
           <Text typography={'description_s'} color={Colors.black_12}>
             {translate(label)}
           </Text>