Feat/calendar 新增calendar组件

site/mobile/mobile.config.js

@@ -272,6 +272,11 @@ export default {
       name: 'empty',
       component: () => import('tdesign-mobile-react/empty/_example/index.tsx'),
     },
+    {
+      title: 'Calendar 日历',
+      name: 'calendar',
+      component: () => import('tdesign-mobile-react/calendar/_example/index.tsx'),
+    },
     {
       title: 'Guide 引导',
       name: 'guide',

site/web/site.config.js

@@ -226,6 +226,12 @@ export default {
           path: '/mobile-react/components/upload',
           component: () => import('tdesign-mobile-react/upload/upload.md'),
         },
+        {
+          title: 'Calendar 日历',
+          name: 'calendar',
+          path: '/mobile-react/components/calendar',
+          component: () => import('tdesign-mobile-react/calendar/calendar.md'),
+        },
       ],
     },
     {

src/calendar/Calendar.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, FC, useState } from 'react';
+import TPopup from '../popup';
+import CalendarTemplate from './CalendarTemplate';
+import { usePrefixClass } from '../hooks/useClass';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { calendarDefaultProps } from './defaultProps';
+import { TdCalendarProps } from './type';
+import { StyledProps } from '../common';
+
+export interface CalendarProps extends TdCalendarProps, StyledProps {}
+
+export interface CalendarContextValue {
+  inject: (props: CalendarProps) => CalendarProps;
+}
+
+export const CalendarContext = React.createContext<CalendarContextValue>(null);
+
+const Calendar: FC<CalendarProps> = (_props) => {
+  const calendarTemplateRef = useRef(null);
+  const calendarClass = usePrefixClass('calendar');
+
+  const props = useDefaultProps(_props, calendarDefaultProps);
+  const { title, type, onClose, confirmBtn, usePopup, visible, className, style } = props;
+
+  const [currentVisible, setCurrentVisible] = useState(visible);
+  const contextValue: CalendarContextValue = {
+    inject(calendarProps) {
+      if (calendarProps.type) {
+        return calendarProps;
+      }
+      return {
+        ...props,
+        onClose: (trigger) => {
+          props.onClose?.(trigger);
+          setCurrentVisible(false);
+        },
+      };
+    },
+  };
+
+  const selectedValueIntoView = () => {
+    const selectType = type === 'range' ? 'start' : 'selected';
+    const { templateRef } = calendarTemplateRef.current;
+    const scrollContainer = templateRef.querySelector(`.${calendarClass}__months`);
+    const selectedDate = templateRef.querySelector(`.${calendarClass}__dates-item--${selectType}`)?.parentNode
+      ?.previousElementSibling;
+    if (selectedDate) {
+      scrollContainer.scrollTop = selectedDate.offsetTop - scrollContainer.offsetTop;
+    }
+  };
+
+  const onPopupVisibleChange = (v) => {
+    if (!v) {
+      onClose?.('overlay');
+    } else {
+      selectedValueIntoView();
+    }
+    setCurrentVisible(v);
+  };
+
+  useEffect(() => {
+    setCurrentVisible(visible);
+  }, [visible]);
+
+  return (
+    <CalendarContext.Provider value={contextValue}>
+      <div className={className} style={style}>
+        {!usePopup ? (
+          <CalendarTemplate ref={calendarTemplateRef} title={title} confirmBtn={confirmBtn} />
+        ) : (
+          <TPopup visible={currentVisible} placement="bottom" onVisibleChange={onPopupVisibleChange}>
+            <CalendarTemplate ref={calendarTemplateRef} title={title} confirmBtn={confirmBtn} />
+          </TPopup>
+        )}
+      </div>
+    </CalendarContext.Provider>
+  );
+};
+
+Calendar.displayName = 'Calendar';
+
+export default Calendar;