feat: tree

packages/react/package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "@avocado/math": "^2.0.0",
     "@latus/core": "^2.0.0",
-    "@latus/react": "^2.0.0"
+    "@latus/react": "^2.0.0",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
     "@latus/build": "1.x"

packages/react/src/components/tree/index.jsx

@@ -0,0 +1,41 @@
+import './index.scss';
+
+import {PropTypes, React} from '@latus/react';
+
+import Node from './node';
+
+const Tree = ({
+  activate,
+  indent,
+  label,
+  nodes,
+  value,
+}) => (
+  <div className="tree">
+    <Node
+      activate={activate}
+      indent={indent}
+      label={label}
+      nodes={nodes}
+      value={value}
+    />
+  </div>
+);
+
+Tree.defaultProps = {
+  activate: () => {},
+  indent: 0,
+  nodes: null,
+};
+
+Tree.propTypes = {
+  activate: PropTypes.func,
+  indent: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  nodes: PropTypes.arrayOf(PropTypes.any),
+  value: PropTypes.string.isRequired,
+};
+
+Tree.displayName = 'Tree';
+
+export default Tree;

packages/react/src/components/tree/index.scss

@@ -0,0 +1,34 @@
+.tree {
+  .indent {
+    padding-left: 0.5em;
+    > .indent {
+      border-left: 1px solid #444;
+    }
+  }
+  .item:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+    cursor: pointer;
+  }
+  .label {
+    font-family: var(--message-font-family);
+    font-size: 1em;
+    justify-content: start;
+    padding: 0.3em 0;
+    min-height: auto;
+  }
+  .node {
+    > .item .label {
+      white-space: nowrap;
+      &:before {
+        color: #999;
+        content: "o";
+        font-size: 0.7em;
+        padding-right: 0.5em;
+      }
+    }
+    &.parent > .item .label:before {
+      // content: "\25B8";
+      content: "\25BE";
+    }
+  }
+}

packages/react/src/components/tree/node.jsx

@@ -0,0 +1,76 @@
+import {PropTypes, React} from '@latus/react';
+import classnames from 'classnames';
+
+const Node = ({
+  activate,
+  indent,
+  label,
+  nodes,
+  value,
+}) => {
+  const childrenNodes = nodes
+    ? nodes.map(
+      ({
+        label,
+        nodes,
+        value,
+      }) => (
+        <Node
+          activate={activate}
+          key={value}
+          // eslint-disable-next-line react/no-children-prop
+          nodes={nodes}
+          indent={indent + 1}
+          label={label}
+          value={value}
+        />
+      ),
+    )
+    : null;
+  let item = (
+    <div
+      className="label"
+      onClick={() => {
+        activate(value, nodes);
+      }}
+      onKeyPress={() => {}}
+      role="button"
+      tabIndex={0}
+    >
+      {label}
+    </div>
+  );
+  for (let i = 0; i < indent; ++i) {
+    item = <div className="indent">{item}</div>;
+  }
+  return (
+    <div
+      className={classnames(
+        'node',
+        {parent: !!nodes},
+      )}
+      key={value}
+    >
+      <div className="item">{item}</div>
+      {childrenNodes}
+    </div>
+  );
+};
+
+Node.defaultProps = {
+  activate: () => {},
+  indent: 0,
+  nodes: null,
+};
+
+Node.propTypes = {
+  activate: PropTypes.func,
+  indent: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  nodes: PropTypes.arrayOf(PropTypes.any),
+  value: PropTypes.string.isRequired,
+};
+
+Node.displayName = 'Node';
+
+export default Node;

packages/react/src/index.js

@@ -1,2 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
+export {default as Tree} from './components/tree';
+
 export {default as usePropertyChange} from './hooks/use-property-change';

packages/react/yarn.lock

@@ -2280,6 +2280,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "http://npm.cha0sdev/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x, clean-css@^4.2.3:
   version "4.2.3"
   resolved "http://npm.cha0sdev/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"