honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Eric Overfield 2017-07-21 10:54:12 -07:00 committed by Vesa Juvonen
parent 96936add47
commit 536468b349
6 changed files with 109 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
samples/react-todo-basic/package.json
View File

@ -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"
}
}
}

23
samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.module.scss Normal file
View File

@ -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;
}
}
}

55
samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/ConfigurationView.tsx Normal file
View File

@ -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();
}
}

9
samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewProps.ts Normal file
View File

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

4
samples/react-todo-basic/src/webparts/todo/components/ConfigurationView/IConfigurationViewState.ts Normal file
View File

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

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

@ -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.' />