feat: update tree

Author: tangjinzhou

components/index.js

@@ -125,101 +125,60 @@ import { default as Drawer } from './drawer'
 const components = [
   Affix,
   Anchor,
-  Anchor.Link,
   AutoComplete,
-  AutoComplete.Option,
-  AutoComplete.OptGroup,
   Alert,
   Avatar,
   BackTop,
   Badge,
   Breadcrumb,
-  Breadcrumb.Item,
   Button,
-  Button.Group,
   Calendar,
   Card,
-  Card.Meta,
-  Card.Grid,
   Collapse,
-  Collapse.Panel,
   Carousel,
   Cascader,
   Checkbox,
-  Checkbox.Group,
   Col,
   DatePicker,
-  DatePicker.MonthPicker,
-  DatePicker.RangePicker,
-  DatePicker.WeekPicker,
   Divider,
   Dropdown,
-  Dropdown.Button,
   Form,
-  Form.Item,
   Icon,
   Input,
-  Input.Group,
-  Input.Search,
-  Input.TextArea,
   InputNumber,
   Layout,
-  Layout.Header,
-  Layout.Footer,
-  Layout.Sider,
-  Layout.Content,
   List,
-  List.Item,
-  List.Item.Meta,
   LocaleProvider,
   Menu,
-  Menu.Item,
-  Menu.SubMenu,
-  Menu.Divider,
-  Menu.ItemGroup,
   Modal,
   Pagination,
   Popconfirm,
   Popover,
   Progress,
   Radio,
-  Radio.Group,
-  Radio.Button,
   Rate,
   Row,
   Select,
-  Select.Option,
-  Select.OptGroup,
   Slider,
   Spin,
   Steps,
-  Steps.Step,
   Switch,
   Table,
-  Table.Column,
-  Table.ColumnGroup,
   Transfer,
   Tree,
-  Tree.TreeNode,
   TreeSelect,
-  TreeSelect.TreeNode,
   Tabs,
-  Tabs.TabPane,
-  Tabs.TabContent,
   Tag,
-  Tag.CheckableTag,
   TimePicker,
   Timeline,
-  Timeline.Item,
   Tooltip,
   Upload,
-  Upload.Dragger,
   Drawer,
 ]
 
 const install = function (Vue) {
   components.map(component => {
-    Vue.component(component.name, component)
+    Vue.use(component)
   })
 
   Vue.prototype.$message = message

components/tree/DirectoryTree.jsx

@@ -5,6 +5,7 @@ import { conductExpandParent, convertTreeToEntities } from '../vc-tree/src/util'
 import Tree, { TreeProps } from './Tree'
 import { calcRangeKeys, getFullKeyList } from './util'
 import Icon from '../icon'
+import BaseMixin from '../_util/BaseMixin'
 import { initDefaultProps, getOptionProps } from '../_util/props-util'
 
 // export type ExpandAction = false | 'click' | 'doubleClick';
@@ -27,12 +28,13 @@ function getIcon (h, props) {
 }
 
 export default {
+  mixins: [BaseMixin],
   name: 'ADirectoryTree',
   model: {
     prop: 'checkedKeys',
     event: 'check',
   },
-  props: initDefaultProps({ ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleClick']) }, {
+  props: initDefaultProps({ ...TreeProps(), expandAction: PropTypes.oneOf([false, 'click', 'doubleclick']) }, {
     prefixCls: 'ant-tree',
     showIcon: true,
     expandAction: 'click',
@@ -55,7 +57,7 @@ export default {
 
     // Expanded keys
     if (defaultExpandAll) {
-      state._expandedKeys = getFullKeyList(props.children)
+      state._expandedKeys = getFullKeyList(this.$slots.default)
     } else if (defaultExpandParent) {
       state._expandedKeys = conductExpandParent(expandedKeys || defaultExpandedKeys, keyEntities)
     } else {
@@ -102,7 +104,7 @@ export default {
       const { expandAction } = this.$props
 
       // Expand the tree
-      if (expandAction === 'doubleClick') {
+      if (expandAction === 'doubleclick') {
         this.onDebounceExpand(event, node)
       }
 
@@ -117,7 +119,6 @@ export default {
       const { eventKey = '' } = node
 
       const newState = {}
-
       // Windows / Mac single pick
       const ctrlPick = nativeEvent.ctrlKey || nativeEvent.metaKey
       const shiftPick = nativeEvent.shiftKey
@@ -171,7 +172,7 @@ export default {
       this.$emit('expand', newExpandedKeys, {
         expanded: !expanded,
         node,
-        nativeEvent: event.nativeEvent,
+        nativeEvent: event,
       })
     },
 
@@ -195,10 +196,13 @@ export default {
         selectedKeys,
       },
       class: `${prefixCls}-directory`,
-      select: this.onSelect,
-      click: this.onClick,
-      doubleclick: this.onDoubleClick,
-      expand: this.onExpand,
+      on: {
+        ...this.$listeners,
+        select: this.onSelect,
+        click: this.onClick,
+        doubleclick: this.onDoubleClick,
+        expand: this.onExpand,
+      },
     }
     return (
       <Tree {...treeProps}>{this.$slots.default}</Tree>

components/tree/Tree.jsx

@@ -113,12 +113,8 @@ export default {
         const { children, on = {}, slots = {}, scopedSlots = {}, key, class: cls, style, ...restProps } = item
         const treeNodeProps = {
           ...restProps,
-          icon: restProps.icon ||
-              $slots[slots.icon] ||
-              ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]),
-          title: restProps.title ||
-             $slots[slots.title] ||
-             ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title])(item),
+          icon: $slots[slots.icon] || ($scopedSlots[scopedSlots.icon] && $scopedSlots[scopedSlots.icon]) || restProps.icon,
+          title: $slots[slots.title] || ($scopedSlots[scopedSlots.title] && $scopedSlots[scopedSlots.title](item)) || restProps.title,
           dataRef: item,
           on,
           key,