@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/popover/stories.js

@@ -1,101 +1,101 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Popover from './index'
-import Button from '../button'
-
-const renderPopup = () => {
-  return (
-    <div style={{ width: '200px', height: '200px' }}>
-      <div>啦啦啦啦啦啦啦啦啦啦啦</div>
-      <div>啦啦啦啦啦啦啦啦啦啦啦</div>
-      <div>啦啦啦</div>
-    </div>
-  )
-}
-
-storiesOf('Popover', module).add('default', () => (
-  <div>
-    <div>四种行为 focus click hover realFocus</div>
-    <div>
-      <Popover popup={renderPopup()}>
-        <Button>focus me default</Button>
-      </Popover>
-      <Popover type='click' popup={renderPopup()}>
-        <Button>click me</Button>
-      </Popover>
-      <Popover showArrow type='hover' popup={renderPopup()}>
-        <Button>hover me</Button>
-      </Popover>
-      <Popover showArrow type='realFocus' popup={renderPopup()}>
-        <Button>realFocus me</Button>
-      </Popover>
-    </div>
-    <div>各种位置</div>
-    <div>
-      <Popover popup={renderPopup()}>
-        <Button>focus me(default)</Button>
-      </Popover>
-      <Popover right popup={renderPopup()}>
-        <Button>focus me(right)</Button>
-      </Popover>
-      <Popover center popup={renderPopup()}>
-        <Button>focus me(center)</Button>
-      </Popover>
-    </div>
-    <div>
-      <Popover top popup={renderPopup()}>
-        <Button>focus me(top)</Button>
-      </Popover>
-      <Popover right top popup={renderPopup()}>
-        <Button>focus me(right top)</Button>
-      </Popover>
-      <Popover center top popup={renderPopup()}>
-        <Button>focus me(center top)</Button>
-      </Popover>
-    </div>
-
-    <div>偏移位置</div>
-    <div>
-      <Popover offset={20} popup={renderPopup()}>
-        <Button>focus me(20)</Button>
-      </Popover>
-      <Popover offset={-20} popup={renderPopup()}>
-        <Button>focus me(-20)</Button>
-      </Popover>
-      <Popover right offset={20} popup={renderPopup()}>
-        <Button>focus me(right 20)</Button>
-      </Popover>
-      <Popover right top offset={20} popup={renderPopup()}>
-        <Button>focus me(right top 20)</Button>
-      </Popover>
-      <Popover center offset={20} popup={renderPopup()}>
-        <Button>focus me(center 20)</Button>
-      </Popover>
-      <Popover showArrow offset={20} popup={renderPopup()}>
-        <Button>showArrow(offset 20)</Button>
-      </Popover>
-    </div>
-
-    <div>加角标</div>
-    <div>
-      <Popover top showArrow popup={renderPopup()}>
-        <Button>showArrow toptoptoptop</Button>
-      </Popover>
-      <Popover showArrow right popup={renderPopup()}>
-        <Button>showArrow right</Button>
-      </Popover>
-      <Popover showArrow arrowLeft='0px' popup={renderPopup()}>
-        <Button>showArrow arrowLeft 0</Button>
-      </Popover>
-    </div>
-    <div>disabled</div>
-    <div>
-      <Popover disabled popup={renderPopup()}>
-        <Button>focus me(disabled)</Button>
-      </Popover>
-      <Popover popup={renderPopup()}>
-        <Button disabled>focus me(inner disabled)</Button>
-      </Popover>
-    </div>
-  </div>
-))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Popover from './index'
+import Button from '../button'
+
+const renderPopup = () => {
+  return (
+    <div style={{ width: '200px', height: '200px' }}>
+      <div>啦啦啦啦啦啦啦啦啦啦啦</div>
+      <div>啦啦啦啦啦啦啦啦啦啦啦</div>
+      <div>啦啦啦</div>
+    </div>
+  )
+}
+
+storiesOf('Popover', module).add('default', () => (
+  <div>
+    <div>四种行为 focus click hover realFocus</div>
+    <div>
+      <Popover popup={renderPopup()}>
+        <Button>focus me default</Button>
+      </Popover>
+      <Popover type='click' popup={renderPopup()}>
+        <Button>click me</Button>
+      </Popover>
+      <Popover showArrow type='hover' popup={renderPopup()}>
+        <Button>hover me</Button>
+      </Popover>
+      <Popover showArrow type='realFocus' popup={renderPopup()}>
+        <Button>realFocus me</Button>
+      </Popover>
+    </div>
+    <div>各种位置</div>
+    <div>
+      <Popover popup={renderPopup()}>
+        <Button>focus me(default)</Button>
+      </Popover>
+      <Popover right popup={renderPopup()}>
+        <Button>focus me(right)</Button>
+      </Popover>
+      <Popover center popup={renderPopup()}>
+        <Button>focus me(center)</Button>
+      </Popover>
+    </div>
+    <div>
+      <Popover top popup={renderPopup()}>
+        <Button>focus me(top)</Button>
+      </Popover>
+      <Popover right top popup={renderPopup()}>
+        <Button>focus me(right top)</Button>
+      </Popover>
+      <Popover center top popup={renderPopup()}>
+        <Button>focus me(center top)</Button>
+      </Popover>
+    </div>
+
+    <div>偏移位置</div>
+    <div>
+      <Popover offset={20} popup={renderPopup()}>
+        <Button>focus me(20)</Button>
+      </Popover>
+      <Popover offset={-20} popup={renderPopup()}>
+        <Button>focus me(-20)</Button>
+      </Popover>
+      <Popover right offset={20} popup={renderPopup()}>
+        <Button>focus me(right 20)</Button>
+      </Popover>
+      <Popover right top offset={20} popup={renderPopup()}>
+        <Button>focus me(right top 20)</Button>
+      </Popover>
+      <Popover center offset={20} popup={renderPopup()}>
+        <Button>focus me(center 20)</Button>
+      </Popover>
+      <Popover showArrow offset={20} popup={renderPopup()}>
+        <Button>showArrow(offset 20)</Button>
+      </Popover>
+    </div>
+
+    <div>加角标</div>
+    <div>
+      <Popover top showArrow popup={renderPopup()}>
+        <Button>showArrow toptoptoptop</Button>
+      </Popover>
+      <Popover showArrow right popup={renderPopup()}>
+        <Button>showArrow right</Button>
+      </Popover>
+      <Popover showArrow arrowLeft='0px' popup={renderPopup()}>
+        <Button>showArrow arrowLeft 0</Button>
+      </Popover>
+    </div>
+    <div>disabled</div>
+    <div>
+      <Popover disabled popup={renderPopup()}>
+        <Button>focus me(disabled)</Button>
+      </Popover>
+      <Popover popup={renderPopup()}>
+        <Button disabled>focus me(inner disabled)</Button>
+      </Popover>
+    </div>
+  </div>
+))

