feat():增加bar api

ChenlingasMx · ChenlingasMx · commit 06de641e5719 · 2021-11-18T22:21:23.000+08:00
diff --git a/example/examples/src/routes/Calendar/index.tsx b/example/examples/src/routes/Calendar/index.tsx
@@ -13,14 +13,20 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
     const {route} = this.props;
     const description = route.params.description;
     const title = route.params.title;
+    const barProps = {
+      barRightText: '返回啦',
+      title: '日历啦',
+      onPressBarLeft: () => {},
+      barLeftText: '今天啦',
+    };
     return (
       <Container>
         <Layout>
           <Header title={title} description={description} />
           <Body>
-            <Calendar />
+            <Calendar bar={barProps} />
             <Spacing size={'large'} />
-            <Calendar color="red" />
+            <Calendar color="red" bar={{}} />
           </Body>
           <Footer />
         </Layout>
diff --git a/packages/core/src/Calendar/README.md b/packages/core/src/Calendar/README.md
@@ -56,12 +56,18 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
     const { route } = this.props;
     const description = route.params.description;
     const title = route.params.title;
+     const barProps = {
+      barRightText: "返回啦",
+      title : "日历啦",
+      onPressBarLeft: () => { }, 
+      barLeftText: "今天啦" 
+    }
     return (
       <Container>
         <Layout>
           <Header title={title} description={description} />
           <Body>
-           <Calendar color="red" />
+           <Calendar color="red" bar={barProps} />
           </Body>
           <Footer />
         </Layout>
@@ -73,6 +79,23 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
 
 ### props
 
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|-----|------|
-| `color` | 设置日历颜色 | String | "#329BCB" |
+```ts
+
+interface barState {
+  // 导航栏标题
+  title?: string
+  // 导航左侧文本
+  barRightText?: string;
+  // 导航右侧文本
+  barLeftText?: string;
+  // 导航左侧点击事件
+  onPressBarLeft?: () => void;
+  // 自定义导航栏
+  render?: React.ReactNode
+}
+export interface CalendarProps extends ViewProps {
+  // 日历颜色
+  color?: string;
+  bar: barState ;
+}
+```
diff --git a/packages/core/src/Calendar/index.tsx b/packages/core/src/Calendar/index.tsx
@@ -10,12 +10,23 @@ export let toYear = newDates.getFullYear();
 export let toMonth = newDates.getMonth();
 export let toDays = newDates.getDate();
 
+interface barState {
+  title?: string;
+  barRightText?: string;
+  barLeftText?: string;
+  onPressBarLeft?: () => void;
+  render?: React.ReactNode;
+}
 export interface CalendarProps extends ViewProps {
   // 日历颜色
-  color: string;
+  color?: string;
+  bar: barState;
 }
 const Calendar = (props: CalendarProps) => {
-  const { color = '#329BCB' } = props;
+  const {
+    color = '#329BCB',
+    bar: { render = null, barRightText = '返回', title = '日历', barLeftText = '今天', onPressBarLeft = null },
+  } = props;
 
   const [currentYear, setCurrentYear] = useState<number>(toYear);
   const [currentMonth, setCurrentMonth] = useState<number>(toMonth);
@@ -31,6 +42,33 @@ const Calendar = (props: CalendarProps) => {
     setNextData(toMonths[2]);
   }, [currentYear, currentMonth]);
 
+  /**
+   * 头部导航栏
+   * barRightText 左侧文字
+   * title 标题
+   * barLeftText 右侧文字
+   * onPressBarLeft 左侧点击事件
+   * render 自定义导航栏
+   */
+  const renderBar = render ? (
+    render
+  ) : (
+    <View style={[styles.header, { backgroundColor: color }]}>
+      <TouchableOpacity onPress={() => onPressBarLeft && onPressBarLeft()}>
+        <View style={styles.headerBtn}>
+          <Icon name="left" size={20} color={'#fff'} />
+          <Text style={styles.headerText}>{barRightText}</Text>
+        </View>
+      </TouchableOpacity>
+      <View>
+        <Text style={styles.headerText}>{title}</Text>
+      </View>
+      <TouchableOpacity onPress={() => goToday()}>
+        <Text style={styles.headerText}>{barLeftText}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
   const renderWeekDays = () => {
     let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
     return weekdays.map((day) => {
@@ -140,21 +178,7 @@ const Calendar = (props: CalendarProps) => {
 
   return (
     <View style={{ flex: 1, backgroundColor: '#fff' }}>
-      <View style={[styles.header, { backgroundColor: color }]}>
-        <TouchableOpacity>
-          <View style={styles.headerBtn}>
-            <Icon name="left" size={20} color={'#fff'} />
-            <Text style={styles.headerText}>Menu</Text>
-          </View>
-        </TouchableOpacity>
-        <View>
-          <Text style={styles.headerText}>Calendar</Text>
-        </View>
-        <TouchableOpacity onPress={() => goToday()}>
-          <Text style={styles.headerText}>Today</Text>
-        </TouchableOpacity>
-      </View>
-
+      {renderBar}
       <View style={styles.calendarHeader}>
         <View style={styles.calendarHeaderItem}>
           <TouchableOpacity onPress={() => getCurrentYear('last')}>
