Skip to content

Commit

Permalink
commit chnages no imagePicker
Browse files Browse the repository at this point in the history
  • Loading branch information
joaojmendes committed Oct 18, 2024
1 parent 61888ba commit c1a3c05
Show file tree
Hide file tree
Showing 11 changed files with 1,624 additions and 1,471 deletions.
2,286 changes: 1,247 additions & 1,039 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"prepare": "husky install"
},
"dependencies": {
"@emotion/css": "^11.13.4",
"@fluentui/merge-styles": "8.5.12",
"@fluentui/react": "8.106.4",
"@fluentui/react-components": "^9.32.1",
Expand Down
46 changes: 29 additions & 17 deletions src/controls/imagePicker/ImagePicker.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,40 @@
import * as React from "react";
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';

import strings from "ControlStrings";
import { useAtom } from "jotai";
import strings from 'ControlStrings';
import { useAtom } from 'jotai';

import { css } from '@emotion/css';
import {
Button,
Image,
} from "@fluentui/react-components";
} from '@fluentui/react-components';
import {
Delete16Regular,
Image20Regular,
} from "@fluentui/react-icons";
import { BaseComponentContext } from "@microsoft/sp-component-base";
} from '@fluentui/react-icons';
import { BaseComponentContext } from '@microsoft/sp-component-base';

import { contextState } from "./atoms/contextState";
import { IFilePickerResult } from "./IFilePickerResult";
import { contextState } from './atoms/contextState';
import { IFilePickerResult } from './IFilePickerResult';
/* import { RenderSpinner } from "./RenderSpninner/RenderSpinner"; */
import { SelectFromSharePoint } from "./selectFromSharePoint";
import { useImagePickerStyles } from "./useImagePickerStyles";
import { SelectFromSharePoint } from './selectFromSharePoint';
import { useImagePickerStyles } from './useImagePickerStyles';

const maxWidth = 200;
const maxHeight = 200;

const useStyles = () => {
return {
image: css({
minWidth: maxWidth,
maxWidth: maxWidth,
height: maxHeight,
objectPosition: "top center",
}),
};
};

