Added SharePoint List Provider (#816)
Added a sharepoint list provider Added logic to use mock for local dev, and new provider for online. Fixed type in 'Servive' classname
This commit is contained in:
parent
09609b9587
commit
cd22efec38
File diff suppressed because it is too large
Load Diff
|
@ -3,9 +3,8 @@
|
|||
"solution": {
|
||||
"name": "react-slide-swiper-client-side-solution",
|
||||
"id": "c7fdd51c-469e-432f-bdde-930294d3a133",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false
|
||||
"version": "1.0.1.0",
|
||||
"includeClientSideAssets": true
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-slide-swiper.sppkg"
|
||||
|
|
|
@ -11,10 +11,15 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.7.0",
|
||||
"@microsoft/sp-core-library": "^1.7.0",
|
||||
"@microsoft/sp-lodash-subset": "1.7.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.7.0",
|
||||
"@microsoft/sp-webpart-base": "1.7.0",
|
||||
"@microsoft/sp-webpart-base": "^1.7.0",
|
||||
"@microsoft/sp-http": "^1.7.0",
|
||||
"@pnp/common": "^1.3.0",
|
||||
"@pnp/logging": "^1.3.0",
|
||||
"@pnp/odata": "^1.3.0",
|
||||
"@pnp/sp": "^1.3.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.4.2",
|
||||
"@types/react-dom": "16.0.5",
|
||||
|
@ -29,7 +34,7 @@
|
|||
"@microsoft/sp-webpart-workbench": "1.7.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2",
|
||||
"ajv": "^6.9.1",
|
||||
"gulp": "~3.9.1",
|
||||
"webpack-bundle-analyzer": "2.9.2"
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
|
@ -8,11 +8,19 @@ import {
|
|||
PropertyPaneToggle,
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import {
|
||||
Environment,
|
||||
EnvironmentType,
|
||||
Version
|
||||
} from '@microsoft/sp-core-library';
|
||||
|
||||
|
||||
import * as strings from 'ReactSlideSwiperWebPartStrings';
|
||||
import ReactSlideSwiper from './components/ReactSlideSwiper';
|
||||
import { IReactSlideSwiperProps } from './components/IReactSlideSwiperProps';
|
||||
import { IListServce } from './services/IListService';
|
||||
import { IListService } from './services/IListService';
|
||||
import { ListMock } from './services/ListMock';
|
||||
import { ListSharePoint } from './services/ListSharePoint';
|
||||
|
||||
export interface IReactSlideSwiperWebPartProps {
|
||||
enableNavigation: boolean;
|
||||
|
@ -25,16 +33,28 @@ export interface IReactSlideSwiperWebPartProps {
|
|||
spaceBetweenSlides: string;
|
||||
enableGrabCursor: boolean;
|
||||
enableLoop: boolean;
|
||||
listName: string;
|
||||
}
|
||||
|
||||
export default class ReactSlideSwiperWebPart extends BaseClientSideWebPart<IReactSlideSwiperWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
var listProvider: IListService;
|
||||
|
||||
//use the mock service if running locally, otherwise use the SharePoint List Service
|
||||
if (Environment.type === EnvironmentType.Local) {
|
||||
listProvider = new ListMock();
|
||||
}
|
||||
else if (Environment.type == EnvironmentType.SharePoint) {
|
||||
listProvider = this.context.serviceScope.consume(ListSharePoint.serviceKey);
|
||||
}
|
||||
|
||||
const element: React.ReactElement<IReactSlideSwiperProps> = React.createElement(
|
||||
ReactSlideSwiper,
|
||||
{
|
||||
listService: new ListMock(),
|
||||
swiperOptions: this.properties
|
||||
listService: listProvider,
|
||||
swiperOptions: this.properties,
|
||||
listName: this.properties.listName
|
||||
}
|
||||
);
|
||||
|
||||
|
@ -67,6 +87,10 @@ export default class ReactSlideSwiperWebPart extends BaseClientSideWebPart<IReac
|
|||
PropertyPaneTextField('slidesPerView', {
|
||||
label: strings.SlidesPerWiew,
|
||||
value: '3'
|
||||
}),
|
||||
PropertyPaneTextField('listName', {
|
||||
label: strings.ListName,
|
||||
value: 'Swiper Content'
|
||||
})
|
||||
]
|
||||
},
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
import { IListServce } from "../services/IListService";
|
||||
import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration } from '@microsoft/sp-http';
|
||||
|
||||
import { IListService } from "../services/IListService";
|
||||
import { IReactSlideSwiperWebPartProps } from "../ReactSlideSwiperWebPart";
|
||||
|
||||
export interface IReactSlideSwiperProps {
|
||||
listService: IListServce;
|
||||
listService: IListService;
|
||||
swiperOptions: IReactSlideSwiperWebPartProps;
|
||||
listName: string;
|
||||
}
|
||||
|
|
|
@ -20,11 +20,12 @@ export default class ReactSlideSwiper extends React.Component<IReactSlideSwiperP
|
|||
|
||||
public componentDidMount(): void {
|
||||
|
||||
this.props.listService.getAll().then((result: Array<ListItem>) => {
|
||||
this.props.listService.getAll(this.props.listName).then((result: Array<ListItem>) => {
|
||||
|
||||
// List items returned from the ListMock so we can
|
||||
// change the state and display them.
|
||||
this.setState({ listItems: result });
|
||||
console.log(this.state.listItems.length);
|
||||
|
||||
// Since we have list items rendered
|
||||
// we can call the swiper and let it
|
||||
|
|
|
@ -16,5 +16,6 @@ define([], function() {
|
|||
"InPixels": "In pixels",
|
||||
"EnableGrabCursor": "Enable grab cursor",
|
||||
"EnableLoop": "Enable loop",
|
||||
"ListName": "SharePoint List Name",
|
||||
}
|
||||
});
|
|
@ -15,6 +15,7 @@ declare interface IReactSlideSwiperWebPartStrings {
|
|||
InPixels: string;
|
||||
EnableGrabCursor: string;
|
||||
EnableLoop: string;
|
||||
ListName:string;
|
||||
}
|
||||
|
||||
declare module 'ReactSlideSwiperWebPartStrings' {
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { ListItem } from "./ListItem";
|
||||
import { SPHttpClient } from "@microsoft/sp-http";
|
||||
|
||||
export interface IListServce {
|
||||
getAll(): Promise<Array<ListItem>>;
|
||||
export interface IListService {
|
||||
getAll(listName:string): Promise<Array<ListItem>>;
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
import { ListItem } from "./ListItem";
|
||||
import { IListServce } from "./IListService";
|
||||
import { IListService } from "./IListService";
|
||||
|
||||
export class ListMock implements IListServce {
|
||||
export class ListMock implements IListService {
|
||||
|
||||
public getAll(): Promise<Array<ListItem>> {
|
||||
return new Promise<Array<ListItem>>((resolve:any) => {
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
import {
|
||||
ServiceKey,
|
||||
ServiceScope,
|
||||
Text
|
||||
} from '@microsoft/sp-core-library';
|
||||
import {
|
||||
SPHttpClient,
|
||||
SPHttpClientResponse
|
||||
} from '@microsoft/sp-http';
|
||||
import { PageContext } from '@microsoft/sp-page-context';
|
||||
|
||||
import { ListItem } from "./ListItem";
|
||||
import { IListService } from "./IListService";
|
||||
|
||||
export class ListSharePoint implements IListService {
|
||||
|
||||
public static readonly serviceKey: ServiceKey<IListService> = ServiceKey.create<IListService>('vrd:IListService', ListSharePoint);
|
||||
private _spHttpClient: SPHttpClient;
|
||||
private _pageContext: PageContext;
|
||||
private _currentWebUrl: string;
|
||||
|
||||
constructor(serviceScope: ServiceScope) {
|
||||
serviceScope.whenFinished(() => {
|
||||
this._spHttpClient = serviceScope.consume(SPHttpClient.serviceKey);
|
||||
|
||||
this._pageContext = serviceScope.consume(PageContext.serviceKey);
|
||||
|
||||
this._currentWebUrl = this._pageContext.web.absoluteUrl;
|
||||
});
|
||||
}
|
||||
|
||||
public getAll(listName:string): Promise<ListItem[]> {
|
||||
const url: string = Text.format("{0}/_api/Lists/getByTitle('{1}')/items?$select=Title,Description,ImageUrl", this._currentWebUrl, listName);
|
||||
|
||||
console.log(url);
|
||||
|
||||
return this._spHttpClient.get(url, SPHttpClient.configurations.v1)
|
||||
.then((response: SPHttpClientResponse) => {
|
||||
return response.json()
|
||||
.then(data => {
|
||||
console.log(data.value);
|
||||
return data.value;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
|
@ -1,31 +1,31 @@
|
|||
{
|
||||
"rulesDirectory": [],
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
},
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json"
|
||||
}
|
||||
"rulesDirectory": [],
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
},
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json"
|
||||
}
|
Loading…
Reference in New Issue