package/src/component/popup/index.js

@@ -1,4 +1,4 @@
-import Popup from './popup'
-import PopupContentConfirm from './popup_content_confirm'
-
-export { Popup, PopupContentConfirm }
+import Popup from './popup'
+import PopupContentConfirm from './popup_content_confirm'
+
+export { Popup, PopupContentConfirm }

package/src/component/popup/popup.js

@@ -1,172 +1,172 @@
-import React from 'react'
-import { findDOMNode } from 'react-dom'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-// 复杂了，请debug看dom位置。
-function elementInViewport(top, dom, targetHeight, predictingHeight) {
-  const buf = 5
-
-  const rect = dom.getBoundingClientRect()
-  const windowHeight =
-    window.innerHeight || document.documentElement.clientHeight
-  const domHeight = predictingHeight || rect.height
-
-  if (top) {
-    return {
-      topInViewport: rect.top - domHeight - buf >= 0,
-      bottomInViewport: null // top 情况不用算，用不到
-    }
-  }
-
-  return {
-    topInViewport: rect.top - targetHeight - domHeight - buf >= 0,
-    bottomInViewport: rect.top + domHeight + buf <= windowHeight
-  }
-}
-
-class Popup extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      width: 0,
-      height: 0,
-      top: props.top
-    }
-  }
-
-  componentDidMount() {
-    const dom = findDOMNode(this.refPopup)
-
-    let top = this.state.top
-
-    const { topInViewport, bottomInViewport } = elementInViewport(
-      top,
-      dom,
-      this.props.rect.height,
-      this.props.predictingHeight
-    )
-
-    // 如果在上 且不够位置 就强制 bottom
-    if (top && !topInViewport) {
-      top = false
-    }
-    // 如果在下 且下不够位置 且上位置足够 就强制上
-    else if (!top && !bottomInViewport && topInViewport) {
-      top = true
-    }
-
-    this.setState({
-      width: dom.offsetWidth,
-      height: dom.offsetHeight,
-      top
-    })
-  }
-
-  renderTriggerArrow() {
-    const { top, right, center, arrowLeft } = this.props
-
-    const style = {}
-    if (arrowLeft) {
-      style.left = arrowLeft
-    }
-
-    return (
-      <div
-        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
-        })}
-        style={style}
-      />
-    )
-  }
-
-  render() {
-    const {
-      top,
-      right,
-      center,
-      offset,
-      showArrow,
-      arrowLeft,
-      pureContainer,
-      children,
-      rect,
-      predictingHeight,
-      className,
-      style,
-      ...rest
-    } = this.props
-
-    const { width, height } = this.state
-
-    const sStyle = {
-      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.left = rect.left + rect.width - width + offset
-      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={ref => (this.refPopup = ref)}
-        tabIndex={0}
-        {...rest}
-        style={Object.assign(sStyle, style)}
-        className={classNames(
-          'gm-popup',
-          {
-            'gm-popup-pure': pureContainer
-          },
-          className
-        )}
-      >
-        {showArrow && this.renderTriggerArrow()}
-        {children}
-      </div>
-    )
-  }
-}
-
-Popup.propTypes = {
-  children: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  rect: PropTypes.object.isRequired,
-  center: PropTypes.bool,
-  top: PropTypes.bool,
-  right: PropTypes.bool,
-  offset: PropTypes.number,
-  showArrow: PropTypes.bool, // 是否显示三角标
-  arrowLeft: PropTypes.string,
-  /** 预判高度。因为 popup 的宽高会是可变的，所以没法判断视窗内是否能放得下，于是有此。 */
-  predictingHeight: PropTypes.number,
-  /** 纯粹的，目前是没有背景色，没有阴影 */
-  pureContainer: PropTypes.bool
-}
-
-Popup.defaultProps = {
-  top: false,
-  right: false,
-  showArrow: false,
-  offset: 0
-}
-
-export default Popup
+import React from 'react'
+import { findDOMNode } from 'react-dom'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+// 复杂了，请debug看dom位置。
+function elementInViewport(top, dom, targetHeight, predictingHeight) {
+  const buf = 5
+
+  const rect = dom.getBoundingClientRect()
+  const windowHeight =
+    window.innerHeight || document.documentElement.clientHeight
+  const domHeight = predictingHeight || rect.height
+
+  if (top) {
+    return {
+      topInViewport: rect.top - domHeight - buf >= 0,
+      bottomInViewport: null // top 情况不用算，用不到
+    }
+  }
+
+  return {
+    topInViewport: rect.top - targetHeight - domHeight - buf >= 0,
+    bottomInViewport: rect.top + domHeight + buf <= windowHeight
+  }
+}
+
+class Popup extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      width: 0,
+      height: 0,
+      top: props.top
+    }
+  }
+
+  componentDidMount() {
+    const dom = findDOMNode(this.refPopup)
+
+    let top = this.state.top
+
+    const { topInViewport, bottomInViewport } = elementInViewport(
+      top,
+      dom,
+      this.props.rect.height,
+      this.props.predictingHeight
+    )
+
+    // 如果在上 且不够位置 就强制 bottom
+    if (top && !topInViewport) {
+      top = false
+    }
+    // 如果在下 且下不够位置 且上位置足够 就强制上
+    else if (!top && !bottomInViewport && topInViewport) {
+      top = true
+    }
+
+    this.setState({
+      width: dom.offsetWidth,
+      height: dom.offsetHeight,
+      top
+    })
+  }
+
+  renderTriggerArrow() {
+    const { top, right, center, arrowLeft } = this.props
+
+    const style = {}
+    if (arrowLeft) {
+      style.left = arrowLeft
+    }
+
+    return (
+      <div
+        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
+        })}
+        style={style}
+      />
+    )
+  }
+
+  render() {
+    const {
+      top,
+      right,
+      center,
+      offset,
+      showArrow,
+      arrowLeft,
+      pureContainer,
+      children,
+      rect,
+      predictingHeight,
+      className,
+      style,
+      ...rest
+    } = this.props
+
+    const { width, height } = this.state
+
+    const sStyle = {
+      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.left = rect.left + rect.width - width + offset
+      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={ref => (this.refPopup = ref)}
+        tabIndex={0}
+        {...rest}
+        style={Object.assign(sStyle, style)}
+        className={classNames(
+          'gm-popup',
+          {
+            'gm-popup-pure': pureContainer
+          },
+          className
+        )}
+      >
+        {showArrow && this.renderTriggerArrow()}
+        {children}
+      </div>
+    )
+  }
+}
+
+Popup.propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  rect: PropTypes.object.isRequired,
+  center: PropTypes.bool,
+  top: PropTypes.bool,
+  right: PropTypes.bool,
+  offset: PropTypes.number,
+  showArrow: PropTypes.bool, // 是否显示三角标
+  arrowLeft: PropTypes.string,
+  /** 预判高度。因为 popup 的宽高会是可变的，所以没法判断视窗内是否能放得下，于是有此。 */
+  predictingHeight: PropTypes.number,
+  /** 纯粹的，目前是没有背景色，没有阴影 */
+  pureContainer: PropTypes.bool
+}
+
+Popup.defaultProps = {
+  top: false,
+  right: false,
+  showArrow: false,
+  offset: 0
+}
+
+export default Popup