@orangelogic/orange-dam-content-browser-sdk 2.1.20 → 2.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CBSDKdemo.html +2 -2
- package/gab_extension/GAB.html +2 -2
- package/package.json +1 -1
- package/src/App.tsx +13 -1
- package/src/AppContext.ts +1 -0
- package/src/consts/data.ts +2 -0
- package/src/index.tsx +13 -2
- package/src/store/search/search.api.ts +11 -1
package/CBSDKdemo.html
CHANGED
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
|
8
8
|
|
|
9
|
-
<script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.
|
|
9
|
+
<script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.22/OrangeDAMContentBrowserSDK.min.js"></script>
|
|
10
10
|
<link rel="stylesheet" type="text/css"
|
|
11
|
-
href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.
|
|
11
|
+
href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.22/OrangeDAMContentBrowserSDK.min.css">
|
|
12
12
|
|
|
13
13
|
<style>
|
|
14
14
|
* {
|
package/gab_extension/GAB.html
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
|
|
6
|
-
<script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.
|
|
6
|
+
<script src="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.22/OrangeDamAssetBrowser.min.js"></script>
|
|
7
7
|
<link rel="stylesheet" type="text/css"
|
|
8
|
-
href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.
|
|
8
|
+
href="https://downloads.orangelogic.com/Cortex/AssetBrowser/v2.1.22/OrangeDamAssetBrowser.min.css">
|
|
9
9
|
<style>
|
|
10
10
|
#orangelogic-GAB-browser-wrapper {
|
|
11
11
|
min-width: 382px;
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -34,8 +34,8 @@ import '@orangelogic-private/design-system/components/tree';
|
|
|
34
34
|
import '@orangelogic-private/design-system/components/tree-item';
|
|
35
35
|
import '@orangelogic-private/design-system/components/typography';
|
|
36
36
|
import '@orangelogic-private/design-system/css/ol-light.css';
|
|
37
|
-
|
|
38
37
|
import '@orangelogic-private/design-system/react-types';
|
|
38
|
+
|
|
39
39
|
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
|
40
40
|
import styled from 'styled-components';
|
|
41
41
|
import WebFont from 'webfontloader';
|
|
@@ -43,6 +43,9 @@ import WebFont from 'webfontloader';
|
|
|
43
43
|
import { AppContext, AppContextType } from '@/AppContext';
|
|
44
44
|
import AssetsPicker from '@/view/AssetsPicker';
|
|
45
45
|
|
|
46
|
+
import { useAppSelector } from './store';
|
|
47
|
+
import { accessTokenSelector } from './store/auth/auth.slice';
|
|
48
|
+
|
|
46
49
|
type Props = {
|
|
47
50
|
containerId?: string;
|
|
48
51
|
extraFields?: string[];
|
|
@@ -60,6 +63,7 @@ type Props = {
|
|
|
60
63
|
onAssetSelected: AppContextType['onAssetSelected'];
|
|
61
64
|
onImageSelected: AppContextType['onImageSelected'];
|
|
62
65
|
onConnectClicked: () => void;
|
|
66
|
+
onTokenChanged?: (token: string) => void;
|
|
63
67
|
};
|
|
64
68
|
|
|
65
69
|
const Container = styled.div<{ open?: boolean }>`
|
|
@@ -84,7 +88,9 @@ export const App: FC<Props> = ({
|
|
|
84
88
|
onAssetSelected,
|
|
85
89
|
onImageSelected,
|
|
86
90
|
onConnectClicked,
|
|
91
|
+
onTokenChanged,
|
|
87
92
|
}) => {
|
|
93
|
+
const accessToken = useAppSelector(accessTokenSelector);
|
|
88
94
|
const [open, setOpen] = useState(true);
|
|
89
95
|
|
|
90
96
|
useEffect(() => {
|
|
@@ -106,6 +112,12 @@ export const App: FC<Props> = ({
|
|
|
106
112
|
}
|
|
107
113
|
}, [loadExternalFonts]);
|
|
108
114
|
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
if (onTokenChanged && accessToken) {
|
|
117
|
+
onTokenChanged(accessToken);
|
|
118
|
+
}
|
|
119
|
+
}, [accessToken, onTokenChanged]);
|
|
120
|
+
|
|
109
121
|
const handleClose = useCallback(() => {
|
|
110
122
|
setOpen(false);
|
|
111
123
|
onClose?.();
|
package/src/AppContext.ts
CHANGED
package/src/consts/data.ts
CHANGED
|
@@ -12,6 +12,8 @@ export const FIELD_SCRUB_URL = 'ScrubURL';
|
|
|
12
12
|
export const FIELD_SUBTYPE = 'CoreField.DocSubType';
|
|
13
13
|
export const FIELD_TITLE_WITH_FALLBACK = 'CoreField.TitleWithFallback';
|
|
14
14
|
export const FIELD_HAS_BROWSER_CHILDREN = 'Document.HasBrowserChildren';
|
|
15
|
+
export const FIELD_ORIGINAL_FILE_NAME = 'CoreField.OriginalFileName';
|
|
16
|
+
export const FIELD_UPDATED_FILE_NAME = 'CoreField.UpdatedFileName';
|
|
15
17
|
export const LIBRARY_NAME = 'Library';
|
|
16
18
|
export const MESSAGE_NEW_LINE = '\n';
|
|
17
19
|
export const ORIGINAL_VIEW_SIZE = 'CoreField.OriginalPreview';
|
package/src/index.tsx
CHANGED
|
@@ -50,14 +50,18 @@ type OrangeDAMContentBrowser = {
|
|
|
50
50
|
* Callback when we make an action on the asset
|
|
51
51
|
*/
|
|
52
52
|
onAssetAction?: AppContextType['onAssetAction'];
|
|
53
|
-
|
|
53
|
+
/**
|
|
54
54
|
* Callback when the user clicks Connect button
|
|
55
55
|
* Currently, it is used only for Canva integration
|
|
56
56
|
* because Canva blocks the CBSDK from opening new tab
|
|
57
57
|
* without using its predefined method.
|
|
58
58
|
* https://www.canva.dev/docs/apps/design-guidelines/external-links/#only-open-links-with-requestopenexternalurl
|
|
59
|
-
|
|
59
|
+
*/
|
|
60
60
|
onConnectClicked?: () => void;
|
|
61
|
+
/**
|
|
62
|
+
* Callback when the token is changed
|
|
63
|
+
*/
|
|
64
|
+
onTokenChanged?: (token: string) => void;
|
|
61
65
|
/**
|
|
62
66
|
* whether you want to select multiple assets
|
|
63
67
|
*/
|
|
@@ -260,6 +264,7 @@ const ContentBrowser: OrangeDAMContentBrowser = {
|
|
|
260
264
|
onError,
|
|
261
265
|
onClose,
|
|
262
266
|
onRequestToken,
|
|
267
|
+
onTokenChanged,
|
|
263
268
|
availableRepresentativeSubtypes,
|
|
264
269
|
allowedExtensions,
|
|
265
270
|
allowedFolders,
|
|
@@ -347,6 +352,10 @@ const ContentBrowser: OrangeDAMContentBrowser = {
|
|
|
347
352
|
typeof onImageSelected === 'function' && !!onImageSelected
|
|
348
353
|
? onImageSelected
|
|
349
354
|
: console.log;
|
|
355
|
+
const onTokenChangedHandler =
|
|
356
|
+
typeof onTokenChanged === 'function' && !!onTokenChanged
|
|
357
|
+
? onTokenChanged
|
|
358
|
+
: undefined;
|
|
350
359
|
const handleClose = () => {
|
|
351
360
|
store.dispatch(resetImportStatus());
|
|
352
361
|
store.dispatch(searchApi.util.resetApiState());
|
|
@@ -406,6 +415,8 @@ const ContentBrowser: OrangeDAMContentBrowser = {
|
|
|
406
415
|
onImageSelected={imageSelectedHandler}
|
|
407
416
|
onClose={handleClose}
|
|
408
417
|
onConnectClicked={onConnectClicked!}
|
|
418
|
+
onTokenChanged={onTokenChangedHandler}
|
|
419
|
+
|
|
409
420
|
/>
|
|
410
421
|
</GlobalConfigContext.Provider>
|
|
411
422
|
</Provider>,
|
|
@@ -6,6 +6,8 @@ import {
|
|
|
6
6
|
FIELD_HAS_BROWSER_CHILDREN,
|
|
7
7
|
FIELD_IDENTIFIER, FIELD_KEYWORDS, FIELD_MAX_HEIGHT, FIELD_MAX_WIDTH, FIELD_SCRUB_URL, FIELD_SUBTYPE, FIELD_TITLE_WITH_FALLBACK, FIELD_ALLOW_ATS_LINK,
|
|
8
8
|
FIELD_RECORD_ID,
|
|
9
|
+
FIELD_ORIGINAL_FILE_NAME,
|
|
10
|
+
FIELD_UPDATED_FILE_NAME,
|
|
9
11
|
} from '@/consts/data';
|
|
10
12
|
import { Asset, Folder, GetContentRequest, GetContentResponse, GetFavoritesResponse } from '@/types/search';
|
|
11
13
|
import { AppBaseQuery, GetValueByKeyCaseInsensitive } from '@/utils/api';
|
|
@@ -306,6 +308,8 @@ export const searchApi = createApi({
|
|
|
306
308
|
['fields', FIELD_IDENTIFIER],
|
|
307
309
|
['fields', FIELD_EXTENSION],
|
|
308
310
|
['fields', FIELD_RECORD_ID],
|
|
311
|
+
['fields', FIELD_ORIGINAL_FILE_NAME],
|
|
312
|
+
['fields', FIELD_UPDATED_FILE_NAME],
|
|
309
313
|
['seeThru', isSeeThrough],
|
|
310
314
|
['start', start],
|
|
311
315
|
['limit', pageSize],
|
|
@@ -352,9 +356,15 @@ export const searchApi = createApi({
|
|
|
352
356
|
items:
|
|
353
357
|
response.contentItems?.map((item) => {
|
|
354
358
|
let extension = GetValueByKeyCaseInsensitive(item.fields, FIELD_EXTENSION) ?? '';
|
|
359
|
+
let name = GetValueByKeyCaseInsensitive(item.fields, FIELD_UPDATED_FILE_NAME);
|
|
355
360
|
if (extension && !extension.startsWith('.')) {
|
|
356
361
|
extension = '.' + extension;
|
|
357
362
|
}
|
|
363
|
+
|
|
364
|
+
if (isNullOrWhiteSpace(name)) {
|
|
365
|
+
name = GetValueByKeyCaseInsensitive(item.fields, FIELD_ORIGINAL_FILE_NAME);
|
|
366
|
+
}
|
|
367
|
+
|
|
358
368
|
return {
|
|
359
369
|
docType: GetValueByKeyCaseInsensitive(item.fields, FIELD_DOC_TYPE) ?? '',
|
|
360
370
|
docSubType: GetValueByKeyCaseInsensitive(item.fields, FIELD_SUBTYPE) ?? '',
|
|
@@ -364,7 +374,7 @@ export const searchApi = createApi({
|
|
|
364
374
|
identifier: GetValueByKeyCaseInsensitive(item.fields, FIELD_IDENTIFIER) ?? '',
|
|
365
375
|
imageUrl: GetValueByKeyCaseInsensitive(item.fields, DEFAULT_VIEW_SIZE) ?? '',
|
|
366
376
|
originalUrl: GetValueByKeyCaseInsensitive(item.fields, ORIGINAL_VIEW_SIZE) ?? '',
|
|
367
|
-
name:
|
|
377
|
+
name: name ?? '',
|
|
368
378
|
scrubUrl: GetValueByKeyCaseInsensitive(item.fields, FIELD_SCRUB_URL) ?? '',
|
|
369
379
|
size: GetValueByKeyCaseInsensitive(item.fields, FIELD_FILE_SIZE) ?? '0 MB',
|
|
370
380
|
tags: GetValueByKeyCaseInsensitive(item.fields, FIELD_KEYWORDS) ?? '',
|