@6thquake/react-material
Version:
React components that implement Google's Material Design.
272 lines (223 loc) • 6.89 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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 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.TreeNode = _rcTree.TreeNode;
Tree.defaultProps = {
showLine: false,
showIcon: false,
multiple: false,
checkable: false,
disabled: false,
checkStrictly: false,
draggable: false,
defaultExpandParent: true,
autoExpandParent: false,
defaultExpandAll: false,
defaultExpandedKeys: [],
defaultCheckedKeys: [],
defaultSelectedKeys: [],
prefixCls: 'rm-tree'
};
Tree.propTypes = {
/**
* @ignore
*/
autoExpandParent: _propTypes.default.bool,
/**
* 是否自动展开父节点
*/
checkable: _propTypes.default.bool,
/**
* 节点前添加 Checkbox 复选框
*/
checkedKeys: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.shape({
checked: _propTypes.default.arrayOf(_propTypes.default.string),
halfChecked: _propTypes.default.arrayOf(_propTypes.default.string)
})]),
/**
* （受控）选中复选框的树节点
* （注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置checkable和checkStrictly，它是一个有checked和halfChecked属性的对象，并且父子节点的选中与否不再关联
*/
checkStrictly: _propTypes.default.bool,
/**
* checkable状态下节点选择完全受控（父子节点选中状态不再关联）
*/
defaultCheckedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* 默认选中复选框的树节点
*/
defaultExpandAll: _propTypes.default.bool,
/**
* 默认展开所有树节点
*/
defaultExpandedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* 默认展开指定的树节点
*/
defaultExpandParent: _propTypes.default.bool,
/**
* 默认展开父节点
*/
defaultSelectedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* 默认选中的树节点
*/
disabled: _propTypes.default.bool,
/**
* 将树禁用
*/
draggable: _propTypes.default.bool,
/**
* 设置节点可拖拽（IE>8）
*/
expandedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* （受控）展开指定的树节点
*/
multiple: _propTypes.default.bool,
/**
* 支持点选多个节点（节点本身）
*/
onCheck: function onCheck(checkedKeys, e) {
return null;
},
/**
* （受控）设置选中的树节点
*/
onDragEnter: function onDragEnter(options) {
return null;
},
/**
* 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式
*/
onDragLeave: function onDragLeave(options) {
return null;
},
/**
* 是否展示连接线
*/
onDragOver: function onDragOver(options) {
return null;
},
/**
* 点击复选框触发
*/
onDragStart: function onDragStart(options) {
return null;
},
/**
* dragenter 触发时调用
*/
onDrop: function onDrop(options) {
return null;
},
/**
* dragleave 触发时调用
*/
onExpand: function onExpand(expandedKeys, info) {
return null;
},
/**
* dragover 触发时调用
*/
onRightClick: function onRightClick(options) {
return null;
},
/**
* 开始拖拽时调用
*/
onSelect: function onSelect(selectedKeys, e) {
return null;
},
/** drop 触发时调用 */
prefixCls: _propTypes.default.string,
/**
* 展开/收起节点时触发
*/
selectedKeys: _propTypes.default.arrayOf(_propTypes.default.string),
/**
* 点击树节点触发
*/
showIcon: _propTypes.default.bool,
/**
* 响应右键点击
*/
showLine: _propTypes.default.bool
};
var _default = (0, _withStyles.default)(_styles.default, {
name: 'RMTree'
})(Tree);
exports.default = _default;