Fix arrow direction, fix sectiongroup order, update picker react version

Author: Linsen Wu

Diff for: package-lock.json

@@ -8,8 +8,8 @@
     "bulma": "^0.4.2",
     "mini-css-extract-plugin": "^0.4.0",
     "onenoteapi": "2.0.6",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2"
+    "react": "16.2.0",
+    "react-dom": "16.2.0"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.0",
@@ -18,8 +18,8 @@
     "@types/history": "^4.5.2",
     "@types/jasmine": "^2.5.51",
     "@types/node": "^7.0.29",
-    "@types/react": "^15.6.15",
-    "@types/react-dom": "^15.5.6",
+    "@types/react": "16.0.38",
+    "@types/react-dom": "16.0.4",
     "@types/sinon": "^2.3.1",
     "@types/webpack": "^2.2.15",
     "@types/webpack-env": "^1.13.0",

Diff for: package.json

@@ -18,8 +18,8 @@ export interface CreateNewNotebookNodeProps extends InnerGlobals {
  * UI.
  */
 export class CreateNewNotebookNode extends React.Component<CreateNewNotebookNodeProps, {}> {
-	constructor() {
-		super();
+	constructor(props: CreateNewNotebookNodeProps) {
+		super(props);
 
 		this.notStartedRenderStrategy = this.notStartedRenderStrategy.bind(this);
 		this.inputRenderStrategy = this.inputRenderStrategy.bind(this);

Diff for: src/components/createNewNotebook/createNewNotebookNode.tsx

@@ -22,8 +22,8 @@ export interface CreateNewSectionNodeProps extends InnerGlobals {
  * UI.
  */
 export class CreateNewSectionNode extends React.Component<CreateNewSectionNodeProps, {}> {
-	constructor() {
-		super();
+	constructor(props: CreateNewSectionNodeProps) {
+		super(props);
 
 		this.notStartedRenderStrategy = this.notStartedRenderStrategy.bind(this);
 		this.inputRenderStrategy = this.inputRenderStrategy.bind(this);

Diff for: src/components/createNewSection/createNewSectionNode.tsx

@@ -67,27 +67,27 @@ export class SharedNotebookRenderStrategy implements ExpandableNodeRenderStrateg
 			];
 		}
 
-		const sectionGroupRenderStrategies = this.notebook.apiProperties.spSectionGroups.map(sectionGroup => new SectionGroupRenderStrategy(sectionGroup, this.globals));
-		const sectionGroups = sectionGroupRenderStrategies.map(renderStrategy =>
-			!!this.globals.callbacks.onSectionSelected || !!this.globals.callbacks.onPageSelected ?
+		const sectionRenderStrategies = this.notebook.apiProperties.spSections.map(section => new SectionRenderStrategy(section, this.globals));
+		const sections = sectionRenderStrategies.map(renderStrategy =>
+			!!this.globals.callbacks.onPageSelected ?
 				<ExpandableNode
 					expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
 					treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
 					id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} /> :
 				<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
 					id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
 
-		const sectionRenderStrategies = this.notebook.apiProperties.spSections.map(section => new SectionRenderStrategy(section, this.globals));
-		const sections = sectionRenderStrategies.map(renderStrategy =>
-			!!this.globals.callbacks.onPageSelected ?
+		const sectionGroupRenderStrategies = this.notebook.apiProperties.spSectionGroups.map(sectionGroup => new SectionGroupRenderStrategy(sectionGroup, this.globals));
+		const sectionGroups = sectionGroupRenderStrategies.map(renderStrategy =>
+			!!this.globals.callbacks.onSectionSelected || !!this.globals.callbacks.onPageSelected ?
 				<ExpandableNode
 					expanded={renderStrategy.isExpanded()} node={renderStrategy} globals={this.globals}
 					treeViewId={Constants.TreeView.id} key={renderStrategy.getId()}
 					id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} /> :
 				<LeafNode node={renderStrategy} treeViewId={Constants.TreeView.id} key={renderStrategy.getId()} globals={this.globals}
 					id={renderStrategy.getId()} level={childrenLevel} ariaSelected={renderStrategy.isAriaSelected()} />);
 
-		return [...sectionGroups, ...sections];
+		return [...sections, ...sectionGroups];
 	}
 
 	isExpanded(): boolean {

Diff for: src/components/sharedNotebookRenderStrategy.tsx

@@ -37,8 +37,8 @@ export class CreateEntityNode extends React.Component<CreateEntityNodeProps, Cre
 	private inputRef: HTMLInputElement;
 	private componentIsMounted: boolean;
 
-	constructor() {
-		super();
+	constructor(props: CreateEntityNodeProps) {
+		super(props);
 		this.state = this.defaultState();
 
 		this.setWrapperRef = this.setWrapperRef.bind(this);

Diff for: src/components/treeView/createEntityNode.tsx

@@ -11,7 +11,7 @@ export interface LocalizedComponentProps {
  */
 export class LocalizedComponent extends React.Component<LocalizedComponentProps, {}> {
 	constructor(props: LocalizedComponentProps) {
-		super();
+		super(props);
 		Strings.setOverrides(props.stringOverrides);
 	}
 

Diff for: src/localizedComponent.tsx

@@ -63,9 +63,9 @@ svg.spinner {
 		.chevron-icon {
 			transition-duration: 0.3s;
 			transition-property: transform;
-			transform: rotate(180deg);
 
 			svg {
+				transform: rotate(180deg);
 				width: 0.5rem;
 			}
 

Diff for: src/oneNotePicker.scss

@@ -17,8 +17,8 @@ export interface OneNoteSingleNotebookDropdownProps extends OneNoteSingleNoteboo
 export class OneNoteSingleNotebookDropdown extends React.Component<OneNoteSingleNotebookDropdownProps, OneNoteSingleNotebookDropdownState> {
 	private wrapperRef: Node;
 
-	constructor() {
-		super();
+	constructor(props: OneNoteSingleNotebookDropdownProps) {
+		super(props);
 		this.state = {
 			popupVisible: false
 		};