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

package/src/component/popup/popup.tsx

@@ -1,149 +1,149 @@
-import React, {
-  Component,
-  createRef,
-  CSSProperties,
-  HTMLAttributes,
-  ReactNode,
-} from 'react'
-import classNames from 'classnames'
-import elementInView from './element_in_viewport'
-
-interface PopupRectOptions {
-  width: number
-  height: number
-  top: number
-  left: number
-}
-
-interface PopupProps extends HTMLAttributes<HTMLDivElement> {
-  rect: PopupRectOptions
-  center?: boolean
-  top?: boolean
-  right?: boolean
-  offset?: number
-  showArrow?: boolean
-  arrowLeft?: string | number
-  /* 预判高度，因为 popup 的宽高是可变的，所以没法判断视窗是否能放得下 */
-  predictingHeight?: number
-  /* 纯粹的，目前是没有背景色，没有阴影 */
-  pureContainer?: boolean
-}
-
-interface PopupState {
-  width: number
-  height: number
-  top: boolean
-}
-
-export default class Popup extends Component<PopupProps, PopupState> {
-  static defaultProps = {
-    top: false,
-    right: false,
-    showArrow: false,
-    offset: 0,
-  }
-
-  readonly state: PopupState = {
-    width: 0,
-    height: 0,
-    top: !!this.props.top,
-  }
-
-  private _popupRef = createRef<HTMLDivElement>()
-
-  componentDidMount() {
-    let { top } = this.state
-    const { rect, predictingHeight } = this.props
-    const dom = this._popupRef.current as HTMLDivElement
-    const { topInViewport, bottomInViewport } = elementInView(
-      top,
-      dom,
-      rect.height,
-      predictingHeight
-    )
-    // 如果在上 且不够位置 就强制 bottom
-    if (top && !topInViewport) {
-      top = false
-    }
-    // 如果在下 且下不够位置 且上位置足够 就强制上
-    else if (!top && !bottomInViewport && topInViewport) {
-      top = true
-    }
-    this.setState({
-      width: dom.offsetWidth,
-      height: dom.offsetHeight,
-      top,
-    })
-  }
-
-  private _renderTriggerArrow = (): ReactNode => {
-    const { top, right, center, arrowLeft } = this.props
-    const style: CSSProperties = {}
-    if (arrowLeft) {
-      style.left = arrowLeft
-    }
-    return (
-      <div
-        style={style}
-        className={classNames('gm-popup-arrow', {
-          'gm-popup-arrow-top': top,
-          'gm-popup-arrow-bottom': !top,
-          'gm-popup-arrow-right': !center && right,
-          'gm-popup-arrow-left': !center && !right,
-          'gm-popup-arrow-center': center,
-        })}
-      />
-    )
-  }
-
-  render() {
-    const {
-      top,
-      right,
-      center,
-      showArrow,
-      arrowLeft,
-      pureContainer,
-      children,
-      rect,
-      predictingHeight,
-      className,
-      style,
-      ...rest
-    } = this.props
-    const offset = rest.offset as number
-    const { width, height } = this.state
-    const sStyle: CSSProperties = {
-      top: rect.top + rect.height + (showArrow ? 5 : 1),
-      minWidth: Math.max(rect.width, width),
-    }
-
-    if (center) {
-      sStyle.left = rect.left + rect.width / 2 - width / 2 + offset
-    } else if (right) {
-      sStyle.right =
-        document.documentElement.clientWidth - rect.left - rect.width - offset
-    } else {
-      sStyle.left = rect.left + offset
-    }
-
-    if (this.state.top) {
-      sStyle.top = rect.top - height - 2
-    }
-
-    return (
-      <div
-        ref={this._popupRef}
-        tabIndex={0}
-        {...rest}
-        style={Object.assign(sStyle, style)}
-        className={classNames('gm-popup', { 'gm-popup-pure': pureContainer }, className)}
-      >
-        {showArrow && this._renderTriggerArrow()}
-        {children}
-      </div>
-    )
-  }
-}
-
-export type { PopupRectOptions, PopupProps }
+import React, {
+  Component,
+  createRef,
+  CSSProperties,
+  HTMLAttributes,
+  ReactNode,
+} from 'react'
+import classNames from 'classnames'
+import elementInView from './element_in_viewport'
+
+interface PopupRectOptions {
+  width: number
+  height: number
+  top: number
+  left: number
+}
+
+interface PopupProps extends HTMLAttributes<HTMLDivElement> {
+  rect: PopupRectOptions
+  center?: boolean
+  top?: boolean
+  right?: boolean
+  offset?: number
+  showArrow?: boolean
+  arrowLeft?: string | number
+  /* 预判高度，因为 popup 的宽高是可变的，所以没法判断视窗是否能放得下 */
+  predictingHeight?: number
+  /* 纯粹的，目前是没有背景色，没有阴影 */
+  pureContainer?: boolean
+}
+
+interface PopupState {
+  width: number
+  height: number
+  top: boolean
+}
+
+export default class Popup extends Component<PopupProps, PopupState> {
+  static defaultProps = {
+    top: false,
+    right: false,
+    showArrow: false,
+    offset: 0,
+  }
+
+  readonly state: PopupState = {
+    width: 0,
+    height: 0,
+    top: !!this.props.top,
+  }
+
+  private _popupRef = createRef<HTMLDivElement>()
+
+  componentDidMount() {
+    let { top } = this.state
+    const { rect, predictingHeight } = this.props
+    const dom = this._popupRef.current as HTMLDivElement
+    const { topInViewport, bottomInViewport } = elementInView(
+      top,
+      dom,
+      rect.height,
+      predictingHeight
+    )
+    // 如果在上 且不够位置 就强制 bottom
+    if (top && !topInViewport) {
+      top = false
+    }
+    // 如果在下 且下不够位置 且上位置足够 就强制上
+    else if (!top && !bottomInViewport && topInViewport) {
+      top = true
+    }
+    this.setState({
+      width: dom.offsetWidth,
+      height: dom.offsetHeight,
+      top,
+    })
+  }
+
+  private _renderTriggerArrow = (): ReactNode => {
+    const { top, right, center, arrowLeft } = this.props
+    const style: CSSProperties = {}
+    if (arrowLeft) {
+      style.left = arrowLeft
+    }
+    return (
+      <div
+        style={style}
+        className={classNames('gm-popup-arrow', {
+          'gm-popup-arrow-top': top,
+          'gm-popup-arrow-bottom': !top,
+          'gm-popup-arrow-right': !center && right,
+          'gm-popup-arrow-left': !center && !right,
+          'gm-popup-arrow-center': center,
+        })}
+      />
+    )
+  }
+
+  render() {
+    const {
+      top,
+      right,
+      center,
+      showArrow,
+      arrowLeft,
+      pureContainer,
+      children,
+      rect,
+      predictingHeight,
+      className,
+      style,
+      ...rest
+    } = this.props
+    const offset = rest.offset as number
+    const { width, height } = this.state
+    const sStyle: CSSProperties = {
+      top: rect.top + rect.height + (showArrow ? 5 : 1),
+      minWidth: Math.max(rect.width, width),
+    }
+
+    if (center) {
+      sStyle.left = rect.left + rect.width / 2 - width / 2 + offset
+    } else if (right) {
+      sStyle.right =
+        document.documentElement.clientWidth - rect.left - rect.width - offset
+    } else {
+      sStyle.left = rect.left + offset
+    }
+
+    if (this.state.top) {
+      sStyle.top = rect.top - height - 2
+    }
+
+    return (
+      <div
+        ref={this._popupRef}
+        tabIndex={0}
+        {...rest}
+        style={Object.assign(sStyle, style)}
+        className={classNames('gm-popup', { 'gm-popup-pure': pureContainer }, className)}
+      >
+        {showArrow && this._renderTriggerArrow()}
+        {children}
+      </div>
+    )
+  }
+}
+
+export type { PopupRectOptions, PopupProps }

package/src/component/popup/popup_content_confirm.tsx

@@ -1,106 +1,106 @@
-import React, { HTMLAttributes, CSSProperties, FC, useState } from 'react'
-import classNames from 'classnames'
-import SVGRemove from '../../svg/remove.svg'
-import { Button, ButtonType } from '../button'
-import { getLocale } from '@gm-pc/locales'
-import _ from 'lodash'
-import { Checkbox } from '@gm-pc/react/src'
-
-type PopupContentConfirmType = 'save' | 'delete'
-
-type ButtonMap = {
-  [key in PopupContentConfirmType]: {
-    type: ButtonType
-    text: string
-    onClick(): void
-    disabled?: boolean
-    loading?: boolean
-  }
-}
-
-export interface PopupContentConfirmProps extends HTMLAttributes<HTMLDivElement> {
-  type: PopupContentConfirmType
-  title?: string
-  onCancel(): void
-  onDelete?(): void
-  onSave?(): void
-  /** 阅读提示, type delete 用 */
-  read?: boolean | string
-  className?: string
-  style?: CSSProperties
-  loading?: boolean
-}
-
-const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
-  title,
-  type = 'save',
-  onCancel,
-  onDelete,
-  onSave,
-  read,
-  className,
-  children,
-  loading,
-  ...rest
-}) => {
-  const [checked, setChecked] = useState<boolean>(false)
-
-  const readText = _.isString(read) ? read : getLocale('我已阅读以上提示，确认删除')
-
-  const buttonMap: ButtonMap = {
-    save: {
-      text: getLocale('保存'),
-      type: 'primary',
-      onClick() {
-        onSave && onSave()
-      },
-      loading: loading,
-    },
-    delete: {
-      text: getLocale('删除'),
-      type: 'danger',
-      onClick() {
-        onDelete && onDelete()
-      },
-      loading: loading,
-      disabled: read ? !checked : false,
-    },
-  }
-
-  return (
-    <div {...rest} className={classNames('gm-popup-content-confirm', className)}>
-      <div className='gm-popup-content-confirm-title-wrap'>
-        <div className='gm-popup-content-confirm-title'>{title}</div>
-        <div className='gm-popup-content-confirm-close' onClick={onCancel}>
-          <SVGRemove />
-        </div>
-      </div>
-      <div className='gm-popup-content-confirm-content'>
-        {children}
-        {read && (
-          <div className='gm-margin-top-20'>
-            <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
-              {readText}
-            </Checkbox>
-          </div>
-        )}
-        <div className='gm-popup-content-confirm-button'>
-          <Button className='gm-margin-right-10' onClick={onCancel}>
-            {getLocale('取消')}
-          </Button>
-          <Button
-            type={buttonMap[type].type}
-            onClick={() => {
-              buttonMap[type].onClick()
-            }}
-            loading={loading}
-            disabled={buttonMap[type].disabled}
-          >
-            {buttonMap[type].text}
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-export default PopupContentConfirm
+import React, { HTMLAttributes, CSSProperties, FC, useState } from 'react'
+import classNames from 'classnames'
+import SVGRemove from '../../svg/remove.svg'
+import { Button, ButtonType } from '../button'
+import { getLocale } from '@gm-pc/locales'
+import _ from 'lodash'
+import { Checkbox } from '@gm-pc/react/src'
+
+type PopupContentConfirmType = 'save' | 'delete'
+
+type ButtonMap = {
+  [key in PopupContentConfirmType]: {
+    type: ButtonType
+    text: string
+    onClick(): void
+    disabled?: boolean
+    loading?: boolean
+  }
+}
+
+export interface PopupContentConfirmProps extends HTMLAttributes<HTMLDivElement> {
+  type: PopupContentConfirmType
+  title?: string
+  onCancel(): void
+  onDelete?(): void
+  onSave?(): void
+  /** 阅读提示, type delete 用 */
+  read?: boolean | string
+  className?: string
+  style?: CSSProperties
+  loading?: boolean
+}
+
+const PopupContentConfirm: FC<PopupContentConfirmProps> = ({
+  title,
+  type = 'save',
+  onCancel,
+  onDelete,
+  onSave,
+  read,
+  className,
+  children,
+  loading,
+  ...rest
+}) => {
+  const [checked, setChecked] = useState<boolean>(false)
+
+  const readText = _.isString(read) ? read : getLocale('我已阅读以上提示，确认删除')
+
+  const buttonMap: ButtonMap = {
+    save: {
+      text: getLocale('保存'),
+      type: 'primary',
+      onClick() {
+        onSave && onSave()
+      },
+      loading: loading,
+    },
+    delete: {
+      text: getLocale('删除'),
+      type: 'danger',
+      onClick() {
+        onDelete && onDelete()
+      },
+      loading: loading,
+      disabled: read ? !checked : false,
+    },
+  }
+
+  return (
+    <div {...rest} className={classNames('gm-popup-content-confirm', className)}>
+      <div className='gm-popup-content-confirm-title-wrap'>
+        <div className='gm-popup-content-confirm-title'>{title}</div>
+        <div className='gm-popup-content-confirm-close' onClick={onCancel}>
+          <SVGRemove />
+        </div>
+      </div>
+      <div className='gm-popup-content-confirm-content'>
+        {children}
+        {read && (
+          <div className='gm-margin-top-20'>
+            <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
+              {readText}
+            </Checkbox>
+          </div>
+        )}
+        <div className='gm-popup-content-confirm-button'>
+          <Button className='gm-margin-right-10' onClick={onCancel}>
+            {getLocale('取消')}
+          </Button>
+          <Button
+            type={buttonMap[type].type}
+            onClick={() => {
+              buttonMap[type].onClick()
+            }}
+            loading={loading}
+            disabled={buttonMap[type].disabled}
+          >
+            {buttonMap[type].text}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default PopupContentConfirm