@gm-pc/react 1.24.9-beta.13 → 1.24.9-beta.15

package/src/component/popover/popover.tsx

@@ -1,279 +1,279 @@
-import React, {
-  Children,
-  cloneElement,
-  Component,
-  ComponentElement,
-  createRef,
-  HTMLAttributes,
-  ReactElement,
-} from 'react'
-import { findDOMNode } from 'react-dom'
-import classNames from 'classnames'
-import { createChainedFunction } from '@gm-common/tool'
-import _ from 'lodash'
-import { PopoverProps } from './types'
-import { Popup, PopupRectOptions } from '../popup'
-import EVENT_TYPE from '../../event_type'
-import { LayoutRoot } from '../layout_root'
-import { getElementPositionWithScroll, isContains } from './utils'
-
-interface PopoverState {
-  active: boolean
-}
-
-class Popover extends Component<PopoverProps, PopoverState> {
-  static defaultProps = {
-    type: 'focus',
-  }
-
-  readonly state: PopoverState = {
-    active: false,
-  }
-
-  private _timer: number | undefined
-  private _popupRef = createRef<Popup>()
-  private _id = `${+new Date()}${Math.random()}`
-  private _isUnmounted = false
-  private _rect: PopupRectOptions | undefined
-
-  componentDidMount() {
-    const { type } = this.props
-    if (type === 'click' || type === 'focus') {
-      window.document.body.addEventListener('click', this._handleBodyClick)
-    } else if (this.props.type === 'realFocus') {
-      // 原生 blur 不能冒泡，focusout 才能冒泡
-      window.document.body.addEventListener('focusout', this._handleBodyFocusOut)
-    }
-
-    window.addEventListener(EVENT_TYPE.MODAL_SCROLL, this._debounceHandleModalScroll)
-    window.addEventListener(EVENT_TYPE.BROWSER_SCROLL, this._debounceHandleBrowserScroll)
-    window.addEventListener(EVENT_TYPE.TABLE_SCROLL, this._debounceHandleTableScroll)
-  }
-
-  componentWillUnmount() {
-    this._isUnmounted = true
-    const { type } = this.props
-    if (type === 'click' || type === 'focus') {
-      window.document.body.removeEventListener('click', this._handleBodyClick)
-    } else if (type === 'realFocus') {
-      window.document.body.removeEventListener('focusout', this._handleBodyFocusOut)
-    }
-
-    LayoutRoot.removeComponentArray(LayoutRoot.Type.POPOVER, this._id)
-    window.removeEventListener(EVENT_TYPE.MODAL_SCROLL, this._debounceHandleModalScroll)
-    window.removeEventListener(
-      EVENT_TYPE.BROWSER_SCROLL,
-      this._debounceHandleBrowserScroll
-    )
-    window.removeEventListener(EVENT_TYPE.TABLE_SCROLL, this._debounceHandleTableScroll)
-  }
-
-  componentDidUpdate() {
-    this._doRenderPopup(this.state.active)
-  }
-
-  /* 注意，先调用这个，再处理业务的 onXXX。比如 date-picker */
-  public apiDoSetActive = (active?: boolean): void => {
-    this._setActive(!!active)
-  }
-
-  private _handleModalScroll = () => {
-    if (this.state.active) {
-      this._setActive(this.state.active)
-    }
-  }
-
-  private _handleBrowserScroll = () => {
-    if (this.state.active) {
-      this._setActive(this.state.active)
-    }
-  }
-
-  private _handleTableScroll = () => {
-    if (this.state.active) {
-      this._setActive(this.state.active)
-    }
-  }
-
-  private _debounceHandleModalScroll = _.debounce(this._handleModalScroll, 200)
-
-  private _debounceHandleBrowserScroll = _.debounce(this._handleBrowserScroll, 200)
-
-  private _debounceHandleTableScroll = _.debounce(this._handleTableScroll, 200)
-
-  private _setActive = (active: boolean): void => {
-    if (this._isUnmounted || this.state.active === active) {
-      return
-    }
-    const { onVisibleChange } = this.props
-    if (active) {
-      // eslint-disable-next-line react/no-find-dom-node
-      const dom = findDOMNode(this) as HTMLElement
-      const { left, top } = getElementPositionWithScroll(dom as HTMLElement)
-      this._rect = {
-        left,
-        top,
-        height: dom.offsetHeight,
-        width: dom.offsetWidth,
-      }
-    }
-    onVisibleChange && onVisibleChange(active)
-    this.setState({ active })
-  }
-
-  private _handleBodyClick = (event: MouseEvent): void => {
-    this._doBodyClickAndFocusOut(event.target as HTMLElement)
-  }
-
-  private _handleBodyFocusOut = (event: FocusEvent): void => {
-    this._doBodyClickAndFocusOut(event.relatedTarget as HTMLElement)
-  }
-
-  private _doBodyClickAndFocusOut = (target: HTMLElement): void => {
-    const { active } = this.state
-    // 没激活就没有必要判断了
-    if (!active) {
-      return
-    }
-    // type 为 focus 存在 由于时机问题，可能 _popupRef 还没出来，此时啥也不做
-    if (!this._popupRef.current) {
-      return
-    }
-    // eslint-disable-next-line react/no-find-dom-node
-    const $this = findDOMNode(this)
-    // eslint-disable-next-line react/no-find-dom-node
-    const $popup = findDOMNode(this._popupRef.current)
-    if (
-      isContains(target, (node) => {
-        return (
-          node === $this ||
-          node === $popup ||
-          (node.classList && node.classList.contains('gm-popover-is-in-popup'))
-        )
-      })
-    ) {
-      return
-    }
-    this._setActive(false)
-  }
-
-  private _doRenderPopup = (active: boolean): void => {
-    const {
-      style,
-      className,
-      popup,
-      type,
-      top,
-      right,
-      center,
-      offset,
-      showArrow,
-      arrowLeft,
-      predictingHeight,
-      pureContainer,
-      isInPopup,
-    } = this.props
-    const disabled = this._getDisabled()
-    if (active) {
-      LayoutRoot.setComponentArray(
-        LayoutRoot.Type.POPOVER,
-        this._id,
-        <Popup
-          key={`popup_${this._id}`}
-          ref={this._popupRef}
-          onMouseEnter={!disabled && type === 'hover' ? this._handleMouseEnter : _.noop}
-          onMouseLeave={!disabled && type === 'hover' ? this._handleMouseLeave : _.noop}
-          rect={this._rect!}
-          top={top}
-          right={right}
-          center={center}
-          offset={offset}
-          showArrow={showArrow}
-          arrowLeft={arrowLeft}
-          predictingHeight={predictingHeight}
-          pureContainer={pureContainer}
-          className={classNames(
-            {
-              'gm-popover-is-in-popup': isInPopup,
-            },
-            className
-          )}
-          style={style}
-        >
-          {_.isFunction(popup) ? popup(this.apiDoSetActive.bind(this, false)) : popup}
-        </Popup>
-      )
-    } else {
-      LayoutRoot.removeComponentArray(LayoutRoot.Type.POPOVER, this._id)
-    }
-  }
-
-  private _handleClick = (): void => {
-    const { type } = this.props
-    const active = type === 'click' ? !this.state.active : true
-    this._setActive(active)
-  }
-
-  private _handleFocus = (): void => {
-    this._setActive(true)
-  }
-
-  private _handleMouseEnter = (): void => {
-    window.clearTimeout(this._timer)
-    this._setActive(true)
-  }
-
-  private _handleMouseLeave = (): void => {
-    window.clearTimeout(this._timer)
-    this._timer = window.setTimeout(() => {
-      this._setActive(false)
-    }, 500)
-  }
-
-  private _getDisabled = (): boolean => {
-    const { disabled, children } = this.props
-    return disabled || (children as ReactElement).props?.disabled
-  }
-
-  render() {
-    const { type, children } = this.props
-    const { active } = this.state
-    const child = Children.only(children) as ComponentElement<any, any>
-
-    const p: HTMLAttributes<HTMLElement> = {}
-    if (!this._getDisabled()) {
-      if (type === 'click' || type === 'focus') {
-        p.onClick = createChainedFunction(
-          // @ts-ignore
-          child.props.onClick,
-          this._handleClick
-        )
-      } else if (type === 'realFocus') {
-        p.onFocus = createChainedFunction(
-          // @ts-ignore
-          child.props.onFocus,
-          this._handleFocus
-        )
-      } else if (type === 'hover') {
-        p.onMouseEnter = createChainedFunction(
-          // @ts-ignore
-          child.props.onMouseEnter,
-          this._handleMouseEnter
-        )
-        p.onMouseLeave = createChainedFunction(
-          // @ts-ignore
-          child.props.onMouseLeave,
-          this._handleMouseLeave
-        )
-      }
-    }
-    return cloneElement(child, {
-      ...p,
-      className: classNames(child.props.className, {
-        'gm-popover-active': active,
-      }),
-    })
-  }
-}
-
-export default Popover
+import React, {
+  Children,
+  cloneElement,
+  Component,
+  ComponentElement,
+  createRef,
+  HTMLAttributes,
+  ReactElement,
+} from 'react'
+import { findDOMNode } from 'react-dom'
+import classNames from 'classnames'
+import { createChainedFunction } from '@gm-common/tool'
+import _ from 'lodash'
+import { PopoverProps } from './types'
+import { Popup, PopupRectOptions } from '../popup'
+import EVENT_TYPE from '../../event_type'
+import { LayoutRoot } from '../layout_root'
+import { getElementPositionWithScroll, isContains } from './utils'
+
+interface PopoverState {
+  active: boolean
+}
+
+class Popover extends Component<PopoverProps, PopoverState> {
+  static defaultProps = {
+    type: 'focus',
+  }
+
+  readonly state: PopoverState = {
+    active: false,
+  }
+
+  private _timer: number | undefined
+  private _popupRef = createRef<Popup>()
+  private _id = `${+new Date()}${Math.random()}`
+  private _isUnmounted = false
+  private _rect: PopupRectOptions | undefined
+
+  componentDidMount() {
+    const { type } = this.props
+    if (type === 'click' || type === 'focus') {
+      window.document.body.addEventListener('click', this._handleBodyClick)
+    } else if (this.props.type === 'realFocus') {
+      // 原生 blur 不能冒泡，focusout 才能冒泡
+      window.document.body.addEventListener('focusout', this._handleBodyFocusOut)
+    }
+
+    window.addEventListener(EVENT_TYPE.MODAL_SCROLL, this._debounceHandleModalScroll)
+    window.addEventListener(EVENT_TYPE.BROWSER_SCROLL, this._debounceHandleBrowserScroll)
+    window.addEventListener(EVENT_TYPE.TABLE_SCROLL, this._debounceHandleTableScroll)
+  }
+
+  componentWillUnmount() {
+    this._isUnmounted = true
+    const { type } = this.props
+    if (type === 'click' || type === 'focus') {
+      window.document.body.removeEventListener('click', this._handleBodyClick)
+    } else if (type === 'realFocus') {
+      window.document.body.removeEventListener('focusout', this._handleBodyFocusOut)
+    }
+
+    LayoutRoot.removeComponentArray(LayoutRoot.Type.POPOVER, this._id)
+    window.removeEventListener(EVENT_TYPE.MODAL_SCROLL, this._debounceHandleModalScroll)
+    window.removeEventListener(
+      EVENT_TYPE.BROWSER_SCROLL,
+      this._debounceHandleBrowserScroll
+    )
+    window.removeEventListener(EVENT_TYPE.TABLE_SCROLL, this._debounceHandleTableScroll)
+  }
+
+  componentDidUpdate() {
+    this._doRenderPopup(this.state.active)
+  }
+
+  /* 注意，先调用这个，再处理业务的 onXXX。比如 date-picker */
+  public apiDoSetActive = (active?: boolean): void => {
+    this._setActive(!!active)
+  }
+
+  private _handleModalScroll = () => {
+    if (this.state.active) {
+      this._setActive(this.state.active)
+    }
+  }
+
+  private _handleBrowserScroll = () => {
+    if (this.state.active) {
+      this._setActive(this.state.active)
+    }
+  }
+
+  private _handleTableScroll = () => {
+    if (this.state.active) {
+      this._setActive(this.state.active)
+    }
+  }
+
+  private _debounceHandleModalScroll = _.debounce(this._handleModalScroll, 200)
+
+  private _debounceHandleBrowserScroll = _.debounce(this._handleBrowserScroll, 200)
+
+  private _debounceHandleTableScroll = _.debounce(this._handleTableScroll, 200)
+
+  private _setActive = (active: boolean): void => {
+    if (this._isUnmounted || this.state.active === active) {
+      return
+    }
+    const { onVisibleChange } = this.props
+    if (active) {
+      // eslint-disable-next-line react/no-find-dom-node
+      const dom = findDOMNode(this) as HTMLElement
+      const { left, top } = getElementPositionWithScroll(dom as HTMLElement)
+      this._rect = {
+        left,
+        top,
+        height: dom.offsetHeight,
+        width: dom.offsetWidth,
+      }
+    }
+    onVisibleChange && onVisibleChange(active)
+    this.setState({ active })
+  }
+
+  private _handleBodyClick = (event: MouseEvent): void => {
+    this._doBodyClickAndFocusOut(event.target as HTMLElement)
+  }
+
+  private _handleBodyFocusOut = (event: FocusEvent): void => {
+    this._doBodyClickAndFocusOut(event.relatedTarget as HTMLElement)
+  }
+
+  private _doBodyClickAndFocusOut = (target: HTMLElement): void => {
+    const { active } = this.state
+    // 没激活就没有必要判断了
+    if (!active) {
+      return
+    }
+    // type 为 focus 存在 由于时机问题，可能 _popupRef 还没出来，此时啥也不做
+    if (!this._popupRef.current) {
+      return
+    }
+    // eslint-disable-next-line react/no-find-dom-node
+    const $this = findDOMNode(this)
+    // eslint-disable-next-line react/no-find-dom-node
+    const $popup = findDOMNode(this._popupRef.current)
+    if (
+      isContains(target, (node) => {
+        return (
+          node === $this ||
+          node === $popup ||
+          (node.classList && node.classList.contains('gm-popover-is-in-popup'))
+        )
+      })
+    ) {
+      return
+    }
+    this._setActive(false)
+  }
+
+  private _doRenderPopup = (active: boolean): void => {
+    const {
+      style,
+      className,
+      popup,
+      type,
+      top,
+      right,
+      center,
+      offset,
+      showArrow,
+      arrowLeft,
+      predictingHeight,
+      pureContainer,
+      isInPopup,
+    } = this.props
+    const disabled = this._getDisabled()
+    if (active) {
+      LayoutRoot.setComponentArray(
+        LayoutRoot.Type.POPOVER,
+        this._id,
+        <Popup
+          key={`popup_${this._id}`}
+          ref={this._popupRef}
+          onMouseEnter={!disabled && type === 'hover' ? this._handleMouseEnter : _.noop}
+          onMouseLeave={!disabled && type === 'hover' ? this._handleMouseLeave : _.noop}
+          rect={this._rect!}
+          top={top}
+          right={right}
+          center={center}
+          offset={offset}
+          showArrow={showArrow}
+          arrowLeft={arrowLeft}
+          predictingHeight={predictingHeight}
+          pureContainer={pureContainer}
+          className={classNames(
+            {
+              'gm-popover-is-in-popup': isInPopup,
+            },
+            className
+          )}
+          style={style}
+        >
+          {_.isFunction(popup) ? popup(this.apiDoSetActive.bind(this, false)) : popup}
+        </Popup>
+      )
+    } else {
+      LayoutRoot.removeComponentArray(LayoutRoot.Type.POPOVER, this._id)
+    }
+  }
+
+  private _handleClick = (): void => {
+    const { type } = this.props
+    const active = type === 'click' ? !this.state.active : true
+    this._setActive(active)
+  }
+
+  private _handleFocus = (): void => {
+    this._setActive(true)
+  }
+
+  private _handleMouseEnter = (): void => {
+    window.clearTimeout(this._timer)
+    this._setActive(true)
+  }
+
+  private _handleMouseLeave = (): void => {
+    window.clearTimeout(this._timer)
+    this._timer = window.setTimeout(() => {
+      this._setActive(false)
+    }, 500)
+  }
+
+  private _getDisabled = (): boolean => {
+    const { disabled, children } = this.props
+    return disabled || (children as ReactElement).props?.disabled
+  }
+
+  render() {
+    const { type, children } = this.props
+    const { active } = this.state
+    const child = Children.only(children) as ComponentElement<any, any>
+
+    const p: HTMLAttributes<HTMLElement> = {}
+    if (!this._getDisabled()) {
+      if (type === 'click' || type === 'focus') {
+        p.onClick = createChainedFunction(
+          // @ts-ignore
+          child.props.onClick,
+          this._handleClick
+        )
+      } else if (type === 'realFocus') {
+        p.onFocus = createChainedFunction(
+          // @ts-ignore
+          child.props.onFocus,
+          this._handleFocus
+        )
+      } else if (type === 'hover') {
+        p.onMouseEnter = createChainedFunction(
+          // @ts-ignore
+          child.props.onMouseEnter,
+          this._handleMouseEnter
+        )
+        p.onMouseLeave = createChainedFunction(
+          // @ts-ignore
+          child.props.onMouseLeave,
+          this._handleMouseLeave
+        )
+      }
+    }
+    return cloneElement(child, {
+      ...p,
+      className: classNames(child.props.className, {
+        'gm-popover-active': active,
+      }),
+    })
+  }
+}
+
+export default Popover