f3ea2a251d
* Change existing icons to React wrapper components * Add `icons` plugin to expose Icon components to plugin system * Create components that re-export Lock and Unlock components so they can be changed separately in Authorise top button and Authorise operation summary button * Add new Lock and Unlock icons to `auth` plugin --------- Co-authored-by: Vladimír Gorej <vladimir.gorej@smartbear.com>
36 lines
976 B
JavaScript
36 lines
976 B
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
|
|
export default class AuthorizeOperationBtn extends React.Component {
|
|
static propTypes = {
|
|
isAuthorized: PropTypes.bool.isRequired,
|
|
onClick: PropTypes.func,
|
|
getComponent: PropTypes.func.isRequired
|
|
}
|
|
|
|
onClick =(e) => {
|
|
e.stopPropagation()
|
|
let { onClick } = this.props
|
|
|
|
if(onClick) {
|
|
onClick()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let { isAuthorized, getComponent } = this.props
|
|
|
|
const LockAuthOperationIcon = getComponent("LockAuthOperationIcon", true)
|
|
const UnlockAuthOperationIcon = getComponent("UnlockAuthOperationIcon", true)
|
|
|
|
return (
|
|
<button className="authorization__btn"
|
|
aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
|
|
onClick={this.onClick}>
|
|
{isAuthorized ? <LockAuthOperationIcon className="locked" /> : <UnlockAuthOperationIcon className="unlocked"/>}
|
|
</button>
|
|
|
|
)
|
|
}
|
|
}
|