added base react components with mobx
This commit is contained in:
parent
0d70430c57
commit
70df646e63
|
@ -7046,12 +7046,14 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
@ -7066,17 +7068,20 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
@ -7193,7 +7198,8 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
@ -7205,6 +7211,7 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
@ -7219,6 +7226,7 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
@ -7226,12 +7234,14 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
@ -7250,6 +7260,7 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
@ -7330,7 +7341,8 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
@ -7342,6 +7354,7 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
@ -7463,6 +7476,7 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { RootStore } from "./rootStore";
|
||||
import { observable, action } from "mobx";
|
||||
import { RootStore } from "./RootStore";
|
||||
import { observable, action, computed } from "mobx";
|
||||
|
||||
export enum ApplicationStatus {
|
||||
CreateList = "Create List",
|
||||
|
@ -14,24 +14,41 @@ export interface IFakeItem {
|
|||
|
||||
export class AppStore {
|
||||
|
||||
@observable public status: ApplicationStatus = ApplicationStatus.CreateList;
|
||||
@observable public listTitle: string = null;
|
||||
@observable public items: IFakeItem[] = [];
|
||||
@observable public isLoading: boolean;
|
||||
@observable public status: ApplicationStatus;
|
||||
@observable public listTitle: string;
|
||||
@observable public items: IFakeItem[];
|
||||
|
||||
constructor(private rootStore: RootStore) {
|
||||
this.setInitialState();
|
||||
}
|
||||
|
||||
@action confirmListCreation(listTitle: string) {
|
||||
@action
|
||||
private setInitialState() {
|
||||
this.status = ApplicationStatus.CreateList;
|
||||
this.listTitle = null;
|
||||
this.items = [];
|
||||
this.isLoading = true;
|
||||
}
|
||||
|
||||
@computed
|
||||
public get appStatus(): string {
|
||||
return `The current status is: ${this.status}`;
|
||||
}
|
||||
|
||||
@action
|
||||
public confirmListCreation(listTitle: string) {
|
||||
this.status = ApplicationStatus.CreateItems;
|
||||
this.listTitle = listTitle;
|
||||
}
|
||||
|
||||
@action addListItem(item: IFakeItem) {
|
||||
@action
|
||||
public addListItem(item: IFakeItem) {
|
||||
this.items.push(item);
|
||||
}
|
||||
|
||||
@action confirmItems() {
|
||||
@action
|
||||
public confirmItems() {
|
||||
this.status = ApplicationStatus.Completed;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,16 +1,38 @@
|
|||
import { RootStore } from "./rootStore";
|
||||
import { RootStore } from "./RootStore";
|
||||
import { observable, action, runInAction } from "mobx";
|
||||
|
||||
export class ConfigStore {
|
||||
|
||||
@observable public isLoading: boolean = true;
|
||||
@observable public applicationTitle: string = null;
|
||||
@observable public isLoading: boolean;
|
||||
@observable public allowImportantItems: boolean;
|
||||
@observable public applicationTitle: string;
|
||||
|
||||
constructor(private rootStore: RootStore) {
|
||||
this.setInitialState();
|
||||
|
||||
// Mock REST call for fetching configuration data, 5 seconds
|
||||
setTimeout(() => {
|
||||
this.loadConfigration();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
@action setApplicationTitle(title: string) {
|
||||
@action
|
||||
public setInitialState(): void {
|
||||
this.isLoading = true;
|
||||
this.applicationTitle = null;
|
||||
this.allowImportantItems = false;
|
||||
}
|
||||
|
||||
@action
|
||||
private loadConfigration() {
|
||||
this.isLoading = false;
|
||||
this.applicationTitle = "So cool man";
|
||||
this.allowImportantItems = true;
|
||||
this.rootStore.appStore.isLoading = false;
|
||||
}
|
||||
|
||||
@action
|
||||
public setApplicationTitle(title: string): void {
|
||||
this.applicationTitle = title;
|
||||
}
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
import { ConfigStore } from "./ConfigStore";
|
||||
import { AppStore } from "./AppStore";
|
||||
|
||||
export enum Stores {
|
||||
AppStore = "appStore",
|
||||
|
@ -6,13 +7,14 @@ export enum Stores {
|
|||
}
|
||||
|
||||
export class RootStore {
|
||||
public readonly appStore: any;
|
||||
public readonly configStore: any;
|
||||
public readonly appStore: AppStore;
|
||||
public readonly configStore: ConfigStore;
|
||||
public readonly rootStore: RootStore;
|
||||
|
||||
constructor() {
|
||||
this.rootStore = this;
|
||||
this.configStore = new ConfigStore(this);
|
||||
this.appStore = null;
|
||||
this.appStore = new AppStore(this);
|
||||
}
|
||||
|
||||
}
|
|
@ -1,29 +1,24 @@
|
|||
import { Version } from '@microsoft/sp-core-library';
|
||||
import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import { configure } from "mobx";
|
||||
import * as strings from 'MobxTutorialWebPartStrings';
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-property-pane';
|
||||
|
||||
import * as strings from 'MobxTutorialWebPartStrings';
|
||||
import MobxTutorial from './components/MobxTutorial';
|
||||
import { IMobxTutorialProps } from './components/IMobxTutorialProps';
|
||||
import { configure } from "mobx";
|
||||
configure({ enforceActions: "strict" });
|
||||
import MobxTutorialProvider from './components/MobxTutorialProvider';
|
||||
|
||||
configure({ enforceActions: "always" });
|
||||
|
||||
export interface IMobxTutorialWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class MobxTutorialWebPart extends BaseClientSideWebPart<IMobxTutorialWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IMobxTutorialProps> = React.createElement(
|
||||
MobxTutorial,
|
||||
const element: React.ReactElement<{}> = React.createElement(
|
||||
MobxTutorialProvider,
|
||||
{
|
||||
description: this.properties.description
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
@ -1,24 +1,25 @@
|
|||
import { inject, observer } from 'mobx-react';
|
||||
import * as React from 'react';
|
||||
import styles from './MobxTutorial.module.scss';
|
||||
import { IMobxTutorialProps } from './IMobxTutorialProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import { AppStore } from '../../../stores/AppStore';
|
||||
import { Stores } from '../../../stores/RootStore';
|
||||
import { ProgressIndicator } from './ProgressIndicator';
|
||||
|
||||
export type MobxTutorialStoreProps = {
|
||||
appStore: AppStore;
|
||||
};
|
||||
|
||||
export type MobxTutorialProps = Partial<MobxTutorialStoreProps>;
|
||||
|
||||
@inject(Stores.AppStore)
|
||||
@observer
|
||||
export class MobxTutorial extends React.Component<MobxTutorialProps, {}> {
|
||||
public render(): React.ReactElement<MobxTutorialProps> {
|
||||
const { appStore } = this.props;
|
||||
|
||||
export default class MobxTutorial extends React.Component<IMobxTutorialProps, {}> {
|
||||
public render(): React.ReactElement<IMobxTutorialProps> {
|
||||
return (
|
||||
<div className={ styles.mobxTutorial }>
|
||||
<div className={ styles.container }>
|
||||
<div className={ styles.row }>
|
||||
<div className={ styles.column }>
|
||||
<span className={ styles.title }>Welcome to SharePoint!</span>
|
||||
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
|
||||
<p className={ styles.description }>{escape(this.props.description)}</p>
|
||||
<a href="https://aka.ms/spfx" className={ styles.button }>
|
||||
<span className={ styles.label }>Learn more</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{appStore.isLoading ? "LOADING" : null}
|
||||
<ProgressIndicator></ProgressIndicator>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
import { Provider } from "mobx-react";
|
||||
import * as React from 'react';
|
||||
import { RootStore } from '../../../stores/RootStore';
|
||||
import { MobxTutorial } from './MobxTutorial';
|
||||
|
||||
export default class MobxTutorialProvider extends React.Component<{}, {}> {
|
||||
private readonly dependencies = { rootStore: new RootStore() };
|
||||
|
||||
public render(): React.ReactElement<{}> {
|
||||
return (
|
||||
<Provider {...this.dependencies.rootStore}>
|
||||
<MobxTutorial></MobxTutorial>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
import { inject, observer } from "mobx-react";
|
||||
import * as React from 'react';
|
||||
import { AppStore } from "../../../stores/AppStore";
|
||||
import { Stores } from '../../../stores/RootStore';
|
||||
|
||||
export type ProgressIndicatorStoreProps = {
|
||||
appStore: AppStore;
|
||||
};
|
||||
|
||||
export type ProgressIndicatorOwnProps = {};
|
||||
export type ProgressIndicatorProps = Partial<ProgressIndicatorStoreProps> & ProgressIndicatorOwnProps;
|
||||
|
||||
@inject(Stores.AppStore)
|
||||
@observer
|
||||
export class ProgressIndicator extends React.Component<ProgressIndicatorProps, {}> {
|
||||
public render(): React.ReactElement<ProgressIndicatorProps> {
|
||||
const { appStore } = this.props;
|
||||
|
||||
return (<>{appStore.appStatus}</>);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue