@gmfe/react 2.14.17 → 2.14.19-beta.0

package/src/component/tree/item.js

@@ -1,154 +1,154 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Checkbox } from '../checkbox'
-import Flex from '../flex'
-import classNames from 'classnames'
-import SVGPlus from '../../../svg/plus.svg'
-import SVGMinus from '../../../svg/minus.svg'
-
-const LeafItem = props => {
-  const {
-    leaf,
-    checked,
-    onChange,
-    onClickName,
-    renderLeafItem,
-    disabled,
-    _level
-  } = props
-
-  const handleChange = () => {
-    onChange(leaf, !checked)
-  }
-
-  const handleName = () => {
-    if (onClickName) {
-      onClickName(leaf, checked)
-    } else {
-      handleChange()
-    }
-  }
-
-  return (
-    <Flex
-      className={classNames(
-        'gm-hover-bg gm-tree-list-item gm-cursor ',
-        `gm-level-${_level}`,
-        {
-          disabled
-        }
-      )}
-      data-level={_level}
-    >
-      <Checkbox
-        value={leaf.value}
-        checked={checked}
-        onChange={handleChange}
-        className='gm-padding-0'
-        disabled={disabled}
-      />
-      <Flex flex column onClick={handleName}>
-        {renderLeafItem(leaf, handleChange)}
-      </Flex>
-    </Flex>
-  )
-}
-
-LeafItem.propTypes = {
-  leaf: PropTypes.object.isRequired,
-  checked: PropTypes.any.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onClickName: PropTypes.func,
-  disabled: PropTypes.bool,
-  // 自定义 leaf 渲染格式
-  renderLeafItem: PropTypes.func,
-  _level: PropTypes.number
-}
-
-LeafItem.defaultProps = {
-  renderLeafItem: leaf => leaf.name
-}
-
-const GroupItem = props => {
-  const {
-    group,
-    isOpen,
-    hasCheckbox,
-    checked,
-    onChange,
-    onGroup,
-    renderGroupItem,
-    onClickName,
-    children,
-    disabled,
-    _level
-  } = props
-
-  const handleChange = () => {
-    onChange(group, !checked)
-  }
-
-  const handleGroup = () => {
-    onGroup(group)
-  }
-
-  const handleName = () => {
-    if (onClickName) {
-      onClickName(group)
-    } else {
-      handleGroup()
-    }
-  }
-
-  return (
-    <>
-      <Flex
-        className={classNames(
-          'gm-tree-group-item gm-cursor gm-hover-bg',
-          `gm-level-${_level}`,
-          {
-            disabled
-          }
-        )}
-        data-level={_level}
-      >
-        <div className='gm-tree-group-item-expand' onClick={handleGroup}>
-          {isOpen ? <SVGMinus /> : <SVGPlus />}
-        </div>
-        {hasCheckbox && (
-          <Checkbox
-            value
-            checked={checked}
-            className='gm-padding-0'
-            onChange={handleChange}
-            disabled={disabled}
-          />
-        )}
-        <Flex flex column onClick={handleName}>
-          {renderGroupItem(group, handleGroup)}
-        </Flex>
-      </Flex>
-      {isOpen && <div className='gm-tree-group-list'>{children}</div>}
-    </>
-  )
-}
-
-GroupItem.propTypes = {
-  group: PropTypes.object.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  hasCheckbox: PropTypes.bool.isRequired,
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onGroup: PropTypes.func.isRequired,
-  children: PropTypes.element.isRequired,
-  renderGroupItem: PropTypes.func,
-  onClickName: PropTypes.func,
-  disabled: PropTypes.bool,
-  _level: PropTypes.number
-}
-
-GroupItem.defaultProps = {
-  renderGroupItem: item => item.name
-}
-
-export { LeafItem, GroupItem }
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Checkbox } from '../checkbox'
+import Flex from '../flex'
+import classNames from 'classnames'
+import SVGPlus from '../../../svg/plus.svg'
+import SVGMinus from '../../../svg/minus.svg'
+
+const LeafItem = props => {
+  const {
+    leaf,
+    checked,
+    onChange,
+    onClickName,
+    renderLeafItem,
+    disabled,
+    _level
+  } = props
+
+  const handleChange = () => {
+    onChange(leaf, !checked)
+  }
+
+  const handleName = () => {
+    if (onClickName) {
+      onClickName(leaf, checked)
+    } else {
+      handleChange()
+    }
+  }
+
+  return (
+    <Flex
+      className={classNames(
+        'gm-hover-bg gm-tree-list-item gm-cursor ',
+        `gm-level-${_level}`,
+        {
+          disabled
+        }
+      )}
+      data-level={_level}
+    >
+      <Checkbox
+        value={leaf.value}
+        checked={checked}
+        onChange={handleChange}
+        className='gm-padding-0'
+        disabled={disabled}
+      />
+      <Flex flex column onClick={handleName}>
+        {renderLeafItem(leaf, handleChange)}
+      </Flex>
+    </Flex>
+  )
+}
+
+LeafItem.propTypes = {
+  leaf: PropTypes.object.isRequired,
+  checked: PropTypes.any.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClickName: PropTypes.func,
+  disabled: PropTypes.bool,
+  // 自定义 leaf 渲染格式
+  renderLeafItem: PropTypes.func,
+  _level: PropTypes.number
+}
+
+LeafItem.defaultProps = {
+  renderLeafItem: leaf => leaf.name
+}
+
+const GroupItem = props => {
+  const {
+    group,
+    isOpen,
+    hasCheckbox,
+    checked,
+    onChange,
+    onGroup,
+    renderGroupItem,
+    onClickName,
+    children,
+    disabled,
+    _level
+  } = props
+
+  const handleChange = () => {
+    onChange(group, !checked)
+  }
+
+  const handleGroup = () => {
+    onGroup(group)
+  }
+
+  const handleName = () => {
+    if (onClickName) {
+      onClickName(group)
+    } else {
+      handleGroup()
+    }
+  }
+
+  return (
+    <>
+      <Flex
+        className={classNames(
+          'gm-tree-group-item gm-cursor gm-hover-bg',
+          `gm-level-${_level}`,
+          {
+            disabled
+          }
+        )}
+        data-level={_level}
+      >
+        <div className='gm-tree-group-item-expand' onClick={handleGroup}>
+          {isOpen ? <SVGMinus /> : <SVGPlus />}
+        </div>
+        {hasCheckbox && (
+          <Checkbox
+            value
+            checked={checked}
+            className='gm-padding-0'
+            onChange={handleChange}
+            disabled={disabled}
+          />
+        )}
+        <Flex flex column onClick={handleName}>
+          {renderGroupItem(group, handleGroup)}
+        </Flex>
+      </Flex>
+      {isOpen && <div className='gm-tree-group-list'>{children}</div>}
+    </>
+  )
+}
+
+GroupItem.propTypes = {
+  group: PropTypes.object.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  hasCheckbox: PropTypes.bool.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onGroup: PropTypes.func.isRequired,
+  children: PropTypes.element.isRequired,
+  renderGroupItem: PropTypes.func,
+  onClickName: PropTypes.func,
+  disabled: PropTypes.bool,
+  _level: PropTypes.number
+}
+
+GroupItem.defaultProps = {
+  renderGroupItem: item => item.name
+}
+
+export { LeafItem, GroupItem }

package/src/component/tree/list.js

@@ -1,151 +1,151 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import { getLeaf } from './util'
-import { GroupItem, LeafItem } from './item'
-
-class List extends React.Component {
-  handleChange = (leaf, checked) => {
-    const { onSelectValues, selectedValues, onClickCheckbox } = this.props
-    onSelectValues(_.xor([leaf.value], selectedValues))
-
-    if (onClickCheckbox) {
-      onClickCheckbox(leaf, checked)
-    }
-  }
-
-  handleSelectGroup = (group, isSelectGroup) => {
-    const { onClickCheckbox, selectedValues, onSelectValues } = this.props
-
-    const leafValues = _.map(getLeaf(group.children), item => item.value)
-    onSelectValues(
-      isSelectGroup
-        ? _.union(selectedValues, leafValues)
-        : _.difference(selectedValues, leafValues)
-    )
-
-    if (onClickCheckbox) {
-      onClickCheckbox(group, isSelectGroup)
-    }
-  }
-
-  handleGroup = group => {
-    const { groupSelected, onGroupSelect, onClickExpand } = this.props
-
-    onGroupSelect(_.xor(groupSelected, [group.value]))
-
-    if (onClickExpand) {
-      onClickExpand(group, !groupSelected.includes(group.value))
-    }
-  }
-
-  render() {
-    const {
-      disabled,
-      groupSelected,
-      list,
-      selectedValues,
-      showGroupCheckbox,
-      onClickLeafName,
-      onClickGroupName,
-      renderLeafItem,
-      renderGroupItem,
-
-      _level
-    } = this.props
-
-    if (list.length === 0) {
-      return null
-    }
-
-    const isGroupData = !!list[0].children
-
-    if (isGroupData) {
-      return (
-        <div className='gm-tree-group'>
-          {_.map(list, group => {
-            const isOpen = _.includes(groupSelected, group.value)
-
-            const leafValues = _.map(
-              getLeaf(group.children),
-              item => item.value
-            )
-            let isSelectGroup = false
-            if (leafValues.length > 0) {
-              isSelectGroup =
-                _.filter(leafValues, value => _.includes(selectedValues, value))
-                  .length === leafValues.length
-            }
-
-            return (
-              <GroupItem
-                key={group.value}
-                group={group}
-                isOpen={isOpen}
-                hasCheckbox={showGroupCheckbox(group)}
-                checked={isSelectGroup}
-                onChange={this.handleSelectGroup}
-                onGroup={this.handleGroup}
-                onClickName={onClickGroupName}
-                renderGroupItem={renderGroupItem}
-                disabled={disabled}
-                _level={_level}
-              >
-                <List
-                  {...this.props}
-                  list={group.children}
-                  _level={_level + 1}
-                />
-              </GroupItem>
-            )
-          })}
-        </div>
-      )
-    }
-
-    return (
-      <>
-        {_.map(list, v => (
-          <LeafItem
-            key={v.value}
-            leaf={v}
-            checked={_.includes(selectedValues, v.value)}
-            onChange={this.handleChange}
-            onClickName={onClickLeafName}
-            renderLeafItem={renderLeafItem}
-            disabled={disabled}
-            _level={_level}
-          />
-        ))}
-      </>
-    )
-  }
-}
-
-List.propTypes = {
-  disabled: PropTypes.bool,
-  groupSelected: PropTypes.array.isRequired,
-  onGroupSelect: PropTypes.func.isRequired,
-
-  list: PropTypes.array.isRequired,
-  selectedValues: PropTypes.array.isRequired,
-  onSelectValues: PropTypes.func.isRequired,
-  showGroupCheckbox: PropTypes.func.isRequired,
-
-  onClickLeafName: PropTypes.func,
-  onClickGroupName: PropTypes.func,
-  onClickCheckbox: PropTypes.func,
-  onClickExpand: PropTypes.func,
-
-  // 自定义 leaf 渲染格式
-  renderLeafItem: PropTypes.func,
-  renderGroupItem: PropTypes.func,
-
-  _level: PropTypes.number
-}
-
-List.defaultProps = {
-  _level: 0
-}
-
-export default List
+import React from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import { getLeaf } from './util'
+import { GroupItem, LeafItem } from './item'
+
+class List extends React.Component {
+  handleChange = (leaf, checked) => {
+    const { onSelectValues, selectedValues, onClickCheckbox } = this.props
+    onSelectValues(_.xor([leaf.value], selectedValues))
+
+    if (onClickCheckbox) {
+      onClickCheckbox(leaf, checked)
+    }
+  }
+
+  handleSelectGroup = (group, isSelectGroup) => {
+    const { onClickCheckbox, selectedValues, onSelectValues } = this.props
+
+    const leafValues = _.map(getLeaf(group.children), item => item.value)
+    onSelectValues(
+      isSelectGroup
+        ? _.union(selectedValues, leafValues)
+        : _.difference(selectedValues, leafValues)
+    )
+
+    if (onClickCheckbox) {
+      onClickCheckbox(group, isSelectGroup)
+    }
+  }
+
+  handleGroup = group => {
+    const { groupSelected, onGroupSelect, onClickExpand } = this.props
+
+    onGroupSelect(_.xor(groupSelected, [group.value]))
+
+    if (onClickExpand) {
+      onClickExpand(group, !groupSelected.includes(group.value))
+    }
+  }
+
+  render() {
+    const {
+      disabled,
+      groupSelected,
+      list,
+      selectedValues,
+      showGroupCheckbox,
+      onClickLeafName,
+      onClickGroupName,
+      renderLeafItem,
+      renderGroupItem,
+
+      _level
+    } = this.props
+
+    if (list.length === 0) {
+      return null
+    }
+
+    const isGroupData = !!list[0].children
+
+    if (isGroupData) {
+      return (
+        <div className='gm-tree-group'>
+          {_.map(list, group => {
+            const isOpen = _.includes(groupSelected, group.value)
+
+            const leafValues = _.map(
+              getLeaf(group.children),
+              item => item.value
+            )
+            let isSelectGroup = false
+            if (leafValues.length > 0) {
+              isSelectGroup =
+                _.filter(leafValues, value => _.includes(selectedValues, value))
+                  .length === leafValues.length
+            }
+
+            return (
+              <GroupItem
+                key={group.value}
+                group={group}
+                isOpen={isOpen}
+                hasCheckbox={showGroupCheckbox(group)}
+                checked={isSelectGroup}
+                onChange={this.handleSelectGroup}
+                onGroup={this.handleGroup}
+                onClickName={onClickGroupName}
+                renderGroupItem={renderGroupItem}
+                disabled={disabled}
+                _level={_level}
+              >
+                <List
+                  {...this.props}
+                  list={group.children}
+                  _level={_level + 1}
+                />
+              </GroupItem>
+            )
+          })}
+        </div>
+      )
+    }
+
+    return (
+      <>
+        {_.map(list, v => (
+          <LeafItem
+            key={v.value}
+            leaf={v}
+            checked={_.includes(selectedValues, v.value)}
+            onChange={this.handleChange}
+            onClickName={onClickLeafName}
+            renderLeafItem={renderLeafItem}
+            disabled={disabled}
+            _level={_level}
+          />
+        ))}
+      </>
+    )
+  }
+}
+
+List.propTypes = {
+  disabled: PropTypes.bool,
+  groupSelected: PropTypes.array.isRequired,
+  onGroupSelect: PropTypes.func.isRequired,
+
+  list: PropTypes.array.isRequired,
+  selectedValues: PropTypes.array.isRequired,
+  onSelectValues: PropTypes.func.isRequired,
+  showGroupCheckbox: PropTypes.func.isRequired,
+
+  onClickLeafName: PropTypes.func,
+  onClickGroupName: PropTypes.func,
+  onClickCheckbox: PropTypes.func,
+  onClickExpand: PropTypes.func,
+
+  // 自定义 leaf 渲染格式
+  renderLeafItem: PropTypes.func,
+  renderGroupItem: PropTypes.func,
+
+  _level: PropTypes.number
+}
+
+List.defaultProps = {
+  _level: 0
+}
+
+export default List