feat(Calendar):增加农历详情展示 & 文档更新 (#340)

Amber-Nan · 杨楠 · web-flow · commit be477729c8fd · 2021-11-24T09:39:59.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):优化安卓文字排版

* feat(Calendar):增加农历详情展示 &amp; 文档更新

* feat(DragDrawer):新增DragDrawer 拖曳抽屉 &amp; 文档更新

Co-authored-by: 杨楠 &lt;yangnan@nihaosi.com&gt;
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -466,4 +466,12 @@ export const stackPageData: Routes[] = [
       description: '展示日历',
     },
   },
+  {
+    name: 'DragDrawer',
+    component: require('./routes/DragDrawer').default,
+    params: {
+      title: 'DragDrawer 拖曳抽屉',
+      description: '可自定义拖曳抽屉高度',
+    },
+  },
 ];
diff --git a/example/examples/src/routes/Calendar/index.tsx b/example/examples/src/routes/Calendar/index.tsx
@@ -27,7 +27,8 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
             <Calendar />
             <Spacing size={'large'} />
             <Calendar color="red" lunarHoliday={true} />
-            <Calendar bar={barProps} />
+            <Spacing size={'large'} />
+            <Calendar bar={barProps} showLunar={true} />
           </Body>
           <Footer />
         </Layout>
diff --git a/example/examples/src/routes/DragDrawer/index.tsx b/example/examples/src/routes/DragDrawer/index.tsx
@@ -0,0 +1,32 @@
+import React, {useState, Fragment} from 'react';
+import {View, Text, Dimensions} from 'react-native';
+import {DragDrawer, Card, Button} from '@uiw/react-native';
+import Layout, {Container} from '../../Layout';
+import {ComProps} from '../../routes';
+const {Header, Body, Footer} = Layout;
+
+export interface DragDrawerViewProps extends ComProps {}
+export default function DragDrawerView({route}: DragDrawerViewProps) {
+  const description = route.params.description;
+  const title = route.params.title;
+  return (
+    <Fragment>
+      <DragDrawer>
+        <View>
+          <Text>按住图标可上下拖曳抽屉</Text>
+        </View>
+      </DragDrawer>
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body>
+            <Card title="下边抽屉可上下拖曳">
+              <Text>下边抽屉可上下拖曳</Text>
+            </Card>
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    </Fragment>
+  );
+}
diff --git a/packages/core/src/Calendar/README.md b/packages/core/src/Calendar/README.md
@@ -71,7 +71,7 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
 }
 ```
 
-### 自定义日历头部
+### 自定义日历头部及农历详情展示
 
 ```jsx
 import React from 'react';
