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

package/src/component/time_span/types.ts

@@ -1,58 +1,58 @@
-import { ReactNode, CSSProperties } from 'react'
-import { Moment } from 'moment'
-
-interface TimeSpanProps {
-  /** 最小可选时间，默认一天的开始时间 */
-  min?: Date
-  /** 最大可选时间，默认一天的结束时间 */
-  max?: Date
-  /** 禁用时间函数，优先级大于min，max */
-  disabledSpan?(date: Date): boolean
-  /** 时间跨度，默认30分钟 */
-  span?: number
-  /** 选中时间 */
-  time?: Date
-  /** 渲染选中 */
-  renderItem?(date: Date): ReactNode
-  /** 选中回调 */
-  onChange?(date: Date): void
-  /** 自定义开始时间，默认从00:00开始 */
-  beginTime?: Date
-  /** 自定义结束使劲啊 */
-  endTime?: Date
-  /** 内部展示24:00用 */
-  enabledEndTimeOfDay?: boolean
-}
-
-interface TimeSpanPickerProps {
-  /** 选择时间 */
-  date: Date
-  /** 选择回调 */
-  onChange(date: Date): void
-  disabled?: boolean
-  /** 最小可选时间，默认一天开始时间 */
-  min?: Date
-  /** 最大可选时间，默认一天结束时间 */
-  max?: Date
-  /** 定义时间跨度，默认为30分钟 */
-  span?: number
-  /** 自定义禁用时间，优先级高于min，max */
-  disabledSpan?(date: Date): boolean
-  /** 渲染时间文本展示格式，默认为 HH:mm */
-  renderItem?(date: Date): ReactNode
-  /** 自定义渲染开始时间，默认为00:00 */
-  beginTime?: Date
-  /** 自定义渲染结束时间 */
-  endTime?: Date
-  className?: string
-  style?: CSSProperties
-  isInPopup?: boolean
-  /** 内部为了展示24:00 */
-  enabledEndTimeOfDay?: boolean
-}
-
-interface GetTime {
-  (time?: Date): Moment | null
-}
-
-export type { TimeSpanProps, TimeSpanPickerProps, GetTime }
+import { ReactNode, CSSProperties } from 'react'
+import { Moment } from 'moment'
+
+interface TimeSpanProps {
+  /** 最小可选时间，默认一天的开始时间 */
+  min?: Date
+  /** 最大可选时间，默认一天的结束时间 */
+  max?: Date
+  /** 禁用时间函数，优先级大于min，max */
+  disabledSpan?(date: Date): boolean
+  /** 时间跨度，默认30分钟 */
+  span?: number
+  /** 选中时间 */
+  time?: Date
+  /** 渲染选中 */
+  renderItem?(date: Date): ReactNode
+  /** 选中回调 */
+  onChange?(date: Date): void
+  /** 自定义开始时间，默认从00:00开始 */
+  beginTime?: Date
+  /** 自定义结束使劲啊 */
+  endTime?: Date
+  /** 内部展示24:00用 */
+  enabledEndTimeOfDay?: boolean
+}
+
+interface TimeSpanPickerProps {
+  /** 选择时间 */
+  date: Date
+  /** 选择回调 */
+  onChange(date: Date): void
+  disabled?: boolean
+  /** 最小可选时间，默认一天开始时间 */
+  min?: Date
+  /** 最大可选时间，默认一天结束时间 */
+  max?: Date
+  /** 定义时间跨度，默认为30分钟 */
+  span?: number
+  /** 自定义禁用时间，优先级高于min，max */
+  disabledSpan?(date: Date): boolean
+  /** 渲染时间文本展示格式，默认为 HH:mm */
+  renderItem?(date: Date): ReactNode
+  /** 自定义渲染开始时间，默认为00:00 */
+  beginTime?: Date
+  /** 自定义渲染结束时间 */
+  endTime?: Date
+  className?: string
+  style?: CSSProperties
+  isInPopup?: boolean
+  /** 内部为了展示24:00 */
+  enabledEndTimeOfDay?: boolean
+}
+
+interface GetTime {
+  (time?: Date): Moment | null
+}
+
+export type { TimeSpanProps, TimeSpanPickerProps, GetTime }

package/src/component/time_span/util.ts

