@gm-pc/react 1.25.1-beta.1 → 1.26.0-beta.0

package/src/component/time_span/stories.tsx

@@ -1,87 +1,87 @@
-import React from 'react'
-import moment from 'moment'
-import { observable } from 'mobx'
-
-import TimeSpanPicker from './time_span_picker'
-import TimeSpan from './time_span'
-
-const store = observable({
-  date: moment().startOf('day').toDate(),
-  customDate: moment().hour(10).minute(30).toDate(),
-  setDate(date: any) {
-    this.date = date
-  },
-  setCustomDate(date: any) {
-    this.customDate = date
-  },
-})
-
-export const ComTimeSpan = () => (
-  <TimeSpan
-    time={store.date}
-    onChange={(date) => {
-      store.setDate(date)
-    }}
-  />
-)
-
-export const ComTimeSpanPicker = () => (
-  <TimeSpanPicker
-    date={store.date}
-    onChange={(date) => {
-      store.setDate(date)
-    }}
-  />
-)
-
-export const ComTimeSpanPickerWithDisabledSpan = () => (
-  <TimeSpanPicker
-    date={store.date}
-    onChange={(date) => {
-      store.setDate(date)
-    }}
-    disabledSpan={(spanMoment) =>
-      moment(spanMoment).isSameOrAfter(moment('11:00', 'HH:mm')) &&
-      moment(spanMoment).isSameOrBefore(moment('18:30', 'HH:mm'))
-    }
-  />
-)
-
-export const ComTimeSpanPickerWithSpan = () => (
-  <TimeSpanPicker
-    date={store.date}
-    max={moment().hour(23).minute(0).toDate()}
-    span={60 * 60 * 1000}
-    onChange={(date) => {
-      store.setDate(date)
-    }}
-  />
-)
-
-export const ComTimeSpanPickerWithCustom = () => (
-  <>
-    <div className='gm-margin-tb-10'>自定义children</div>
-    <TimeSpanPicker
-      date={store.date}
-      onChange={(date) => {
-        store.setDate(date)
-      }}
-    >
-      <span>{store.date ? moment(store.date).format('HH:mm') : '请点击选择'}</span>
-    </TimeSpanPicker>
-    <div className='gm-margin-tb-10'>自定义开始时间跟结束时间</div>
-    <TimeSpanPicker
-      date={store.customDate}
-      beginTime={moment().hour(8).minute(30).toDate()}
-      endTime={moment().hour(22).minute(30).toDate()}
-      span={60 * 60 * 1000}
-      onChange={(date) => {
-        store.setCustomDate(date)
-      }}
-    />
-  </>
-)
-
-export default {
-  title: '表单/TimeSpan',
-}
+import React from 'react'
+import moment from 'moment'
+import { observable } from 'mobx'
+
+import TimeSpanPicker from './time_span_picker'
+import TimeSpan from './time_span'
+
+const store = observable({
+  date: moment().startOf('day').toDate(),
+  customDate: moment().hour(10).minute(30).toDate(),
+  setDate(date: any) {
+    this.date = date
+  },
+  setCustomDate(date: any) {
+    this.customDate = date
+  },
+})
+
+export const ComTimeSpan = () => (
+  <TimeSpan
+    time={store.date}
+    onChange={(date) => {
+      store.setDate(date)
+    }}
+  />
+)
+
+export const ComTimeSpanPicker = () => (
+  <TimeSpanPicker
+    date={store.date}
+    onChange={(date) => {
+      store.setDate(date)
+    }}
+  />
+)
+
+export const ComTimeSpanPickerWithDisabledSpan = () => (
+  <TimeSpanPicker
+    date={store.date}
+    onChange={(date) => {
+      store.setDate(date)
+    }}
+    disabledSpan={(spanMoment) =>
+      moment(spanMoment).isSameOrAfter(moment('11:00', 'HH:mm')) &&
+      moment(spanMoment).isSameOrBefore(moment('18:30', 'HH:mm'))
+    }
+  />
+)
+
+export const ComTimeSpanPickerWithSpan = () => (
+  <TimeSpanPicker
+    date={store.date}
+    max={moment().hour(23).minute(0).toDate()}
+    span={60 * 60 * 1000}
+    onChange={(date) => {
+      store.setDate(date)
+    }}
+  />
+)
+
+export const ComTimeSpanPickerWithCustom = () => (
+  <>
+    <div className='gm-margin-tb-10'>自定义children</div>
+    <TimeSpanPicker
+      date={store.date}
+      onChange={(date) => {
+        store.setDate(date)
+      }}
+    >
+      <span>{store.date ? moment(store.date).format('HH:mm') : '请点击选择'}</span>
+    </TimeSpanPicker>
+    <div className='gm-margin-tb-10'>自定义开始时间跟结束时间</div>
+    <TimeSpanPicker
+      date={store.customDate}
+      beginTime={moment().hour(8).minute(30).toDate()}
+      endTime={moment().hour(22).minute(30).toDate()}
+      span={60 * 60 * 1000}
+      onChange={(date) => {
+        store.setCustomDate(date)
+      }}
+    />
+  </>
+)
+
+export default {
+  title: '表单/TimeSpan',
+}

