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

package/src/component/calendar/types.ts

@@ -1,56 +1,56 @@
-import { CSSProperties, KeyboardEvent } from 'react'
-import { Moment } from 'moment'
-
-type DisabledYearAndMonth = 'left' | 'right'
-
-interface RangeCalendarProps {
-  /* 开始日期 */
-  begin?: Date | null
-  /* 结束日期 */
-  end?: Date | null
-  /* 日期选中回调函数 */
-  onSelect?(begin: Date | null, end: Date | null): void
-  /* 键盘 和 日期显示的月份 */
-  willActiveSelected?: Date
-  onWillActiveSelected?(value: Date): void
-  /* 可选最小日期 */
-  min?: Date
-  /* 可选最大日期 */
-  max?: Date
-  /* 自定义日期可选，优先度大于max，min */
-  disabledDate?(date: Date, selected: { begin?: Date; end?: Date }): boolean
-  /* 禁用年 / 月 切换按钮，可以通过 onWillActiveSelected 变更此设置 */
-  disabledYearAndMonth?: DisabledYearAndMonth
-  className?: string
-  style?: CSSProperties
-  /* 当前鼠标hover日期 */
-  hoverDay?: Moment | null
-  /* 鼠标hover回调 */
-  onHoverDay?(value: Moment | null): void
-  /* 键盘用 */
-  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void
-}
-
-interface CalendarProps {
-  /* 日期 */
-  selected?: Date | null
-  /* 日期选中回调函数 */
-  onSelect?(selected: Date): void
-  /* 键盘 */
-  willActiveSelected?: Date
-  onWillActiveSelected?(selected: Date): void
-  /* 最小可选日期 */
-  min?: Date
-  /* 最大可选日期 */
-  max?: Date
-  /* 自定义可选日期，优先度大于min，max */
-  disabledDate?(date: Date): boolean
-  className?: string
-  style?: CSSProperties
-  /* 全键盘 */
-  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void
-  /** 选择日期之后是否保留时间 */
-  preserveTime?: boolean
-}
-
-export type { DisabledYearAndMonth, RangeCalendarProps, CalendarProps }
+import { CSSProperties, KeyboardEvent } from 'react'
+import { Moment } from 'moment'
+
+type DisabledYearAndMonth = 'left' | 'right'
+
+interface RangeCalendarProps {
+  /* 开始日期 */
+  begin?: Date | null
+  /* 结束日期 */
+  end?: Date | null
+  /* 日期选中回调函数 */
+  onSelect?(begin: Date | null, end: Date | null): void
+  /* 键盘 和 日期显示的月份 */
+  willActiveSelected?: Date
+  onWillActiveSelected?(value: Date): void
+  /* 可选最小日期 */
+  min?: Date
+  /* 可选最大日期 */
+  max?: Date
+  /* 自定义日期可选，优先度大于max，min */
+  disabledDate?(date: Date, selected: { begin?: Date; end?: Date }): boolean
+  /* 禁用年 / 月 切换按钮，可以通过 onWillActiveSelected 变更此设置 */
+  disabledYearAndMonth?: DisabledYearAndMonth
+  className?: string
+  style?: CSSProperties
+  /* 当前鼠标hover日期 */
+  hoverDay?: Moment | null
+  /* 鼠标hover回调 */
+  onHoverDay?(value: Moment | null): void
+  /* 键盘用 */
+  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void
+}
+
+interface CalendarProps {
+  /* 日期 */
+  selected?: Date | null
+  /* 日期选中回调函数 */
+  onSelect?(selected: Date): void
+  /* 键盘 */
+  willActiveSelected?: Date
+  onWillActiveSelected?(selected: Date): void
+  /* 最小可选日期 */
+  min?: Date
+  /* 最大可选日期 */
+  max?: Date
+  /* 自定义可选日期，优先度大于min，max */
+  disabledDate?(date: Date): boolean
+  className?: string
+  style?: CSSProperties
+  /* 全键盘 */
+  onKeyDown?(event: KeyboardEvent<HTMLDivElement>): void
+  /** 选择日期之后是否保留时间 */
+  preserveTime?: boolean
+}
+
+export type { DisabledYearAndMonth, RangeCalendarProps, CalendarProps }

