@gmfe/react 2.14.20 → 2.14.26-beta.0

package/src/component/date_range_picker/time_range_select.js

@@ -1,150 +1,150 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import moment from 'moment'
-
-import Flex from '../flex'
-import TimeSpanPicker from '../time_span/time_span_picker'
-import { setTimes, renderTime } from './util'
-
-const TimeRangeSelect = props => {
-  const {
-    begin,
-    end,
-    enabledTimeSelect,
-    beginTimeSelect,
-    endTimeSelect,
-    onSelect,
-    timeSpan
-  } = props
-
-  let b = <span className='gm-text-desc'>开始日期</span>
-  let e = <span className='gm-text-desc'>结束日期</span>
-
-  if (begin) {
-    b = moment(begin).format('YYYY-MM-DD')
-  }
-
-  if (end) {
-    e = moment(end).format('YYYY-MM-DD')
-  }
-
-  const handleTimeSelect = (time, type) => {
-    let b = begin
-    let e = end
-    let updateEndTime = false
-
-    if (type === 'begin') {
-      b = setTimes(begin, time)
-      // 选择开始时间后，结束时间可选范围可能有变动，判断当前给出的结束时间是否需要更新
-      updateEndTime =
-        (endTimeSelect && endTimeSelect.disabledSpan(end, { begin: b, end })) ||
-        false
-    }
-
-    if (type === 'end') {
-      e = setTimes(end, time)
-    }
-
-    // 选择防止同一天出现 开始 > 结束, 做一下判断
-    if (moment(b).isAfter(moment(e))) {
-      e = setTimes(end, time)
-    }
-
-    onSelect(b, e, updateEndTime)
-  }
-
-  // 做一步处理，防止不同日期可选时间段不同
-  const handleDisabledSpan = (time, type) => {
-    if (type === 'begin') {
-      if (beginTimeSelect && beginTimeSelect.disabledSpan) {
-        const date = setTimes(begin, time)
-        return beginTimeSelect.disabledSpan(date, { begin, end })
-      }
-      return false
-    }
-
-    if (type === 'end') {
-      const date = setTimes(end, time)
-      let isAfterBeginTime = true
-      // 同一天，结束时间小于/等于开始时间
-      if (moment(begin).isSame(moment(end), 'day')) {
-        isAfterBeginTime = moment(date).isSameOrAfter(moment(begin))
-      }
-
-      if (endTimeSelect && endTimeSelect.disabledSpan) {
-        return (
-          endTimeSelect.disabledSpan(date, { begin, end }) || !isAfterBeginTime
-        )
-      }
-      return !isAfterBeginTime
-    }
-  }
-
-  const renderTimeSelect = type => {
-    const isDisabled = enabledTimeSelect && begin && end
-    let time = null
-
-    if (type === 'begin') {
-      time = begin
-    }
-
-    if (type === 'end') {
-      time = end
-    }
-
-    return (
-      isDisabled && (
-        <TimeSpanPicker
-          date={time}
-          onChange={value => handleTimeSelect(value, type)}
-          span={timeSpan}
-          disabledSpan={date => handleDisabledSpan(date, type)}
-          renderItem={renderTime}
-          enabledEndTimeOfDay
-          isInPopup
-        >
-          <button className='gm-date-range-picker-bottom-time'>
-            {renderTime(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>
-  )
-}
-
-TimeRangeSelect.propTypes = {
-  begin: PropTypes.object,
-  end: PropTypes.object,
-  enabledTimeSelect: PropTypes.bool,
-  onSelectDateAndTime: PropTypes.func,
-  onSelect: PropTypes.func,
-  renderTime: PropTypes.func,
-  timeSpan: PropTypes.number,
-  beginTimeSelect: PropTypes.shape({
-    defaultTime: PropTypes.object,
-    /** 禁用时间段函数，传入参数为Date对象，返回时间段 */
-    disabledSpan: PropTypes.func
-  }),
-  endTimeSelect: PropTypes.shape({
-    defaultTime: PropTypes.object,
-    disabledSpan: PropTypes.funcxs
-  })
-}
-
-export default TimeRangeSelect
+import React from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+
+import Flex from '../flex'
+import TimeSpanPicker from '../time_span/time_span_picker'
+import { setTimes, renderTime } from './util'
+
+const TimeRangeSelect = props => {
+  const {
+    begin,
+    end,
+    enabledTimeSelect,
+    beginTimeSelect,
+    endTimeSelect,
+    onSelect,
+    timeSpan
+  } = props
+
+  let b = <span className='gm-text-desc'>开始日期</span>
+  let e = <span className='gm-text-desc'>结束日期</span>
+
+  if (begin) {
+    b = moment(begin).format('YYYY-MM-DD')
+  }
+
+  if (end) {
+    e = moment(end).format('YYYY-MM-DD')
+  }
+
+  const handleTimeSelect = (time, type) => {
+    let b = begin
+    let e = end
+    let updateEndTime = false
+
+    if (type === 'begin') {
+      b = setTimes(begin, time)
+      // 选择开始时间后，结束时间可选范围可能有变动，判断当前给出的结束时间是否需要更新
+      updateEndTime =
+        (endTimeSelect && endTimeSelect.disabledSpan(end, { begin: b, end })) ||
+        false
+    }
+
+    if (type === 'end') {
+      e = setTimes(end, time)
+    }
+
+    // 选择防止同一天出现 开始 > 结束, 做一下判断
+    if (moment(b).isAfter(moment(e))) {
+      e = setTimes(end, time)
+    }
+
+    onSelect(b, e, updateEndTime)
+  }
+
+  // 做一步处理，防止不同日期可选时间段不同
+  const handleDisabledSpan = (time, type) => {
+    if (type === 'begin') {
+      if (beginTimeSelect && beginTimeSelect.disabledSpan) {
+        const date = setTimes(begin, time)
+        return beginTimeSelect.disabledSpan(date, { begin, end })
+      }
+      return false
+    }
+
+    if (type === 'end') {
+      const date = setTimes(end, time)
+      let isAfterBeginTime = true
+      // 同一天，结束时间小于/等于开始时间
+      if (moment(begin).isSame(moment(end), 'day')) {
+        isAfterBeginTime = moment(date).isSameOrAfter(moment(begin))
+      }
+
+      if (endTimeSelect && endTimeSelect.disabledSpan) {
+        return (
+          endTimeSelect.disabledSpan(date, { begin, end }) || !isAfterBeginTime
+        )
+      }
+      return !isAfterBeginTime
+    }
+  }
+
+  const renderTimeSelect = type => {
+    const isDisabled = enabledTimeSelect && begin && end
+    let time = null
+
+    if (type === 'begin') {
+      time = begin
+    }
+
+    if (type === 'end') {
+      time = end
+    }
+
+    return (
+      isDisabled && (
+        <TimeSpanPicker
+          date={time}
+          onChange={value => handleTimeSelect(value, type)}
+          span={timeSpan}
+          disabledSpan={date => handleDisabledSpan(date, type)}
+          renderItem={renderTime}
+          enabledEndTimeOfDay
+          isInPopup
+        >
+          <button className='gm-date-range-picker-bottom-time'>
+            {renderTime(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>
+  )
+}
+
+TimeRangeSelect.propTypes = {
+  begin: PropTypes.object,
+  end: PropTypes.object,
+  enabledTimeSelect: PropTypes.bool,
+  onSelectDateAndTime: PropTypes.func,
+  onSelect: PropTypes.func,
+  renderTime: PropTypes.func,
+  timeSpan: PropTypes.number,
+  beginTimeSelect: PropTypes.shape({
+    defaultTime: PropTypes.object,
+    /** 禁用时间段函数，传入参数为Date对象，返回时间段 */
+    disabledSpan: PropTypes.func
+  }),
+  endTimeSelect: PropTypes.shape({
+    defaultTime: PropTypes.object,
+    disabledSpan: PropTypes.funcxs
+  })
+}
+
+export default TimeRangeSelect

package/src/component/date_range_picker/two.js

@@ -1,129 +1,129 @@
-import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
-import moment from 'moment'
-import Flex from '../flex'
-import RangeCalendar from '../calendar/range_calendar'
-
-const Two = props => {
-  const {
-    begin,
-    end,
-    onSelect,
-    min,
-    max,
-    disabledDate,
-    enabledTimeSelect
-  } = props
-
-  const _will = begin || moment().toDate()
-  let _will_end = null
-
-  // 判断 begin && end 是否同月份，确定 日历2 应该显示的月份
-  if (begin && end) {
-    const isSameMonth = moment(begin).month() === moment(end).month()
-    _will_end = isSameMonth
-      ? moment(begin)
-          .add(1, 'month')
-          .toDate()
-      : end
-  } else {
-    _will_end = moment()
-      .add(1, 'month')
-      .toDate()
-  }
-
-  // 告诉 日历1 应该显示的月份
-  const [will, setWill] = useState(_will)
-  // 告诉 日历2 应该显示的月份
-  const [will_end, setWillEnd] = useState(_will_end)
-  // 告诉 此时hover的日期
-  const [hoverDay, setHoverDay] = useState(null)
-
-  // 可以选择时间时，针对快速选择日期项需要更新日历
-  useEffect(() => {
-    const beginMonth = moment(begin).month()
-    const endMonth = moment(end).month()
-
-    if (enabledTimeSelect && begin && end) {
-      // begin && end 同月份
-      if (beginMonth === endMonth) {
-        const willMonth = moment(will).month()
-        const willEndMonth = moment(will_end).month()
-        // 当前选择月份不在展示中 -- 针对快速选择
-        if (beginMonth !== willMonth && beginMonth !== willEndMonth) {
-          setWill(begin)
-          setWillEnd(moment(begin).add(1, 'month'))
-        }
-      } else {
-        setWill(begin)
-        setWillEnd(end)
-      }
-    }
-  }, [begin, end])
-
-  const handleWillChange = date => {
-    setWill(date)
-  }
-
-  const handleWillChangeByEnd = date => {
-    setWillEnd(date)
-  }
-
-  const disabledYearOrMonth = () => {
-    // 两个日历显示为 同年相邻月份，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={hoverDay}
-        onHoverDay={setHoverDay}
-      />
-      <RangeCalendar
-        className='gm-date-range-picker-overlay-calendar'
-        begin={begin}
-        end={end}
-        willActiveSelected={will_end}
-        onWillActiveSelected={handleWillChangeByEnd}
-        onSelect={(begin, end) => onSelect(begin, end, true)}
-        min={min}
-        max={max}
-        disabledDate={disabledDate}
-        disabledYearAndMonth={disabledYearOrMonth() ? 'left' : undefined}
-        hoverDay={hoverDay}
-        onHoverDay={setHoverDay}
-      />
-    </Flex>
-  )
-}
-
-Two.propTypes = {
-  begin: PropTypes.object,
-  end: PropTypes.object,
-  onSelect: PropTypes.func.isRequired,
-  min: PropTypes.object,
-  max: PropTypes.object,
-  disabledDate: PropTypes.func,
-  enabledTimeSelect: PropTypes.bool
-}
-
-export default Two
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+import Flex from '../flex'
+import RangeCalendar from '../calendar/range_calendar'
+
+const Two = props => {
+  const {
+    begin,
+    end,
+    onSelect,
+    min,
+    max,
+    disabledDate,
+    enabledTimeSelect
+  } = props
+
+  const _will = begin || moment().toDate()
+  let _will_end = null
+
+  // 判断 begin && end 是否同月份，确定 日历2 应该显示的月份
+  if (begin && end) {
+    const isSameMonth = moment(begin).month() === moment(end).month()
+    _will_end = isSameMonth
+      ? moment(begin)
+          .add(1, 'month')
+          .toDate()
+      : end
+  } else {
+    _will_end = moment()
+      .add(1, 'month')
+      .toDate()
+  }
+
+  // 告诉 日历1 应该显示的月份
+  const [will, setWill] = useState(_will)
+  // 告诉 日历2 应该显示的月份
+  const [will_end, setWillEnd] = useState(_will_end)
+  // 告诉 此时hover的日期
+  const [hoverDay, setHoverDay] = useState(null)
+
+  // 可以选择时间时，针对快速选择日期项需要更新日历
+  useEffect(() => {
+    const beginMonth = moment(begin).month()
+    const endMonth = moment(end).month()
+
+    if (enabledTimeSelect && begin && end) {
+      // begin && end 同月份
+      if (beginMonth === endMonth) {
+        const willMonth = moment(will).month()
+        const willEndMonth = moment(will_end).month()
+        // 当前选择月份不在展示中 -- 针对快速选择
+        if (beginMonth !== willMonth && beginMonth !== willEndMonth) {
+          setWill(begin)
+          setWillEnd(moment(begin).add(1, 'month'))
+        }
+      } else {
+        setWill(begin)
+        setWillEnd(end)
+      }
+    }
+  }, [begin, end])
+
+  const handleWillChange = date => {
+    setWill(date)
+  }
+
+  const handleWillChangeByEnd = date => {
+    setWillEnd(date)
+  }
+
+  const disabledYearOrMonth = () => {
+    // 两个日历显示为 同年相邻月份，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={hoverDay}
+        onHoverDay={setHoverDay}
+      />
+      <RangeCalendar
+        className='gm-date-range-picker-overlay-calendar'
+        begin={begin}
+        end={end}
+        willActiveSelected={will_end}
+        onWillActiveSelected={handleWillChangeByEnd}
+        onSelect={(begin, end) => onSelect(begin, end, true)}
+        min={min}
+        max={max}
+        disabledDate={disabledDate}
+        disabledYearAndMonth={disabledYearOrMonth() ? 'left' : undefined}
+        hoverDay={hoverDay}
+        onHoverDay={setHoverDay}
+      />
+    </Flex>
+  )
+}
+
+Two.propTypes = {
+  begin: PropTypes.object,
+  end: PropTypes.object,
+  onSelect: PropTypes.func.isRequired,
+  min: PropTypes.object,
+  max: PropTypes.object,
+  disabledDate: PropTypes.func,
+  enabledTimeSelect: PropTypes.bool
+}
+
+export default Two

package/src/component/date_range_picker/util.js

@@ -1,42 +1,42 @@
-import moment from 'moment'
-
-// 设置moment的时间值
-const setTimes = (date, time) => {
-  // 没有设置时间
-  if (!time) {
-    return moment(date)
-  }
-
-  const year = moment(date).year()
-  const month = moment(date).month()
-  const day = moment(date).date()
-
-  const res = moment(time).set({ year, month, date: day })
-  return res
-}
-
-const getTimeCells = span => {
-  let time = moment().startOf('day')
-  const cells = []
-
-  while (time <= moment().endOf('day')) {
-    cells.push(time)
-    time = moment(time + span)
-  }
-  cells.push(moment().endOf('day'))
-  return cells
-}
-
-const renderTime = value => {
-  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 { setTimes, getTimeCells, renderTime }
+import moment from 'moment'
+
+// 设置moment的时间值
+const setTimes = (date, time) => {
+  // 没有设置时间
+  if (!time) {
+    return moment(date)
+  }
+
+  const year = moment(date).year()
+  const month = moment(date).month()
+  const day = moment(date).date()
+
+  const res = moment(time).set({ year, month, date: day })
+  return res
+}
+
+const getTimeCells = span => {
+  let time = moment().startOf('day')
+  const cells = []
+
+  while (time <= moment().endOf('day')) {
+    cells.push(time)
+    time = moment(time + span)
+  }
+  cells.push(moment().endOf('day'))
+  return cells
+}
+
+const renderTime = value => {
+  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 { setTimes, getTimeCells, renderTime }