@momo-kits/calendar 0.0.55-beta → 0.0.55-beta.2

package/src/CalendarPro.js

@@ -7,11 +7,17 @@ import {
     Dimensions,
     ScrollView,
     TouchableWithoutFeedback,
-    StyleSheet
+    StyleSheet,
 } from 'react-native';
 import Moment from 'moment';
 import {
-    Text, SwitchLanguage, LocalizedStrings, Colors, Image, IconSource
+    Text,
+    SwitchLanguage,
+    LocalizedStrings,
+    Colors,
+    Image,
+    IconSource,
+    Spacing,
 } from '@momo-kits/core';
 import MonthList from './MonthList';
 import HeaderControl from './HeaderControl';
@@ -44,7 +50,8 @@ export default class CalendarPro extends Component {
             return {
                 ownUpdate: false,
             };
-        } if (nextProps.isShowLunar !== prevState.showLunar) {
+        }
+        if (nextProps.isShowLunar !== prevState.showLunar) {
             return { showLunar: nextProps.isShowLunar };
         }
         return null;
@@ -52,24 +59,29 @@ export default class CalendarPro extends Component {
 
     setDateRange = (dateRange, isScrollToStartDate) => {
         if (dateRange && dateRange.startDate && dateRange.endDate) {
-            this.setState({ startDate: dateRange.startDate, endDate: dateRange.endDate }, () => {
-                const dateScroll = isScrollToStartDate ? dateRange.startDate : dateRange.endDate;
-                this.refs.MonthList.scrollToMonth(dateScroll);
-            });
+            this.setState(
+                { startDate: dateRange.startDate, endDate: dateRange.endDate },
+                () => {
+                    const dateScroll = isScrollToStartDate
+                        ? dateRange.startDate
+                        : dateRange.endDate;
+                    this.refs.MonthList.scrollToMonth(dateScroll);
+                },
+            );
         }
-    }
+    };
 
     ownSetState(state) {
         this.setState({ ...state, ownUpdate: true });
     }
 
     loadLabel = (data, type) => {
-        const {
-            i18n,
-            customI18n
-        } = this.props;
+        const { i18n, customI18n } = this.props;
         if (~['w', 'weekday', 'text'].indexOf(type)) {
-            return (customI18n[type] || {})[data] || Util.I18N_MAP[i18n][type][data];
+            return (
+                (customI18n[type] || {})[data] ||
+                Util.I18N_MAP[i18n][type][data]
+            );
         }
         if (type === 'date') {
             return data.format(customI18n[type] || Util.I18N_MAP[i18n][type]);
@@ -77,11 +89,7 @@ export default class CalendarPro extends Component {
     };
 
     getDateRange = () => {
-        const {
-            maxDate,
-            minDate,
-            format
-        } = this.props;
+        const { maxDate, minDate, format } = this.props;
         let max = Moment(maxDate, format);
         let min = Moment(minDate, format);
         const maxValid = max.isValid();
@@ -102,25 +110,23 @@ export default class CalendarPro extends Component {
     };
 
     onChoose = (day) => {
-        const {
-            startDate, tabSelected
-        } = this.state;
+        const { startDate, tabSelected } = this.state;
         const { isDoubleDateMode, onDateChange } = this.props;
         if (isDoubleDateMode) {
             if (tabSelected === 1) {
                 if (startDate && day >= startDate) {
                     this.ownSetState({
-                        endDate: day
+                        endDate: day,
                     });
                 } else if (startDate && day < startDate) {
                     this.ownSetState({
                         startDate: day,
-                        endDate: null
+                        endDate: null,
                     });
                 }
             } else {
                 this.ownSetState({
-                    startDate: day
+                    startDate: day,
                 });
             }
         } else {
@@ -136,9 +142,7 @@ export default class CalendarPro extends Component {
 
     executeProcessAfterScrollCalendar = (date, key) => {
         const holidays = Object.values(Util.getHolidaysInMonth(Moment(date)));
-        const {
-            showLunar
-        } = this.state;
+        const { showLunar } = this.state;
         if (this.refs && this.refs.HeaderControl) {
             this.refs.HeaderControl.onUpdateInfo({ date });
             this.header = date.clone().startOf('month');
@@ -165,7 +169,7 @@ export default class CalendarPro extends Component {
         this.ownSetState({
             startDate: firstDate ? Moment(firstDate) : null,
             endDate: secondDate ? Moment(secondDate) : null,
-            tabSelected
+            tabSelected,
         });
     };
 
@@ -183,12 +187,22 @@ export default class CalendarPro extends Component {
             onCallbackCalendar('lunar', nextStateShowLunar);
         }
 
-        this.ownSetState({ showLunar: !showLunar, temp: data, ownUpdate: true });
+        this.ownSetState({
+            showLunar: !showLunar,
+            temp: data,
+            ownUpdate: true,
+        });
     };
 
     onPressBackArrow = () => {
-        const previousDate = Moment(this.header).startOf('month').subtract(1, 'months');
-        if (this.refs && this.refs.HeaderControl && previousDate.isSameOrAfter(this.minDate, 'month')) {
+        const previousDate = Moment(this.header)
+            .startOf('month')
+            .subtract(1, 'months');
+        if (
+            this.refs &&
+            this.refs.HeaderControl &&
+            previousDate.isSameOrAfter(this.minDate, 'month')
+        ) {
             this.header = previousDate;
             this.refs.HeaderControl.onUpdateInfo({ date: previousDate });
             this.refs.MonthList.scrollToMonth(previousDate);
@@ -197,7 +211,11 @@ export default class CalendarPro extends Component {
 
     onPressNextArrow = () => {
         const nextDate = Moment(this.header).startOf('month').add(1, 'months');
-        if (this.refs && this.refs.HeaderControl && nextDate.isSameOrBefore(this.maxDate, 'month')) {
+        if (
+            this.refs &&
+            this.refs.HeaderControl &&
+            nextDate.isSameOrBefore(this.maxDate, 'month')
+        ) {
             this.header = nextDate;
             this.refs.HeaderControl.onUpdateInfo({ date: nextDate });
             this.refs.MonthList.scrollToMonth(nextDate);
@@ -205,15 +223,22 @@ export default class CalendarPro extends Component {
     };
 
     render() {
+        const { startDate, endDate, showLunar, tabSelected, holidays, temp } =
+            this.state;
         const {
-            startDate, endDate, showLunar, tabSelected, holidays, temp
-        } = this.state;
-        const {
-            i18n, isDoubleDateMode, priceList, labelFrom, labelTo, isHideLabel, isHideHoliday, isOffLunar
+            i18n,
+            isDoubleDateMode,
+            priceList,
+            labelFrom,
+            labelTo,
+            isHideLabel,
+            isHideHoliday,
+            isOffLunar,
         } = this.props;
         let priceListFormat = priceList?.outbound;
         if (isDoubleDateMode) {
-            priceListFormat = tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
+            priceListFormat =
+                tabSelected === 0 ? priceList?.outbound : priceList?.inbound;
         }
         return (
             <View style={styles.container}>
@@ -224,16 +249,23 @@ export default class CalendarPro extends Component {
                         onPressBackArrow={this.onPressBackArrow}
                         onPressNextArrow={this.onPressNextArrow}
                     />
+                    <View style={styles.blueSeperator} />
                     <View style={styles.viewDay}>
                         {[1, 2, 3, 4, 5, 6, 7].map((item) => (
                             <Text
-                                style={[styles.textDay, { color: item === 6 || item === 7 ? Colors.red_05 : Colors.black_12 }]}
-                                key={item}
-                            >
+                                style={[
+                                    styles.textDay,
+                                    {
+                                        color:
+                                            item === 6 || item === 7
+                                                ? Colors.red_05
+                                                : Colors.black_12,
+                                    },
+                                ]}
+                                key={item}>
                                 {Util.mapWeeKDate(item)}
                             </Text>
-                        )
-                        )}
+                        ))}
                     </View>
                     <MonthList
                         ref="MonthList"
@@ -257,51 +289,72 @@ export default class CalendarPro extends Component {
                         isHideLabel={isHideLabel}
                     />
                 </View>
-                {
-                    !isOffLunar && (
-                        <View style={styles.viewLunar}>
-                            <TouchableWithoutFeedback onPress={this.toggleLunarDate}>
-                                <Image source={showLunar ? IconSource.ic_checkbox_checked_24 : IconSource.ic_checkbox_unchecked_24} style={styles.iconSelected} />
-                            </TouchableWithoutFeedback>
-                            <Text.SubTitle
-                                style={styles.txtLunar}
-                                onPress={this.toggleLunarDate}
-                            >
-                                {SwitchLanguage.showLunar}
-                            </Text.SubTitle>
-                        </View>
-                    )
-                }
+                {!isOffLunar && (
+                    <View style={styles.viewLunar}>
+                        <TouchableWithoutFeedback
+                            onPress={this.toggleLunarDate}>
+                            <Image
+                                source={
+                                    showLunar
+                                        ? IconSource.ic_checkbox_checked_24
+                                        : IconSource.ic_checkbox_unchecked_24
+                                }
+                                style={styles.iconSelected}
+                            />
+                        </TouchableWithoutFeedback>
+                        <Text
+                            style={styles.txtLunar}
+                            onPress={this.toggleLunarDate}>
+                            {SwitchLanguage.showLunar}
+                        </Text>
+                    </View>
+                )}
 
-                {
-                    !isHideHoliday && (
-                        <ScrollView
-                            contentContainerStyle={styles.contentScroll}
-                            showsVerticalScrollIndicator={false}
-                            enabledNestedScroll
-                        >
-                            {temp && temp.length > 0 && temp.map((item, idx) => {
-                                const labelHoliday = showLunar ? (item.mixedLabel || item.label || '') : (item.label || '');
-                                const labelHighlight = showLunar ? (item.highlight || '') : '';
-                                const labelDate = LocalizedStrings.defaultLanguage === 'en' ? `${Util.mapMonthShorten(item.month)} ${item.day}` : `${item.day} tháng ${item.month}`;
+                {!isHideHoliday && (
+                    <ScrollView
+                        contentContainerStyle={styles.contentScroll}
+                        showsVerticalScrollIndicator={false}
+                        enabledNestedScroll>
+                        {temp &&
+                            temp.length > 0 &&
+                            temp.map((item, idx) => {
+                                const labelHoliday = showLunar
+                                    ? item.mixedLabel || item.label || ''
+                                    : item.label || '';
+                                const labelHighlight = showLunar
+                                    ? item.highlight || ''
+                                    : '';
+                                const labelDate =
+                                    LocalizedStrings.defaultLanguage === 'en'
+                                        ? `${Util.mapMonthShorten(
+                                              item.month,
+                                          )} ${item.day}`
+                                        : `${item.day} tháng ${item.month}`;
                                 return (
-                                    <View style={styles.row} key={idx.toString()}>
-                                        <Text.SubTitle style={styles.txtMonthLunar}>
+                                    <View
+                                        style={styles.row}
+                                        key={idx.toString()}>
+                                        <Text style={styles.txtMonthLunar}>
                                             {labelDate}
-                                        </Text.SubTitle>
-                                        <Text.SubTitle style={styles.subTextLunar}>
+                                        </Text>
+                                        <Text style={styles.subTextLunar}>
                                             {`${labelHoliday} `}
-                                            {
-                                                labelHighlight ? <Text style={{ color: Colors.red_05 }}>{labelHighlight}</Text> : ''
-                                            }
-                                        </Text.SubTitle>
+                                            {labelHighlight ? (
+                                                <Text
+                                                    style={{
+                                                        color: Colors.red_05,
+                                                    }}>
+                                                    {labelHighlight}
+                                                </Text>
+                                            ) : (
+                                                ''
+                                            )}
+                                        </Text>
                                     </View>
                                 );
                             })}
-                        </ScrollView>
-                    )
-                }
-
+                    </ScrollView>
+                )}
             </View>
         );
     }
@@ -313,15 +366,21 @@ CalendarPro.propTypes = {
     customI18n: PropTypes.object,
     isShowLunar: PropTypes.bool,
     onCallbackCalendar: PropTypes.func,
-    minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
-    maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
+    minDate: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.instanceOf(Date),
+    ]),
+    maxDate: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.instanceOf(Date),
+    ]),
 };
 
 CalendarPro.defaultProps = {
     format: 'YYYY-MM-DD',
     i18n: 'vi',
     customI18n: {},
-    isShowLunar: true
+    isShowLunar: true,
 };
 
 const styles = StyleSheet.create({
@@ -331,7 +390,7 @@ const styles = StyleSheet.create({
         // fontSize: 12,
         color: '#222222',
         paddingLeft: 6,
-        flexShrink: 1
+        flexShrink: 1,
     },
     contentScroll: { paddingHorizontal: 12, paddingVertical: 10 },
     iconSelected: { width: 24, height: 24, resizeMode: 'cover' },
@@ -339,10 +398,16 @@ const styles = StyleSheet.create({
         paddingLeft: 6,
         color: '#222222',
         // fontSize: 12,
-        lineHeight: 14
+        lineHeight: 14,
     },
     viewLunar: {
-        flexDirection: 'row', alignItems: 'center', marginHorizontal: 12, paddingVertical: 12, borderBottomWidth: 1, borderStyle: 'solid', borderColor: '#c7c7cd'
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginHorizontal: 12,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderStyle: 'solid',
+        borderColor: '#c7c7cd',
     },
     viewDate: { paddingHorizontal: 12 },
     textDay: {
@@ -355,9 +420,14 @@ const styles = StyleSheet.create({
     viewDay: {
         flexDirection: 'row',
         justifyContent: 'space-between',
-        paddingHorizontal: 7,
+        paddingHorizontal: Spacing.S,
         paddingTop: 15,
         paddingBottom: 10,
     },
-    container: { flex: 1, backgroundColor: 'white', marginTop: 20, },
+    container: { flex: 1, backgroundColor: 'white', marginTop: 20 },
+    blueSeperator: {
+        height: 1,
+        width: '100%',
+        backgroundColor: Colors.blue_05,
+    },
 });