@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-picker/generate/dateFns.ts

@@ -0,0 +1,140 @@
+import {
+  addDays,
+  addMonths,
+  addYears,
+  endOfMonth,
+  format as formatDate,
+  getDate,
+  getDay,
+  getHours,
+  getMinutes,
+  getMonth,
+  getSeconds,
+  getWeek,
+  getYear,
+  isAfter,
+  isDate,
+  isMatch,
+  isValid,
+  parse as parseDate,
+  setDate,
+  setHours,
+  setMinutes,
+  setMonth,
+  setSeconds,
+  setYear,
+  startOfWeek,
+} from 'date-fns'
+import * as Locale from 'date-fns/locale'
+
+import type { GenerateConfig } from '.'
+
+const dealLocal = (str: string) => {
+  return str.replace(/_/g, '')
+}
+
+const localeParse = (format: string) => {
+  return format
+    .replace(/Y/g, 'y')
+    .replace(/D/g, 'd')
+    .replace(/gggg/, 'yyyy')
+    .replace(/g/g, 'G')
+    .replace(/([Ww])o/g, 'wo')
+}
+
+const generateConfig: GenerateConfig<Date> = {
+  // get
+  getNow: () => new Date(),
+  getFixedDate: (string) => new Date(string),
+  getEndDate: (date) => endOfMonth(date),
+  getWeekDay: (date) => getDay(date),
+  getYear: (date) => getYear(date),
+  getMonth: (date) => getMonth(date),
+  getDate: (date) => getDate(date),
+  getHour: (date) => getHours(date),
+  getMinute: (date) => getMinutes(date),
+  getSecond: (date) => getSeconds(date),
+
+  // set
+  addYear: (date, diff) => addYears(date, diff),
+  addMonth: (date, diff) => addMonths(date, diff),
+  addDate: (date, diff) => addDays(date, diff),
+  setYear: (date, year) => setYear(date, year),
+  setMonth: (date, month) => setMonth(date, month),
+  setDate: (date, num) => setDate(date, num),
+  setHour: (date, hour) => setHours(date, hour),
+  setMinute: (date, minute) => setMinutes(date, minute),
+  setSecond: (date, second) => setSeconds(date, second),
+
+  // Compare
+  isAfter: (date1, date2) => isAfter(date1, date2),
+  isValidate: (date) => isValid(date),
+
+  locale: {
+    getWeekFirstDay: (locale) => {
+      const clone = Locale[dealLocal(locale)]
+      return clone.options.weekStartsOn
+    },
+    getWeekFirstDate: (locale, date) => {
+      return startOfWeek(date, { locale: Locale[dealLocal(locale)] })
+    },
+    getWeek: (locale, date) => {
+      return getWeek(date, { locale: Locale[dealLocal(locale)] })
+    },
+    getShortWeekDays: (locale) => {
+      const clone = Locale[dealLocal(locale)]
+      return Array.from({ length: 7 }).map((_, i) => clone.localize.day(i, { width: 'short' }))
+    },
+    getShortMonths: (locale) => {
+      const clone = Locale[dealLocal(locale)]
+      return Array.from({ length: 12 }).map((_, i) =>
+        clone.localize.month(i, { width: 'abbreviated' }),
+      )
+    },
+    format: (locale, date, format) => {
+      if (!isValid(date)) {
+        return null
+      }
+      return formatDate(date, localeParse(format), {
+        locale: Locale[dealLocal(locale)],
+      })
+    },
+    parse: (locale, text, formats) => {
+      for (let i = 0; i < formats.length; i += 1) {
+        const format = localeParse(formats[i])
+        const formatText = text
+        const date = parseDate(formatText, format, new Date(), {
+          locale: Locale[dealLocal(locale)],
+        })
+        if (isValid(date) && formatText.length === format.length && isMatch(formatText, format)) {
+          return date
+        }
+      }
+      return null
+    },
+  },
+  toDate: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        typeof val === 'string' && val ? parseDate(val, valueFormat, new Date()) : val || null,
+      ) as Date[]
+    } else {
+      return (
+        typeof value === 'string' && value
+          ? parseDate(value, valueFormat, new Date())
+          : value || null
+      ) as Date
+    }
+  },
+  toString: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        isDate(val) ? formatDate(val as Date, valueFormat) : val,
+      ) as string[]
+    } else {
+      return (isDate(value) ? formatDate(value as Date, valueFormat) : value) as string
+    }
+  },
+}
+
+export default generateConfig

