@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/level_list/index.js

@@ -1,120 +1,120 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import _ from 'lodash'
-import Flex from '../flex'
-import LevelItem from './level_item'
-import { getLevel } from './util'
-
-class LevelList extends React.Component {
-  handleListItemMouseEnter = (index, listItem) => {
-    const { willActiveSelected, onWillActiveSelect } = this.props
-
-    // 重要 slice 避免引用
-    const newWill = willActiveSelected.slice(0, index + 1)
-    newWill[index] = listItem.value
-    onWillActiveSelect(newWill)
-  }
-
-  handleSelect = () => {
-    const { onSelect, willActiveSelected } = this.props
-
-    onSelect(willActiveSelected)
-  }
-
-  handleMouseLeave = () => {
-    // 离开的时候要重置下 willActiveSelected 为 selected
-    const { selected, onWillActiveSelect } = this.props
-
-    // slice 避免引用
-    onWillActiveSelect(selected.slice())
-  }
-
-  render() {
-    const {
-      titles,
-      data,
-      selected,
-      onSelect,
-      willActiveSelected,
-      onWillActiveSelect,
-      isReverse,
-      className,
-      isForFunctionSet,
-      ...rest
-    } = this.props
-
-    const level = getLevel(data, willActiveSelected)
-
-    let gaps = []
-    if (isForFunctionSet) {
-      let indexs = _.map(willActiveSelected, (v, i) =>
-        _.findIndex(level[i], vv => vv.value === v)
-      )
-      indexs = [0, ...indexs]
-      let top = 0
-      gaps = _.map(indexs, v => {
-        top = v + top
-        return top
-      })
-    }
-
-    let items = _.map(level, (item, i) => (
-      <LevelItem
-        key={i}
-        title={titles[i]}
-        data={item}
-        selected={selected[i]}
-        onSelect={this.handleSelect}
-        willActiveSelected={willActiveSelected[i]}
-        onListItemMouseEnter={this.handleListItemMouseEnter.bind(this, i)}
-        style={{
-          paddingTop: gaps[i] ? gaps[i] * 30 : 0
-        }}
-      />
-    ))
-
-    if (isReverse) {
-      items = items.reverse()
-    }
-
-    return (
-      <Flex
-        {...rest}
-        className={classNames(
-          'gm-level-list',
-          {
-            'gm-level-list-for-function-set': isForFunctionSet
-          },
-          className
-        )}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        {items}
-      </Flex>
-    )
-  }
-}
-
-LevelList.propTypes = {
-  data: PropTypes.array.isRequired, // [{value, text, children}]
-  selected: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  // 没和
-  willActiveSelected: PropTypes.array.isRequired,
-  onWillActiveSelect: PropTypes.func.isRequired,
-  titles: PropTypes.array,
-  onlySelectLeaf: PropTypes.bool, // TODO
-  isReverse: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-
-  /** 内部用，暂时这么处理 */
-  isForFunctionSet: PropTypes.bool
-}
-
-LevelList.defaultProps = {
-  titles: []
-}
-
-export default LevelList
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import _ from 'lodash'
+import Flex from '../flex'
+import LevelItem from './level_item'
+import { getLevel } from './util'
+
+class LevelList extends React.Component {
+  handleListItemMouseEnter = (index, listItem) => {
+    const { willActiveSelected, onWillActiveSelect } = this.props
+
+    // 重要 slice 避免引用
+    const newWill = willActiveSelected.slice(0, index + 1)
+    newWill[index] = listItem.value
+    onWillActiveSelect(newWill)
+  }
+
+  handleSelect = () => {
+    const { onSelect, willActiveSelected } = this.props
+
+    onSelect(willActiveSelected)
+  }
+
+  handleMouseLeave = () => {
+    // 离开的时候要重置下 willActiveSelected 为 selected
+    const { selected, onWillActiveSelect } = this.props
+
+    // slice 避免引用
+    onWillActiveSelect(selected.slice())
+  }
+
+  render() {
+    const {
+      titles,
+      data,
+      selected,
+      onSelect,
+      willActiveSelected,
+      onWillActiveSelect,
+      isReverse,
+      className,
+      isForFunctionSet,
+      ...rest
+    } = this.props
+
+    const level = getLevel(data, willActiveSelected)
+
+    let gaps = []
+    if (isForFunctionSet) {
+      let indexs = _.map(willActiveSelected, (v, i) =>
+        _.findIndex(level[i], vv => vv.value === v)
+      )
+      indexs = [0, ...indexs]
+      let top = 0
+      gaps = _.map(indexs, v => {
+        top = v + top
+        return top
+      })
+    }
+
+    let items = _.map(level, (item, i) => (
+      <LevelItem
+        key={i}
+        title={titles[i]}
+        data={item}
+        selected={selected[i]}
+        onSelect={this.handleSelect}
+        willActiveSelected={willActiveSelected[i]}
+        onListItemMouseEnter={this.handleListItemMouseEnter.bind(this, i)}
+        style={{
+          paddingTop: gaps[i] ? gaps[i] * 30 : 0
+        }}
+      />
+    ))
+
+    if (isReverse) {
+      items = items.reverse()
+    }
+
+    return (
+      <Flex
+        {...rest}
+        className={classNames(
+          'gm-level-list',
+          {
+            'gm-level-list-for-function-set': isForFunctionSet
+          },
+          className
+        )}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {items}
+      </Flex>
+    )
+  }
+}
+
+LevelList.propTypes = {
+  data: PropTypes.array.isRequired, // [{value, text, children}]
+  selected: PropTypes.array.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  // 没和
+  willActiveSelected: PropTypes.array.isRequired,
+  onWillActiveSelect: PropTypes.func.isRequired,
+  titles: PropTypes.array,
+  onlySelectLeaf: PropTypes.bool, // TODO
+  isReverse: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+
+  /** 内部用，暂时这么处理 */
+  isForFunctionSet: PropTypes.bool
+}
+
+LevelList.defaultProps = {
+  titles: []
+}
+
+export default LevelList

