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

package/src/component/date_picker/date_picker.tsx

@@ -1,187 +1,187 @@
-import React, {
-  ReactNode,
-  KeyboardEvent,
-  Component,
-  createRef,
-  CSSProperties,
-} from 'react'
-import classNames from 'classnames'
-import moment from 'moment'
-import _ from 'lodash'
-
-import { Popover, PopoverTrigger } from '../popover'
-import { Selection } from '../selection'
-import { TimeLimit } from './types'
-import SVGCalendar from '../../svg/calendar.svg'
-import Overlay from './overlay'
-
-interface DatePickerState {
-  willActiveSelected: Date | null
-}
-
-export interface DatePickerProps {
-  /* 选择的日期 */
-  date?: Date | null
-  /* 选择日期的回调函数 */
-  onChange?(date: Date | null): void
-  /* 展示栏placeholder */
-  placeholder?: string
-  /* 禁用 */
-  disabled?: boolean
-  /* 最小可选日期 */
-  min?: Date
-  /* 最大可选日期 */
-  max?: Date
-  /* 自定义禁用日期，优先级高于min，max */
-  disabledDate?(date: Date): boolean
-  /* 自定义日期展示格式 */
-  renderDate?(date: Date): ReactNode
-  style?: CSSProperties
-  className?: string
-  onKeyDown?(event: KeyboardEvent): void
-  /* 时间选择 */
-  enabledTimeSelect?: boolean
-  /* 时间选择限制 */
-  timeLimit?: TimeLimit
-  /* 目前内部用，触发方式 */
-  popoverType?: PopoverTrigger
-  /** 选择日期之后是否保留时间 */
-  preserveTime?: boolean
-}
-
-class DatePicker extends Component<DatePickerProps, DatePickerState> {
-  static defaultProps = {
-    onKeyDown: _.noop,
-    timeLimit: {
-      timeSpan: 30 * 60 * 1000,
-    },
-  }
-
-  readonly state: DatePickerState = {
-    willActiveSelected: null,
-  }
-
-  private _popoverRef = createRef<Popover>()
-  private _selectionRef = createRef<Selection>()
-
-  public apiDoFocus(): void {
-    this._selectionRef.current!.apiDoFocus()
-  }
-
-  public apiDoSelectWillActive(): void {
-    const { willActiveSelected } = this.state
-    const { onChange, date } = this.props
-    onChange(willActiveSelected ?? date ?? new Date())
-  }
-
-  private _handleSelectDate = (date: Date): void => {
-    this._popoverRef.current!.apiDoSetActive()
-    const { onChange } = this.props
-    onChange(date)
-  }
-
-  private _handleKeyDown = (event: KeyboardEvent): void => {
-    if (
-      !(
-        event.key === 'ArrowUp' ||
-        event.key === 'ArrowRight' ||
-        event.key === 'ArrowDown' ||
-        event.key === 'ArrowLeft'
-      )
-    ) {
-      const { onKeyDown } = this.props
-      onKeyDown && onKeyDown(event)
-      return
-    }
-
-    const { date } = this.props
-    const { willActiveSelected } = this.state
-    let will = moment(willActiveSelected ?? date ?? undefined)
-
-    if (event.key === 'ArrowUp') {
-      will = will.subtract(1, 'days')
-    } else if (event.key === 'ArrowDown') {
-      will = will.add(1, 'days')
-    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-      const { onKeyDown } = this.props
-      onKeyDown && onKeyDown(event)
-      return
-    }
-    this.setState({
-      willActiveSelected: will.toDate(),
-    })
-  }
-
-  private _renderSelected = (date: Date): ReactNode => {
-    const { renderDate, enabledTimeSelect } = this.props
-    if (!date) {
-      return ''
-    }
-    if (renderDate) {
-      return renderDate(date)
-    }
-    const format = enabledTimeSelect ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
-    return moment(date).format(format)
-  }
-
-  render() {
-    const {
-      date,
-      onChange,
-      placeholder,
-      disabled,
-      min,
-      max,
-      disabledDate,
-      className,
-      renderDate,
-      onKeyDown,
-      timeLimit,
-      enabledTimeSelect,
-      popoverType,
-      children,
-      preserveTime,
-      ...rest
-    } = this.props
-    const { willActiveSelected } = this.state
-    const popup = (
-      <Overlay
-        willActiveSelected={willActiveSelected}
-        onSelect={this._handleSelectDate}
-        max={max}
-        date={date!}
-        disabledDate={disabledDate}
-        min={min}
-        timeLimit={timeLimit!}
-        enabledTimeSelect={enabledTimeSelect}
-        preserveTime={preserveTime}
-      />
-    )
-    return (
-      <Popover
-        popup={popup}
-        ref={this._popoverRef}
-        disabled={disabled}
-        type={popoverType}
-        style={{ minWidth: '200px' }}
-      >
-        {children ?? (
-          <Selection
-            ref={this._selectionRef}
-            {...rest}
-            selected={date!}
-            onSelect={onChange}
-            disabled={disabled}
-            renderSelected={this._renderSelected}
-            className={classNames('gm-date-picker', className)}
-            placeholder={placeholder}
-            funIcon={<SVGCalendar />}
-            onKeyDown={this._handleKeyDown}
-          />
-        )}
-      </Popover>
-    )
-  }
-}
-
-export default DatePicker
+import React, {
+  ReactNode,
+  KeyboardEvent,
+  Component,
+  createRef,
+  CSSProperties,
+} from 'react'
+import classNames from 'classnames'
+import moment from 'moment'
+import _ from 'lodash'
+
+import { Popover, PopoverTrigger } from '../popover'
+import { Selection } from '../selection'
+import { TimeLimit } from './types'
+import SVGCalendar from '../../svg/calendar.svg'
+import Overlay from './overlay'
+
+interface DatePickerState {
+  willActiveSelected: Date | null
+}
+
+export interface DatePickerProps {
+  /* 选择的日期 */
+  date?: Date | null
+  /* 选择日期的回调函数 */
+  onChange?(date: Date | null): void
+  /* 展示栏placeholder */
+  placeholder?: string
+  /* 禁用 */
+  disabled?: boolean
+  /* 最小可选日期 */
+  min?: Date
+  /* 最大可选日期 */
+  max?: Date
+  /* 自定义禁用日期，优先级高于min，max */
+  disabledDate?(date: Date): boolean
+  /* 自定义日期展示格式 */
+  renderDate?(date: Date): ReactNode
+  style?: CSSProperties
+  className?: string
+  onKeyDown?(event: KeyboardEvent): void
+  /* 时间选择 */
+  enabledTimeSelect?: boolean
+  /* 时间选择限制 */
+  timeLimit?: TimeLimit
+  /* 目前内部用，触发方式 */
+  popoverType?: PopoverTrigger
+  /** 选择日期之后是否保留时间 */
+  preserveTime?: boolean
+}
+
+class DatePicker extends Component<DatePickerProps, DatePickerState> {
+  static defaultProps = {
+    onKeyDown: _.noop,
+    timeLimit: {
+      timeSpan: 30 * 60 * 1000,
+    },
+  }
+
+  readonly state: DatePickerState = {
+    willActiveSelected: null,
+  }
+
+  private _popoverRef = createRef<Popover>()
+  private _selectionRef = createRef<Selection>()
+
+  public apiDoFocus(): void {
+    this._selectionRef.current!.apiDoFocus()
+  }
+
+  public apiDoSelectWillActive(): void {
+    const { willActiveSelected } = this.state
+    const { onChange, date } = this.props
+    onChange(willActiveSelected ?? date ?? new Date())
+  }
+
+  private _handleSelectDate = (date: Date): void => {
+    this._popoverRef.current!.apiDoSetActive()
+    const { onChange } = this.props
+    onChange(date)
+  }
+
+  private _handleKeyDown = (event: KeyboardEvent): void => {
+    if (
+      !(
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowRight' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft'
+      )
+    ) {
+      const { onKeyDown } = this.props
+      onKeyDown && onKeyDown(event)
+      return
+    }
+
+    const { date } = this.props
+    const { willActiveSelected } = this.state
+    let will = moment(willActiveSelected ?? date ?? undefined)
+
+    if (event.key === 'ArrowUp') {
+      will = will.subtract(1, 'days')
+    } else if (event.key === 'ArrowDown') {
+      will = will.add(1, 'days')
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      const { onKeyDown } = this.props
+      onKeyDown && onKeyDown(event)
+      return
+    }
+    this.setState({
+      willActiveSelected: will.toDate(),
+    })
+  }
+
+  private _renderSelected = (date: Date): ReactNode => {
+    const { renderDate, enabledTimeSelect } = this.props
+    if (!date) {
+      return ''
+    }
+    if (renderDate) {
+      return renderDate(date)
+    }
+    const format = enabledTimeSelect ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'
+    return moment(date).format(format)
+  }
+
+  render() {
+    const {
+      date,
+      onChange,
+      placeholder,
+      disabled,
+      min,
+      max,
+      disabledDate,
+      className,
+      renderDate,
+      onKeyDown,
+      timeLimit,
+      enabledTimeSelect,
+      popoverType,
+      children,
+      preserveTime,
+      ...rest
+    } = this.props
+    const { willActiveSelected } = this.state
+    const popup = (
+      <Overlay
+        willActiveSelected={willActiveSelected}
+        onSelect={this._handleSelectDate}
+        max={max}
+        date={date!}
+        disabledDate={disabledDate}
+        min={min}
+        timeLimit={timeLimit!}
+        enabledTimeSelect={enabledTimeSelect}
+        preserveTime={preserveTime}
+      />
+    )
+    return (
+      <Popover
+        popup={popup}
+        ref={this._popoverRef}
+        disabled={disabled}
+        type={popoverType}
+        style={{ minWidth: '200px' }}
+      >
+        {children ?? (
+          <Selection
+            ref={this._selectionRef}
+            {...rest}
+            selected={date!}
+            onSelect={onChange}
+            disabled={disabled}
+            renderSelected={this._renderSelected}
+            className={classNames('gm-date-picker', className)}
+            placeholder={placeholder}
+            funIcon={<SVGCalendar />}
+            onKeyDown={this._handleKeyDown}
+          />
+        )}
+      </Popover>
+    )
+  }
+}
+
+export default DatePicker

