Tree.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.TreeProps = undefined;
  6. var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
  7. var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
  8. var _extends2 = require('babel-runtime/helpers/extends');
  9. var _extends3 = _interopRequireDefault(_extends2);
  10. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  11. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  12. var _warning = require('warning');
  13. var _warning2 = _interopRequireDefault(_warning);
  14. var _vcTree = require('../vc-tree');
  15. var _openAnimation = require('../_util/openAnimation');
  16. var _openAnimation2 = _interopRequireDefault(_openAnimation);
  17. var _vueTypes = require('../_util/vue-types');
  18. var _vueTypes2 = _interopRequireDefault(_vueTypes);
  19. var _propsUtil = require('../_util/props-util');
  20. var _vnode = require('../_util/vnode');
  21. var _configConsumerProps = require('../config-provider/configConsumerProps');
  22. var _icon = require('../icon');
  23. var _icon2 = _interopRequireDefault(_icon);
  24. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  25. function TreeProps() {
  26. return {
  27. showLine: _vueTypes2['default'].bool,
  28. /** 是否支持多选 */
  29. multiple: _vueTypes2['default'].bool,
  30. /** 是否自动展开父节点 */
  31. autoExpandParent: _vueTypes2['default'].bool,
  32. /** checkable状态下节点选择完全受控(父子节点选中状态不再关联)*/
  33. checkStrictly: _vueTypes2['default'].bool,
  34. /** 是否支持选中 */
  35. checkable: _vueTypes2['default'].bool,
  36. /** 是否禁用树 */
  37. disabled: _vueTypes2['default'].bool,
  38. /** 默认展开所有树节点 */
  39. defaultExpandAll: _vueTypes2['default'].bool,
  40. /** 默认展开对应树节点 */
  41. defaultExpandParent: _vueTypes2['default'].bool,
  42. /** 默认展开指定的树节点 */
  43. defaultExpandedKeys: _vueTypes2['default'].array,
  44. /** (受控)展开指定的树节点 */
  45. expandedKeys: _vueTypes2['default'].array,
  46. /** (受控)选中复选框的树节点 */
  47. checkedKeys: _vueTypes2['default'].oneOfType([_vueTypes2['default'].array, _vueTypes2['default'].shape({
  48. checked: _vueTypes2['default'].array,
  49. halfChecked: _vueTypes2['default'].array
  50. }).loose]),
  51. /** 默认选中复选框的树节点 */
  52. defaultCheckedKeys: _vueTypes2['default'].array,
  53. /** (受控)设置选中的树节点 */
  54. selectedKeys: _vueTypes2['default'].array,
  55. /** 默认选中的树节点 */
  56. defaultSelectedKeys: _vueTypes2['default'].array,
  57. selectable: _vueTypes2['default'].bool,
  58. /** 展开/收起节点时触发 */
  59. // onExpand: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>,
  60. /** 点击复选框触发 */
  61. // onCheck: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void,
  62. /** 点击树节点触发 */
  63. // onSelect: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void,
  64. /** 单击树节点触发 */
  65. // onClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
  66. /** 双击树节点触发 */
  67. // onDoubleClick: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void,
  68. /** filter some AntTreeNodes as you need. it should return true */
  69. filterAntTreeNode: _vueTypes2['default'].func,
  70. /** 异步加载数据 */
  71. loadData: _vueTypes2['default'].func,
  72. loadedKeys: _vueTypes2['default'].array,
  73. // onLoaded: (loadedKeys: string[], info: { event: 'load', node: AntTreeNode; }) => void,
  74. /** 响应右键点击 */
  75. // onRightClick: (options: AntTreeNodeMouseEvent) => void,
  76. /** 设置节点可拖拽(IE>8)*/
  77. draggable: _vueTypes2['default'].bool,
  78. // /** 开始拖拽时调用 */
  79. // onDragStart: (options: AntTreeNodeMouseEvent) => void,
  80. // /** dragenter 触发时调用 */
  81. // onDragEnter: (options: AntTreeNodeMouseEvent) => void,
  82. // /** dragover 触发时调用 */
  83. // onDragOver: (options: AntTreeNodeMouseEvent) => void,
  84. // /** dragleave 触发时调用 */
  85. // onDragLeave: (options: AntTreeNodeMouseEvent) => void,
  86. // /** drop 触发时调用 */
  87. // onDrop: (options: AntTreeNodeMouseEvent) => void,
  88. showIcon: _vueTypes2['default'].bool,
  89. icon: _vueTypes2['default'].func,
  90. switcherIcon: _vueTypes2['default'].any,
  91. prefixCls: _vueTypes2['default'].string,
  92. filterTreeNode: _vueTypes2['default'].func,
  93. openAnimation: _vueTypes2['default'].any,
  94. treeNodes: _vueTypes2['default'].array,
  95. treeData: _vueTypes2['default'].array,
  96. /**
  97. * @default{title,key,children}
  98. * 替换treeNode中 title,key,children字段为treeData中对应的字段
  99. */
  100. replaceFields: _vueTypes2['default'].object,
  101. blockNode: _vueTypes2['default'].bool
  102. };
  103. }
  104. exports.TreeProps = TreeProps;
  105. exports['default'] = {
  106. name: 'ATree',
  107. model: {
  108. prop: 'checkedKeys',
  109. event: 'check'
  110. },
  111. props: (0, _propsUtil.initDefaultProps)(TreeProps(), {
  112. checkable: false,
  113. showIcon: false,
  114. openAnimation: {
  115. on: _openAnimation2['default'],
  116. props: { appear: null }
  117. },
  118. blockNode: false
  119. }),
  120. inject: {
  121. configProvider: { 'default': function _default() {
  122. return _configConsumerProps.ConfigConsumerProps;
  123. } }
  124. },
  125. created: function created() {
  126. (0, _warning2['default'])(!('treeNodes' in (0, _propsUtil.getOptionProps)(this)), '`treeNodes` is deprecated. please use treeData instead.');
  127. },
  128. TreeNode: _vcTree.TreeNode,
  129. methods: {
  130. renderSwitcherIcon: function renderSwitcherIcon(prefixCls, switcherIcon, _ref) {
  131. var isLeaf = _ref.isLeaf,
  132. expanded = _ref.expanded,
  133. loading = _ref.loading;
  134. var h = this.$createElement;
  135. var showLine = this.$props.showLine;
  136. if (loading) {
  137. return h(_icon2['default'], {
  138. attrs: { type: 'loading' },
  139. 'class': prefixCls + '-switcher-loading-icon' });
  140. }
  141. if (isLeaf) {
  142. return showLine ? h(_icon2['default'], {
  143. attrs: { type: 'file' },
  144. 'class': prefixCls + '-switcher-line-icon' }) : null;
  145. }
  146. var switcherCls = prefixCls + '-switcher-icon';
  147. if (switcherIcon) {
  148. return (0, _vnode.cloneElement)(switcherIcon, {
  149. 'class': (0, _defineProperty3['default'])({}, switcherCls, true)
  150. });
  151. }
  152. return showLine ? h(_icon2['default'], {
  153. attrs: {
  154. type: expanded ? 'minus-square' : 'plus-square',
  155. theme: 'outlined'
  156. },
  157. 'class': prefixCls + '-switcher-line-icon' }) : h(_icon2['default'], {
  158. attrs: { type: 'caret-down', theme: 'filled' },
  159. 'class': switcherCls });
  160. },
  161. updateTreeData: function updateTreeData(treeData) {
  162. var _this = this;
  163. var $slots = this.$slots,
  164. $scopedSlots = this.$scopedSlots;
  165. var defaultFields = { children: 'children', title: 'title', key: 'key' };
  166. var replaceFields = (0, _extends3['default'])({}, defaultFields, this.$props.replaceFields);
  167. return treeData.map(function (item) {
  168. var key = item[replaceFields.key];
  169. var children = item[replaceFields.children];
  170. var _item$on = item.on,
  171. on = _item$on === undefined ? {} : _item$on,
  172. _item$slots = item.slots,
  173. slots = _item$slots === undefined ? {} : _item$slots,
  174. _item$scopedSlots = item.scopedSlots,
  175. scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots,
  176. cls = item['class'],
  177. style = item.style,
  178. restProps = (0, _objectWithoutProperties3['default'])(item, ['on', 'slots', 'scopedSlots', 'class', 'style']);
  179. var treeNodeProps = (0, _extends3['default'])({}, restProps, {
  180. icon: $scopedSlots[scopedSlots.icon] || $slots[slots.icon] || restProps.icon,
  181. switcherIcon: $scopedSlots[scopedSlots.switcherIcon] || $slots[slots.switcherIcon] || restProps.switcherIcon,
  182. title: $scopedSlots[scopedSlots.title] || $slots[slots.title] || $scopedSlots.title || restProps[replaceFields.title],
  183. dataRef: item,
  184. on: on,
  185. key: key,
  186. 'class': cls,
  187. style: style
  188. });
  189. if (children) {
  190. return (0, _extends3['default'])({}, treeNodeProps, { children: _this.updateTreeData(children) });
  191. }
  192. return treeNodeProps;
  193. });
  194. }
  195. },
  196. render: function render() {
  197. var _this2 = this,
  198. _class2;
  199. var h = arguments[0];
  200. var props = (0, _propsUtil.getOptionProps)(this);
  201. var $slots = this.$slots,
  202. $scopedSlots = this.$scopedSlots;
  203. var customizePrefixCls = props.prefixCls,
  204. showIcon = props.showIcon,
  205. treeNodes = props.treeNodes,
  206. blockNode = props.blockNode;
  207. var getPrefixCls = this.configProvider.getPrefixCls;
  208. var prefixCls = getPrefixCls('tree', customizePrefixCls);
  209. var _switcherIcon = (0, _propsUtil.getComponentFromProp)(this, 'switcherIcon');
  210. var checkable = props.checkable;
  211. var treeData = props.treeData || treeNodes;
  212. if (treeData) {
  213. treeData = this.updateTreeData(treeData);
  214. }
  215. var vcTreeProps = {
  216. props: (0, _extends3['default'])({}, props, {
  217. prefixCls: prefixCls,
  218. checkable: checkable ? h('span', { 'class': prefixCls + '-checkbox-inner' }) : checkable,
  219. children: (0, _propsUtil.filterEmpty)($scopedSlots['default'] ? $scopedSlots['default']() : $slots['default']),
  220. __propsSymbol__: Symbol(),
  221. switcherIcon: function switcherIcon(nodeProps) {
  222. return _this2.renderSwitcherIcon(prefixCls, _switcherIcon, nodeProps);
  223. }
  224. }),
  225. on: (0, _propsUtil.getListeners)(this),
  226. ref: 'tree',
  227. 'class': (_class2 = {}, (0, _defineProperty3['default'])(_class2, prefixCls + '-icon-hide', !showIcon), (0, _defineProperty3['default'])(_class2, prefixCls + '-block-node', blockNode), _class2)
  228. };
  229. if (treeData) {
  230. vcTreeProps.props.treeData = treeData;
  231. }
  232. return h(_vcTree.Tree, vcTreeProps);
  233. }
  234. };