@king-design/intact 3.3.1 → 3.3.3

package/es/site/data/components/tree/demos/custom/index.js

@@ -0,0 +1,86 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import { bind } from 'kpc';
+var uniqueId = 0;
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      data: [{
+        label: 'First floor-1',
+        children: [{
+          label: 'Second floor-1.1',
+          children: [{
+            label: 'Third floor-1.1.1'
+          }]
+        }]
+      }, {
+        label: 'First floor-2',
+        children: [{
+          label: 'Second floor-2.1',
+          children: [{
+            label: 'Third floor-2.1.1',
+            key: 'floor-2.1.1'
+          }, {
+            label: 'Third floor-2.1.2'
+          }]
+        }, {
+          label: 'Second floor-2.2',
+          disabled: true,
+          children: [{
+            label: 'Third floor-2.2.1'
+          }]
+        }]
+      }]
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.append = function append(data, node, index, e) {
+    var _context;
+    e.stopPropagation();
+    var children = data.children || (data.children = []);
+    children.push({
+      label: 'Appended node',
+      key: uniqueId++
+    });
+    this.set({
+      data: _concatInstanceProperty(_context = []).call(_context, this.get('data'))
+    });
+    // expand the node
+    this.refs.tree.expand(node.key);
+  };
+  _proto.remove = function remove(data, node, index, e) {
+    var _context2;
+    e.stopPropagation();
+    var children = node.parent ? node.parent.data.children : this.get('data');
+    _spliceInstanceProperty(children).call(children, index, 1);
+    this.set({
+      data: _concatInstanceProperty(_context2 = []).call(_context2, this.get('data'))
+    });
+  };
+  _proto.appendToRoot = function appendToRoot() {
+    var _context3;
+    var data = this.get('data');
+    this.set({
+      data: _concatInstanceProperty(_context3 = []).call(_context3, data, [{
+        label: 'Appended root node',
+        key: uniqueId++
+      }])
+    });
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "append", null);
+__decorate([bind], default_1.prototype, "remove", null);
+__decorate([bind], default_1.prototype, "appendToRoot", null);

package/es/site/data/components/tree/demos/custom/react.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import './index.styl';
+import { TreeDataItem, TreeNode } from '@king-design/react';
+interface Props {
+    data: TreeDataItem<string | number>[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: {
+        data: {
+            label: string;
+            children: ({
+                label: string;
+                children: ({
+                    label: string;
+                    key: string;
+                } | {
+                    label: string;
+                    key?: undefined;
+                })[];
+                disabled?: undefined;
+            } | {
+                label: string;
+                disabled: boolean;
+                children: {
+                    label: string;
+                }[];
+            })[];
+        }[];
+    };
+    private tree;
+    append(data: TreeDataItem<string | number>, node: TreeNode<string>, index: number, e: Event): void;
+    remove(data: TreeDataItem<string>, node: TreeNode<string>, index: number, e: Event): void;
+    appendToRoot(): void;
+    render(): React.JSX.Element;
+}
+export {};

package/es/site/data/components/tree/demos/custom/react.js

@@ -0,0 +1,125 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { __decorate } from "tslib";
+import React from 'react';
+import { Tree, Button, ButtonGroup } from '@king-design/react';
+import './index.styl';
+import { bind } from '@king-design/react';
+var uniqueId = 0;
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      data: [{
+        label: 'First floor-1',
+        children: [{
+          label: 'Second floor-1.1',
+          children: [{
+            label: 'Third floor-1.1.1'
+          }]
+        }]
+      }, {
+        label: 'First floor-2',
+        children: [{
+          label: 'Second floor-2.1',
+          children: [{
+            label: 'Third floor-2.1.1',
+            key: 'floor-2.1.1'
+          }, {
+            label: 'Third floor-2.1.2'
+          }]
+        }, {
+          label: 'Second floor-2.2',
+          disabled: true,
+          children: [{
+            label: 'Third floor-2.2.1'
+          }]
+        }]
+      }]
+    };
+    _this.tree = void 0;
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.append = function append(data, node, index, e) {
+    var _context2;
+    e.stopPropagation();
+    var children = data.children || (data.children = []);
+    children.push({
+      label: 'Appended node',
+      key: uniqueId++
+    });
+    this.setState({
+      data: _concatInstanceProperty(_context2 = []).call(_context2, this.state.data)
+    });
+    // expand the node
+    this.tree.expand(node.key);
+  };
+  _proto.remove = function remove(data, node, index, e) {
+    var _context3;
+    e.stopPropagation();
+    var children = node.parent ? node.parent.data.children : this.state.data;
+    _spliceInstanceProperty(children).call(children, index, 1);
+    this.setState({
+      data: _concatInstanceProperty(_context3 = []).call(_context3, this.state.data)
+    });
+  };
+  _proto.appendToRoot = function appendToRoot() {
+    var _context4;
+    var data = this.state.data;
+    this.setState({
+      data: _concatInstanceProperty(_context4 = []).call(_context4, data, [{
+        label: 'Appended root node',
+        key: uniqueId++
+      }])
+    });
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var data = this.state.data;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wrapper"
+    }, /*#__PURE__*/React.createElement(ButtonGroup, {
+      className: "root-btns"
+    }, /*#__PURE__*/React.createElement(Button, {
+      icon: true,
+      size: "small",
+      onClick: this.appendToRoot
+    }, "+")), /*#__PURE__*/React.createElement(Tree, {
+      data: data,
+      ref: function ref(i) {
+        return _this2.tree = i;
+      },
+      checkbox: true,
+      selectable: false,
+      slotLabel: function slotLabel(_ref) {
+        var data = _ref[0],
+          node = _ref[1],
+          index = _ref[2];
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: "text"
+        }, data.label), !data.disabled ? /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+          icon: true,
+          size: "small",
+          onClick: _this2.append.bind(_this2, data, node, index)
+        }, "+"), /*#__PURE__*/React.createElement(Button, {
+          icon: true,
+          size: "small",
+          onClick: _this2.remove.bind(_this2, data, node, index)
+        }, "-")) : undefined);
+      }
+    }));
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };
+__decorate([bind], Demo.prototype, "append", null);
+__decorate([bind], Demo.prototype, "remove", null);
+__decorate([bind], Demo.prototype, "appendToRoot", null);