package/src/component/calendar/week.tsx

@@ -1,27 +1,27 @@
-import { getLocale } from '@gm-pc/locales'
-import React from 'react'
-import _ from 'lodash'
-import { Flex } from '../flex'
-
-const weekDays = [
-  getLocale('week__日'),
-  getLocale('week__一'),
-  getLocale('week__二'),
-  getLocale('week__三'),
-  getLocale('week__四'),
-  getLocale('week__五'),
-  getLocale('week__六'),
-]
-const Week = () => {
-  return (
-    <Flex className='gm-calendar-week'>
-      {_.map(weekDays, (v, i) => (
-        <Flex key={i} flex alignCenter justifyCenter>
-          {v}
-        </Flex>
-      ))}
-    </Flex>
-  )
-}
-
-export default Week
+import { getLocale } from '@gm-pc/locales'
+import React from 'react'
+import _ from 'lodash'
+import { Flex } from '../flex'
+
+const weekDays = [
+  getLocale('week__日'),
+  getLocale('week__一'),
+  getLocale('week__二'),
+  getLocale('week__三'),
+  getLocale('week__四'),
+  getLocale('week__五'),
+  getLocale('week__六'),
+]
+const Week = () => {
+  return (
+    <Flex className='gm-calendar-week'>
+      {_.map(weekDays, (v, i) => (
+        <Flex key={i} flex alignCenter justifyCenter>
+          {v}
+        </Flex>
+      ))}
+    </Flex>
+  )
+}
+
+export default Week

package/src/component/card/card.tsx

