@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/time_span/time_span.js

@@ -1,183 +1,183 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import moment from 'moment'
-import _ from 'lodash'
-import classNames from 'classnames'
-
-import { Flex } from '../../index'
-
-/**
- * TimeSpan -- 时间选择
- *
- * 主要功能：时间点选择
- * */
-
-const getTime = time => {
-  if (time) {
-    const year = moment().year()
-    const month = moment().month()
-    const day = moment().date()
-    return moment(time).set({ year, month, date: day })
-  }
-  return null
-}
-
-const TimeSpan = props => {
-  const {
-    selected,
-    renderItem,
-    disabledSpan,
-    onSelect,
-    min,
-    max,
-    span,
-    enabledEndTimeOfDay,
-    beginTime,
-    endTime
-  } = props
-  // 自定义起始时间点 or 一天起始时间点
-  const _beginTime = getTime(beginTime) || moment().startOf('day')
-  const _endTime = getTime(endTime) || moment().endOf('day')
-
-  const getTimeCells = () => {
-    let time = _beginTime
-    const cells = []
-
-    while (time <= _endTime) {
-      cells.push(time)
-      time = moment(time + span)
-    }
-
-    if (enabledEndTimeOfDay) {
-      cells.push(moment().endOf('day'))
-    }
-
-    // 三部分展示
-    let len = Math.ceil(cells.length / 3)
-    // 处理时间段数不均等展示
-    if (len % 2) {
-      len++
-    }
-    const firstCells = cells.slice(0, len)
-    const middleCells = cells.slice(len, 2 * len)
-    const finalCells = cells.slice(2 * len)
-
-    return [firstCells, middleCells, finalCells]
-  }
-
-  const isDisable = time => {
-    // 无需限制
-    if (!max && !min && !disabledSpan) {
-      return false
-    }
-
-    const dMax = max ? moment(max) : _endTime
-    const dMin = min ? moment(min) : _beginTime
-    const dTime = moment(time)
-    return (
-      !(dTime <= dMax && dTime >= dMin) || (disabledSpan && disabledSpan(time))
-    )
-  }
-
-  const isActive = v => {
-    const value = moment(v)
-    const select = moment(selected)
-
-    // 判断时 / 分 是否相同
-    return value.hour() === select.hour() && value.minute() === select.minute()
-  }
-
-  const handleSelectTime = value => {
-    onSelect(value.toDate())
-  }
-
-  const renderTimesList = cells => {
-    let width = '50px'
-    if (span >= 60 * 60 * 1000) {
-      width = '100px'
-    }
-
-    return (
-      <Flex wrap row className='gm-time-span-list'>
-        {_.map(cells, value => {
-          const disabled = isDisable(value)
-
-          return (
-            <span
-              key={value.format('HH:mm')}
-              className={classNames('gm-time-span-list-cell', {
-                active: isActive(value),
-                disabled
-              })}
-              style={{ width }}
-              onClick={disabled ? _.noop : () => handleSelectTime(value)}
-            >
-              {renderItem(value.toDate())}
-            </span>
-          )
-        })}
-      </Flex>
-    )
-  }
-
-  const cells = getTimeCells()
-  const totalWidth = _.filter(cells, cell => cell.length).length * 130
-
-  return (
-    <Flex row className='gm-time-span' style={{ width: `${totalWidth}px` }}>
-      {_.map(cells, (cell, index) => {
-        if (!cell.length) return null // 时间间隔比较大时，某一列无数据的情况
-        return (
-          <Flex
-            className={classNames({
-              'gm-border-right': index !== cells.length - 1
-            })}
-            alignStart
-            key={index}
-          >
-            {renderTimesList(cell)}
-          </Flex>
-        )
-      })}
-    </Flex>
-  )
-}
-
-TimeSpan.propTypes = {
-  /** Date对象，默认一天的开始时间 */
-  min: PropTypes.object,
-  /** Date对象，默认一天的结束时间 */
-  max: PropTypes.object,
-  /** 禁用时间段函数，传入参数为Date对象，返回时间段 */
-  disabledSpan: PropTypes.func,
-  /** 定义时间跨度，默认为30分钟 */
-  span: PropTypes.number,
-  /** Date对象，表示选中的时间 */
-  selected: PropTypes.object,
-  /** 渲染时间文本展示格式，默认为HH:mm */
-  renderItem: PropTypes.func,
-  /** 点击选择回调，传入参数为Date对象 */
-  onSelect: PropTypes.func,
-  /** 自定义渲染的开始时间, 不传默认开始时间从 00:00 开始 */
-  beginTime: PropTypes.object,
-  /** 自定义渲染的结束时间 */
-  endTime: PropTypes.object,
-
-  /** 不知道取啥名字, 目前是日期组件选择时间为了展示 24:00 用 */
-  enabledEndTimeOfDay: PropTypes.bool
-}
-
-TimeSpan.defaultProps = {
-  min: moment()
-    .startOf('day')
-    .toDate(),
-  max: moment()
-    .endOf('day')
-    .toDate(),
-  span: 30 * 60 * 1000,
-  enabledEndTimeOfDay: false,
-  renderItem: value => moment(value).format('HH:mm'),
-  onSelect: _.noop
-}
-
-export default TimeSpan
+import React from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+import { Flex } from '../../index'
+
+/**
+ * TimeSpan -- 时间选择
+ *
+ * 主要功能：时间点选择
+ * */
+
+const getTime = time => {
+  if (time) {
+    const year = moment().year()
+    const month = moment().month()
+    const day = moment().date()
+    return moment(time).set({ year, month, date: day })
+  }
+  return null
+}
+
+const TimeSpan = props => {
+  const {
+    selected,
+    renderItem,
+    disabledSpan,
+    onSelect,
+    min,
+    max,
+    span,
+    enabledEndTimeOfDay,
+    beginTime,
+    endTime
+  } = props
+  // 自定义起始时间点 or 一天起始时间点
+  const _beginTime = getTime(beginTime) || moment().startOf('day')
+  const _endTime = getTime(endTime) || moment().endOf('day')
+
+  const getTimeCells = () => {
+    let time = _beginTime
+    const cells = []
+
+    while (time <= _endTime) {
+      cells.push(time)
+      time = moment(time + span)
+    }
+
+    if (enabledEndTimeOfDay) {
+      cells.push(moment().endOf('day'))
+    }
+
+    // 三部分展示
+    let len = Math.ceil(cells.length / 3)
+    // 处理时间段数不均等展示
+    if (len % 2) {
+      len++
+    }
+    const firstCells = cells.slice(0, len)
+    const middleCells = cells.slice(len, 2 * len)
+    const finalCells = cells.slice(2 * len)
+
+    return [firstCells, middleCells, finalCells]
+  }
+
+  const isDisable = time => {
+    // 无需限制
+    if (!max && !min && !disabledSpan) {
+      return false
+    }
+
+    const dMax = max ? moment(max) : _endTime
+    const dMin = min ? moment(min) : _beginTime
+    const dTime = moment(time)
+    return (
+      !(dTime <= dMax && dTime >= dMin) || (disabledSpan && disabledSpan(time))
+    )
+  }
+
+  const isActive = v => {
+    const value = moment(v)
+    const select = moment(selected)
+
+    // 判断时 / 分 是否相同
+    return value.hour() === select.hour() && value.minute() === select.minute()
+  }
+
+  const handleSelectTime = value => {
+    onSelect(value.toDate())
+  }
+
+  const renderTimesList = cells => {
+    let width = '50px'
+    if (span >= 60 * 60 * 1000) {
+      width = '100px'
+    }
+
+    return (
+      <Flex wrap row className='gm-time-span-list'>
+        {_.map(cells, value => {
+          const disabled = isDisable(value)
+
+          return (
+            <span
+              key={value.format('HH:mm')}
+              className={classNames('gm-time-span-list-cell', {
+                active: isActive(value),
+                disabled
+              })}
+              style={{ width }}
+              onClick={disabled ? _.noop : () => handleSelectTime(value)}
+            >
+              {renderItem(value.toDate())}
+            </span>
+          )
+        })}
+      </Flex>
+    )
+  }
+
+  const cells = getTimeCells()
+  const totalWidth = _.filter(cells, cell => cell.length).length * 130
+
+  return (
+    <Flex row className='gm-time-span' style={{ width: `${totalWidth}px` }}>
+      {_.map(cells, (cell, index) => {
+        if (!cell.length) return null // 时间间隔比较大时，某一列无数据的情况
+        return (
+          <Flex
+            className={classNames({
+              'gm-border-right': index !== cells.length - 1
+            })}
+            alignStart
+            key={index}
+          >
+            {renderTimesList(cell)}
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+TimeSpan.propTypes = {
+  /** Date对象，默认一天的开始时间 */
+  min: PropTypes.object,
+  /** Date对象，默认一天的结束时间 */
+  max: PropTypes.object,
+  /** 禁用时间段函数，传入参数为Date对象，返回时间段 */
+  disabledSpan: PropTypes.func,
+  /** 定义时间跨度，默认为30分钟 */
+  span: PropTypes.number,
+  /** Date对象，表示选中的时间 */
+  selected: PropTypes.object,
+  /** 渲染时间文本展示格式，默认为HH:mm */
+  renderItem: PropTypes.func,
+  /** 点击选择回调，传入参数为Date对象 */
+  onSelect: PropTypes.func,
+  /** 自定义渲染的开始时间, 不传默认开始时间从 00:00 开始 */
+  beginTime: PropTypes.object,
+  /** 自定义渲染的结束时间 */
+  endTime: PropTypes.object,
+
+  /** 不知道取啥名字, 目前是日期组件选择时间为了展示 24:00 用 */
+  enabledEndTimeOfDay: PropTypes.bool
+}
+
+TimeSpan.defaultProps = {
+  min: moment()
+    .startOf('day')
+    .toDate(),
+  max: moment()
+    .endOf('day')
+    .toDate(),
+  span: 30 * 60 * 1000,
+  enabledEndTimeOfDay: false,
+  renderItem: value => moment(value).format('HH:mm'),
+  onSelect: _.noop
+}
+
+export default TimeSpan

package/src/component/time_span/time_span.stories.js

@@ -1,66 +1,66 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import TimeSpan from './time_span'
-import moment from 'moment'
-import { observable } from 'mobx'
-
-const timeSpanStatus = {
-  date: moment()
-    .startOf('day')
-    .toDate(),
-  setDate(date) {
-    this.date = date
-  }
-}
-
-const store = observable(timeSpanStatus)
-const store2 = observable(timeSpanStatus)
-const store3 = observable(timeSpanStatus)
-
-storiesOf('TimeSpan', module)
-  .add('default', () => (
-    <TimeSpan selected={store.date} onSelect={date => store.setDate(date)} />
-  ))
-  .add('不设置时间最大值 && 禁用某个时间段', () => (
-    <TimeSpan
-      max={null}
-      disabledSpan={spanMoment =>
-        spanMoment.isSameOrAfter(moment('11:00', 'HH:mm')) &&
-        spanMoment.isSameOrBefore(moment('18:30', 'HH:mm'))
-      }
-      selected={store.date}
-      onSelect={date => store.setDate(date)}
-    />
-  ))
-
-  .add('设置最大时间值为 20:00', () => (
-    <TimeSpan
-      max={moment()
-        .hour(20)
-        .minute(0)}
-      selected={store2.date}
-      onSelect={date => store2.setDate(date)}
-    />
-  ))
-
-  .add('自定义时间跨度为 1 小时（默认 30 分钟），展示格式为 HH', () => (
-    <TimeSpan
-      max={moment()
-        .hour(23)
-        .minute(0)}
-      span={60 * 60 * 1000}
-      renderItem={value => moment(value).format('HH')}
-      selected={store3.date}
-      onSelect={date => store3.setDate(date)}
-    />
-  ))
-
-  .add('自定义开始跟结束时间', () => (
-    <TimeSpan
-      beginTime={moment().hour(8).minute(30)}
-      endTime={moment().hour(22).minute(30)}
-      span={60 * 60 * 1000}
-      selected={store3.date}
-      onSelect={date => store3.setDate(date)}
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import TimeSpan from './time_span'
+import moment from 'moment'
+import { observable } from 'mobx'
+
+const timeSpanStatus = {
+  date: moment()
+    .startOf('day')
+    .toDate(),
+  setDate(date) {
+    this.date = date
+  }
+}
+
+const store = observable(timeSpanStatus)
+const store2 = observable(timeSpanStatus)
+const store3 = observable(timeSpanStatus)
+
+storiesOf('TimeSpan', module)
+  .add('default', () => (
+    <TimeSpan selected={store.date} onSelect={date => store.setDate(date)} />
+  ))
+  .add('不设置时间最大值 && 禁用某个时间段', () => (
+    <TimeSpan
+      max={null}
+      disabledSpan={spanMoment =>
+        spanMoment.isSameOrAfter(moment('11:00', 'HH:mm')) &&
+        spanMoment.isSameOrBefore(moment('18:30', 'HH:mm'))
+      }
+      selected={store.date}
+      onSelect={date => store.setDate(date)}
+    />
+  ))
+
+  .add('设置最大时间值为 20:00', () => (
+    <TimeSpan
+      max={moment()
+        .hour(20)
+        .minute(0)}
+      selected={store2.date}
+      onSelect={date => store2.setDate(date)}
+    />
+  ))
+
+  .add('自定义时间跨度为 1 小时（默认 30 分钟），展示格式为 HH', () => (
+    <TimeSpan
+      max={moment()
+        .hour(23)
+        .minute(0)}
+      span={60 * 60 * 1000}
+      renderItem={value => moment(value).format('HH')}
+      selected={store3.date}
+      onSelect={date => store3.setDate(date)}
+    />
+  ))
+
+  .add('自定义开始跟结束时间', () => (
+    <TimeSpan
+      beginTime={moment().hour(8).minute(30)}
+      endTime={moment().hour(22).minute(30)}
+      span={60 * 60 * 1000}
+      selected={store3.date}
+      onSelect={date => store3.setDate(date)}
+    />
+  ))