@@ -100,7 +100,7 @@ export default class CalendarView extends React.Component<CalendarViewProps> {
         <Layout>
           <Header title={title} description={description} />
           <Body>
-           <Calendar color="red" bar={barProps} lunarHoliday={true}/>
+           <Calendar color="red" bar={barProps} lunarHoliday={true} showLunar={true}/>
           </Body>
           <Footer />
         </Layout>
@@ -134,5 +134,7 @@ export interface CalendarProps extends ViewProps {
    //是否显示农历及假日
   lunarHoliday: boolean;
   bar: barState ;
+    //农历详情
+  showLunar: boolean;
 }
 ```
diff --git a/packages/core/src/Calendar/index.tsx b/packages/core/src/Calendar/index.tsx
@@ -1,30 +1,34 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, ViewProps, TextProps, StyleSheet, TouchableOpacity, Dimensions, Platform } from 'react-native';
-import { color } from 'src/utils';
 import Icon from '../Icon';
 import Ellipsis from '../Ellipsis';
 import { getMonths, getWeeksArray, daysArrProps, getType, getNameLen } from './utils';
+import ShowDate from './show';
 
 export let MainWidth = Dimensions.get('window').width;
+export let MainHeight = Dimensions.get('window').height;
 export let newDates = new Date();
 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;
   //是否显示农历及假日
   lunarHoliday: boolean;
   bar?: barState;
+  //农历详情
+  showLunar: boolean;
 }
+
 const Calendar = (props: CalendarProps) => {
   const bars = {
     barRightText: 'Menu',
@@ -33,15 +37,15 @@ const Calendar = (props: CalendarProps) => {
     onPressBarLeft: undefined,
     render: undefined,
   };
-  const { color = '#329BCB', lunarHoliday = false, bar = bars } = props;
+  const { color = '#329BCB', lunarHoliday = false, bar = bars, showLunar = false } = props;
   const { barRightText, title, barLeftText, onPressBarLeft, render } = bar;
-
   const [currentYear, setCurrentYear] = useState<number>(toYear);
   const [currentMonth, setCurrentMonth] = useState<number>(toMonth);
   const [currentDays, setCurrentDays] = useState<number>(toDays);
   const [dayData, setDayData] = useState<number[]>([]);
   const [lastData, setLastData] = useState<number[]>([]);
   const [nextData, setNextData] = useState<number[]>([]);
+  const [lunarName, setLunarName] = useState('');
 
   useEffect(() => {
     let toMonths = getMonths(currentYear, currentMonth, currentDays);
@@ -98,9 +102,14 @@ const Calendar = (props: CalendarProps) => {
       );
     });
   };
+
   const renderDays = (weekDays: daysArrProps[]) => {
     return weekDays.map((day, index) => {
-      let type = getType(day, currentYear, currentMonth, currentDays, toYear, toMonth, toDays);
+      let lunarAll = getType(day, currentYear, currentMonth, currentDays, toYear, toMonth, toDays);
+      if (lunarAll.lunarShow !== '' && lunarName === '') {
+        setLunarName(lunarAll.lunarShow);
+      }
+
       let nameLen = getNameLen(day.lunarHolidays);
       let lineHeight =
         lunarHoliday === true && Platform.OS === 'ios' ? 0 : lunarHoliday === true ? 18 : MainWidth / 7 - 4.5;
@@ -115,11 +124,11 @@ const Calendar = (props: CalendarProps) => {
         <TouchableOpacity
           key={index}
           style={
-            type === 1
+            lunarAll.type === 1
               ? styles.otherMonth
-              : type === 2
+              : lunarAll.type === 2
               ? [styles.currentMonth, { backgroundColor: color }]
-              : type === 3
+              : lunarAll.type === 3
               ? [styles.selectMonth, { borderColor: color }]
               : styles.day
           }
@@ -129,7 +138,7 @@ const Calendar = (props: CalendarProps) => {
             style={[
               styles.dayText,
               {
-                color: type === 1 ? '#B5B5B5' : type === 2 ? '#fff' : '#000',
+                color: lunarAll.type === 1 ? '#B5B5B5' : lunarAll.type === 2 ? '#fff' : '#000',
                 lineHeight: lineHeight,
                 paddingTop: paddingTop,
               },
@@ -142,20 +151,22 @@ const Calendar = (props: CalendarProps) => {
               style={[
                 styles.dayText,
                 {
-                  color: type === 1 ? '#B5B5B5' : type === 2 ? '#fff' : colorType,
+                  color: lunarAll.type === 1 ? '#B5B5B5' : lunarAll.type === 2 ? '#fff' : colorType,
                   fontSize: 13,
                 },
               ]}
             >
-              {nameLen > 3 ? <Ellipsis maxLen={2}>{day.lunarHolidays}</Ellipsis> : day.lunarHolidays}
+              {nameLen > 3 ? <Ellipsis maxLen={2}>{day.lunarHolidays}</Ellipsis> : day.lunarHolidays || day.lunar}
             </Text>
           )}
         </TouchableOpacity>
       );
     });
   };
   const goSelectDay = (day: daysArrProps) => {
+    let lunarName = `农历${day.lunarMonth}${day.lunar}`;
     if (day.type === 'current') {
+      setLunarName(lunarName);
       setCurrentDays(day.monthDays);
     } else if (day.type === 'last') {
       setCurrentDays(day.monthDays);
@@ -203,32 +214,35 @@ const Calendar = (props: CalendarProps) => {
   };
 
   return (
-    <View style={{ flex: 1, backgroundColor: '#fff' }}>
-      {renderBar}
-      <View style={styles.calendarHeader}>
-        <View style={styles.calendarHeaderItem}>
-          <TouchableOpacity onPress={() => getCurrentYear('last')}>
-            <Icon name="left" size={20} color={'#333'} />
-          </TouchableOpacity>
-          <Text style={styles.calendarHeaderText}>{currentYear}年</Text>
-          <TouchableOpacity onPress={() => getCurrentYear('next')}>
-            <Icon name="right" size={20} color={'#333'} />
-          </TouchableOpacity>
-        </View>
+    <View style={{ flex: 1, position: 'relative' }}>
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        {renderBar}
+        <View style={styles.calendarHeader}>
+          <View style={styles.calendarHeaderItem}>
+            <TouchableOpacity onPress={() => getCurrentYear('last')}>
+              <Icon name="left" size={20} color={'#333'} />
+            </TouchableOpacity>
+            <Text style={styles.calendarHeaderText}>{currentYear}年</Text>
+            <TouchableOpacity onPress={() => getCurrentYear('next')}>
+              <Icon name="right" size={20} color={'#333'} />
+            </TouchableOpacity>
+          </View>
 
-        <View style={styles.calendarHeaderItem}>
-          <TouchableOpacity onPress={() => getCurrentMonth('last')}>
-            <Icon name="left" size={20} color={'#333'} />
-          </TouchableOpacity>
-          <Text style={styles.calendarHeaderText}>{currentMonth + 1}月</Text>
-          <TouchableOpacity onPress={() => getCurrentMonth('next')}>
-            <Icon name="right" size={20} color={'#333'} />
-          </TouchableOpacity>
+          <View style={styles.calendarHeaderItem}>
+            <TouchableOpacity onPress={() => getCurrentMonth('last')}>
+              <Icon name="left" size={20} color={'#333'} />
+            </TouchableOpacity>
+            <Text style={styles.calendarHeaderText}>{currentMonth + 1}月</Text>
+            <TouchableOpacity onPress={() => getCurrentMonth('next')}>
+              <Icon name="right" size={20} color={'#333'} />
+            </TouchableOpacity>
+          </View>
         </View>
-      </View>
 
-      <View style={styles.calendarWeekdays}>{renderWeekDays()}</View>
-      <View style={styles.calendarDays}>{renderWeeks()}</View>
+        <View style={styles.calendarWeekdays}>{renderWeekDays()}</View>
+        <View style={styles.calendarDays}>{renderWeeks()}</View>
+      </View>
+      {showLunar === true && <ShowDate iconColor={color} lunar={lunarName} />}
     </View>
   );
 };
diff --git a/packages/core/src/Calendar/lunarDatas.ts b/packages/core/src/Calendar/lunarDatas.ts
@@ -16,10 +16,12 @@ export let lunarInfo = [
   0xa9d4, 0xa4d0, 0xd150, 0xf252, 0xd520,
 ];
 
-export let nStr1 = ['日', '正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
+export let nStr1 = ['日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
 
 export let nStr2 = ['初', '十', '廿', '三十'];
 
+export let nStr3 = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
+
 /**
  * 公历节日
  */
diff --git a/packages/core/src/Calendar/lunarHolidays.ts b/packages/core/src/Calendar/lunarHolidays.ts
@@ -1,53 +1,89 @@
 import { Dimensions, Text } from 'react-native';
-import { lunarInfo, nStr1, nStr2, lunarHoliday, solarTerm, sTermInfo, basejieri } from './lunarDatas';
+import { lunarInfo, nStr1, nStr2, nStr3, lunarHoliday, solarTerm, sTermInfo, basejieri } from './lunarDatas';
 export interface CalendarProps {
   lunarHolidays: string;
   colorType: string;
+  lunarMonth: string;
+  lunar: string;
 }
 /**
  * 获取农历
  * @returns CalendarProps
  */
-export function getLunarCalendar(year: number, month: number, day: number) {
+export function getLunarCalendar(year: number, month: number, day: number, type?: string) {
   let lDate = Lunar(year, month, day);
   let y = lDate.years;
   let m = lDate.months;
   let d = lDate.days;
   let lunar = '';
   let paraHoliday = (m > 9 ? m : '0' + m) + '' + (d > 9 ? d : '0' + d);
+
+  let lunarMonth = '';
+  if (type === 'currentMonth') {
+    lunarMonth = nStr3[m] + '月';
+  }
+
   //农历节日
   if (lunarHoliday.hasOwnProperty(paraHoliday)) {
     let paraData = lunarHoliday[paraHoliday as keyof typeof lunarHoliday];
-    let getHoliday: CalendarProps = { lunarHolidays: paraData, colorType: 'type' };
+    lunar = cDay(d);
+    let getHoliday: CalendarProps = {
+      lunarHolidays: paraData,
+      colorType: 'type',
+      lunarMonth: lunarMonth,
+      lunar: lunar,
+    };
     return getHoliday;
   }
   if (m === 12) {
     let theLastDay = lDate.isLeap ? leapDays(y) : monthDays(y, m); //农历当月最後一天
+    lunar = cDay(d);
     if (theLastDay === d) {
-      let getHoliday: CalendarProps = { lunarHolidays: '除夕', colorType: 'type' };
+      let getHoliday: CalendarProps = {
+        lunarHolidays: '除夕',
+        colorType: 'type',
+        lunarMonth: lunarMonth,
+        lunar: lunar,
+      };
       return getHoliday;
     }
   }
   // 节气
   let solarTermDay = (month + 1 > 9 ? month + 1 : '0' + (month + 1)) + '' + (day > 9 ? day : '0' + day);
+  lunar = cDay(d);
   let sTermDateArr = sTermDate(year);
   for (var i = 0; i < sTermDateArr.length; i++) {
     if (solarTermDay === sTermDateArr[i]) {
       let paraData = solarTerm[i];
-      let getHoliday: CalendarProps = { lunarHolidays: paraData, colorType: 'type' };
+      let getHoliday: CalendarProps = {
+        lunarHolidays: paraData,
+        colorType: 'type',
+        lunarMonth: lunarMonth,
+        lunar: lunar,
+      };
       return getHoliday;
     }
   }
   //法定节日
   if (basejieri.hasOwnProperty(solarTermDay)) {
     let paraData = basejieri[solarTermDay as keyof typeof basejieri];
-    let getHoliday: CalendarProps = { lunarHolidays: paraData, colorType: 'type' };
+    let getHoliday: CalendarProps = {
+      lunarHolidays: paraData,
+      colorType: 'type',
+      lunarMonth: lunarMonth,
+      lunar: lunar,
+    };
     return getHoliday;
   }
   if (d === 1) {
     lunar = nStr1[m] + '月';
+    let lunar1 = cDay(d);
+    let getHoliday: CalendarProps = { lunarHolidays: lunar, colorType: '', lunarMonth: lunarMonth, lunar: lunar1 };
+    return getHoliday;
   } else {
     lunar = cDay(d);
+    let getHoliday: CalendarProps = { lunarHolidays: '', colorType: '', lunarMonth: lunarMonth, lunar: lunar };
+    return getHoliday;
   }
   return lunar;
 }
diff --git a/packages/core/src/Calendar/show.tsx b/packages/core/src/Calendar/show.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, ViewProps, TextProps, StyleSheet, TouchableOpacity } from 'react-native';
+import Icon from '../Icon';
+
+export interface ShowProps extends ViewProps {
+  iconColor?: string;
+  lunar?: string;
+}
+const Show = (props: ShowProps) => {
+  const { iconColor = '#329BCB', lunar = '' } = props;
+  return (
+    <View style={styles.show}>
+      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{lunar}</Text>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  show: {
+    borderRadius: 5,
+    backgroundColor: '#fff',
+    marginHorizontal: 5,
+    marginVertical: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 15,
+  },
+});
+
+export default Show;
diff --git a/packages/core/src/Calendar/utils.ts b/packages/core/src/Calendar/utils.ts
diff --git a/packages/core/src/DragDrawer/README.md b/packages/core/src/DragDrawer/README.md
diff --git a/packages/core/src/DragDrawer/index.tsx b/packages/core/src/DragDrawer/index.tsx
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
