From 17a8e458bd618e7460d60ae73879d0b8596a25a8 Mon Sep 17 00:00:00 2001 From: jonymrshi Date: Wed, 18 Oct 2017 16:01:17 +0800 Subject: [PATCH] =?UTF-8?q?react=2016=20=E5=8D=87=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/Tree.css | 61 ++++++++++++++---------- build/Tree.js | 119 +++++++++++++++++++++++++++++----------------- build/TreeNode.js | 37 ++++++++++---- build/index.js | 58 +++++++++++----------- demo/index.js | 2 +- index.html | 5 +- package.json | 9 +++- src/Tree.js | 6 +-- src/TreeNode.js | 5 +- src/index.js | 3 +- 10 files changed, 189 insertions(+), 116 deletions(-) diff --git a/build/Tree.css b/build/Tree.css index 7a11291..8923045 100644 --- a/build/Tree.css +++ b/build/Tree.css @@ -1,16 +1,23 @@ +@charset "UTF-8"; /* FormGroup */ /* Navlayout */ /* FormGroup */ /* Navlayout */ .u-checkbox { - width: 18px; - display: inline-block; } + display: inline-block; + position: relative; } .u-checkbox.disabled .u-checkbox-label { cursor: not-allowed; opacity: 0.5; } .u-checkbox input[type='checkbox'] { - display: none; - cursor: pointer; } + position: absolute; + left: 0; + z-index: 1; + cursor: pointer; + opacity: 0; + top: 2px; + height: 18px; + width: 18px; } .u-checkbox.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(30,136,229); -webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229); @@ -26,14 +33,13 @@ display: inline-block; position: relative; padding-left: 25px; - margin-right: 10px; - color: rgb(30,136,229); } + color: #a9a9a9; } .u-checkbox .u-checkbox-label:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid; - background-color: #fafafa; + background-color: #fff; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; @@ -44,7 +50,7 @@ width: 18px; height: 18px; left: 0; - bottom: 0; + top: -13px; text-align: center; position: absolute; } .u-checkbox .u-checkbox-label:after { @@ -54,55 +60,54 @@ width: 18px; height: 18px; left: 0; - bottom: 0; + top: -13px; text-align: center; position: absolute; } +.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label { + background-color: #108ee9; + border-color: #108ee9; } + +.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after { + color: #fff; + content: "\e6ce"; + line-height: 18px; + font-size: 14px; } + +.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before { + box-shadow: inset 0 0 0 10px #1e88e5; + border-color: #1e88e5; } + .u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(76,175,80); -webkit-box-shadow: inset 0 0 0 10px rgb(76,175,80); box-shadow: inset 0 0 0 10px rgb(76,175,80); border-color: rgb(76,175,80); } -.u-checkbox.u-checkbox-success .u-checkbox-label { - color: rgb(76,175,80); } - .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(255,152,0); -webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0); box-shadow: inset 0 0 0 10px rgb(255,152,0); border-color: rgb(255,152,0); } -.u-checkbox.u-checkbox-warning .u-checkbox-label { - color: rgb(255,152,0); } - .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(244,67,54); -webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54); box-shadow: inset 0 0 0 10px rgb(244,67,54); border-color: rgb(244,67,54); } -.u-checkbox.u-checkbox-danger .u-checkbox-label { - color: rgb(244,67,54); } - .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(97,97,97); -webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97); box-shadow: inset 0 0 0 10px rgb(97,97,97); border-color: rgb(97,97,97); } -.u-checkbox.u-checkbox-dark .u-checkbox-label { - color: rgb(97,97,97); } - .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before { -moz-box-shadow: inset 0 0 0 10px rgb(0,188,212); -webkit-box-shadow: inset 0 0 0 10px rgb(0,188,212); box-shadow: inset 0 0 0 10px rgb(0,188,212); border-color: rgb(0,188,212); } -.u-checkbox.u-checkbox-info .u-checkbox-label { - color: rgb(0,188,212); } - .u-tree li span.u-tree-checkbox { margin: 2px 4px 0 0; } @@ -416,3 +421,11 @@ .u-motion-collapse-active { -webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } + +/** + * 自定义switcher图标 + */ +.u-tree li span.u-tree-switcher.uf { + font-size: 14px; } + .u-tree li span.u-tree-switcher.uf:after { + content: ""; } diff --git a/build/Tree.js b/build/Tree.js index 12ae803..881b57f 100644 --- a/build/Tree.js +++ b/build/Tree.js @@ -20,6 +20,10 @@ var _classnames2 = _interopRequireDefault(_classnames); var _util = require('./util'); +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } @@ -144,11 +148,17 @@ var Tree = function (_React$Component) { }; Tree.prototype.onDragOver = function onDragOver(e, treeNode) { - this.props.onDragOver({ event: e, node: treeNode }); + this.props.onDragOver({ + event: e, + node: treeNode + }); }; Tree.prototype.onDragLeave = function onDragLeave(e, treeNode) { - this.props.onDragLeave({ event: e, node: treeNode }); + this.props.onDragLeave({ + event: e, + node: treeNode + }); }; Tree.prototype.onDrop = function onDrop(e, treeNode) { @@ -186,7 +196,10 @@ var Tree = function (_React$Component) { this.setState({ dragOverNodeKey: '' }); - this.props.onDragEnd({ event: e, node: treeNode }); + this.props.onDragEnd({ + event: e, + node: treeNode + }); }; Tree.prototype.onExpand = function onExpand(treeNode) { @@ -202,15 +215,22 @@ var Tree = function (_React$Component) { expandedKeys.splice(index, 1); } if (!controlled) { - this.setState({ expandedKeys: expandedKeys }); + this.setState({ + expandedKeys: expandedKeys + }); } - this.props.onExpand(expandedKeys, { node: treeNode, expanded: expanded }); + this.props.onExpand(expandedKeys, { + node: treeNode, + expanded: expanded + }); // after data loaded, need set new expandedKeys if (expanded && this.props.loadData) { return this.props.loadData(treeNode).then(function () { if (!controlled) { - _this2.setState({ expandedKeys: expandedKeys }); + _this2.setState({ + expandedKeys: expandedKeys + }); } }); } @@ -318,11 +338,17 @@ var Tree = function (_React$Component) { }; Tree.prototype.onMouseEnter = function onMouseEnter(e, treeNode) { - this.props.onMouseEnter({ event: e, node: treeNode }); + this.props.onMouseEnter({ + event: e, + node: treeNode + }); }; Tree.prototype.onMouseLeave = function onMouseLeave(e, treeNode) { - this.props.onMouseLeave({ event: e, node: treeNode }); + this.props.onMouseLeave({ + event: e, + node: treeNode + }); }; Tree.prototype.onContextMenu = function onContextMenu(e, treeNode) { @@ -343,7 +369,10 @@ var Tree = function (_React$Component) { this.setState({ selectedKeys: selectedKeys }); - this.props.onRightClick({ event: e, node: treeNode }); + this.props.onRightClick({ + event: e, + node: treeNode + }); }; // all keyboard events callbacks run from here at first @@ -508,7 +537,9 @@ var Tree = function (_React$Component) { selected: state.selectedKeys.indexOf(key) !== -1, openTransitionName: this.getOpenTransitionName(), openAnimation: props.openAnimation, - filterTreeNode: this.filterTreeNode.bind(this) + filterTreeNode: this.filterTreeNode.bind(this), + openIcon: props.openIcon, + closeIcon: props.closeIcon }; if (props.checkable) { cloneProps.checkable = props.checkable; @@ -606,40 +637,40 @@ var Tree = function (_React$Component) { }(_react2["default"].Component); Tree.propTypes = { - prefixCls: _react.PropTypes.string, - children: _react.PropTypes.any, - showLine: _react.PropTypes.bool, - showIcon: _react.PropTypes.bool, - selectable: _react.PropTypes.bool, - multiple: _react.PropTypes.bool, - checkable: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.node]), - _treeNodesStates: _react.PropTypes.object, - checkStrictly: _react.PropTypes.bool, - draggable: _react.PropTypes.bool, - autoExpandParent: _react.PropTypes.bool, - defaultExpandAll: _react.PropTypes.bool, - defaultExpandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string), - expandedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string), - defaultCheckedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string), - checkedKeys: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string), _react.PropTypes.object]), - defaultSelectedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string), - selectedKeys: _react.PropTypes.arrayOf(_react.PropTypes.string), - onExpand: _react.PropTypes.func, - onCheck: _react.PropTypes.func, - onSelect: _react.PropTypes.func, - loadData: _react.PropTypes.func, - onMouseEnter: _react.PropTypes.func, - onMouseLeave: _react.PropTypes.func, - onRightClick: _react.PropTypes.func, - onDragStart: _react.PropTypes.func, - onDragEnter: _react.PropTypes.func, - onDragOver: _react.PropTypes.func, - onDragLeave: _react.PropTypes.func, - onDrop: _react.PropTypes.func, - onDragEnd: _react.PropTypes.func, - filterTreeNode: _react.PropTypes.func, - openTransitionName: _react.PropTypes.string, - openAnimation: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.object]) + prefixCls: _propTypes2["default"].string, + children: _propTypes2["default"].any, + showLine: _propTypes2["default"].bool, + showIcon: _propTypes2["default"].bool, + selectable: _propTypes2["default"].bool, + multiple: _propTypes2["default"].bool, + checkable: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].node]), + _treeNodesStates: _propTypes2["default"].object, + checkStrictly: _propTypes2["default"].bool, + draggable: _propTypes2["default"].bool, + autoExpandParent: _propTypes2["default"].bool, + defaultExpandAll: _propTypes2["default"].bool, + defaultExpandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string), + expandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string), + defaultCheckedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string), + checkedKeys: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].string), _propTypes2["default"].object]), + defaultSelectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string), + selectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string), + onExpand: _propTypes2["default"].func, + onCheck: _propTypes2["default"].func, + onSelect: _propTypes2["default"].func, + loadData: _propTypes2["default"].func, + onMouseEnter: _propTypes2["default"].func, + onMouseLeave: _propTypes2["default"].func, + onRightClick: _propTypes2["default"].func, + onDragStart: _propTypes2["default"].func, + onDragEnter: _propTypes2["default"].func, + onDragOver: _propTypes2["default"].func, + onDragLeave: _propTypes2["default"].func, + onDrop: _propTypes2["default"].func, + onDragEnd: _propTypes2["default"].func, + filterTreeNode: _propTypes2["default"].func, + openTransitionName: _propTypes2["default"].string, + openAnimation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]) }; Tree.defaultProps = { diff --git a/build/TreeNode.js b/build/TreeNode.js index 0160ceb..122dc22 100644 --- a/build/TreeNode.js +++ b/build/TreeNode.js @@ -26,6 +26,10 @@ var _beeAnimate2 = _interopRequireDefault(_beeAnimate); var _util = require('./util'); +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } @@ -158,7 +162,9 @@ var TreeNode = function (_React$Component) { var callbackPromise = this.props.root.onExpand(this); if (callbackPromise && (typeof callbackPromise === 'undefined' ? 'undefined' : _typeof(callbackPromise)) === 'object') { var setLoading = function setLoading(dataLoading) { - _this2.setState({ dataLoading: dataLoading }); + _this2.setState({ + dataLoading: dataLoading + }); }; setLoading(true); callbackPromise.then(function () { @@ -177,6 +183,7 @@ var TreeNode = function (_React$Component) { }; TreeNode.prototype.renderSwitcher = function renderSwitcher(props, expandedState) { + var stateIcon = void 0; var prefixCls = props.prefixCls; var switcherCls = _defineProperty({}, prefixCls + '-switcher', true); if (!props.showLine) { @@ -187,6 +194,15 @@ var TreeNode = function (_React$Component) { switcherCls[prefixCls + '-center_' + expandedState] = !props.last; switcherCls[prefixCls + '-bottom_' + expandedState] = props.last; } + + if (expandedState === 'open' && props.openIcon) { + stateIcon = 'uf ' + props.openIcon; + } + if (expandedState === 'close' && props.closeIcon) { + stateIcon = ['uf ' + props.closeIcon]; + } + switcherCls[stateIcon] = stateIcon; + if (props.disabled) { switcherCls[prefixCls + '-switcher-disabled'] = true; return _react2["default"].createElement('span', { className: (0, _classnames2["default"])(switcherCls) }); @@ -282,6 +298,8 @@ var TreeNode = function (_React$Component) { var canRenderSwitcher = true; var content = props.title; var newChildren = this.renderChildren(props); + var openIconCls = false, + closeIconCls = false; if (!newChildren || newChildren === props.children) { // content = newChildren; newChildren = null; @@ -296,7 +314,6 @@ var TreeNode = function (_React$Component) { // } var iconEleCls = (_iconEleCls = {}, _defineProperty(_iconEleCls, prefixCls + '-iconEle', true), _defineProperty(_iconEleCls, prefixCls + '-icon_loading', this.state.dataLoading), _defineProperty(_iconEleCls, prefixCls + '-icon__' + iconState, true), _iconEleCls); - var selectHandle = function selectHandle() { var icon = props.showIcon || props.loadData && _this3.state.dataLoading ? _react2["default"].createElement('span', { className: (0, _classnames2["default"])(iconEleCls) }) : null; var title = _react2["default"].createElement( @@ -404,13 +421,15 @@ var TreeNode = function (_React$Component) { TreeNode.isTreeNode = 1; TreeNode.propTypes = { - prefixCls: _react.PropTypes.string, - disabled: _react.PropTypes.bool, - disableCheckbox: _react.PropTypes.bool, - expanded: _react.PropTypes.bool, - isLeaf: _react.PropTypes.bool, - root: _react.PropTypes.object, - onSelect: _react.PropTypes.func + prefixCls: _propTypes2["default"].string, + disabled: _propTypes2["default"].bool, + disableCheckbox: _propTypes2["default"].bool, + expanded: _propTypes2["default"].bool, + isLeaf: _propTypes2["default"].bool, + root: _propTypes2["default"].object, + onSelect: _propTypes2["default"].func, + openIcon: _propTypes2["default"].string, + closeIcon: _propTypes2["default"].string }; TreeNode.defaultProps = { diff --git a/build/index.js b/build/index.js index 1eaf3e7..b2fd8f5 100644 --- a/build/index.js +++ b/build/index.js @@ -22,6 +22,10 @@ var _openAnimation = require('./openAnimation'); var _openAnimation2 = _interopRequireDefault(_openAnimation); +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } @@ -33,57 +37,57 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } var TreeProps = { - showLine: _react.PropTypes.bool, - className: _react.PropTypes.string, + showLine: _propTypes2["default"].bool, + className: _propTypes2["default"].string, /** 是否支持多选 */ - multiple: _react.PropTypes.bool, + multiple: _propTypes2["default"].bool, /** 是否自动展开父节点 */ - autoExpandParent: _react.PropTypes.bool, + autoExpandParent: _propTypes2["default"].bool, /** checkable状态下节点选择完全受控（父子节点选中状态不再关联）*/ - checkStrictly: _react.PropTypes.bool, + checkStrictly: _propTypes2["default"].bool, /** 是否支持选中 */ - checkable: _react.PropTypes.bool, + checkable: _propTypes2["default"].bool, /** 默认展开所有树节点 */ - defaultExpandAll: _react.PropTypes.bool, + defaultExpandAll: _propTypes2["default"].bool, /** 默认展开指定的树节点 */ - defaultExpandedKeys: _react.PropTypes.array, + defaultExpandedKeys: _propTypes2["default"].array, /** （受控）展开指定的树节点 */ - expandedKeys: _react.PropTypes.array, + expandedKeys: _propTypes2["default"].array, /** （受控）选中复选框的树节点 */ - checkedKeys: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.object]), + checkedKeys: _propTypes2["default"].oneOfType([_propTypes2["default"].array, _propTypes2["default"].object]), /** 默认选中复选框的树节点 */ - defaultCheckedKeys: _react.PropTypes.array, + defaultCheckedKeys: _propTypes2["default"].array, /** （受控）设置选中的树节点 */ - selectedKeys: _react.PropTypes.array, + selectedKeys: _propTypes2["default"].array, /** 默认选中的树节点 */ - defaultSelectedKeys: _react.PropTypes.array, + defaultSelectedKeys: _propTypes2["default"].array, /** 展开/收起节点时触发 */ - onExpand: _react.PropTypes.func, + onExpand: _propTypes2["default"].func, /** 点击复选框触发 */ - onCheck: _react.PropTypes.func, + onCheck: _propTypes2["default"].func, /** 点击树节点触发 */ - onSelect: _react.PropTypes.func, + onSelect: _propTypes2["default"].func, /** filter some AntTreeNodes as you need. it should return true */ - filterAntTreeNode: _react.PropTypes.func, + filterAntTreeNode: _propTypes2["default"].func, /** 异步加载数据 */ - loadData: _react.PropTypes.func, + loadData: _propTypes2["default"].func, /** 响应右键点击 */ - onRightClick: _react.PropTypes.func, + onRightClick: _propTypes2["default"].func, /** 设置节点可拖拽（IE>8）*/ - draggable: _react.PropTypes.bool, + draggable: _propTypes2["default"].bool, /** 开始拖拽时调用 */ - onDragStart: _react.PropTypes.func, + onDragStart: _propTypes2["default"].func, /** dragenter 触发时调用 */ - onDragEnter: _react.PropTypes.func, + onDragEnter: _propTypes2["default"].func, /** dragover 触发时调用 */ - onDragOver: _react.PropTypes.func, + onDragOver: _propTypes2["default"].func, /** dragleave 触发时调用 */ - onDragLeave: _react.PropTypes.func, + onDragLeave: _propTypes2["default"].func, /** drop 触发时调用 */ - onDrop: _react.PropTypes.func, + onDrop: _propTypes2["default"].func, style: _react2["default"].CSSProperties, - prefixCls: _react.PropTypes.string, - filterTreeNode: _react.PropTypes.func + prefixCls: _propTypes2["default"].string, + filterTreeNode: _propTypes2["default"].func }; var defaultProps = { diff --git a/demo/index.js b/demo/index.js index 0f859cc..fbbf6c7 100644 --- a/demo/index.js +++ b/demo/index.js @@ -42,7 +42,7 @@ const CARET = ; const CARETUP = ; -var Demo1 = require("./demolist/Demo1");var Demo6 = require("./demolist/Demo6");var DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\r\n*\r\n* @title Tree基本使用事例\r\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport Tree from 'bee-tree';\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nconst defaultProps = {\r\n\tkeys: ['0-0-0', '0-0-1']\r\n}\r\nconsole.log(Tree);\r\nclass Demo1 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t const keys = this.props.keys;\r\n\t this.state = {\r\n\t defaultExpandedKeys: keys,\r\n\t defaultSelectedKeys: keys,\r\n\t defaultCheckedKeys: keys,\r\n\t };\r\n\t}\r\n\tonSelect(info) {\r\n\t console.log('selected', info);\r\n\t}\r\n\tonCheck(info) {\r\n\t console.log('onCheck', info);\r\n\t}\r\n\trender() {\r\n\t return (\r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t sss} key=\"0-0-1-0\" />\r\n\t \r\n\t \r\n\t \r\n\t );\r\n\t}\r\n}\r\n\r\nDemo1.defaultProps = defaultProps;\r\n\r\n\r\n","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree基本使用事例自定义图标","code":"/**\r\n *\r\n * @title Tree基本使用事例自定义图标\r\n * @description 添加openIcon、closeIcon属性\r\n *\r\n */\r\n\r\n\r\nimport React, {\r\n\tComponent\r\n} from 'react';\r\nimport Tree from 'bee-tree';\r\n\r\nconst TreeNode = Tree.TreeNode;\r\n\r\nconst defaultProps = {\r\n\tkeys: ['0-0-0', '0-0-1']\r\n}\r\nconsole.log(Tree);\r\nclass Demo1 extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tconst keys = this.props.keys;\r\n\t\tthis.state = {\r\n\t\t\tdefaultExpandedKeys: keys,\r\n\t\t\tdefaultSelectedKeys: keys,\r\n\t\t\tdefaultCheckedKeys: keys,\r\n\t\t};\r\n\t}\r\n\tonSelect(info) {\r\n\t\tconsole.log('selected', info);\r\n\t}\r\n\tonCheck(info) {\r\n\t\tconsole.log('onCheck', info);\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\r\n\t\t\t\r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t \r\n\t sss} key=\"0-0-1-0\" />\r\n\t \r\n\t \r\n\t \r\n\t\t);\r\n\t}\r\n}\r\n\r\nDemo1.defaultProps = defaultProps;\r\n\r\n\r\n","desc":" 添加openIcon、closeIcon属性"}] +var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var DemoArray = [{"example":,"title":" Tree基本使用事例","code":"/**\n*\n* @title Tree基本使用事例\n* @description 事例涵盖 checkbox如何选择，disable状态和部分选择状态。\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst TreeNode = Tree.TreeNode;\n\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t const keys = this.props.keys;\n\t this.state = {\n\t defaultExpandedKeys: keys,\n\t defaultSelectedKeys: keys,\n\t defaultCheckedKeys: keys,\n\t };\n\t}\n\tonSelect(info) {\n\t console.log('selected', info);\n\t}\n\tonCheck(info) {\n\t console.log('onCheck', info);\n\t}\n\trender() {\n\t return (\n\t \n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t );\n\t}\n}\n\nDemo1.defaultProps = defaultProps;\n\n\n","desc":" 事例涵盖 checkbox如何选择，disable状态和部分选择状态。"},{"example":,"title":" Tree数据可控事例","code":"/**\n*\n* @title Tree数据可控事例\n* @description\n*\n*/\n/*\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n this.state = {\n expandedKeys: ['0-0-0', '0-0-1'],\n autoExpandParent: true,\n checkedKeys: ['0-0-0'],\n selectedKeys: [],\n };\n this.onExpand = this.onExpand.bind(this);\n this.onCheck = this.onCheck.bind(this);\n this.onSelect = this.onSelect.bind(this);\n }\n onExpand(expandedKeys) {\n console.log('onExpand', arguments);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onCheck(checkedKeys) {\n this.setState({\n checkedKeys,\n selectedKeys: ['0-3', '0-4'],\n });\n }\n onSelect(selectedKeys, info) {\n console.log('onSelect', info);\n this.setState({ selectedKeys });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n \n {loop(gData)}\n \n );\n }\n};\n\n\n","desc":""},{"example":,"title":" Tree 拖拽使用事例","code":"/**\n*\n* @title Tree 拖拽使用事例\n* @description 拖动结点插入到另一个结点后面或者其他的父节点里面。\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nclass Demo3 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n gData,\n expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],\n };\n this.onDragEnter = this.onDragEnter.bind(this);\n this.onDrop = this.onDrop.bind(this);\n }\n onDragEnter(info) {\n console.log(info);\n // expandedKeys 需要受控时设置\n // this.setState({\n // expandedKeys: info.expandedKeys,\n // });\n }\n onDrop(info) {\n console.log(info);\n const dropKey = info.node.props.eventKey;\n const dragKey = info.dragNode.props.eventKey;\n // const dragNodesKeys = info.dragNodesKeys;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropToGap) {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n ar.splice(i, 0, dragObj);\n } else {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert 示例添加到尾部，可以是随意位置\n item.children.push(dragObj);\n });\n }\n this.setState({\n gData: data,\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children && item.children.length) {\n return {loop(item.children)};\n }\n return ;\n });\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n};\n\n","desc":" 拖动结点插入到另一个结点后面或者其他的父节点里面。"},{"example":,"title":" Tree可搜索事例","code":"/**\n*\n* @title Tree可搜索事例\n* @description\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport FormControl from 'bee-form-control';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nconst dataList = [];\nconst generateList = (data) => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const key = node.key;\n dataList.push({ key, title: key });\n if (node.children) {\n generateList(node.children, node.key);\n }\n }\n};\ngenerateList(gData);\n\nconst getParentKey = (key, tree) => {\n let parentKey;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some(item => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey;\n};\n\n\nclass Demo4 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n expandedKeys: [],\n searchValue: '',\n autoExpandParent: true,\n }\n }\n onExpand = (expandedKeys) => {\n this.setState({\n expandedKeys,\n autoExpandParent: false,\n });\n }\n onChange = (e) => {\n const value = e.target.value;\n const expandedKeys = [];\n dataList.forEach((item) => {\n if (item.key.indexOf(value) > -1) {\n expandedKeys.push(getParentKey(item.key, gData));\n }\n });\n const uniqueExpandedKeys = [];\n expandedKeys.forEach((item) => {\n if (item && uniqueExpandedKeys.indexOf(item) === -1) {\n uniqueExpandedKeys.push(item);\n }\n });\n this.setState({\n expandedKeys: uniqueExpandedKeys,\n searchValue: value,\n autoExpandParent: true,\n });\n }\n render() {\n const { searchValue, expandedKeys, autoExpandParent } = this.state;\n const loop = data => data.map((item) => {\n const index = item.key.search(searchValue);\n const beforeStr = item.key.substr(0, index);\n const afterStr = item.key.substr(index + searchValue.length);\n const title = index > -1 ? (\n \n {beforeStr}\n {searchValue}\n {afterStr}\n \n ) : {item.key};\n if (item.children) {\n return (\n \n {loop(item.children)}\n \n );\n }\n return ;\n });\n return (\n
\n \n \n {loop(gData)}\n \n
\n );\n }\n}\n\n","desc":""},{"example":,"title":" Tree异步数据加载","code":"/**\n*\n* @title Tree异步数据加载\n* @description 当点击展开，异步获取子节点数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Tree from 'bee-tree';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst TreeNode = Tree.TreeNode;\n\nfunction generateTreeNodes(treeNode) {\n const arr = [];\n const key = treeNode.props.eventKey;\n for (let i = 0; i < 3; i++) {\n arr.push({ name: `leaf ${key}-${i}`, key: `${key}-${i}` });\n }\n return arr;\n}\n\nfunction setLeaf(treeData, curKey, level) {\n const loopLeaf = (data, lev) => {\n const l = lev - 1;\n data.forEach((item) => {\n if ((item.key.length > curKey.length) ? item.key.indexOf(curKey) !== 0 :\n curKey.indexOf(item.key) !== 0) {\n return;\n }\n if (item.children) {\n loopLeaf(item.children, l);\n } else if (l < 1) {\n item.isLeaf = true;\n }\n });\n };\n loopLeaf(treeData, level + 1);\n}\n\nfunction getNewTreeData(treeData, curKey, child, level) {\n const loop = (data) => {\n if (level < 1 || curKey.length - 3 > level * 2) return;\n data.forEach((item) => {\n if (curKey.indexOf(item.key) === 0) {\n if (item.children) {\n loop(item.children);\n } else {\n item.children = child;\n }\n }\n });\n };\n loop(treeData);\n setLeaf(treeData, curKey, level);\n}\n\nclass Demo5 extends Component{\n constructor(props) {\n super(props);\n this.state = {\n treeData: [],\n };\n this.onSelect = this.onSelect.bind(this);\n this.onLoadData = this.onLoadData.bind(this);\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n treeData: [\n { name: 'pNode 01', key: '0-0' },\n { name: 'pNode 02', key: '0-1' },\n { name: 'pNode 03', key: '0-2', isLeaf: true },\n ],\n });\n }, 100);\n }\n onSelect(info) {\n console.log('selected', info);\n }\n onLoadData(treeNode) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const treeData = [...this.state.treeData];\n getNewTreeData(treeData, treeNode.props.eventKey, generateTreeNodes(treeNode), 2);\n this.setState({ treeData });\n resolve();\n }, 1000);\n });\n }\n render() {\n const loop = data => data.map((item) => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n const treeNodes = loop(this.state.treeData);\n return (\n \n {treeNodes}\n \n );\n }\n};\n\n","desc":" 当点击展开，异步获取子节点数据"},{"example":,"title":" Tree基本使用事例自定义图标","code":"/**\n *\n * @title Tree基本使用事例自定义图标\n * @description 添加openIcon、closeIcon属性\n *\n */\n\n\nimport React, {\n\tComponent\n} from 'react';\nimport Tree from 'bee-tree';\n\nconst TreeNode = Tree.TreeNode;\n\nconst defaultProps = {\n\tkeys: ['0-0-0', '0-0-1']\n}\nconsole.log(Tree);\nclass Demo1 extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tconst keys = this.props.keys;\n\t\tthis.state = {\n\t\t\tdefaultExpandedKeys: keys,\n\t\t\tdefaultSelectedKeys: keys,\n\t\t\tdefaultCheckedKeys: keys,\n\t\t};\n\t}\n\tonSelect(info) {\n\t\tconsole.log('selected', info);\n\t}\n\tonCheck(info) {\n\t\tconsole.log('onCheck', info);\n\t}\n\trender() {\n\t\treturn (\n\n\t\t\t\n\t \n\t \n\t \n\t \n\t \n\t \n\t sss} key=\"0-0-1-0\" />\n\t \n\t \n\t \n\t\t);\n\t}\n}\n\nDemo1.defaultProps = defaultProps;\n\n\n","desc":" 添加openIcon、closeIcon属性"}] class Demo extends Component { diff --git a/index.html b/index.html index dfc6777..599cd35 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,9 @@ - - + + + diff --git a/package.json b/package.json index 8e37f9c..ef18f13 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-tree", - "version": "0.1.4", + "version": "1.0.0", "description": "Tree ui component for react", "keywords": [ "react", @@ -35,12 +35,17 @@ "dependencies": { "bee-animate": "latest", "bee-checkbox": "latest", - "bee-form-control": "^0.1.5", + "bee-form-control": "latest", "classnames": "^2.2.5", "object-assign": "latest", "babel-runtime": "^6.23.0", "tinper-bee-core": "latest" }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0", + "react-dom": "^15.3.0 || ^16.0", + "prop-types": "15.6.0" + }, "devDependencies": { "chai": "^3.5.0", "enzyme": "^2.4.1", diff --git a/src/Tree.js b/src/Tree.js index ce75bff..0eee13e 100644 --- a/src/Tree.js +++ b/src/Tree.js @@ -1,7 +1,5 @@ /* eslint no-console:0 */ -import React, { - PropTypes -} from 'react'; +import React from 'react'; import assign from 'object-assign'; import classNames from 'classnames'; import { @@ -14,6 +12,8 @@ import { getStrictlyValue, arraysEqual, } from './util'; +import PropTypes from 'prop-types'; + function noop() {} diff --git a/src/TreeNode.js b/src/TreeNode.js index 9bcdd4b..b92e1b2 100644 --- a/src/TreeNode.js +++ b/src/TreeNode.js @@ -1,12 +1,11 @@ -import React, { - PropTypes -} from 'react'; +import React from 'react'; import assign from 'object-assign'; import classNames from 'classnames'; import Animate from 'bee-animate'; import { browser } from './util'; +import PropTypes from 'prop-types'; const browserUa = typeof window !== 'undefined' ? browser(window.navigator) : ''; const ieOrEdge = /.*(IE|Edge).+/.test(browserUa); diff --git a/src/index.js b/src/index.js index 291cd1e..346f135 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,8 @@ -import React,{PropTypes,Component} from 'react'; +import React,{Component} from 'react'; import RcTree from './Tree'; import TreeNode from './TreeNode'; import animation from './openAnimation'; +import PropTypes from 'prop-types'; const TreeProps ={ showLine: PropTypes.bool,