feat(Calendar): Calendar 组件添加仅显示有效时间组功能

.gitignore

@@ -15,4 +15,6 @@ project.config.json
 site/
 docs/h5/
 
-coverage
+coverage
+
+.idea

src/components/calendar/body/index.tsx

@@ -52,6 +52,7 @@ export default class AtCalendarBody extends Taro.Component<
   constructor (props) {
     super(...arguments)
     const {
+      validDates,
       marks,
       format,
       minDate,
@@ -62,6 +63,7 @@ export default class AtCalendarBody extends Taro.Component<
     } = props
 
     this.generateFunc = generateCalendarGroup({
+      validDates,
       format,
       minDate,
       maxDate,
@@ -114,6 +116,7 @@ export default class AtCalendarBody extends Taro.Component<
 
   componentWillReceiveProps (nextProps: Props) {
     const {
+      validDates,
       marks,
       format,
       minDate,
@@ -124,6 +127,7 @@ export default class AtCalendarBody extends Taro.Component<
     } = nextProps
 
     this.generateFunc = generateCalendarGroup({
+      validDates,
       format,
       minDate,
       maxDate,

src/components/calendar/body/interface.ts

@@ -5,6 +5,8 @@ export type ListGroup = Array<Calendar.ListInfo<Calendar.Item>>
 export interface Props {
   format: string
 
+  validDates: Array<Calendar.ValidDate>
+
   marks: Array<Calendar.Mark>
 
   isSwiper: boolean

src/components/calendar/common/plugins.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
 import _forEach from 'lodash/forEach'
+import _isEmpty from 'lodash/isEmpty'
 
 import Calendar from '../types'
 
@@ -100,9 +101,31 @@ export function handleDisabled (
     !!(minDate && _value.isBefore(dayjsMinDate)) ||
     !!(maxDate && _value.isAfter(dayjsMaxDate))
 
+  return item
+}
+
+export function handleValid (
+  args: PluginArg,
+  item: Calendar.Item
+): Calendar.Item {
+  const { options } = args
+  const { _value } = item
+  const { validDates } = options
+
+  if (!_isEmpty(validDates)) {
+    let isInclude = false;
+    _forEach(validDates, date => { // 判断当前日期是否在有效时间组内
+      if (dayjs(date.value).startOf('day').isSame(_value)) {
+        isInclude = true
+      }
+    })
+
+    item.isDisabled = !isInclude
+  }
+
   delete item._value
 
   return item
 }
 
-export default [handleActive, handleMarks, handleDisabled]
+export default [handleActive, handleMarks, handleDisabled, handleValid]

src/components/calendar/index.tsx

@@ -17,6 +17,7 @@ import AtCalendarController from './controller/index'
 import { DefaultProps, Props, State, PropsWithDefaults } from './interface'
 
 const defaultProps: DefaultProps = {
+  validDates: [],
   marks: [],
   isSwiper: true,
   hideArrow: false,
@@ -269,6 +270,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
   render () {
     const { generateDate, selectedDate } = this.state
     const {
+      validDates,
       marks,
       format,
       minDate,
@@ -294,6 +296,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
           onSelectDate={this.handleSelectDate}
         />
         <AtCalendarBody
+          validDates={validDates}
           marks={marks}
           format={format}
           minDate={minDate}

src/components/calendar/interface.ts

@@ -51,6 +51,8 @@ export interface DefaultProps {
 
   isSwiper: boolean
 
+  validDates: Array<Calendar.ValidDate>
+
   marks: Array<Calendar.Mark>
 
   currentDate: Calendar.DateArg | Calendar.SelectedDate

src/components/calendar/types.d.ts

@@ -14,6 +14,10 @@ declare namespace Calendar {
     value: DateArg
   }
 
+  export interface ValidDate {
+    value: DateArg
+  }
+
   export interface Item {
     value: string
 
@@ -43,6 +47,8 @@ declare namespace Calendar {
   }
 
   export interface GroupOptions {
+    validDates: Array<ValidDate>
+
     marks: Array<Mark>
 
     format: string

src/pages/advanced/calendar/index.tsx

@@ -26,6 +26,20 @@ export default class Index extends Component {
       {
         value: '2018/11/11'
       }
+    ],
+    validDates: [
+      {
+        value: '2019/04/17'
+      },
+      {
+        value: '2019/04/21'
+      },
+      {
+        value: '2019/05/04'
+      },
+      {
+        value: '2019/05/28'
+      }
     ]
   }
 
@@ -67,7 +81,7 @@ export default class Index extends Component {
   }
 
   render () {
-    const { now, minDate, maxDate, mark, multiCurentDate } = this.state
+    const { now, minDate, maxDate, mark, multiCurentDate, validDates } = this.state
     return (
       <View className='page calendar-page'>
         <DocsHeader title='Calendar 日历' />
@@ -178,6 +192,13 @@ export default class Index extends Component {
               </View>
             </View>
           </View>
+
+          <View className='panel'>
+            <View className='panel__title'>有效时间组</View>
+            <View className='panel__content'>
+              <AtCalendar validDates={validDates}/>
+            </View>
+          </View>
         </View>
       </View>
     )