fix: 移动 AtCalendar 的类型声明 close #968

Author: Garfield550

src/components/calendar/body/index.tsx

@@ -3,19 +3,23 @@ import classnames from 'classnames'
 import dayjs from 'dayjs'
 import _chunk from 'lodash/chunk'
 import _throttle from 'lodash/throttle'
+import {
+  AtCalendarBodyListGroup,
+  AtCalendarBodyProps,
+  AtCalendarBodyState,
+  Calendar
+} from 'types/calendar'
 import { Swiper, SwiperItem, View } from '@tarojs/components'
 import { BaseEvent, ITouch, ITouchEvent } from '@tarojs/components/types/common'
 import Taro from '@tarojs/taro'
 import { delayQuerySelector } from '../../../common/utils'
 import generateCalendarGroup from '../common/helper'
-import Calendar from '../types'
 import AtCalendarDateList from '../ui/date-list/index'
 import AtCalendarDayList from '../ui/day-list/index'
-import { ListGroup, Props, State } from './interface'
 
 const ANIMTE_DURATION: number = 300
 
-const defaultProps: Partial<Props> = {
+const defaultProps: Partial<AtCalendarBodyProps> = {
   marks: [],
   selectedDate: {
     end: Date.now(),
@@ -26,12 +30,12 @@ const defaultProps: Partial<Props> = {
 }
 
 export default class AtCalendarBody extends Taro.Component<
-  Props,
-  Readonly<State>
+  AtCalendarBodyProps,
+  Readonly<AtCalendarBodyState>
 > {
-  static defaultProps: Partial<Props> = defaultProps
+  static defaultProps: Partial<AtCalendarBodyProps> = defaultProps
 
-  constructor(props: Props) {
+  constructor(props: AtCalendarBodyProps) {
     super(props)
     const {
       validDates,
@@ -67,7 +71,7 @@ export default class AtCalendarBody extends Taro.Component<
     })
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps: AtCalendarBodyProps) {
     const {
       validDates,
       marks,
@@ -115,9 +119,9 @@ export default class AtCalendarBody extends Taro.Component<
   private getGroups(
     generateDate: number,
     selectedDate: Calendar.SelectedDate
-  ): ListGroup {
+  ): AtCalendarBodyListGroup {
     const dayjsDate = dayjs(generateDate)
-    const arr: ListGroup = []
+    const arr: AtCalendarBodyListGroup = []
     const preList: Calendar.ListInfo<Calendar.Item> = this.generateFunc(
       dayjsDate.subtract(1, 'month').valueOf(),
       selectedDate

src/components/calendar/body/interface.ts

@@ -1,6 +1,6 @@
 import dayjs, { Dayjs } from 'dayjs'
 import _flow from 'lodash/flow'
-import Calendar from '../types'
+import { Calendar } from 'types/calendar'
 import * as constant from './constant'
 import plugins from './plugins'
 

src/components/calendar/common/helper.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import _isEmpty from 'lodash/isEmpty'
-import Calendar from '../types'
+import { Calendar } from 'types/calendar'
 
 interface PluginArg {
   options: Calendar.GroupOptions

src/components/calendar/common/plugins.ts

@@ -1,10 +1,16 @@
 import classnames from 'classnames'
 import dayjs, { Dayjs } from 'dayjs'
+import {
+  AtCalendarControllerProps,
+  AtCalendarControllerState
+} from 'types/calendar'
 import { Picker, Text, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import { Props, State } from './interface'
 
-export default class AtCalendarController extends Taro.Component<Props, State> {
+export default class AtCalendarController extends Taro.Component<
+  AtCalendarControllerProps,
+  AtCalendarControllerState
+> {
   static options = { addGlobalClass: true }
 
   render() {

src/components/calendar/controller/index.tsx

@@ -4,15 +4,20 @@ import dayjs, { Dayjs } from 'dayjs'
 import _isFunction from 'lodash/isFunction'
 import _isObject from 'lodash/isObject'
 import _pick from 'lodash/pick'
+import {
+  AtCalendarDefaultProps,
+  AtCalendarProps,
+  AtCalendarPropsWithDefaults,
+  AtCalendarState,
+  Calendar
+} from 'types/calendar'
 import { View } from '@tarojs/components'
 import { BaseEvent } from '@tarojs/components/types/common'
 import Taro from '@tarojs/taro'
 import AtCalendarBody from './body/index'
 import AtCalendarController from './controller/index'
-import { DefaultProps, Props, PropsWithDefaults, State } from './interface'
-import Calendar from './types'
 
-const defaultProps: DefaultProps = {
+const defaultProps: AtCalendarDefaultProps = {
   validDates: [],
   marks: [],
   isSwiper: true,
@@ -25,18 +30,21 @@ const defaultProps: DefaultProps = {
   monthFormat: 'YYYY年MM月'
 }
 
-export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
-  static defaultProps: DefaultProps = defaultProps
+export default class AtCalendar extends Taro.Component<
+  AtCalendarProps,
+  Readonly<AtCalendarState>
+> {
+  static defaultProps: AtCalendarDefaultProps = defaultProps
 
-  constructor(props: Props) {
+  constructor(props: AtCalendarProps) {
     super(props)
 
-    const { currentDate, isMultiSelect } = props as PropsWithDefaults
+    const { currentDate, isMultiSelect } = props as AtCalendarPropsWithDefaults
 
     this.state = this.getInitializeState(currentDate, isMultiSelect)
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps: AtCalendarProps) {
     const { currentDate, isMultiSelect } = nextProps
     if (!currentDate || currentDate === this.props.currentDate) return
 
@@ -50,7 +58,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
       }
     }
 
-    const stateValue: State = this.getInitializeState(
+    const stateValue: AtCalendarState = this.getInitializeState(
       currentDate,
       isMultiSelect
     )
@@ -61,10 +69,10 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
   static options = { addGlobalClass: true }
 
   @bind
-  private getSingleSelectdState(value: Dayjs): Partial<State> {
+  private getSingleSelectdState(value: Dayjs): Partial<AtCalendarState> {
     const { generateDate } = this.state
 
-    const stateValue: Partial<State> = {
+    const stateValue: Partial<AtCalendarState> = {
       selectedDate: this.getSelectedDate(value.valueOf())
     }
 
@@ -80,12 +88,14 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
   }
 
   @bind
-  private getMultiSelectedState(value: Dayjs): Pick<State, 'selectedDate'> {
+  private getMultiSelectedState(
+    value: Dayjs
+  ): Pick<AtCalendarState, 'selectedDate'> {
     const { selectedDate } = this.state
     const { end, start } = selectedDate
 
     const valueUnix: number = value.valueOf()
-    const state: Pick<State, 'selectedDate'> = {
+    const state: Pick<AtCalendarState, 'selectedDate'> = {
       selectedDate
     }
 
@@ -115,7 +125,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
   private getInitializeState(
     currentDate: Calendar.DateArg | Calendar.SelectedDate,
     isMultiSelect?: boolean
-  ): State {
+  ): AtCalendarState {
     let end: number
     let start: number
     let generateDateValue: number
@@ -235,15 +245,15 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
 
     const dayjsDate: Dayjs = dayjs(value)
 
-    let stateValue: Partial<State> = {}
+    let stateValue: Partial<AtCalendarState> = {}
 
     if (isMultiSelect) {
       stateValue = this.getMultiSelectedState(dayjsDate)
     } else {
       stateValue = this.getSingleSelectdState(dayjsDate)
     }
 
-    this.setState(stateValue as State, () => {
+    this.setState(stateValue as AtCalendarState, () => {
       this.handleSelectedDate()
     })
 
@@ -290,7 +300,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
       isVertical,
       monthFormat,
       selectedDates
-    } = this.props as PropsWithDefaults
+    } = this.props as AtCalendarPropsWithDefaults
 
     return (
       <View className={classnames('at-calendar', className)}>