React twitter (#1118)
* React Twitter Timeline web part * typo in readme
This commit is contained in:
Alex Terentiev
GitHub
parent
cead35f5db
commit
d7d473f3ee
|
|
@ -0,0 +1,25 @@
|
||||||
|
# EditorConfig helps developers define and maintain consistent
|
||||||
|
# coding styles between different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
|
||||||
|
[*]
|
||||||
|
|
||||||
|
# change these settings to your own preference
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# we recommend you to keep these unchanged
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
[{package,bower}.json]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"isCreatingSolution": true,
|
||||||
|
"environment": "spo",
|
||||||
|
"version": "1.10.0",
|
||||||
|
"libraryName": "react-twitter",
|
||||||
|
"libraryId": "8c0ef02c-7f7d-4600-9ed0-b7620062c4ef",
|
||||||
|
"packageManager": "npm",
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"componentType": "webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
# React Twitter Timeline
|
||||||
|
|
||||||
|
Sample web part to display Twitter timeline
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||||
|
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-twitter-client-side-solution|[AJIXuMuK](https://github.com/AJIXuMuK)
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.0|January 20, 2020|Initial release
|
||||||
|
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
|
* clone this repo
|
||||||
|
* move to right folder
|
||||||
|
* in the command line run:
|
||||||
|
* `npm install`
|
||||||
|
* `gulp bundle --ship`
|
||||||
|
* `gulp package-solution --ship`
|
||||||
|
* from the _sharepoint/solution_ folder, deploy the .sppkg file to the App catalog in your tenant
|
||||||
|
* in the site where you want to test this solution
|
||||||
|
* add the app named _page-sections-navigation-client-side-solution_
|
||||||
|
* edit a page
|
||||||
|
* add _Page Sections Navigation_ web part
|
||||||
|
* add as much _Page Sections Navigation Anchor_ web parts as you want - each anchor adds an item to the navigation
|
||||||
|
* configure web parts
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
This sample illustrates how to use [react-twitter-embed](https://www.npmjs.com/package/react-twitter-embed) module to display Twitter timeline of specific profile, likes, list, collection or url.
|
||||||
|
It also uses [PnP React Controls](https://github.com/SharePoint/sp-dev-fx-controls-react) and [PnP Property Controls](https://github.com/SharePoint/sp-dev-fx-property-controls) for rich web part and property pane components.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"twitter-feed-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/twitterFeed/TwitterFeedWebPart.js",
|
||||||
|
"manifest": "./src/webparts/twitterFeed/TwitterFeedWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {},
|
||||||
|
"localizedResources": {
|
||||||
|
"TwitterFeedWebPartStrings": "lib/webparts/twitterFeed/loc/{locale}.js",
|
||||||
|
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
|
||||||
|
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-twitter",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-twitter-client-side-solution",
|
||||||
|
"id": "8c0ef02c-7f7d-4600-9ed0-b7620062c4ef",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"skipFeatureDeployment": true,
|
||||||
|
"isDomainIsolated": false
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-twitter.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
|
||||||
|
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
|
|
||||||
|
build.initialize(require('gulp'));
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"name": "react-twitter",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "1.10.0",
|
||||||
|
"@microsoft/sp-lodash-subset": "1.10.0",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
|
||||||
|
"@microsoft/sp-property-pane": "1.10.0",
|
||||||
|
"@microsoft/sp-webpart-base": "1.10.0",
|
||||||
|
"@pnp/spfx-controls-react": "1.16.0",
|
||||||
|
"@pnp/spfx-property-controls": "1.16.0",
|
||||||
|
"@types/es6-promise": "0.0.33",
|
||||||
|
"@types/react": "16.8.8",
|
||||||
|
"@types/react-dom": "16.8.3",
|
||||||
|
"@types/webpack-env": "1.13.1",
|
||||||
|
"office-ui-fabric-react": "5.131.0",
|
||||||
|
"react": "16.8.5",
|
||||||
|
"react-dom": "16.8.5",
|
||||||
|
"react-twitter-embed": "^2.0.4"
|
||||||
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"@types/react": "16.8.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "1.10.0",
|
||||||
|
"@microsoft/sp-tslint-rules": "1.10.0",
|
||||||
|
"@microsoft/sp-module-interfaces": "1.10.0",
|
||||||
|
"@microsoft/sp-webpart-workbench": "1.10.0",
|
||||||
|
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||||
|
"gulp": "~3.9.1",
|
||||||
|
"@types/chai": "3.4.34",
|
||||||
|
"@types/mocha": "2.2.38",
|
||||||
|
"ajv": "~5.2.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
export type SourceType = 'profile' | 'likes' | 'list' | 'collection' | 'url';
|
||||||
|
export type Theme = 'dark' | 'light';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Twitter timeline settings
|
||||||
|
* See: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview
|
||||||
|
*/
|
||||||
|
export interface ITwittweTimelineSettings {
|
||||||
|
/**
|
||||||
|
* Timeline source type
|
||||||
|
*/
|
||||||
|
sourceType: SourceType;
|
||||||
|
/**
|
||||||
|
* Twitter public profile name to be used with 'profile' or 'likes' timeline
|
||||||
|
*/
|
||||||
|
screenName?: string;
|
||||||
|
/**
|
||||||
|
* Twitter public profile user id to be used with 'profile' or 'likes' timeline
|
||||||
|
*/
|
||||||
|
userId?: string;
|
||||||
|
/**
|
||||||
|
* List's owner name for 'list' timeline
|
||||||
|
*/
|
||||||
|
ownerScreenName?: string;
|
||||||
|
/**
|
||||||
|
* List's name. For 'list' timeline
|
||||||
|
*/
|
||||||
|
slug?: string;
|
||||||
|
/**
|
||||||
|
* Unique list id for 'list' timeline OR
|
||||||
|
* Unique collection id for 'collection' timeline
|
||||||
|
*/
|
||||||
|
id?: string;
|
||||||
|
/**
|
||||||
|
* Url source to show
|
||||||
|
*/
|
||||||
|
url?: string;
|
||||||
|
/**
|
||||||
|
* Calculate widget's heigh based on parent
|
||||||
|
*/
|
||||||
|
autoHeight?: boolean;
|
||||||
|
/**
|
||||||
|
* Widget's theme
|
||||||
|
*/
|
||||||
|
theme?: Theme;
|
||||||
|
/**
|
||||||
|
* Border color (hex)
|
||||||
|
*/
|
||||||
|
borderColor?: string;
|
||||||
|
/**
|
||||||
|
* Do not display header
|
||||||
|
*/
|
||||||
|
noHeader?: boolean;
|
||||||
|
/**
|
||||||
|
* Do not display footer
|
||||||
|
*/
|
||||||
|
noFooter?: boolean;
|
||||||
|
/**
|
||||||
|
* Do not display border
|
||||||
|
*/
|
||||||
|
noBorders?: boolean;
|
||||||
|
/**
|
||||||
|
* Do not display scrollbar
|
||||||
|
*/
|
||||||
|
noScrollbar?: boolean;
|
||||||
|
/**
|
||||||
|
* Custom language code to use.
|
||||||
|
* See https://developer.twitter.com/en/docs/twitter-for-websites/twitter-for-websites-supported-languages/overview.html
|
||||||
|
*/
|
||||||
|
lang?: string;
|
||||||
|
/**
|
||||||
|
* Custom width
|
||||||
|
*/
|
||||||
|
width?: number;
|
||||||
|
/**
|
||||||
|
* Custom height (for autoHeight set to false)
|
||||||
|
*/
|
||||||
|
height?: number;
|
||||||
|
/**
|
||||||
|
* Number of tweets to display. 1..20
|
||||||
|
*/
|
||||||
|
tweetLimit?: number;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "33a4cbd4-780c-4b4a-b9cd-f574c38d30d3",
|
||||||
|
"alias": "TwitterFeedWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
|
||||||
|
// The "*" signifies that the version should be taken from the package.json
|
||||||
|
"version": "*",
|
||||||
|
"manifestVersion": 2,
|
||||||
|
|
||||||
|
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||||
|
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||||
|
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||||
|
"requiresCustomScript": false,
|
||||||
|
"supportedHosts": ["SharePointWebPart"],
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "Twitter Feed" },
|
||||||
|
"description": { "default": "Twitter Feed description" },
|
||||||
|
"officeFabricIconFontName": "Page",
|
||||||
|
"properties": {
|
||||||
|
"description": "Twitter Feed"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,314 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version, DisplayMode } from '@microsoft/sp-core-library';
|
||||||
|
import {
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneTextField,
|
||||||
|
PropertyPaneDropdown,
|
||||||
|
PropertyPaneToggle
|
||||||
|
} from '@microsoft/sp-property-pane';
|
||||||
|
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||||
|
import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
|
||||||
|
import { PropertyFieldSpinButton } from '@pnp/spfx-property-controls/lib/PropertyFieldSpinButton';
|
||||||
|
import { Placeholder, IPlaceholderProps } from '@pnp/spfx-controls-react/lib/Placeholder';
|
||||||
|
|
||||||
|
import * as strings from 'TwitterFeedWebPartStrings';
|
||||||
|
import TwitterFeed from './components/TwitterFeed';
|
||||||
|
import { ITwitterFeedProps } from './components/ITwitterFeedProps';
|
||||||
|
import { ITwittweTimelineSettings } from '../model/ITwitterTimelineSettings';
|
||||||
|
|
||||||
|
export interface ITwitterFeedWebPartProps extends ITwittweTimelineSettings {
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class TwitterFeedWebPart extends BaseClientSideWebPart<ITwitterFeedWebPartProps> {
|
||||||
|
|
||||||
|
public onInit(): Promise<void> {
|
||||||
|
if (!this.properties.sourceType) {
|
||||||
|
this.properties.sourceType = 'profile';
|
||||||
|
}
|
||||||
|
|
||||||
|
return super.onInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
const element: React.ReactElement<ITwitterFeedProps | IPlaceholderProps> = this.isConfigured() ? React.createElement(
|
||||||
|
TwitterFeed,
|
||||||
|
this.properties
|
||||||
|
) : React.createElement(
|
||||||
|
Placeholder,
|
||||||
|
{
|
||||||
|
iconName: 'Edit',
|
||||||
|
iconText: strings.Configure,
|
||||||
|
description: strings.ConfigureDescription,
|
||||||
|
buttonLabel: strings.ConfigureButton,
|
||||||
|
hideButton: this.displayMode === DisplayMode.Read,
|
||||||
|
onConfigure: () => {
|
||||||
|
this.context.propertyPane.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.unmountComponentAtNode(this.domElement);
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onDispose(): void {
|
||||||
|
ReactDom.unmountComponentAtNode(this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onBeforeSerialize() {
|
||||||
|
const {
|
||||||
|
sourceType,
|
||||||
|
autoHeight,
|
||||||
|
noBorders
|
||||||
|
} = this.properties;
|
||||||
|
|
||||||
|
//
|
||||||
|
// removing properties based on source type selection
|
||||||
|
//
|
||||||
|
switch (sourceType) {
|
||||||
|
case 'profile':
|
||||||
|
case 'likes':
|
||||||
|
delete this.properties.ownerScreenName;
|
||||||
|
delete this.properties.slug;
|
||||||
|
delete this.properties.id;
|
||||||
|
delete this.properties.url;
|
||||||
|
break;
|
||||||
|
case 'list':
|
||||||
|
delete this.properties.screenName;
|
||||||
|
delete this.properties.id;
|
||||||
|
delete this.properties.url;
|
||||||
|
break;
|
||||||
|
case 'collection':
|
||||||
|
delete this.properties.screenName;
|
||||||
|
delete this.properties.ownerScreenName;
|
||||||
|
delete this.properties.slug;
|
||||||
|
delete this.properties.url;
|
||||||
|
break;
|
||||||
|
case 'url':
|
||||||
|
delete this.properties.screenName;
|
||||||
|
delete this.properties.ownerScreenName;
|
||||||
|
delete this.properties.slug;
|
||||||
|
delete this.properties.id;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// we don't need to save height if autoHeight is set
|
||||||
|
if (autoHeight) {
|
||||||
|
delete this.properties.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
// we don't need to save border color if borders are hidden
|
||||||
|
if (noBorders) {
|
||||||
|
delete this.properties.borderColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public get disableReactivePropertyChanges(): boolean {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any) {
|
||||||
|
const value = newValue as number;
|
||||||
|
if (propertyPath === 'tweetLimit') {
|
||||||
|
if (value === 0) {
|
||||||
|
//super.onPropertyPaneFieldChanged(propertyPath, oldValue, undefined);
|
||||||
|
this.properties.tweetLimit = undefined;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
const {
|
||||||
|
sourceType,
|
||||||
|
screenName,
|
||||||
|
ownerScreenName,
|
||||||
|
slug,
|
||||||
|
id,
|
||||||
|
url,
|
||||||
|
autoHeight,
|
||||||
|
theme,
|
||||||
|
borderColor,
|
||||||
|
noHeader,
|
||||||
|
noFooter,
|
||||||
|
noBorders,
|
||||||
|
noScrollbar,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
tweetLimit
|
||||||
|
} = this.properties;
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.SourceGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneDropdown('sourceType', {
|
||||||
|
label: strings.SourceType,
|
||||||
|
selectedKey: sourceType || 'profile',
|
||||||
|
options: [{
|
||||||
|
key: 'profile',
|
||||||
|
text: strings.SourceTypeProfile
|
||||||
|
}, {
|
||||||
|
key: 'likes',
|
||||||
|
text: strings.SourceTypeLikes
|
||||||
|
}, {
|
||||||
|
key: 'list',
|
||||||
|
text: strings.SourceTypeList
|
||||||
|
}, {
|
||||||
|
key: 'collection',
|
||||||
|
text: strings.SourceTypeCollection
|
||||||
|
}, {
|
||||||
|
key: 'url',
|
||||||
|
text: strings.SourceTypeUrl
|
||||||
|
}]
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('screenName', {
|
||||||
|
label: strings.ScreenName,
|
||||||
|
value: screenName,
|
||||||
|
disabled: sourceType && sourceType !== 'profile' && sourceType !== 'likes'
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('ownerScreenName', {
|
||||||
|
label: strings.OwnerScreenName,
|
||||||
|
value: ownerScreenName,
|
||||||
|
disabled: sourceType !== 'list'
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('slug', {
|
||||||
|
label: strings.Slug,
|
||||||
|
value: slug,
|
||||||
|
disabled: sourceType !== 'list'
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('id', {
|
||||||
|
label: strings.CollectionId,
|
||||||
|
value: id,
|
||||||
|
disabled: sourceType !== 'collection'
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('url', {
|
||||||
|
label: strings.Url,
|
||||||
|
value: url,
|
||||||
|
disabled: sourceType !== 'url'
|
||||||
|
})
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
groupName: strings.LayoutGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneDropdown('theme', {
|
||||||
|
label: strings.Theme,
|
||||||
|
selectedKey: theme || 'light',
|
||||||
|
options: [{
|
||||||
|
key: 'light',
|
||||||
|
text: strings.ThemeLight
|
||||||
|
}, {
|
||||||
|
key: 'dark',
|
||||||
|
text: strings.ThemeDark
|
||||||
|
}]
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle('autoHeight', {
|
||||||
|
label: strings.AutoHeight,
|
||||||
|
onText: strings.Yes,
|
||||||
|
offText: strings.No,
|
||||||
|
checked: autoHeight
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('height', {
|
||||||
|
label: strings.Height,
|
||||||
|
value: height ? height.toString() : '',
|
||||||
|
disabled: autoHeight
|
||||||
|
}),
|
||||||
|
PropertyPaneTextField('width', {
|
||||||
|
label: strings.Width,
|
||||||
|
value: width ? width.toString() : ''
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle('noHeader', {
|
||||||
|
label: strings.NoHeader,
|
||||||
|
onText: strings.Yes,
|
||||||
|
offText: strings.No,
|
||||||
|
checked: noHeader
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle('noFooter', {
|
||||||
|
label: strings.NoFooter,
|
||||||
|
onText: strings.Yes,
|
||||||
|
offText: strings.No,
|
||||||
|
checked: noFooter
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle('noScrollbar', {
|
||||||
|
label: strings.NoScrollbar,
|
||||||
|
onText: strings.Yes,
|
||||||
|
offText: strings.No,
|
||||||
|
checked: noScrollbar
|
||||||
|
}),
|
||||||
|
PropertyPaneToggle('noBorders', {
|
||||||
|
label: strings.NoBorders,
|
||||||
|
onText: strings.Yes,
|
||||||
|
offText: strings.No,
|
||||||
|
checked: noBorders
|
||||||
|
}),
|
||||||
|
PropertyFieldColorPicker('borderColor', {
|
||||||
|
key: 'borderColor',
|
||||||
|
label: strings.BorderColor,
|
||||||
|
selectedColor: borderColor,
|
||||||
|
disabled: noBorders,
|
||||||
|
style: PropertyFieldColorPickerStyle.Inline,
|
||||||
|
properties: this.properties,
|
||||||
|
onPropertyChange: this.onPropertyPaneFieldChanged
|
||||||
|
}),
|
||||||
|
PropertyFieldSpinButton('tweetLimit', {
|
||||||
|
key: 'tweetLimit',
|
||||||
|
label: strings.TweetLimit,
|
||||||
|
initialValue: tweetLimit,
|
||||||
|
min: 0,
|
||||||
|
max: 20,
|
||||||
|
step: 1,
|
||||||
|
decimalPlaces: 0,
|
||||||
|
properties: this.properties,
|
||||||
|
onPropertyChange: this.onPropertyPaneFieldChanged
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private isConfigured(): boolean {
|
||||||
|
const {
|
||||||
|
sourceType,
|
||||||
|
screenName,
|
||||||
|
ownerScreenName,
|
||||||
|
slug,
|
||||||
|
id,
|
||||||
|
url
|
||||||
|
} = this.properties;
|
||||||
|
|
||||||
|
if (!sourceType) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (sourceType) {
|
||||||
|
case 'profile':
|
||||||
|
case 'likes':
|
||||||
|
return !!screenName;
|
||||||
|
break;
|
||||||
|
case 'list':
|
||||||
|
return !!ownerScreenName && !!slug;
|
||||||
|
break;
|
||||||
|
case 'collection':
|
||||||
|
return !!id;
|
||||||
|
break;
|
||||||
|
case 'url':
|
||||||
|
return !!url;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { ITwittweTimelineSettings } from '../../model/ITwitterTimelineSettings';
|
||||||
|
|
||||||
|
export interface ITwitterFeedProps extends ITwittweTimelineSettings {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||||
|
|
||||||
|
.twitterFeed {
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0px auto;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include ms-Grid-row;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
background-color: $ms-color-themeDark;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-lg10;
|
||||||
|
@include ms-xl8;
|
||||||
|
@include ms-xlPush2;
|
||||||
|
@include ms-lgPush1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@include ms-font-xl;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
// Primary Button
|
||||||
|
min-width: 80px;
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
border-color: $ms-color-themePrimary;
|
||||||
|
color: $ms-color-white;
|
||||||
|
|
||||||
|
// Basic Button
|
||||||
|
outline: transparent;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
font-weight: $ms-font-weight-regular;
|
||||||
|
border-width: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: $ms-font-weight-semibold;
|
||||||
|
font-size: $ms-font-size-m;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import styles from './TwitterFeed.module.scss';
|
||||||
|
import { ITwitterFeedProps } from './ITwitterFeedProps';
|
||||||
|
import { TwitterTimelineEmbed } from 'react-twitter-embed';
|
||||||
|
|
||||||
|
export default class TwitterFeed extends React.Component<ITwitterFeedProps, {}> {
|
||||||
|
public render(): React.ReactElement<ITwitterFeedProps> {
|
||||||
|
const {
|
||||||
|
sourceType,
|
||||||
|
screenName,
|
||||||
|
userId,
|
||||||
|
ownerScreenName,
|
||||||
|
slug,
|
||||||
|
id,
|
||||||
|
url,
|
||||||
|
autoHeight,
|
||||||
|
theme,
|
||||||
|
borderColor,
|
||||||
|
noHeader,
|
||||||
|
noFooter,
|
||||||
|
noBorders,
|
||||||
|
noScrollbar,
|
||||||
|
lang,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
tweetLimit
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={ styles.twitterFeed }>
|
||||||
|
<TwitterTimelineEmbed
|
||||||
|
sourceType={sourceType}
|
||||||
|
screenName={screenName}
|
||||||
|
userId={userId}
|
||||||
|
ownerScreenName={ownerScreenName}
|
||||||
|
slug={slug}
|
||||||
|
id={id}
|
||||||
|
url={url}
|
||||||
|
autoHeight={autoHeight}
|
||||||
|
theme={theme}
|
||||||
|
borderColor={borderColor}
|
||||||
|
noHeader={noHeader}
|
||||||
|
noFooter={noFooter}
|
||||||
|
noBorders={noBorders}
|
||||||
|
noScrollbar={noScrollbar}
|
||||||
|
lang={lang || 'en'}
|
||||||
|
options={{
|
||||||
|
height: autoHeight ? undefined : height,
|
||||||
|
width: width,
|
||||||
|
tweetLimit: tweetLimit
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
define([], function () {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Twitter Timeline Setting",
|
||||||
|
"SourceGroupName": "Source",
|
||||||
|
"SourceType": "Source type",
|
||||||
|
"SourceTypeProfile": "Profile",
|
||||||
|
"SourceTypeList": "List",
|
||||||
|
"SourceTypeCollection": "Collection",
|
||||||
|
"SourceTypeLikes": "Likes",
|
||||||
|
"SourceTypeUrl": "Url",
|
||||||
|
"ScreenName": "Twitter handle",
|
||||||
|
"OwnerScreenName": "List owner Twitter handle",
|
||||||
|
"Slug": "List slug",
|
||||||
|
"CollectionId": "Collection Id",
|
||||||
|
"Url": "Source URL",
|
||||||
|
"LayoutGroupName": "Layout Options",
|
||||||
|
"Theme": "Theme",
|
||||||
|
"ThemeDark": "Dark",
|
||||||
|
"ThemeLight": "Light",
|
||||||
|
"AutoHeight": "Auto height",
|
||||||
|
"Height": "Specify custom height",
|
||||||
|
"Width": "Specify custom width",
|
||||||
|
"NoBorders": "Hide borders",
|
||||||
|
"NoHeader": "Hide header",
|
||||||
|
"NoFooter": "Hide footer",
|
||||||
|
"NoScrollbar": "Hide scrollbar",
|
||||||
|
"TweetLimit": "Limit number of displayed tweets (1 to 20, 0 - auto)",
|
||||||
|
"BorderColor": "Border color",
|
||||||
|
"Yes": "Yes",
|
||||||
|
"No": "No",
|
||||||
|
"Configure": "Configure Twitter source",
|
||||||
|
"ConfigureDescription": "You need to configure Twitter source to use the web part",
|
||||||
|
"ConfigureButton": "Configure"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
declare interface ITwitterFeedWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
SourceGroupName: string;
|
||||||
|
SourceType: string;
|
||||||
|
SourceTypeProfile:string;
|
||||||
|
SourceTypeList: string;
|
||||||
|
SourceTypeCollection: string;
|
||||||
|
SourceTypeLikes: string;
|
||||||
|
SourceTypeUrl: string;
|
||||||
|
ScreenName: string;
|
||||||
|
OwnerScreenName: string;
|
||||||
|
Slug: string;
|
||||||
|
CollectionId: string;
|
||||||
|
Url: string;
|
||||||
|
LayoutGroupName: string;
|
||||||
|
Theme: string;
|
||||||
|
ThemeDark: string;
|
||||||
|
ThemeLight: string;
|
||||||
|
AutoHeight: string;
|
||||||
|
Height: string;
|
||||||
|
Width: string;
|
||||||
|
NoBorders: string;
|
||||||
|
NoHeader: string;
|
||||||
|
NoFooter: string;
|
||||||
|
NoScrollbar: string;
|
||||||
|
TweetLimit: string;
|
||||||
|
BorderColor: string;
|
||||||
|
Yes: string;
|
||||||
|
No: string;
|
||||||
|
Configure: string;
|
||||||
|
ConfigureDescription: string;
|
||||||
|
ConfigureButton: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'TwitterFeedWebPartStrings' {
|
||||||
|
const strings: ITwitterFeedWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "lib",
|
||||||
|
"inlineSources": false,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"lib"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue