React Todo Basic upgrade to release 1.1.0, replace removed Placeholder component with custom Component (#260)

samples/react-todo-basic/package.json

@@ -1,29 +1,27 @@
 {
   "name": "react-todo-basic",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.1.0",
-    "@microsoft/sp-core-library": "~1.0.0",
+    "@microsoft/sp-webpart-base": "~1.1.1",
-    "@microsoft/sp-webpart-base": "~1.0.0",
-    "@types/immutability-helper": "^2.0.15",
-    "@types/react": "0.14.46",
-    "@types/react-addons-shallow-compare": "0.14.17",
-    "@types/react-addons-test-utils": "0.14.15",
-    "@types/react-addons-update": "0.14.14",
-    "@types/react-dom": "0.14.18",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
-    "immutability-helper": "^2.2.0",
     "react": "15.4.2",
-    "react-dom": "15.4.2"
+    "react-dom": "15.4.2",
+    "@types/react": "0.14.46",
+    "@types/react-dom": "0.14.18",
+    "@types/react-addons-shallow-compare": "0.14.17",
+    "@types/react-addons-update": "0.14.14",
+    "@types/react-addons-test-utils": "0.14.15",
+    "immutability-helper": "^2.2.0"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.0.1",
+    "@microsoft/sp-build-web": "~1.1.0",
-    "@microsoft/sp-module-interfaces": "~1.0.0",
+    "@microsoft/sp-module-interfaces": "~1.1.0",
-    "@microsoft/sp-webpart-workbench": "~1.0.0",
+    "@microsoft/sp-webpart-workbench": "~1.1.0",
     "gulp": "~3.9.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0"
@@ -33,4 +31,4 @@
     "clean": "gulp clean",
     "test": "gulp test"
   }
-}
+}

samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.module.scss

@@ -0,0 +1,23 @@
+.configurationView {
+    display: table;
+
+    .textField {
+      display: table-cell;
+      width: 100%;
+
+      input {
+        height: 32px;
+        min-width: 80px;
+      }
+    }
+    .configureButtonCell {
+      display: table-cell;
+      vertical-align: top;
+
+      .configureButton {
+        margin-left: 10px;
+        white-space: nowrap;
+        height: 32px;
+      }
+    }
+  }

samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+  TextField,
+  Button,
+  ButtonType
+} from 'office-ui-fabric-react';
+import styles from './ConfigurationView.module.scss';
+import IConfigurationViewState from './IConfigurationViewState';
+import IConfigurationViewProps from './IConfigurationViewProps';
+
+export default class ConfigurationView extends React.Component<IConfigurationViewProps, IConfigurationViewState>{
+
+  private _placeHolderText: string = 'Enter your todo';
+
+  constructor(props: IConfigurationViewProps) {
+    super(props);
+
+    this.state = {
+      inputValue: ''
+    };
+
+    this._handleConfigureButtonClick = this._handleConfigureButtonClick.bind(this);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="Placeholder">
+          <div className="Placeholder-container ms-Grid">
+              <div className="Placeholder-head ms-Grid-row">
+                  <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
+                  <div className="Placeholder-headContainer ms-Grid-col ms-u-sm12 ms-u-md6">
+                    <i className={"Placeholder-icon ms-fontSize-su ms-Icon " + (this.props.icon)}></i><span className="Placeholder-text ms-fontWeight-light ms-fontSize-xxl">{this.props.iconText}</span></div>
+
+                    
+                  <div className="ms-Grid-col ms-u-hiddenSm ms-u-md3"></div>
+              </div>
+              <div className="Placeholder-description ms-Grid-row"><span className="Placeholder-descriptionText">{this.props.description}</span></div>
+              <div className="Placeholder-description ms-Grid-row">
+                  <Button
+                    className={ styles.configureButton }
+                    buttonType={ ButtonType.primary }
+                    ariaLabel={ this.props.buttonLabel }
+                    onClick={this._handleConfigureButtonClick}>
+                    {this.props.buttonLabel}
+                  </Button>
+              </div>
+          </div>
+      </div>
+    );
+  }
+
+  private _handleConfigureButtonClick(event?: React.MouseEvent<HTMLButtonElement>) {
+    this.props.onConfigure();
+  }
+}

samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewProps.ts

@@ -0,0 +1,9 @@
+interface IConfigurationViewProps {
+  icon?: string;
+  iconText?: string;
+  description?: string;
+  buttonLabel?: string;
+  onConfigure?: () => void;
+}
+
+export default IConfigurationViewProps;

samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewState.ts

@@ -0,0 +1,4 @@
+interface IConfigurationViewState {
+}
+
+export default IConfigurationViewState;

samples/react-todo-basic/src/webparts/todo/components/TodoContainer/TodoContainer.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { DisplayMode } from '@microsoft/sp-core-library';
-import { Placeholder } from '@microsoft/sp-webpart-base';
 import { Fabric } from 'office-ui-fabric-react';
 import TodoForm from '../TodoForm/TodoForm';
 import styles from './TodoContainer.module.scss';
 import ITodoItem from '../../models/ITodoItem';
+import ConfigurationView from '../ConfigurationView/ConfigurationView';
 import TodoList from '../TodoList/TodoList';
 import ITodoContainerProps from './ITodoContainerProps';
 import ITodoContainerState from './ITodoContainerState';
@@ -68,15 +68,15 @@ export default class Todo extends React.Component<ITodoContainerProps, ITodoCont
     return (
       <Fabric>
         { this._showPlaceHolder && this.props.webPartDisplayMode === DisplayMode.Edit &&
-          <Placeholder
+          <ConfigurationView
             icon={ 'ms-Icon--Edit' }
             iconText='Todos'
             description='Get things done. Organize and share your teams to-do items with your team.'
             buttonLabel='Configure'
-            onAdd={ this._configureWebPart }  />
+            onConfigure={ this._configureWebPart }  />
         }
         { this._showPlaceHolder && this.props.webPartDisplayMode === DisplayMode.Read &&
-          <Placeholder
+          <ConfigurationView
             icon={ 'ms-Icon--Edit' }
             iconText='Todos'
             description='Get things done. Organize and share your teams to-do items with your team. Edit this web part to start managing to-dos.' />