package/src/vc-picker/generate/dayjs.ts

@@ -0,0 +1,250 @@
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import advancedFormat from 'dayjs/plugin/advancedFormat'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import localeData from 'dayjs/plugin/localeData'
+import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import weekYear from 'dayjs/plugin/weekYear'
+import weekday from 'dayjs/plugin/weekday'
+
+import type { GenerateConfig } from '.'
+import { noteOnce } from '../../vc-util/warning'
+
+dayjs.extend(customParseFormat)
+dayjs.extend(advancedFormat)
+dayjs.extend(weekday)
+dayjs.extend(localeData)
+dayjs.extend(weekOfYear)
+dayjs.extend(weekYear)
+dayjs.extend(quarterOfYear)
+
+dayjs.extend((_o, c) => {
+  // todo support Wo (ISO week)
+  const proto = c.prototype
+  const oldFormat = proto.format
+  proto.format = function f(formatStr: string) {
+    const str = (formatStr || '').replace('Wo', 'wo')
+    return oldFormat.bind(this)(str)
+  }
+})
+
+type IlocaleMapObject = Record<string, string>
+const localeMap: IlocaleMapObject = {
+  // ar_EG:
+  // az_AZ:
+  // bg_BG:
+  bn_BD: 'bn-bd',
+  by_BY: 'be',
+  // ca_ES:
+  // cs_CZ:
+  // da_DK:
+  // de_DE:
+  // el_GR:
+  en_GB: 'en-gb',
+  en_US: 'en',
+  // es_ES:
+  // et_EE:
+  // fa_IR:
+  // fi_FI:
+  fr_BE: 'fr', // todo: dayjs has no fr_BE locale, use fr at present
+  fr_CA: 'fr-ca',
+  // fr_FR:
+  // ga_IE:
+  // gl_ES:
+  // he_IL:
+  // hi_IN:
+  // hr_HR:
+  // hu_HU:
+  hy_AM: 'hy-am',
+  // id_ID:
+  // is_IS:
+  // it_IT:
+  // ja_JP:
+  // ka_GE:
+  // kk_KZ:
+  // km_KH:
+  kmr_IQ: 'ku',
+  // kn_IN:
+  // ko_KR:
+  // ku_IQ: // previous ku in antd
+  // lt_LT:
+  // lv_LV:
+  // mk_MK:
+  // ml_IN:
+  // mn_MN:
+  // ms_MY:
+  // nb_NO:
+  // ne_NP:
+  nl_BE: 'nl-be',
+  // nl_NL:
+  // pl_PL:
+  pt_BR: 'pt-br',
+  // pt_PT:
+  // ro_RO:
+  // ru_RU:
+  // sk_SK:
+  // sl_SI:
+  // sr_RS:
+  // sv_SE:
+  // ta_IN:
+  // th_TH:
+  // tr_TR:
+  // uk_UA:
+  // ur_PK:
+  // vi_VN:
+  zh_CN: 'zh-cn',
+  zh_HK: 'zh-hk',
+  zh_TW: 'zh-tw',
+}
+
+const parseLocale = (locale: string) => {
+  const mapLocale = localeMap[locale]
+  return mapLocale || locale.split('_')[0]
+}
+
+const parseNoMatchNotice = () => {
+  /* istanbul ignore next */
+  noteOnce(false, 'Not match any format. Please help to fire a issue about this.')
+}
+
+const advancedFormatRegex = /\[([^\]]+)\]|Q|wo|ww|w|WW|W|zzz|[zS]|gggg|GGGG|k{1,2}/g
+
+function findTargetStr(val: string, index: number, segmentation: string) {
+  const items = [...new Set(val.split(segmentation))]
+  let idx = 0
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    idx += item.length
+    if (idx > index) {
+      return item
+    }
+    idx += segmentation.length
+  }
+}
+
+const toDateWithValueFormat = (val: string | Dayjs, valueFormat: string) => {
+  if (!val) return null
+  if (dayjs.isDayjs(val)) {
+    return val
+  }
+  const matchs = valueFormat.matchAll(advancedFormatRegex)
+  let baseDate = dayjs(val, valueFormat)
+  if (matchs === null) {
+    return baseDate
+  }
+  for (const match of matchs) {
+    const origin = match[0]
+    const index = match.index
+
+    if (origin === 'Q') {
+      const segmentation = val.slice(index - 1, index)
+      const quarterStr = findTargetStr(val, index, segmentation).match(/\d+/)[0]
+      baseDate = baseDate.quarter(Number.parseInt(quarterStr))
+    }
+
+    if (origin.toLowerCase() === 'wo') {
+      const segmentation = val.slice(index - 1, index)
+      const weekStr = findTargetStr(val, index, segmentation).match(/\d+/)[0]
+      baseDate = baseDate.week(Number.parseInt(weekStr))
+    }
+
+    if (origin.toLowerCase() === 'ww') {
+      baseDate = baseDate.week(Number.parseInt(val.slice(index, index + origin.length)))
+    }
+
+    if (origin.toLowerCase() === 'w') {
+      baseDate = baseDate.week(Number.parseInt(val.slice(index, index + origin.length + 1)))
+    }
+  }
+
+  return baseDate
+}
+
+const generateConfig: GenerateConfig<Dayjs> = {
+  // get
+  getNow: () => dayjs(),
+  getFixedDate: (string) => dayjs(string, ['YYYY-M-DD', 'YYYY-MM-DD']),
+  getEndDate: (date) => date.endOf('month'),
+  getWeekDay: (date) => {
+    const clone = date.locale('en')
+    return clone.weekday() + clone.localeData().firstDayOfWeek()
+  },
+  getYear: (date) => date.year(),
+  getMonth: (date) => date.month(),
+  getDate: (date) => date.date(),
+  getHour: (date) => date.hour(),
+  getMinute: (date) => date.minute(),
+  getSecond: (date) => date.second(),
+
+  // set
+  addYear: (date, diff) => date.add(diff, 'year'),
+  addMonth: (date, diff) => date.add(diff, 'month'),
+  addDate: (date, diff) => date.add(diff, 'day'),
+  setYear: (date, year) => date.year(year),
+  setMonth: (date, month) => date.month(month),
+  setDate: (date, num) => date.date(num),
+  setHour: (date, hour) => date.hour(hour),
+  setMinute: (date, minute) => date.minute(minute),
+  setSecond: (date, second) => date.second(second),
+
+  // Compare
+  isAfter: (date1, date2) => date1.isAfter(date2),
+  isValidate: (date) => date.isValid(),
+
+  locale: {
+    getWeekFirstDay: (locale) => dayjs().locale(parseLocale(locale)).localeData().firstDayOfWeek(),
+    getWeekFirstDate: (locale, date) => date.locale(parseLocale(locale)).weekday(0),
+    getWeek: (locale, date) => date.locale(parseLocale(locale)).week(),
+    getShortWeekDays: (locale) => dayjs().locale(parseLocale(locale)).localeData().weekdaysMin(),
+    getShortMonths: (locale) => dayjs().locale(parseLocale(locale)).localeData().monthsShort(),
+    format: (locale, date, format) => date.locale(parseLocale(locale)).format(format),
+    parse: (locale, text, formats) => {
+      const localeStr = parseLocale(locale)
+      for (let i = 0; i < formats.length; i += 1) {
+        const format = formats[i]
+        const formatText = text
+        if (format.includes('wo') || format.includes('Wo')) {
+          // parse Wo
+          const year = formatText.split('-')[0]
+          const weekStr = formatText.split('-')[1]
+          const firstWeek = dayjs(year, 'YYYY').startOf('year').locale(localeStr)
+          for (let j = 0; j <= 52; j += 1) {
+            const nextWeek = firstWeek.add(j, 'week')
+            if (nextWeek.format('Wo') === weekStr) {
+              return nextWeek
+            }
+          }
+          parseNoMatchNotice()
+          return null
+        }
+        const date = dayjs(formatText, format, true).locale(localeStr)
+        if (date.isValid()) {
+          return date
+        }
+      }
+
+      if (!text) {
+        parseNoMatchNotice()
+      }
+      return null
+    },
+  },
+
+  toDate: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) => toDateWithValueFormat(val, valueFormat)) as Dayjs[]
+    } else {
+      return toDateWithValueFormat(value, valueFormat) as Dayjs
+    }
+  },
+  toString: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) => (dayjs.isDayjs(val) ? val.format(valueFormat) : val))
+    } else {
+      return dayjs.isDayjs(value) ? value.format(valueFormat) : value
+    }
+  },
+}
+
+export default generateConfig

