@6thquake/react-material/Tree/index.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "default", {
  enumerable: true,
  get: function get() {
    return _Tree.default;
  }
});
Object.defineProperty(exports, "TreeNode", {
  enumerable: true,
  get: function get() {
    return _TreeNode.default;
  }
});

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var React = _interopRequireWildcard(require("react"));

var _rcTree = _interopRequireWildcard(require("rc-tree"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _styles = _interopRequireDefault(require("./styles"));

var _cssAnimation = _interopRequireDefault(require("css-animation"));

var _Tree = _interopRequireDefault(require("./Tree"));

var _TreeNode = _interopRequireDefault(require("./TreeNode"));

var STYLE = "\n.collapse {\n  overflow: hidden;\n  display: block;\n}\n\n.collapse-active {\n  transition: height 0.2s ease-out;\n}\n";

function animate(node, show, done) {
  var height = node.offsetHeight;
  return (0, _cssAnimation.default)(node, 'collapse', {
    start: function start() {
      if (!show) {
        node.style.height = "".concat(node.offsetHeight, "px");
      } else {
        height = node.offsetHeight;
        node.style.height = 0;
      }
    },
    active: function active() {
      node.style.height = "".concat(show ? height : 0, "px");
    },
    end: function end() {
      node.style.height = '';
      done();
    }
  });
}

var animation = {
  enter: function enter(node, done) {
    return animate(node, true, done);
  },
  leave: function leave(node, done) {
    return animate(node, false, done);
  },
  appear: function appear(node, done) {
    return animate(node, true, done);
  }
};

var Tree =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Tree, _React$Component);

  function Tree() {
    (0, _classCallCheck2.default)(this, Tree);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Tree).apply(this, arguments));
  }

  (0, _createClass2.default)(Tree, [{
    key: "render",
    value: function render() {
      var props = this.props;
      var prefixCls = props.prefixCls,
          className = props.className;
      var checkable = props.checkable;
      return React.createElement(_rcTree.default, (0, _extends2.default)({}, props, {
        className: className,
        checkable: checkable ? React.createElement("span", {
          className: "".concat(prefixCls, "-checkbox-inner")
        }) : checkable
      }), this.props.children);
    }
  }]);
  return Tree;
}(React.Component); // Tree.propTypes = {
//   showLine: PropTypes.boolean,
//   className: PropTypes.string,
//   /** 是否支持多选 */
//   multiple: PropTypes.boolean,
//   /** 是否自动展开父节点 */
//   autoExpandParent: PropTypes.boolean,
//   /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/
//   checkStrictly: PropTypes.boolean,
//   /** 是否支持选中 */
//   checkable: PropTypes.boolean,
//   /** 默认展开所有树节点 */
//   defaultExpandAll: PropTypes.boolean,
//   /** 默认展开指定的树节点 */
//   defaultExpandedKeys: PropTypes.arrayOf(PropTypes.string),
//   /** （受控）展开指定的树节点 */
//   expandedKeys: PropTypes.arrayOf(PropTypes.string),
//   /** （受控）选中复选框的树节点 */
// //todo
// // checkedKeys?: string[] | { checked: string[]; halfChecked: string[] };
//   /** 默认选中复选框的树节点 */
//   defaultCheckedKeys: PropTypes.arrayOf(PropTypes.string),
//   /** （受控）设置选中的树节点 */
//   selectedKeys: PropTypes.arrayOf(PropTypes.string),
//   /** 默认选中的树节点 */
//   defaultSelectedKeys: PropTypes.arrayOf(PropTypes.string),
//   /** 展开/收起节点时触发 */
//   onExpand: (expandedKeys, info) => null,
//   /** 点击复选框触发 */
//   onCheck: (checkedKeys, e) => null,
//   /** 点击树节点触发 */
//   onSelect: (selectedKeys, e) => null,
//   /** filter some AntTreeNodes as you need. it should return true */
//   filterAntTreeNode: (node) => null,
//   /** 异步加载数据 */
//   loadData: (node) => null,
//   /** 响应右键点击 */
//   onRightClick: (options) => null,
//   /** 设置节点可拖拽（IE>8）*/
//   draggable: PropTypes.boolean,
//   /** 开始拖拽时调用 */
//   onDragStart: (options) => null,
//   /** dragenter 触发时调用 */
//   onDragEnter: (options) => null,
//   /** dragover 触发时调用 */
//   onDragOver: (options) => null,
//   /** dragleave 触发时调用 */
//   onDragLeave: (options) => null,
//   /** drop 触发时调用 */
//   onDrop: (options) => null,
//   style: PropTypes.string,
//   showIcon: PropTypes.boolean,
//   prefixCls: PropTypes.string,
//   filterTreeNode: (node) => false
// };
// console.log(styles)
// export default withStyles(styles)(Tree);


Tree.TreeNode = _rcTree.TreeNode;
Tree.defaultProps = {
  prefixCls: 'rm-tree',
  checkable: false,
  showIcon: false // openAnimation: animation

};