Skip to content

Commit aecd9dd

Browse files
ZipingLZipingL
committed
fix: update dependencies, and update logic on preview render with callback, remove accidental ignore of types in src
1 parent acff9e0 commit aecd9dd

File tree

7 files changed

+622
-1
lines changed

7 files changed

+622
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ build
33
.env
44
dist
55
lib
6-
types
6+
./types

‎src/types/index.tsx‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
import React from "react";
2+
3+
4+
/**
5+
* @description - props for ReactViewAdobe component which is a wrapper around Adobe PDF Viewer SDK
6+
* @param useReactHookWhenLoadingAdobeAPI - provides customizability in specifying a certain type of React Hook to use when loading the Adobe Embed API SDK into the DOM
7+
* @param useReactHookWhenCallingAdobeAPI - provides customizability in specifying a certain type of React Hook to use when calling the Adobe Embed API Services
8+
* @param useReactHookForAdobeAPIConfigs - provides customizability in specifying a certain type of React Hook to use for creating parameters or inputs required by Adobe Embed API Services
9+
* @param useReactHookForComponentDidUpdate - provides customizability in specifying a certain type of React Hook to use for listening to component updates, to allow for complex nested rerender trigger/chaining
10+
* @param triggerAdobeDCViewRender - when true, a call to Adobe Embed API Services is made that also ensures that a React Render is triggered in tandem. This is particularly useful when using Adobe Embed API Services in a Lightbox mode, in which
11+
* expects that by default, the PDF is only rendered after a form of trigger or user interaction. E.g., for instance, if there is a button that is clicked which then toggles a React
12+
* state variable, passing this variable here will allow for the button to hence trigger rendering of the Lightbox mode PDF.
13+
*/
14+
export type ReactViewAdobeProps = {
15+
/**
16+
* The URL string of a PDF to be rendered.
17+
* @example
18+
* const url = "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf";
19+
*/
20+
url: string;
21+
/**
22+
* Required Access Token for using Adobe's Embed SDK and API Services. Obtaining clientId's are done [here](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api)
23+
* - By default you a allowed to create up to 20 clientId's for free. A clientId is tied to a specific domain that you specify when creating the clientId.
24+
* - Domains can be for example, `www.example.com` as well as `localhost` for development purposes.
25+
* - Failing to provide a clientId will result in the PDF briefily rendering at first but then disappearing after Adobe detects that the clientId is invalid.
26+
* - You may use this clientID `324caa2a91b84f688935436cd2d25217` which is configured for the domain `localhost`. Note that this means the domain only works on `localhost` as port 80 or 443, e.g. http://localhost:3000 will not work but http://localhost:80 will work.
27+
*
28+
* Visit [Adobe's credential creation page](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api) to create a clientId, as seen below.
29+
* ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-4.07.57%E2%80%AFAM.png)
30+
*/
31+
clientId: string;
32+
33+
/**
34+
* Configuration options for the Adobe Embed API SDK Viewer.
35+
* - See the type definition for `PreviewFileConfig` for more details and descriptions of each configuration option.
36+
*/
37+
previewConfig?: Partial<PreviewFileConfig>;
38+
fileMeta?: Partial<FileMetaData>;
39+
id?: string;
40+
children?: React.ReactNode;
41+
className?: string;
42+
title?: string;
43+
style?: React.CSSProperties;
44+
debug?: boolean;
45+
/**
46+
* Experimental usages only, and not needed or recommended to be used.
47+
*/
48+
useReactHookWhenLoadingAdobeAPI?: ReactHooks;
49+
/**
50+
* Experimental usages only, and not needed or recommended to be used. Allows you to specify a certain type of React Hook to use when calling the Adobe Embed API Services.
51+
*/
52+
useReactHookWhenCallingAdobeAPI?: ReactHooks;
53+
/**
54+
* Experimental usages only, and not needed or recommended to be used. Allows you to specify a certain type of React Hook to use for creating parameters or inputs required by Adobe Embed API Services.
55+
*/
56+
useReactHookForAdobeAPIConfigs?: ReactHooks;
57+
/**
58+
* Experimental usages only, and not needed or recommended to be used. Allows you to specify a certain type of React Hook to use for listening to component updates, to allow for complex nested rerender trigger/chaining.
59+
*/
60+
useReactHookForComponentDidUpdate?: ReactHooks;
61+
triggerAdobeDCViewRender?: boolean;
62+
63+
};
64+
65+
66+
/**
67+
* The parameters for the `PreviewFile` function.
68+
* @property {boolean} showZoomControl - Configures whether to display zoom controls.
69+
* @property {boolean} showAnnotationTools - Indicates whether to display annotation tools.
70+
* @property {boolean} showFullScreen - Configures whether to show the full screen toggle.
71+
* @property {DefaultViewMode} defaultViewMode - Specifies the default view mode for displaying the PDF.
72+
* @property {boolean} enableFormFilling - Indicates whether form filling is enabled.
73+
* @property {boolean} showDownloadPDF - Configures whether to show the download option.
74+
* @property {boolean} showPrintPDF - Configures whether to show the print option.
75+
* @property {boolean} showLeftHandPanel - Configures whether to show the left-hand panel.
76+
* @property {"CLOSE" | "BACK"} exitPDFViewerType - Specifies the behavior of the close button.
77+
* @property {boolean} showThumbnails - Configures whether to show thumbnails.
78+
* @property {boolean} showBookmarks - Configures whether to show the bookmarks panel.
79+
* @property {boolean} enableLinearization - Indicates whether PDF linearization is enabled.
80+
* @property {boolean} enableAnnotationAPIs - Indicates whether PDF annotation APIs are enabled.
81+
* @property {boolean} includePDFAnnotations - Indicates whether existing PDF annotations are included.
82+
* @property {boolean} enableSearchAPIs - Indicates whether PDF search APIs are enabled.
83+
* @property {"LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW"} embedMode - Specifies the embedding mode.
84+
* @property {boolean} showDisabledSaveButton - Configures whether to show the save button in a disabled state.
85+
* @property {boolean} focusOnRendering - Configures the focus behavior when rendering the PDF.
86+
* @property {boolean} showFullScreenViewButton - Configures whether to show the full-screen option.
87+
* @property {string} viewSdkViewerScript - Specifies the URL for the Adobe Embed API SDK viewer script.
88+
*/
89+
export type PreviewFileConfig = {
90+
/**
91+
* Set this to `false` to hide the zoom-in and zoom-out options available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
92+
* - Defaults as `true`
93+
*/
94+
showZoomControl: boolean;
95+
/**
96+
* If true, tools such as add text, sticky note, highlight, and so on appear in the quick tools menu on the left-hand side in full window embed mode.
97+
* - For more details, see [Comments and Markup](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/).
98+
*/
99+
showAnnotationTools: boolean;
100+
/**
101+
* By default, the full screen toggle appears in the bottom toolbar in sized container embed mode. Set this to false to hide the full screen toggle.
102+
*/
103+
showFullScreen: boolean;
104+
/**
105+
* This variable accepts one of the following string values: `"FIT_WIDTH"`, `"FIT_PAGE"`, `"TWO_COLUMN"`, or `"TWO_COLUMN_FIT_PAGE"`.
106+
* - `FIT_WIDTH`: Expands the page horizontally to the full width of the document pane.
107+
* - `FIT_PAGE`: Displays the entire page within the current view pane.
108+
* - `TWO_COLUMN`: Displays two pages of the PDF side by side in the current view pane.
109+
* - `TWO_COLUMN_FIT_PAGE`: Displays two pages of the PDF side by side, fitting both pages entirely within the current view pane. Users can also toggle the view mode using the Fit Width, Fit Page, or Two-Column buttons on the right-hand panel.
110+
*
111+
* **Additionaly**, two other view modes are supported exclusively in mobile browsers:
112+
* - `CONTINUOUS`: Displays all document pages sequentially, allowing users to navigate by scrolling up or down.
113+
* - `SINGLE_PAGE`: Displays one document page at a time without showing adjoining pages. Users can swipe to navigate to other pages, which will be displayed one at a time.
114+
*/
115+
defaultViewMode: DefaultViewMode;
116+
/** @property {boolean} enableFormFilling - description
117+
* If true, form filling is enabled and users can edit fields in full window embed mode.
118+
*/
119+
enableFormFilling: boolean;
120+
121+
/**
122+
* If true, PDF can be downloaded in all embed modes. Set this to false to disable PDF download.
123+
* - Defaults as `true`
124+
*/
125+
showDownloadPDF: boolean;
126+
/**
127+
* If true, PDF can be printed in all embed modes. Set this to false to disable PDF printing.
128+
* - Defaults as `true`
129+
* - Example:
130+
* ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.34.44%E2%80%AFAM.png)
131+
*/
132+
showPrintPDF: boolean;
133+
/**
134+
* The top bar in lightbox embed mode contains the close button by default to
135+
* close the PDF preview which can be configured to Back button by setting exitPDFViewerType to "RETURN".
136+
*/
137+
exitPDFViewerType: "CLOSE" | "BACK";
138+
/**
139+
* Whether to display thumbnails of the PDF's pages in the left-hand panel.
140+
* - Defaults as `true`
141+
*
142+
* ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.42.51%E2%80%AFAM.png)
143+
*/
144+
showThumbnails: boolean;
145+
146+
/**
147+
* PDF bookmarks are shown by default in `FULL_WINDOW` and `LIGHT_BOX` embed modes.
148+
* - Set this to `false` if you want to hide the bookmarks from the right-hand panel.
149+
*
150+
* ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.44.55%E2%80%AFAM.png)
151+
*/
152+
showBookmarks: boolean;
153+
/**
154+
* Set this to true to enable PDF linearization. For more details, see the section [PDF linearization](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#pdf-linearization).
155+
*/
156+
enableLinearization: boolean;
157+
/**
158+
* Set this to true to add, update and delete PDF annotations programmatically in full window embed mode.
159+
* For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
160+
*/
161+
enableAnnotationAPIs: boolean;
162+
/**
163+
* This configuration is used with `enableAnnotationAPIs` to access existing PDF annotations. For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
164+
*/
165+
includePDFAnnotations: boolean;
166+
/**
167+
* Set this to true to perform search operation in the PDF programmatically. For more details, see the section [Search APIs](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_ui/#search-apis).
168+
*/
169+
enableSearchAPIs: boolean;
170+
171+
/**
172+
* Defaults to `FULL_WINDOW` embed mode.
173+
* - See the section on [Embed modes](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes) for more details.
174+
*/
175+
embedMode: "LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW";
176+
177+
/**
178+
* Set this to true to show the save button in disabled state even when there are no changes to be saved to the PDF.
179+
*/
180+
showDisabledSaveButton: boolean;
181+
/**
182+
* With this configuration, website developers have the flexibility to control if the PDF should take focus when it is rendered.
183+
* | EMBED Mode | Default Value for focusOnRendering | Default Behavior |
184+
* | --------------- | ---------------------------------- | ------------------------------------------------------------------- |
185+
* | `FULL_WINDOW` | `true` | Acquires focus when PDF is rendered. |
186+
* | `LIGHT_BOX` | `false` | Doesn’t acquire focus when PDF is rendered. |
187+
* | `SIZED_CONTAINER` | `false` | Doesn’t acquire focus when PDF is rendered. |
188+
* | `IN_LINE` | `false` | Always, and required to acquire focus when PDF is rendered. |
189+
* - For more details, see the section [Focus on PDF rendering](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#focus-on-pdf-rendering).
190+
*
191+
*/
192+
focusOnRendering: boolean;
193+
194+
/**
195+
* Set this to false to hide the full-screen option available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
196+
*/
197+
showFullScreenViewButton: boolean;
198+
199+
/**
200+
* This allows you to specify the URL for the initial loading script of the Adobe Embed API SDK Mega Spaghetti Code Api, but is optional and
201+
* uses the default [URL](https://acrobatservices.adobe.com/view-sdk/viewer.js) specified from Adobe's documentation, *which has been changed twice, for odd unknowable reasons*.
202+
*/
203+
viewSdkViewerScript: string;
204+
205+
showPageControls: boolean;
206+
207+
showLeftHandPanel: boolean;
208+
209+
210+
};
211+
212+
export const DefaultConfigs: {
213+
demoUrl: string;
214+
staticDefaultConfig: {[key: string]: any};
215+
staticDivId: string;
216+
demoMetaData: Partial<FileMetaData>;
217+
} = {
218+
demoUrl:
219+
"https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf",
220+
staticDefaultConfig: {
221+
showAnnotationTools: false,
222+
showLeftHandPanel: false,
223+
embedMode: undefined,
224+
showPageControls: false,
225+
viewSdkViewerScript: "https://acrobatservices.adobe.com/view-sdk/viewer.js",
226+
showDownloadPDF: false,
227+
showPrintPDF: false,
228+
},
229+
staticDivId: "pdf-div",
230+
demoMetaData: {
231+
fileName: "Adobe Example Pdf.pdf",
232+
id: "6d07d124 - ac85–43b3 - a867–36930f502ac6",
233+
},
234+
};
235+
236+
237+
export type FileMetaData = {
238+
/**
239+
* The name of the PDF to be rendered. An example of fileName is "Bodea Brochure.pdf". Note that fileName is considered a required field but not enforced,
240+
* - The file name displays on the top bar of the rendered PDF viewer. If left empty, a noticeable empty space is shown instead.
241+
*/
242+
fileName: string;
243+
/**
244+
* Pass the PDF ID when annotation APIs are enabled to uniquely identify the PDF. For more details, see [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
245+
* - Caution: Failing to provide an id while enabling annotation options will cause the pdf to fail in rendering.
246+
*/
247+
id: string;
248+
249+
/**
250+
* Set this flag to true if you want to render the PDF in read-only mode. Commenting is not allowed and existing PDF comments are displayed as read only.
251+
*/
252+
hasReadOnlyAccess: boolean;
253+
}
254+
255+
export type DefaultViewMode = "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
256+
257+
export type ReactHooks = {
258+
[key in Extract<keyof typeof React, `use${string}`>]: [] extends Parameters<
259+
(typeof React)[key]
260+
>
261+
? never
262+
: key extends "useReducer"
263+
? never
264+
: key extends "useDeferredValue"
265+
? never
266+
: (typeof React)[key] extends (
267+
factory: React.EffectCallback,
268+
deps?: React.DependencyList | undefined,
269+
) => void
270+
? key
271+
: (typeof React)[key] extends (
272+
factory: () => any,
273+
deps: React.DependencyList | undefined,
274+
) => void
275+
? key
276+
: never;
277+
}[Extract<keyof typeof React, `use${string}`>];

‎types/AdobeDiv/index.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
declare const _default: (props: {
3+
scriptViewerLoaded?: boolean | undefined;
4+
id?: string | undefined;
5+
className?: string | undefined;
6+
title?: string | undefined;
7+
style?: React.CSSProperties | undefined;
8+
}) => React.JSX.Element;
9+
export default _default;

‎types/components/AdobeDiv/index.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react";
2+
declare const _default: (props: {
3+
scriptViewerLoaded?: boolean | undefined;
4+
id?: string | undefined;
5+
className?: string | undefined;
6+
title?: string | undefined;
7+
style?: React.CSSProperties | undefined;
8+
}) => React.JSX.Element;
9+
export default _default;

0 commit comments

Comments
 (0)