New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Todo Basic upgrade to release 1.1.0, replace removed Placeholde… #260

Merged
merged 1 commit into from Jul 21, 2017
Jump to file or symbol
Failed to load files and symbols.
+108 −19
Diff settings

Always

Just for now

React Todo Basic upgrade to release 1.1.0, replace removed Placeholde…

…r component with custom Component
  • Loading branch information...
eoverfield committed Jul 13, 2017
commit cb0bc933bb1d58f73b2ef467622cd8517e98295d
@@ -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",
"@microsoft/sp-core-library": "~1.1.0",
"@microsoft/sp-webpart-base": "~1.1.1",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"react": "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-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"
"@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"
}
}
}
@@ -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;
}
}
}
@@ -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();
}
}
@@ -0,0 +1,9 @@
interface IConfigurationViewProps {
icon?: string;
iconText?: string;
description?: string;
buttonLabel?: string;
onConfigure?: () => void;
}
export default IConfigurationViewProps;
@@ -0,0 +1,4 @@
interface IConfigurationViewState {
}
export default IConfigurationViewState;
@@ -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.' />