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

package/src/component/date_range_picker/time_range_select.tsx

@@ -1,144 +1,144 @@
-import React, { FC, ReactNode } from 'react'
-import { TimeLimit } from '../date_picker/types'
-import moment from 'moment'
-import { getLocale } from '@gm-pc/locales'
-
-import { renderTime } from './util'
-import TimeSpanPicker from '../time_span/time_span_picker'
-import { Flex } from '../flex'
-import { setTimes } from '../../common/utils/date'
-
-interface TimeRangeSelectProps {
-  begin?: Date | null
-  end?: Date | null
-  enabledTimeSelect?: boolean
-  onSelect?(begin: Date | null, end: Date, updateEndTime: boolean): void
-  renderTime?(date: Date): ReactNode
-  timeSpan?: number
-  beginTimeSelect?: Omit<TimeLimit, 'timeSpan'>
-  endTimeSelect?: Omit<TimeLimit, 'timeSpan'>
-}
-
-const TimeRangeSelect: FC<TimeRangeSelectProps> = ({
-  begin,
-  end,
-  enabledTimeSelect,
-  beginTimeSelect,
-  endTimeSelect,
-  onSelect,
-  timeSpan,
-}) => {
-  let b: ReactNode = <span className='gm-text-desc'>{getLocale('开始日期')}</span>
-  let e: ReactNode = <span className='gm-text-desc'>{getLocale('结束日期')}</span>
-
-  if (begin) {
-    b = moment(begin).format('YYYY-MM-DD')
-  }
-  if (end) {
-    e = moment(end).format('YYYY-MM-DD')
-  }
-
-  const handleTimeSelect = (time: Date, type: 'begin' | 'end'): void => {
-    let b = begin
-    let e = end
-    let updateEndTime = false
-
-    if (type === 'begin') {
-      b = setTimes(moment(begin ?? undefined), moment(time)).toDate()
-      updateEndTime =
-        (endTimeSelect &&
-          endTimeSelect.disabledSpan?.(end!, {
-            begin: b!,
-            end: end!,
-          })) ||
-        false
-    }
-
-    if (type === 'end') {
-      e = setTimes(moment(end ?? undefined), moment(time)).toDate()
-    }
-
-    // 选择防止同一天出现 开始 > 结束, 做一下判断
-    if (moment(b ?? undefined).isAfter(moment(e ?? undefined))) {
-      e = setTimes(moment(end ?? undefined), moment(time)).toDate()
-    }
-    onSelect && onSelect(b!, e!, updateEndTime)
-  }
-
-  // 做一步处理，防止不同日期可选时间段不同
-  const handleDisabledSpan = (time: Date, type: 'begin' | 'end'): boolean => {
-    if (type === 'begin') {
-      if (beginTimeSelect && beginTimeSelect.disabledSpan) {
-        const date = setTimes(moment(begin ?? undefined), moment(time)).toDate()
-        return beginTimeSelect.disabledSpan(date, { begin: begin!, end: end! })
-      }
-      return false
-    }
-
-    if (type === 'end') {
-      const date = setTimes(moment(end ?? undefined), moment(time)).toDate()
-      let isAfterBeginTime = true
-      // 同一天，结束时间小于/等于开始时间
-      if (moment(begin ?? undefined).isSame(moment(end ?? undefined), 'day')) {
-        isAfterBeginTime = moment(date).isSameOrAfter(moment(begin ?? undefined))
-      }
-
-      if (endTimeSelect && endTimeSelect.disabledSpan) {
-        return (
-          endTimeSelect.disabledSpan(date, { begin: begin!, end: end! }) ||
-          !isAfterBeginTime
-        )
-      }
-      return !isAfterBeginTime
-    }
-    return false
-  }
-
-  const renderTimeSelect = (type: 'begin' | 'end'): ReactNode => {
-    const isDisabled = enabledTimeSelect && begin && end
-    let time: Date | null = null
-
-    if (type === 'begin') {
-      time = begin as Date
-    }
-
-    if (type === 'end') {
-      time = end as Date
-    }
-
-    return (
-      isDisabled && (
-        <TimeSpanPicker
-          date={time!}
-          onChange={(value) => handleTimeSelect(value!, type)}
-          span={timeSpan}
-          disabledSpan={(date) => handleDisabledSpan(date, type)}
-          renderItem={(value) => renderTime(moment(value))}
-          enabledEndTimeOfDay
-          isInPopup
-        >
-          <button className='gm-date-range-picker-bottom-time'>
-            {renderTime(moment(time!))}
-          </button>
-        </TimeSpanPicker>
-      )
-    )
-  }
-
-  return (
-    <Flex
-      alignCenter
-      justifyBetween
-      style={{ height: '25px', margin: '0px 5px 8px 15px' }}
-    >
-      <div className='gm-text-bold gm-date-range-picker-bottom-text'>
-        <span>{b}</span>
-        {enabledTimeSelect && renderTimeSelect('begin')}
-        &nbsp;~&nbsp;
-        <span>{e}</span>
-        {enabledTimeSelect && renderTimeSelect('end')}
-      </div>
-    </Flex>
-  )
-}
-export default TimeRangeSelect
+import React, { FC, ReactNode } from 'react'
+import { TimeLimit } from '../date_picker/types'
+import moment from 'moment'
+import { getLocale } from '@gm-pc/locales'
+
+import { renderTime } from './util'
+import TimeSpanPicker from '../time_span/time_span_picker'
+import { Flex } from '../flex'
+import { setTimes } from '../../common/utils/date'
+
+interface TimeRangeSelectProps {
+  begin?: Date | null
+  end?: Date | null
+  enabledTimeSelect?: boolean
+  onSelect?(begin: Date | null, end: Date, updateEndTime: boolean): void
+  renderTime?(date: Date): ReactNode
+  timeSpan?: number
+  beginTimeSelect?: Omit<TimeLimit, 'timeSpan'>
+  endTimeSelect?: Omit<TimeLimit, 'timeSpan'>
+}
+
+const TimeRangeSelect: FC<TimeRangeSelectProps> = ({
+  begin,
+  end,
+  enabledTimeSelect,
+  beginTimeSelect,
+  endTimeSelect,
+  onSelect,
+  timeSpan,
+}) => {
+  let b: ReactNode = <span className='gm-text-desc'>{getLocale('开始日期')}</span>
+  let e: ReactNode = <span className='gm-text-desc'>{getLocale('结束日期')}</span>
+
+  if (begin) {
+    b = moment(begin).format('YYYY-MM-DD')
+  }
+  if (end) {
+    e = moment(end).format('YYYY-MM-DD')
+  }
+
+  const handleTimeSelect = (time: Date, type: 'begin' | 'end'): void => {
+    let b = begin
+    let e = end
+    let updateEndTime = false
+
+    if (type === 'begin') {
+      b = setTimes(moment(begin ?? undefined), moment(time)).toDate()
+      updateEndTime =
+        (endTimeSelect &&
+          endTimeSelect.disabledSpan?.(end!, {
+            begin: b!,
+            end: end!,
+          })) ||
+        false
+    }
+
+    if (type === 'end') {
+      e = setTimes(moment(end ?? undefined), moment(time)).toDate()
+    }
+
+    // 选择防止同一天出现 开始 > 结束, 做一下判断
+    if (moment(b ?? undefined).isAfter(moment(e ?? undefined))) {
+      e = setTimes(moment(end ?? undefined), moment(time)).toDate()
+    }
+    onSelect && onSelect(b!, e!, updateEndTime)
+  }
+
+  // 做一步处理，防止不同日期可选时间段不同
+  const handleDisabledSpan = (time: Date, type: 'begin' | 'end'): boolean => {
+    if (type === 'begin') {
+      if (beginTimeSelect && beginTimeSelect.disabledSpan) {
+        const date = setTimes(moment(begin ?? undefined), moment(time)).toDate()
+        return beginTimeSelect.disabledSpan(date, { begin: begin!, end: end! })
+      }
+      return false
+    }
+
+    if (type === 'end') {
+      const date = setTimes(moment(end ?? undefined), moment(time)).toDate()
+      let isAfterBeginTime = true
+      // 同一天，结束时间小于/等于开始时间
+      if (moment(begin ?? undefined).isSame(moment(end ?? undefined), 'day')) {
+        isAfterBeginTime = moment(date).isSameOrAfter(moment(begin ?? undefined))
+      }
+
+      if (endTimeSelect && endTimeSelect.disabledSpan) {
+        return (
+          endTimeSelect.disabledSpan(date, { begin: begin!, end: end! }) ||
+          !isAfterBeginTime
+        )
+      }
+      return !isAfterBeginTime
+    }
+    return false
+  }
+
+  const renderTimeSelect = (type: 'begin' | 'end'): ReactNode => {
+    const isDisabled = enabledTimeSelect && begin && end
+    let time: Date | null = null
+
+    if (type === 'begin') {
+      time = begin as Date
+    }
+
+    if (type === 'end') {
+      time = end as Date
+    }
+
+    return (
+      isDisabled && (
+        <TimeSpanPicker
+          date={time!}
+          onChange={(value) => handleTimeSelect(value!, type)}
+          span={timeSpan}
+          disabledSpan={(date) => handleDisabledSpan(date, type)}
+          renderItem={(value) => renderTime(moment(value))}
+          enabledEndTimeOfDay
+          isInPopup
+        >
+          <button className='gm-date-range-picker-bottom-time'>
+            {renderTime(moment(time!))}
+          </button>
+        </TimeSpanPicker>
+      )
+    )
+  }
+
+  return (
+    <Flex
+      alignCenter
+      justifyBetween
+      style={{ height: '25px', margin: '0px 5px 8px 15px' }}
+    >
+      <div className='gm-text-bold gm-date-range-picker-bottom-text'>
+        <span>{b}</span>
+        {enabledTimeSelect && renderTimeSelect('begin')}
+        &nbsp;~&nbsp;
+        <span>{e}</span>
+        {enabledTimeSelect && renderTimeSelect('end')}
+      </div>
+    </Flex>
+  )
+}
+export default TimeRangeSelect

