Merge branch 'dev' of https://github.com/pnp/sp-dev-fx-controls-react into dev

Author: AJIXuMuK

README.md

@@ -1,5 +1,3 @@
-![SharePoint Patterns and Practices](https://devofficecdn.azureedge.net/media/Default/PnP/sppnp.png)
-
 # SharePoint Framework React Controls
 
 This is a open source library that shares a set of reusable React control that can be used in your SharePoint Framework solutions.

docs/documentation/docs/controls/Progress.md

@@ -63,8 +63,8 @@ Now, in a component, where `Progress` is used you can have code as below:
 
 ```TypeScript
 export interface IYourComponentState {
-  actions: IProgressAction[];
-  currentActionIndex?: number;
+  progressActions: IProgressAction[];
+  currentProgressActionIndex?: number;
   // other state properties
 }
 
@@ -75,7 +75,7 @@ export class YourComponent extends React.Component<IYourComponentProps, IYourCom
 
   private _initActions() {
     this.setState({
-      actions: [
+      progressActions: [
         new FirstAction(),
         new SecondAction()
       ]
@@ -84,7 +84,7 @@ export class YourComponent extends React.Component<IYourComponentProps, IYourCom
 
   private async _execute() {
     for (let i = 0; i <= this.state.actions.length; i++) {
-      this.setState(currentActionIndex: i);
+      this.setState(currentProgressActionIndex: i);
 
       if (i < this.state.actions.length) {
         await this.state.actions[i].execute();

src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx

@@ -166,7 +166,9 @@ export class FolderExplorer extends React.Component<IFolderExplorerProps, IFolde
         }
       } else {
         // library/folder level, get folders
-        this._allFolders = await this._spService.GetFolders(siteAbsoluteUrl, folder.ServerRelativeUrl);
+        const orderBy = this.props.orderby !== undefined ? this.props.orderby : 'Name';
+        const orderAscending = this.props.orderAscending !== undefined ? this.props.orderAscending : true;
+        this._allFolders = await this._spService.GetFolders(siteAbsoluteUrl, folder.ServerRelativeUrl, orderBy, orderAscending);
       }
       this.setState({ folders: this._allFolders, selectedFolder: folder, foldersLoading: false });
 

src/controls/folderExplorer/FolderExplorer/IFolderExplorerProps.ts

@@ -46,6 +46,16 @@ export interface IFolderExplorerProps {
    */
   hiddenFilterBox?: boolean;
 
+  /**
+   * The name of the field on which to sort. Default: Name. For list item properties, use ListItemAllFields/Title, ListItemAllFields/Created, etc
+   */
+  orderby?: string;
+
+  /**
+   * If set to true, results will be sorted in ascending order. Otherwise, descending will be used as default
+   */
+  orderAscending?: boolean;
+
   /**
    * Callback function called after a folder is selected
    * @argument folder The selected folder

src/services/FolderExplorerService.ts

@@ -59,21 +59,21 @@ export class FolderExplorerService implements IFolderExplorerService {
  * @param webAbsoluteUrl - the url of the target site
  * @param folderRelativeUrl - the relative url of the folder
  */
-  public GetFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string): Promise<IFolder[]> => {
-    return this._getFolders(webAbsoluteUrl, folderRelativeUrl);
+  public GetFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise<IFolder[]> => {
+    return this._getFolders(webAbsoluteUrl, folderRelativeUrl, orderby, orderAscending);
   }
 
   /**
    * Get folders within a given library or sub folder
    * @param webAbsoluteUrl - the url of the target site
    * @param folderRelativeUrl - the relative url of the folder
    */
-  private _getFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string): Promise<IFolder[]> => {
+  private _getFolders = async (webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise<IFolder[]> => {
     let results: IFolder[] = [];
     try {
       const web = Web(webAbsoluteUrl);
       folderRelativeUrl = folderRelativeUrl.replace(/\'/ig, "''");
-      let foldersResult: IFolder[] = await web.getFolderByServerRelativePath(folderRelativeUrl).folders.select('Name', 'ServerRelativeUrl').orderBy('Name').get();
+      let foldersResult: IFolder[] = await web.getFolderByServerRelativePath(folderRelativeUrl).folders.select('Name', 'ServerRelativeUrl').orderBy(orderby, orderAscending).get();
       results = foldersResult.filter(f => f.Name != "Forms");
     } catch (error) {
       console.error('Error loading folders', error);

src/services/IFolderExplorerService.ts

@@ -24,7 +24,7 @@ export interface IFolderExplorerService {
   * @param webAbsoluteUrl - the url of the target site
   * @param folderRelativeUrl - the relative url of the folder
   */
-  GetFolders(webAbsoluteUrl: string, folderRelativeUrl: string): Promise<IFolder[]>;
+  GetFolders(webAbsoluteUrl: string, folderRelativeUrl: string, orderby: string, orderAscending: boolean): Promise<IFolder[]>;
 
   /**
   * Create a new folder

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -775,31 +775,31 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
 
         <AccessibleAccordion allowZeroExpanded>
-        <AccordionItem key={"Headding 1"}>
-          <AccordionItemHeading>
-            <AccordionItemButton>{"Accordion Item Heading 1"}</AccordionItemButton>
-          </AccordionItemHeading>
-          <AccordionItemPanel>
-           <div style={{margin: 20}}>
-           <h2>Content Heading 1</h2>
-            <Text variant={"mediumPlus"}>Text sample  </Text>
+          <AccordionItem key={"Headding 1"}>
+            <AccordionItemHeading>
+              <AccordionItemButton>{"Accordion Item Heading 1"}</AccordionItemButton>
+            </AccordionItemHeading>
+            <AccordionItemPanel>
+              <div style={{ margin: 20 }}>
+                <h2>Content Heading 1</h2>
+                <Text variant={"mediumPlus"}>Text sample  </Text>
 
-            </div>
-          </AccordionItemPanel>
-        </AccordionItem>
-        <AccordionItem key={"Headding 2"}>
-          <AccordionItemHeading>
-            <AccordionItemButton>Accordion Item Heading 2</AccordionItemButton>
-          </AccordionItemHeading>
-          <AccordionItemPanel>
-            <div style={{margin: 20}}>
-            <h2>Content Heading 2</h2>
-            <Text variant={"mediumPlus"}>Text </Text>
-            <TextField></TextField>
-            </div>
-          </AccordionItemPanel>
-        </AccordionItem>
-      </AccessibleAccordion>
+              </div>
+            </AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem key={"Headding 2"}>
+            <AccordionItemHeading>
+              <AccordionItemButton>Accordion Item Heading 2</AccordionItemButton>
+            </AccordionItemHeading>
+            <AccordionItemPanel>
+              <div style={{ margin: 20 }}>
+                <h2>Content Heading 2</h2>
+                <Text variant={"mediumPlus"}>Text </Text>
+                <TextField></TextField>
+              </div>
+            </AccordionItemPanel>
+          </AccordionItem>
+        </AccessibleAccordion>
 
 
 
@@ -1437,7 +1437,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             //accepts={[".gif", ".jpg", ".jpeg", ".bmp", ".dib", ".tif", ".tiff", ".ico", ".png", ".jxr", ".svg"]}
             buttonLabel="Add File"
 
-            buttonIconProps={{iconName: 'Add', styles:{root:{fontSize: 42}}}}
+            buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}
             onSave={this._onFilePickerSave}
             onChange={(filePickerResult: IFilePickerResult) => { console.log(filePickerResult.fileName); }}
             context={this.props.context}
@@ -1517,6 +1517,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             }}
             onSelect={this._onFolderSelect}
             canCreateFolders={true}
+            orderby='Name' //'ListItemAllFields/Created'
+            orderAscending={true}
           />
         </div>
 
@@ -1531,8 +1533,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onExpandCollapse={this.onExpandCollapseTree}
             onSelect={this.onItemSelected}
             defaultExpandedChildren={true}
-            //expandToSelected={true}
-            // onRenderItem={this.renderCustomTreeItem}
+          //expandToSelected={true}
+          // onRenderItem={this.renderCustomTreeItem}
           />
           <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>