xinda-miniprogram/src/components/calendar/plugins/week.js

/**
 * @Author: drfu*
 * @Description: 周视图
 * @Date: 2020-10-08 21:22:09*
 * @Last Modified by: drfu
 * @Last Modified time: 2020-10-12 14:39:45
 * */

import { renderCalendar } from '../render'
import {
  getCalendarConfig,
  getCalendarData,
  logger,
  dateUtil
} from '../utils/index'
import { calcJumpData } from '../core'

/**
 * 当月第一周所有日期
 */
function firstWeekInMonth(
  target = {},
  calendarDates = [],
  calendarConfig = {}
) {
  const { firstDayOfWeek } = calendarConfig
  const firstDayOfWeekIsMon = firstDayOfWeek === 'Mon'
  const { year, month } = target
  let firstDay = dateUtil.getDayOfWeek(year, month, 1)
  if (firstDayOfWeekIsMon && firstDay === 0) {
    firstDay = 7
  }
  const [, end] = [0, 7 - firstDay]
  return calendarDates.slice(0, firstDayOfWeekIsMon ? end + 1 : end)
}

/**
 * 当月最后一周所有日期
 */
function lastWeekInMonth(target = {}, calendarDates = [], calendarConfig = {}) {
  const { firstDayOfWeek } = calendarConfig
  const firstDayOfWeekIsMon = firstDayOfWeek === 'Mon'
  const { year, month } = target
  const lastDay = dateUtil.getDatesCountOfMonth(year, month)
  let lastDayWeek = dateUtil.getDayOfWeek(year, month, lastDay)
  if (firstDayOfWeekIsMon && lastDayWeek === 0) {
    lastDayWeek = 7
  }
  const [start, end] = [lastDay - lastDayWeek, lastDay]
  return calendarDates.slice(firstDayOfWeekIsMon ? start : start - 1, end)
}

/**
 * 判断目标日期是否在某些指定日历内
 */
function dateIsInDatesRange(target, dates) {
  if (!target || !dates || !dates.length) return false
  const targetDateStr = dateUtil.toTimeStr(target)
  let rst = false
  for (let date of dates) {
    const dateStr = dateUtil.toTimeStr(date)
    if (dateStr === targetDateStr) {
      rst = true
      return rst
    }
    rst = false
  }
  return rst
}

function getDatesWhenTargetInFirstWeek(target, firstWeekDates) {
  const { year, month } = target
  const prevMonthInfo = dateUtil.getPrevMonthInfo({ year, month })
  let lastMonthDatesCount = dateUtil.getDatesCountOfMonth(
    prevMonthInfo.year,
    prevMonthInfo.month
  )
  let dates = firstWeekDates
  let firstWeekCount = firstWeekDates.length
  for (let i = 0; i < 7 - firstWeekCount; i++) {
    const week = dateUtil.getDayOfWeek(+year, +month, lastMonthDatesCount)
    dates.unshift({
      year: prevMonthInfo.year,
      month: prevMonthInfo.month,
      date: lastMonthDatesCount,
      week
    })
    lastMonthDatesCount -= 1
  }
  return dates
}

function getDatesWhenTargetInLastWeek(target, lastWeekDates) {
  const { year, month } = target
  const prevMonthInfo = dateUtil.getNextMonthInfo({ year, month })
  let dates = lastWeekDates
  let lastWeekCount = lastWeekDates.length
  for (let i = 0; i < 7 - lastWeekCount; i++) {
    const week = dateUtil.getDayOfWeek(+year, +month, i + 1)
    dates.push({
      year: prevMonthInfo.year,
      month: prevMonthInfo.month,
      date: i + 1,
      week
    })
  }
  return dates
}

function getDates(target, calendarDates = [], calendarConfig = {}) {
  const { year, month, date } = target
  const targetDay = dateUtil.getDayOfWeek(year, month, date)
  const { firstDayOfWeek } = calendarConfig
  const firstDayOfWeekIsMon = firstDayOfWeek === 'Mon'
  if (firstDayOfWeekIsMon) {
    const startIdx = date - (targetDay || 7)
    return calendarDates.splice(startIdx, 7)
  } else {
    const startIdx = date - targetDay - 1
    return calendarDates.splice(startIdx, 7)
  }
}

function getTargetWeekDates(target, calendarConfig) {
  if (!target) return
  const { year, month } = target
  const calendarDates = dateUtil.calcDates(year, month)
  const firstWeekDates = firstWeekInMonth(target, calendarDates, calendarConfig)
  const lastWeekDates = lastWeekInMonth(target, calendarDates, calendarConfig)
  if (dateIsInDatesRange(target, firstWeekDates)) {
    return getDatesWhenTargetInFirstWeek(target, firstWeekDates)
  } else if (dateIsInDatesRange(target, lastWeekDates)) {
    return getDatesWhenTargetInLastWeek(target, lastWeekDates)
  } else {
    return getDates(target, calendarDates, calendarConfig)
  }
}