package/src/component/time_span/style.less

@@ -1,45 +1,45 @@
-.gm-time-span {
-  overflow: hidden;
-  border: 1px solid var(--gm-color-border);
-  background: white;
-  padding: 10px 0;
-
-  .gm-time-span-list {
-    width: 130px;
-    padding: 0 5px;
-
-    .gm-time-span-list-cell {
-      color: black;
-      text-align: center;
-      cursor: pointer;
-      height: 22px;
-      margin: 2px 5px;
-      line-height: 22px;
-      border: 1px solid transparent;
-
-      &:hover {
-        background-color: var(--gm-color-primary);
-        color: white;
-      }
-
-      &.active {
-        border: 1px solid var(--gm-color-primary);
-      }
-
-      &.disabled {
-        background: white;
-        color: var(--gm-color-secondary);
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.gm-time-span-picker {
-  vertical-align: middle;
-  display: inline-block;
-
-  .gm-time-span {
-    border: none;
-  }
-}
+.gm-time-span {
+  overflow: hidden;
+  border: 1px solid var(--gm-color-border);
+  background: white;
+  padding: 10px 0;
+
+  .gm-time-span-list {
+    width: 130px;
+    padding: 0 5px;
+
+    .gm-time-span-list-cell {
+      color: black;
+      text-align: center;
+      cursor: pointer;
+      height: 22px;
+      margin: 2px 5px;
+      line-height: 22px;
+      border: 1px solid transparent;
+
+      &:hover {
+        background-color: var(--gm-color-primary);
+        color: white;
+      }
+
+      &.active {
+        border: 1px solid var(--gm-color-primary);
+      }
+
+      &.disabled {
+        background: white;
+        color: var(--gm-color-secondary);
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.gm-time-span-picker {
+  vertical-align: middle;
+  display: inline-block;
+
+  .gm-time-span {
+    border: none;
+  }
+}

package/src/component/time_span/time_span.tsx

@@ -1,129 +1,129 @@
-import React, { FC, ReactNode } from 'react'
-import moment, { Moment } from 'moment'
-import _ from 'lodash'
-import classNames from 'classnames'
-
-import { Flex } from '../flex'
-import { TimeSpanProps } from './types'
-import { getTime, renderItemFunc } from './util'
-
-const initMin = moment().startOf('day').toDate()
-const initMax = moment().endOf('day').toDate()
-
-const TimeSpan: FC<TimeSpanProps> = ({
-  min = initMin,
-  max = initMax,
-  disabledSpan,
-  span = 30 * 60 * 1000,
-  time,
-  renderItem = renderItemFunc,
-  onChange,
-  beginTime,
-  enabledEndTimeOfDay,
-  endTime,
-}) => {
-  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 handleSelectTime = (value: Moment): void => {
-    onChange && onChange(value.toDate())
-  }
-
-  const isActive = (value: Moment): boolean => {
-    const select = moment(time)
-
-    // 判断时/分 是否相同
-    return value.hour() === select.hour() && value.minute() === select.minute()
-  }
-
-  const isDisable = (time: Moment): boolean => {
-    // 无需限制
-    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.toDate())) as boolean)
-    )
-  }
-
-  const renderTimesList = (cells: Moment[]): ReactNode => {
-    let width = '50px'
-    if (span! >= 60 * 60 * 1000) {
-      width = '100px'
-    }
-
-    return (
-      <Flex wrap row className='gm-time-span-list'>
-        {cells.map((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 = cells.filter((cell) => cell.length).length * 130
-
-  return (
-    <Flex row className='gm-time-span' style={{ width: `${totalWidth}px` }}>
-      {cells.map((cell, index) => {
-        if (!cell.length) {
-          // 时间间隔比较大时，某一列无数据的情况
-          return null
-        }
-        return (
-          <Flex
-            key={index}
-            className={classNames({
-              'gm-border-right': index !== cells.length - 1,
-            })}
-            alignStart
-          >
-            {renderTimesList(cell)}
-          </Flex>
-        )
-      })}
-    </Flex>
-  )
-}
-
-export default TimeSpan
+import React, { FC, ReactNode } from 'react'
+import moment, { Moment } from 'moment'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+import { Flex } from '../flex'
+import { TimeSpanProps } from './types'
+import { getTime, renderItemFunc } from './util'
+
+const initMin = moment().startOf('day').toDate()
+const initMax = moment().endOf('day').toDate()
+
+const TimeSpan: FC<TimeSpanProps> = ({
+  min = initMin,
+  max = initMax,
+  disabledSpan,
+  span = 30 * 60 * 1000,
+  time,
+  renderItem = renderItemFunc,
+  onChange,
+  beginTime,
+  enabledEndTimeOfDay,
+  endTime,
+}) => {
+  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 handleSelectTime = (value: Moment): void => {
+    onChange && onChange(value.toDate())
+  }
+
+  const isActive = (value: Moment): boolean => {
+    const select = moment(time)
+
+    // 判断时/分 是否相同
+    return value.hour() === select.hour() && value.minute() === select.minute()
+  }
+
+  const isDisable = (time: Moment): boolean => {
+    // 无需限制
+    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.toDate())) as boolean)
+    )
+  }
+
+  const renderTimesList = (cells: Moment[]): ReactNode => {
+    let width = '50px'
+    if (span! >= 60 * 60 * 1000) {
+      width = '100px'
+    }
+
+    return (
+      <Flex wrap row className='gm-time-span-list'>
+        {cells.map((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 = cells.filter((cell) => cell.length).length * 130
+
+  return (
+    <Flex row className='gm-time-span' style={{ width: `${totalWidth}px` }}>
+      {cells.map((cell, index) => {
+        if (!cell.length) {
+          // 时间间隔比较大时，某一列无数据的情况
+          return null
+        }
+        return (
+          <Flex
+            key={index}
+            className={classNames({
+              'gm-border-right': index !== cells.length - 1,
+            })}
+            alignStart
+          >
+            {renderTimesList(cell)}
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default TimeSpan

package/src/component/time_span/time_span_picker.tsx

@@ -1,71 +1,71 @@
-import React, { FC, useRef } from 'react'
-import _ from 'lodash'
-import classNames from 'classnames'
-
-import { Popover } from '../popover'
-import { Selection } from '../selection'
-import TimeSpan from './time_span'
-import { TimeSpanPickerProps } from './types'
-import { renderItemFunc } from './util'
-
-const TimeSpanPicker: FC<TimeSpanPickerProps> = ({
-  min,
-  max,
-  disabledSpan,
-  span,
-  date,
-  children,
-  disabled,
-  renderItem = renderItemFunc,
-  onChange,
-  className,
-  isInPopup,
-  enabledEndTimeOfDay,
-  beginTime,
-  endTime,
-  ...rest
-}) => {
-  const popoverRef = useRef<Popover>(null)
-
-  const handleSelectTime = (date: Date): void => {
-    popoverRef.current!.apiDoSetActive()
-    onChange(date)
-  }
-
-  // disabledClose，此函数不会运行
-  const handleSelect = (): void => {}
-
-  const popup = (
-    <TimeSpan
-      beginTime={beginTime}
-      endTime={endTime}
-      min={min}
-      max={max}
-      span={span}
-      time={date}
-      onChange={handleSelectTime}
-      disabledSpan={disabledSpan}
-      renderItem={renderItem}
-      enabledEndTimeOfDay={enabledEndTimeOfDay}
-    />
-  )
-
-  const selected = date ? { value: date, text: renderItem!(date) } : null
-
-  return (
-    <Popover popup={popup} ref={popoverRef} isInPopup={isInPopup}>
-      {children ?? (
-        <Selection
-          {...rest}
-          selected={selected}
-          onSelect={handleSelect}
-          className={classNames('gm-time-span-picker', className)}
-          disabled={disabled}
-          disabledClose
-        />
-      )}
-    </Popover>
-  )
-}
-
-export default TimeSpanPicker
+import React, { FC, useRef } from 'react'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+import { Popover } from '../popover'
+import { Selection } from '../selection'
+import TimeSpan from './time_span'
+import { TimeSpanPickerProps } from './types'
+import { renderItemFunc } from './util'
+
+const TimeSpanPicker: FC<TimeSpanPickerProps> = ({
+  min,
+  max,
+  disabledSpan,
+  span,
+  date,
+  children,
+  disabled,
+  renderItem = renderItemFunc,
+  onChange,
+  className,
+  isInPopup,
+  enabledEndTimeOfDay,
+  beginTime,
+  endTime,
+  ...rest
+}) => {
+  const popoverRef = useRef<Popover>(null)
+
+  const handleSelectTime = (date: Date): void => {
+    popoverRef.current!.apiDoSetActive()
+    onChange(date)
+  }
+
+  // disabledClose，此函数不会运行
+  const handleSelect = (): void => {}
+
+  const popup = (
+    <TimeSpan
+      beginTime={beginTime}
+      endTime={endTime}
+      min={min}
+      max={max}
+      span={span}
+      time={date}
+      onChange={handleSelectTime}
+      disabledSpan={disabledSpan}
+      renderItem={renderItem}
+      enabledEndTimeOfDay={enabledEndTimeOfDay}
+    />
+  )
+
+  const selected = date ? { value: date, text: renderItem!(date) } : null
+
+  return (
+    <Popover popup={popup} ref={popoverRef} isInPopup={isInPopup}>
+      {children ?? (
+        <Selection
+          {...rest}
+          selected={selected}
+          onSelect={handleSelect}
+          className={classNames('gm-time-span-picker', className)}
+          disabled={disabled}
+          disabledClose
+        />
+      )}
+    </Popover>
+  )
+}
+
+export default TimeSpanPicker