export interface IImagePickerProps {
onFileSelected: (file: IFilePickerResult) => void;
Expand All @@ -39,6 +56,7 @@ const RenderPreviewImage = (props: { selectedImageFileUrl: string }): JSX.Elemen
const maxWidth = 200;
const maxHeight = 200;
const styles = useImagePickerStyles();
const imageStyles = useStyles();

if (!selectedImageFileUrl) {
return null;
Expand All @@ -47,12 +65,7 @@ const RenderPreviewImage = (props: { selectedImageFileUrl: string }): JSX.Elemen
return (
<>
<div className={styles.renderImageContainer}>
<Image
src={selectedImageFileUrl}
fit="cover"
style={{ minWidth: maxWidth, maxWidth: maxWidth, height: maxHeight }}
alt="Selected Image"
/>
<Image src={selectedImageFileUrl} fit="cover" className={imageStyles.image} alt="Selected Image" />
</div>
</>
);
Expand Down Expand Up @@ -130,7 +143,6 @@ export const ImagePicker: React.FunctionComponent<IImagePickerProps> = (
onFileSelected={async (file: IFilePickerResult) => {
onFileSelected(file);
setSelectedImageFileUrl(file.previewDataUrl);

onDismiss();
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/controls/imagePicker/constants/constants.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@



export const IMG_SUPPORTED_EXTENSIONS = ".gif,.jpg,.jpeg,.png,.svg";
export const IMG_SUPPORTED_EXTENSIONS = "gif,jpg,jpeg,png,svg";
export const CONTENT_IMAGE_STOCK_URL = `https://hubblecontent.osi.office.net/contentsvc/m365contentpicker/index.html?p=3&app=1001&aud=prod&channel=devmain&setlang=${"en"}&msel=0&env=prod&premium=1`;
export const CONTENT_URL = "https://hubblecontent.osi.office.net";
export const UPLOAD_FOLDER_NAME = "My assets";
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
190 changes: 105 additions & 85 deletions src/controls/imagePicker/hooks/useGrapAPI.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from "react";
import * as React from 'react';

import { BaseComponentContext } from "@microsoft/sp-component-base";
import { BaseComponentContext } from '@microsoft/sp-component-base';

import { ISearchImagesResult } from "../models/ISearchImagesResult";
import { ISearchResult } from "../models/ISearchResult";
import { ISearchSiteAssetsResult } from "../models/ISearchSiteAssetsResult";
import { ISearchImagesResult } from '../models/ISearchImagesResult';
import { ISearchResult } from '../models/ISearchResult';
import { ISearchSiteAssetsResult } from '../models/ISearchSiteAssetsResult';

interface IuseGraphAPI {
searchImages: (query: string, from: number) => Promise<ISearchResult>;
Expand All @@ -19,105 +19,125 @@ export const useGraphAPI = (context: BaseComponentContext): IuseGraphAPI => {
return await context.msGraphClientFactory.getClient("3");
}, [context]);

const searchImages = React.useCallback(async (query: string, from: number = 0): Promise<ISearchResult> => {
const queryImages = query.match(/\.jpg|\.png/g);
if (!queryImages || !graphClient) return undefined;
const searchResults = await (await graphClient).api("/search/query").post({
requests: [
{
entityTypes: ["driveItem"],
query: {
queryString: query,
},
fields: [
"editor",
"driveId",
"Title",
"Path",
"Filename",
"FileExtension",
"FileType",
"Created",
"Author",
"LastModifiedTime",
"EditorOwsUser",
"ModifiedBy",
"LinkingUrl",
"SiteTitle",
"ParentLink",
"DocumentPreviewMetadata",
"ListID",
"ListItemID",
"SPSiteURL",
"SiteID",
"WebId",
"UniqueID",
"SPWebUrl",
"DefaultEncodingURL",
"PictureThumbnailURL",
const searchImages = React.useCallback(
async (query: string, from: number = 0): Promise<ISearchResult> => {
if (!query || !graphClient) return undefined;
try {
const client = await graphClient;

const searchResults = await client.api("/search/query").post({
requests: [
{
entityTypes: ["driveItem"],
query: {
queryString: `${query} AND -driveitem:""`,
},
fields: [
"editor",
"driveId",
"Title",
"Path",
"Filename",
"FileExtension",
"FileType",
"Created",
"Author",
"LastModifiedTime",
"EditorOwsUser",
"ModifiedBy",
"LinkingUrl",
"SiteTitle",
"ParentLink",
"DocumentPreviewMetadata",
"ListID",
"ListItemID",
"SPSiteURL",
"SiteID",
"WebId",
"UniqueID",
"SPWebUrl",
"DefaultEncodingURL",
"PictureThumbnailURL",
"DriveItem",
"UniqueId",
"BannerImageUrlOWSURLH",
],
from: from,
size: 50,
},
],
from: from,
size: 50,
},
],
});
const hasMoreResults = searchResults.value[0]?.hitsContainers[0]?.moreResultsAvailable;
const total = searchResults.value[0]?.hitsContainers[0]?.total;
const fields = searchResults.value[0]?.hitsContainers[0]?.hits?.map((hit: { resource: { listItem: any } }) => {
return { ...hit.resource?.listItem.fields, id: hit.resource?.listItem.id };
}) as ISearchImagesResult[];
return { fields, hasMoreResults, total };
}, []);
});
const hasMoreResults = searchResults.value[0]?.hitsContainers[0]?.moreResultsAvailable;
const total = searchResults.value[0]?.hitsContainers[0]?.total;
const fields = searchResults.value[0]?.hitsContainers[0]?.hits?.map((hit: { resource: { listItem: any } }) => {
return { ...hit.resource?.listItem.fields, id: hit.resource?.listItem.id };
}) as ISearchImagesResult[];
return { fields, hasMoreResults, total };
} catch (error) {
console.error("[searchImages] error:", error);
throw error;
}
},
[graphClient]
);

const getDriveItemDownloadUrl = React.useCallback(
async (driveId: string, itemId: string): Promise<string> => {
if (!graphClient || !driveId || !itemId) return undefined;
try {
const driveItem = await (await graphClient)
const client = await graphClient;
const driveItem = await client
.api(`/drives/${driveId}/items/${itemId}[email protected]`)
.get();
return driveItem["@microsoft.graph.downloadUrl"];
} catch (error) {
console.log("[getDriveItemDownloadUrl] error:", error);
console.error("[getDriveItemDownloadUrl] error:", error);
throw error;
}
},
[graphClient]
);

const getSiteAssetsLibrary = React.useCallback(async (site: string): Promise<ISearchSiteAssetsResult> => {
if (!site || !graphClient) return undefined;
const query = `path:${site}/SiteAssets`;
const searchResults = await (await graphClient).api("/search/query").post({
requests: [
{
entityTypes: ["drive"],
query: {
queryString: query,
},
fields: [
"editor",
"driveId",
"Title",
"Path",
"Filename",
"FileExtension",
"id",
"name",
"path",
"parentReference",
const getSiteAssetsLibrary = React.useCallback(
async (site: string): Promise<ISearchSiteAssetsResult> => {
if (!site || !graphClient) return undefined;
try {
const client = await graphClient;
const query = `path:${site}/SiteAssets`;
const searchResults = await client.api("/search/query").post({
requests: [
{
entityTypes: ["drive"],
query: {
queryString: query,
},
fields: [
"editor",
"driveId",
"Title",
"Path",
"Filename",
"FileExtension",
"id",
"name",
"path",
"parentReference",
],
},
],
},
],
});
});

const fields = searchResults.value[0]?.hitsContainers[0]?.hits?.map(
(hit: { resource: ISearchSiteAssetsResult }) => {
return { ...hit.resource };
const fields = searchResults.value[0]?.hitsContainers[0]?.hits?.map(
(hit: { resource: ISearchSiteAssetsResult }) => ({ ...hit.resource })
) as ISearchSiteAssetsResult[];
return fields[0];
} catch (error) {
console.error("[getSiteAssetsLibrary] error:", error);
throw error;
}
) as ISearchSiteAssetsResult;
return fields[0];
}, []);
},
[graphClient]
);

return {
searchImages,
Expand Down
Loading

0 comments on commit c1a3c05

Please sign in to comment.