feat(Calendar):增加农历假期展示 & 文档更新 & 解决冲突 (#338)

Amber-Nan · 杨楠 · web-flow · commit fa671eb0b19c · 2021-11-19T13:37:54.000+08:00
* fix(Divider):优化 gutter属性不生效问题

* feat(Divider): 增加分割线标题的位置调整功能 &amp; 更新文档

* feat(Rating):增加自定义每项的提示信息 &amp; 更新文档

* feat(Rating):增加只读功能 &amp; 文档更新

* feat(Timeline): 增加改变时间轴内容相对位置功能 &amp; 文档更新

* style(Timeline):Update Readme.md img

* feat(Timeline):增加自定义图标 &amp; 文档更新

* feat(Timeline):优化自定义图标 &amp; 文档更新

* feat:新增Calendar 日历组件

* doc(website): Update Calendar  Readme.md

* feat(Calendar):增加农历及假期展示 &amp;&amp; 文档更新

* feat(Calendar):增加假日文字颜色

* feat(Calendar):左上角按钮增加自定义跳转功能&amp;文档更新

* feat(Calendar):优化农历假日及文字排版

* feat(Calendar):处理文字长度

* fix(Calendar):优化安卓文字排版

Co-authored-by: 杨楠 &lt;yangnan@nihaosi.com&gt;
diff --git a/example/examples/src/routes/Calendar/index.tsx b/example/examples/src/routes/Calendar/index.tsx
@@ -10,23 +10,24 @@ export interface CalendarViewProps extends ComProps {}
 
 export default class CalendarView extends React.Component<CalendarViewProps> {
   render() {
-    const {route} = this.props;
+    const {route, navigation} = this.props;
     const description = route.params.description;
     const title = route.params.title;
     const barProps = {
-      barRightText: '返回啦',
-      title: '日历啦',
-      onPressBarLeft: () => {},
-      barLeftText: '今天啦',
+      barRightText: '返回',
+      title: '日历',
+      onPressBarLeft: () => navigation.goBack(),
+      barLeftText: '今天',
     };
     return (
       <Container>
         <Layout>
           <Header title={title} description={description} />
           <Body>
-            <Calendar bar={barProps} />
+            <Calendar />
             <Spacing size={'large'} />
-            <Calendar color="red" bar={{}} />
+            <Calendar color="red" lunarHoliday={true} />
+            <Calendar bar={barProps} />
           </Body>
           <Footer />
         </Layout>
diff --git a/packages/core/src/Calendar/README.md b/packages/core/src/Calendar/README.md
@@ -3,7 +3,7 @@ Calendar 日历
 
 展示日历
 
-![](https://user-images.githubusercontent.com/66067296/141421928-d46ffd84-2349-49ac-8b6f-4e8455a017eb.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
+![](https://user-images.githubusercontent.com/66067296/141939109-5fbd8b77-82fa-4eb4-bd6d-6670fd577878.gif)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
 ### 基础示例
 
@@ -38,7 +38,40 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
 }
 ```
 
-### 自定义日历颜色
+### 自定义日历颜色、农历及假日展示
+
+```jsx
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Calendar } from '@uiw/react-native';
+import { ComProps } from '../../routes';
+import Layout, { Container } from '../../Layout';
+
+const { Header, Body, Card, Footer } = Layout;
+
+export interface CalendarViewProps extends ComProps { }
+
+export default class CalendarView extends React.Component<CalendarViewProps> {
+  render() {
+    const { route } = this.props;
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body>
+           <Calendar color="red" lunarHoliday={true}/>
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    );
+  }
+}
+```
+
+### 自定义日历头部
 
 ```jsx
 import React from 'react';
@@ -57,17 +90,17 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
     const description = route.params.description;
     const title = route.params.title;
      const barProps = {
-      barRightText: "返回啦",
-      title : "日历啦",
-      onPressBarLeft: () => { }, 
-      barLeftText: "今天啦" 
+      barRightText: "返回",
+      title : "日历",
+      onPressBarLeft: () => navigation.goBack(), 
+      barLeftText: "今天" 
     }
     return (
       <Container>
         <Layout>
           <Header title={title} description={description} />
           <Body>
-           <Calendar color="red" bar={barProps} />
+           <Calendar color="red" bar={barProps} lunarHoliday={true}/>
           </Body>
           <Footer />
         </Layout>
@@ -84,6 +117,8 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
 interface barState {
   // 导航栏标题
   title?: string
+  //是否显示农历及假日
+  lunarHoliday:Boolean
   // 导航左侧文本
   barRightText?: string;
   // 导航右侧文本
@@ -96,6 +131,8 @@ interface barState {
 export interface CalendarProps extends ViewProps {
   // 日历颜色
   color?: string;
+   //是否显示农历及假日
+  lunarHoliday: boolean;
   bar: barState ;
 }
-```
+```
diff --git a/packages/core/src/Calendar/index.tsx b/packages/core/src/Calendar/index.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, ViewProps, TextProps, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
+import { View, Text, ViewProps, TextProps, StyleSheet, TouchableOpacity, Dimensions, Platform } from 'react-native';
 import { color } from 'src/utils';
 import Icon from '../Icon';
-import { getMonths, getWeeksArray, daysArrProps } from './utils';
+import Ellipsis from '../Ellipsis';
+import { getMonths, getWeeksArray, daysArrProps, getType, getNameLen } from './utils';
 
 export let MainWidth = Dimensions.get('window').width;
 export let newDates = new Date();
@@ -19,14 +20,21 @@ interface barState {
 }
 export interface CalendarProps extends ViewProps {
   // 日历颜色
-  color?: string;
-  bar: barState;
+  color: string;
+  //是否显示农历及假日
+  lunarHoliday: boolean;
+  bar?: barState;
 }
 const Calendar = (props: CalendarProps) => {
-  const {
-    color = '#329BCB',
-    bar: { render = null, barRightText = '返回', title = '日历', barLeftText = '今天', onPressBarLeft = null },
-  } = props;
+  const bars = {
+    barRightText: 'Menu',
+    title: 'Calendar',
+    barLeftText: 'Today',
+    onPressBarLeft: undefined,
+    render: undefined,
+  };
+  const { color = '#329BCB', lunarHoliday = false, bar = bars } = props;
+  const { barRightText, title, barLeftText, onPressBarLeft, render } = bar;
 
   const [currentYear, setCurrentYear] = useState<number>(toYear);
   const [currentMonth, setCurrentMonth] = useState<number>(toMonth);
@@ -36,7 +44,7 @@ const Calendar = (props: CalendarProps) => {
   const [nextData, setNextData] = useState<number[]>([]);
 
   useEffect(() => {
-    let toMonths = getMonths(currentYear, currentMonth);
+    let toMonths = getMonths(currentYear, currentMonth, currentDays);
     setLastData(toMonths[0]);
     setDayData(toMonths[1]);
     setNextData(toMonths[2]);
@@ -81,31 +89,27 @@ const Calendar = (props: CalendarProps) => {
   };
 
   const renderWeeks = () => {
-    let groupedDays = getWeeksArray(lastData, dayData, nextData);
+    let groupedDays = getWeeksArray(lastData, dayData, nextData, currentYear, currentMonth);
     return groupedDays.map((weekDays, index) => {
       return (
-        <View key={index} style={styles.weekDays}>
+        <View key={index} style={styles.weekDay}>
           {renderDays(weekDays)}
         </View>
       );
     });
   };
   const renderDays = (weekDays: daysArrProps[]) => {
     return weekDays.map((day, index) => {
-      let type = 0;
-      if (day.type === 'last' || day.type === 'next') {
-        type = 1;
-      } else if (
-        currentYear === toYear &&
-        currentMonth === toMonth &&
-        day.monthDays === currentDays &&
-        currentDays === toDays
-      ) {
-        type = 2;
-      } else if (day.monthDays === currentDays) {
-        type = 3;
+      let type = getType(day, currentYear, currentMonth, currentDays, toYear, toMonth, toDays);
+      let nameLen = getNameLen(day.lunarHolidays);
+      let lineHeight =
+        lunarHoliday === true && Platform.OS === 'ios' ? 0 : lunarHoliday === true ? 18 : MainWidth / 7 - 4.5;
+      let paddingTop = lunarHoliday === true ? 4 : 0;
+      let colorType = '';
+      if (day.colorType === '') {
+        colorType = '#828282';
       } else {
-        type = 0;
+        colorType = color;
       }
       return (
         <TouchableOpacity
@@ -121,9 +125,31 @@ const Calendar = (props: CalendarProps) => {
           }
           onPress={() => goSelectDay(day)}
         >
-          <Text style={[styles.dayText, { color: type === 1 ? '#B5B5B5' : type === 2 ? '#fff' : '#000' }]}>
+          <Text
+            style={[
+              styles.dayText,
+              {
+                color: type === 1 ? '#B5B5B5' : type === 2 ? '#fff' : '#000',
+                lineHeight: lineHeight,
+                paddingTop: paddingTop,
+              },
+            ]}
+          >
             {day.monthDays}
           </Text>
+          {lunarHoliday === true && (
+            <Text
+              style={[
+                styles.dayText,
+                {
+                  color: type === 1 ? '#B5B5B5' : type === 2 ? '#fff' : colorType,
+                  fontSize: 13,
+                },
+              ]}
+            >
+              {nameLen > 3 ? <Ellipsis maxLen={2}>{day.lunarHolidays}</Ellipsis> : day.lunarHolidays}
+            </Text>
+          )}
         </TouchableOpacity>
       );
     });
@@ -208,14 +234,17 @@ const Calendar = (props: CalendarProps) => {
 };
 const styles = StyleSheet.create({
   header: {
+    flex: 1,
     backgroundColor: '#329BCB',
     flexDirection: 'row',
     padding: 10,
+    alignItems: 'center',
     justifyContent: 'space-between',
   },
   headerBtn: {
     flexDirection: 'row',
     alignItems: 'center',
+    width: 50,
   },
   headerText: {
     fontSize: 20,
@@ -249,11 +278,10 @@ const styles = StyleSheet.create({
     color: '#616161',
     textAlign: 'center',
   },
-
   calendarDays: {
     marginVertical: 10,
   },
-  weekDays: {
+  weekDay: {
     flexDirection: 'row',
     paddingHorizontal: 2,
   },
@@ -286,7 +314,6 @@ const styles = StyleSheet.create({
   dayText: {
     textAlign: 'center',
     fontSize: 17,
-    lineHeight: MainWidth / 7 - 4.5,
     fontWeight: '500',
   },
 });
diff --git a/packages/core/src/Calendar/lunarDatas.ts b/packages/core/src/Calendar/lunarDatas.ts
@@ -0,0 +1,94 @@
+export let lunarInfo = [
+  0x4bd8, 0x4ae0, 0xa570, 0x54d5, 0xd260, 0xd950, 0x5554, 0x56af, 0x9ad0, 0x55d2, 0x4ae0, 0xa5b6, 0xa4d0, 0xd250,
+  0xd255, 0xb54f, 0xd6a0, 0xada2, 0x95b0, 0x4977, 0x497f, 0xa4b0, 0xb4b5, 0x6a50, 0x6d40, 0xab54, 0x2b6f, 0x9570,
+  0x52f2, 0x4970, 0x6566, 0xd4a0, 0xea50, 0x6a95, 0x5adf, 0x2b60, 0x86e3, 0x92ef, 0xc8d7, 0xc95f, 0xd4a0, 0xd8a6,
+  0xb55f, 0x56a0, 0xa5b4, 0x25df, 0x92d0, 0xd2b2, 0xa950, 0xb557, 0x6ca0, 0xb550, 0x5355, 0x4daf, 0xa5b0, 0x4573,
+  0x52bf, 0xa9a8, 0xe950, 0x6aa0, 0xaea6, 0xab50, 0x4b60, 0xaae4, 0xa570, 0x5260, 0xf263, 0xd950, 0x5b57, 0x56a0,
+  0x96d0, 0x4dd5, 0x4ad0, 0xa4d0, 0xd4d4, 0xd250, 0xd558, 0xb540, 0xb6a0, 0x95a6, 0x95bf, 0x49b0, 0xa974, 0xa4b0,
+  0xb27a, 0x6a50, 0x6d40, 0xaf46, 0xab60, 0x9570, 0x4af5, 0x4970, 0x64b0, 0x74a3, 0xea50, 0x6b58, 0x5ac0, 0xab60,
+  0x96d5, 0x92e0, 0xc960, 0xd954, 0xd4a0, 0xda50, 0x7552, 0x56a0, 0xabb7, 0x25d0, 0x92d0, 0xcab5, 0xa950, 0xb4a0,
+  0xbaa4, 0xad50, 0x55d9, 0x4ba0, 0xa5b0, 0x5176, 0x52bf, 0xa930, 0x7954, 0x6aa0, 0xad50, 0x5b52, 0x4b60, 0xa6e6,
+  0xa4e0, 0xd260, 0xea65, 0xd530, 0x5aa0, 0x76a3, 0x96d0, 0x4afb, 0x4ad0, 0xa4d0, 0xd0b6, 0xd25f, 0xd520, 0xdd45,
+  0xb5a0, 0x56d0, 0x55b2, 0x49b0, 0xa577, 0xa4b0, 0xaa50, 0xb255, 0x6d2f, 0xada0, 0x4b63, 0x937f, 0x49f8, 0x4970,
+  0x64b0, 0x68a6, 0xea5f, 0x6b20, 0xa6c4, 0xaaef, 0x92e0, 0xd2e3, 0xc960, 0xd557, 0xd4a0, 0xda50, 0x5d55, 0x56a0,
+  0xa6d0, 0x55d4, 0x52d0, 0xa9b8, 0xa950, 0xb4a0, 0xb6a6, 0xad50, 0x55a0, 0xaba4, 0xa5b0, 0x52b0, 0xb273, 0x6930,
+  0x7337, 0x6aa0, 0xad50, 0x4b55, 0x4b6f, 0xa570, 0x54e4, 0xd260, 0xe968, 0xd520, 0xdaa0, 0x6aa6, 0x56df, 0x4ae0,
+  0xa9d4, 0xa4d0, 0xd150, 0xf252, 0xd520,
+];
+
+export let nStr1 = ['日', '正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
+
+export let nStr2 = ['初', '十', '廿', '三十'];
+
+/**
+ * 公历节日
+ */
+export let basejieri = {
+  '0101': '元旦',
+  '0214': '情人节',
+  '0308': '妇女节',
+  '0312': '植树节',
+  '0401': '愚人节',
+  '0501': '劳动节',
+  '0504': '青年节',
+  '0601': '儿童节',
+  '0701': '建党节',
+  '0801': '建军节',
+  '0910': '教师节',
+  '1001': '国庆节',
+  '1031': '万圣夜',
+  '1125': '感恩节',
+  '1224': '平安夜',
+  '1225': '圣诞节',
+};
+
+/**
+ * 农历节日
+ */
+export let lunarHoliday = {
+  '0101': '春节',
+  '0115': '元宵节',
+  '0505': '端午节',
+  '0707': '七夕节',
+  '0715': '中元节',
+  '0815': '中秋节',
+  '0909': '重阳节',
+  '1208': '腊八节',
+  '1223': '北方小年',
+  '1224': '南方小年',
+};
+
+/**
+ * 节气
+ */
+export let solarTerm = [
+  '小寒',
+  '大寒',
+  '立春',
+  '雨水',
+  '惊蛰',
+  '春分',
+  '清明',
+  '谷雨',
+  '立夏',
+  '小满',
+  '芒种',
+  '夏至',
+  '小暑',
+  '大暑',
+  '立秋',
+  '处暑',
+  '白露',
+  '秋分',
+  '寒露',
+  '霜降',
+  '立冬',
+  '小雪',
+  '大雪',
+  '冬至',
+];
+
+export let sTermInfo = [
+  0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033,
+  353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758,
+];
diff --git a/packages/core/src/Calendar/lunarHolidays.ts b/packages/core/src/Calendar/lunarHolidays.ts
diff --git a/packages/core/src/Calendar/utils.ts b/packages/core/src/Calendar/utils.ts
