From 536468b349d3bbcc6ccc2d7d60e071a1cf931d15 Mon Sep 17 00:00:00 2001 From: Eric Overfield Date: Fri, 21 Jul 2017 10:54:12 -0700 Subject: [PATCH] React Todo Basic upgrade to release 1.1.0, replace removed Placeholder component with custom Component (#260) --- samples/react-todo-basic/package.json | 30 +++++----- .../ConfigurationView.module.scss | 23 ++++++++ .../ConfigurationView/ConfigurationView.tsx | 55 +++++++++++++++++++ .../IConfigurationViewProps.ts | 9 +++ .../IConfigurationViewState.ts | 4 ++ .../TodoContainer/TodoContainer.tsx | 8 +-- 6 files changed, 109 insertions(+), 20 deletions(-) create mode 100644 samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.module.scss create mode 100644 samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.tsx create mode 100644 samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewProps.ts create mode 100644 samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewState.ts diff --git a/samples/react-todo-basic/package.json b/samples/react-todo-basic/package.json index 6b04b43e2..8920f2b25 100644 --- a/samples/react-todo-basic/package.json +++ b/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.0.0", - "@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", + "@microsoft/sp-core-library": "~1.1.0", + "@microsoft/sp-webpart-base": "~1.1.1", "@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-module-interfaces": "~1.0.0", - "@microsoft/sp-webpart-workbench": "~1.0.0", + "@microsoft/sp-build-web": "~1.1.0", + "@microsoft/sp-module-interfaces": "~1.1.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" } -} +} \ No newline at end of file diff --git a/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.module.scss b/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.module.scss new file mode 100644 index 000000000..6f123eeaa --- /dev/null +++ b/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; + } + } + } \ No newline at end of file diff --git a/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.tsx b/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.tsx new file mode 100644 index 000000000..fa2eed024 --- /dev/null +++ b/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{ + + 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 ( +
+
+
+
+
+ {this.props.iconText}
+ + +
+
+
{this.props.description}
+
+ +
+
+
+ ); + } + + private _handleConfigureButtonClick(event?: React.MouseEvent) { + this.props.onConfigure(); + } +} diff --git a/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewProps.ts b/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewProps.ts new file mode 100644 index 000000000..d8148d7c8 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewState.ts b/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewState.ts new file mode 100644 index 000000000..ad25a057b --- /dev/null +++ b/samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewState.ts @@ -0,0 +1,4 @@ +interface IConfigurationViewState { +} + +export default IConfigurationViewState; \ No newline at end of file diff --git a/samples/react-todo-basic/src/webparts/todo/components/TodoContainer/TodoContainer.tsx b/samples/react-todo-basic/src/webparts/todo/components/TodoContainer/TodoContainer.tsx index 7fe35ca28..62503b3cc 100644 --- a/samples/react-todo-basic/src/webparts/todo/components/TodoContainer/TodoContainer.tsx +++ b/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 { this._showPlaceHolder && this.props.webPartDisplayMode === DisplayMode.Edit && - + onConfigure={ this._configureWebPart } /> } { this._showPlaceHolder && this.props.webPartDisplayMode === DisplayMode.Read && -