/**
 * 计算周视图下当前这一周最后一天
 */
function calculateLastDateOfCurrentWeek(calendarData = {}) {
  const { dates = [] } = calendarData
  return dates[dates.length - 1]
}
/**
 * 计算周视图下当前这一周第一天
 */
function calculateFirstDateOfCurrentWeek(calendarData = {}) {
  const { dates } = calendarData
  return dates[0]
}

/**
 * 计算下一周的日期
 */
function calculateNextWeekDates(calendarData = {}) {
  let { curYear, curMonth } = calendarData
  let calendarDates = []
  let lastDateInThisWeek = calculateLastDateOfCurrentWeek(calendarData)
  const { year: LYear, month: LMonth } = lastDateInThisWeek
  if (curYear !== LYear || curMonth !== LMonth) {
    calendarDates = dateUtil.calcDates(LYear, LMonth)
    curYear = LYear
    curMonth = LMonth
  } else {
    calendarDates = dateUtil.calcDates(curYear, curMonth)
  }
  const lastDateInThisMonth = dateUtil.getDatesCountOfMonth(curYear, curMonth)
  const count = lastDateInThisMonth - lastDateInThisWeek.date
  const lastDateIdx = calendarDates.findIndex(
    date => dateUtil.toTimeStr(date) === dateUtil.toTimeStr(lastDateInThisWeek)
  )
  const startIdx = lastDateIdx + 1
  if (count >= 7) {
    return {
      dates: calendarDates.splice(startIdx, 7),
      year: curYear,
      month: curMonth
    }
  } else {
    const nextMonth = dateUtil.getNextMonthInfo({
      year: curYear,
      month: curMonth
    })
    const { year, month } = nextMonth || {}
    const calendarDatesOfNextMonth = dateUtil.calcDates(year, month)
    const remainDatesOfThisMonth = calendarDates.splice(startIdx)
    const patchDatesOfNextMonth = calendarDatesOfNextMonth.splice(
      0,
      7 - remainDatesOfThisMonth.length
    )
    return {
      dates: [...remainDatesOfThisMonth, ...patchDatesOfNextMonth],
      ...nextMonth
    }
  }
}

/**
 * 计算上一周的日期
 */
function calculatePrevWeekDates(calendarData = {}) {
  let { curYear, curMonth } = calendarData
  let firstDateInThisWeek = calculateFirstDateOfCurrentWeek(calendarData)
  let calendarDates = []
  const { year: FYear, month: FMonth } = firstDateInThisWeek
  if (curYear !== FYear || curMonth !== FMonth) {
    calendarDates = dateUtil.calcDates(FYear, FMonth)
    curYear = FYear
    curMonth = FMonth
  } else {
    calendarDates = dateUtil.calcDates(curYear, curMonth)
  }
  const firstDateIdx = calendarDates.findIndex(
    date => dateUtil.toTimeStr(date) === dateUtil.toTimeStr(firstDateInThisWeek)
  )
  if (firstDateIdx - 7 >= 0) {
    const startIdx = firstDateIdx - 7
    return {
      dates: calendarDates.splice(startIdx, 7),
      year: curYear,
      month: curMonth
    }
  } else {
    const prevMonth = dateUtil.getPrevMonthInfo({
      year: curYear,
      month: curMonth
    })
    const { year, month } = prevMonth || {}
    const calendarDatesOfPrevMonth = dateUtil.calcDates(year, month)
    const remainDatesOfThisMonth = calendarDates.splice(
      0,
      firstDateInThisWeek.date - 1
    )
    const patchDatesOfPrevMonth = calendarDatesOfPrevMonth.splice(
      -(7 - remainDatesOfThisMonth.length)
    )
    return {
      dates: [...patchDatesOfPrevMonth, ...remainDatesOfThisMonth],
      ...prevMonth
    }
  }
}