package/src/vc-picker/generate/index.ts

@@ -0,0 +1,52 @@
+export interface GenerateConfig<DateType> {
+  // Get
+  getWeekDay: (value: DateType) => number
+  getSecond: (value: DateType) => number
+  getMinute: (value: DateType) => number
+  getHour: (value: DateType) => number
+  getDate: (value: DateType) => number
+  getMonth: (value: DateType) => number
+  getYear: (value: DateType) => number
+  getNow: () => DateType
+  getFixedDate: (fixed: string) => DateType
+  getEndDate: (value: DateType) => DateType
+
+  // Set
+  addYear: (value: DateType, diff: number) => DateType
+  addMonth: (value: DateType, diff: number) => DateType
+  addDate: (value: DateType, diff: number) => DateType
+  setYear: (value: DateType, year: number) => DateType
+  setMonth: (value: DateType, month: number) => DateType
+  setDate: (value: DateType, date: number) => DateType
+  setHour: (value: DateType, hour: number) => DateType
+  setMinute: (value: DateType, minute: number) => DateType
+  setSecond: (value: DateType, second: number) => DateType
+
+  // Compare
+  isAfter: (date1: DateType, date2: DateType) => boolean
+  isValidate: (date: DateType) => boolean
+
+  toDate: (
+    value: string | string[] | DateType | DateType[],
+    valueFormat: string,
+  ) => DateType | DateType[]
+  toString: (
+    value: string | string[] | DateType | DateType[],
+    valueFormat: string,
+  ) => string | string[]
+  locale: {
+    getWeekFirstDay: (locale: string) => number
+    getWeekFirstDate: (locale: string, value: DateType) => DateType
+    getWeek: (locale: string, value: DateType) => number
+
+    format: (locale: string, date: DateType, format: string) => string
+
+    /** Should only return validate date instance */
+    parse: (locale: string, text: string, formats: string[]) => DateType | null
+
+    /** A proxy for getting locale with moment or other locale library */
+    getShortWeekDays?: (locale: string) => string[]
+    /** A proxy for getting locale with moment or other locale library */
+    getShortMonths?: (locale: string) => string[]
+  }
+}

