@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/dialog/stories.js

@@ -1,125 +1,125 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Dialog from './index'
-import { Button } from '../../index'
-
-storiesOf('Dialog', module)
-  .add('default', () => (
-    <div>
-      <Button
-        onClick={() => {
-          Dialog.alert({
-            children: 'alert'
-          }).then(
-            () => {
-              console.log('resolve')
-            },
-            () => {
-              console.log('reject')
-            }
-          )
-        }}
-      >
-        alert
-      </Button>
-      <Button
-        onClick={() => {
-          Dialog.confirm({
-            children: 'confirm',
-            title: 'title'
-          }).then(
-            () => {
-              console.log('resolve')
-            },
-            () => {
-              console.log('reject')
-            }
-          )
-        }}
-      >
-        confirm
-      </Button>
-      <Button
-        onClick={() => {
-          Dialog.confirm({
-            title: 'title',
-            size: 'md',
-            children: <div>something</div>,
-            onOK: () => {
-              return new Promise(resolve => {
-                setTimeout(() => {
-                  resolve('a')
-                }, 1000)
-              })
-            }
-          }).then(() => {
-            console.log('promise resolve')
-          })
-        }}
-      >
-        confirm with loading state
-      </Button>
-      <Button
-        onClick={() => {
-          Dialog.prompt({
-            children: 'sssss',
-            title: 'title',
-            promptDefaultValue: '123',
-            onOK: value => {
-              console.log('ok', value)
-              return false // return Promise.reject();
-            }
-          }).then(
-            value => {
-              console.log('resolve', value)
-            },
-            () => {
-              console.log('reject')
-            }
-          )
-        }}
-      >
-        prompt
-      </Button>
-    </div>
-  ))
-  .add('dialog to dialog', () => {
-    const openSyncDialog1 = () => {
-      Dialog.confirm({
-        title: 'dialog1',
-        children: 'dialog1'
-      }).then(() => {
-        openDialog2()
-      })
-    }
-
-    const openAsyncDialog1 = () => {
-      Dialog.confirm({
-        title: 'dialog1',
-        children: 'dialog1',
-        onOK() {
-          return new Promise(resolve => {
-            setTimeout(() => resolve(), 2000)
-          }).then(() => {
-            setTimeout(() => {
-              // 必须加setTimeout
-              openDialog2()
-            })
-          })
-        }
-      })
-    }
-
-    const openDialog2 = () => {
-      Dialog.confirm({
-        title: 'dialog2',
-        children: 'dialog2'
-      })
-    }
-    return (
-      <>
-        <Button onClick={openSyncDialog1}>sync</Button>
-        <Button onClick={openAsyncDialog1}>async</Button>
-      </>
-    )
-  })
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Dialog from './index'
+import { Button } from '../../index'
+
+storiesOf('Dialog', module)
+  .add('default', () => (
+    <div>
+      <Button
+        onClick={() => {
+          Dialog.alert({
+            children: 'alert'
+          }).then(
+            () => {
+              console.log('resolve')
+            },
+            () => {
+              console.log('reject')
+            }
+          )
+        }}
+      >
+        alert
+      </Button>
+      <Button
+        onClick={() => {
+          Dialog.confirm({
+            children: 'confirm',
+            title: 'title'
+          }).then(
+            () => {
+              console.log('resolve')
+            },
+            () => {
+              console.log('reject')
+            }
+          )
+        }}
+      >
+        confirm
+      </Button>
+      <Button
+        onClick={() => {
+          Dialog.confirm({
+            title: 'title',
+            size: 'md',
+            children: <div>something</div>,
+            onOK: () => {
+              return new Promise(resolve => {
+                setTimeout(() => {
+                  resolve('a')
+                }, 1000)
+              })
+            }
+          }).then(() => {
+            console.log('promise resolve')
+          })
+        }}
+      >
+        confirm with loading state
+      </Button>
+      <Button
+        onClick={() => {
+          Dialog.prompt({
+            children: 'sssss',
+            title: 'title',
+            promptDefaultValue: '123',
+            onOK: value => {
+              console.log('ok', value)
+              return false // return Promise.reject();
+            }
+          }).then(
+            value => {
+              console.log('resolve', value)
+            },
+            () => {
+              console.log('reject')
+            }
+          )
+        }}
+      >
+        prompt
+      </Button>
+    </div>
+  ))
+  .add('dialog to dialog', () => {
+    const openSyncDialog1 = () => {
+      Dialog.confirm({
+        title: 'dialog1',
+        children: 'dialog1'
+      }).then(() => {
+        openDialog2()
+      })
+    }
+
+    const openAsyncDialog1 = () => {
+      Dialog.confirm({
+        title: 'dialog1',
+        children: 'dialog1',
+        onOK() {
+          return new Promise(resolve => {
+            setTimeout(() => resolve(), 2000)
+          }).then(() => {
+            setTimeout(() => {
+              // 必须加setTimeout
+              openDialog2()
+            })
+          })
+        }
+      })
+    }
+
+    const openDialog2 = () => {
+      Dialog.confirm({
+        title: 'dialog2',
+        children: 'dialog2'
+      })
+    }
+    return (
+      <>
+        <Button onClick={openSyncDialog1}>sync</Button>
+        <Button onClick={openAsyncDialog1}>async</Button>
+      </>
+    )
+  })

package/src/component/divider/index.js

@@ -1,28 +1,28 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Flex from '../flex'
-
-class Divider extends React.Component {
-  render() {
-    const { children } = this.props
-    return (
-      <Flex className='gm-divider'>
-        <Flex flex className='gm-divider-line' />
-        <div className='gm-padding-lr-10'>
-          {typeof children === 'string' ? (
-            <span className='gm-text-16'>{children}</span>
-          ) : (
-            children
-          )}
-        </div>
-        <Flex flex className='gm-divider-line' />
-      </Flex>
-    )
-  }
-}
-
-Divider.propTypes = {
-  children: PropTypes.any
-}
-
-export default Divider
+import React from 'react'
+import PropTypes from 'prop-types'
+import Flex from '../flex'
+
+class Divider extends React.Component {
+  render() {
+    const { children } = this.props
+    return (
+      <Flex className='gm-divider'>
+        <Flex flex className='gm-divider-line' />
+        <div className='gm-padding-lr-10'>
+          {typeof children === 'string' ? (
+            <span className='gm-text-16'>{children}</span>
+          ) : (
+            children
+          )}
+        </div>
+        <Flex flex className='gm-divider-line' />
+      </Flex>
+    )
+  }
+}
+
+Divider.propTypes = {
+  children: PropTypes.any
+}
+
+export default Divider

package/src/component/divider/stories.js

@@ -1,5 +1,5 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import Divider from './index'
-
-storiesOf('Divider', module).add('default', () => <Divider>lalala</Divider>)
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Divider from './index'
+
+storiesOf('Divider', module).add('default', () => <Divider>lalala</Divider>)

package/src/component/divider/style.less

@@ -1,15 +1,15 @@
-.gm-divider {
-  .gm-divider-line {
-    position: relative;
-  }
-
-  .gm-divider-line::before {
-    content: " ";
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 100%;
-    height: 1px;
-    background: @gm-border-color;
-  }
-}
+.gm-divider {
+  .gm-divider-line {
+    position: relative;
+  }
+
+  .gm-divider-line::before {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+    background: @gm-border-color;
+  }
+}

package/src/component/drawer/index.js

@@ -1,107 +1,107 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import LayoutRoot from '../layout_root'
-import classNames from 'classnames'
-import { findDOMNode } from 'react-dom'
-import _ from 'lodash'
-import EVENT_TYPE from '../../event_type'
-
-class Drawer extends React.Component {
-  constructor() {
-    super()
-    this.throttleDoScroll = _.throttle(this.doScroll, 200)
-  }
-
-  doScroll = () => {
-    window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.DRAWER_SCROLL))
-  }
-
-  componentDidMount() {
-    window.document.body.addEventListener('keydown', this.handleKeyDown)
-
-    findDOMNode(this.refDrawer).addEventListener(
-      'scroll',
-      this.throttleDoScroll
-    )
-  }
-
-  componentWillUnmount() {
-    window.document.body.removeEventListener('keydown', this.handleKeyDown)
-
-    findDOMNode(this.refDrawer).removeEventListener(
-      'scroll',
-      this.throttleDoScroll
-    )
-  }
-
-  handleKeyDown = event => {
-    if (event.keyCode === 27) {
-      this.props.onHide()
-    }
-  }
-
-  handleMask = e => {
-    if (e.target.classList.contains('gm-drawer')) {
-      this.props.onHide()
-    }
-  }
-
-  handleClose = () => {
-    this.props.onHide()
-  }
-
-  render() {
-    const { children, style, className, opacityMask } = this.props
-
-    return (
-      <div>
-        <div
-          className={classNames('gm-drawer-mask', {
-            'gm-drawer-mask-opacity': opacityMask
-          })}
-        />
-        <div
-          ref={ref => (this.refDrawer = ref)}
-          className={classNames('gm-drawer', className)}
-          tabIndex='-1'
-          onClick={this.handleMask}
-        >
-          <div
-            className={classNames('gm-drawer-content', {
-              'gm-border': opacityMask,
-              'gm-box-shadow-bottom': opacityMask
-            })}
-            style={style}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-Drawer.render = props => {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_SHOW))
-  LayoutRoot.setComponent(LayoutRoot.TYPE.DRAWER, <Drawer {...props} />)
-}
-
-Drawer.hide = () => {
-  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_HIDE))
-  LayoutRoot.setComponent(LayoutRoot.TYPE.DRAWER, null)
-}
-
-Drawer.propTypes = {
-  onHide: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  opacityMask: PropTypes.bool,
-  children: PropTypes.any
-}
-
-Drawer.defaultProps = {
-  onHide: _.noop,
-  opacityMask: false
-}
-
-export default Drawer
+import React from 'react'
+import PropTypes from 'prop-types'
+import LayoutRoot from '../layout_root'
+import classNames from 'classnames'
+import { findDOMNode } from 'react-dom'
+import _ from 'lodash'
+import EVENT_TYPE from '../../event_type'
+
+class Drawer extends React.Component {
+  constructor() {
+    super()
+    this.throttleDoScroll = _.throttle(this.doScroll, 200)
+  }
+
+  doScroll = () => {
+    window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.DRAWER_SCROLL))
+  }
+
+  componentDidMount() {
+    window.document.body.addEventListener('keydown', this.handleKeyDown)
+
+    findDOMNode(this.refDrawer).addEventListener(
+      'scroll',
+      this.throttleDoScroll
+    )
+  }
+
+  componentWillUnmount() {
+    window.document.body.removeEventListener('keydown', this.handleKeyDown)
+
+    findDOMNode(this.refDrawer).removeEventListener(
+      'scroll',
+      this.throttleDoScroll
+    )
+  }
+
+  handleKeyDown = event => {
+    if (event.keyCode === 27) {
+      this.props.onHide()
+    }
+  }
+
+  handleMask = e => {
+    if (e.target.classList.contains('gm-drawer')) {
+      this.props.onHide()
+    }
+  }
+
+  handleClose = () => {
+    this.props.onHide()
+  }
+
+  render() {
+    const { children, style, className, opacityMask } = this.props
+
+    return (
+      <div>
+        <div
+          className={classNames('gm-drawer-mask', {
+            'gm-drawer-mask-opacity': opacityMask
+          })}
+        />
+        <div
+          ref={ref => (this.refDrawer = ref)}
+          className={classNames('gm-drawer', className)}
+          tabIndex='-1'
+          onClick={this.handleMask}
+        >
+          <div
+            className={classNames('gm-drawer-content', {
+              'gm-border': opacityMask,
+              'gm-box-shadow-bottom': opacityMask
+            })}
+            style={style}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Drawer.render = props => {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_SHOW))
+  LayoutRoot.setComponent(LayoutRoot.TYPE.DRAWER, <Drawer {...props} />)
+}
+
+Drawer.hide = () => {
+  window.dispatchEvent(new window.CustomEvent(EVENT_TYPE.MODAL_HIDE))
+  LayoutRoot.setComponent(LayoutRoot.TYPE.DRAWER, null)
+}
+
+Drawer.propTypes = {
+  onHide: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  opacityMask: PropTypes.bool,
+  children: PropTypes.any
+}
+
+Drawer.defaultProps = {
+  onHide: _.noop,
+  opacityMask: false
+}
+
+export default Drawer

package/src/component/drawer/style.less

@@ -1,43 +1,43 @@
-.gm-drawer-mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1020;
-  background-color: rgba(0, 0, 0, 0.7);
-
-  &.gm-drawer-mask-opacity {
-    background-color: rgba(0, 0, 0, 0);
-  }
-}
-
-.gm-drawer {
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1030;
-  outline: 0;
-
-  .gm-drawer-content {
-    background-color: white;
-    width: auto;
-    margin: 0 0 0 auto;
-    height: 100%;
-    overflow: auto;
-  }
-}
-
-// 限制移动端最大宽度,防止隐藏close按钮
-@media (max-device-width: 766px) and (min-device-width: 0) {
-  .gm-drawer {
-    .gm-drawer-content {
-      max-width: 70vw;
-      overflow: auto !important;
-    }
-  }
-}
+.gm-drawer-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1020;
+  background-color: rgba(0, 0, 0, 0.7);
+
+  &.gm-drawer-mask-opacity {
+    background-color: rgba(0, 0, 0, 0);
+  }
+}
+
+.gm-drawer {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+  outline: 0;
+
+  .gm-drawer-content {
+    background-color: white;
+    width: auto;
+    margin: 0 0 0 auto;
+    height: 100%;
+    overflow: auto;
+  }
+}
+
+// 限制移动端最大宽度,防止隐藏close按钮
+@media (max-device-width: 766px) and (min-device-width: 0) {
+  .gm-drawer {
+    .gm-drawer-content {
+      max-width: 70vw;
+      overflow: auto !important;
+    }
+  }
+}