+ {this.props.description &&
+
+ );
+ }
+}
diff --git a/samples/react-avatar/src/webparts/avatarGenerator/components/IAvatarGeneratorProps.ts b/samples/react-avatar/src/webparts/avatarGenerator/components/IAvatarGeneratorProps.ts
new file mode 100644
index 000000000..219e474a2
--- /dev/null
+++ b/samples/react-avatar/src/webparts/avatarGenerator/components/IAvatarGeneratorProps.ts
@@ -0,0 +1,6 @@
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+
+export interface IAvatarGeneratorProps {
+ description: string;
+ context:WebPartContext;
+}
diff --git a/samples/react-avatar/src/webparts/avatarGenerator/components/TabPanel.tsx b/samples/react-avatar/src/webparts/avatarGenerator/components/TabPanel.tsx
new file mode 100644
index 000000000..b8d0d1a32
--- /dev/null
+++ b/samples/react-avatar/src/webparts/avatarGenerator/components/TabPanel.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+
+export interface ITabPanelProps {
+ children?: React.ReactNode;
+ index: any;
+ value: any;
+}
+
+export const TabPanel: React.FunctionComponent{this.props.description}
} +
+
+
+
+
+
+ { this.avatarRef = ref; }}
+ avatarStyle={this.state.avatarStyle}
+ />
+
+
+
+ { this.setState({ value: num }); }}
+ aria-label="simple tabs example">
+ {this.optionContext.options.map((option, index) => {
+ const optionState = this.optionContext.getOptionState(option.key)!;
+ if (optionState.available <= 0) {
+ return null;
+ } else {
+ count++;
+ return
+
+ {this.optionContext.options.map((option, index) => {
+ const optionState = this.optionContext.getOptionState(option.key)!;
+ if (optionState.available <= 0) {
+ return null;
+ } else {
+ internalcount++;
+ switch (option.key) {
+ case "topType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ case "accessoriesType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ case "hairColor":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "facialHairType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "clotheType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "clotheColor":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "graphicType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "eyeType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "eyebrowType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "mouthType":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ case "skinColor":
+ return
+ {optionState.options
+ .map(type => {
+ return ( ;
+ break;
+ default:
+ return null;
+ break;
+ }
+ }
+ })}
+
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+ {
+ var selectedData = this.optionContext["_data"];
+ selectedData[`${option.key}`] = type;
+ this.optionContext.setData(selectedData as any);
+ }}
+ >
);
+ })}
+
+ {value === index && (
+
+
+ )}
+
+ );
+};
\ No newline at end of file
diff --git a/samples/react-avatar/src/webparts/avatarGenerator/loc/en-us.js b/samples/react-avatar/src/webparts/avatarGenerator/loc/en-us.js
new file mode 100644
index 000000000..e5f5a6025
--- /dev/null
+++ b/samples/react-avatar/src/webparts/avatarGenerator/loc/en-us.js
@@ -0,0 +1,7 @@
+define([], function() {
+ return {
+ "PropertyPaneDescription": "Description",
+ "BasicGroupName": "Group Name",
+ "DescriptionFieldLabel": "Description Field"
+ }
+});
\ No newline at end of file
diff --git a/samples/react-avatar/src/webparts/avatarGenerator/loc/mystrings.d.ts b/samples/react-avatar/src/webparts/avatarGenerator/loc/mystrings.d.ts
new file mode 100644
index 000000000..ab4592e5f
--- /dev/null
+++ b/samples/react-avatar/src/webparts/avatarGenerator/loc/mystrings.d.ts
@@ -0,0 +1,10 @@
+declare interface IAvatarGeneratorWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+}
+
+declare module 'AvatarGeneratorWebPartStrings' {
+ const strings: IAvatarGeneratorWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-avatar/teams/4052b4ec-72e9-4248-b411-18a4cd438d4b_color.png b/samples/react-avatar/teams/4052b4ec-72e9-4248-b411-18a4cd438d4b_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/react-avatar/teams/4052b4ec-72e9-4248-b411-18a4cd438d4b_color.png differ
diff --git a/samples/react-avatar/teams/4052b4ec-72e9-4248-b411-18a4cd438d4b_outline.png b/samples/react-avatar/teams/4052b4ec-72e9-4248-b411-18a4cd438d4b_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/react-avatar/teams/4052b4ec-72e9-4248-b411-18a4cd438d4b_outline.png differ
diff --git a/samples/react-avatar/tsconfig.json b/samples/react-avatar/tsconfig.json
new file mode 100644
index 000000000..72ce74214
--- /dev/null
+++ b/samples/react-avatar/tsconfig.json
@@ -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"
+ ]
+}
diff --git a/samples/react-avatar/tslint.json b/samples/react-avatar/tslint.json
new file mode 100644
index 000000000..6bfc75a4c
--- /dev/null
+++ b/samples/react-avatar/tslint.json
@@ -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
+ }
+}
\ No newline at end of file
diff --git a/samples/react-dynamics-crm-api/.editorconfig b/samples/react-dynamics-crm-api/.editorconfig
new file mode 100644
index 000000000..8ffcdc4ec
--- /dev/null
+++ b/samples/react-dynamics-crm-api/.editorconfig
@@ -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
\ No newline at end of file
diff --git a/samples/react-dynamics-crm-api/.gitignore b/samples/react-dynamics-crm-api/.gitignore
new file mode 100644
index 000000000..b19bbe123
--- /dev/null
+++ b/samples/react-dynamics-crm-api/.gitignore
@@ -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
diff --git a/samples/react-dynamics-crm-api/.yo-rc.json b/samples/react-dynamics-crm-api/.yo-rc.json
new file mode 100644
index 000000000..8af25d9a4
--- /dev/null
+++ b/samples/react-dynamics-crm-api/.yo-rc.json
@@ -0,0 +1,12 @@
+{
+ "@microsoft/generator-sharepoint": {
+ "isCreatingSolution": true,
+ "environment": "spo",
+ "version": "1.10.0",
+ "libraryName": "react-dynamic-365",
+ "libraryId": "5bc3855d-9c59-4322-95e0-78e17dcd809e",
+ "packageManager": "npm",
+ "isDomainIsolated": false,
+ "componentType": "webpart"
+ }
+}
\ No newline at end of file
diff --git a/samples/react-dynamics-crm-api/README.md b/samples/react-dynamics-crm-api/README.md
new file mode 100644
index 000000000..d584d50c7
--- /dev/null
+++ b/samples/react-dynamics-crm-api/README.md
@@ -0,0 +1,65 @@
+# React Dynamics CRM API
+
+## Summary
+This sample shows how to consume Dynamics CRM API using AadTokenProvider class.
+
+
+
+## Used SharePoint Framework Version
+
+
+
+## Applies to
+
+* [SharePoint Framework Developer](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-dynamics365-api|Ramin Ahmadi
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0|Jul 12, 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 repository
+* in the command line run:
+ * `npm install`
+ * `gulp serve`
+
+### Configuration
+
+* Login to Azure Portal.
+* Go to **Azure Active Directory**
+* Go to the **App Registrations** page.
+* Select **SharePoint Online Client Extensibility** from the list of applications.
+* Select **API Permissions**.
+* Add **Dynamics CRM** permission.
+* Go to the **Manifest** page, and make sure the value for the `allowPublicClient` and the `oauth2AllowImplicitFlow` are both set to `true`.
+
+## Features
+
+This sample illustrates the following concepts on top of the SharePoint Framework:
+
+* Using AadTokenProvider to consume Dynamics CRM API.
+* How to get Accounts/Contacts information from Dynamics 365.
+* React Hooks
+* Using async / await for the async calls
+* Ant design for the UI.
+
+> **NOTE:** This sample will not work in the local workbench.
+
+{children}
+
+ searchAccounts(value)} enterButton />
+
{needConfiguration &&
;
hoverColors: Array;
+ hasTaxField?: boolean;
}
export interface IModernChartsWebPartProps {
@@ -50,4 +51,4 @@ export interface MChart {
labels: Array;
config: ChartConfiguration;
key: number;
-}
\ No newline at end of file
+}
diff --git a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts
index 347c711c7..bf92524ce 100644
--- a/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts
+++ b/samples/react-modern-charts/src/webparts/modernCharts/ModernChartsWebPart.ts
@@ -31,6 +31,11 @@ export interface ISPList {
Id: string;
}
+export interface IFieldProperty extends IPropertyPaneDropdownOption {
+ fieldtype: string;
+}
+
+
export default class ModernChartsWebPart extends BaseClientSideWebPart {
private reactCharts: React.ReactElement;
@@ -205,12 +210,29 @@ export default class ModernChartsWebPart extends BaseClientSideWebPart {
if (chLabels['unique'].indexOf(item[config.unique]) == -1 && item[config.unique] != null && item[config.unique] != "") {
chLabels['unique'].push(item[config.unique]);
- chLabels['labels'].push(item[config.col1]);
+ //if term use VAlue
+ chLabels['labels'].push(this.getLabel(item, config.col1));
}
});
return chLabels;
}
+ private getLabel(item: Object, col: string) {
+ if (!!item[col] && !!item[col]['WssId'] && !!item["TaxCatchAll"] && item["TaxCatchAll"].length > 0) {
+ //Filter because you can have more Fields from this type to select the right value
+ const wssid: number = item[col]['WssId'];
+ const terms = (item["TaxCatchAll"]).filter((x) => x.ID === wssid);
+ if (!!terms && terms.length > 0) {
+ return terms[0].Term;
+ }
+ return 'TermLabel not Found';
+ }
+ //TODO HyperLink
+ //lookup user
+
+ return item[col];
+ }
+
private getValues(data: Array
;
+
+ return shimmerContent;
+ }
+}
\ No newline at end of file
diff --git a/samples/react-msgraph-peoplesearch/src/components/PeopleViewComponent/PeopleViewComponent.module.scss b/samples/react-msgraph-peoplesearch/src/components/PeopleViewComponent/PeopleViewComponent.module.scss
new file mode 100644
index 000000000..1108cefea
--- /dev/null
+++ b/samples/react-msgraph-peoplesearch/src/components/PeopleViewComponent/PeopleViewComponent.module.scss
@@ -0,0 +1,76 @@
+
+.peopleView {
+
+ .defaultCard {
+ .documentCardContainer {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: left;
+ }
+
+ .documentCardItem {
+ margin-right: 15px;
+ flex: 0 0 345px;
+
+ .personaCard {
+ margin: 10px;
+
+ :global {
+ .ms-Persona-optionalText, .ms-Persona-tertiaryText {
+ display: initial;
+ }
+
+ .ms-Persona-primaryText, .ms-Persona-secondaryText, .ms-Persona-optionalText, .ms-Persona-tertiaryText {
+ width: 213px;
+ }
+ }
+ }
+ }
+ }
+
+ .resultCount {
+ padding-left: 10px;
+ margin-bottom: 10px;
+ }
+
+ .noResults {
+ padding: 10px;
+ text-align: center;
+ }
+}
+
+.placeholder_root {
+
+ .shimmer {
+ background: #f6f7f8;
+ background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+ background-repeat: no-repeat;
+ background-size: 800px 104px;
+ display: inline-block;
+ position: relative;
+
+ -webkit-animation-duration: 1s;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-name: placeholderShimmer;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes placeholderShimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+ }
+
+ .line {
+ height: 10px;
+ }
+
+ .line.shimmer + .line.shimmer {
+ margin-top: 10px;
+ }
+}
\ No newline at end of file
diff --git a/samples/react-msgraph-peoplesearch/src/components/PeopleViewComponent/PeopleViewComponent.tsx b/samples/react-msgraph-peoplesearch/src/components/PeopleViewComponent/PeopleViewComponent.tsx
new file mode 100644
index 000000000..d2796bb49
--- /dev/null
+++ b/samples/react-msgraph-peoplesearch/src/components/PeopleViewComponent/PeopleViewComponent.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import ITemplateContext from '../../models/ITemplateContext';
+import { isEmpty } from '@microsoft/sp-lodash-subset';
+import { PersonaCard } from '../PersonaCard/PersonaCard';
+import styles from './PeopleViewComponent.module.scss';
+import { Text } from '@microsoft/sp-core-library';
+import * as strings from "PeopleSearchWebPartStrings";
+
+export interface IPeopleViewProps {
+ templateContext: ITemplateContext;
+}
+
+export interface IPeopleViewState {
+}
+
+export class PeopleViewComponent extends React.Component
+
+
;
+ }
+
+ if (ctx.showPagination) {
+ paginationElement = null;
+ }
+
+ const personaCards = [];
+ for (let i = 0; i < ctx.items.value.length; i++) {
+ personaCards.push(
+
);
+ }
+
+ mainElement =
+
+
+ {resultCountElement}
+
+ {paginationElement}
+
+ {personaCards}
+
+ {strings.NoResultMessage}
;
+ }
+
+ return {mainElement}
;
+ }
+}
\ No newline at end of file
diff --git a/samples/react-msgraph-peoplesearch/src/components/PersonaCard/IPersonaCardProps.ts b/samples/react-msgraph-peoplesearch/src/components/PersonaCard/IPersonaCardProps.ts
new file mode 100644
index 000000000..1aeda0448
--- /dev/null
+++ b/samples/react-msgraph-peoplesearch/src/components/PersonaCard/IPersonaCardProps.ts
@@ -0,0 +1,19 @@
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { IComponentFieldsConfiguration } from "../../services/TemplateService/TemplateService";
+import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
+import { ServiceScope } from '@microsoft/sp-core-library';
+
+export interface IPersonaCardProps {
+ serviceScope: ServiceScope;
+ item?: MicrosoftGraph.User;
+ fieldsConfiguration?: IComponentFieldsConfiguration[];
+ personaSize?: string;
+ themeVariant?: IReadonlyTheme;
+
+ // Individual content properties (i.e web component attributes)
+ text?: string;
+ secondaryText?: string;
+ tertiaryText?: string;
+ optionalText?: string;
+ upn?: string;
+}
diff --git a/samples/react-msgraph-peoplesearch/src/components/PersonaCard/IPersonaCardState.ts b/samples/react-msgraph-peoplesearch/src/components/PersonaCard/IPersonaCardState.ts
new file mode 100644
index 000000000..2d73b40b8
--- /dev/null
+++ b/samples/react-msgraph-peoplesearch/src/components/PersonaCard/IPersonaCardState.ts
@@ -0,0 +1,3 @@
+export interface IPersonaCardState {
+ isComponentLoaded: boolean;
+}
diff --git a/samples/react-msgraph-peoplesearch/src/components/PersonaCard/PersonaCard.tsx b/samples/react-msgraph-peoplesearch/src/components/PersonaCard/PersonaCard.tsx
new file mode 100644
index 000000000..27dc2d2ce
--- /dev/null
+++ b/samples/react-msgraph-peoplesearch/src/components/PersonaCard/PersonaCard.tsx
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { IPersonaCardProps } from './IPersonaCardProps';
+import { IPersonaCardState } from './IPersonaCardState';
+import {
+ Log, Environment, EnvironmentType,
+} from '@microsoft/sp-core-library';
+import { SPComponentLoader } from '@microsoft/sp-loader';
+
+import {
+ Persona,
+ IPersonaSharedProps,
+} from 'office-ui-fabric-react';
+import { ITheme } from '@uifabric/styling';
+import { TemplateService } from '../../services/TemplateService/TemplateService';
+import { isEmpty } from '@microsoft/sp-lodash-subset';
+
+const LIVE_PERSONA_COMPONENT_ID: string = "914330ee-2df2-4f6e-a858-30c23a812408";
+
+export class PersonaCard extends React.Component
+
+
+
;
+ } else {
+ let templateContext = {
+ items: this.state.results,
+ showPagination: this.props.showPagination,
+ showResultsCount: this.props.showResultsCount,
+ showBlank: this.props.showBlank,
+ themeVariant: this.props.themeVariant,
+ pageSize: this.props.searchService.pageSize,
+ serviceScope: this.props.serviceScope
+ } as ITemplateContext;
+ templateContext = { ...templateContext, ...this.props.templateParameters };
+
+ renderShimmerElements = this.props.templateService.getShimmerTemplateComponent(this.props.selectedLayout, templateContext);
+ }
+ }
+
+ // WebPart title
+ renderWebPartTitle =
+
+ );
+ }
+
+ private async _fetchPeopleSearchResults(): Promise
+ {renderWebPartTitle}
+ {renderShimmerElements ? renderShimmerElements : renderWebPartContent}
+
+ {strings.PanelTitle}
+
+
+
+ }
+
+ {isAnalyzing &&
+
+
+
+ {!isAnalyzing &&
+
+
+ {isAnalyzing ?
+
+
+ {isAnalyzing ?
+
+
+ {isAnalyzing ?
+ {Text.format(strings.YouLookLikeACelebrity, celebrity)}
{strings.AnalysisGoodLabel}
+ }
+
+ {!isAnalyzing && !isValid &&
+ {strings.AnalysisBadLabel}
+ }
+
+ {!isAnalyzing &&
+
+
+ }
+
+ {!isAnalyzing && isValid &&
+ -
+
{strings.PanelInstructionsLabel}{strings.UpdateButtonLabel}.
+ }
+
+ {this.state.isSubmitted &&
+
+ this.onUpdateProfilePhoto()} style={{ marginRight: '8px' }} disabled={this.state.isValid !== true}>
+ {strings.UpdateButtonLabel}
+
+ this.onDismiss()}>{strings.CancelButtonLabel}
+
+ );
+ }
+
+ private onUpdateProfilePhoto = async (_ev?: React.SyntheticEvent
+ { needsConfiguration ? this.renderPlaceholder() : this.renderPhotoEditor() }
+
+ );
+ }
+
+ private renderPlaceholder(): JSX.Element {
+ return {strings.ErrorLabel}: {errorMessage}
; + + })} +
+ { this.cropper = cropper; }}
+ />
+ {
+ this.setState({
+ showWebCamDialog: false
+ });
+ }}
+ onCapture={(imageUrl: string) => {
+ this.setState({
+ imageUrl,
+ showWebCamDialog: false
+ });
+ }}
+ />}
+ ;
+ }
+
+ /**
+ * Gets called when a file has been successfully uploaded
+ */
+ private handleSuccess = (files: any) => {
+ this.setState({
+ imageUrl: files[0].src.base64,
+ errors: []
+ });
+ }
+
+ /**
+ * Gets called when an error has occurred uploading a file
+ */
+ private handleErrors = (errors: any) => {
+ console.log("Handle errors", errors);
+ this.setState({
+ imageUrl: undefined,
+ errors
+ });
+ }
+
+ /**
+ * Resets the editor by removing all files and errors
+ */
+ private resetFiles = () => {
+ this.setState({
+ imageUrl: undefined,
+ errors: []
+ });
+ }
+
+ /**
+ * Renders the command bar items
+ */
+ private getCommandBarItems = () => {
+ return [
+ {
+ key: 'upload',
+ name: strings.UploadButtonName,
+ iconProps: {
+ iconName: 'Add'
+ },
+ onClick: () => {
+ this.fileBrowser.click();
+ }
+ },
+ {
+ key: 'webcam',
+ name: strings.CameraButtonName,
+ iconProps: {
+ iconName: 'Camera'
+ },
+ //disabled: true,
+ title: strings.CameraButtonLabel,
+ onClick: () => this.getWebCamPhoto()
+ },
+ {
+ key: 'Save',
+ name: strings.SubmitButtonName,
+ iconProps: {
+ iconName: 'Save'
+ },
+ disabled: this.state.imageUrl === undefined,
+ title: this.state.imageUrl === undefined ? strings.SubmitPhotoDisabledTitle : strings.SubmitPhotoTitle,
+ onClick: () => this.submitPhoto()
+ }
+ ];
+ }
+
+ /**
+ * Renders the overflow items -- we don't have any right now
+ */
+ private getOverflowItems = () => {
+ return [
+ ];
+ }
+
+ /**
+ * Renders the menu items at the far right of the toolbar
+ */
+ private getFarItems = () => {
+ return [
+ {
+ key: 'reset',
+ ariaLabel: strings.ResetAriaLabel,
+ iconProps: {
+ iconName: 'Refresh'
+ },
+ onClick: () => this.resetFiles()
+ }
+ ];
+ }
+
+ private getWebCamPhoto = () => {
+ this.setState({
+ showWebCamDialog: true
+ });
+ }
+
+ /**
+ * Calls the dialog to submit the photo
+ */
+ private submitPhoto = () => {
+ // Get the image to approve
+ const imageToApprove: string = this.cropper.getCroppedCanvas().toDataURL();
+ this.cropper.getCroppedCanvas().toBlob((blob: Blob)=> {
+ const photoRequirements: IPhotoRequirements = {
+ allowAdult: this.props.allowAdult,
+ allowClipart: this.props.allowClipart,
+ allowGory: this.props.allowGory,
+ allowLinedrawing: this.props.allowLinedrawing,
+ requirePortrait: this.props.requirePortrait,
+ allowRacy: this.props.allowRacy,
+ forbiddenKeywords: this.props.forbiddenKeywords && this.props.forbiddenKeywords.replace('; ', ';').replace(' ;', ';').split(';')
+ };
+ // Create a new instance of the analysis dialog
+ const callout: AnalysisPanelDialog = new AnalysisPanelDialog(imageToApprove, this.props.azureVisionKey, this.props.azureVisionEndpoint, photoRequirements, this.props.context, blob);
+
+ // Show the dialog
+ callout.show();
+
+ });
+ }
+
+ private _onConfigure = () => {
+ // Context of the web part
+ this.props.context.propertyPane.open();
+ }
+}
diff --git a/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.module.scss b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.module.scss
new file mode 100644
index 000000000..7dc99e599
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.module.scss
@@ -0,0 +1,7 @@
+.webcamdialog {
+ :global(.ms-Dialog-main) {
+ background-color: white;
+ box-shadow: rgba(0,0,0,0.4) 0 0 5px 0;
+ }
+
+}
\ No newline at end of file
diff --git a/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.tsx b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.tsx
new file mode 100644
index 000000000..4b228e9fe
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+
+import * as strings from 'ProfilePhotoEditorWebPartStrings';
+
+import { IWebCamDialogProps, IWebCamDialogState } from './WebCamDialog.types';
+
+import styles from './WebCamDialog.module.scss';
+
+import Webcam from "react-webcam";
+
+/**
+ * Set the video constraints to be a square from the user-facing camera
+ */
+const videoConstraints = {
+ width: 300,
+ height: 300,
+ facingMode: "user"
+};
+
+
+export class WebCamDialog extends React.Component {
+ private webcamRef: Webcam = undefined;
+
+ public render(): React.ReactElement {
+ return (
+
+ );
+ }
+
+ /**
+ * Captures an image from the web cam
+ */
+ private onCapture = () => {
+ const imageSrc = this.webcamRef.getScreenshot();
+ this.props.onCapture(imageSrc);
+ }
+
+ /**
+ *
+ * Dismisses the dialog
+ * @param _ev
+ */
+ private onDismiss = (_ev?: React.SyntheticEvent) => {
+ this.props.onDismiss();
+ }
+}
diff --git a/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.types.ts b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.types.ts
new file mode 100644
index 000000000..ca45c0272
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/WebCamDialog.types.ts
@@ -0,0 +1,15 @@
+export interface IWebCamDialogProps {
+ /**
+ * The DOM element to attach the dialog to
+ */
+ //domElement: any;
+ //hidden: boolean;
+
+ /**
+ * Dismiss handler
+ */
+ onDismiss: () => void;
+ onCapture: (string) => void;
+}
+
+export interface IWebCamDialogState {}
diff --git a/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/index.ts b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/index.ts
new file mode 100644
index 000000000..999a54a97
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/components/WebCamDialog/index.ts
@@ -0,0 +1,2 @@
+export * from './WebCamDialog';
+export * from './WebCamDialog.types';
diff --git a/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/loc/en-us.js b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/loc/en-us.js
new file mode 100644
index 000000000..0f7e79944
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/loc/en-us.js
@@ -0,0 +1,64 @@
+define([], function() {
+ return {
+ YouLookLikeACelebrity: "Uh... did anyone ever tell you that you look like {0}? It's uncanny!",
+ CaptureButtonLabel: "Capture",
+ WebCamDialogTitle: "Insert photo from camera",
+ NoKeywords: "(none)",
+ ForbiddenKeywordsLabel: "Forbidden keywords",
+ ForbiddenTagsFieldDescription: "Enter a semi-colon separated list of tags that should not be allowed.",
+ ForbiddenTagsFieldLabel: "Forbidden tags",
+ AllowGoryFieldLabel: "Allow gory images",
+ AllowAdultImagesFieldLabel: "Allow adult images",
+ AllowRacyFieldLabel: "Allow racy images",
+ AllowLineDrawingFieldLabel: "Allow line drawing images",
+ AllowClipartFieldLabel: "Allow clipart images",
+ RequirePortraitFieldLabel: "Require portrait photos",
+ AnalysisBadLabel: "Your photo does not meet one or more criteria. Try again with a photo that meets the following criteria:",
+ NoLabel: "No",
+ YesLabel: "Yes",
+ GoryLabel: "Gory",
+ AdultLabel: "Adult",
+ RacyLabel: "Racy",
+ LineDrawingLabel: "Line drawing",
+ ClipartLabel: "Clip art",
+ NumberOfFacesDetectedLabel: "Number of faces detected",
+ PortraitLabel: "Portrait",
+ PanelInstructionsLabel: "To update your profile photo, use ",
+ AnalysisGoodLabel: "Your new photo meets our requirements!",
+ GenderLabel: "Gender",
+ EstimatedAgeLabel: "Estimated age",
+ PanelTitle: "Update your profile photo",
+ AnalyzingLabel: "Analyzing your photo...",
+ DescriptionLabel: "Description",
+ CancelButtonLabel: "Cancel",
+ UpdateButtonLabel: "Update",
+ SubmitButtonName: "Submit",
+ UploadButtonName: "Upload",
+ CameraButtonName: "Use camera",
+ ResetAriaLabel: "Reset",
+ CameraButtonLabel: "Camera function is disabled for this demo",
+ SubmitPhotoDisabledTitle: "Upload a photo before you can submit",
+ SubmitPhotoTitle: "Submit your photo",
+ MultipleFileTypeErrorLabel: "You can only drop one file at a time",
+ UnsupportedFileTypeErrorLabel: "You can only upload photos (e.g.: .PNG, .JPG, .JPEG)",
+ UnexpectedErrorLabel: "Unexpected error",
+ CommandBarAriaLabel: "Use left and right arrow keys to navigate between commands",
+ MoreCommandAriaLabel: "More commands",
+ MaxSizeExceededErrorLabel: "Maximum file size exceeded",
+ ErrorLabel: "Error",
+ CloseLabel: "Close",
+ PropertyPaneDescription: "Use this web part to allow users to upload profile photos that meet your photo requirements.",
+ BasicGroupName: "Photo requirements",
+ InstructionsFieldLabel: "Instructions",
+ AzureGroupName: "Azure Cognitive Service",
+ AzureGroupMarkdown: `
+To get started, create an [Azure Cognitive Services](https://azure.microsoft.com/en-us/try/cognitive-services/) resource in your [Azure Portal](https://portal.azure.com).
+
+You'll find your key and endpoint under **Keys and Endpoint**
+`,
+ AzureKey: "Key",
+ AzureEndPoint: "Endpoint",
+ BasicInstructions: "Specify your requirements to approve a profile photo.",
+ SuccessMessage: "Your profile was succesfully updated!"
+ }
+});
diff --git a/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/loc/mystrings.d.ts b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/loc/mystrings.d.ts
new file mode 100644
index 000000000..e9a029aa0
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/src/webparts/profilePhotoEditor/loc/mystrings.d.ts
@@ -0,0 +1,63 @@
+declare interface IProfilePhotoEditorWebPartStrings {
+ YouLookLikeACelebrity: string;
+ CaptureButtonLabel: string;
+ WebCamDialogTitle: string;
+ NoKeywords: string;
+ ForbiddenKeywordsLabel: string;
+ ForbiddenTagsFieldDescription: string;
+ ForbiddenTagsFieldLabel: string;
+ AllowGoryFieldLabel: string;
+ AllowAdultImagesFieldLabel: string;
+ AllowRacyFieldLabel: string;
+ AllowLineDrawingFieldLabel: string;
+ AllowClipartFieldLabel: string;
+ RequirePortraitFieldLabel: string;
+ AnalysisBadLabel: string;
+ NoLabel: string;
+ YesLabel: string;
+ GoryLabel: string;
+ AdultLabel: string;
+ RacyLabel: string;
+ LineDrawingLabel: string;
+ ClipartLabel: string;
+ NumberOfFacesDetectedLabel: string;
+ PortraitLabel: string;
+ PanelInstructionsLabel: string;
+ AnalysisGoodLabel: string;
+ GenderLabel: string;
+ EstimatedAgeLabel: string;
+ PanelTitle: string;
+ AnalyzingLabel: string;
+ DescriptionLabel: string;
+ CancelButtonLabel: string;
+ UpdateButtonLabel: string;
+ SubmitButtonName: string;
+ UploadButtonName: string;
+ CameraButtonName: string;
+ ResetAriaLabel: string;
+ CameraButtonLabel: string;
+ SubmitPhotoDisabledTitle: string;
+ SubmitPhotoTitle: string;
+ MultipleFileTypeErrorLabel: string;
+ UnsupportedFileTypeErrorLabel: string;
+ UnexpectedErrorLabel: string;
+ CommandBarAriaLabel: string;
+ MoreCommandAriaLabel: string;
+ MaxSizeExceededErrorLabel: string;
+ ErrorLabel: string;
+ CloseLabel: string;
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ InstructionsFieldLabel: string;
+ AzureGroupName: string;
+ AzureGroupMarkdown: string;
+ AzureKey: string;
+ AzureEndPoint: string;
+ BasicInstructions: string;
+ SuccessMessage: string;
+}
+
+declare module 'ProfilePhotoEditorWebPartStrings' {
+ const strings: IProfilePhotoEditorWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-smart-profile-photo-editor/teams/8a6108f9-4648-403d-b3bb-75e1a451fffd_color.png b/samples/react-smart-profile-photo-editor/teams/8a6108f9-4648-403d-b3bb-75e1a451fffd_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/react-smart-profile-photo-editor/teams/8a6108f9-4648-403d-b3bb-75e1a451fffd_color.png differ
diff --git a/samples/react-smart-profile-photo-editor/teams/8a6108f9-4648-403d-b3bb-75e1a451fffd_outline.png b/samples/react-smart-profile-photo-editor/teams/8a6108f9-4648-403d-b3bb-75e1a451fffd_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/react-smart-profile-photo-editor/teams/8a6108f9-4648-403d-b3bb-75e1a451fffd_outline.png differ
diff --git a/samples/react-smart-profile-photo-editor/tsconfig.json b/samples/react-smart-profile-photo-editor/tsconfig.json
new file mode 100644
index 000000000..56e33450c
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/tsconfig.json
@@ -0,0 +1,39 @@
+{
+ "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",
+ "src/**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/react-smart-profile-photo-editor/tslint.json b/samples/react-smart-profile-photo-editor/tslint.json
new file mode 100644
index 000000000..23fa2aa43
--- /dev/null
+++ b/samples/react-smart-profile-photo-editor/tslint.json
@@ -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
+ }
+}
\ No newline at end of file
diff --git a/samples/react-spupsproperty-sync/README.md b/samples/react-spupsproperty-sync/README.md
index 91107f52c..6e7f104ab 100644
--- a/samples/react-spupsproperty-sync/README.md
+++ b/samples/react-spupsproperty-sync/README.md
@@ -30,7 +30,7 @@ This component will help the administrators who are currently maintaining the us
* **Anytime access** to the template files generated with different property set and the files uploaded for bulk update.
* Separate section to check the **status** of the property update. **Detailed status** on each property and also display the overall status.
* **Azure Function** to handle the property update. **PnPPowershell** is used in Azure Function.
-* The application supports **SPA**.
+* The application supports **SPA** (Single Page Application).
> **_Note_**: All the supporting lists were created when the web part is loaded for the first time. Whenever the web part is loaded, the supported lists were checked whether it exists or not.
diff --git a/samples/vue-js-org-chart/package-lock.json b/samples/vue-js-org-chart/package-lock.json
index c54e28951..3de393d67 100644
--- a/samples/vue-js-org-chart/package-lock.json
+++ b/samples/vue-js-org-chart/package-lock.json
@@ -5629,9 +5629,9 @@
"dev": true
},
"elliptic": {
- "version": "6.4.1",
- "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
- "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==",
+ "version": "6.5.3",
+ "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+ "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
"dev": true,
"requires": {
"bn.js": "^4.4.0",
diff --git a/samples/vue-js-org-chart/yarn.lock b/samples/vue-js-org-chart/yarn.lock
index 8128d054c..d56132b16 100644
--- a/samples/vue-js-org-chart/yarn.lock
+++ b/samples/vue-js-org-chart/yarn.lock
@@ -2116,9 +2116,9 @@ bluebird@^3.1.1:
integrity sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==
bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
- version "4.11.8"
- resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
- integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+ version "4.11.9"
+ resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+ integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
body-parser@1.18.3:
version "1.18.3"
@@ -3349,9 +3349,9 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.133:
integrity sha512-xXLNstRdVsisPF3pL3H9TVZo2XkMILfqtD6RiWIUmDK2sFX1Bjwqmd8LBp0Kuo2FgKO63JXPoEVGm8WyYdwP0Q==
elliptic@^6.0.0:
- version "6.4.1"
- resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
- integrity sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==
+ version "6.5.3"
+ resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+ integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
dependencies:
bn.js "^4.4.0"
brorand "^1.0.1"
@@ -4917,16 +4917,21 @@ inherits@1:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-1.0.2.tgz#ca4309dadee6b54cc0b8d247e8d7c7a0975bdc9b"
integrity sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
- version "2.0.3"
- resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
- integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+ integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
inherits@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
+inherits@2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+ integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
ini@^1.3.4, ini@~1.3.0:
version "1.3.5"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
diff --git a/samples/vuejs-todo-single-file-component/package-lock.json b/samples/vuejs-todo-single-file-component/package-lock.json
index 3d0fffb40..257d0158a 100644
--- a/samples/vuejs-todo-single-file-component/package-lock.json
+++ b/samples/vuejs-todo-single-file-component/package-lock.json
@@ -6375,9 +6375,9 @@
"dev": true
},
"elliptic": {
- "version": "6.5.2",
- "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
- "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+ "version": "6.5.3",
+ "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+ "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
"dev": true,
"requires": {
"bn.js": "^4.4.0",
@@ -14400,7 +14400,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
- "dev": true,
"requires": {
"safe-buffer": "^5.1.0"
}
@@ -14980,8 +14979,7 @@
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
- "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
- "dev": true
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
},
"safe-regex": {
"version": "1.1.0",
@@ -15227,9 +15225,12 @@
"dev": true
},
"serialize-javascript": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
- "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw=="
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+ "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+ "requires": {
+ "randombytes": "^2.1.0"
+ }
},
"serve-index": {
"version": "1.9.1",
diff --git a/samples/vuejs-todo-single-file-component/package.json b/samples/vuejs-todo-single-file-component/package.json
index 4e37b83b6..55e010454 100644
--- a/samples/vuejs-todo-single-file-component/package.json
+++ b/samples/vuejs-todo-single-file-component/package.json
@@ -18,7 +18,7 @@
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-template-compiler": "^2.6.11",
- "serialize-javascript": ">=2.1.1",
+ "serialize-javascript": ">=3.1.0",
"lodash.template": ">=4.5.0"
},
"devDependencies": {
this.fileBrowser = elm}
+ onClick={browseFiles}
+ {...getDropZoneProps({
+ className: styles.hiddenDropZone
+ })}
+ />
+
+ ) : (
+ this.fileBrowser = elm}
+ onClick={browseFiles}
+ {...getDropZoneProps({
+ className: styles.dropZone
+ })}
+ >
+
+ )}
+
+ )}
+
+ {this.state.showWebCamDialog &&
+
+ {this.props.instructions}
+
+