feat: tree sorting

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

@@ -31,4 +31,14 @@ Tree.propTypes = {
 
 Tree.displayName = 'Tree';
 
+Tree.fileSort = (l, r) => {
+  if (l.nodes && !r.nodes) {
+    return -1;
+  }
+  if (!l.nodes && r.nodes) {
+    return 1;
+  }
+  return l.value < r.value ? -1 : 1;
+};
+
 export default Tree;

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

@@ -14,31 +14,33 @@ const Node = (props) => {
     isCollapsed,
     nodes,
     renderLabel,
+    sort,
     styles,
     value,
   } = props;
   const children = nodes
-    ? nodes.map(
-      ({
-        label,
-        nodes,
-        styles,
-        value,
-      }) => (
-        <Node
-          activate={activate}
-          key={value}
-          nodes={nodes}
-          indent={indent + 1}
-          isActive={isActive}
-          isCollapsed={isCollapsed}
-          label={label}
-          renderLabel={renderLabel}
-          styles={styles}
-          value={value}
-        />
-      ),
-    )
+    ? (sort ? nodes.sort(sort) : nodes)
+      .map(
+        ({
+          label,
+          nodes,
+          styles,
+          value,
+        }) => (
+          <Node
+            activate={activate}
+            key={value}
+            nodes={nodes}
+            indent={indent + 1}
+            isActive={isActive}
+            isCollapsed={isCollapsed}
+            label={label}
+            renderLabel={renderLabel}
+            styles={styles}
+            value={value}
+          />
+        ),
+      )
     : null;
   let item = renderLabel({...props, builtinStyles});
   for (let i = 0; i < indent; ++i) {
@@ -98,6 +100,7 @@ Node.defaultProps = {
       {label}
     </div>
   ),
+  sort: null,
   styles: {},
 };
 
@@ -109,6 +112,7 @@ const propTypesTree = {
   // Enough to fool lint.
   nodes: PropTypes.arrayOf(PropTypes.shape({})),
   renderLabel: PropTypes.func,
+  sort: PropTypes.func,
   styles: PropTypes.shape({
     active: PropTypes.string,
     collapsed: PropTypes.string,
@@ -120,7 +124,7 @@ const propTypesTree = {
   value: PropTypes.string.isRequired,
 };
 
-propTypesTree.nodes = PropTypes.arrayOf(propTypesTree);
+propTypesTree.nodes = PropTypes.arrayOf(PropTypes.shape(propTypesTree));
 
 Node.propTypes = propTypesTree;