-
Notifications
You must be signed in to change notification settings - Fork 2
Review Follow Ups and Refactoring #2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Changes from 12 commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
489be6b
final touches on docs
Winggo c12e43b
review changes
Winggo 5a83923
update to docs
Winggo 46fd52c
add react-signature-frame as a dependency rather than a devDependency
Winggo 861616f
add bootstrap step
Winggo 872339a
try import frame with relative path
Winggo 7801184
convert to class components
Winggo ffd6742
update react v16.8 to v16.0
Winggo e4d62a1
remove react v16.8 req
Winggo c6e715d
Publish
Winggo 309d070
component updates from review
Winggo 764437b
Publish
Winggo d6268cf
signatureFrame should have 'withinIframe' query param in signURL
Winggo 050ffcc
Update index.js
Winggo e6dcf2a
Publish
Winggo 3f12aed
add css media queries to modal
Winggo 807ed9d
extract css file for modal component
Winggo 06643ea
miniCssExtractPlugin should output styles.css
Winggo 7a8bdbb
remove enableDefaultStyles from modal component
Winggo 4c88290
update docs for styling
Winggo ffdb27b
Publish
Winggo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,7 +18,6 @@ npm install @anvilco/react-signature-frame | |
|
|
||
| ```js | ||
| import AnvilSignatureFrame from '@anvilco/react-signature-frame' | ||
| import '@anvilco/react-signature-frame/dist/styles.css' | ||
|
|
||
| <AnvilSignatureFrame | ||
| signURL={signURL} | ||
|
|
@@ -40,9 +39,10 @@ signURL={`https://app.useanvil.com/etch/8iJDbq8dkEmjrsNw7Dnb/sign?token=dsa...`} | |
| ``` | ||
|
|
||
| #### scroll | ||
| ##### string | ||
| * `auto` - scrolls the window to the signing frame when rendered | ||
| * `smooth` - smoothly scrolls the window to the signing frame when rendered | ||
| ##### string | null | ||
| * `auto` - scrolls the window to the signing frame when mounted | ||
| * `smooth` - smoothly scrolls the window to the signing frame when mounted | ||
| * `null` - disables scrolling | ||
|
|
||
| #### onLoad | ||
| ##### function | ||
|
|
@@ -64,6 +64,21 @@ onFinish={(redirectURL) => window.location.assign(redirectURL)} | |
| ``` | ||
|
|
||
|
|
||
| #### enableDefaultStyles | ||
| ##### boolean (default: true) | ||
| Set to false to disable the default inline styles of the component. | ||
|
|
||
|
|
||
| #### iframeWarningProps | ||
| ##### object | ||
| Pass in custom props into the paragraph tag displayed if the user's browser does not support iframes. | ||
|
|
||
| Example: | ||
| ```js | ||
| iframeWarningProps={{ className: 'warning-text' }} | ||
| ``` | ||
|
|
||
|
|
||
| ## AnvilSignatureModal | ||
| A modal component that handles the signing process lifecycle. Compatible with mobile viewports with minimal dependencies. | ||
|
|
||
|
|
@@ -80,7 +95,6 @@ npm install @anvilco/react-signature-modal | |
|
|
||
| ```js | ||
| import AnvilSignatureFrame from '@anvilco/react-signature-modal' | ||
| import '@anvilco/react-signature-modal/dist/styles.css' | ||
|
|
||
| <AnvilSignatureModal | ||
| signURL={signURL} | ||
|
|
@@ -135,19 +149,76 @@ onFinish={(redirectURL) => window.location.assign(redirectURL)} | |
| ``` | ||
|
|
||
|
|
||
| #### modalAppElement | ||
| #### string | ||
| Pass in a query selector identifying the root of your app. Used to hide other page content while the modal is open for | ||
| screenreaders and other accessibility purposes. | ||
|
|
||
| Default: `#root` | ||
|
|
||
|
|
||
| #### showIconClose | ||
| #### boolean | ||
| Show the close icon on the top right of the modal if true. | ||
|
|
||
|
|
||
| #### enableDefaultStyles | ||
| ##### boolean (default: true) | ||
| Set to false to disable the default inline styles of the component. | ||
|
|
||
|
|
||
| #### iframeWarningProps | ||
| ##### object | ||
| Pass in custom props into the paragraph tag displayed if the user's browser does not support iframes. | ||
|
|
||
| Example: | ||
| ```js | ||
| iframeWarningProps={{ className: 'warning-text' }} | ||
| ``` | ||
|
|
||
|
|
||
| #### AnvilFrameProps | ||
| ##### object | ||
| Pass in custom props into the iframe tag displayed within the modal. | ||
|
|
||
| Example: | ||
| ```js | ||
| AnvilFrameProps={{ | ||
| id: 'my-modal', | ||
| style: { background: 'white' }, | ||
| }} | ||
| ``` | ||
|
|
||
|
|
||
| #### iconCloseProps | ||
| ##### object | ||
| Pass in custom props into the svg tag for the delete button displayed within the modal. | ||
|
|
||
| Example: | ||
| ```js | ||
| AnvilFrameProps={{ className: 'custom-delete-class' }} | ||
| ``` | ||
|
|
||
|
|
||
| ## Styling | ||
|
|
||
| Styles are not embedded into the React component to support customization. The default styles are provided within the modules under `dist/styles.css`. | ||
| Customize the component by overriding the default styles. Pass in props to override IDs and classNames. | ||
|
|
||
| ## Anvil Etch E-Sign Docs | ||
|
|
||
| [Read the Docs](https://www.useanvil.com/docs/api/e-signatures) | ||
|
|
||
|
|
||
| ## Links 🔗 | ||
| * [@anvilco/react-signature-frame](https://www.npmjs.com/package/@anvilco/react-signature-frame) | ||
| * [@anvilco/react-signature-modal](https://www.npmjs.com/package/@anvilco/react-signature-modal) | ||
| * [Get started with Anvil](https://www.useanvil.com/) | ||
|
|
||
|
|
||
| ## Notes | ||
|
|
||
| * The `allowFormEmbed` config must be set to `true` under your [Anvil organization](https://useanvil.com) for embedded signing. Please reach us at [[email protected]](mailto:hello@useanvil.com). | ||
| * React ^v16.8.0 is required. | ||
benogle marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * Please contact us at [[email protected]](mailto:support@useanvil.com) to enable iframe embedded signing for production signature packets. | ||
| * React >= v16.0 required. | ||
|
|
||
|
|
||
| ## Bugs | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,7 +13,6 @@ npm install @anvilco/react-signature-frame | |
|
|
||
| ```js | ||
| import AnvilSignatureFrame from '@anvilco/react-signature-frame' | ||
| import '@anvilco/react-signature-frame/dist/styles.css' | ||
|
|
||
| <AnvilSignatureFrame | ||
| signURL={signURL} | ||
|
|
@@ -35,9 +34,10 @@ signURL={`https://app.useanvil.com/etch/8iJDbq8dkEmjrsNw7Dnb/sign?token=dsa...`} | |
| ``` | ||
|
|
||
| #### scroll | ||
| ##### string | ||
| * `auto` - scrolls the window to the signing frame when rendered | ||
| * `smooth` - smoothly scrolls the window to the signing frame when rendered | ||
| ##### string | null | ||
| * `auto` - scrolls the window to the signing frame when mounted | ||
| * `smooth` - smoothly scrolls the window to the signing frame when mounted | ||
| * `null` - disables scrolling | ||
|
|
||
| #### onLoad | ||
| ##### function | ||
|
|
@@ -59,20 +59,40 @@ onFinish={(redirectURL) => window.location.assign(redirectURL)} | |
| ``` | ||
|
|
||
|
|
||
| #### enableDefaultStyles | ||
| ##### boolean (default: true) | ||
| Set to false to disable the default inline styles of the component. | ||
|
|
||
|
|
||
| #### iframeWarningProps | ||
| ##### object | ||
| Pass in custom props into the paragraph tag displayed if the user's browser does not support iframes. | ||
|
|
||
| Example: | ||
| ```js | ||
| iframeWarningProps={{ className: 'warning-text' }} | ||
| ``` | ||
|
|
||
|
|
||
| ## Styling | ||
|
|
||
| Styles are not embedded into the React component to support customization. The default styles are provided within the modules under `dist/styles.css`. | ||
| Customize the component by overriding the default styles. Pass in props to override IDs and classNames. | ||
|
|
||
|
|
||
| ## Anvil Etch E-Sign Docs | ||
|
|
||
| [Read the Docs](https://www.useanvil.com/docs/api/e-signatures) | ||
|
|
||
|
|
||
| ## Links 🔗 | ||
| * [@anvilco/react-signature-frame](https://www.npmjs.com/package/@anvilco/react-signature-frame) | ||
| * [Get started with Anvil](https://www.useanvil.com/) | ||
|
|
||
|
|
||
| ## Notes | ||
|
|
||
| * The `allowFormEmbed` config must be set to `true` under your [Anvil organization](https://useanvil.com) for embedded signing. Please reach us at [[email protected]](mailto:hello@useanvil.com). | ||
| * React ^v16.8.0 is required. | ||
| * Please contact us at [[email protected]](mailto:support@useanvil.com) to enable iframe embedded signing for production signature packets. | ||
| * React >= v16.0 required. | ||
|
|
||
|
|
||
| ## Bugs | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,69 @@ | ||
| import React, { useEffect, useRef } from 'react' | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import './index.css' | ||
|
|
||
| const ANVIL_URLS = ['https://app.useanvil.com', 'https://staging.useanvil.com'] | ||
|
|
||
| function AnvilSignatureFrame ({ signURL, scroll, onLoad, onFinish }) { | ||
| const iframeRef = useRef(null) | ||
|
|
||
| useEffect(() => { | ||
| function handleSignFinish ({ origin, data: url }) { | ||
| if (!ANVIL_URLS.includes(origin)) return | ||
| onFinish(url) | ||
| } | ||
| window.addEventListener('message', handleSignFinish) | ||
| if (scroll) iframeRef.current.scrollIntoView({ behavior: scroll }) | ||
| return () => window.removeEventListener('message', handleSignFinish) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <iframe | ||
| id="anvil-signatureFrame" | ||
| src={signURL} | ||
| name="Anvil Etch E-Sign" | ||
| title="Anvil Etch E-Sign" | ||
| onLoad={onLoad} | ||
| ref={iframeRef} | ||
| > | ||
| <p className="anvil-docs">Your browser does not support iframes.</p> | ||
| </iframe> | ||
| ) | ||
|
|
||
| class AnvilSignatureFrame extends React.Component { | ||
| constructor (props) { | ||
| super(props) | ||
| this.iframeRef = React.createRef() | ||
| } | ||
|
|
||
| componentDidMount () { | ||
| const { scroll } = this.props | ||
| window.addEventListener('message', this.handleSignFinish) | ||
| if (scroll) this.iframeRef.current.scrollIntoView({ behavior: scroll }) | ||
| } | ||
|
|
||
| componentWillUnmount () { | ||
| window.removeEventListener('message', this.handleSignFinish) | ||
| } | ||
|
|
||
| handleSignFinish = ({ origin, data: url }) => { | ||
| if (this.props.anvilURL !== origin) return | ||
| this.props.onFinish(url) | ||
| } | ||
|
|
||
| render () { | ||
| const { signURL, onLoad, enableDefaultStyles, ...otherProps } = this.props | ||
| const { iframeWarningProps, ...anvilFrameProps } = otherProps | ||
| return ( | ||
| <iframe | ||
| id="anvil-signature-frame" | ||
| name="Anvil Etch E-Sign" | ||
| title="Anvil Etch E-Sign" | ||
| style={enableDefaultStyles | ||
| ? { | ||
| width: '80vw', | ||
| height: '85vh', | ||
| maxWidth: '1200px', | ||
| borderStyle: 'groove', | ||
| } | ||
| : undefined} | ||
| {...anvilFrameProps} | ||
| src={signURL} | ||
| onLoad={onLoad} | ||
| ref={this.iframeRef} | ||
| > | ||
| <p className="anvil-iframe-warning" {...iframeWarningProps}>Your browser does not support iframes.</p> | ||
| </iframe> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| AnvilSignatureFrame.defaultProps = { | ||
| onFinish: (url) => window.location.assign(url), | ||
| onFinish: (url) => { | ||
| console.log('RedirectURL:', url) | ||
| }, | ||
| anvilURL: 'https://app.useanvil.com', | ||
| enableDefaultStyles: true, | ||
| } | ||
|
|
||
| AnvilSignatureFrame.propTypes = { | ||
| signURL: PropTypes.string.isRequired, | ||
| signURL: PropTypes.string, | ||
| scroll: PropTypes.string, | ||
| onLoad: PropTypes.func, | ||
| onFinish: PropTypes.func, | ||
| anvilURL: PropTypes.string, | ||
| enableDefaultStyles: PropTypes.bool, | ||
| } | ||
|
|
||
| export default AnvilSignatureFrame |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.