feat: calendar年月快速切换、部分组件主题色统一

packages/vantui-doc/src/calendar/README.md

@@ -38,6 +38,7 @@ function Demo() {
         onClick={() => setShow(true)}
       />
       <Calendar
+        longspan
         show={show}
         onClose={() => setShow(false)}
         onConfirm={(e) => {

packages/vantui/src/calendar/components/header/index.tsx

@@ -9,6 +9,7 @@ type ICalenarHeaderProps = {
   firstDayOfWeek?: number
   renderTitle?: React.ReactNode
   onClickSubtitle?: (a: any) => void
+  subtitleStyle?: React.CSSProperties
 }
 
 export default function Index(props: ICalenarHeaderProps) {
@@ -20,6 +21,7 @@ export default function Index(props: ICalenarHeaderProps) {
     firstDayOfWeek,
     renderTitle,
     onClickSubtitle,
+    subtitleStyle,
   } = props
 
   const [weekdays, setWeekDays] = useState<Array<any>>([])
@@ -57,6 +59,7 @@ export default function Index(props: ICalenarHeaderProps) {
         <View
           className="van-calendar__header-subtitle"
           onClick={onClickSubtitle}
+          style={subtitleStyle}
         >
           {subtitle}
         </View>

packages/vantui/src/calendar/components/longSpan/index.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect, useMemo } from 'react'
+import { View } from '@tarojs/components'
+import { Button } from '../../../button'
+
+type IProps = {
+  data: number[]
+  current: number
+  setScrollIntoView: (monthId: string) => void
+}
+
+export function LongSpan(props: IProps) {
+  const { current, setScrollIntoView } = props
+  const [monthData, setMonthData] = useState<{ index: number; name: number }[]>(
+    [],
+  )
+  const [currentIndex, setCurrentIndex] = useState<number>()
+  const [currentYear, setCurrentYear] = useState<number>()
+
+  const data = useMemo(() => {
+    const res: any = []
+    const yearMap = {}
+    for (let i = 0; i < props.data.length; i++) {
+      // @ts-ignore
+      const dd = new Date(props.data[i])
+      const year = dd.getFullYear()
+      const month = dd.getMonth() + 1
+      if (yearMap[year] === undefined) {
+        yearMap[year] = res.length
+        res.push({
+          year: year,
+          month: [
+            {
+              name: month,
+              index: i,
+            },
+          ],
+        })
+      } else {
+        const yearIndex = yearMap[year]
+        res[yearIndex].month.push({
+          name: month,
+          index: i,
+        })
+      }
+    }
+
+    return res
+  }, [props.data])
+
+  useEffect(() => {
+    if (current) {
+      const dd = new Date(current)
+      const year = dd.getFullYear()
+      const month = dd.getMonth() + 1
+      const ms = data.filter((item) => item.year === year)[0].month
+      setMonthData(ms)
+      setCurrentYear(year)
+      const tIndex = ms.filter((item) => item.name === month)[0].index
+      setCurrentIndex(tIndex)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data])
+
+  const switchAction_ = () => {
+    if (currentIndex !== undefined) {
+      setScrollIntoView(`month_${props.data[currentIndex]}`)
+    }
+  }
+
+  return (
+    <View className="van-calendar-longspan">
+      <View className="van-calendar__header-title">切换年月</View>
+
+      <View className="van-calendar-longspan-title">年份选择</View>
+      <View className="van-calendar-longspan-box">
+        {data.map((item, index) => (
+          <Button
+            plain={item.year === currentYear ? false : true}
+            hairline={item.year === currentYear ? false : true}
+            type="primary"
+            key={`longspan-year-item${index}`}
+            className="van-calendar-longspan-item"
+            onClick={() => {
+              if (currentYear !== item.year) {
+                setCurrentYear(item.year)
+                setMonthData(item.month)
+                setCurrentIndex(item.month[0]?.index)
+              }
+            }}
+          >
+            {item.year}年
+          </Button>
+        ))}
+      </View>
+      <View className="van-calendar-longspan-title">月选择</View>
+      <View className="van-calendar-longspan-box">
+        {monthData.map((item) => (
+          <Button
+            plain={item.index === currentIndex ? false : true}
+            hairline={item.index === currentIndex ? false : true}
+            type="primary"
+            key={`longspan-year-item-m${item.index}`}
+            className="van-calendar-longspan-item"
+            onClick={() => {
+              setCurrentIndex(item.index)
+            }}
+          >
+            {item.name}月
+          </Button>
+        ))}
+      </View>
+      <Button
+        block
+        type="primary"
+        className="van-calendar__switch"
+        onClick={switchAction_}
+      >
+        切换
+      </Button>
+    </View>
+  )
+}

packages/vantui/src/calendar/index.less

@@ -1,8 +1,11 @@
+/* stylelint-disable color-hex-length */
 @import '../style/var.less';
 
 .van-calendar {
   display: flex;
   flex-direction: column;
+  position: relative;
+  width: 100%;
   .theme(height, '@calendar-height');
   .theme(background-color, '@calendar-background-color');
 
@@ -208,3 +211,40 @@
     .theme(border-radius, '@border-radius-md');
   }
 }
+
+.van-calendar-longspan {
+  padding: 30px;
+  background: #fff;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+  box-sizing: border-box;
+  width: 100%;
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .van-calendar-longspan-title {
+    margin-bottom: 30px;
+    font-weight: bold;
+  }
+
+  .van-calendar-longspan-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+    flex-wrap: wrap;
+  }
+
+  .van-calendar-longspan-item {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    margin: 0px 20px 20px 0px;
+  }
+
+  .van-calendar__switch {
+    position: absolute;
+    z-index: 999;
+    bottom: 30px;
+    left: 30px;
+    width: calc(100% - 60px);
+  }
+}