@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/drop_select/index.js

@@ -1,208 +1,208 @@
-import { getLocale } from '@gmfe/locales'
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-class DropSelect extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      activeIndex: null
-    }
-
-    this.documentClickHandler = this.documentClickHandler.bind(this)
-    this.onEscapeKeyUp = this.onEscapeKeyUp.bind(this)
-  }
-
-  componentDidMount() {
-    window.document.addEventListener('click', this.documentClickHandler)
-    window.document.addEventListener('keydown', this.onEscapeKeyUp)
-  }
-
-  componentDidUpdate() {
-    const dom = this.refSelectPanel.querySelector('.gm-dropselect-list .active')
-    dom && dom.scrollIntoViewIfNeeded() // scrollIntoView
-  }
-
-  componentWillUnmount() {
-    window.document.removeEventListener('click', this.documentClickHandler)
-    window.document.removeEventListener('keydown', this.onEscapeKeyUp)
-  }
-
-  processData(data) {
-    return Object.assign(
-      {
-        loading: false,
-        actions: [],
-        list: [],
-        columns: []
-      },
-      data
-    )
-  }
-
-  documentClickHandler(e) {
-    if (!this.refSelectPanel.contains(e.target)) {
-      this.setState({
-        activeIndex: null
-      })
-      this.props.onHide()
-    }
-  }
-
-  handleKeyDown(size, e) {
-    // 列表为空
-    if (!size) {
-      return
-    }
-
-    let activeIndex = this.state.activeIndex
-
-    // 键盘 上键
-    if (e.keyCode === 38) {
-      if (activeIndex === null) {
-        activeIndex = size
-      }
-
-      activeIndex--
-    } else if (e.keyCode === 40) {
-      // 键盘 下键
-      if (activeIndex === null) {
-        activeIndex = -1
-      }
-
-      activeIndex++
-    } else if (e.keyCode === 13) {
-      // 键盘 回车
-      if (activeIndex === null) {
-        return
-      }
-      this.props.onEnter(activeIndex)
-    } else {
-      return
-    }
-
-    this.setState({
-      activeIndex: (size + activeIndex) % size
-    })
-  }
-
-  onEscapeKeyUp(e) {
-    if (e.keyCode === 27) {
-      this.props.onHide()
-    }
-  }
-
-  render() {
-    const thisProps = this.props
-
-    const show = thisProps.show
-    const { loading, list, columns, actions } = this.processData(
-      this.props.data
-    )
-    const { activeIndex } = this.state
-    let coolList
-
-    const coolTitle = columns.map(col => {
-      return (
-        <div className='gm-ellipsis' key={col.field}>
-          {col.name}
-        </div>
-      )
-    })
-
-    if (loading) {
-      coolList = (
-        <li className='gm-dropselect-item'>
-          <span>&nbsp;</span>
-          <i className='glyphicon glyphicon-refresh glyphicon-spin' />
-        </li>
-      )
-    } else {
-      coolList = list.map((rowData, rowIndex) => {
-        const cls = classNames('gm-dropselect-item', {
-          active: activeIndex === rowIndex
-        })
-        const row = columns.map((col, index) => {
-          const field = col.field
-          const value = rowData[field]
-          if (col.render) {
-            const val = col.render(value, rowData, rowIndex)
-            return (
-              <div className='gm-ellipsis' style={{ flex: '1' }} key={index}>
-                {val}
-              </div>
-            )
-          } else {
-            return (
-              <div className='gm-ellipsis' key={index}>
-                {value}
-              </div>
-            )
-          }
-        })
-        const actionDom = actions.map((action, index) => {
-          const disabled = action.getDisabled
-            ? action.getDisabled(rowData, rowIndex)
-            : false
-          return (
-            <button
-              className={action.className}
-              onClick={action.onClick.bind(null, rowData)}
-              disabled={disabled}
-              key={index}
-            >
-              {action.text}
-            </button>
-          )
-        })
-
-        return (
-          <li className={cls} key={rowData.id}>
-            {row}
-            {actionDom.length ? <div>{actionDom}</div> : null}
-          </li>
-        )
-      })
-    }
-
-    return (
-      <div
-        className={classNames('gm-dropselect', thisProps.className)}
-        ref={ref => (this.refSelectPanel = ref)}
-        onKeyDown={this.handleKeyDown.bind(this, list.length)}
-      >
-        {thisProps.children}
-        <div className='gm-dropselect-wrap'>
-          <div
-            className='gm-dropselect-list-wrap gm-box-shadow-bottom'
-            style={{ display: show ? 'block' : 'none' }}
-          >
-            <ul className='gm-dropselect-list'>
-              <li className='gm-dropselect-item gm-dropselect-title'>
-                {coolTitle}
-                {!!actions.length && <div>{getLocale('操作')}</div>}
-              </li>
-              {coolList}
-            </ul>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-DropSelect.propTypes = {
-  show: PropTypes.bool.isRequired,
-  data: PropTypes.object,
-  onEnter: PropTypes.func,
-  onHide: PropTypes.func
-}
-
-DropSelect.defaultProps = {
-  onEnter: index => {
-    console.log('onEnter index:', index)
-  }
-}
-
-export default DropSelect
+import { getLocale } from '@gmfe/locales'
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+class DropSelect extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      activeIndex: null
+    }
+
+    this.documentClickHandler = this.documentClickHandler.bind(this)
+    this.onEscapeKeyUp = this.onEscapeKeyUp.bind(this)
+  }
+
+  componentDidMount() {
+    window.document.addEventListener('click', this.documentClickHandler)
+    window.document.addEventListener('keydown', this.onEscapeKeyUp)
+  }
+
+  componentDidUpdate() {
+    const dom = this.refSelectPanel.querySelector('.gm-dropselect-list .active')
+    dom && dom.scrollIntoViewIfNeeded() // scrollIntoView
+  }
+
+  componentWillUnmount() {
+    window.document.removeEventListener('click', this.documentClickHandler)
+    window.document.removeEventListener('keydown', this.onEscapeKeyUp)
+  }
+
+  processData(data) {
+    return Object.assign(
+      {
+        loading: false,
+        actions: [],
+        list: [],
+        columns: []
+      },
+      data
+    )
+  }
+
+  documentClickHandler(e) {
+    if (!this.refSelectPanel.contains(e.target)) {
+      this.setState({
+        activeIndex: null
+      })
+      this.props.onHide()
+    }
+  }
+
+  handleKeyDown(size, e) {
+    // 列表为空
+    if (!size) {
+      return
+    }
+
+    let activeIndex = this.state.activeIndex
+
+    // 键盘 上键
+    if (e.keyCode === 38) {
+      if (activeIndex === null) {
+        activeIndex = size
+      }
+
+      activeIndex--
+    } else if (e.keyCode === 40) {
+      // 键盘 下键
+      if (activeIndex === null) {
+        activeIndex = -1
+      }
+
+      activeIndex++
+    } else if (e.keyCode === 13) {
+      // 键盘 回车
+      if (activeIndex === null) {
+        return
+      }
+      this.props.onEnter(activeIndex)
+    } else {
+      return
+    }
+
+    this.setState({
+      activeIndex: (size + activeIndex) % size
+    })
+  }
+
+  onEscapeKeyUp(e) {
+    if (e.keyCode === 27) {
+      this.props.onHide()
+    }
+  }
+
+  render() {
+    const thisProps = this.props
+
+    const show = thisProps.show
+    const { loading, list, columns, actions } = this.processData(
+      this.props.data
+    )
+    const { activeIndex } = this.state
+    let coolList
+
+    const coolTitle = columns.map(col => {
+      return (
+        <div className='gm-ellipsis' key={col.field}>
+          {col.name}
+        </div>
+      )
+    })
+
+    if (loading) {
+      coolList = (
+        <li className='gm-dropselect-item'>
+          <span>&nbsp;</span>
+          <i className='glyphicon glyphicon-refresh glyphicon-spin' />
+        </li>
+      )
+    } else {
+      coolList = list.map((rowData, rowIndex) => {
+        const cls = classNames('gm-dropselect-item', {
+          active: activeIndex === rowIndex
+        })
+        const row = columns.map((col, index) => {
+          const field = col.field
+          const value = rowData[field]
+          if (col.render) {
+            const val = col.render(value, rowData, rowIndex)
+            return (
+              <div className='gm-ellipsis' style={{ flex: '1' }} key={index}>
+                {val}
+              </div>
+            )
+          } else {
+            return (
+              <div className='gm-ellipsis' key={index}>
+                {value}
+              </div>
+            )
+          }
+        })
+        const actionDom = actions.map((action, index) => {
+          const disabled = action.getDisabled
+            ? action.getDisabled(rowData, rowIndex)
+            : false
+          return (
+            <button
+              className={action.className}
+              onClick={action.onClick.bind(null, rowData)}
+              disabled={disabled}
+              key={index}
+            >
+              {action.text}
+            </button>
+          )
+        })
+
+        return (
+          <li className={cls} key={rowData.id}>
+            {row}
+            {actionDom.length ? <div>{actionDom}</div> : null}
+          </li>
+        )
+      })
+    }
+
+    return (
+      <div
+        className={classNames('gm-dropselect', thisProps.className)}
+        ref={ref => (this.refSelectPanel = ref)}
+        onKeyDown={this.handleKeyDown.bind(this, list.length)}
+      >
+        {thisProps.children}
+        <div className='gm-dropselect-wrap'>
+          <div
+            className='gm-dropselect-list-wrap gm-box-shadow-bottom'
+            style={{ display: show ? 'block' : 'none' }}
+          >
+            <ul className='gm-dropselect-list'>
+              <li className='gm-dropselect-item gm-dropselect-title'>
+                {coolTitle}
+                {!!actions.length && <div>{getLocale('操作')}</div>}
+              </li>
+              {coolList}
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+DropSelect.propTypes = {
+  show: PropTypes.bool.isRequired,
+  data: PropTypes.object,
+  onEnter: PropTypes.func,
+  onHide: PropTypes.func
+}
+
+DropSelect.defaultProps = {
+  onEnter: index => {
+    console.log('onEnter index:', index)
+  }
+}
+
+export default DropSelect

package/src/component/drop_select/style.less

@@ -1,69 +1,69 @@
-.gm-dropselect {
-  vertical-align: middle;
-}
-
-.gm-dropselect-wrap {
-  height: 0;
-  overflow: visible;
-  position: relative;
-  z-index: 10000;
-}
-
-.gm-dropselect-wrap .gm-dropselect-list-wrap {
-  border-radius: 0 0 4px 4px;
-  overflow: hidden;
-  background-color: #fff;
-  border-top: none;
-  position: absolute;
-  width: 100%;
-  cursor: default;
-  max-height: 230px;
-  overflow-y: auto;
-}
-
-.gm-dropselect-list-wrap .gm-dropselect-list li {
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid @list-group-border;
-}
-
-.gm-dropselect-list li:not(.gm-dropselect-title):hover {
-  background-color: @list-group-hover-bg;
-}
-
-.gm-dropselect-list-wrap .gm-dropselect-list {
-  margin-bottom: 0;
-  list-style: none;
-  padding: 0;
-}
-
-.gm-dropselect-list-wrap .gm-dropselect-item {
-  line-height: 32px;
-  font-size: 12px;
-  height: 45px;
-
-  &.active {
-    background-color: @list-group-hover-bg;
-  }
-}
-
-.gm-dropselect-list-wrap .gm-dropselect-list .gm-dropselect-title {
-  overflow: hidden;
-  background-color: @gray-lighter;
-}
-
-.gm-dropselect-list-wrap .gm-dropselect-list li div {
-  flex: 1;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-}
-
-.gm-ellipsis {
-  display: block !important;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+.gm-dropselect {
+  vertical-align: middle;
+}
+
+.gm-dropselect-wrap {
+  height: 0;
+  overflow: visible;
+  position: relative;
+  z-index: 10000;
+}
+
+.gm-dropselect-wrap .gm-dropselect-list-wrap {
+  border-radius: 0 0 4px 4px;
+  overflow: hidden;
+  background-color: #fff;
+  border-top: none;
+  position: absolute;
+  width: 100%;
+  cursor: default;
+  max-height: 230px;
+  overflow-y: auto;
+}
+
+.gm-dropselect-list-wrap .gm-dropselect-list li {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid @list-group-border;
+}
+
+.gm-dropselect-list li:not(.gm-dropselect-title):hover {
+  background-color: @list-group-hover-bg;
+}
+
+.gm-dropselect-list-wrap .gm-dropselect-list {
+  margin-bottom: 0;
+  list-style: none;
+  padding: 0;
+}
+
+.gm-dropselect-list-wrap .gm-dropselect-item {
+  line-height: 32px;
+  font-size: 12px;
+  height: 45px;
+
+  &.active {
+    background-color: @list-group-hover-bg;
+  }
+}
+
+.gm-dropselect-list-wrap .gm-dropselect-list .gm-dropselect-title {
+  overflow: hidden;
+  background-color: @gray-lighter;
+}
+
+.gm-dropselect-list-wrap .gm-dropselect-list li div {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.gm-ellipsis {
+  display: block !important;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

package/src/component/dropper/index.js

@@ -1,62 +1,62 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { is } from '@gm-common/tool'
-
-class Dropper extends React.Component {
-  handleDrop = e => {
-    e.preventDefault()
-
-    const { multiple, onDrop } = this.props
-
-    const droppedFiles = e.dataTransfer ? e.dataTransfer.files : e.target.files
-    const max = multiple ? droppedFiles.length : 1
-    const files = []
-
-    for (let i = 0; i < max; i++) {
-      const file = droppedFiles[i]
-      file.preview = window.URL.createObjectURL(file)
-      files.push(file)
-    }
-    onDrop(files, e)
-  }
-
-  handleClick = () => {
-    this.refInput.value = null
-    this.refInput.click()
-  }
-
-  render() {
-    const { className, children, accept, multiple } = this.props
-    const cn = className || 'gm-dropper-default'
-
-    return (
-      <div className='gm-dropper'>
-        <div className={cn} onClick={this.handleClick} onDrop={this.handleDrop}>
-          {children}
-        </div>
-        <input
-          type='file'
-          ref={ref => (this.refInput = ref)}
-          className='gm-dropper-input'
-          multiple={!is.weixin() && multiple}
-          accept={accept}
-          onChange={this.handleDrop}
-        />
-      </div>
-    )
-  }
-}
-
-Dropper.defaultProps = {
-  multiple: false
-}
-
-Dropper.propTypes = {
-  multiple: PropTypes.bool,
-  onDrop: PropTypes.func.isRequired,
-  accept: PropTypes.string,
-  children: PropTypes.any,
-  className: PropTypes.string
-}
-// TODO 重构
-export default Dropper
+import React from 'react'
+import PropTypes from 'prop-types'
+import { is } from '@gm-common/tool'
+
+class Dropper extends React.Component {
+  handleDrop = e => {
+    e.preventDefault()
+
+    const { multiple, onDrop } = this.props
+
+    const droppedFiles = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    const max = multiple ? droppedFiles.length : 1
+    const files = []
+
+    for (let i = 0; i < max; i++) {
+      const file = droppedFiles[i]
+      file.preview = window.URL.createObjectURL(file)
+      files.push(file)
+    }
+    onDrop(files, e)
+  }
+
+  handleClick = () => {
+    this.refInput.value = null
+    this.refInput.click()
+  }
+
+  render() {
+    const { className, children, accept, multiple } = this.props
+    const cn = className || 'gm-dropper-default'
+
+    return (
+      <div className='gm-dropper'>
+        <div className={cn} onClick={this.handleClick} onDrop={this.handleDrop}>
+          {children}
+        </div>
+        <input
+          type='file'
+          ref={ref => (this.refInput = ref)}
+          className='gm-dropper-input'
+          multiple={!is.weixin() && multiple}
+          accept={accept}
+          onChange={this.handleDrop}
+        />
+      </div>
+    )
+  }
+}
+
+Dropper.defaultProps = {
+  multiple: false
+}
+
+Dropper.propTypes = {
+  multiple: PropTypes.bool,
+  onDrop: PropTypes.func.isRequired,
+  accept: PropTypes.string,
+  children: PropTypes.any,
+  className: PropTypes.string
+}
+// TODO 重构
+export default Dropper