package/es/site/data/components/tree/demos/draggable/index.d.ts

@@ -0,0 +1,42 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import './index.styl';
+import { TreeDataItem, TreeNode, TreeDragEndData, TreeMode } from 'kpc';
+interface Props {
+    data?: TreeDataItem<string>[];
+    expandedKeys?: string[];
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        data: ({
+            label: string;
+            key: string;
+            type: string;
+            children?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            key: string;
+            type: string;
+            children: {
+                label: string;
+                key: string;
+                type: string;
+            }[];
+            disabled?: undefined;
+        } | {
+            label: string;
+            key: string;
+            type: string;
+            disabled: boolean;
+            children?: undefined;
+        })[];
+        expandedKeys: never[];
+    };
+    onDragEnd(data: TreeDragEndData<string>): void;
+    allowDrag(node: TreeNode<string>): boolean;
+    allowDrop(node: TreeNode<string>, srcNode: TreeNode<string>, mode: TreeMode): boolean;
+    onDenyDrag(node: TreeNode<string>): void;
+    onDenyDrop(node: TreeNode<string>): void;
+}

package/es/site/data/components/tree/demos/draggable/index.js

@@ -0,0 +1,81 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import { Message, TreeMode } from 'kpc';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      data: [{
+        label: '总览',
+        key: 'summarization',
+        type: 'file'
+      }, {
+        label: '产品简介',
+        key: 'introduction',
+        type: 'file'
+      }, {
+        label: '技术实现',
+        key: 'implemention',
+        type: 'file'
+      }, {
+        label: '操作指南',
+        key: 'guide',
+        type: 'dir',
+        children: [{
+          label: '产品安装',
+          key: 'installation',
+          type: 'file'
+        }]
+      }, {
+        label: '接入说明',
+        key: 'interaction',
+        type: 'dir',
+        children: [{
+          label: '使用',
+          key: 'usage',
+          type: 'file'
+        }]
+      }, {
+        label: '禁用文件',
+        key: 'disabled',
+        type: 'file',
+        disabled: true
+      }],
+      expandedKeys: []
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.onDragEnd = function onDragEnd(data) {
+    console.log(data);
+  };
+  _proto.allowDrag = function allowDrag(node) {
+    return node.key !== 'summarization';
+  };
+  _proto.allowDrop = function allowDrop(node, srcNode, mode) {
+    // 能够将文件拖入文件夹，但是不能讲文件夹拖入文件夹
+    if (mode === TreeMode.Inner) {
+      // 文件拖入文件夹
+      return srcNode.data.type === 'file' && node.data.type === 'dir';
+    } else if (srcNode.data.type === 'dir' && node.parent) {
+      // 此时插入模式是，前面或者后面插入
+      // 如果拖动的是文件夹，但是目标节点存在父元素，代表目标节点也是文件夹，不能插入
+      return false;
+    }
+    return true;
+  };
+  _proto.onDenyDrag = function onDenyDrag(node) {
+    Message.error("Cannot drag node: " + node.data.label + ".");
+  };
+  _proto.onDenyDrop = function onDenyDrop(node) {
+    Message.error("Cannot drop to node: " + node.data.label + ".");
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/tree/demos/draggable/react.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import './index.styl';
+import { TreeDataItem, TreeNode, TreeDragEndData, TreeMode } from '@king-design/react';
+interface Props {
+    data?: TreeDataItem<string>[];
+    expandedKeys?: string[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: {
+        data: ({
+            label: string;
+            key: string;
+            type: string;
+            children?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            key: string;
+            type: string;
+            children: {
+                label: string;
+                key: string;
+                type: string;
+            }[];
+            disabled?: undefined;
+        } | {
+            label: string;
+            key: string;
+            type: string;
+            disabled: boolean;
+            children?: undefined;
+        })[];
+        expandedKeys: never[];
+    };
+    onDragEnd(data: TreeDragEndData<string>): void;
+    allowDrag(node: TreeNode<string>): boolean;
+    allowDrop(node: TreeNode<string>, srcNode: TreeNode<string>, mode: TreeMode): boolean;
+    onDenyDrag(node: TreeNode<string>): void;
+    onDenyDrop(node: TreeNode<string>): void;
+    render(): React.JSX.Element;
+}
+export {};

package/es/site/data/components/tree/demos/draggable/react.js

@@ -0,0 +1,116 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import React from 'react';
+import { Tree, Icon } from '@king-design/react';
+import './index.styl';
+import { Message, TreeMode } from '@king-design/react';
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+  function Demo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      data: [{
+        label: '总览',
+        key: 'summarization',
+        type: 'file'
+      }, {
+        label: '产品简介',
+        key: 'introduction',
+        type: 'file'
+      }, {
+        label: '技术实现',
+        key: 'implemention',
+        type: 'file'
+      }, {
+        label: '操作指南',
+        key: 'guide',
+        type: 'dir',
+        children: [{
+          label: '产品安装',
+          key: 'installation',
+          type: 'file'
+        }]
+      }, {
+        label: '接入说明',
+        key: 'interaction',
+        type: 'dir',
+        children: [{
+          label: '使用',
+          key: 'usage',
+          type: 'file'
+        }]
+      }, {
+        label: '禁用文件',
+        key: 'disabled',
+        type: 'file',
+        disabled: true
+      }],
+      expandedKeys: []
+    };
+    return _this;
+  }
+  var _proto = Demo.prototype;
+  _proto.onDragEnd = function onDragEnd(data) {
+    console.log(data);
+  };
+  _proto.allowDrag = function allowDrag(node) {
+    return node.key !== 'summarization';
+  };
+  _proto.allowDrop = function allowDrop(node, srcNode, mode) {
+    // 能够将文件拖入文件夹，但是不能讲文件夹拖入文件夹
+    if (mode === TreeMode.Inner) {
+      // 文件拖入文件夹
+      return srcNode.data.type === 'file' && node.data.type === 'dir';
+    } else if (srcNode.data.type === 'dir' && node.parent) {
+      // 此时插入模式是，前面或者后面插入
+      // 如果拖动的是文件夹，但是目标节点存在父元素，代表目标节点也是文件夹，不能插入
+      return false;
+    }
+    return true;
+  };
+  _proto.onDenyDrag = function onDenyDrag(node) {
+    Message.error("Cannot drag node: " + node.data.label + ".");
+  };
+  _proto.onDenyDrop = function onDenyDrop(node) {
+    Message.error("Cannot drop to node: " + node.data.label + ".");
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement(Tree, {
+      slotLabel: function slotLabel(_ref) {
+        var data = _ref[0],
+          node = _ref[1];
+        return /*#__PURE__*/React.createElement(React.Fragment, null, data.type === 'file' ? /*#__PURE__*/React.createElement(Icon, {
+          className: "k-icon-paper"
+        }) : /*#__PURE__*/React.createElement(Icon, {
+          className: "k-icon-folder"
+        }), data.label);
+      },
+      draggable: true,
+      onDragend: this.onDragEnd,
+      allowDrag: this.allowDrag,
+      allowDrop: this.allowDrop,
+      onDenydrag: this.onDenyDrag,
+      onDenydrop: this.onDenyDrop,
+      data: this.state.data,
+      onChangeData: function onChangeData(data) {
+        return _this2.setState({
+          data: data
+        });
+      },
+      expandedKeys: this.state.expandedKeys,
+      onChangeExpandedKeys: function onChangeExpandedKeys(expandedKeys) {
+        return _this2.setState({
+          expandedKeys: expandedKeys
+        });
+      }
+    });
+  };
+  return Demo;
+}(React.Component);
+export { Demo as default };