@@ -1,18 +1,18 @@
-import moment from 'moment'
-import { GetTime } from './types'
-
-const renderItemFunc = (date: Date): React.ReactNode => {
-  return moment(date).format('HH:mm')
-}
-
-const getTime: GetTime = (time) => {
-  if (time) {
-    const year = moment().year()
-    const month = moment().month()
-    const date = moment().date()
-    return moment(time).set({ year, month, date })
-  }
-  return null
-}
-
-export { renderItemFunc, getTime }
+import moment from 'moment'
+import { GetTime } from './types'
+
+const renderItemFunc = (date: Date): React.ReactNode => {
+  return moment(date).format('HH:mm')
+}
+
+const getTime: GetTime = (time) => {
+  if (time) {
+    const year = moment().year()
+    const month = moment().month()
+    const date = moment().date()
+    return moment(time).set({ year, month, date })
+  }
+  return null
+}
+
+export { renderItemFunc, getTime }

package/src/component/tip/index.ts

@@ -1,2 +1,2 @@
-export { default as Tip } from './tip'
-export type { TipProps } from './types'
+export { default as Tip } from './tip'
+export type { TipProps } from './types'

package/src/component/tip/stories.tsx

@@ -1,44 +1,44 @@
-import React from 'react'
-import Tip from './tip'
-
-let lastTip: string
-
-export const ComTip = () => (
-  <div>
-    <div>
-      <button onClick={() => (lastTip = Tip.tip('提示啦，提示啦'))}>默认 3s 关闭</button>
-      <button
-        onClick={() => {
-          Tip.success('成功成功')
-        }}
-      >
-        success
-      </button>
-      <button
-        onClick={() => {
-          Tip.danger('危险危险')
-        }}
-      >
-        danger
-      </button>
-    </div>
-    <div>
-      <button
-        onClick={() =>
-          (lastTip = Tip.success({
-            children: '需要用户自行关闭的',
-            time: 0,
-            onClose: () => console.log('tip closed by user'),
-          }))
-        }
-      >
-        需要用户自行关闭的
-      </button>
-      <button onClick={() => Tip.clear(lastTip)}>关闭指定 tip （比如最后一个tip）</button>
-    </div>
-  </div>
-)
-
-export default {
-  title: '反馈/Tip',
-}
+import React from 'react'
+import Tip from './tip'
+
+let lastTip: string
+
+export const ComTip = () => (
+  <div>
+    <div>
+      <button onClick={() => (lastTip = Tip.tip('提示啦，提示啦'))}>默认 3s 关闭</button>
+      <button
+        onClick={() => {
+          Tip.success('成功成功')
+        }}
+      >
+        success
+      </button>
+      <button
+        onClick={() => {
+          Tip.danger('危险危险')
+        }}
+      >
+        danger
+      </button>
+    </div>
+    <div>
+      <button
+        onClick={() =>
+          (lastTip = Tip.success({
+            children: '需要用户自行关闭的',
+            time: 0,
+            onClose: () => console.log('tip closed by user'),
+          }))
+        }
+      >
+        需要用户自行关闭的
+      </button>
+      <button onClick={() => Tip.clear(lastTip)}>关闭指定 tip （比如最后一个tip）</button>
+    </div>
+  </div>
+)
+
+export default {
+  title: '反馈/Tip',
+}

package/src/component/tip/style.less

@@ -1,53 +1,53 @@
-.gm-tip {
-  display: inline-block;
-  min-width: 250px;
-  max-width: 600px;
-  padding: 10px;
-  background: white;
-  margin: 20px auto 0;
-  pointer-events: all;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  font-size: 14px;
-
-  .gm-tip-icon {
-    vertical-align: middle;
-    font-size: 1.5em;
-    margin-right: 5px;
-  }
-
-  .gm-tip-text {
-    vertical-align: middle;
-  }
-
-  &.gm-tip-success {
-    .gm-tip-icon {
-      color: var(--gm-color-success);
-    }
-  }
-
-  &.gm-tip-danger {
-    .gm-tip-icon {
-      color: var(--gm-color-danger);
-    }
-  }
-}
-
-.gm-tip-warp {
-}
-
-// 在 LayoutRoot 内
-.gm-tips {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 10px;
-  z-index: var(--gm-z-index-tips);
-  pointer-events: none;
-}
-
-@media print {
-  .gm-tips {
-    display: none;
-  }
-}
+.gm-tip {
+  display: inline-block;
+  min-width: 250px;
+  max-width: 600px;
+  padding: 10px;
+  background: white;
+  margin: 20px auto 0;
+  pointer-events: all;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  font-size: 14px;
+
+  .gm-tip-icon {
+    vertical-align: middle;
+    font-size: 1.5em;
+    margin-right: 5px;
+  }
+
+  .gm-tip-text {
+    vertical-align: middle;
+  }
+
+  &.gm-tip-success {
+    .gm-tip-icon {
+      color: var(--gm-color-success);
+    }
+  }
+
+  &.gm-tip-danger {
+    .gm-tip-icon {
+      color: var(--gm-color-danger);
+    }
+  }
+}
+
+.gm-tip-warp {
+}
+
+// 在 LayoutRoot 内
+.gm-tips {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 10px;
+  z-index: var(--gm-z-index-tips);
+  pointer-events: none;
+}
+
+@media print {
+  .gm-tips {
+    display: none;
+  }
+}