package/src/vc-picker/generate/moment.ts

@@ -0,0 +1,159 @@
+import type { Moment } from 'moment'
+import moment from 'moment'
+
+import type { GenerateConfig } from '.'
+import { noteOnce } from '../../vc-util/warning'
+
+const generateConfig: GenerateConfig<Moment> = {
+  // get
+  getNow: () => moment(),
+  getFixedDate: (string) => moment(string, 'YYYY-MM-DD'),
+  getEndDate: (date) => {
+    const clone = date.clone()
+    return clone.endOf('month')
+  },
+  getWeekDay: (date) => {
+    const clone = date.clone().locale('en_US')
+    return clone.weekday() + clone.localeData().firstDayOfWeek()
+  },
+  getYear: (date) => date.year(),
+  getMonth: (date) => date.month(),
+  getDate: (date) => date.date(),
+  getHour: (date) => date.hour(),
+  getMinute: (date) => date.minute(),
+  getSecond: (date) => date.second(),
+
+  // set
+  addYear: (date, diff) => {
+    const clone = date.clone()
+    return clone.add(diff, 'year')
+  },
+  addMonth: (date, diff) => {
+    const clone = date.clone()
+    return clone.add(diff, 'month')
+  },
+  addDate: (date, diff) => {
+    const clone = date.clone()
+    return clone.add(diff, 'day')
+  },
+  setYear: (date, year) => {
+    const clone = date.clone()
+    return clone.year(year)
+  },
+  setMonth: (date, month) => {
+    const clone = date.clone()
+    return clone.month(month)
+  },
+  setDate: (date, num) => {
+    const clone = date.clone()
+    return clone.date(num)
+  },
+  setHour: (date, hour) => {
+    const clone = date.clone()
+    return clone.hour(hour)
+  },
+  setMinute: (date, minute) => {
+    const clone = date.clone()
+    return clone.minute(minute)
+  },
+  setSecond: (date, second) => {
+    const clone = date.clone()
+    return clone.second(second)
+  },
+
+  // Compare
+  isAfter: (date1, date2) => date1.isAfter(date2),
+  isValidate: (date) => date.isValid(),
+
+  locale: {
+    getWeekFirstDay: (locale) => {
+      const date = moment().locale(locale)
+      return date.localeData().firstDayOfWeek()
+    },
+    getWeekFirstDate: (locale, date) => {
+      const clone = date.clone()
+      const result = clone.locale(locale)
+      return result.weekday(0)
+    },
+    getWeek: (locale, date) => {
+      const clone = date.clone()
+      const result = clone.locale(locale)
+      return result.week()
+    },
+    getShortWeekDays: (locale) => {
+      const date = moment().locale(locale)
+      return date.localeData().weekdaysMin()
+    },
+    getShortMonths: (locale) => {
+      const date = moment().locale(locale)
+      return date.localeData().monthsShort()
+    },
+    format: (locale, date, format) => {
+      const clone = date.clone()
+      const result = clone.locale(locale)
+      return result.format(format)
+    },
+    parse: (locale, text, formats) => {
+      const fallbackFormatList: string[] = []
+
+      for (let i = 0; i < formats.length; i += 1) {
+        let format = formats[i]
+        let formatText = text
+
+        if (format.includes('wo') || format.includes('Wo')) {
+          format = format.replace(/wo/g, 'w').replace(/Wo/g, 'W')
+          const matchFormat = format.match(/[-YMDHSWG]+/gi)
+          const matchText = formatText.match(/[-\d]+/g)
+
+          if (matchFormat && matchText) {
+            format = matchFormat.join('')
+            formatText = matchText.join('')
+          } else {
+            fallbackFormatList.push(format.replace(/o/g, ''))
+          }
+        }
+
+        const date = moment(formatText, format, locale, true)
+        if (date.isValid()) {
+          return date
+        }
+      }
+
+      // Fallback to fuzzy matching, this should always not reach match or need fire a issue
+      for (let i = 0; i < fallbackFormatList.length; i += 1) {
+        const date = moment(text, fallbackFormatList[i], locale, false)
+
+        /* istanbul ignore next */
+        if (date.isValid()) {
+          noteOnce(
+            false,
+            'Not match any format strictly and fallback to fuzzy match. Please help to fire a issue about this.',
+          )
+          return date
+        }
+      }
+
+      return null
+    },
+  },
+  toDate: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) =>
+        typeof val === 'string' && val ? moment(val, valueFormat) : val || null,
+      ) as Moment[]
+    } else {
+      return (
+        typeof value === 'string' && value ? moment(value, valueFormat) : value || null
+      ) as Moment
+    }
+  },
+  toString: (value, valueFormat) => {
+    if (Array.isArray(value)) {
+      return value.map((val: any) => (moment.isMoment(val) ? val.format(valueFormat) : val))
+    } else {
+      return moment.isMoment(value) ? value.format(valueFormat) : value
+    }
+  },
+}
+
+export default generateConfig

