DocumentSigner React components
@castandcrew/document-signer-react NPM packge provides following React components:
DocumentViewer
Import:
import DocumentViewer from '@castandcrew/document-signer-react/DocumentViewer';
or;
import { DocumentViewer } from '@castandcrew/document-signer-react';
Props:
| Name | Type | Default | Description |
|---|---|---|---|
| actionBarProps | ActionBar.props | ActionBar component properties | |
| actionButtons | Array<React.Component> | ActionBar buttons | |
| activeRoleId | null | ||
| activeRuleGroupId | null | ||
| classes | Object | ||
| className | String | ||
| currentDocument | Object | ||
| documentMappingMode | Boolean | false | |
| getDocumentImageUrls | func(documentId: String, page: Integer) | ||
| goToField | func(String) | ||
| nextDocId | String | ||
| prevDocId | String | ||
| renderField | func(Object) | ||
| setCurrentDocument | func(String) | ||
| sideBar | React.Component | ||
| throwFatalError | func | Fatal error handler | |
| withSidebar | Boolean | false | Render sidebar? |
| selectedDocIds | `Array' | [] | |
| isPreviewDocument | Boolean | `false |
DocumentSigner
Import:
import DocumentSigner from '@castandcrew/document-signer-react/DocumentSigner';
or;
import { DocumentSigner } from '@castandcrew/document-signer-react';
Props:
| Name | Type | Default | Description |
|---|---|---|---|
| actions | { submit?: Action, cancel?: Action, save?: Action } | Action object is defined as { text: String, action: func(docs: [Object])} | |
| actor | { name: String, initials: String } | Document Actor data | |
| canApproveOffers | Boolean | Can Actor approve offers? (We want to remove this) | |
| classes | { root?: CSSObject, busyOverlay?: CSSObject, busyContainer?: CSSObject, documentSelector?: CSSObject, documentViewer?: CSSObject } | CSSObject is a Object defining CSS rules | |
| className | String | Additional CSS class name for the root HTML element | |
| documents | Array<Object> | Array of document objects received from Document-Signer API application | |
| featureFlags | Array<String> | Array of enabled Feature-Flag names | |
| getDocumentImageUrls | func(documentId: UUID, page: Int) | Function to retreive image for the specific document page | |
| isDocOne | Bool | false | Is there only 1 document to sign? (We want to remove this) |
| isSaveSignatureEnabled | Bool | Should we offer to save signature for the session lifetime? | |
| me | Object | Authneticated user information | |
| offer | Object | Offer information | |
| onDocumentComplete | func({ documentId, hasNextIncompleteDocument, continue }) | Reskin only. See onDocumentComplete | |
| showI9Note | Bool | Should we show notification message for I-9 documents? | |
| styledEngineInjectFirst | Boolean | false | Should StyledEngineProvider inject CSS first? |
| templatesAcknowledgeNotes | String | Acknowledgement Notes | |
| templatesAcknowledgeTitle | String | Acknowledgement Title | |
| throwFatalError | func(message: String) | Fatal error handler |
Reskin-only props (DocumentSigner.reskin):
| Name | Type | Default | Description |
|---|---|---|---|
| pendingReviewDocumentIds | Array<String | Number> | [] | Documents waiting on a review outside the signer. They show "Form is incomplete" with a warning icon and keep the submit button disabled. |
| renderDocumentBanner | func(currentDocument: Object) => Node | Content rendered above the current document's page image, eg. an alert. Return null for no banner. |
onDocumentComplete
Optional, desktop reskin (DocumentSigner.reskin) only. Called once each time a
document becomes complete and valid (all required fields filled, no document or
field errors, and not pending review). Reopening or re-editing an already complete document does not call
it again; it is called again only if the document becomes incomplete or invalid
and then complete again. The payload is:
documentId: the completed document id.hasNextIncompleteDocument: whether an incomplete document follows it.continue(): navigates to the next incomplete document after it, resolved when called; does nothing if there is none.
When this prop is provided, the built-in success notification is not shown, so the consumer is responsible for its own notice. Error and save notifications are unchanged. Without it, the signer behaves as before.
MobileDocumentPane
Import:
import MobileDocumentPane from '@castandcrew/document-signer-react/MobileDocumentPane';
or;
import { MobileDocumentPane } from '@castandcrew/document-signer-react';
Props:
| Name | Type | Default | Description |
|---|---|---|---|
| actor | Object | ||
| className | String | ||
| isAutosignActive | Boolean | ||
| onChangeInput | func(inputId, value) | ||
| onDoubleClick | func(Event) | ||
| onFocusInput | func(inputId) | ||
| onNeedPage | func(pageIndex) | ||
| onPageLoadError | func(index, error, tryCount) | ||
| pageHeight | Integer | ||
| pages | Integer | ||
| pageWidth | Integer | ||
| scrollContainer | HTMLElement | ||
| selectedInputId | String | ||
| zoom | Integer |