123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
- import _extends from 'babel-runtime/helpers/extends';
- import _defineProperty from 'babel-runtime/helpers/defineProperty';
- import warning from 'warning';
- import { Tree as VcTree, TreeNode } from '../vc-tree';
- import animation from '../_util/openAnimation';
- import PropTypes from '../_util/vue-types';
- import { initDefaultProps, getOptionProps, filterEmpty, getComponentFromProp, getListeners } from '../_util/props-util';
- import { cloneElement } from '../_util/vnode';
- import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
- import Icon from '../icon';
- function TreeProps() {
- return {
- showLine: PropTypes.bool,
- /** 是否支持多选 */
- multiple: PropTypes.bool,
- /** 是否自动展开父节点 */
- autoExpandParent: PropTypes.bool,
- /** checkable状态下节点选择完全受控(父子节点选中状态不再关联)*/
- checkStrictly: PropTypes.bool,
- /** 是否支持选中 */
- checkable: PropTypes.bool,
- /** 是否禁用树 */
- disabled: PropTypes.bool,
- /** 默认展开所有树节点 */
- defaultExpandAll: PropTypes.bool,
- /** 默认展开对应树节点 */
- defaultExpandParent: PropTypes.bool,
- /** 默认展开指定的树节点 */
- defaultExpandedKeys: PropTypes.array,
- /** (受控)展开指定的树节点 */
- expandedKeys: PropTypes.array,
- /** (受控)选中复选框的树节点 */
- checkedKeys: PropTypes.oneOfType([PropTypes.array, PropTypes.shape({
- checked: PropTypes.array,
- halfChecked: PropTypes.array
- }).loose]),
- /** 默认选中复选框的树节点 */
- defaultCheckedKeys: PropTypes.array,
- /** (受控)设置选中的树节点 */
- selectedKeys: PropTypes.array,
- /** 默认选中的树节点 */
- defaultSelectedKeys: PropTypes.array,
- selectable: PropTypes.bool,
- /** 展开/收起节点时触发 */
- // onExpand: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>,
- /** 点击复选框触发 */
- // onCheck: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void,
- /** 点击树节点触发 */
- // onSelect: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void,
- /** 单击树节点触发 */
- // onClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
- /** 双击树节点触发 */
- // onDoubleClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
- /** filter some AntTreeNodes as you need. it should return true */
- filterAntTreeNode: PropTypes.func,
- /** 异步加载数据 */
- loadData: PropTypes.func,
- loadedKeys: PropTypes.array,
- // onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
- /** 响应右键点击 */
- // onRightClick: (options: AntTreeNodeMouseEvent) => void,
- /** 设置节点可拖拽(IE>8)*/
- draggable: PropTypes.bool,
- // /** 开始拖拽时调用 */
- // onDragStart: (options: AntTreeNodeMouseEvent) => void,
- // /** dragenter 触发时调用 */
- // onDragEnter: (options: AntTreeNodeMouseEvent) => void,
- // /** dragover 触发时调用 */
- // onDragOver: (options: AntTreeNodeMouseEvent) => void,
- // /** dragleave 触发时调用 */
- // onDragLeave: (options: AntTreeNodeMouseEvent) => void,
- // /** drop 触发时调用 */
- // onDrop: (options: AntTreeNodeMouseEvent) => void,
- showIcon: PropTypes.bool,
- icon: PropTypes.func,
- switcherIcon: PropTypes.any,
- prefixCls: PropTypes.string,
- filterTreeNode: PropTypes.func,
- openAnimation: PropTypes.any,
- treeNodes: PropTypes.array,
- treeData: PropTypes.array,
- /**
- * @default{title,key,children}
- * 替换treeNode中 title,key,children字段为treeData中对应的字段
- */
- replaceFields: PropTypes.object,
- blockNode: PropTypes.bool
- };
- }
- export { TreeProps };
- export default {
- name: 'ATree',
- model: {
- prop: 'checkedKeys',
- event: 'check'
- },
- props: initDefaultProps(TreeProps(), {
- checkable: false,
- showIcon: false,
- openAnimation: {
- on: animation,
- props: { appear: null }
- },
- blockNode: false
- }),
- inject: {
- configProvider: { 'default': function _default() {
- return ConfigConsumerProps;
- } }
- },
- created: function created() {
- warning(!('treeNodes' in getOptionProps(this)), '`treeNodes` is deprecated. please use treeData instead.');
- },
- TreeNode: TreeNode,
- methods: {
- renderSwitcherIcon: function renderSwitcherIcon(prefixCls, switcherIcon, _ref) {
- var isLeaf = _ref.isLeaf,
- expanded = _ref.expanded,
- loading = _ref.loading;
- var h = this.$createElement;
- var showLine = this.$props.showLine;
- if (loading) {
- return h(Icon, {
- attrs: { type: 'loading' },
- 'class': prefixCls + '-switcher-loading-icon' });
- }
- if (isLeaf) {
- return showLine ? h(Icon, {
- attrs: { type: 'file' },
- 'class': prefixCls + '-switcher-line-icon' }) : null;
- }
- var switcherCls = prefixCls + '-switcher-icon';
- if (switcherIcon) {
- return cloneElement(switcherIcon, {
- 'class': _defineProperty({}, switcherCls, true)
- });
- }
- return showLine ? h(Icon, {
- attrs: {
- type: expanded ? 'minus-square' : 'plus-square',
- theme: 'outlined'
- },
- 'class': prefixCls + '-switcher-line-icon' }) : h(Icon, {
- attrs: { type: 'caret-down', theme: 'filled' },
- 'class': switcherCls });
- },
- updateTreeData: function updateTreeData(treeData) {
- var _this = this;
- var $slots = this.$slots,
- $scopedSlots = this.$scopedSlots;
- var defaultFields = { children: 'children', title: 'title', key: 'key' };
- var replaceFields = _extends({}, defaultFields, this.$props.replaceFields);
- return treeData.map(function (item) {
- var key = item[replaceFields.key];
- var children = item[replaceFields.children];
- var _item$on = item.on,
- on = _item$on === undefined ? {} : _item$on,
- _item$slots = item.slots,
- slots = _item$slots === undefined ? {} : _item$slots,
- _item$scopedSlots = item.scopedSlots,
- scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots,
- cls = item['class'],
- style = item.style,
- restProps = _objectWithoutProperties(item, ['on', 'slots', 'scopedSlots', 'class', 'style']);
- var treeNodeProps = _extends({}, restProps, {
- icon: $scopedSlots[scopedSlots.icon] || $slots[slots.icon] || restProps.icon,
- switcherIcon: $scopedSlots[scopedSlots.switcherIcon] || $slots[slots.switcherIcon] || restProps.switcherIcon,
- title: $scopedSlots[scopedSlots.title] || $slots[slots.title] || $scopedSlots.title || restProps[replaceFields.title],
- dataRef: item,
- on: on,
- key: key,
- 'class': cls,
- style: style
- });
- if (children) {
- return _extends({}, treeNodeProps, { children: _this.updateTreeData(children) });
- }
- return treeNodeProps;
- });
- }
- },
- render: function render() {
- var _this2 = this,
- _class2;
- var h = arguments[0];
- var props = getOptionProps(this);
- var $slots = this.$slots,
- $scopedSlots = this.$scopedSlots;
- var customizePrefixCls = props.prefixCls,
- showIcon = props.showIcon,
- treeNodes = props.treeNodes,
- blockNode = props.blockNode;
- var getPrefixCls = this.configProvider.getPrefixCls;
- var prefixCls = getPrefixCls('tree', customizePrefixCls);
- var _switcherIcon = getComponentFromProp(this, 'switcherIcon');
- var checkable = props.checkable;
- var treeData = props.treeData || treeNodes;
- if (treeData) {
- treeData = this.updateTreeData(treeData);
- }
- var vcTreeProps = {
- props: _extends({}, props, {
- prefixCls: prefixCls,
- checkable: checkable ? h('span', { 'class': prefixCls + '-checkbox-inner' }) : checkable,
- children: filterEmpty($scopedSlots['default'] ? $scopedSlots['default']() : $slots['default']),
- __propsSymbol__: Symbol(),
- switcherIcon: function switcherIcon(nodeProps) {
- return _this2.renderSwitcherIcon(prefixCls, _switcherIcon, nodeProps);
- }
- }),
- on: getListeners(this),
- ref: 'tree',
- 'class': (_class2 = {}, _defineProperty(_class2, prefixCls + '-icon-hide', !showIcon), _defineProperty(_class2, prefixCls + '-block-node', blockNode), _class2)
- };
- if (treeData) {
- vcTreeProps.props.treeData = treeData;
- }
- return h(VcTree, vcTreeProps);
- }
- };
|