package/src/vc-picker/hooks/useCellClassName.ts

@@ -0,0 +1,97 @@
+import type { GenerateConfig } from '../generate'
+import type { NullableDateType, RangeValue } from '../interface'
+import { isInRange } from '../utils/dateUtil'
+import { getValue } from '../utils/miscUtil'
+
+export default function useCellClassName<DateType>({
+  cellPrefixCls,
+  generateConfig,
+  rangedValue,
+  hoverRangedValue,
+  isInView,
+  isSameCell,
+  offsetCell,
+  today,
+  value,
+}: {
+  cellPrefixCls: string
+  generateConfig: GenerateConfig<DateType>
+  isSameCell: (current: NullableDateType<DateType>, target: NullableDateType<DateType>) => boolean
+  offsetCell: (date: DateType, offset: number) => DateType
+  isInView: (date: DateType) => boolean
+  rangedValue?: RangeValue<DateType>
+  hoverRangedValue?: RangeValue<DateType>
+  today?: NullableDateType<DateType>
+  value?: NullableDateType<DateType>
+}) {
+  function getClassName(currentDate: DateType) {
+    const prevDate = offsetCell(currentDate, -1)
+    const nextDate = offsetCell(currentDate, 1)
+
+    const rangeStart = getValue(rangedValue, 0)
+    const rangeEnd = getValue(rangedValue, 1)
+
+    const hoverStart = getValue(hoverRangedValue, 0)
+    const hoverEnd = getValue(hoverRangedValue, 1)
+
+    const isRangeHovered = isInRange(generateConfig, hoverStart, hoverEnd, currentDate)
+
+    function isRangeStart(date: DateType) {
+      return isSameCell(rangeStart, date)
+    }
+    function isRangeEnd(date: DateType) {
+      return isSameCell(rangeEnd, date)
+    }
+    const isHoverStart = isSameCell(hoverStart, currentDate)
+    const isHoverEnd = isSameCell(hoverEnd, currentDate)
+
+    const isHoverEdgeStart =
+      (isRangeHovered || isHoverEnd) && (!isInView(prevDate) || isRangeEnd(prevDate))
+    const isHoverEdgeEnd =
+      (isRangeHovered || isHoverStart) && (!isInView(nextDate) || isRangeStart(nextDate))
+
+    return {
+      // In view
+      [`${cellPrefixCls}-in-view`]: isInView(currentDate),
+
+      // Range
+      [`${cellPrefixCls}-in-range`]: isInRange<DateType>(
+        generateConfig,
+        rangeStart,
+        rangeEnd,
+        currentDate,
+      ),
+      [`${cellPrefixCls}-range-start`]: isRangeStart(currentDate),
+      [`${cellPrefixCls}-range-end`]: isRangeEnd(currentDate),
+      [`${cellPrefixCls}-range-start-single`]: isRangeStart(currentDate) && !rangeEnd,
+      [`${cellPrefixCls}-range-end-single`]: isRangeEnd(currentDate) && !rangeStart,
+      [`${cellPrefixCls}-range-start-near-hover`]:
+        isRangeStart(currentDate) &&
+        (isSameCell(prevDate, hoverStart) ||
+          isInRange(generateConfig, hoverStart, hoverEnd, prevDate)),
+      [`${cellPrefixCls}-range-end-near-hover`]:
+        isRangeEnd(currentDate) &&
+        (isSameCell(nextDate, hoverEnd) ||
+          isInRange(generateConfig, hoverStart, hoverEnd, nextDate)),
+
+      // Range Hover
+      [`${cellPrefixCls}-range-hover`]: isRangeHovered,
+      [`${cellPrefixCls}-range-hover-start`]: isHoverStart,
+      [`${cellPrefixCls}-range-hover-end`]: isHoverEnd,
+
+      // Range Edge
+      [`${cellPrefixCls}-range-hover-edge-start`]: isHoverEdgeStart,
+      [`${cellPrefixCls}-range-hover-edge-end`]: isHoverEdgeEnd,
+      [`${cellPrefixCls}-range-hover-edge-start-near-range`]:
+        isHoverEdgeStart && isSameCell(prevDate, rangeEnd),
+      [`${cellPrefixCls}-range-hover-edge-end-near-range`]:
+        isHoverEdgeEnd && isSameCell(nextDate, rangeStart),
+
+      // Others
+      [`${cellPrefixCls}-today`]: isSameCell(today, currentDate),
+      [`${cellPrefixCls}-selected`]: isSameCell(value, currentDate),
+    }
+  }
+
+  return getClassName
+}