@instructure/ui-tree-browser 7.10.0 → 7.14.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.14.0](https://github.com/instructure/instructure-ui/compare/v7.13.0...v7.14.0) (2021-12-01)
+
+### Features
+
+- **ui-tree-browser:** add `sortOrder` property to TreeBrowser component ([9c5d32d](https://github.com/instructure/instructure-ui/commit/9c5d32d))
+
+# [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
+# [7.12.0](https://github.com/instructure/instructure-ui/compare/v7.11.0...v7.12.0) (2021-10-15)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
+# [7.11.0](https://github.com/instructure/instructure-ui/compare/v7.10.0...v7.11.0) (2021-09-17)
+
+**Note:** Version bump only for package @instructure/ui-tree-browser
+
 # [7.10.0](https://github.com/instructure/instructure-ui/compare/v7.9.0...v7.10.0) (2021-08-27)
 
 **Note:** Version bump only for package @instructure/ui-tree-browser

package/es/TreeBrowser/index.js

@@ -276,7 +276,7 @@ var TreeBrowser = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
         return _this3.getCollectionProps(_this3.props.collections[id]);
       }).filter(function (collection) {
         return collection != null;
-      });
+      }).sort(this.props.sortOrder);
     }
   }, {
     key: "getItems",
@@ -289,7 +289,7 @@ var TreeBrowser = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
           return _objectSpread({}, _this4.props.items[id]);
         }).filter(function (item) {
           return item != null;
-        });
+        }).sort(this.props.sortOrder);
       } else {
         return [];
       }
@@ -322,7 +322,7 @@ var TreeBrowser = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
     value: function renderRoot() {
       var _this5 = this;
 
-      return this.collections.map(function (collection, i) {
+      return this.collections.sort(this.props.sortOrder).map(function (collection, i) {
         return /*#__PURE__*/React.createElement(TreeCollection, Object.assign({
           key: i
         }, pickProps(_this5.props, TreeCollection.propTypes), _this5.getCollectionProps(collection), {
@@ -439,7 +439,12 @@ var TreeBrowser = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
   /**
    * An optional label to assist visually impaired users
    */
-  treeLabel: PropTypes.string
+  treeLabel: PropTypes.string,
+
+  /**
+   * An optional compare function to specify order of the collections and the items
+   */
+  sortOrder: PropTypes.func
 }, _class2.defaultProps = {
   size: 'medium',
   variant: 'folderTree',
@@ -455,6 +460,9 @@ var TreeBrowser = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cl
   onItemClick: function onItemClick(item) {},
   onCollectionClick: function onCollectionClick(id, collection) {},
   onCollectionToggle: function onCollectionToggle(collection) {},
+  sortOrder: function sortOrder(obj1, obj2) {
+    return 0;
+  },
   rootId: void 0,
   expanded: void 0,
   treeLabel: void 0

package/lib/TreeBrowser/index.js

@@ -280,7 +280,7 @@ var TreeBrowser = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
         return _this3.getCollectionProps(_this3.props.collections[id]);
       }).filter(function (collection) {
         return collection != null;
-      });
+      }).sort(this.props.sortOrder);
     }
   }, {
     key: "getItems",
@@ -293,7 +293,7 @@ var TreeBrowser = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
           return (0, _objectSpread2.default)({}, _this4.props.items[id]);
         }).filter(function (item) {
           return item != null;
-        });
+        }).sort(this.props.sortOrder);
       } else {
         return [];
       }