@@ -1,148 +1,148 @@
-import React, { FC, useRef, useEffect, useState } from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-
-import { Flex } from '../flex'
-import { Popover } from '../popover'
-import { List } from '../list'
-import Label, { LabelType } from '../label'
-import SVGMore from '../../svg/more.svg'
-import FromCard, { FromCardProps } from './form_card'
-
-interface CardActions {
-  text: string
-  onClick(): void
-}
-
-interface CardProps extends FromCardProps {
-  title?: string
-  labelType?: LabelType
-  labelText?: string
-  topLabelText?: string
-  inactive?: boolean
-  onClick?(...args: any[]): any
-  /** 右上角功能定义 */
-  className?: string
-  actions?: CardActions[]
-}
-
-const Card: FC<CardProps> = (props) => {
-  const {
-    className,
-    title,
-    actions,
-    labelType,
-    labelText,
-    topLabelText,
-    children,
-    inactive,
-    onClick,
-    type,
-    ...rest
-  } = props
-
-  const popoverRef = useRef<Popover>(null)
-  const moreList = _.map(actions || [], (v, i) => ({ value: i, text: v.text }))
-
-  const handleSelect = (value: number): void => {
-    popoverRef.current!.apiDoSetActive(false)
-    actions && actions[value].onClick()
-  }
-
-  // 老Card不能支撑起业务， 以后尽量用FromCard
-  if (type === 'form-card') return <FromCard {...props} />
-
-  return (
-    <div {...rest} className={classNames('gm-card', className)} onClick={onClick}>
-      <div
-        className={classNames('gm-card-header', {
-          'gm-padding-top-15': !topLabelText,
-          'gm-card-header-inactive': inactive,
-        })}
-        style={{ height: !topLabelText ? '50px' : '65px' }}
-      >
-        <Flex>
-          {topLabelText && (
-            <Flex>
-              <TopLabel text={topLabelText} />
-            </Flex>
-          )}
-          <Flex flex justifyEnd>
-            {actions && (
-              <Popover
-                ref={popoverRef}
-                showArrow
-                type='hover'
-                right
-                popup={
-                  <List
-                    data={moreList}
-                    onSelect={handleSelect}
-                    className='gm-border-0'
-                    style={{ minWidth: '30px' }}
-                  />
-                }
-              >
-                <div className='gm-card-header-action-icon'>
-                  <SVGMore />
-                </div>
-              </Popover>
-            )}
-          </Flex>
-        </Flex>
-        <Flex
-          className={classNames({
-            'gm-padding-right-20': !topLabelText,
-            'gm-padding-top-10': !!topLabelText,
-          })}
-          alignCenter
-        >
-          {labelText && (
-            <Label className='gm-margin-right-5' type={labelType || 'default'}>
-              {labelText}
-            </Label>
-          )}
-          <Popover
-            right
-            showArrow
-            type='hover'
-            style={{ minWidth: 0, maxWidth: '300px' }}
-            popup={
-              <div className='gm-bg gm-padding-10' style={{ wordBreak: 'break-all' }}>
-                {title || '-'}
-              </div>
-            }
-          >
-            <div className='gm-card-header-title'>{title || '-'}</div>
-          </Popover>
-        </Flex>
-      </div>
-      <div className='gm-padding-10'>{children}</div>
-    </div>
-  )
-}
-
-const TopLabel: FC<{ text: string }> = ({ text }) => {
-  const ref = useRef<HTMLDivElement | null>(null)
-  const [width, setWidth] = useState(0)
-  useEffect(() => {
-    if (ref.current) {
-      setWidth(ref.current.getBoundingClientRect().width)
-    }
-  }, [ref])
-
-  return (
-    <Flex column className='gm-label-container'>
-      <div ref={ref} className='gm-card-label'>
-        {text}
-      </div>
-      <div
-        className='gm-label-container-bottom'
-        style={{ borderLeftWidth: `${width / 2}px`, borderRightWidth: `${width / 2}px` }}
-      />
-    </Flex>
-  )
-}
-
-export default Card
-export type { CardProps }
+import React, { FC, useRef, useEffect, useState } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+
+import { Flex } from '../flex'
+import { Popover } from '../popover'
+import { List } from '../list'
+import Label, { LabelType } from '../label'
+import SVGMore from '../../svg/more.svg'
+import FromCard, { FromCardProps } from './form_card'
+
+interface CardActions {
+  text: string
+  onClick(): void
+}
+
+interface CardProps extends FromCardProps {
+  title?: string
+  labelType?: LabelType
+  labelText?: string
+  topLabelText?: string
+  inactive?: boolean
+  onClick?(...args: any[]): any
+  /** 右上角功能定义 */
+  className?: string
+  actions?: CardActions[]
+}
+
+const Card: FC<CardProps> = (props) => {
+  const {
+    className,
+    title,
+    actions,
+    labelType,
+    labelText,
+    topLabelText,
+    children,
+    inactive,
+    onClick,
+    type,
+    ...rest
+  } = props
+
+  const popoverRef = useRef<Popover>(null)
+  const moreList = _.map(actions || [], (v, i) => ({ value: i, text: v.text }))
+
+  const handleSelect = (value: number): void => {
+    popoverRef.current!.apiDoSetActive(false)
+    actions && actions[value].onClick()
+  }
+
+  // 老Card不能支撑起业务， 以后尽量用FromCard
+  if (type === 'form-card') return <FromCard {...props} />
+
+  return (
+    <div {...rest} className={classNames('gm-card', className)} onClick={onClick}>
+      <div
+        className={classNames('gm-card-header', {
+          'gm-padding-top-15': !topLabelText,
+          'gm-card-header-inactive': inactive,
+        })}
+        style={{ height: !topLabelText ? '50px' : '65px' }}
+      >
+        <Flex>
+          {topLabelText && (
+            <Flex>
+              <TopLabel text={topLabelText} />
+            </Flex>
+          )}
+          <Flex flex justifyEnd>
+            {actions && (
+              <Popover
+                ref={popoverRef}
+                showArrow
+                type='hover'
+                right
+                popup={
+                  <List
+                    data={moreList}
+                    onSelect={handleSelect}
+                    className='gm-border-0'
+                    style={{ minWidth: '30px' }}
+                  />
+                }
+              >
+                <div className='gm-card-header-action-icon'>
+                  <SVGMore />
+                </div>
+              </Popover>
+            )}
+          </Flex>
+        </Flex>
+        <Flex
+          className={classNames({
+            'gm-padding-right-20': !topLabelText,
+            'gm-padding-top-10': !!topLabelText,
+          })}
+          alignCenter
+        >
+          {labelText && (
+            <Label className='gm-margin-right-5' type={labelType || 'default'}>
+              {labelText}
+            </Label>
+          )}
+          <Popover
+            right
+            showArrow
+            type='hover'
+            style={{ minWidth: 0, maxWidth: '300px' }}
+            popup={
+              <div className='gm-bg gm-padding-10' style={{ wordBreak: 'break-all' }}>
+                {title || '-'}
+              </div>
+            }
+          >
+            <div className='gm-card-header-title'>{title || '-'}</div>
+          </Popover>
+        </Flex>
+      </div>
+      <div className='gm-padding-10'>{children}</div>
+    </div>
+  )
+}
+
+const TopLabel: FC<{ text: string }> = ({ text }) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [width, setWidth] = useState(0)
+  useEffect(() => {
+    if (ref.current) {
+      setWidth(ref.current.getBoundingClientRect().width)
+    }
+  }, [ref])
+
+  return (
+    <Flex column className='gm-label-container'>
+      <div ref={ref} className='gm-card-label'>
+        {text}
+      </div>
+      <div
+        className='gm-label-container-bottom'
+        style={{ borderLeftWidth: `${width / 2}px`, borderRightWidth: `${width / 2}px` }}
+      />
+    </Flex>
+  )
+}
+
+export default Card
+export type { CardProps }

