@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/calendar/content.tsx

@@ -1,87 +1,87 @@
-import React, { FC } from 'react'
-import moment, { Moment } from 'moment'
-import _ from 'lodash'
-import Day from './day'
-
-interface ContentProps {
-  /* 开始日期 */
-  begin: Moment | null
-  /* 结束日期 */
-  end: Moment | null
-  /* 选中日期 */
-  onSelect(date: Moment): void
-  /* 键盘用 */
-  will: Moment
-  /* 最小可选日期 */
-  min?: Date
-  /* 最大可选日期 */
-  max?: Date
-  /* 自定义可选日期 */
-  disabledDate?(date: Date, options: { begin?: Date | null; end?: Date | null }): boolean
-  /* 当前鼠标hover日期 */
-  hoverDay?: Moment | null
-  /* 鼠标hover日期修改函数 */
-  onHoverDay?(date: Moment | null): void
-}
-
-const Content: FC<ContentProps> = (props) => {
-  const { begin, end, onSelect, will, hoverDay, onHoverDay } = props
-
-  const day = moment(will).startOf('month').day(0).add(-1, 'day')
-
-  const group = _.groupBy(_.range(42), (v) => parseInt(`${v / 7}`))
-
-  const isDisabledDay = (m: Moment): boolean => {
-    const { disabledDate } = props
-    let min: Moment | null = null
-    if (props.min) {
-      min = moment(props.min).startOf('day')
-    }
-    let max: Moment | null = null
-    if (props.max) {
-      max = moment(props.max).startOf('day')
-    }
-    let disabled = false
-    if (disabledDate) {
-      disabled = disabledDate(m.toDate(), {
-        begin: begin && begin.toDate(),
-        end: end && end.toDate(),
-      })
-    } else {
-      if (min && m < min) {
-        disabled = true
-      }
-      if (max && m > max) {
-        disabled = true
-      }
-    }
-    return disabled
-  }
-
-  return (
-    <div className='gm-calendar-content'>
-      {_.map(group, (v, i) => (
-        <div key={i} className='gm-calendar-content-div'>
-          {_.map(v, (_, index) => {
-            const mm = moment(day.add(1, 'day'))
-            return (
-              <Day
-                key={index}
-                value={mm}
-                begin={begin}
-                end={end}
-                disabled={isDisabledDay(mm)}
-                onClick={onSelect}
-                will={will}
-                hoverDay={hoverDay}
-                onHoverDay={onHoverDay}
-              />
-            )
-          })}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default Content
+import React, { FC } from 'react'
+import moment, { Moment } from 'moment'
+import _ from 'lodash'
+import Day from './day'
+
+interface ContentProps {
+  /* 开始日期 */
+  begin: Moment | null
+  /* 结束日期 */
+  end: Moment | null
+  /* 选中日期 */
+  onSelect(date: Moment): void
+  /* 键盘用 */
+  will: Moment
+  /* 最小可选日期 */
+  min?: Date
+  /* 最大可选日期 */
+  max?: Date
+  /* 自定义可选日期 */
+  disabledDate?(date: Date, options: { begin?: Date | null; end?: Date | null }): boolean
+  /* 当前鼠标hover日期 */
+  hoverDay?: Moment | null
+  /* 鼠标hover日期修改函数 */
+  onHoverDay?(date: Moment | null): void
+}
+
+const Content: FC<ContentProps> = (props) => {
+  const { begin, end, onSelect, will, hoverDay, onHoverDay } = props
+
+  const day = moment(will).startOf('month').day(0).add(-1, 'day')
+
+  const group = _.groupBy(_.range(42), (v) => parseInt(`${v / 7}`))
+
+  const isDisabledDay = (m: Moment): boolean => {
+    const { disabledDate } = props
+    let min: Moment | null = null
+    if (props.min) {
+      min = moment(props.min).startOf('day')
+    }
+    let max: Moment | null = null
+    if (props.max) {
+      max = moment(props.max).startOf('day')
+    }
+    let disabled = false
+    if (disabledDate) {
+      disabled = disabledDate(m.toDate(), {
+        begin: begin && begin.toDate(),
+        end: end && end.toDate(),
+      })
+    } else {
+      if (min && m < min) {
+        disabled = true
+      }
+      if (max && m > max) {
+        disabled = true
+      }
+    }
+    return disabled
+  }
+
+  return (
+    <div className='gm-calendar-content'>
+      {_.map(group, (v, i) => (
+        <div key={i} className='gm-calendar-content-div'>
+          {_.map(v, (_, index) => {
+            const mm = moment(day.add(1, 'day'))
+            return (
+              <Day
+                key={index}
+                value={mm}
+                begin={begin}
+                end={end}
+                disabled={isDisabledDay(mm)}
+                onClick={onSelect}
+                will={will}
+                hoverDay={hoverDay}
+                onHoverDay={onHoverDay}
+              />
+            )
+          })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Content

package/src/component/calendar/day.tsx

@@ -1,106 +1,106 @@
-import React, { FC, MouseEvent } from 'react'
-import classNames from 'classnames'
-import moment, { Moment } from 'moment'
-
-interface DayProps {
-  /* 日期值 */
-  value: Moment
-  /* 开始日期 */
-  begin: Moment | null
-  /* 结束日期 */
-  end: Moment | null
-  onClick(value: Moment): void
-  disabled: boolean
-  /* 键盘用 */
-  will: Moment
-  /* 当前鼠标hover日期 */
-  hoverDay?: Moment | null
-  onHoverDay?(value: Moment | null): void
-}
-
-const Day: FC<DayProps> = ({
-  disabled,
-  onClick,
-  value,
-  will,
-  begin,
-  end,
-  hoverDay,
-  onHoverDay,
-}) => {
-  const handleClick = (): void => {
-    if (disabled) {
-      return
-    }
-    onClick(value)
-  }
-
-  const handleMouseOver = (event: MouseEvent<HTMLSpanElement>): void => {
-    if (!onHoverDay) {
-      return
-    }
-    // 获取鼠标所在hover值
-    const day = (event.target as HTMLSpanElement).innerText
-    if (day && ((begin && !end) || (!begin && end))) {
-      !disabled && onHoverDay(moment(value))
-    } else {
-      onHoverDay(null)
-    }
-  }
-
-  const nowStart = +moment().startOf('day')
-  const valueStart = +value.startOf('day')
-  const beginStart = begin ? +begin.startOf('day') : null
-  const endStart = end ? +end.startOf('day') : null
-  const willStart = +will.startOf('day')
-  const hoverStart = hoverDay ? +hoverDay.startOf('day') : null
-
-  const isActive = (): boolean => {
-    if (beginStart && endStart) {
-      return beginStart <= valueStart && valueStart <= endStart
-    } else if (begin) {
-      return beginStart === valueStart
-    } else if (end) {
-      return endStart === valueStart
-    }
-    return false
-  }
-
-  const isHover = (): boolean => {
-    if ((begin && end) || !hoverStart) {
-      return false
-    } else {
-      const date = +moment(begin! ?? end!).startOf('day')
-      const min = date < hoverStart ? date : hoverStart
-      const max = date > hoverStart ? date : hoverStart
-      return min < valueStart && valueStart < max
-    }
-  }
-
-  const cn = classNames('gm-calendar-day', {
-    // 无状态
-    'gm-calendar-day-old': will.month() > value.month(),
-    'gm-calendar-day-new': will.month() < value.month(),
-    'gm-calendar-day-now': nowStart === valueStart,
-    // 键盘
-    'gm-calendar-day-will': willStart === valueStart,
-    // 选中日期中间态
-    active: isActive(),
-    'gm-calendar-day-begin': beginStart === valueStart,
-    'gm-calendar-day-end': endStart === valueStart,
-    // hover日期中间态
-    'gm-calendar-day-hover': isHover(),
-    'gm-calendar-day-hover-end':
-      ((begin && !end) || (!begin && end)) && hoverStart === valueStart,
-    // 不可用
-    disabled,
-  })
-
-  return (
-    <span className={cn} onClick={handleClick} onMouseOver={handleMouseOver}>
-      {value.date()}
-    </span>
-  )
-}
-
-export default Day
+import React, { FC, MouseEvent } from 'react'
+import classNames from 'classnames'
+import moment, { Moment } from 'moment'
+
+interface DayProps {
+  /* 日期值 */
+  value: Moment
+  /* 开始日期 */
+  begin: Moment | null
+  /* 结束日期 */
+  end: Moment | null
+  onClick(value: Moment): void
+  disabled: boolean
+  /* 键盘用 */
+  will: Moment
+  /* 当前鼠标hover日期 */
+  hoverDay?: Moment | null
+  onHoverDay?(value: Moment | null): void
+}
+
+const Day: FC<DayProps> = ({
+  disabled,
+  onClick,
+  value,
+  will,
+  begin,
+  end,
+  hoverDay,
+  onHoverDay,
+}) => {
+  const handleClick = (): void => {
+    if (disabled) {
+      return
+    }
+    onClick(value)
+  }
+
+  const handleMouseOver = (event: MouseEvent<HTMLSpanElement>): void => {
+    if (!onHoverDay) {
+      return
+    }
+    // 获取鼠标所在hover值
+    const day = (event.target as HTMLSpanElement).innerText
+    if (day && ((begin && !end) || (!begin && end))) {
+      !disabled && onHoverDay(moment(value))
+    } else {
+      onHoverDay(null)
+    }
+  }
+
+  const nowStart = +moment().startOf('day')
+  const valueStart = +value.startOf('day')
+  const beginStart = begin ? +begin.startOf('day') : null
+  const endStart = end ? +end.startOf('day') : null
+  const willStart = +will.startOf('day')
+  const hoverStart = hoverDay ? +hoverDay.startOf('day') : null
+
+  const isActive = (): boolean => {
+    if (beginStart && endStart) {
+      return beginStart <= valueStart && valueStart <= endStart
+    } else if (begin) {
+      return beginStart === valueStart
+    } else if (end) {
+      return endStart === valueStart
+    }
+    return false
+  }
+
+  const isHover = (): boolean => {
+    if ((begin && end) || !hoverStart) {
+      return false
+    } else {
+      const date = +moment(begin! ?? end!).startOf('day')
+      const min = date < hoverStart ? date : hoverStart
+      const max = date > hoverStart ? date : hoverStart
+      return min < valueStart && valueStart < max
+    }
+  }
+
+  const cn = classNames('gm-calendar-day', {
+    // 无状态
+    'gm-calendar-day-old': will.month() > value.month(),
+    'gm-calendar-day-new': will.month() < value.month(),
+    'gm-calendar-day-now': nowStart === valueStart,
+    // 键盘
+    'gm-calendar-day-will': willStart === valueStart,
+    // 选中日期中间态
+    active: isActive(),
+    'gm-calendar-day-begin': beginStart === valueStart,
+    'gm-calendar-day-end': endStart === valueStart,
+    // hover日期中间态
+    'gm-calendar-day-hover': isHover(),
+    'gm-calendar-day-hover-end':
+      ((begin && !end) || (!begin && end)) && hoverStart === valueStart,
+    // 不可用
+    disabled,
+  })
+
+  return (
+    <span className={cn} onClick={handleClick} onMouseOver={handleMouseOver}>
+      {value.date()}
+    </span>
+  )
+}
+
+export default Day