package/src/component/date_range_picker/two.tsx

@@ -1,108 +1,108 @@
-import React, { FC, useEffect, useState } from 'react'
-import moment from 'moment'
-import { isNull } from 'lodash'
-import { Flex } from '../flex'
-import { RangeCalendar } from '../calendar'
-
-interface TwoProps {
-  begin?: Date | null
-  end?: Date | null
-  onSelect(begin: Date | null, end: Date | null, updateEndTime: boolean): void
-  min?: Date
-  max?: Date
-  disabledDate?(date: Date, selected: { begin?: Date; end?: Date }): boolean
-  enabledTimeSelect?: boolean
-}
-
-const Two: FC<TwoProps> = ({ begin, end, onSelect, min, max, disabledDate }) => {
-  const _will = begin ?? moment().toDate()
-  // eslint-disable-next-line camelcase
-  let _will_end: Date
-
-  // 判断 begin && end 是否同月份，确定日历2 应该显示的月份
-  if (begin && end) {
-    const isSameMonth = moment(begin).month() === moment(end).month()
-    // eslint-disable-next-line camelcase
-    _will_end = isSameMonth ? moment(begin).add(1, 'month').toDate() : end
-  } else {
-    // eslint-disable-next-line camelcase
-    _will_end = moment().add(1, 'month').toDate()
-  }
-
-  // 告诉 日历1 应该显示的月份
-  const [will, setWill] = useState(_will)
-  // 告诉 日历2 应该显示的月份
-  // eslint-disable-next-line camelcase
-  const [will_end, setWillEnd] = useState(_will_end)
-  // 告诉 此时hover的日期
-  const [hoverDay, setHoverDay] = useState<Date | null>()
-
-  // 可以选择时间时，针对快速选择日期想需要更新日历
-  useEffect(() => {
-    if (begin && end) {
-      let _end: Date
-      if (begin && end) {
-        const isSameMonth = moment(begin).month() === moment(end).month()
-        // eslint-disable-next-line camelcase
-        _end = isSameMonth ? moment(begin).add(1, 'month').toDate() : end
-      } else {
-        // eslint-disable-next-line camelcase
-        _end = moment().add(1, 'month').toDate()
-      }
-      setWill(begin)
-      setWillEnd(_end)
-    }
-  }, [begin, end])
-
-  const handleWillChange = (date: Date): void => {
-    setWill(date)
-  }
-
-  const handleWillChangeByEnd = (date: Date): void => {
-    setWillEnd(date)
-  }
-
-  const disabledYearOrMonth = (): boolean => {
-    // 两个日历显示为 同年相邻月份，disabled相应的 年 / 月 切换按钮
-    const _begin = moment(will).startOf('month').add(1, 'month').toDate()
-    const _end = moment(will_end).startOf('month').toDate()
-
-    return +_begin === +_end
-  }
-
-  return (
-    <Flex className='gm-padding-5'>
-      <RangeCalendar
-        className='gm-date-range-picker-overlay-calendar'
-        begin={begin}
-        end={end}
-        willActiveSelected={will}
-        onWillActiveSelected={handleWillChange}
-        onSelect={(begin, end) => onSelect(begin, end, true)}
-        min={min}
-        max={max}
-        disabledDate={disabledDate}
-        disabledYearAndMonth={disabledYearOrMonth() ? 'right' : undefined}
-        hoverDay={isNull(hoverDay) ? hoverDay : moment(hoverDay)}
-        onHoverDay={(moment) => setHoverDay(moment ? moment.toDate() : moment)}
-      />
-      <RangeCalendar
-        className='gm-date-range-picker-overlay-calendar'
-        begin={begin}
-        end={end}
-        // eslint-disable-next-line camelcase
-        willActiveSelected={will_end}
-        onWillActiveSelected={handleWillChangeByEnd}
-        onSelect={(begin, end) => onSelect(begin, end, true)}
-        min={min}
-        max={max}
-        disabledDate={disabledDate}
-        disabledYearAndMonth={disabledYearOrMonth() ? 'left' : undefined}
-        hoverDay={isNull(hoverDay) ? hoverDay : moment(hoverDay)}
-        onHoverDay={(m) => setHoverDay(m ? moment(m).toDate() : m)}
-      />
-    </Flex>
-  )
-}
-
-export default Two
+import React, { FC, useEffect, useState } from 'react'
+import moment from 'moment'
+import { isNull } from 'lodash'
+import { Flex } from '../flex'
+import { RangeCalendar } from '../calendar'
+
+interface TwoProps {
+  begin?: Date | null
+  end?: Date | null
+  onSelect(begin: Date | null, end: Date | null, updateEndTime: boolean): void
+  min?: Date
+  max?: Date
+  disabledDate?(date: Date, selected: { begin?: Date; end?: Date }): boolean
+  enabledTimeSelect?: boolean
+}
+
+const Two: FC<TwoProps> = ({ begin, end, onSelect, min, max, disabledDate }) => {
+  const _will = begin ?? moment().toDate()
+  // eslint-disable-next-line camelcase
+  let _will_end: Date
+
+  // 判断 begin && end 是否同月份，确定日历2 应该显示的月份
+  if (begin && end) {
+    const isSameMonth = moment(begin).month() === moment(end).month()
+    // eslint-disable-next-line camelcase
+    _will_end = isSameMonth ? moment(begin).add(1, 'month').toDate() : end
+  } else {
+    // eslint-disable-next-line camelcase
+    _will_end = moment().add(1, 'month').toDate()
+  }
+
+  // 告诉 日历1 应该显示的月份
+  const [will, setWill] = useState(_will)
+  // 告诉 日历2 应该显示的月份
+  // eslint-disable-next-line camelcase
+  const [will_end, setWillEnd] = useState(_will_end)
+  // 告诉 此时hover的日期
+  const [hoverDay, setHoverDay] = useState<Date | null>()
+
+  // 可以选择时间时，针对快速选择日期想需要更新日历
+  useEffect(() => {
+    if (begin && end) {
+      let _end: Date
+      if (begin && end) {
+        const isSameMonth = moment(begin).month() === moment(end).month()
+        // eslint-disable-next-line camelcase
+        _end = isSameMonth ? moment(begin).add(1, 'month').toDate() : end
+      } else {
+        // eslint-disable-next-line camelcase
+        _end = moment().add(1, 'month').toDate()
+      }
+      setWill(begin)
+      setWillEnd(_end)
+    }
+  }, [begin, end])
+
+  const handleWillChange = (date: Date): void => {
+    setWill(date)
+  }
+
+  const handleWillChangeByEnd = (date: Date): void => {
+    setWillEnd(date)
+  }
+
+  const disabledYearOrMonth = (): boolean => {
+    // 两个日历显示为 同年相邻月份，disabled相应的 年 / 月 切换按钮
+    const _begin = moment(will).startOf('month').add(1, 'month').toDate()
+    const _end = moment(will_end).startOf('month').toDate()
+
+    return +_begin === +_end
+  }
+
+  return (
+    <Flex className='gm-padding-5'>
+      <RangeCalendar
+        className='gm-date-range-picker-overlay-calendar'
+        begin={begin}
+        end={end}
+        willActiveSelected={will}
+        onWillActiveSelected={handleWillChange}
+        onSelect={(begin, end) => onSelect(begin, end, true)}
+        min={min}
+        max={max}
+        disabledDate={disabledDate}
+        disabledYearAndMonth={disabledYearOrMonth() ? 'right' : undefined}
+        hoverDay={isNull(hoverDay) ? hoverDay : moment(hoverDay)}
+        onHoverDay={(moment) => setHoverDay(moment ? moment.toDate() : moment)}
+      />
+      <RangeCalendar
+        className='gm-date-range-picker-overlay-calendar'
+        begin={begin}
+        end={end}
+        // eslint-disable-next-line camelcase
+        willActiveSelected={will_end}
+        onWillActiveSelected={handleWillChangeByEnd}
+        onSelect={(begin, end) => onSelect(begin, end, true)}
+        min={min}
+        max={max}
+        disabledDate={disabledDate}
+        disabledYearAndMonth={disabledYearOrMonth() ? 'left' : undefined}
+        hoverDay={isNull(hoverDay) ? hoverDay : moment(hoverDay)}
+        onHoverDay={(m) => setHoverDay(m ? moment(m).toDate() : m)}
+      />
+    </Flex>
+  )
+}
+
+export default Two

