feat(Calendar): add horizontal feature (#592)

* feat(Calendar): add `horizontal` feature

* feat: Fix Calendar/horizontal based on #592 (#612)

* feat: `Stepper` 支持 ref 调用 `focus` `blur`方法 (#590)

* chore: stepper types correct

* Feat icons build (#593)

* fix(Icon): target=es5 for icons build

* chore: release icon dev

* chore(icons): release 0.0.8

* chore: precommit lint

* chore: release 3.0.3

* chore: release v3.0.4

* docs: optimization example (#596)

* fix: add button type & optimize condition (#597)

* chore: release icons

* fix: issues/599 (#600)

Co-authored-by: jeff.xie <jeff.xie@usmarthk.com>

* chore: relase 3.0.5 ver

* feat: dropdownMenu自定义选项的选中态勾选icon (#601)

* fix: issues/599

* feat: dropdownMenu自定义选项的选中态勾选icon

Co-authored-by: jeff.xie <jeff.xie@usmarthk.com>

* chore: release 3.1.0

* fix: dropdownMenu自定义选项的选中态勾选icon非必填选项 (#602)

Co-authored-by: jeff.xie <jeff.xie@usmarthk.com>

* fix: tabs传入style(#595) (#603)

* chore: release 3.1.1

* fix(collapse): fix bug in strict mode(#605) (#606)

* fix: close #604 (#610)

* fix: close #608 (#609)

* chore: release 3.1.2

* fix(Calendar): prevent scroll update in horizontal

Co-authored-by: 3lang <675483520@qq.com>
Co-authored-by: thinkasany <117748716+thinkasany@users.noreply.github.com>
Co-authored-by: 谢俊 <xiejun_ncu@qq.com>
Co-authored-by: jeff.xie <jeff.xie@usmarthk.com>
Co-authored-by: xiaogonggong-w <79799040+xiaogonggong-w@users.noreply.github.com>
Co-authored-by: LZHD <brucefxq@gmail.com>

Co-authored-by: TinsFox <fox@tinsfox.com>
Co-authored-by: luo3house <96865086+luo3house@users.noreply.github.com>
Co-authored-by: 3lang <675483520@qq.com>
Co-authored-by: thinkasany <117748716+thinkasany@users.noreply.github.com>
Co-authored-by: 谢俊 <xiejun_ncu@qq.com>
Co-authored-by: jeff.xie <jeff.xie@usmarthk.com>
Co-authored-by: xiaogonggong-w <79799040+xiaogonggong-w@users.noreply.github.com>
Co-authored-by: LZHD <brucefxq@gmail.com>

Author: 8 people

packages/react-vant/src/components/calendar/Calendar.tsx

@@ -33,6 +33,7 @@ import useUpdateEffect from '../hooks/use-update-effect'
 import ConfigProviderContext from '../config-provider/ConfigProviderContext'
 import { usePropsValue } from '../hooks'
 import { PickerPopupActions } from '../picker/PropsType'
+import Swiper from '../swiper'
 
 const [bem] = createNamespace('calendar')
 
@@ -128,7 +129,6 @@ const Calendar = forwardRef<CalendarInstance, CalendarProps>(
     }, [value])
 
     const [monthRefs, setMonthRefs] = useRefs()
-
     const dayOffset = useMemo(
       () => (props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0),
       [props.firstDayOfWeek, props.firstDayOfWeek]
@@ -213,7 +213,11 @@ const Calendar = forwardRef<CalendarInstance, CalendarProps>(
       })
 
       /* istanbul ignore else */
-      if (currentMonth && currentMonth.getTitle() !== state.subtitle) {
+      if (
+        currentMonth &&
+        currentMonth.getTitle() !== state.subtitle &&
+        !props.horizontal
+      ) {
         updateState({ subtitle: currentMonth.getTitle() })
       }
     }
@@ -381,7 +385,8 @@ const Calendar = forwardRef<CalendarInstance, CalendarProps>(
     }
 
     const renderMonth = (date: Date, index: number) => {
-      const showMonthTitle = index !== 0 || !props.showSubtitle
+      const showMonthTitle =
+        !props.horizontal && (index !== 0 || !props.showSubtitle)
       return (
         <CalendarMonth
           key={index}
@@ -461,9 +466,27 @@ const Calendar = forwardRef<CalendarInstance, CalendarProps>(
             props.onClickSubtitle?.(event)
           }}
         />
-        <div ref={bodyRef} className={cls(bem('body'))} onScroll={onScroll}>
-          {months.map(renderMonth)}
-        </div>
+        {props.horizontal ? (
+          <div ref={bodyRef} className={cls(bem('horizontal-body'))}>
+            <Swiper
+              indicator={() => null}
+              onChange={index => {
+                updateState({ subtitle: monthRefs[index].getTitle() })
+              }}
+            >
+              {months.map((month, index) => (
+                <Swiper.Item key={month}>
+                  {renderMonth(month, index)}
+                </Swiper.Item>
+              ))}
+            </Swiper>
+          </div>
+        ) : (
+          <div ref={bodyRef} className={cls(bem('body'))} onScroll={onScroll}>
+            {months.map(renderMonth)}
+          </div>
+        )}
+
         {renderFooter()}
       </div>
     )

packages/react-vant/src/components/calendar/PropsType.ts

@@ -121,6 +121,7 @@ export interface CalendarProps extends Omit<BaseTypeProps, 'children'> {
   firstDayOfWeek?: number | string
   showRangePrompt?: boolean
   footer?: React.ReactNode
+  horizontal?: boolean
   topInfoRender?: (day: CalendarDayItem) => React.ReactNode
   bottomInfoRender?: (day: CalendarDayItem) => React.ReactNode
   onSelect?: (value: CalendarValue) => void

packages/react-vant/src/components/calendar/demo/custom.tsx

@@ -116,6 +116,16 @@ export default () => {
           />
         )}
       </Calendar>
+      <Calendar horizontal>
+        {(val: Date, actions) => (
+          <Cell
+            isLink
+            title='水平滑动'
+            value={val ? val.toLocaleDateString() : '请选择日期'}
+            onClick={() => actions.open()}
+          />
+        )}
+      </Calendar>
     </>
   )
 }

packages/react-vant/src/components/calendar/style/index.less

@@ -93,6 +93,12 @@
     -webkit-overflow-scrolling: touch;
   }
 
+  &__horizontal-body {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+
   &__days {
     position: relative;
     display: flex;