fix(Calendar): 增加onChange & showBar api

Author: ChenlingasMx

packages/core/src/Calendar/README.md

@@ -91,8 +91,10 @@ export default CalendarView
 |------|------|-----|------|
 | `color` | 日历颜色 | string | - |
 | `lunarHoliday` | 是否显示农历及假日 | Boolean | `false` |
-| `showLunar` | 农历详情 | Boolean | `false` |
+| `showLunar` | 是否显示农历详情 | Boolean | `false` |
+| `showBar` | 是否显示导航栏 | Boolean | `true` |
 | `bar` | 导航栏 | React.ReactNode | - |
+| `onChange` | 选择时间事件 |  (value: string) => void | - |
 
 ### bar 参数
 | 参数 | 说明 | 类型 | 默认值 |

packages/core/src/Calendar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, ViewProps, TextProps, StyleSheet, TouchableOpacity, Dimensions, Platform } from 'react-native';
+import { View, Text, ViewProps, StyleSheet, TouchableOpacity, Dimensions, Platform } from 'react-native';
 import Icon from '../Icon';
 import Ellipsis from '../Ellipsis';
 import { getMonths, getWeeksArray, daysArrProps, getType, getNameLen } from './utils';
@@ -22,11 +22,14 @@ interface BarState {
 export interface CalendarProps extends ViewProps {
   // 日历颜色
   color: string;
-  //是否显示农历及假日
+  // 是否显示农历及假日
   lunarHoliday: boolean;
   bar?: BarState;
-  //农历详情
+  // 是否显示农历详情
   showLunar: boolean;
+  onChange?: (value: string) => void;
+  // 是否显示头部导航栏
+  showBar?: boolean;
 }
 
 const Calendar = (props: CalendarProps) => {
@@ -37,7 +40,7 @@ const Calendar = (props: CalendarProps) => {
     onPressBarLeft: undefined,
     render: undefined,
   };
-  const { color = '#329BCB', lunarHoliday = false, bar = bars, showLunar = false } = props;
+  const { color = '#329BCB', lunarHoliday = false, bar = bars, showLunar = false, onChange, showBar = true } = props;
   const { barRightText, title, barLeftText, onPressBarLeft, render } = bar;
   const [currentYear, setCurrentYear] = useState<number>(toYear);
   const [currentMonth, setCurrentMonth] = useState<number>(toMonth);
@@ -52,7 +55,9 @@ const Calendar = (props: CalendarProps) => {
     setLastData(toMonths[0]);
     setDayData(toMonths[1]);
     setNextData(toMonths[2]);
-  }, [currentYear, currentMonth]);
+    const date = currentYear + '-' + (currentMonth + 1) + '-' + currentDays;
+    onChange?.(date);
+  }, [currentYear, currentMonth, currentDays]);
 
   /**
    * 头部导航栏
@@ -127,10 +132,10 @@ const Calendar = (props: CalendarProps) => {
             lunarAll.type === 1
               ? [styles.dateBase, styles.otherMonth]
               : lunarAll.type === 2
-                ? [styles.currentMonth, styles.dateBase, { backgroundColor: color }]
-                : lunarAll.type === 3
-                  ? [styles.selectMonth, styles.dateBase, { borderColor: color }]
-                  : styles.dateBase
+              ? [styles.currentMonth, styles.dateBase, { backgroundColor: color }]
+              : lunarAll.type === 3
+              ? [styles.selectMonth, styles.dateBase, { borderColor: color }]
+              : styles.dateBase
           }
           onPress={() => goSelectDay(day)}
         >
@@ -218,7 +223,7 @@ const Calendar = (props: CalendarProps) => {
   return (
     <View style={{ flex: 1, position: 'relative' }}>
       <View style={{ flex: 1, backgroundColor: '#fff' }}>
-        {renderBar}
+        {showBar && renderBar}
         <View style={styles.calendarHeader}>
           <View style={styles.calendarHeaderItem}>
             <TouchableOpacity onPress={() => getCurrentYear('last')}>