diff --git a/src/Calendar/body/index.tsx b/src/Calendar/body/index.tsx index b7a3eb0..cdbd2e9 100644 --- a/src/Calendar/body/index.tsx +++ b/src/Calendar/body/index.tsx @@ -1,24 +1,17 @@ -import dayjs from 'dayjs' import classnames from 'classnames' -import _chunk from 'lodash/chunk' -import _throttle from 'lodash/throttle' - +import dayjs from 'dayjs' import React from 'react' -import bind from 'bind-decorator' -import { View, Swiper, SwiperItem } from '@tarojs/components' -import { ITouchEvent, ITouch } from '@tarojs/components/types/common' - -import Calendar from '../types' -import AtCalendarDayList from '../ui/day-list/index' -import AtCalendarDateList from '../ui/date-list/index' -import generateCalendarGroup from '../common/helper' -import { Props, State, ListGroup } from './interface' - +import { Swiper, SwiperItem, View } from '@tarojs/components' +import { BaseEventOrig, ITouch, ITouchEvent } from '@tarojs/components/types/common' +import { AtCalendarBodyListGroup, AtCalendarBodyProps, AtCalendarBodyState, Calendar } from 'taro-ui/types/calendar' import { delayQuerySelector } from '../../utils' +import generateCalendarGroup from '../common/helper' +import AtCalendarDateList from '../ui/date-list/index' +import AtCalendarDayList from '../ui/day-list/index' -const ANIMTE_DURATION: number = 300 +const ANIMTE_DURATION = 300 -const defaultProps: Partial = { +const defaultProps: Partial = { marks: [], selectedDate: { end: Date.now(), @@ -28,28 +21,10 @@ const defaultProps: Partial = { generateDate: Date.now(), } -/** - * @ignore - */ -export default class AtCalendarBody extends React.Component> { - static options = { addGlobalClass: true } - static defaultProps: Partial = defaultProps - - private changeCount: number = 0 - private currentSwiperIndex: number = 1 - private startX: number = 0 - private swipeStartPoint: number = 0 - private isPreMonth: boolean = false - private maxWidth: number = 0 - private isTouching: boolean = false - - private generateFunc: ( - generateDate: number, - selectedDate: Calendar.SelectedDate, - isShowStatus?: boolean - ) => Calendar.ListInfo +export default class AtCalendarBody extends React.Component> { + static defaultProps: Partial = defaultProps - constructor(props) { + public constructor(props: AtCalendarBodyProps) { super(props) const { validDates, marks, format, minDate, maxDate, generateDate, selectedDate, selectedDates } = props @@ -70,10 +45,48 @@ export default class AtCalendarBody extends React.Component { + this.maxWidth = res[0].width + }) + } + + public UNSAFE_componentWillReceiveProps(nextProps: AtCalendarBodyProps): void { + const { validDates, marks, format, minDate, maxDate, generateDate, selectedDate, selectedDates } = nextProps + + this.generateFunc = generateCalendarGroup({ + validDates, + format, + minDate, + maxDate, + marks, + selectedDates, + }) + const listGroup = this.getGroups(generateDate, selectedDate) + + this.setState({ + offsetSize: 0, + listGroup, + }) + } + + private changeCount = 0 + private currentSwiperIndex = 1 + private startX = 0 + private swipeStartPoint = 0 + private isPreMonth = false + private maxWidth = 0 + private isTouching = false + + private generateFunc: ( + generateDate: number, + selectedDate: Calendar.SelectedDate, + isShowStatus?: boolean + ) => Calendar.ListInfo + + private getGroups = (generateDate: number, selectedDate: Calendar.SelectedDate): AtCalendarBodyListGroup => { const dayjsDate = dayjs(generateDate) - const arr: ListGroup = [] + const arr: AtCalendarBodyListGroup = [] const preList: Calendar.ListInfo = this.generateFunc( dayjsDate.subtract(1, 'month').valueOf(), selectedDate @@ -96,33 +109,7 @@ export default class AtCalendarBody extends React.Component { - // this.maxWidth = res[0].width - // }) - } - - // @bind - private handleTouchStart(e: ITouchEvent) { + private handleTouchStart = (e: ITouchEvent): void => { if (!this.props.isSwiper) { return } @@ -130,7 +117,7 @@ export default class AtCalendarBody extends React.Component { + private handleTouchMove = (e: ITouchEvent): void => { if (!this.props.isSwiper) { return } @@ -144,7 +131,7 @@ export default class AtCalendarBody extends React.Component { this.setState( { isAnimate: true, @@ -167,8 +154,7 @@ export default class AtCalendarBody extends React.Component { if (!this.props.isSwiper) { return } @@ -190,39 +176,40 @@ export default class AtCalendarBody extends React.Component + ): void => { const { current, source } = e.detail if (source === 'touch') { this.currentSwiperIndex = current - this.changeCount = this.changeCount + 1 + this.changeCount += 1 } } - // @bind - private handleAnimateFinish() { + private handleAnimateFinish = (): void => { if (this.changeCount > 0) { this.props.onSwipeMonth(this.isPreMonth ? -this.changeCount : this.changeCount) this.changeCount = 0 } } - // @bind - private handleSwipeTouchStart(e: ITouchEvent & { changedTouches: Array }) { + private handleSwipeTouchStart = (e: ITouchEvent & { changedTouches: Array }): void => { const { clientY, clientX } = e.changedTouches[0] this.swipeStartPoint = this.props.isVertical ? clientY : clientX } - // @bind - private handleSwipeTouchEnd(e: ITouchEvent & { changedTouches: Array }) { + private handleSwipeTouchEnd = (e: ITouchEvent & { changedTouches: Array }): void => { const { clientY, clientX } = e.changedTouches[0] this.isPreMonth = this.props.isVertical ? clientY - this.swipeStartPoint > 0 : clientX - this.swipeStartPoint > 0 } - render() { + public render(): JSX.Element { const { isSwiper } = this.props const { isAnimate, offsetSize, listGroup } = this.state diff --git a/src/Calendar/body/interface.ts b/src/Calendar/body/interface.ts deleted file mode 100644 index 953d101..0000000 --- a/src/Calendar/body/interface.ts +++ /dev/null @@ -1,39 +0,0 @@ -import Calendar from '../types' - -export type ListGroup = Array> - -export interface Props { - format: string - - validDates: Array - - marks: Array - - isSwiper: boolean - - minDate?: Calendar.DateArg - - maxDate?: Calendar.DateArg - - isVertical: boolean - - generateDate: number - - selectedDate: Calendar.SelectedDate - - selectedDates: Array | [] - - onDayClick: (item: Calendar.Item) => void - - onSwipeMonth: (vectorCount: number) => void - - onLongClick: (item: Calendar.Item) => void -} - -export interface State { - isAnimate: boolean - - offsetSize: number - - listGroup: ListGroup -} diff --git a/src/Calendar/common/helper.ts b/src/Calendar/common/helper.ts index 6bada82..360745b 100644 --- a/src/Calendar/common/helper.ts +++ b/src/Calendar/common/helper.ts @@ -1,114 +1,114 @@ import dayjs, { Dayjs } from 'dayjs' import _flow from 'lodash/flow' +import { Calendar } from 'taro-ui/types/calendar' -import Calendar from '../types' import plugins from './plugins' import * as constant from './constant' const TOTAL = 7 * 6 -function getFullItem ( - item: Partial, - options: Calendar.GroupOptions, - selectedDate: Calendar.SelectedDate, - isShowStatus?: boolean +function getFullItem( + item: Partial, + options: Calendar.GroupOptions, + selectedDate: Calendar.SelectedDate, + isShowStatus?: boolean ) { - if (!isShowStatus) return item - - const bindedPlugins = plugins.map(fn => - fn.bind(null, { - options, - selectedDate - }) - ) - return _flow(bindedPlugins)(item) + if (!isShowStatus) return item + + const bindedPlugins = plugins.map((fn) => + fn.bind(null, { + options, + selectedDate, + }) + ) + return _flow(bindedPlugins)(item) } -export default function generateCalendarGroup ( - options: Calendar.GroupOptions +export default function generateCalendarGroup( + options: Calendar.GroupOptions ): ( generateDate: number, selectedDate: Calendar.SelectedDate, isShowStatus?: boolean - ) => Calendar.ListInfo { - return function ( - generateDate: number, - selectedDate: Calendar.SelectedDate, - isShowStatus?: boolean - ): Calendar.ListInfo { - const date = dayjs(generateDate) - - const { format } = options - - // 获取生成日期的第一天 和 最后一天 - const firstDate = date.startOf('month') - const lastDate = date.endOf('month') - - const preMonthDate = date.subtract(1, 'month') - - const list: Calendar.List = [] - - const nowMonthDays: number = date.daysInMonth() // 获取这个月有多少天 - const preMonthLastDay = preMonthDate.endOf('month').day() // 获取上个月最后一天是周几 - - // 生成上个月的日期 - for (let i = 1; i <= preMonthLastDay + 1; i++) { - const thisDate = firstDate.subtract(i, 'day').startOf('day') - - let item = { - marks: [], - _value: thisDate, - text: thisDate.date(), - type: constant.TYPE_PRE_MONTH, - value: thisDate.format(format) - } - - item = getFullItem(item, options, selectedDate, isShowStatus) - - list.push(item) - } - list.reverse() - - // 生成这个月的日期 - for (let i = 0; i < nowMonthDays; i++) { - const thisDate = firstDate.add(i, 'day').startOf('day') - let item = { - marks: [], - _value: thisDate, - text: thisDate.date(), - type: constant.TYPE_NOW_MONTH, - value: thisDate.format(format) - } - - item = getFullItem(item, options, selectedDate, isShowStatus) - - list.push(item) - } - - // 生成下个月的日期 - let i = 1 - while (list.length < TOTAL) { - const thisDate = lastDate.add(i++, 'day').startOf('day') - let item = { - marks: [], - _value: thisDate, - text: thisDate.date(), - type: constant.TYPE_NEXT_MONTH, - value: thisDate.format(format) - } - - item = getFullItem(item, options, selectedDate, isShowStatus) - - list.push(item) - } - - return { - list, - value: generateDate +) => Calendar.ListInfo { + return function ( + generateDate: number, + selectedDate: Calendar.SelectedDate, + isShowStatus?: boolean + ): Calendar.ListInfo { + const date = dayjs(generateDate) + + const { format } = options + + // 获取生成日期的第一天 和 最后一天 + const firstDate = date.startOf('month') + const lastDate = date.endOf('month') + + const preMonthDate = date.subtract(1, 'month') + + const list: Calendar.List = [] + + const nowMonthDays: number = date.daysInMonth() // 获取这个月有多少天 + const preMonthLastDay = preMonthDate.endOf('month').day() // 获取上个月最后一天是周几 + + // 生成上个月的日期 + for (let i = 1; i <= preMonthLastDay + 1; i++) { + const thisDate = firstDate.subtract(i, 'day').startOf('day') + + let item = { + marks: [], + _value: thisDate, + text: thisDate.date(), + type: constant.TYPE_PRE_MONTH, + value: thisDate.format(format), + } + + item = getFullItem(item, options, selectedDate, isShowStatus) + + list.push(item) + } + list.reverse() + + // 生成这个月的日期 + for (let i = 0; i < nowMonthDays; i++) { + const thisDate = firstDate.add(i, 'day').startOf('day') + let item = { + marks: [], + _value: thisDate, + text: thisDate.date(), + type: constant.TYPE_NOW_MONTH, + value: thisDate.format(format), + } + + item = getFullItem(item, options, selectedDate, isShowStatus) + + list.push(item) + } + + // 生成下个月的日期 + let i = 1 + while (list.length < TOTAL) { + const thisDate = lastDate.add(i++, 'day').startOf('day') + let item = { + marks: [], + _value: thisDate, + text: thisDate.date(), + type: constant.TYPE_NEXT_MONTH, + value: thisDate.format(format), + } + + item = getFullItem(item, options, selectedDate, isShowStatus) + + list.push(item) + } + + return { + list, + value: generateDate, + } } - } } -export function getGenerateDate (date: Calendar.DateArg | undefined): Dayjs { - return dayjs(date).startOf('month') +export function getGenerateDate(date: Calendar.DateArg | undefined): Dayjs { + return dayjs(date).startOf('month') } diff --git a/src/Calendar/common/plugins.ts b/src/Calendar/common/plugins.ts index ee044d8..6a4d56a 100644 --- a/src/Calendar/common/plugins.ts +++ b/src/Calendar/common/plugins.ts @@ -1,56 +1,46 @@ import dayjs from 'dayjs' import _isEmpty from 'lodash/isEmpty' -import Calendar from '../types' +import { Calendar } from 'taro-ui/types/calendar' interface PluginArg { - options: Calendar.GroupOptions + options: Calendar.GroupOptions - selectedDate: Calendar.SelectedDate + selectedDate: Calendar.SelectedDate } -export function handleActive ( - args: PluginArg, - item: Calendar.Item -): Calendar.Item { - const { selectedDate } = args - const { _value } = item +export function handleActive(args: PluginArg, item: Calendar.Item): Calendar.Item { + const { selectedDate } = args + const { _value } = item - const { start, end } = selectedDate + const { start, end } = selectedDate - const dayjsEnd = dayjs(end) - const dayjsStart = start ? dayjs(start) : dayjsEnd + const dayjsEnd = dayjs(end) + const dayjsStart = start ? dayjs(start) : dayjsEnd - item.isSelected = - _value.isSame(dayjsEnd) || - _value.isSame(dayjsStart) || - (_value.isAfter(dayjsStart) && _value.isBefore(dayjsEnd)) + item.isSelected = + _value.isSame(dayjsEnd) || + _value.isSame(dayjsStart) || + (_value.isAfter(dayjsStart) && _value.isBefore(dayjsEnd)) - item.isSelectedHead = _value.isSame(dayjsStart) - item.isSelectedTail = _value.isSame(dayjsEnd) + item.isSelectedHead = _value.isSame(dayjsStart) + item.isSelectedTail = _value.isSame(dayjsEnd) - item.isToday = _value.diff(dayjs(Date.now()).startOf('day'), 'day') === 0 + item.isToday = _value.diff(dayjs(Date.now()).startOf('day'), 'day') === 0 - return item + return item } -export function handleMarks ( - args: PluginArg, - item: Calendar.Item -): Calendar.Item { - const { options } = args - const { _value } = item - const { marks } = options +export function handleMarks(args: PluginArg, item: Calendar.Item): Calendar.Item { + const { options } = args + const { _value } = item + const { marks } = options - const markList = marks.filter(mark => - dayjs(mark.value) - .startOf('day') - .isSame(_value) - ) + const markList = marks.filter((mark) => dayjs(mark.value).startOf('day').isSame(_value)) - item.marks = markList.slice(0, 1) + item.marks = markList.slice(0, 1) - return item + return item } // export function handleSelectedDates (args: PluginArg): Calendar.Item { @@ -85,43 +75,35 @@ export function handleMarks ( // return item // } -export function handleDisabled ( - args: PluginArg, - item: Calendar.Item -): Calendar.Item { - const { options } = args - const { _value } = item - const { minDate, maxDate } = options +export function handleDisabled(args: PluginArg, item: Calendar.Item): Calendar.Item { + const { options } = args + const { _value } = item + const { minDate, maxDate } = options - const dayjsMinDate = dayjs(minDate) - const dayjsMaxDate = dayjs(maxDate) + const dayjsMinDate = dayjs(minDate) + const dayjsMaxDate = dayjs(maxDate) - item.isDisabled = - !!(minDate && _value.isBefore(dayjsMinDate)) || - !!(maxDate && _value.isAfter(dayjsMaxDate)) + item.isDisabled = !!(minDate && _value.isBefore(dayjsMinDate)) || !!(maxDate && _value.isAfter(dayjsMaxDate)) - return item + return item } -export function handleValid ( - args: PluginArg, - item: Calendar.Item -): Calendar.Item { - const { options } = args - const { _value } = item - const { validDates } = options +export function handleValid(args: PluginArg, item: Calendar.Item): Calendar.Item { + const { options } = args + const { _value } = item + const { validDates } = options - if (!_isEmpty(validDates)) { - const isInclude = validDates.some(date => { - return dayjs(date.value).startOf('day').isSame(_value) - }) + if (!_isEmpty(validDates)) { + const isInclude = validDates.some((date) => { + return dayjs(date.value).startOf('day').isSame(_value) + }) - item.isDisabled = !isInclude - } + item.isDisabled = !isInclude + } - delete item._value + delete item._value - return item + return item } export default [handleActive, handleMarks, handleDisabled, handleValid] diff --git a/src/Calendar/controller/index.tsx b/src/Calendar/controller/index.tsx index 7c53dc0..be3f29d 100644 --- a/src/Calendar/controller/index.tsx +++ b/src/Calendar/controller/index.tsx @@ -2,15 +2,16 @@ import dayjs, { Dayjs } from 'dayjs' import classnames from 'classnames' import React from 'react' import { Text, View, Picker } from '@tarojs/components' -import { Props, State } from './interface' +import { AtCalendarControllerProps, AtCalendarControllerState } from 'taro-ui/types/calendar' /** * @ignore */ -export default class AtCalendarController extends React.Component { - static options = { addGlobalClass: true } - - render() { +export default class AtCalendarController extends React.Component< + AtCalendarControllerProps, + AtCalendarControllerState +> { + public render(): JSX.Element { const { generateDate, minDate, maxDate, monthFormat, hideArrow } = this.props const dayjsDate: Dayjs = dayjs(generateDate) diff --git a/src/Calendar/controller/interface.ts b/src/Calendar/controller/interface.ts deleted file mode 100644 index 0ef537b..0000000 --- a/src/Calendar/controller/interface.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { CommonEventFunction } from '@tarojs/components' - -import Calendar from '../types' - -export interface Props { - generateDate: Calendar.DateArg - - minDate?: Calendar.DateArg - - maxDate?: Calendar.DateArg - - hideArrow: boolean - - monthFormat: string - - onPreMonth: () => void - - onNextMonth: () => void - - onSelectDate: CommonEventFunction -} - -export interface State {} diff --git a/src/Calendar/index.tsx b/src/Calendar/index.tsx index b6bac4f..3fff231 100644 --- a/src/Calendar/index.tsx +++ b/src/Calendar/index.tsx @@ -1,21 +1,22 @@ +import React from 'react' import classnames from 'classnames' import dayjs, { Dayjs } from 'dayjs' - -import _pick from 'lodash/pick' -import _isObject from 'lodash/isObject' -import _isFunction from 'lodash/isFunction' - -import React from 'react' -import { View } from '@tarojs/components' +import { View, BaseEventOrig } from '@tarojs/components' import '../../style/Calendar.scss' -import AtCalendar from './types' +import { + AtCalendarDefaultProps, + AtCalendarProps, + AtCalendarPropsWithDefaults, + AtCalendarState, + Calendar as CalendarType, +} from 'taro-ui/types/calendar' import AtCalendarBody from './body/index' import AtCalendarController from './controller/index' -import { DefaultProps, Props, State, PropsWithDefaults } from './interface' +export { AtCalendarProps as CalendarProps } from 'taro-ui/types/calendar' -const defaultProps: DefaultProps = { +const defaultProps: AtCalendarDefaultProps = { validDates: [], marks: [], isSwiper: true, @@ -31,41 +32,39 @@ const defaultProps: DefaultProps = { /** * @ignore */ -export class Calendar extends React.Component> { - static options = { addGlobalClass: true } - static defaultProps: DefaultProps = defaultProps +export class Calendar extends React.Component> { + static defaultProps: AtCalendarDefaultProps = defaultProps - constructor(props: Props) { + public constructor(props: AtCalendarProps) { super(props) - const { currentDate, isMultiSelect } = props as PropsWithDefaults + const { currentDate, isMultiSelect } = props as AtCalendarPropsWithDefaults this.state = this.getInitializeState(currentDate, isMultiSelect) } - UNSAFE_componentWillReceiveProps(nextProps: Props) { + public UNSAFE_componentWillReceiveProps(nextProps: AtCalendarProps): void { const { currentDate, isMultiSelect } = nextProps if (!currentDate || currentDate === this.props.currentDate) return if (isMultiSelect && this.props.isMultiSelect) { - const { start, end } = currentDate as AtCalendar.SelectedDate - const { start: preStart, end: preEnd } = this.props.currentDate as AtCalendar.SelectedDate + const { start, end } = currentDate as CalendarType.SelectedDate + const { start: preStart, end: preEnd } = this.props.currentDate as CalendarType.SelectedDate if (start === preStart && preEnd === end) { return } } - const stateValue: State = this.getInitializeState(currentDate, isMultiSelect) + const stateValue: AtCalendarState = this.getInitializeState(currentDate, isMultiSelect) this.setState(stateValue) } - // @bind - private getSingleSelectdState(value: Dayjs): Partial { + private getSingleSelectdState = (value: Dayjs): Partial => { const { generateDate } = this.state - const stateValue: Partial = { + const stateValue: Partial = { selectedDate: this.getSelectedDate(value.valueOf()), } @@ -80,13 +79,12 @@ export class Calendar extends React.Component> { return stateValue } - // @bind - private getMultiSelectedState(value: Dayjs): Pick { + private getMultiSelectedState = (value: Dayjs): Pick => { const { selectedDate } = this.state const { end, start } = selectedDate const valueUnix: number = value.valueOf() - const state: Pick = { + const state: Pick = { selectedDate, } @@ -100,8 +98,8 @@ export class Calendar extends React.Component> { return state } - private getSelectedDate(start: number, end?: number): AtCalendar.SelectedDate { - const stateValue: AtCalendar.SelectedDate = { + private getSelectedDate = (start: number, end?: number): CalendarType.SelectedDate => { + const stateValue: CalendarType.SelectedDate = { start, end: start, } @@ -113,7 +111,10 @@ export class Calendar extends React.Component> { return stateValue } - private getInitializeState(currentDate: AtCalendar.DateArg | AtCalendar.SelectedDate, isMultiSelect?: boolean): State { + private getInitializeState( + currentDate: CalendarType.DateArg | CalendarType.SelectedDate, + isMultiSelect?: boolean + ): AtCalendarState { let end: number let start: number let generateDateValue: number @@ -131,20 +132,16 @@ export class Calendar extends React.Component> { } if (isMultiSelect) { - const { start: cStart, end: cEnd } = currentDate as AtCalendar.SelectedDate + const { start: cStart, end: cEnd } = currentDate as CalendarType.SelectedDate const dayjsStart = dayjs(cStart) start = dayjsStart.startOf('day').valueOf() generateDateValue = dayjsStart.startOf('month').valueOf() - end = cEnd - ? dayjs(cEnd) - .startOf('day') - .valueOf() - : start + end = cEnd ? dayjs(cEnd).startOf('day').valueOf() : start } else { - const dayjsStart = dayjs(currentDate as AtCalendar.DateArg) + const dayjsStart = dayjs(currentDate as CalendarType.DateArg) start = dayjsStart.startOf('day').valueOf() generateDateValue = dayjsStart.startOf('month').valueOf() @@ -158,16 +155,15 @@ export class Calendar extends React.Component> { } } - // @bind - private triggerChangeDate(value: Dayjs) { + private triggerChangeDate = (value: Dayjs): void => { const { format } = this.props - if (!_isFunction(this.props.onMonthChange)) return + if (typeof this.props.onMonthChange !== 'function') return this.props.onMonthChange(value.format(format)) } - setMonth = (vectorCount: number) => { + private setMonth = (vectorCount: number): void => { const { format } = this.props const { generateDate } = this.state @@ -176,40 +172,37 @@ export class Calendar extends React.Component> { generateDate: _generateDate.valueOf(), }) - if (vectorCount && _isFunction(this.props.onMonthChange)) { + if (vectorCount && typeof this.props.onMonthChange === 'function') { this.props.onMonthChange(_generateDate.format(format)) } } - // @bind - handleClickPreMonth = (isMinMonth?: boolean) => { + private handleClickPreMonth = (isMinMonth?: boolean): void => { if (isMinMonth === true) { return } this.setMonth(-1) - if (_isFunction(this.props.onClickPreMonth)) { + if (typeof this.props.onClickPreMonth === 'function') { this.props.onClickPreMonth() } } - // @bind - handleClickNextMonth = (isMaxMonth?: boolean) => { + private handleClickNextMonth = (isMaxMonth?: boolean): void => { if (isMaxMonth === true) { return } this.setMonth(1) - if (_isFunction(this.props.onClickNextMonth)) { + if (typeof this.props.onClickNextMonth === 'function') { this.props.onClickNextMonth() } } // picker 选择时间改变时触发 - // @bind - handleSelectDate = (e: any) => { + private handleSelectDate = (e: BaseEventOrig<{ value: string }>): void => { const { value } = e.detail const _generateDate: Dayjs = dayjs(value) @@ -223,8 +216,7 @@ export class Calendar extends React.Component> { }) } - // @bind - handleDayClick = (item: AtCalendar.Item) => { + private handleDayClick = (item: CalendarType.Item): void => { const { isMultiSelect } = this.props const { isDisabled, value } = item @@ -232,7 +224,7 @@ export class Calendar extends React.Component> { const dayjsDate: Dayjs = dayjs(value) - let stateValue: Partial = {} + let stateValue: Partial = {} if (isMultiSelect) { stateValue = this.getMultiSelectedState(dayjsDate) @@ -240,19 +232,19 @@ export class Calendar extends React.Component> { stateValue = this.getSingleSelectdState(dayjsDate) } - this.setState(stateValue as State, () => { + this.setState(stateValue as AtCalendarState, () => { this.handleSelectedDate() }) - if (_isFunction(this.props.onDayClick)) { + if (typeof this.props.onDayClick === 'function') { this.props.onDayClick({ value: item.value }) } } - handleSelectedDate() { + private handleSelectedDate = (): void => { const selectDate = this.state.selectedDate - if (_isFunction(this.props.onSelectDate)) { - const info: AtCalendar.SelectedDate = { + if (typeof this.props.onSelectDate === 'function') { + const info: CalendarType.SelectedDate = { start: dayjs(selectDate.start).format(this.props.format), } @@ -266,14 +258,13 @@ export class Calendar extends React.Component> { } } - // @bind - handleDayLongClick = (item: AtCalendar.Item) => { - if (_isFunction(this.props.onDayLongClick)) { + private handleDayLongClick = (item: CalendarType.Item): void => { + if (typeof this.props.onDayLongClick === 'function') { this.props.onDayLongClick({ value: item.value }) } } - render() { + public render(): JSX.Element { const { generateDate, selectedDate } = this.state const { validDates, @@ -287,7 +278,7 @@ export class Calendar extends React.Component> { isVertical, monthFormat, selectedDates, - } = this.props as PropsWithDefaults + } = this.props as AtCalendarPropsWithDefaults return ( diff --git a/src/Calendar/interface.ts b/src/Calendar/interface.ts deleted file mode 100644 index 02b962a..0000000 --- a/src/Calendar/interface.ts +++ /dev/null @@ -1,79 +0,0 @@ -import Calendar from './types' - -export interface PropsBase { - format?: string - - validDates?: Array - - minDate?: Calendar.DateArg - - maxDate?: Calendar.DateArg - - isSwiper?: boolean - - marks?: Array - - monthFormat?: string - - hideArrow?: boolean - - isVertical?: boolean - - className?: Calendar.classNameType - - onClickPreMonth?: () => void - - onClickNextMonth?: () => void - - onSelectDate?: (item: { value: Calendar.SelectedDate }) => void - - onDayClick?: (item: { value: string }) => void - - onDayLongClick?: (item: { value: string }) => void - - onMonthChange?: (value: string) => void -} - -export interface SingleSelectedProps extends PropsBase { - isMultiSelect?: false - - currentDate?: Calendar.DateArg -} - -export interface MutilSelectedProps extends PropsBase { - isMultiSelect?: true - - currentDate?: Calendar.SelectedDate -} - -export type Props = SingleSelectedProps | MutilSelectedProps - -export interface DefaultProps { - format: string - - isSwiper: boolean - - validDates: Array - - marks: Array - - currentDate: Calendar.DateArg | Calendar.SelectedDate - - monthFormat: string - - hideArrow: boolean - - isVertical: boolean - - isMultiSelect: boolean - - selectedDates: Array -} - -export interface State { - generateDate: number - - selectedDate: Calendar.SelectedDate -} - -export type PropsWithDefaults = Props & DefaultProps diff --git a/src/Calendar/types.d.ts b/src/Calendar/types.d.ts deleted file mode 100644 index b999ef6..0000000 --- a/src/Calendar/types.d.ts +++ /dev/null @@ -1,76 +0,0 @@ -import dayjs from 'dayjs' - -export default Calendar - -declare namespace Calendar { - export type DateArg = string | number | Date - - export type classNameType = - | string - | Array - | { [key: string]: boolean } - - export interface Mark { - value: DateArg - } - - export interface ValidDate { - value: DateArg - } - - export interface Item { - value: string - - _value: dayjs.Dayjs - - text: number - - type: number - - marks: Array - - isActive?: boolean - - isToday?: boolean - - isBeforeMin?: boolean - - isAfterMax?: boolean - - isDisabled?: boolean - - isSelected?: boolean - - isSelectedHead?: boolean - - isSelectedTail?: boolean - } - - export interface GroupOptions { - validDates: Array - - marks: Array - - format: string - - selectedDates: Array - - minDate?: DateArg - - maxDate?: DateArg - } - - export type List < T > = Array - - export type ListInfo < T > = { - value: number - - list: List - } - - export interface SelectedDate { - end?: Calendar.DateArg - - start: Calendar.DateArg - } -} diff --git a/src/Calendar/ui/date-list/index.tsx b/src/Calendar/ui/date-list/index.tsx index 743db5c..9c078b4 100644 --- a/src/Calendar/ui/date-list/index.tsx +++ b/src/Calendar/ui/date-list/index.tsx @@ -1,9 +1,7 @@ -import bind from 'bind-decorator' -import classnames from 'classnames' -import _isFunction from 'lodash/isFunction' import React from 'react' -import { View, Text } from '@tarojs/components' -import Calendar from '../../types' +import classnames from 'classnames' +import { Text, View } from '@tarojs/components' +import { Calendar } from 'taro-ui/types/calendar' import * as constant from '../../common/constant' const MAP: { [key: number]: string } = { @@ -24,32 +22,27 @@ export interface Props { * @ignore */ export default class AtCalendarList extends React.Component { - static options = { addGlobalClass: true } - - // @bind - handleClick(item) { - if (_isFunction(this.props.onClick)) { + private handleClick = (item: Calendar.Item): void => { + if (typeof this.props.onClick === 'function') { this.props.onClick(item) } } - // @bind - handleLongClick(item) { - if (_isFunction(this.props.onLongClick)) { + private handleLongClick = (item: Calendar.Item): void => { + if (typeof this.props.onLongClick === 'function') { this.props.onLongClick(item) } } - render() { + public render(): JSX.Element | null { const { list } = this.props - if (!list || list.length === 0) return null return ( - {list.map((item, index) => ( + {list.map((item: Calendar.Item) => (