package/src/component/date_picker/index.ts

@@ -1,2 +1,2 @@
-export { default as DatePicker } from './date_picker'
-export type { DatePickerProps } from './date_picker'
+export { default as DatePicker } from './date_picker'
+export type { DatePickerProps } from './date_picker'

package/src/component/date_picker/overlay.tsx

@@ -1,115 +1,115 @@
-import React, { FC, useState } from 'react'
-import _ from 'lodash'
-import moment from 'moment'
-
-import { TimeLimit } from './types'
-import { Flex } from '../flex'
-import { Calendar } from '../calendar'
-import { Button } from '../button'
-import { getLocale } from '@gm-pc/locales'
-import { getTimeCells, setTimes } from '../../common/utils/date'
-import TimeSelect from './time_select'
-
-interface OverlayProps {
-  date?: Date
-  willActiveSelected: Date | null
-  min?: Date
-  max?: Date
-  onSelect(date: Date | null): void
-  disabledDate?(date: Date): boolean
-  timeLimit: TimeLimit
-  enabledTimeSelect?: boolean
-  preserveTime?: boolean
-}
-
-const Overlay: FC<OverlayProps> = ({
-  date,
-  willActiveSelected,
-  min,
-  max,
-  onSelect,
-  timeLimit,
-  disabledDate,
-  enabledTimeSelect,
-  preserveTime,
-}) => {
-  const [selectedDate, setSelectedDate] = useState(date)
-
-  // 选择日期后渲染时间，有默认时间则展示，无展示为可选的第一个时间
-  const getTime = (currentDate: Date): Date => {
-    const { defaultTime, disabledSpan, timeSpan } = timeLimit
-    if (defaultTime) {
-      return defaultTime
-    }
-    const cells = getTimeCells(timeSpan!)
-    cells.pop() // 去掉 24:00
-    let index = 0
-    if (disabledSpan) {
-      index = _.findIndex(cells, (cell) => {
-        const _cell = setTimes(moment(currentDate), cell)
-        const disabled = disabledSpan(_cell.toDate(), currentDate)
-        return !disabled
-      })
-    }
-    return cells[index].toDate()
-  }
-
-  const _handelSelect = (value: Date, type: 'date' | 'time'): void => {
-    if (!enabledTimeSelect) {
-      onSelect(value)
-      return
-    }
-    let date: Date
-    let time: Date
-    if (type === 'date') {
-      date = value
-      time = getTime(value)
-      if (preserveTime && selectedDate) {
-        // 不修改时分秒，否则会导致时间变化
-        time = moment(date)
-          .set('hour', selectedDate.getHours())
-          .set('minute', selectedDate.getMinutes())
-          .toDate()
-      }
-    } else {
-      date = selectedDate!
-      time = value
-    }
-    const newDate = setTimes(moment(date), moment(time)).toDate()
-    setSelectedDate(newDate)
-  }
-
-  return (
-    <Flex column className='gm-date-picker-overlay'>
-      <Calendar
-        className='gm-date-picker-overlay-calendar'
-        selected={selectedDate}
-        onSelect={(value) => _handelSelect(value, 'date')}
-        willActiveSelected={willActiveSelected!}
-        min={min}
-        max={max}
-        disabledDate={disabledDate}
-      />
-      <TimeSelect
-        date={selectedDate}
-        timeLimit={timeLimit}
-        onSelectTime={(value) => _handelSelect(value, 'time')}
-        enabledTimeSelect={enabledTimeSelect}
-      />
-      {enabledTimeSelect && (
-        <Flex justifyEnd className='gm-border-top gm-padding-lr-10 gm-padding-tb-5'>
-          <Button
-            type='primary'
-            className='gm-padding-lr-20'
-            disabled={!selectedDate}
-            onClick={() => onSelect(selectedDate!)}
-            style={{ height: '28px' }}
-          >
-            {getLocale('确定')}
-          </Button>
-        </Flex>
-      )}
-    </Flex>
-  )
-}
-export default Overlay
+import React, { FC, useState } from 'react'
+import _ from 'lodash'
+import moment from 'moment'
+
+import { TimeLimit } from './types'
+import { Flex } from '../flex'
+import { Calendar } from '../calendar'
+import { Button } from '../button'
+import { getLocale } from '@gm-pc/locales'
+import { getTimeCells, setTimes } from '../../common/utils/date'
+import TimeSelect from './time_select'
+
+interface OverlayProps {
+  date?: Date
+  willActiveSelected: Date | null
+  min?: Date
+  max?: Date
+  onSelect(date: Date | null): void
+  disabledDate?(date: Date): boolean
+  timeLimit: TimeLimit
+  enabledTimeSelect?: boolean
+  preserveTime?: boolean
+}
+
+const Overlay: FC<OverlayProps> = ({
+  date,
+  willActiveSelected,
+  min,
+  max,
+  onSelect,
+  timeLimit,
+  disabledDate,
+  enabledTimeSelect,
+  preserveTime,
+}) => {
+  const [selectedDate, setSelectedDate] = useState(date)
+
+  // 选择日期后渲染时间，有默认时间则展示，无展示为可选的第一个时间
+  const getTime = (currentDate: Date): Date => {
+    const { defaultTime, disabledSpan, timeSpan } = timeLimit
+    if (defaultTime) {
+      return defaultTime
+    }
+    const cells = getTimeCells(timeSpan!)
+    cells.pop() // 去掉 24:00
+    let index = 0
+    if (disabledSpan) {
+      index = _.findIndex(cells, (cell) => {
+        const _cell = setTimes(moment(currentDate), cell)
+        const disabled = disabledSpan(_cell.toDate(), currentDate)
+        return !disabled
+      })
+    }
+    return cells[index].toDate()
+  }
+
+  const _handelSelect = (value: Date, type: 'date' | 'time'): void => {
+    if (!enabledTimeSelect) {
+      onSelect(value)
+      return
+    }
+    let date: Date
+    let time: Date
+    if (type === 'date') {
+      date = value
+      time = getTime(value)
+      if (preserveTime && selectedDate) {
+        // 不修改时分秒，否则会导致时间变化
+        time = moment(date)
+          .set('hour', selectedDate.getHours())
+          .set('minute', selectedDate.getMinutes())
+          .toDate()
+      }
+    } else {
+      date = selectedDate!
+      time = value
+    }
+    const newDate = setTimes(moment(date), moment(time)).toDate()
+    setSelectedDate(newDate)
+  }
+
+  return (
+    <Flex column className='gm-date-picker-overlay'>
+      <Calendar
+        className='gm-date-picker-overlay-calendar'
+        selected={selectedDate}
+        onSelect={(value) => _handelSelect(value, 'date')}
+        willActiveSelected={willActiveSelected!}
+        min={min}
+        max={max}
+        disabledDate={disabledDate}
+      />
+      <TimeSelect
+        date={selectedDate}
+        timeLimit={timeLimit}
+        onSelectTime={(value) => _handelSelect(value, 'time')}
+        enabledTimeSelect={enabledTimeSelect}
+      />
+      {enabledTimeSelect && (
+        <Flex justifyEnd className='gm-border-top gm-padding-lr-10 gm-padding-tb-5'>
+          <Button
+            type='primary'
+            className='gm-padding-lr-20'
+            disabled={!selectedDate}
+            onClick={() => onSelect(selectedDate!)}
+            style={{ height: '28px' }}
+          >
+            {getLocale('确定')}
+          </Button>
+        </Flex>
+      )}
+    </Flex>
+  )
+}
+export default Overlay