tquinlan92-material-core-ui

A collection of @material-ui/core typescript components

• TreeView allows navigation through a folder and file type structure

  Props

  Prop Name	Type	Description	Purpose
  tags	Array	List of all available folders and tags (at all depths).	Used to determine what folders/tags to display at the current depth
  selectedTags	Array	List of Tag-ids that are currently selected (across all depths).	Used to determine what tags should be marked as selected
  onTagSelectionChange	Func	Callback method to call when a tag is selected or deselected. Should receive an array of all currently-selected Tag-ids.	Used to inform the parent component that the list of selected-Tags has changed.

  Tag List

  Each item in this list contains the folowing props:

  Property	Type	Description
  _id	String	Alphanumeric ID, represents the unique tag or folder.
  name	String	Represents the Tag or Folder
  isFolder	Boolean	If true, means Tag is a Folder of Tags.
  parent	String	If null, means Tag or Folder is at 'Root Level'. If present, identifies the id of the direct parent of the tag or folder.
  ancestors	Array	List of direct ancestors (including Parent)

  Usage

  import { TreeView } from 'tquinlan92-material-core-ui';
  
  class TreeViewDemo extends React.Component<Props & Actions> {
  
      onTagSelectionChange(selectedTags: string[]) {
          alert(selectedTags);
      }
  
      render() {
          const tags =[{
              _id: 'id1',
              name: 'folder1',
              isFolder: true,
              parent: null,
              ancestors: []
          },
          {           
              _id: 'id2',
              name: 'tag2',
              isFolder: false,
              parent: null,
              ancestors: []
          }];
          const selectedTags = ['id1'];
          const treeViewProps = {
              onTagSelectionChange: this.onTagSelectionChange.bind(this),
              tags,
              selectedTags
          };
          return (
              <div>
                  <TreeView {...treeViewProps} />
              </div>
          );
      }
  }