Skip to content
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.

Sign up for GitHub

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

Modal component to update props when it receive new ones and fix erro… #507

Merged
merged 4 commits into from
Oct 30, 2018
Merged

Modal component to update props when it receive new ones and fix erro… #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de2c6ec
Modal component to update props when it receive new ones and fix erro…
stefaniacardenas Oct 29, 2018
981ff00
Removed redundant component states
stefaniacardenas Oct 29, 2018
2110ac3
Removed steps from documentation and changed prop passed to react-modal
stefaniacardenas Oct 30, 2018
4057b21
Remove steps from migration behaviour
stefaniacardenas Oct 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,61 @@

These guides below are provided to ease the transition of existing applications using the Onfido SDK from one version to another that introduces breaking API changes.

## `2.8.0` -> `3.0.0`

### Breaking changes

- Removed support for `buttonId`. From this version you will need to create a function that launches the SDK when a trigger element (ie a button) is clicked.

### Example of old behaviour
```html
<script>
Onfido.init({
useModal: true,
buttonId: 'onfido-btn',
token: 'YOUR_JWT_TOKEN',
onComplete: function(data) {
// callback for when everything is complete
console.log("everything is complete")
}
});
</script>

<body>
<button id='onfido-btn'>Verify identity</button>
<div id='onfido-mount'></div>
</body>
```

### Example of new behaviour
```html
<script>
var onfido = {}

function triggerOnfido() {
onfido = Onfido.init({
useModal: true,
isModalOpen: true,
onModalRequestClose: function() {
// Update options with the state of the modal
onfido.setOptions({isModalOpen: false})
},
token: 'YOUR_JWT_TOKEN',
onComplete: function(data) {
// callback for when everything is complete
console.log("everything is complete")
}
});
};
</script>

<body>
<!-- Use a button to trigger the Onfido SDK -->
<button onClick="triggerOnfido()">Verify identity</button>
<div id='onfido-mount'></div>
</body>
```

## `1.1.0` -> `2.0.0`

### Breaking changes
Expand Down
29 changes: 29 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,35 @@ A number of options are available to allow you to customise the SDK:

Turns the SDK into a modal, which fades the background and puts the SDK into a contained box.

Example:
```javascript
<script>
var onfido = {}

function triggerOnfido() {
onfido = Onfido.init({
useModal: true,
isModalOpen: true,
onModalRequestClose: function() {
// Update options with the state of the modal
onfido.setOptions({isModalOpen: false})
},
token: 'token',
onComplete: function(data) {
// callback for when everything is complete
console.log("everything is complete")
}
});
};
</script>

<body>
<!-- Use a button to trigger the Onfido SDK -->
<button onClick="triggerOnfido()">Verify identity</button>
<div id='onfido-mount'></div>
</body>
```

- **`isModalOpen {Boolean} optional`**

In case `useModal` is set to `true`, this defines whether the modal is open or closed.
Expand Down
2 changes: 1 addition & 1 deletion dist/onfido.min.js
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 4 additions & 16 deletions src/components/Modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,25 @@ const Wrapper = ({children}) =>
wrapWithClass(style.inner, children)

class Modal extends Component {
constructor (props) {
super(props)
this.state = {isOpen: false}
}

openModal = () => {
this.setState({isOpen: true})
}

onRequestClose = () => {
this.setState({isOpen: false})
}

render () {
const { translate, isFullScreen } = this.props
return (
<ReactModal
isOpen={this.state.isOpen || this.props.isOpen}
onRequestClose={this.props.onRequestClose || this.onRequestClose}
isOpen={this.props.isOpen}
onRequestClose={this.props.onRequestClose}
portalClassName={style.portal}
overlayClassName={style.overlay}
bodyClassName={style.modalBody}
className={style.inner}
shouldCloseOnOverlayClick={true}
closeTimeoutMS={MODAL_ANIMATION_DURATION}
appElement={document.body}
>
<button
className={classNames(style.closeButton, {
[style.closeButtonFullScreen]: isFullScreen,
})}
onClick={this.props.onRequestClose || this.onRequestClose}
onClick={this.props.onRequestClose}
>
<span className={style.closeButtonLabel}>{
translate('close')
Expand Down