package/src/component/level_list/level_item.js

@@ -1,64 +1,64 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import List from '../list'
-import classNames from 'classnames'
-import _ from 'lodash'
-import SVGRightSmall from '../../../svg/right-small.svg'
-
-const Item = props => {
-  const {
-    title,
-    data,
-    selected,
-    onSelect,
-    onListItemMouseEnter,
-    willActiveSelected,
-    className,
-    style
-  } = props
-
-  const renderItem = item => {
-    const hasChildren = item.children && !!item.children.length
-    return (
-      <div className='gm-position-relative'>
-        <div className={`${hasChildren ? 'gm-margin-right-10' : ''}`}>
-          {item.text}
-        </div>
-        {hasChildren && <SVGRightSmall className='gm-level-list-item-right' />}
-      </div>
-    )
-  }
-
-  const getItemProps = item => ({
-    onMouseEnter: () => onListItemMouseEnter(item)
-  })
-
-  const willActiveIndex = _.findIndex(data, v => v.value === willActiveSelected)
-
-  return (
-    <div className={classNames('gm-level-list-item ', className)} style={style}>
-      {title && <div className='gm-level-list-item-title'>{title}</div>}
-      <List
-        data={data}
-        selected={selected}
-        onSelect={onSelect}
-        renderItem={renderItem}
-        getItemProps={getItemProps}
-        willActiveIndex={willActiveIndex}
-      />
-    </div>
-  )
-}
-
-Item.propTypes = {
-  title: PropTypes.string,
-  data: PropTypes.array.isRequired, // [{value, text, children}]
-  selected: PropTypes.any,
-  onSelect: PropTypes.func.isRequired,
-  onListItemMouseEnter: PropTypes.func,
-  willActiveSelected: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-export default Item
+import React from 'react'
+import PropTypes from 'prop-types'
+import List from '../list'
+import classNames from 'classnames'
+import _ from 'lodash'
+import SVGRightSmall from '../../../svg/right-small.svg'
+
+const Item = props => {
+  const {
+    title,
+    data,
+    selected,
+    onSelect,
+    onListItemMouseEnter,
+    willActiveSelected,
+    className,
+    style
+  } = props
+
+  const renderItem = item => {
+    const hasChildren = item.children && !!item.children.length
+    return (
+      <div className='gm-position-relative'>
+        <div className={`${hasChildren ? 'gm-margin-right-10' : ''}`}>
+          {item.text}
+        </div>
+        {hasChildren && <SVGRightSmall className='gm-level-list-item-right' />}
+      </div>
+    )
+  }
+
+  const getItemProps = item => ({
+    onMouseEnter: () => onListItemMouseEnter(item)
+  })
+
+  const willActiveIndex = _.findIndex(data, v => v.value === willActiveSelected)
+
+  return (
+    <div className={classNames('gm-level-list-item ', className)} style={style}>
+      {title && <div className='gm-level-list-item-title'>{title}</div>}
+      <List
+        data={data}
+        selected={selected}
+        onSelect={onSelect}
+        renderItem={renderItem}
+        getItemProps={getItemProps}
+        willActiveIndex={willActiveIndex}
+      />
+    </div>
+  )
+}
+
+Item.propTypes = {
+  title: PropTypes.string,
+  data: PropTypes.array.isRequired, // [{value, text, children}]
+  selected: PropTypes.any,
+  onSelect: PropTypes.func.isRequired,
+  onListItemMouseEnter: PropTypes.func,
+  willActiveSelected: PropTypes.any,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+export default Item

package/src/component/level_list/level_list.stories.js

@@ -1,139 +1,139 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import LevelList from './'
-import { observable } from 'mobx'
-
-const areaData = [
-  {
-    value: '0',
-    text: '宝安',
-    children: [
-      {
-        value: '01',
-        text: '西乡'
-      },
-      {
-        value: '02',
-        text: '固戍'
-      }
-    ]
-  },
-  {
-    value: '1',
-    text: '南山',
-    children: [
-      {
-        value: '11',
-        text: '科技园科技园科技园科技园科技园科技园科技园科技园科技园科技园',
-        children: [
-          {
-            value: '111',
-            text: '东区'
-          },
-          {
-            value: '112',
-            text: '西区'
-          }
-        ]
-      },
-      {
-        value: '112',
-        text: '科技园科',
-        children: [
-          {
-            value: '1112',
-            text: '东区'
-          },
-          {
-            value: '1122',
-            text: '西区'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    value: '2',
-    text: '福田',
-    children: [
-      {
-        value: '21',
-        text: '竹子林',
-        children: [
-          {
-            value: '211',
-            text: '东区'
-          },
-          {
-            value: '212',
-            text: '西区'
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const store = observable({
-  data: areaData,
-  selected: ['1'],
-  willActiveSelected: ['1'],
-  setSelected(selected) {
-    console.log(selected)
-    this.selected = selected
-  },
-  setWillActiveSelected(willActiveSelected) {
-    this.willActiveSelected = willActiveSelected
-  }
-})
-
-storiesOf('LevelList', module)
-  .add('default', () => (
-    <div className='gm-inline-block'>
-      <LevelList
-        data={store.data.slice()}
-        selected={store.selected.slice()}
-        onSelect={selected => store.setSelected(selected)}
-        willActiveSelected={store.willActiveSelected.slice()}
-        onWillActiveSelect={willActiveSelected => {
-          console.log(willActiveSelected)
-          store.setWillActiveSelected(willActiveSelected)
-        }}
-      />
-    </div>
-  ))
-  .add('reverse', () => (
-    <div
-      style={{
-        position: 'absolute',
-        right: 0
-      }}
-    >
-      <LevelList
-        data={store.data.slice()}
-        selected={store.selected.slice()}
-        onSelect={selected => store.setSelected(selected)}
-        willActiveSelected={store.willActiveSelected.slice()}
-        onWillActiveSelect={willActiveSelected => {
-          console.log(willActiveSelected)
-          store.setWillActiveSelected(willActiveSelected)
-        }}
-        isReverse
-      />
-    </div>
-  ))
-  .add('专供 FunctionSet', () => (
-    <div className='gm-inline-block'>
-      <LevelList
-        data={store.data.slice()}
-        selected={store.selected.slice()}
-        onSelect={selected => store.setSelected(selected)}
-        willActiveSelected={store.willActiveSelected.slice()}
-        onWillActiveSelect={willActiveSelected => {
-          console.log(willActiveSelected)
-          store.setWillActiveSelected(willActiveSelected)
-        }}
-        isForFunctionSet
-      />
-    </div>
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import LevelList from './'
+import { observable } from 'mobx'
+
+const areaData = [
+  {
+    value: '0',
+    text: '宝安',
+    children: [
+      {
+        value: '01',
+        text: '西乡'
+      },
+      {
+        value: '02',
+        text: '固戍'
+      }
+    ]
+  },
+  {
+    value: '1',
+    text: '南山',
+    children: [
+      {
+        value: '11',
+        text: '科技园科技园科技园科技园科技园科技园科技园科技园科技园科技园',
+        children: [
+          {
+            value: '111',
+            text: '东区'
+          },
+          {
+            value: '112',
+            text: '西区'
+          }
+        ]
+      },
+      {
+        value: '112',
+        text: '科技园科',
+        children: [
+          {
+            value: '1112',
+            text: '东区'
+          },
+          {
+            value: '1122',
+            text: '西区'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: '2',
+    text: '福田',
+    children: [
+      {
+        value: '21',
+        text: '竹子林',
+        children: [
+          {
+            value: '211',
+            text: '东区'
+          },
+          {
+            value: '212',
+            text: '西区'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+const store = observable({
+  data: areaData,
+  selected: ['1'],
+  willActiveSelected: ['1'],
+  setSelected(selected) {
+    console.log(selected)
+    this.selected = selected
+  },
+  setWillActiveSelected(willActiveSelected) {
+    this.willActiveSelected = willActiveSelected
+  }
+})
+
+storiesOf('LevelList', module)
+  .add('default', () => (
+    <div className='gm-inline-block'>
+      <LevelList
+        data={store.data.slice()}
+        selected={store.selected.slice()}
+        onSelect={selected => store.setSelected(selected)}
+        willActiveSelected={store.willActiveSelected.slice()}
+        onWillActiveSelect={willActiveSelected => {
+          console.log(willActiveSelected)
+          store.setWillActiveSelected(willActiveSelected)
+        }}
+      />
+    </div>
+  ))
+  .add('reverse', () => (
+    <div
+      style={{
+        position: 'absolute',
+        right: 0
+      }}
+    >
+      <LevelList
+        data={store.data.slice()}
+        selected={store.selected.slice()}
+        onSelect={selected => store.setSelected(selected)}
+        willActiveSelected={store.willActiveSelected.slice()}
+        onWillActiveSelect={willActiveSelected => {
+          console.log(willActiveSelected)
+          store.setWillActiveSelected(willActiveSelected)
+        }}
+        isReverse
+      />
+    </div>
+  ))
+  .add('专供 FunctionSet', () => (
+    <div className='gm-inline-block'>
+      <LevelList
+        data={store.data.slice()}
+        selected={store.selected.slice()}
+        onSelect={selected => store.setSelected(selected)}
+        willActiveSelected={store.willActiveSelected.slice()}
+        onWillActiveSelect={willActiveSelected => {
+          console.log(willActiveSelected)
+          store.setWillActiveSelected(willActiveSelected)
+        }}
+        isForFunctionSet
+      />
+    </div>
+  ))