package/src/component/tip/tip.tsx

@@ -1,95 +1,95 @@
-import React, { FC, useEffect } from 'react'
-import _ from 'lodash'
-import { TipProps, TipStatic } from './types'
-import { Flex } from '../flex'
-import { LayoutRoot } from '../layout_root'
-import SVGSuccess from '../../svg/success-circle.svg'
-import SVGDanger from '../../svg/close-circle.svg'
-import SVGRemove from '../../svg/remove.svg'
-
-const Tip: FC<TipProps> & TipStatic = ({
-  type,
-  time = 3000,
-  onClose = _.noop,
-  children,
-}) => {
-  useEffect(() => {
-    let timer: any
-    if (time) {
-      timer = setTimeout(() => {
-        onClose()
-      }, time)
-    }
-
-    return () => {
-      if (timer) {
-        clearTimeout(timer)
-      }
-    }
-  }, [])
-
-  return (
-    <Flex justifyCenter className='gm-tip-warp'>
-      <Flex className={`gm-tip gm-tip-${type} level`}>
-        <Flex flex alignCenter>
-          <span className='gm-tip-icon'>
-            {type === 'success' && <SVGSuccess />}
-            {type === 'danger' && <SVGDanger />}
-          </span>
-          <span className='gm-tip-text'>{children}</span>
-        </Flex>
-        {!time && (
-          <span
-            className='gm-tip-close gm-margin-left-5 gm-margin-top-5 gm-cursor'
-            onClick={() => {
-              onClose()
-            }}
-          >
-            <SVGRemove />
-          </span>
-        )}
-      </Flex>
-    </Flex>
-  )
-}
-
-Tip.tip = (options, type) => {
-  if (typeof options === 'string') {
-    options = {
-      children: options,
-    }
-  }
-  options.type = type
-
-  const id = +new Date() + '' + Math.random()
-
-  const _onClose = options.onClose
-  options.onClose = () => {
-    LayoutRoot.removeComponentArray(LayoutRoot.Type.TIP, id)
-    if (_onClose) {
-      _onClose()
-    }
-  }
-
-  LayoutRoot.setComponentArray(LayoutRoot.Type.TIP, id, <Tip {...options} />)
-
-  return id
-}
-
-Tip.success = (options) => {
-  return Tip.tip(options, 'success')
-}
-
-Tip.danger = (options) => {
-  return Tip.tip(options, 'danger')
-}
-
-Tip.clear = (id) => {
-  LayoutRoot.removeComponentArray(LayoutRoot.Type.TIP, id)
-}
-
-Tip.clearAll = () => {
-  LayoutRoot.clearComponentArray(LayoutRoot.Type.TIP)
-}
-
-export default Tip
+import React, { FC, useEffect } from 'react'
+import _ from 'lodash'
+import { TipProps, TipStatic } from './types'
+import { Flex } from '../flex'
+import { LayoutRoot } from '../layout_root'
+import SVGSuccess from '../../svg/success-circle.svg'
+import SVGDanger from '../../svg/close-circle.svg'
+import SVGRemove from '../../svg/remove.svg'
+
+const Tip: FC<TipProps> & TipStatic = ({
+  type,
+  time = 3000,
+  onClose = _.noop,
+  children,
+}) => {
+  useEffect(() => {
+    let timer: any
+    if (time) {
+      timer = setTimeout(() => {
+        onClose()
+      }, time)
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+    }
+  }, [])
+
+  return (
+    <Flex justifyCenter className='gm-tip-warp'>
+      <Flex className={`gm-tip gm-tip-${type} level`}>
+        <Flex flex alignCenter>
+          <span className='gm-tip-icon'>
+            {type === 'success' && <SVGSuccess />}
+            {type === 'danger' && <SVGDanger />}
+          </span>
+          <span className='gm-tip-text'>{children}</span>
+        </Flex>
+        {!time && (
+          <span
+            className='gm-tip-close gm-margin-left-5 gm-margin-top-5 gm-cursor'
+            onClick={() => {
+              onClose()
+            }}
+          >
+            <SVGRemove />
+          </span>
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+
+Tip.tip = (options, type) => {
+  if (typeof options === 'string') {
+    options = {
+      children: options,
+    }
+  }
+  options.type = type
+
+  const id = +new Date() + '' + Math.random()
+
+  const _onClose = options.onClose
+  options.onClose = () => {
+    LayoutRoot.removeComponentArray(LayoutRoot.Type.TIP, id)
+    if (_onClose) {
+      _onClose()
+    }
+  }
+
+  LayoutRoot.setComponentArray(LayoutRoot.Type.TIP, id, <Tip {...options} />)
+
+  return id
+}
+
+Tip.success = (options) => {
+  return Tip.tip(options, 'success')
+}
+
+Tip.danger = (options) => {
+  return Tip.tip(options, 'danger')
+}
+
+Tip.clear = (id) => {
+  LayoutRoot.removeComponentArray(LayoutRoot.Type.TIP, id)
+}
+
+Tip.clearAll = () => {
+  LayoutRoot.clearComponentArray(LayoutRoot.Type.TIP)
+}
+
+export default Tip

package/src/component/tip/types.ts

@@ -1,20 +1,20 @@
-import { ReactNode } from 'react'
-
-type TipType = 'success' | 'danger'
-
-interface TipProps {
-  type?: TipType
-  time?: number
-  onClose?(): void
-  children: ReactNode
-}
-
-interface TipStatic {
-  tip(props: string | TipProps, type?: TipType): string
-  success(props: string | TipProps): string
-  danger(props: string | TipProps): string
-  clear(id: string): void
-  clearAll(): void
-}
-
-export type { TipType, TipProps, TipStatic }
+import { ReactNode } from 'react'
+
+type TipType = 'success' | 'danger'
+
+interface TipProps {
+  type?: TipType
+  time?: number
+  onClose?(): void
+  children: ReactNode
+}
+
+interface TipStatic {
+  tip(props: string | TipProps, type?: TipType): string
+  success(props: string | TipProps): string
+  danger(props: string | TipProps): string
+  clear(id: string): void
+  clearAll(): void
+}
+
+export type { TipType, TipProps, TipStatic }

package/src/component/tooltip/index.ts

@@ -1,2 +1,2 @@
-export { default as Tooltip } from './tooltip'
-export type { TooltipProps } from './tooltip'
+export { default as Tooltip } from './tooltip'
+export type { TooltipProps } from './tooltip'

package/src/component/tooltip/stories.tsx

@@ -1,32 +1,32 @@
-import React from 'react'
-import Tooltip from './tooltip'
-
-export const ComTooltip = () => (
-  <div style={{ padding: '100px' }}>
-    <Tooltip
-      popup={
-        <div style={{ width: '100px', height: '100px' }}>
-          <div>hello</div>
-        </div>
-      }
-    />
-    <Tooltip popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
-      <span style={{ backgroundColor: 'red' }}>hover tip</span>
-    </Tooltip>
-    <br />
-    <Tooltip right popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
-      <span>right hover tip</span>
-    </Tooltip>
-    <Tooltip center popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
-      <span>center hover tip</span>
-    </Tooltip>
-    <br />
-    <Tooltip top popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
-      <span>top hover tip</span>
-    </Tooltip>
-  </div>
-)
-
-export default {
-  title: '反馈/Tooltip',
-}
+import React from 'react'
+import Tooltip from './tooltip'
+
+export const ComTooltip = () => (
+  <div style={{ padding: '100px' }}>
+    <Tooltip
+      popup={
+        <div style={{ width: '100px', height: '100px' }}>
+          <div>hello</div>
+        </div>
+      }
+    />
+    <Tooltip popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
+      <span style={{ backgroundColor: 'red' }}>hover tip</span>
+    </Tooltip>
+    <br />
+    <Tooltip right popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
+      <span>right hover tip</span>
+    </Tooltip>
+    <Tooltip center popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
+      <span>center hover tip</span>
+    </Tooltip>
+    <br />
+    <Tooltip top popup={<div style={{ width: '100px', height: '100px' }}>hello</div>}>
+      <span>top hover tip</span>
+    </Tooltip>
+  </div>
+)
+
+export default {
+  title: '反馈/Tooltip',
+}