package/src/component/card/form_card.tsx

@@ -1,42 +1,42 @@
-import React, { ReactNode, CSSProperties } from 'react'
-import classNames from 'classnames'
-import './style.less'
-
-export interface FromCardProps {
-  id?: string
-  title?: string
-  type?: 'form-card'
-  extra?: ReactNode
-  /* 卡片右上角的操作区域 */
-
-  headStyle?: CSSProperties
-  /* 自定义标题区域样式 */
-  loading?: boolean
-  /*  当卡片内容还在加载中时，可以用 loading 展示一个占位 */
-  children?: ReactNode
-  [propName: string]: any
-}
-
-const FromCard = (props: FromCardProps) => {
-  const { id, title, bordered, extra, children, ...restProps } = props
-
-  return (
-    <div
-      id={id}
-      {...restProps}
-      className={classNames('gm-new-card-style', {
-        'gm-new-card-border': !!bordered,
-      })}
-    >
-      {title && (
-        <div className='gm-new-card-head'>
-          <div className='gm-new-card-title'>{title}</div>
-          {extra && <div className='gm-new-card-extra'>{extra}</div>}
-        </div>
-      )}
-      <div className='gm-new-card-body'>{children}</div>
-    </div>
-  )
-}
-
-export default FromCard
+import React, { ReactNode, CSSProperties } from 'react'
+import classNames from 'classnames'
+import './style.less'
+
+export interface FromCardProps {
+  id?: string
+  title?: string
+  type?: 'form-card'
+  extra?: ReactNode
+  /* 卡片右上角的操作区域 */
+
+  headStyle?: CSSProperties
+  /* 自定义标题区域样式 */
+  loading?: boolean
+  /*  当卡片内容还在加载中时，可以用 loading 展示一个占位 */
+  children?: ReactNode
+  [propName: string]: any
+}
+
+const FromCard = (props: FromCardProps) => {
+  const { id, title, bordered, extra, children, ...restProps } = props
+
+  return (
+    <div
+      id={id}
+      {...restProps}
+      className={classNames('gm-new-card-style', {
+        'gm-new-card-border': !!bordered,
+      })}
+    >
+      {title && (
+        <div className='gm-new-card-head'>
+          <div className='gm-new-card-title'>{title}</div>
+          {extra && <div className='gm-new-card-extra'>{extra}</div>}
+        </div>
+      )}
+      <div className='gm-new-card-body'>{children}</div>
+    </div>
+  )
+}
+
+export default FromCard

package/src/component/card/index.ts

@@ -1,2 +1,2 @@
-export { default as Card } from './card'
-export type { CardProps } from './card'
+export { default as Card } from './card'
+export type { CardProps } from './card'