@momo-kits/calendar 0.0.74-beta → 0.72.1

package/src/Day/index.js

@@ -1,193 +1,233 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 
-import {
-    View,
-    TouchableHighlight,
-    Text
-} from 'react-native';
-import { Colors, SwitchLanguage } from '@momo-kits/core';
+import {TouchableHighlight, View} from 'react-native';
+import {Colors, Spacing, Text} from '@momo-kits/core-v2';
 import style from './style';
 
 class Day extends Component {
-    constructor(props) {
-        super(props);
-        this.statusCheck();
-    }
-
-    chooseDay = () => {
-        const { onChoose, date } = this.props;
-        onChoose && onChoose(date);
-    };
+  constructor(props) {
+    super(props);
+    this.statusCheck();
+  }
 
-    findHoliday = (date, holidays) => {
-        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;
-    };
+  chooseDay = () => {
+    const {onChoose, date} = this.props;
+    onChoose && onChoose(date);
+  };
 
-    checkHoliday = (date, holidays) => {
-        const holiday = this.findHoliday(date, holidays);
-        return {
-            solarHoliday: !!(holiday && !holiday.lunar),
-            lunarHoliday: !!(holiday && holiday.lunar)
-        };
-    };
+  findHoliday = (date, holidays) => {
+    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;
+  };
 
-    statusCheck = (props) => {
-        const {
-            startDate,
-            endDate,
-            date = null,
-            minDate,
-            maxDate,
-            empty,
-            index,
-            isShowLunar,
-            tabSelected,
-            isDoubleDateMode,
-            lunarDate,
-            isSolarHoliday,
-            isLunarHoliday,
-            price
-        } = props || this.props;
-        this.isValid = date && (date >= minDate || date.isSame(minDate, 'day')) && (date <= maxDate || date.isSame(maxDate, 'day'));
-        this.isMid = isDoubleDateMode && date > startDate && date < endDate
-            || (!date && empty >= startDate && empty <= endDate);
-        this.isStart = date && date.isSame(startDate, 'd');
-        this.isStartPart = this.isStart && endDate;
-        this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
-        this.isFocus = this.isMid || this.isStart || this.isEnd;
-        this.isWeekEnd = index === 6 || index === 5;
-        this.showLunar = isShowLunar;
-        this.lunarDate = lunarDate;
-        this.isDoubleDateMode = isDoubleDateMode;
-        this.isLunarHoliday = isLunarHoliday;
-        this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
-        this.isSolarHoliday = isSolarHoliday;
-        this.isInScope = isDoubleDateMode ? (tabSelected === 0 || (tabSelected === 1 && startDate && date && date.isSameOrAfter(startDate, 'day'))) : true;
-        return this.isFocus || this.diffPrice;
+  checkHoliday = (date, holidays) => {
+    const holiday = this.findHoliday(date, holidays);
+    return {
+      solarHoliday: !!(holiday && !holiday.lunar),
+      lunarHoliday: !!(holiday && holiday.lunar),
     };
+  };
 
-    shouldComponentUpdate(nextProps) {
-        const {
-            isDoubleDateMode, isShowLunar, tabSelected, isSolarHoliday,
-            isLunarHoliday,
-            price,
-            isBestPrice,
-            startDate,
-            endDate
-        } = this.props;
-        const prevStatus = this.isFocus;
-        const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
-        const lunarChange = isShowLunar !== nextProps.isShowLunar;
-        const nextStatus = this.statusCheck(nextProps);
-        const tabChange = tabSelected !== nextProps.tabSelected;
-        const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
-        const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
-        const diffPrice = price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
-        const startDateChange = startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
-        const endDateChange = endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
-        return !!(prevStatus !== nextStatus || selectionModeChange || lunarChange || tabChange || solarHoliday || lunarHoliday || diffPrice || startDateChange || endDateChange);
-    }
+  statusCheck = props => {
+    const {
+      startDate,
+      endDate,
+      date = null,
+      minDate,
+      maxDate,
+      empty,
+      index,
+      isShowLunar,
+      isDoubleDateMode,
+      lunarDate,
+      isSolarHoliday,
+      isLunarHoliday,
+    } = props || this.props;
+    this.isValid =
+      date &&
+      (date >= minDate || date.isSame(minDate, 'day')) &&
+      (date <= maxDate || date.isSame(maxDate, 'day'));
+    this.isMid =
+      (isDoubleDateMode && date > startDate && date < endDate) ||
+      (!date && empty >= startDate && empty <= endDate);
+    this.isStart = date && date.isSame(startDate, 'd');
+    this.isStartPart = this.isStart && endDate;
+    this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
+    this.isFocus = this.isMid || this.isStart || this.isEnd;
+    this.isWeekEnd = index === 6 || index === 5;
+    this.showLunar = isShowLunar;
+    this.lunarDate = lunarDate;
+    this.isDoubleDateMode = isDoubleDateMode;
+    this.isLunarHoliday = isLunarHoliday;
+    this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
+    this.isSolarHoliday = isSolarHoliday;
+    this.isInScope = true;
+    return this.isFocus || this.diffPrice;
+  };
 
-    render() {
-        const {
-            date, empty, isDoubleDateMode, price, isBestPrice, isShowPrice, labelFrom, labelTo, isHideLabel
-        } = this.props;
-        const text = date ? date.date() : '';
-        return (
-            <View style={style.dayContainer}>
-                <View style={[
-                    this.isMid && !empty && style.mid,
-                    this.isStartPart && style.dayStartContainer,
-                    this.isEnd && style.dayEndContainer
+  shouldComponentUpdate(nextProps) {
+    const {
+      isDoubleDateMode,
+      isShowLunar,
+      tabSelected,
+      isSolarHoliday,
+      isLunarHoliday,
+      price,
+      isBestPrice,
+      startDate,
+      endDate,
+    } = this.props;
+    const prevStatus = this.isFocus;
+    const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
+    const lunarChange = isShowLunar !== nextProps.isShowLunar;
+    const nextStatus = this.statusCheck(nextProps);
+    const tabChange = tabSelected !== nextProps.tabSelected;
+    const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
+    const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
+    const diffPrice =
+      price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
+    const startDateChange =
+      startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
+    const endDateChange =
+      endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
+    return !!(
+      prevStatus !== nextStatus ||
+      selectionModeChange ||
+      lunarChange ||
+      tabChange ||
+      solarHoliday ||
+      lunarHoliday ||
+      diffPrice ||
+      startDateChange ||
+      endDateChange
+    );
+  }
 
-                ]}
-                >
-                    {this.isValid && this.isInScope
-                        ? (
-                            <TouchableHighlight
-                                style={[
-                                    style.day,
-                                    (this.isStart || this.isEnd) && style.focused
-                                ]}
-                                underlayColor="rgba(255, 255, 255, 0.35)"
-                                onPress={this.chooseDay}
-                            >
-                                <>
-                                    <Text style={[
-                                        style.dayText,
-                                        this.isWeekEnd && style.weekendDay,
-                                        this.isSolarHoliday && style.weekendDay,
-                                        (this.isStart || this.isEnd) && style.focusedText,
-                                    ]}
-                                    >
-                                        {text}
-                                    </Text>
-                                    {
-                                        this.lunarDate && this.showLunar && (
-                                            <Text style={[
-                                                style.lunarDayText,
-                                                (this.isLunarHoliday || this.isLunarDayStart) && style.weekendDay,
-                                                (this.isStart || this.isEnd) && style.focusedText,
-                                            ]}
-                                            >
-                                                {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
-                                            </Text>
-                                        )
-                                    }
-                                </>
-                            </TouchableHighlight>
-                        )
-                        : (
-                            <View style={[style.day]}>
-                                <Text style={[
-                                    style.dayText,
-                                    style.dayTextDisabled,
-                                ]}
-                                >
-                                    {text}
-                                </Text>
-                                {
-                                    this.lunarDate && this.showLunar && text ? (
-                                        <Text style={[
-                                            style.lunarDayText,
-                                            style.dayTextDisabled,
-                                        ]}
-                                        >
-                                            {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
-                                        </Text>
-                                    ) : <View />
-                                }
-                            </View>
-                        )}
-                </View>
+  render() {
+    const {date, empty, price, isBestPrice, disabledWeekend} = this.props;
 
-                {(isDoubleDateMode && this.isStart && !isHideLabel) && (
-                    <View style={style.txtGo}>
-                        <Text style={{ fontSize: 8, color: 'white' }}>
-                            {labelFrom || SwitchLanguage.departing}
-                        </Text>
-                    </View>
+    const text = date ? date.date() : '';
+    return (
+      <View style={style.dayContainer}>
+        <View
+          style={[
+            this.isMid && !empty && style.mid,
+            this.isStartPart && style.dayStartContainer,
+            this.isEnd && style.dayEndContainer,
+          ]}>
+          {this.isValid && this.isInScope ? (
+            <TouchableHighlight
+              disabled={disabledWeekend && this.isWeekEnd}
+              style={[
+                style.day,
+                {
+                  paddingVertical: !!price ? Spacing.XS : Spacing.S,
+                },
+                (this.isStart || this.isEnd) && style.focused,
+              ]}
+              underlayColor="rgba(255, 255, 255, 0.35)"
+              onPress={this.chooseDay}>
+              <>
+                {this.lunarDate && this.showLunar && (
+                  <Text.Label4
+                    style={[
+                      style.lunarDayText,
+                      (this.isLunarHoliday || this.isLunarDayStart) &&
+                        style.weekendDay,
+                      (this.isStart || this.isEnd) && style.focusedText,
+                    ]}>
+                    {this.lunarDate.lunarDay === 1
+                      ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                      : this.lunarDate.lunarDay}
+                  </Text.Label4>
                 )}
-                {(isDoubleDateMode && this.isEnd && !isHideLabel) && (
-                    <View style={style.txtBack}>
-                        <Text style={{ fontSize: 8, color: 'white' }}>
-                            {labelTo || SwitchLanguage.returning}
-                        </Text>
-                    </View>
+                <Text.Label1
+                  style={[
+                    style.dayText,
+                    {paddingTop: !!price ? 4 : 0},
+                    this.isWeekEnd && style.weekendDay,
+                    this.isSolarHoliday && style.weekendDay,
+                    (this.isStart || this.isEnd) && style.focusedText,
+                    this.isWeekEnd && disabledWeekend && style.disabledWeekend,
+                  ]}>
+                  {text}
+                </Text.Label1>
+                {!!price ? (
+                  <Text.Label3
+                    style={[
+                      this.isValid && this.isInScope
+                        ? style.price
+                        : style.dayTextDisabled,
+                      isBestPrice && {
+                        color: Colors.pink_03,
+                      },
+                      (this.isStart || this.isEnd) && {
+                        color: Colors.black_01,
+                      },
+                    ]}>
+                    {price}
+                  </Text.Label3>
+                ) : (
+                  <View
+                    style={{
+                      paddingBottom: this.props.havePriceList ? Spacing.S : 0,
+                    }}
+                  />
                 )}
-                {this.isValid
-                && this.isInScope
-                && !!(price)
-                && <Text style={[style.price, isBestPrice && { color: Colors.pink_05_b }]}>{price}</Text>}
+              </>
+            </TouchableHighlight>
+          ) : (
+            <View
+              style={[
+                style.day,
+                {
+                  paddingVertical: !!price
+                    ? Spacing.XS + Spacing.XXS
+                    : Spacing.S,
+                },
+              ]}>
+              {this.lunarDate && this.showLunar && text ? (
+                <Text.Label4
+                  style={[style.lunarDayText, style.dayTextDisabled]}>
+                  {this.lunarDate.lunarDay === 1
+                    ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                    : this.lunarDate.lunarDay}
+                </Text.Label4>
+              ) : (
+                <View />
+              )}
+              <Text.Action2 style={[style.dayText, style.dayTextDisabled]}>
+                {text}
+              </Text.Action2>
+              {text && !!price ? (
+                <Text.Label3
+                  style={[
+                    this.isValid && this.isInScope
+                      ? style.price
+                      : style.dayTextDisabled,
+                    isBestPrice && {
+                      color: Colors.pink_03,
+                    },
+                  ]}>
+                  {price}
+                </Text.Label3>
+              ) : (
+                <View
+                  style={{
+                    paddingBottom: this.props.havePriceList ? Spacing.S : 0,
+                  }}
+                />
+              )}
             </View>
-        );
-    }
+          )}
+        </View>
+      </View>
+    );
+  }
 }
 
 export default Day;

package/src/Day/style.js

@@ -1,9 +1,9 @@
-import { Dimensions } from 'react-native';
-import { Colors } from '@momo-kits/core';
+import {Dimensions} from 'react-native';
+import {Spacing, Colors} from '@momo-kits/core-v2';
 
 const dayWidth = (Dimensions.get('window').width - 38) / 7;
 const SCREEN_WIDTH = Dimensions.get('window').width;
-const SCREEN_DPI_WIDTH = (SCREEN_WIDTH * Dimensions.get('window').scale);
+const SCREEN_DPI_WIDTH = SCREEN_WIDTH * Dimensions.get('window').scale;
 const IPHONE_4_5_WIDTH = 640;
 const dayTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 13 : 15;
 const lunarTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
@@ -11,119 +11,117 @@ const priceTextSize = SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10;
 const lineHeightDayText = 1.3 * dayTextSize;
 const lineHeightLunarText = 1.3 * lunarTextSize;
 const lineHeightPriceText = 1.3 * priceTextSize;
-const containerDayHeight = lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
+const containerDayHeight =
+  lineHeightDayText + lineHeightLunarText + lineHeightPriceText + 10;
 const heightDefault = lineHeightDayText + lineHeightLunarText;
 export default {
-    dayContainer: {
-        width: dayWidth,
-        borderRadius: 4,
-        alignItems: 'center',
-        height: containerDayHeight,
-    },
-    day: {
-        width: dayWidth,
-        paddingVertical: 5,
-        overflow: 'hidden',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 4,
-        height: heightDefault + 5
-    },
-    dayText: {
-        fontSize: dayTextSize,
-        textAlign: 'center',
-        fontWeight: 'bold',
-        color: '#222222'
-    },
-    lunarDayText: {
-        width: dayWidth,
-        textAlign: 'right',
-        fontSize: SCREEN_DPI_WIDTH === IPHONE_4_5_WIDTH ? 8 : 10,
-        paddingRight: 5,
-        color: '#222222'
-    },
-    todayText: {
-        color: 'blue'
-    },
-    weekendDay: {
-        color: '#e82956'
-    },
-    dayTextDisabled: {
-        opacity: 0.2
-    },
-    focused: {
-        backgroundColor: Colors.pink_05_b
-    },
-    focusedText: {
-        color: 'white'
-    },
-    dayStartContainer: {
-        borderTopLeftRadius: 4,
-        borderBottomLeftRadius: 4,
-        backgroundColor: Colors.pink_09,
-        // height: heightDefault
-    },
-    dayEndContainer: {
-        borderTopRightRadius: 4,
-        borderBottomRightRadius: 4,
-        backgroundColor: Colors.pink_09,
-        // height: heightDefault
-    },
-    mid: {
-        backgroundColor: Colors.pink_09,
-        // height: heightDefault
-    },
-    departLabel: {
-        position: 'absolute',
-        backgroundColor: 'yellow',
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    returnLabel: {
-        position: 'absolute',
-        backgroundColor: 'yellow',
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        justifyContent: 'center',
-        alignItems: 'center',
-        top: 0,
-        right: 0
-    },
-    containerDayHeight,
-    txtBack: {
-        position: 'absolute',
-        backgroundColor: '#ffbb1e',
-        borderRadius: 100,
-        top: -2,
-        right: -2,
-        zIndex: 999,
-        padding: 2,
-        width: 15,
-        height: 15,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    txtGo: {
-        position: 'absolute',
-        backgroundColor: '#ffbb1e',
-        top: -2,
-        left: -2,
-        borderRadius: 100,
-        padding: 2,
-        zIndex: 999,
-        width: 15,
-        height: 15,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    price: {
-        fontSize: priceTextSize,
-        lineHeight: lineHeightPriceText,
-        color: '#8d919d'
-    },
-    lineHeightPriceText
+  dayContainer: {
+    width: dayWidth,
+    borderRadius: 4,
+    alignItems: 'center',
+    height: containerDayHeight,
+  },
+  disabledWeekend: {color: Colors.red_07},
+  day: {
+    width: dayWidth,
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+  },
+  dayText: {
+    textAlign: 'center',
+  },
+  lunarDayText: {
+    width: dayWidth,
+    textAlign: 'right',
+    paddingRight: Spacing.XS,
+    position: 'absolute',
+    top: Spacing.XXS,
+    color: Colors.black_12,
+  },
+  todayText: {
+    color: 'blue',
+  },
+  weekendDay: {
+    color: Colors.red_05,
+  },
+  dayTextDisabled: {
+    opacity: 0.4,
+  },
+
+  focused: {
+    backgroundColor: Colors.pink_03,
+  },
+  focusedText: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  dayStartContainer: {
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+    backgroundColor: Colors.pink_03,
+  },
+  dayEndContainer: {
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+    backgroundColor: Colors.pink_03,
+  },
+  mid: {
+    backgroundColor: Colors.pink_09,
+    // height: heightDefault
+  },
+  departLabel: {
+    position: 'absolute',
+    backgroundColor: 'yellow',
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  returnLabel: {
+    position: 'absolute',
+    backgroundColor: 'yellow',
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    top: 0,
+    right: 0,
+  },
+  containerDayHeight,
+  txtBack: {
+    position: 'absolute',
+    backgroundColor: '#ffbb1e',
+    borderRadius: 100,
+    top: -2,
+    right: -2,
+    zIndex: 999,
+    padding: 2,
+    width: 15,
+    height: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txtGo: {
+    position: 'absolute',
+    backgroundColor: '#ffbb1e',
+    top: -2,
+    left: -2,
+    borderRadius: 100,
+    padding: 2,
+    zIndex: 999,
+    width: 15,
+    height: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  price: {
+    color: Colors.black_15,
+    marginTop: -4,
+    lineHeight: 14,
+  },
+  lineHeightPriceText,
 };