innov
/
bee-tree
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

react 16 升级

This commit is contained in:
jonymrshi 2017-10-18 16:01:17 +08:00
parent 531e81063b
commit 17a8e458bd
10 changed files with 189 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
build/Tree.css
View File

@ -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: ""; }

119
build/Tree.js
View File

@ -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 = {

37
build/TreeNode.js
View File

@ -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 = {

58
build/index.js
View File

@ -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 = {

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

5
index.html
View File

@ -15,8 +15,9 @@
<script src="./node_modules/console-polyfill/index.js"></script>
<script src="./node_modules/es5-shim/es5-shim.min.js"></script>
<script src="./node_modules/es5-shim/es5-sham.min.js"></script>
<script src="./node_modules/react/dist/react-with-addons.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
<script src="./dist/demo.js"></script>
</body>
</html>

9
package.json
View File

@ -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",

6
src/Tree.js
View File

@ -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() {}

5
src/TreeNode.js
View File

@ -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);

3
src/index.js
View File

@ -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,