package/src/component/date_range_picker/types.ts

@@ -1,42 +1,42 @@
-import { CSSProperties, ReactNode } from 'react'
-import { TimeLimit } from '../date_picker/types'
-
-interface DateRangePickerProps {
-  /* 开始日期 */
-  begin?: Date | null
-  /* 结束日期 */
-  end?: Date | null
-  /* 选择回调 */
-  onChange?(begin: Date | null, end: Date | null): void
-  disabled?: boolean
-  /* 最小可选日期 */
-  min?: Date
-  /* 最大可选日期 */
-  max?: Date
-  /* 自定义禁用日期，优先度高于min，max */
-  disabledDate?(date: Date, selected: { begin?: Date; end?: Date }): boolean
-  /* 自定义展示日期 */
-  renderDate?(begin: Date, end: Date): ReactNode
-  canClear?: boolean
-  className?: string
-  style?: CSSProperties
-  /* 自定义左侧快速选项 */
-  customQuickSelectList?: QuickSelectListOptions[]
-  /* 时间选择 */
-  enabledTimeSelect?: boolean
-  /* 时间间隔 */
-  timeSpan?: number
-  /* 开始时间约束 */
-  beginTimeSelect?: Omit<TimeLimit, 'timeSpan'>
-  /* 结束时间约束 */
-  endTimeSelect?: Omit<TimeLimit, 'timeSpan'>
-}
-
-interface QuickSelectListOptions {
-  /* 数组第一个元素为距离今天的天数，第二个元素固定为'day' */
-  range: Array<[number, 'day']>
-  /* 展示的文字 */
-  text: string
-}
-
-export type { DateRangePickerProps, QuickSelectListOptions }
+import { CSSProperties, ReactNode } from 'react'
+import { TimeLimit } from '../date_picker/types'
+
+interface DateRangePickerProps {
+  /* 开始日期 */
+  begin?: Date | null
+  /* 结束日期 */
+  end?: Date | null
+  /* 选择回调 */
+  onChange?(begin: Date | null, end: Date | null): void
+  disabled?: boolean
+  /* 最小可选日期 */
+  min?: Date
+  /* 最大可选日期 */
+  max?: Date
+  /* 自定义禁用日期，优先度高于min，max */
+  disabledDate?(date: Date, selected: { begin?: Date; end?: Date }): boolean
+  /* 自定义展示日期 */
+  renderDate?(begin: Date, end: Date): ReactNode
+  canClear?: boolean
+  className?: string
+  style?: CSSProperties
+  /* 自定义左侧快速选项 */
+  customQuickSelectList?: QuickSelectListOptions[]
+  /* 时间选择 */
+  enabledTimeSelect?: boolean
+  /* 时间间隔 */
+  timeSpan?: number
+  /* 开始时间约束 */
+  beginTimeSelect?: Omit<TimeLimit, 'timeSpan'>
+  /* 结束时间约束 */
+  endTimeSelect?: Omit<TimeLimit, 'timeSpan'>
+}
+
+interface QuickSelectListOptions {
+  /* 数组第一个元素为距离今天的天数，第二个元素固定为'day' */
+  range: Array<[number, 'day']>
+  /* 展示的文字 */
+  text: string
+}
+
+export type { DateRangePickerProps, QuickSelectListOptions }

package/src/component/date_range_picker/util.ts

@@ -1,11 +1,11 @@
-import moment, { Moment } from 'moment'
-
-const renderTime = (value: Moment): string => {
-  const date = moment(value).format('YYYY-MM-DD')
-  if (moment(value).add(1, 'ms').isSame(moment(date).add(1, 'd'))) {
-    return '24:00'
-  }
-  return moment(value).format('HH:mm')
-}
-
-export { renderTime }
+import moment, { Moment } from 'moment'
+
+const renderTime = (value: Moment): string => {
+  const date = moment(value).format('YYYY-MM-DD')
+  if (moment(value).add(1, 'ms').isSame(moment(date).add(1, 'd'))) {
+    return '24:00'
+  }
+  return moment(value).format('HH:mm')
+}
+
+export { renderTime }