package/es/site/data/components/tree/demos/expandAll/index.d.ts

@@ -0,0 +1,45 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import './index.styl';
+import { TreeDataItem } from 'kpc';
+interface Props {
+    data: TreeDataItem<string>[];
+    delayData?: TreeDataItem<string>[];
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        data: ({
+            label: string;
+            children: {
+                label: string;
+                children: {
+                    label: string;
+                }[];
+            }[];
+            key?: undefined;
+        } | {
+            label: string;
+            key: string;
+            children: ({
+                label: string;
+                children: ({
+                    label: string;
+                    key: string;
+                } | {
+                    label: string;
+                    key?: undefined;
+                })[];
+                disabled?: undefined;
+            } | {
+                label: string;
+                disabled: boolean;
+                children: {
+                    label: string;
+                }[];
+            })[];
+        })[];
+        delayData: undefined;
+    };
+    load(): void;
+}

package/es/site/data/components/tree/demos/expandAll/index.js

@@ -0,0 +1,53 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { __decorate } from "tslib";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+import './index.styl';
+import { bind } from 'kpc';
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+  default_1.defaults = function defaults() {
+    return {
+      data: [{
+        label: 'First floor-1',
+        children: [{
+          label: 'Second floor-1.1',
+          children: [{
+            label: 'Third floor-1.1.1'
+          }]
+        }]
+      }, {
+        label: 'First floor-2',
+        key: '2',
+        children: [{
+          label: 'Second floor-2.1',
+          children: [{
+            label: 'Third floor-2.1.1',
+            key: '2-1'
+          }, {
+            label: 'Third floor-2.1.2'
+          }]
+        }, {
+          label: 'Second floor-2.2',
+          disabled: true,
+          children: [{
+            label: 'Third floor-2.2.1'
+          }]
+        }]
+      }],
+      delayData: undefined
+    };
+  };
+  var _proto = default_1.prototype;
+  _proto.load = function load() {
+    this.set('delayData', this.get('data'));
+  };
+  return default_1;
+}(Component);
+default_1.template = template;
+export { default_1 as default };
+__decorate([bind], default_1.prototype, "load", null);

package/es/site/data/components/tree/demos/expandAll/react.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import './index.styl';
+import { TreeDataItem } from '@king-design/react';
+interface Props {
+    data: TreeDataItem<string>[];
+    delayData?: TreeDataItem<string>[];
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: {
+        data: ({
+            label: string;
+            children: {
+                label: string;
+                children: {
+                    label: string;
+                }[];
+            }[];
+            key?: undefined;
+        } | {
+            label: string;
+            key: string;
+            children: ({
+                label: string;
+                children: ({
+                    label: string;
+                    key: string;
+                } | {
+                    label: string;
+                    key?: undefined;
+                })[];
+                disabled?: undefined;
+            } | {
+                label: string;
+                disabled: boolean;
+                children: {
+                    label: string;
+                }[];
+            })[];
+        })[];
+        delayData: undefined;
+    };
+    load(): void;
+    render(): React.JSX.Element;
+}
+export {};