@gmfe/react 2.14.20 → 2.14.26-beta.0

package/src/component/date_picker/date_picker.stories.js

@@ -1,102 +1,102 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import DatePicker from './index'
-import moment from 'moment'
-import { observable } from 'mobx'
-
-const datepickerStatus = {
-  date: null,
-  setDate(date) {
-    this.date = date
-  }
-}
-
-const commonStore = observable(datepickerStatus)
-const inputValueRenderStore = observable(datepickerStatus)
-const disabledStore1 = observable(datepickerStatus)
-const disabledStore2 = observable(datepickerStatus)
-const disabledStore3 = observable(datepickerStatus)
-const withNoInputStatus = observable(datepickerStatus)
-const addTimeStore = observable(datepickerStatus)
-const renderBottomStore = observable(datepickerStatus)
-
-storiesOf('DatePicker', module)
-  .add('一般形式', () => (
-    <DatePicker
-      date={commonStore.date}
-      placeholder='请选择日期'
-      onChange={date => commonStore.setDate(date)}
-    />
-  ))
-
-  .add('自定义数据展现形式', () => (
-    <DatePicker
-      date={inputValueRenderStore.date}
-      placeholder='请选择日期'
-      onChange={date => inputValueRenderStore.setDate(date)}
-      renderDate={begin => `${begin.getMonth() + 1}月-${begin.getDate()}日`}
-    />
-  ))
-
-  .add('禁用日期选择', () => (
-    <DatePicker
-      date={disabledStore1.date}
-      placeholder='请选择日期'
-      disabled
-      onChange={date => disabledStore1.setDate(date)}
-    />
-  ))
-
-  .add('自定义禁止选择的日期段', () => (
-    <div>
-      <div className='gm-text-20 gm-margin-10'>只能选择非周五的日期</div>
-      <DatePicker
-        date={disabledStore2.date}
-        placeholder='非周五'
-        disabledDate={m => {
-          return moment(m).get('day') === 5
-        }}
-        onChange={date => disabledStore2.setDate(date)}
-      />
-      <div className='gm-text-20 gm-margin-10'>只能选择今天之后的日期</div>
-      <DatePicker
-        date={disabledStore3.date}
-        placeholder='选今天之后的'
-        min={new Date()}
-        onChange={date => disabledStore3.setDate(date)}
-      />
-    </div>
-  ))
-
-  .add('自定义 children', () => (
-    <DatePicker
-      date={withNoInputStatus.date}
-      onChange={date => withNoInputStatus.setDate(date)}
-    >
-      <span>
-        {withNoInputStatus.date
-          ? moment(withNoInputStatus.date).format('YYYY-MM-DD')
-          : '请点击选择'}
-      </span>
-    </DatePicker>
-  ))
-
-  .add('增加时间选择', () => (
-    <DatePicker
-      date={addTimeStore.date}
-      placeholder='请选择日期'
-      onChange={date => addTimeStore.setDate(date)}
-      enabledTimeSelect
-    />
-  ))
-
-  .add('增加底部自定义', () => (
-    <DatePicker
-      date={renderBottomStore.date}
-      placeholder='请选择日期'
-      onChange={date => renderBottomStore.setDate(date)}
-      renderBottom={
-        <div className='gm-border-top text-center gm-padding-10'>说明：请随便输入时间</div>
-      }
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import DatePicker from './index'
+import moment from 'moment'
+import { observable } from 'mobx'
+
+const datepickerStatus = {
+  date: null,
+  setDate(date) {
+    this.date = date
+  }
+}
+
+const commonStore = observable(datepickerStatus)
+const inputValueRenderStore = observable(datepickerStatus)
+const disabledStore1 = observable(datepickerStatus)
+const disabledStore2 = observable(datepickerStatus)
+const disabledStore3 = observable(datepickerStatus)
+const withNoInputStatus = observable(datepickerStatus)
+const addTimeStore = observable(datepickerStatus)
+const renderBottomStore = observable(datepickerStatus)
+
+storiesOf('DatePicker', module)
+  .add('一般形式', () => (
+    <DatePicker
+      date={commonStore.date}
+      placeholder='请选择日期'
+      onChange={date => commonStore.setDate(date)}
+    />
+  ))
+
+  .add('自定义数据展现形式', () => (
+    <DatePicker
+      date={inputValueRenderStore.date}
+      placeholder='请选择日期'
+      onChange={date => inputValueRenderStore.setDate(date)}
+      renderDate={begin => `${begin.getMonth() + 1}月-${begin.getDate()}日`}
+    />
+  ))
+
+  .add('禁用日期选择', () => (
+    <DatePicker
+      date={disabledStore1.date}
+      placeholder='请选择日期'
+      disabled
+      onChange={date => disabledStore1.setDate(date)}
+    />
+  ))
+
+  .add('自定义禁止选择的日期段', () => (
+    <div>
+      <div className='gm-text-20 gm-margin-10'>只能选择非周五的日期</div>
+      <DatePicker
+        date={disabledStore2.date}
+        placeholder='非周五'
+        disabledDate={m => {
+          return moment(m).get('day') === 5
+        }}
+        onChange={date => disabledStore2.setDate(date)}
+      />
+      <div className='gm-text-20 gm-margin-10'>只能选择今天之后的日期</div>
+      <DatePicker
+        date={disabledStore3.date}
+        placeholder='选今天之后的'
+        min={new Date()}
+        onChange={date => disabledStore3.setDate(date)}
+      />
+    </div>
+  ))
+
+  .add('自定义 children', () => (
+    <DatePicker
+      date={withNoInputStatus.date}
+      onChange={date => withNoInputStatus.setDate(date)}
+    >
+      <span>
+        {withNoInputStatus.date
+          ? moment(withNoInputStatus.date).format('YYYY-MM-DD')
+          : '请点击选择'}
+      </span>
+    </DatePicker>
+  ))
+
+  .add('增加时间选择', () => (
+    <DatePicker
+      date={addTimeStore.date}
+      placeholder='请选择日期'
+      onChange={date => addTimeStore.setDate(date)}
+      enabledTimeSelect
+    />
+  ))
+
+  .add('增加底部自定义', () => (
+    <DatePicker
+      date={renderBottomStore.date}
+      placeholder='请选择日期'
+      onChange={date => renderBottomStore.setDate(date)}
+      renderBottom={
+        <div className='gm-border-top text-center gm-padding-10'>说明：请随便输入时间</div>
+      }
+    />
+  ))

package/src/component/date_picker/index.js

@@ -1,217 +1,217 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import moment from 'moment'
-import classNames from 'classnames'
-import Popover from '../popover'
-import _ from 'lodash'
-import SVGCalendar from '../../../svg/calendar.svg'
-import Selection from '../selection'
-
-import Overlay from './overlay'
-
-/**
- * DatePicker -- 日期选择
- *
- * 主要功能：日期选择
- * */
-
-class DatePicker extends React.Component {
-  state = {
-    willActiveSelected: null
-  }
-
-  refPopup = React.createRef()
-
-  selectionRef = React.createRef()
-
-  apiDoFocus = () => {
-    this.selectionRef.current.apiDoFocus()
-  }
-
-  apiDoSelectWillActive = () => {
-    const { willActiveSelected } = this.state
-
-    if (willActiveSelected) {
-      this.props.onChange(this.state.willActiveSelected)
-    } else {
-      this.props.onChange(this.props.date || new Date())
-    }
-  }
-
-  handleSelectDate = date => {
-    this.refPopup.current.apiDoSetActive(false)
-    this.props.onChange(date)
-  }
-
-  handleKeyDown = event => {
-    if (
-      !(
-        event.key === 'ArrowUp' ||
-        event.key === 'ArrowRight' ||
-        event.key === 'ArrowDown' ||
-        event.key === 'ArrowLeft'
-      )
-    ) {
-      this.props.onKeyDown(event)
-      return
-    }
-
-    const { date } = this.props
-    const { willActiveSelected } = this.state
-    let will = willActiveSelected
-    if (will === null) {
-      will = willActiveSelected
-        ? moment(willActiveSelected)
-        : date
-        ? moment(date)
-        : moment()
-    }
-
-    if (event.key === 'ArrowUp') {
-      will = moment(will).add(-1, 'days')
-    } else if (event.key === 'ArrowDown') {
-      will = moment(will).add(1, 'days')
-    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      // 左右不做处理
-      this.props.onKeyDown(event)
-      return
-    }
-
-    this.setState({
-      willActiveSelected: will.toDate()
-    })
-  }
-
-  renderSelected = date => {
-    const { renderDate, enabledTimeSelect } = this.props
-    if (!date) {
-      return ''
-    }
-
-    if (renderDate) {
-      return renderDate(date)
-    }
-
-    if (enabledTimeSelect) {
-      return moment(date).format('YYYY-MM-DD HH:mm')
-    }
-    return moment(date).format('YYYY-MM-DD')
-  }
-
-  render() {
-    const {
-      date,
-      onChange,
-      placeholder,
-      disabled,
-      min,
-      max,
-      disabledDate,
-      className,
-      renderDate,
-      popoverType,
-      onKeyDown,
-      timeLimit,
-      enabledTimeSelect,
-      children,
-      renderBottom,
-      ...rest
-    } = this.props
-    const { willActiveSelected } = this.state
-
-    const popup = (
-      <Overlay
-        date={date}
-        onSelect={this.handleSelectDate}
-        willActiveSelected={willActiveSelected}
-        min={min}
-        max={max}
-        disabledDate={disabledDate}
-        timeLimit={timeLimit}
-        enabledTimeSelect={enabledTimeSelect}
-        renderBottom={renderBottom}
-      />
-    )
-
-    return (
-      <Popover
-        ref={this.refPopup}
-        popup={popup}
-        animName
-        disabled={disabled || false}
-        type={popoverType}
-        style={{ minWidth: '200px' }}
-      >
-        {children !== undefined ? (
-          children
-        ) : (
-          <Selection
-            ref={this.selectionRef}
-            {...rest}
-            selected={date}
-            onSelect={onChange}
-            disabled={disabled}
-            renderSelected={this.renderSelected}
-            className={classNames('gm-datepicker', className)}
-            placeholder={placeholder}
-            funIcon={<SVGCalendar />}
-            onKeyDown={this.handleKeyDown}
-          />
-        )}
-      </Popover>
-    )
-  }
-}
-
-DatePicker.displayName = 'DatePicker'
-
-DatePicker.propTypes = {
-  /** Date对象，表示选择的日期 */
-  date: PropTypes.object,
-  /** 选择日期回调，传入参数为Date对象 */
-  onChange: PropTypes.func.isRequired,
-  /** - */
-  placeholder: PropTypes.string,
-  /** 定义日期是否可选 */
-  disabled: PropTypes.bool,
-
-  /** Date对象，表示可选的最小日期 */
-  min: PropTypes.object,
-  /** Date对象，表示可选的最大日期 */
-  max: PropTypes.object,
-  /** 定义不可选择的日期，传入参数为Date对象，返回true or false */
-  disabledDate: PropTypes.func,
-  /** 定义日期框内value的展示形式，传入参数为Date对象，返回展示格式，如定义value展示为 'xx月-xx日‘ */
-  /** 若有时间选择，需带上时间 */
-  renderDate: PropTypes.func,
-  /** 添加底部自定义组件 */
-  renderBottom: PropTypes.element,
-
-  popoverType: PropTypes.oneOf(['focus', 'realFocus']),
-
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onKeyDown: PropTypes.func,
-
-  /** 时间选择 */
-  enabledTimeSelect: PropTypes.bool,
-  /** 时间点选择限制 - 默认值, 禁用时间段 */
-  timeLimit: PropTypes.shape({
-    /** 默认开始时间, HH:mm 格式, 没有默认展示为第一个可选时间点 */
-    defaultTime: PropTypes.object,
-    /** 禁用时间段函数，传入参数为Date对象，返回bool */
-    disabledSpan: PropTypes.func,
-    /** 时间间隔, 默认30分钟 */
-    timeSpan: PropTypes.number
-  })
-}
-
-DatePicker.defaultProps = {
-  onKeyDown: _.noop,
-  timeLimit: {
-    timeSpan: 30 * 60 * 1000
-  },
-  enabledTimeSelect: false
-}
-
-export default DatePicker
+import React from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+import classNames from 'classnames'
+import Popover from '../popover'
+import _ from 'lodash'
+import SVGCalendar from '../../../svg/calendar.svg'
+import Selection from '../selection'
+
+import Overlay from './overlay'
+
+/**
+ * DatePicker -- 日期选择
+ *
+ * 主要功能：日期选择
+ * */
+
+class DatePicker extends React.Component {
+  state = {
+    willActiveSelected: null
+  }
+
+  refPopup = React.createRef()
+
+  selectionRef = React.createRef()
+
+  apiDoFocus = () => {
+    this.selectionRef.current.apiDoFocus()
+  }
+
+  apiDoSelectWillActive = () => {
+    const { willActiveSelected } = this.state
+
+    if (willActiveSelected) {
+      this.props.onChange(this.state.willActiveSelected)
+    } else {
+      this.props.onChange(this.props.date || new Date())
+    }
+  }
+
+  handleSelectDate = date => {
+    this.refPopup.current.apiDoSetActive(false)
+    this.props.onChange(date)
+  }
+
+  handleKeyDown = event => {
+    if (
+      !(
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowRight' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft'
+      )
+    ) {
+      this.props.onKeyDown(event)
+      return
+    }
+
+    const { date } = this.props
+    const { willActiveSelected } = this.state
+    let will = willActiveSelected
+    if (will === null) {
+      will = willActiveSelected
+        ? moment(willActiveSelected)
+        : date
+        ? moment(date)
+        : moment()
+    }
+
+    if (event.key === 'ArrowUp') {
+      will = moment(will).add(-1, 'days')
+    } else if (event.key === 'ArrowDown') {
+      will = moment(will).add(1, 'days')
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      // 左右不做处理
+      this.props.onKeyDown(event)
+      return
+    }
+
+    this.setState({
+      willActiveSelected: will.toDate()
+    })
+  }
+
+  renderSelected = date => {
+    const { renderDate, enabledTimeSelect } = this.props
+    if (!date) {
+      return ''
+    }
+
+    if (renderDate) {
+      return renderDate(date)
+    }
+
+    if (enabledTimeSelect) {
+      return moment(date).format('YYYY-MM-DD HH:mm')
+    }
+    return moment(date).format('YYYY-MM-DD')
+  }
+
+  render() {
+    const {
+      date,
+      onChange,
+      placeholder,
+      disabled,
+      min,
+      max,
+      disabledDate,
+      className,
+      renderDate,
+      popoverType,
+      onKeyDown,
+      timeLimit,
+      enabledTimeSelect,
+      children,
+      renderBottom,
+      ...rest
+    } = this.props
+    const { willActiveSelected } = this.state
+
+    const popup = (
+      <Overlay
+        date={date}
+        onSelect={this.handleSelectDate}
+        willActiveSelected={willActiveSelected}
+        min={min}
+        max={max}
+        disabledDate={disabledDate}
+        timeLimit={timeLimit}
+        enabledTimeSelect={enabledTimeSelect}
+        renderBottom={renderBottom}
+      />
+    )
+
+    return (
+      <Popover
+        ref={this.refPopup}
+        popup={popup}
+        animName
+        disabled={disabled || false}
+        type={popoverType}
+        style={{ minWidth: '200px' }}
+      >
+        {children !== undefined ? (
+          children
+        ) : (
+          <Selection
+            ref={this.selectionRef}
+            {...rest}
+            selected={date}
+            onSelect={onChange}
+            disabled={disabled}
+            renderSelected={this.renderSelected}
+            className={classNames('gm-datepicker', className)}
+            placeholder={placeholder}
+            funIcon={<SVGCalendar />}
+            onKeyDown={this.handleKeyDown}
+          />
+        )}
+      </Popover>
+    )
+  }
+}
+
+DatePicker.displayName = 'DatePicker'
+
+DatePicker.propTypes = {
+  /** Date对象，表示选择的日期 */
+  date: PropTypes.object,
+  /** 选择日期回调，传入参数为Date对象 */
+  onChange: PropTypes.func.isRequired,
+  /** - */
+  placeholder: PropTypes.string,
+  /** 定义日期是否可选 */
+  disabled: PropTypes.bool,
+
+  /** Date对象，表示可选的最小日期 */
+  min: PropTypes.object,
+  /** Date对象，表示可选的最大日期 */
+  max: PropTypes.object,
+  /** 定义不可选择的日期，传入参数为Date对象，返回true or false */
+  disabledDate: PropTypes.func,
+  /** 定义日期框内value的展示形式，传入参数为Date对象，返回展示格式，如定义value展示为 'xx月-xx日‘ */
+  /** 若有时间选择，需带上时间 */
+  renderDate: PropTypes.func,
+  /** 添加底部自定义组件 */
+  renderBottom: PropTypes.element,
+
+  popoverType: PropTypes.oneOf(['focus', 'realFocus']),
+
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onKeyDown: PropTypes.func,
+
+  /** 时间选择 */
+  enabledTimeSelect: PropTypes.bool,
+  /** 时间点选择限制 - 默认值, 禁用时间段 */
+  timeLimit: PropTypes.shape({
+    /** 默认开始时间, HH:mm 格式, 没有默认展示为第一个可选时间点 */
+    defaultTime: PropTypes.object,
+    /** 禁用时间段函数，传入参数为Date对象，返回bool */
+    disabledSpan: PropTypes.func,
+    /** 时间间隔, 默认30分钟 */
+    timeSpan: PropTypes.number
+  })
+}
+
+DatePicker.defaultProps = {
+  onKeyDown: _.noop,
+  timeLimit: {
+    timeSpan: 30 * 60 * 1000
+  },
+  enabledTimeSelect: false
+}
+
+export default DatePicker