export default () => {
  return {
    name: 'week',
    beforeRender(calendarData = {}, calendarConfig = {}, component) {
      const { initializedWeekMode, selectedDates } = calendarData
      if (calendarConfig.weekMode && !initializedWeekMode) {
        const { defaultDate } = calendarConfig
        const target =
          (selectedDates && selectedDates[0]) ||
          (defaultDate && dateUtil.transformDateRow2Dict(defaultDate)) ||
          dateUtil.todayFMD()
        const waitRenderData = this.methods(
          component
        ).__calcDatesWhenSwitchView('week', target)
        const { data, config } = waitRenderData || {}
        const setSelectDates = this.methods(
          component
        ).__selectTargetDateWhenJump(target, data.dates, config)
        return {
          calendarData: {
            ...data,
            ...setSelectDates,
            weeksCh: dateUtil.getWeekHeader(calendarConfig.firstDayOfWeek),
            initializedWeekMode: true
          },
          calendarConfig
        }
      }
      return {
        calendarData,
        calendarConfig
      }
    },
    onSwitchCalendar(target = {}, calendarData = {}, component) {
      const { direction } = target
      const { curYear, curMonth } = calendarData
      const calendarConfig = getCalendarConfig(component)
      let waitRenderData = {}
      if (calendarConfig.weekMode) {
        if (direction === 'left') {
          waitRenderData = calculateNextWeekDates(calendarData)
        } else {
          waitRenderData = calculatePrevWeekDates(calendarData)
        }
        const { dates, year, month } = waitRenderData
        return {
          ...calendarData,
          dates,
          curYear: year || curYear,
          curMonth: month || curMonth
        }
      }
      return calendarData
    },
    methods(component) {
      return {
        __selectTargetDateWhenJump: (target = {}, dates = [], config = {}) => {
          let selectedDate = target
          const weekDates = dates.map((date, idx) => {
            const tmp = { ...date }
            tmp.id = idx
            const isTarget =
              dateUtil.toTimeStr(target) === dateUtil.toTimeStr(tmp)
            if (isTarget && !target.choosed && config.autoChoosedWhenJump) {
              tmp.choosed = true
              selectedDate = tmp
            }
            return tmp
          })
          return {
            dates: weekDates,
            selectedDates: [selectedDate]
          }
        },
        __calcDatesForWeekMode(target, config = {}, calendarData = {}) {
          const { year, month } = target || {}
          const weekDates = getTargetWeekDates(target, config)
          weekDates.forEach((date, idx) => (date.id = idx))
          return {
            data: {
              ...calendarData,
              prevMonthGrids: null,
              nextMonthGrids: null,
              dates: weekDates,
              curYear: year,
              curMonth: month
            },
            config: {
              ...config,
              weekMode: true
            }
          }
        },
        __calcDatesForMonthMode(target, config = {}, calendarData = {}) {
          const { year, month } = target || {}
          const waitRenderData = calcJumpData({
            dateInfo: target,
            config
          })
          return {
            data: {
              ...calendarData,
              ...waitRenderData,
              curYear: year,
              curMonth: month
            },
            config: {
              ...config,
              weekMode: false
            }
          }
        },
        /**
         * 周、月视图切换
         * @param {string} view  视图 [week, month]
         * @param {object} target
         */
        __calcDatesWhenSwitchView: (view, target) => {
          const calendarConfig = getCalendarConfig(component)
          if (calendarConfig.multi)
            return logger.warn('多选模式不能切换周月视图')
          const existCalendarData = getCalendarData('calendar', component) || {}
          const {
            selectedDates = [],
            dates = [],
            curYear,
            curMonth
          } = existCalendarData
          const currentMonthSelected = selectedDates.filter(
            item => curYear === +item.year || curMonth === +item.month
          )
          let jumpTarget = {}
          if (target) {
            jumpTarget = target
          } else {
            if (currentMonthSelected.length) {
              jumpTarget = currentMonthSelected.pop()
            } else {
              jumpTarget = dates[0]
            }
          }
          if (view === 'week') {
            return this.methods(component).__calcDatesForWeekMode(
              jumpTarget,
              calendarConfig,
              existCalendarData
            )
          } else {
            return this.methods(component).__calcDatesForMonthMode(
              jumpTarget,
              calendarConfig,
              existCalendarData
            )
          }
        },
        weekModeJump: dateInfo => {
          const target = dateInfo || dateUtil.todayFMD()
          const existCalendarData = getCalendarData('calendar', component) || {}
          const waitRenderData = this.methods(
            component
          ).__calcDatesWhenSwitchView('week', target)
          const { data, config } = waitRenderData || {}
          const setSelectDates = this.methods(
            component
          ).__selectTargetDateWhenJump(target, data.dates, config)
          return renderCalendar.call(
            component,
            {
              ...existCalendarData,
              ...data,
              ...setSelectDates
            },
            config
          )
        },
        switchView: (view, target) => {
          const waitRenderData = this.methods(
            component
          ).__calcDatesWhenSwitchView(view, target)
          const { data, config } = waitRenderData || {}
          if (!data) return logger.warn('当前状态不能切换为周视图')
          return renderCalendar.call(component, data, config)
        }
      }
    }
  }
}