refactor: tree
This commit is contained in:
parent
90aa764a17
commit
42a72a41a0
|
@ -12,15 +12,16 @@ const Tree = (node) => (
|
||||||
);
|
);
|
||||||
|
|
||||||
Tree.defaultProps = {
|
Tree.defaultProps = {
|
||||||
active: () => false,
|
|
||||||
activate: () => {},
|
activate: () => {},
|
||||||
|
classNames: '',
|
||||||
indent: 0,
|
indent: 0,
|
||||||
nodes: null,
|
nodes: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
Tree.propTypes = {
|
Tree.propTypes = {
|
||||||
active: PropTypes.func,
|
|
||||||
activate: PropTypes.func,
|
activate: PropTypes.func,
|
||||||
|
// eslint-disable-next-line react/forbid-prop-types
|
||||||
|
classNames: PropTypes.any,
|
||||||
indent: PropTypes.number,
|
indent: PropTypes.number,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
nodes: PropTypes.arrayOf(PropTypes.any),
|
nodes: PropTypes.arrayOf(PropTypes.any),
|
||||||
|
|
|
@ -20,11 +20,19 @@
|
||||||
&.active {
|
&.active {
|
||||||
background-color: rgba(0, 120, 255, 0.5);
|
background-color: rgba(0, 120, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
&.collapsed {
|
||||||
|
&.parent > .item .label:before {
|
||||||
|
content: "\25B8";
|
||||||
|
}
|
||||||
|
.node {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
&.parent > .item .label:before {
|
&.parent > .item .label:before {
|
||||||
// content: "\25B8";
|
|
||||||
content: "\25BE";
|
content: "\25BE";
|
||||||
}
|
}
|
||||||
> .item .label {
|
> .item {
|
||||||
|
.label {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
&:before {
|
&:before {
|
||||||
color: #999;
|
color: #999;
|
||||||
|
@ -34,4 +42,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,25 +1,26 @@
|
||||||
import {PropTypes, React} from '@latus/react';
|
import {PropTypes, React} from '@latus/react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
const Node = (node) => {
|
const Node = (props) => {
|
||||||
const {
|
const {
|
||||||
active,
|
|
||||||
activate,
|
activate,
|
||||||
|
classNames,
|
||||||
indent,
|
indent,
|
||||||
label,
|
label,
|
||||||
nodes,
|
nodes,
|
||||||
value,
|
value,
|
||||||
} = node;
|
} = props;
|
||||||
const childrenNodes = nodes
|
const childrenNodes = nodes
|
||||||
? nodes.map(
|
? nodes.map(
|
||||||
({
|
({
|
||||||
|
classNames,
|
||||||
label,
|
label,
|
||||||
nodes,
|
nodes,
|
||||||
value,
|
value,
|
||||||
}) => (
|
}) => (
|
||||||
<Node
|
<Node
|
||||||
active={active}
|
|
||||||
activate={activate}
|
activate={activate}
|
||||||
|
classNames={classNames}
|
||||||
key={value}
|
key={value}
|
||||||
// eslint-disable-next-line react/no-children-prop
|
// eslint-disable-next-line react/no-children-prop
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
|
@ -33,12 +34,6 @@ const Node = (node) => {
|
||||||
let item = (
|
let item = (
|
||||||
<div
|
<div
|
||||||
className="label"
|
className="label"
|
||||||
onMouseDown={() => {
|
|
||||||
activate(node);
|
|
||||||
}}
|
|
||||||
onKeyPress={() => {}}
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</div>
|
</div>
|
||||||
|
@ -50,27 +45,38 @@ const Node = (node) => {
|
||||||
<div
|
<div
|
||||||
className={classnames(
|
className={classnames(
|
||||||
'node',
|
'node',
|
||||||
{active: active(node)},
|
|
||||||
{parent: !!nodes},
|
{parent: !!nodes},
|
||||||
|
classNames,
|
||||||
)}
|
)}
|
||||||
key={value}
|
key={value}
|
||||||
>
|
>
|
||||||
<div className="item">{item}</div>
|
<div
|
||||||
|
className="item"
|
||||||
|
onMouseDown={() => {
|
||||||
|
activate(props);
|
||||||
|
}}
|
||||||
|
onKeyPress={() => {}}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
{childrenNodes}
|
{childrenNodes}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Node.defaultProps = {
|
Node.defaultProps = {
|
||||||
active: () => false,
|
|
||||||
activate: () => {},
|
activate: () => {},
|
||||||
|
classNames: '',
|
||||||
indent: 0,
|
indent: 0,
|
||||||
nodes: null,
|
nodes: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
Node.propTypes = {
|
Node.propTypes = {
|
||||||
active: PropTypes.func,
|
|
||||||
activate: PropTypes.func,
|
activate: PropTypes.func,
|
||||||
|
// eslint-disable-next-line react/forbid-prop-types
|
||||||
|
classNames: PropTypes.any,
|
||||||
indent: PropTypes.number,
|
indent: PropTypes.number,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
nodes: PropTypes.arrayOf(PropTypes.any),
|
nodes: PropTypes.arrayOf(PropTypes.any),
|
||||||
|
|
Loading…
Reference in New Issue
Block a user