@@ -326,7 +326,7 @@ var TreeBrowser = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
     value: function renderRoot() {
       var _this5 = this;
 
-      return this.collections.map(function (collection, i) {
+      return this.collections.sort(this.props.sortOrder).map(function (collection, i) {
         return /*#__PURE__*/_react.default.createElement(_index.TreeCollection, Object.assign({
           key: i
         }, (0, _pickProps.pickProps)(_this5.props, _index.TreeCollection.propTypes), _this5.getCollectionProps(collection), {
@@ -442,7 +442,12 @@ var TreeBrowser = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
   /**
    * An optional label to assist visually impaired users
    */
-  treeLabel: _propTypes.default.string
+  treeLabel: _propTypes.default.string,
+
+  /**
+   * An optional compare function to specify order of the collections and the items
+   */
+  sortOrder: _propTypes.default.func
 }, _class2.defaultProps = {
   size: 'medium',
   variant: 'folderTree',
@@ -458,6 +463,9 @@ var TreeBrowser = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.them
   onItemClick: function onItemClick(item) {},
   onCollectionClick: function onCollectionClick(id, collection) {},
   onCollectionToggle: function onCollectionToggle(collection) {},
+  sortOrder: function sortOrder(obj1, obj2) {
+    return 0;
+  },
   rootId: void 0,
   expanded: void 0,
   treeLabel: void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tree-browser",
-  "version": "7.10.0",
+  "version": "7.14.0",
   "description": "A component for displaying a hierarchical view of information",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -23,19 +23,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.10.0",
-    "@instructure/ui-test-locator": "^7.10.0",
-    "@instructure/ui-test-utils": "^7.10.0"
+    "@instructure/ui-babel-preset": "^7.14.0",
+    "@instructure/ui-test-locator": "^7.14.0",
+    "@instructure/ui-test-utils": "^7.14.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/ui-icons": "^7.10.0",
-    "@instructure/ui-img": "^7.10.0",
-    "@instructure/ui-prop-types": "^7.10.0",
-    "@instructure/ui-react-utils": "^7.10.0",
-    "@instructure/ui-testable": "^7.10.0",
-    "@instructure/ui-themeable": "^7.10.0",
-    "@instructure/ui-utils": "^7.10.0",
+    "@instructure/ui-icons": "^7.14.0",
+    "@instructure/ui-img": "^7.14.0",
+    "@instructure/ui-prop-types": "^7.14.0",
+    "@instructure/ui-react-utils": "^7.14.0",
+    "@instructure/ui-testable": "^7.14.0",
+    "@instructure/ui-themeable": "^7.14.0",
+    "@instructure/ui-utils": "^7.14.0",
     "classnames": "^2",
     "keycode": "^2",
     "prop-types": "^15"

package/src/TreeBrowser/README.md

@@ -338,6 +338,83 @@ class Example extends React.Component {
 render(<Example/>)
 ```
 
+### Change the order of appearance of items and collection
+
+By default, the order of collections and items depend on the order of `collections` and `items` array. We can override it by providing a `sortOrder` comparison function.
+
+---
+
+**NOTE**
+
+This works with all collections and items of the TreeBrowser.
+
+---
+
+```js
+---
+example: true
+render: false
+---
+class Example extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      sorted: false
+    }
+  }
+
+  toogleSort = (event) => { this.setState({ sorted: !this.state.sorted }) }
+
+  render () {
+    return (
+      <>
+        <View display="block" margin="none none medium">
+          <FormFieldGroup description="Turn of/off sorting">
+            <Checkbox
+              checked={this.state.sorted}
+              label="Sort"
+              onChange={this.toogleSort}
+            />
+          </FormFieldGroup>
+        </View>
+        <TreeBrowser
+          size="medium"
+          collections={{
+            1: {
+              id: 1,
+              name: "Assignments",
+              collections: [3,2],
+              items: [3],
+              descriptor: "Class Assignments"
+            },
+            2: { id: 2, name: "English Assignments", collections: [4], items: [] },
+            3: { id: 3, name: "Math Assignments", collections: [5], items: [2,1] },
+            4: { id: 4, name: "Reading Assignments", collections: [], items: [4] },
+            5: { id: 5, name: "Advanced Math Assignments", items: [5]}
+          }}
+          items={{
+            1: { id: 1, name: "Addition Worksheet" },
+            2: { id: 2, name: "Subtraction Worksheet" },
+            3: { id: 3, name: "General Questions" },
+            4: { id: 4, name: "Vogon Poetry" },
+            5: { id: 5, name: "Bistromath", descriptor: "Explain the Bistromathic Drive" }
+          }}
+          defaultExpanded={[1, 3]}
+          rootId={1}
+          sortOrder={
+            this.state.sorted
+              ? (a,b)=>{ return (a.name).localeCompare(b.name) }
+              : (a,b) => { return 0 }
+          }
+        />
+      </>
+    )
+  }
+}
+render(<Example/>)
+```
+
 ### showRootCollection
 
 The `showRootCollection` prop sets whether the root collection (specified in `rootId` prop) is displayed or to begin with its immediate sub-collections and items instead. It defaults to `true`.

package/src/TreeBrowser/index.js

@@ -111,7 +111,11 @@ class TreeBrowser extends Component {
     /**
      * An optional label to assist visually impaired users
      */
-    treeLabel: PropTypes.string
+    treeLabel: PropTypes.string,
+    /**
+     * An optional compare function to specify order of the collections and the items
+     */
+    sortOrder: PropTypes.func
   }
 
   static defaultProps = {
@@ -127,6 +131,9 @@ class TreeBrowser extends Component {
     onItemClick: function (item) {},
     onCollectionClick: function (id, collection) {},
     onCollectionToggle: function (collection) {},
+    sortOrder: function (obj1, obj2) {
+      return 0
+    },
     rootId: undefined,
     expanded: undefined,
     treeLabel: undefined
@@ -326,6 +333,7 @@ class TreeBrowser extends Component {
     return collections
       .map((id) => this.getCollectionProps(this.props.collections[id]))
       .filter((collection) => collection != null)
+      .sort(this.props.sortOrder)
   }
 
   getItems(collection) {
@@ -337,6 +345,7 @@ class TreeBrowser extends Component {
           return { ...this.props.items[id] }
         })
         .filter((item) => item != null)
+        .sort(this.props.sortOrder)
     } else {
       return []
     }
@@ -371,20 +380,22 @@ class TreeBrowser extends Component {
   }
 
   renderRoot() {
-    return this.collections.map((collection, i) => (
-      <TreeCollection
-        key={i}
-        {...pickProps(this.props, TreeCollection.propTypes)}
-        {...this.getCollectionProps(collection)}
-        selection={this.state.selection}
-        onItemClick={this.handleItemClick}
-        onCollectionClick={this.handleCollectionClick}
-        onKeyDown={this.handleKeyDown}
-        numChildren={this.collections.length}
-        level={1}
-        position={1}
-      />
-    ))
+    return this.collections
+      .sort(this.props.sortOrder)
+      .map((collection, i) => (
+        <TreeCollection
+          key={i}
+          {...pickProps(this.props, TreeCollection.propTypes)}
+          {...this.getCollectionProps(collection)}
+          selection={this.state.selection}
+          onItemClick={this.handleItemClick}
+          onCollectionClick={this.handleCollectionClick}
+          onKeyDown={this.handleKeyDown}
+          numChildren={this.collections.length}
+          level={1}
+          position={1}
+        />
+      ))
   }
 
   render() {

package/types/index.d.ts

@@ -69,6 +69,10 @@ export interface TreeBrowserProps {
      * An optional label to assist visually impaired users
      */
     treeLabel?: string;
+    /**
+     * An optional compare function to specify order of the collections and the items
+     */
+    sortOrder?: (...args: any[])=>any;
 }
 
 export class TreeBrowser extends React.Component<TreeBrowserProps, any> {