honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added functionality to show image in datatable and upgraded to SPFx 1.12.1

This commit is contained in:
chandaniprajapati 2021-06-02 12:56:26 +05:30
parent 288795d1c8
commit dc6f2f3131
8 changed files with 12221 additions and 5940 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/react-datatable/assets/preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 75 KiB

9
samples/react-datatable/gulpfile.js vendored
View File

@ -4,4 +4,13 @@ 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.`);
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
build.initialize(require('gulp'));

17632
samples/react-datatable/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
samples/react-datatable/package.json
View File

@ -12,33 +12,31 @@
"test": "gulp test"
},
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/data-grid": "^4.0.0-alpha.19",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@pnp/sp": "^2.1.1",
"@pnp/spfx-controls-react": "^2.4.0",
"@pnp/spfx-property-controls": "^2.3.0",
"@microsoft/sp-core-library": "1.12.1",
"@microsoft/sp-lodash-subset": "1.12.1",
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
"@microsoft/sp-property-pane": "1.12.1",
"@microsoft/sp-webpart-base": "1.12.1",
"@pnp/sp": "2.5.0",
"@pnp/spfx-controls-react": "3.1.0",
"@pnp/spfx-property-controls": "^3.2.0-beta.ab74df5",
"export-to-csv": "^0.2.1",
"office-ui-fabric-react": "6.214.0",
"office-ui-fabric-react": "7.156.0",
"pdfmake": "^0.1.70",
"react": "16.8.5",
"react-dom": "16.8.5"
"react": "16.9.0",
"react-dom": "16.9.0"
},
"devDependencies": {
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/react": "16.9.36",
"@types/react-dom": "16.9.8",
"@microsoft/sp-build-web": "1.12.1",
"@microsoft/sp-tslint-rules": "1.12.1",
"@microsoft/sp-module-interfaces": "1.12.1",
"@microsoft/sp-webpart-workbench": "1.12.1",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"gulp": "~3.9.1",
"gulp": "~4.0.2",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",

417
samples/react-datatable/report.20210602.124620.14768.0.001.json Normal file
View File

@ -0,0 +1,417 @@
{
"header": {
"reportVersion": 1,
"event": "Allocation failed - JavaScript heap out of memory",
"trigger": "FatalError",
"filename": "report.20210602.124620.14768.0.001.json",
"dumpEventTime": "2021-06-02T12:46:20Z",
"dumpEventTimeStamp": "1622618180110",
"processId": 14768,
"cwd": "E:\\Contribution\\New folder\\sp-dev-fx-webparts\\samples\\react-datatable",
"commandLine": [
"node",
"C:\\Users\\chand\\AppData\\Roaming\\npm\\\\node_modules\\gulp\\bin\\gulp.js",
"serve"
],
"nodejsVersion": "v12.14.1",
"wordSize": 64,
"arch": "x64",
"platform": "win32",
"componentVersions": {
"node": "12.14.1",
"v8": "7.7.299.13-node.16",
"uv": "1.33.1",
"zlib": "1.2.11",
"brotli": "1.0.7",
"ares": "1.15.0",
"modules": "72",
"nghttp2": "1.40.0",
"napi": "5",
"llhttp": "2.0.1",
"http_parser": "2.8.0",
"openssl": "1.1.1d",
"cldr": "35.1",
"icu": "64.2",
"tz": "2019c",
"unicode": "12.1"
},
"release": {
"name": "node",
"lts": "Erbium",
"headersUrl": "https://nodejs.org/download/release/v12.14.1/node-v12.14.1-headers.tar.gz",
"sourceUrl": "https://nodejs.org/download/release/v12.14.1/node-v12.14.1.tar.gz",
"libUrl": "https://nodejs.org/download/release/v12.14.1/win-x64/node.lib"
},
"osName": "Windows_NT",
"osRelease": "10.0.19042",
"osVersion": "Windows 10 Home Single Language",
"osMachine": "x86_64",
"cpus": [
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 13953359,
"nice": 0,
"sys": 15767687,
"idle": 182585796,
"irq": 5659031
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 10010015,
"nice": 0,
"sys": 4092453,
"idle": 198203953,
"irq": 369468
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 21141484,
"nice": 0,
"sys": 7090640,
"idle": 184074281,
"irq": 154328
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 12378453,
"nice": 0,
"sys": 3737593,
"idle": 196190375,
"irq": 85062
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 18379718,
"nice": 0,
"sys": 6315421,
"idle": 187611281,
"irq": 154468
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 11441718,
"nice": 0,
"sys": 3824656,
"idle": 197040031,
"irq": 110984
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 16488281,
"nice": 0,
"sys": 4759500,
"idle": 191058625,
"irq": 124890
},
{
"model": "Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz",
"speed": 1800,
"user": 12924500,
"nice": 0,
"sys": 3775546,
"idle": 195606359,
"irq": 76937
}
],
"networkInterfaces": [
{
"name": "Wi-Fi",
"internal": false,
"mac": "70:66:55:2d:c5:39",
"address": "fe80::7507:ee0b:69f6:446b",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 16
},
{
"name": "Wi-Fi",
"internal": false,
"mac": "70:66:55:2d:c5:39",
"address": "192.168.0.110",
"netmask": "255.255.255.0",
"family": "IPv4"
},
{
"name": "Loopback Pseudo-Interface 1",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "::1",
"netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
"family": "IPv6",
"scopeid": 0
},
{
"name": "Loopback Pseudo-Interface 1",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "127.0.0.1",
"netmask": "255.0.0.0",
"family": "IPv4"
}
],
"host": "DESKTOP-8QJ03GL"
},
"javascriptStack": {
"message": "No stack.",
"stack": [
"Unavailable."
]
},
"nativeStack": [
{
"pc": "0x00007ff639f91759",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+10873"
},
{
"pc": "0x00007ff639f95b7c",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+28316"
},
{
"pc": "0x00007ff639f94b38",
"symbol": "std::basic_ostream<char,std::char_traits<char> >::operator<<+24152"
},
{
"pc": "0x00007ff63a08433b",
"symbol": "v8::base::CPU::has_sse+37723"
},
{
"pc": "0x00007ff63a888c5e",
"symbol": "v8::Isolate::ReportExternalAllocationLimitReached+94"
},
{
"pc": "0x00007ff63a870ca1",
"symbol": "v8::SharedArrayBuffer::Externalize+833"
},
{
"pc": "0x00007ff63a73e56c",
"symbol": "v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436"
},
{
"pc": "0x00007ff63a749910",
"symbol": "v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312"
},
{
"pc": "0x00007ff63a746444",
"symbol": "v8::internal::Heap::PageFlagsAreConsistent+3204"
},
{
"pc": "0x00007ff63a73bcd3",
"symbol": "v8::internal::Heap::CollectGarbage+1283"
},
{
"pc": "0x00007ff63a73a4a4",
"symbol": "v8::internal::Heap::AddRetainedMap+2356"
},
{
"pc": "0x00007ff63a75b775",
"symbol": "v8::internal::Factory::NewFillerObject+53"
},
{
"pc": "0x00007ff63a4c7a49",
"symbol": "v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+4057"
},
{
"pc": "0x00007ff63acb463d",
"symbol": "v8::internal::SetupIsolateDelegate::SetupHeap+567949"
},
{
"pc": "0x000003f8677dc35a",
"symbol": ""
}
],
"javascriptHeap": {
"totalMemory": 2158989312,
"totalCommittedMemory": 2158989312,
"usedMemory": 2111357968,
"availableMemory": 51217168,
"memoryLimit": 2197815296,
"heapSpaces": {
"read_only_space": {
"memorySize": 262144,
"committedMemory": 262144,
"capacity": 261872,
"used": 32296,
"available": 229576
},
"new_space": {
"memorySize": 7340032,
"committedMemory": 7340032,
"capacity": 3666208,
"used": 451984,
"available": 3214224
},
"old_space": {
"memorySize": 2075766784,
"committedMemory": 2075766784,
"capacity": 2041666664,
"used": 2036385488,
"available": 5281176
},
"code_space": {
"memorySize": 1736704,
"committedMemory": 1736704,
"capacity": 1389824,
"used": 1389824,
"available": 0
},
"map_space": {
"memorySize": 3149824,
"committedMemory": 3149824,
"capacity": 2531280,
"used": 2531280,
"available": 0
},
"large_object_space": {
"memorySize": 70111232,
"committedMemory": 70111232,
"capacity": 70016696,
"used": 70016696,
"available": 0
},
"code_large_object_space": {
"memorySize": 622592,
"committedMemory": 622592,
"capacity": 550400,
"used": 550400,
"available": 0
},
"new_large_object_space": {
"memorySize": 0,
"committedMemory": 0,
"capacity": 3666208,
"used": 0,
"available": 3666208
}
}
},
"resourceUsage": {
"userCpuSeconds": 295.187,
"kernelCpuSeconds": 145.64,
"cpuConsumptionPercent": 93.993,
"maxRss": 2579755008,
"pageFaults": {
"IORequired": 1406918,
"IONotRequired": 0
},
"fsActivity": {
"reads": 6606,
"writes": 17
}
},
"libuv": [
],
"environmentVariables": {
"=C:": "C:\\",
"=E:": "E:\\Contribution\\New folder\\sp-dev-fx-webparts\\samples\\react-datatable",
"ALLUSERSPROFILE": "C:\\ProgramData",
"APPDATA": "C:\\Users\\chand\\AppData\\Roaming",
"CHROME_CRASHPAD_PIPE_NAME": "\\\\.\\pipe\\crashpad_13224_HSXGQWUYIBCUPTWO",
"CommonProgramFiles": "C:\\Program Files\\Common Files",
"CommonProgramFiles(x86)": "C:\\Program Files (x86)\\Common Files",
"CommonProgramW6432": "C:\\Program Files\\Common Files",
"COMPUTERNAME": "DESKTOP-8QJ03GL",
"ComSpec": "C:\\WINDOWS\\system32\\cmd.exe",
"dp0": "C:\\Users\\chand\\AppData\\Roaming\\npm\\",
"DriverData": "C:\\Windows\\System32\\Drivers\\DriverData",
"FPS_BROWSER_APP_PROFILE_STRING": "Internet Explorer",
"FPS_BROWSER_USER_PROFILE_STRING": "Default",
"HOMEDRIVE": "C:",
"HOMEPATH": "\\Users\\chand",
"INIT_CWD": "E:\\Contribution\\New folder\\sp-dev-fx-webparts\\samples\\react-datatable",
"LOCALAPPDATA": "C:\\Users\\chand\\AppData\\Local",
"LOGONSERVER": "\\\\DESKTOP-8QJ03GL",
"NUMBER_OF_PROCESSORS": "8",
"OneDrive": "C:\\Users\\chand\\OneDrive",
"OneDriveConsumer": "C:\\Users\\chand\\OneDrive",
"ORIGINAL_XDG_CURRENT_DESKTOP": "undefined",
"OS": "Windows_NT",
"Path": "C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\WINDOWS\\System32\\OpenSSH\\;C:\\Program Files\\Git\\cmd;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Program Files\\nodejs\\;C:\\Users\\chand\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Users\\chand\\AppData\\Local\\Programs\\Microsoft VS Code\\bin;C:\\Users\\chand\\AppData\\Roaming\\npm",
"PATHEXT": ".COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JSE;.WSF;.WSH;.MSC",
"PROCESSOR_ARCHITECTURE": "AMD64",
"PROCESSOR_IDENTIFIER": "Intel64 Family 6 Model 142 Stepping 12, GenuineIntel",
"PROCESSOR_LEVEL": "6",
"PROCESSOR_REVISION": "8e0c",
"ProgramData": "C:\\ProgramData",
"ProgramFiles": "C:\\Program Files",
"ProgramFiles(x86)": "C:\\Program Files (x86)",
"ProgramW6432": "C:\\Program Files",
"PROMPT": "$P$G",
"PSModulePath": "C:\\Program Files\\WindowsPowerShell\\Modules;C:\\WINDOWS\\system32\\WindowsPowerShell\\v1.0\\Modules",
"PUBLIC": "C:\\Users\\Public",
"SESSIONNAME": "Console",
"SystemDrive": "C:",
"SystemRoot": "C:\\WINDOWS",
"TEMP": "C:\\Users\\chand\\AppData\\Local\\Temp",
"TMP": "C:\\Users\\chand\\AppData\\Local\\Temp",
"USERDOMAIN": "DESKTOP-8QJ03GL",
"USERDOMAIN_ROAMINGPROFILE": "DESKTOP-8QJ03GL",
"USERNAME": "Chandani",
"USERPROFILE": "C:\\Users\\chand",
"windir": "C:\\WINDOWS",
"ZES_ENABLE_SYSMAN": "1",
"TERM_PROGRAM": "vscode",
"TERM_PROGRAM_VERSION": "1.56.2",
"LANG": "en_US.UTF-8",
"COLORTERM": "truecolor",
"VSCODE_GIT_IPC_HANDLE": "\\\\.\\pipe\\vscode-git-e76725359d-sock",
"GIT_ASKPASS": "c:\\Users\\chand\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass.sh",
"VSCODE_GIT_ASKPASS_NODE": "C:\\Users\\chand\\AppData\\Local\\Programs\\Microsoft VS Code\\Code.exe",
"VSCODE_GIT_ASKPASS_MAIN": "c:\\Users\\chand\\AppData\\Local\\Programs\\Microsoft VS Code\\resources\\app\\extensions\\git\\dist\\askpass-main.js",
"_prog": "node"
},
"sharedObjects": [
"C:\\Program Files\\nodejs\\node.exe",
"C:\\WINDOWS\\SYSTEM32\\ntdll.dll",
"C:\\WINDOWS\\System32\\KERNEL32.DLL",
"C:\\WINDOWS\\System32\\KERNELBASE.dll",
"C:\\WINDOWS\\System32\\WS2_32.dll",
"C:\\WINDOWS\\System32\\RPCRT4.dll",
"C:\\WINDOWS\\System32\\ADVAPI32.dll",
"C:\\WINDOWS\\SYSTEM32\\dbghelp.dll",
"C:\\WINDOWS\\System32\\msvcrt.dll",
"C:\\WINDOWS\\System32\\ucrtbase.dll",
"C:\\WINDOWS\\System32\\sechost.dll",
"C:\\WINDOWS\\System32\\USER32.dll",
"C:\\WINDOWS\\System32\\win32u.dll",
"C:\\WINDOWS\\System32\\GDI32.dll",
"C:\\WINDOWS\\System32\\gdi32full.dll",
"C:\\WINDOWS\\System32\\msvcp_win.dll",
"C:\\WINDOWS\\System32\\PSAPI.DLL",
"C:\\WINDOWS\\System32\\CRYPT32.dll",
"C:\\WINDOWS\\System32\\bcrypt.dll",
"C:\\WINDOWS\\SYSTEM32\\IPHLPAPI.DLL",
"C:\\WINDOWS\\SYSTEM32\\USERENV.dll",
"C:\\WINDOWS\\SYSTEM32\\WINMM.dll",
"C:\\WINDOWS\\System32\\IMM32.DLL",
"C:\\WINDOWS\\SYSTEM32\\powrprof.dll",
"C:\\WINDOWS\\SYSTEM32\\UMPDC.dll",
"C:\\WINDOWS\\SYSTEM32\\CRYPTBASE.DLL",
"C:\\WINDOWS\\system32\\uxtheme.dll",
"C:\\WINDOWS\\System32\\combase.dll",
"C:\\WINDOWS\\system32\\mswsock.dll",
"C:\\WINDOWS\\SYSTEM32\\kernel.appcore.dll",
"C:\\WINDOWS\\System32\\bcryptprimitives.dll",
"\\\\?\\E:\\Contribution\\New folder\\sp-dev-fx-webparts\\samples\\react-datatable\\node_modules\\node-sass\\vendor\\win32-x64-72\\binding.node",
"\\\\?\\E:\\Contribution\\New folder\\sp-dev-fx-webparts\\samples\\react-datatable\\node_modules\\deasync\\bin\\win32-x64-node-12\\deasync.node",
"\\\\?\\E:\\Contribution\\New folder\\sp-dev-fx-webparts\\samples\\react-datatable\\node_modules\\keytar\\build\\Release\\keytar.node",
"C:\\WINDOWS\\System32\\NSI.dll",
"C:\\WINDOWS\\SYSTEM32\\dhcpcsvc6.DLL",
"C:\\WINDOWS\\SYSTEM32\\dhcpcsvc.DLL",
"C:\\WINDOWS\\SYSTEM32\\DNSAPI.dll",
"C:\\WINDOWS\\system32\\napinsp.dll",
"C:\\WINDOWS\\system32\\pnrpnsp.dll",
"C:\\WINDOWS\\system32\\wshbth.dll",
"C:\\WINDOWS\\system32\\NLAapi.dll",
"C:\\WINDOWS\\System32\\winrnr.dll",
"C:\\Windows\\System32\\rasadhlp.dll",
"C:\\WINDOWS\\System32\\fwpuclnt.dll"
]
}

44
samples/react-datatable/src/shared/common/RenderImageOrLink/RenderImageOrLink.tsx Normal file
View File

@ -0,0 +1,44 @@
import * as React from 'react';
import * as strings from 'ReactDatatableWebPartStrings';
import { isImageUrl, isNullOrUndefined } from '../../../shared/utilities/utilities';
import { Link } from '@material-ui/core';
import { Image, IImageProps, ImageFit } from 'office-ui-fabric-react/lib/Image';
import styles from '../ExportListItemsToCSV/ExportListItemsToCSV.module.scss';
interface IImageOrLinkProps {
url: string;
description: string;
}
export function RenderImageOrLink(props: IImageOrLinkProps) {
const [isImage, setIsImage] = React.useState<boolean>();
let { url, description } = props;
React.useEffect(() => {
isImageUrl(url).then(response => {
setIsImage(response);
});
}, [props]);
return <>
{
!isNullOrUndefined(isImage) && (
isImage ? (
<Image
src={url}
alt={description}
height={50}
width={50}
onClick={() => window.location.href = url }
imageFit={ImageFit.cover}
/>
) :
(
<Link href={url} target="_blank">{description}</Link>
)
)
}
</>
}

14
samples/react-datatable/src/shared/utilities/utilities.ts
View File

@ -1,3 +1,17 @@
/** utility function to check null or undefined */
export const isNullOrUndefined = (value: any) => value === null || value === undefined;
/** check url is image url or not */
export const isImageUrl = (url: string) => {
return fetch(url, { method: "HEAD" })
.then(response => {
let contentType = response.headers.get("Content-Type");
if (contentType.match("image/*")) {
return true;
}
return false;
})
.catch(error => {
return false;
});
};

5
samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx
View File

@ -13,6 +13,7 @@ import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { ExportListItemsToCSV } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSV';
import { ExportListItemsToPDF } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDF';
import { Pagination } from '../../../shared/common/Pagination/Pagination';
import { RenderImageOrLink } from '../../../shared/common/RenderImageOrLink/RenderImageOrLink';
import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDetailsListProps, IColumn, MessageBar, SelectionMode } from 'office-ui-fabric-react';
import { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
@ -120,7 +121,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
value = value;
break;
case 'SP.FieldUrl':
value = <Link href={value['Url']} target="_blank">{value['Description']}</Link>;
let url = value['Url'];
let description = value['Description'];
value = <RenderImageOrLink url={url} description={description}></RenderImageOrLink>;
break;
case 'SP.FieldLocation':
value = JSON.parse(value).DisplayName;