@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/level_select/level_select.stories.js

@@ -1,67 +1,67 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import LevelSelect from './index'
-import { observable } from 'mobx'
-
-const data = [
-  {
-    value: 'A',
-    text: '广州越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀',
-    children: [
-      {
-        value: 1,
-        text: '越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀'
-      },
-      { value: 2, text: '荔湾' },
-      { value: 3, text: '天河' },
-      { value: 4, text: '海珠' },
-      { value: 5, text: '白云' },
-      { value: 6, text: '黄埔' },
-      { value: 7, text: '番禺' },
-      { value: 8, text: '南沙' },
-      { value: 9, text: '花都' },
-      { value: 10, text: '增城' },
-      { value: 11, text: '从化' }
-    ]
-  },
-  {
-    value: 'B',
-    text: '深圳',
-    children: [
-      { value: 1, text: '福田' },
-      { value: 2, text: '罗湖' },
-      { value: 3, text: '南山' },
-      { value: 4, text: '盐田' },
-      { value: 5, text: '宝安' },
-      { value: 6, text: '龙岗' },
-      { value: 7, text: '龙华' },
-      { value: 8, text: '坪山' },
-      { value: 9, text: '光明' },
-      { value: 10, text: '大鹏' }
-    ]
-  }
-]
-
-const store = observable({
-  selected: [],
-  changeSelect(value) {
-    this.selected = value
-  }
-})
-
-storiesOf('LevelSelect', module)
-  .add('common', () => (
-    <LevelSelect
-      selected={store.selected}
-      data={data}
-      onSelect={value => store.changeSelect(value)}
-    />
-  ))
-  .add('right', () => (
-    <LevelSelect
-      selected={store.selected}
-      data={data}
-      onSelect={value => store.changeSelect(value)}
-      right
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import LevelSelect from './index'
+import { observable } from 'mobx'
+
+const data = [
+  {
+    value: 'A',
+    text: '广州越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀',
+    children: [
+      {
+        value: 1,
+        text: '越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀越秀'
+      },
+      { value: 2, text: '荔湾' },
+      { value: 3, text: '天河' },
+      { value: 4, text: '海珠' },
+      { value: 5, text: '白云' },
+      { value: 6, text: '黄埔' },
+      { value: 7, text: '番禺' },
+      { value: 8, text: '南沙' },
+      { value: 9, text: '花都' },
+      { value: 10, text: '增城' },
+      { value: 11, text: '从化' }
+    ]
+  },
+  {
+    value: 'B',
+    text: '深圳',
+    children: [
+      { value: 1, text: '福田' },
+      { value: 2, text: '罗湖' },
+      { value: 3, text: '南山' },
+      { value: 4, text: '盐田' },
+      { value: 5, text: '宝安' },
+      { value: 6, text: '龙岗' },
+      { value: 7, text: '龙华' },
+      { value: 8, text: '坪山' },
+      { value: 9, text: '光明' },
+      { value: 10, text: '大鹏' }
+    ]
+  }
+]
+
+const store = observable({
+  selected: [],
+  changeSelect(value) {
+    this.selected = value
+  }
+})
+
+storiesOf('LevelSelect', module)
+  .add('common', () => (
+    <LevelSelect
+      selected={store.selected}
+      data={data}
+      onSelect={value => store.changeSelect(value)}
+    />
+  ))
+  .add('right', () => (
+    <LevelSelect
+      selected={store.selected}
+      data={data}
+      onSelect={value => store.changeSelect(value)}
+      right
+    />
+  ))

package/src/component/list/base.js

@@ -1,155 +1,155 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import classNames from 'classnames'
-
-// 不要轻易改这个文件
-class Base extends React.Component {
-  refList = React.createRef()
-
-  _isUnMounted = false
-
-  apiDoSelectWillActive = () => {
-    const flatList = this.getFlatData()
-
-    const { willActiveIndex } = this.props
-    if (
-      willActiveIndex !== null &&
-      willActiveIndex !== undefined &&
-      willActiveIndex < flatList.length
-    ) {
-      this.handleSelect(flatList[willActiveIndex])
-    }
-  }
-
-  doScrollToSelected = selector => {
-    // 找第一个即可
-    if (!this._isUnMounted) {
-      const $active = this.refList.current.querySelector(selector)
-      if ($active) {
-        $active.scrollIntoViewIfNeeded()
-      }
-    }
-  }
-
-  getFlatData = () => {
-    return _.flatMap(this.data, v => v.children)
-  }
-
-  componentWillUnmount() {
-    this._isUnMounted = true
-  }
-
-  componentDidMount() {
-    if (this.props.isScrollTo) {
-      this.doScrollToSelected('.active')
-      // will-active more prefer
-      this.doScrollToSelected('.will-active')
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.props.isScrollTo) {
-      this.doScrollToSelected('.will-active')
-    }
-  }
-
-  handleSelect = item => {
-    if (item.disabled) {
-      return
-    }
-    const { multiple, selected, onSelect } = this.props
-    if (multiple) {
-      onSelect(_.xor(selected, [item.value]))
-    } else {
-      onSelect([item.value])
-    }
-  }
-
-  render() {
-    const {
-      data,
-      isGroupList,
-      selected,
-      multiple,
-      onSelect,
-      isScrollTo, // eslint-disable-line
-      renderItem,
-      className,
-      willActiveIndex,
-      getItemProps,
-      ...rest
-    } = this.props
-
-    let sequenceDataIndex = -1
-
-    return (
-      <div
-        {...rest}
-        ref={this.refList}
-        className={classNames(
-          'gm-list',
-          {
-            'gm-list-group': isGroupList
-          },
-          className
-        )}
-      >
-        {_.map(data, (group, gIndex) => (
-          <div key={gIndex + group.label} className='gm-list-group-item'>
-            <div className='gm-list-label'>{group.label}</div>
-            {_.map(group.children, (v, index) => {
-              sequenceDataIndex++
-              return (
-                <div
-                  key={`${index}_${v.value}`}
-                  {...getItemProps(v)}
-                  className={classNames('gm-list-item', {
-                    active: selected.includes(v.value),
-                    'will-active': willActiveIndex === sequenceDataIndex,
-                    disabled: v.disabled
-                  })}
-                  onClick={this.handleSelect.bind(this, v)}
-                >
-                  {renderItem(v, index)}
-                </div>
-              )
-            })}
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
-
-Base.propTypes = {
-  // 基本属性
-  data: PropTypes.array.isRequired, // label, children: [{ value text, disabled}]
-  selected: PropTypes.array.isRequired,
-  onSelect: PropTypes.func, // 返回数组
-  multiple: PropTypes.bool,
-  isGroupList: PropTypes.bool, // 在这里仅仅表示数据的类型，对UI有影响而已
-
-  /** 自定义 item，参数 item, index */
-  renderItem: PropTypes.func,
-  willActiveIndex: PropTypes.number,
-
-  // 滚动
-  isScrollTo: PropTypes.bool,
-
-  /** 少用。给与更多 Item 的响应 */
-  getItemProps: PropTypes.func,
-
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-// 有直接调用 Base 的地方，估需要 defaultProps
-Base.defaultProps = {
-  multiple: false,
-  onSelect: _.noop,
-  renderItem: item => item.text,
-  getItemProps: () => ({})
-}
-
-export default Base
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import classNames from 'classnames'
+
+// 不要轻易改这个文件
+class Base extends React.Component {
+  refList = React.createRef()
+
+  _isUnMounted = false
+
+  apiDoSelectWillActive = () => {
+    const flatList = this.getFlatData()
+
+    const { willActiveIndex } = this.props
+    if (
+      willActiveIndex !== null &&
+      willActiveIndex !== undefined &&
+      willActiveIndex < flatList.length
+    ) {
+      this.handleSelect(flatList[willActiveIndex])
+    }
+  }
+
+  doScrollToSelected = selector => {
+    // 找第一个即可
+    if (!this._isUnMounted) {
+      const $active = this.refList.current.querySelector(selector)
+      if ($active) {
+        $active.scrollIntoViewIfNeeded()
+      }
+    }
+  }
+
+  getFlatData = () => {
+    return _.flatMap(this.data, v => v.children)
+  }
+
+  componentWillUnmount() {
+    this._isUnMounted = true
+  }
+
+  componentDidMount() {
+    if (this.props.isScrollTo) {
+      this.doScrollToSelected('.active')
+      // will-active more prefer
+      this.doScrollToSelected('.will-active')
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isScrollTo) {
+      this.doScrollToSelected('.will-active')
+    }
+  }
+
+  handleSelect = item => {
+    if (item.disabled) {
+      return
+    }
+    const { multiple, selected, onSelect } = this.props
+    if (multiple) {
+      onSelect(_.xor(selected, [item.value]))
+    } else {
+      onSelect([item.value])
+    }
+  }
+
+  render() {
+    const {
+      data,
+      isGroupList,
+      selected,
+      multiple,
+      onSelect,
+      isScrollTo, // eslint-disable-line
+      renderItem,
+      className,
+      willActiveIndex,
+      getItemProps,
+      ...rest
+    } = this.props
+
+    let sequenceDataIndex = -1
+
+    return (
+      <div
+        {...rest}
+        ref={this.refList}
+        className={classNames(
+          'gm-list',
+          {
+            'gm-list-group': isGroupList
+          },
+          className
+        )}
+      >
+        {_.map(data, (group, gIndex) => (
+          <div key={gIndex + group.label} className='gm-list-group-item'>
+            <div className='gm-list-label'>{group.label}</div>
+            {_.map(group.children, (v, index) => {
+              sequenceDataIndex++
+              return (
+                <div
+                  key={`${index}_${v.value}`}
+                  {...getItemProps(v)}
+                  className={classNames('gm-list-item', {
+                    active: selected.includes(v.value),
+                    'will-active': willActiveIndex === sequenceDataIndex,
+                    disabled: v.disabled
+                  })}
+                  onClick={this.handleSelect.bind(this, v)}
+                >
+                  {renderItem(v, index)}
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+Base.propTypes = {
+  // 基本属性
+  data: PropTypes.array.isRequired, // label, children: [{ value text, disabled}]
+  selected: PropTypes.array.isRequired,
+  onSelect: PropTypes.func, // 返回数组
+  multiple: PropTypes.bool,
+  isGroupList: PropTypes.bool, // 在这里仅仅表示数据的类型，对UI有影响而已
+
+  /** 自定义 item，参数 item, index */
+  renderItem: PropTypes.func,
+  willActiveIndex: PropTypes.number,
+
+  // 滚动
+  isScrollTo: PropTypes.bool,
+
+  /** 少用。给与更多 Item 的响应 */
+  getItemProps: PropTypes.func,
+
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+// 有直接调用 Base 的地方，估需要 defaultProps
+Base.defaultProps = {
+  multiple: false,
+  onSelect: _.noop,
+  renderItem: item => item.text,
+  getItemProps: () => ({})
+}
+
+export default Base

package/src/component/list/index.js

@@ -1,93 +1,93 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import Base from './base'
-import { warn, devWarn } from '@gm-common/tool'
-
-/** 列表组件 */
-class List extends React.Component {
-  ref = React.createRef()
-
-  constructor(props) {
-    super(props)
-
-    devWarn(() => {
-      if (props.multiple && !_.isArray(props.selected)) {
-        warn('多选情况下 selected 请传数组')
-      }
-    })
-  }
-
-  apiDoSelectWillActive = () => {
-    this.ref.apiDoSelectWillActive()
-  }
-
-  handleSelected = selected => {
-    const { multiple, onSelect } = this.props
-
-    if (multiple) {
-      onSelect(selected)
-    } else {
-      onSelect(selected[0])
-    }
-  }
-
-  render() {
-    const { data, selected, multiple, isGroupList, ...rest } = this.props
-
-    let oData
-    if (isGroupList) {
-      oData = data
-    } else {
-      oData = [
-        {
-          label: '',
-          children: data
-        }
-      ]
-    }
-
-    let oSelected
-    if (multiple) {
-      // 如果 selected 为 null，需要转成 []
-      oSelected = selected || []
-    } else {
-      oSelected = _.isNil(selected) ? [] : [selected]
-    }
-
-    return (
-      <Base
-        {...rest}
-        ref={this.ref}
-        data={oData}
-        selected={oSelected}
-        onSelect={this.handleSelected}
-        multiple={multiple}
-        isGroupList={isGroupList}
-      />
-    )
-  }
-}
-
-List.propTypes = {
-  ...Base.propTypes,
-
-  /**
-   * [{value, text, disabled}]
-   * group [{label, children: [{value, text, disabled}]}]
-   * */
-  data: PropTypes.array.isRequired, // value text
-  /** 单选 value，多选 [value, value]。多选请务必提供数组 */
-  selected: PropTypes.any,
-  /** 单选 value，多选 [value, value] */
-  onSelect: PropTypes.func
-}
-
-List.defaultProps = {
-  multiple: false,
-  onSelect: _.noop,
-  renderItem: item => item.text,
-  getItemProps: () => ({})
-}
-
-export default List
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import Base from './base'
+import { warn, devWarn } from '@gm-common/tool'
+
+/** 列表组件 */
+class List extends React.Component {
+  ref = React.createRef()
+
+  constructor(props) {
+    super(props)
+
+    devWarn(() => {
+      if (props.multiple && !_.isArray(props.selected)) {
+        warn('多选情况下 selected 请传数组')
+      }
+    })
+  }
+
+  apiDoSelectWillActive = () => {
+    this.ref.apiDoSelectWillActive()
+  }
+
+  handleSelected = selected => {
+    const { multiple, onSelect } = this.props
+
+    if (multiple) {
+      onSelect(selected)
+    } else {
+      onSelect(selected[0])
+    }
+  }
+
+  render() {
+    const { data, selected, multiple, isGroupList, ...rest } = this.props
+
+    let oData
+    if (isGroupList) {
+      oData = data
+    } else {
+      oData = [
+        {
+          label: '',
+          children: data
+        }
+      ]
+    }
+
+    let oSelected
+    if (multiple) {
+      // 如果 selected 为 null，需要转成 []
+      oSelected = selected || []
+    } else {
+      oSelected = _.isNil(selected) ? [] : [selected]
+    }
+
+    return (
+      <Base
+        {...rest}
+        ref={this.ref}
+        data={oData}
+        selected={oSelected}
+        onSelect={this.handleSelected}
+        multiple={multiple}
+        isGroupList={isGroupList}
+      />
+    )
+  }
+}
+
+List.propTypes = {
+  ...Base.propTypes,
+
+  /**
+   * [{value, text, disabled}]
+   * group [{label, children: [{value, text, disabled}]}]
+   * */
+  data: PropTypes.array.isRequired, // value text
+  /** 单选 value，多选 [value, value]。多选请务必提供数组 */
+  selected: PropTypes.any,
+  /** 单选 value，多选 [value, value] */
+  onSelect: PropTypes.func
+}
+
+List.defaultProps = {
+  multiple: false,
+  onSelect: _.noop,
+  renderItem: item => item.text,
+  getItemProps: () => ({})
+}
+
+export default List