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>
31 lines
964 B
JavaScript
31 lines
964 B
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
|
|
export default class AuthorizeBtn extends React.Component {
|
|
static propTypes = {
|
|
onClick: PropTypes.func,
|
|
isAuthorized: PropTypes.bool,
|
|
showPopup: PropTypes.bool,
|
|
getComponent: PropTypes.func.isRequired
|
|
}
|
|
|
|
render() {
|
|
let { isAuthorized, showPopup, onClick, getComponent } = this.props
|
|
|
|
//must be moved out of button component
|
|
const AuthorizationPopup = getComponent("authorizationPopup", true)
|
|
const LockAuthIcon = getComponent("LockAuthIcon", true)
|
|
const UnlockAuthIcon = getComponent("UnlockAuthIcon", true)
|
|
|
|
return (
|
|
<div className="auth-wrapper">
|
|
<button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
|
|
<span>Authorize</span>
|
|
{isAuthorized ? <LockAuthIcon /> : <UnlockAuthIcon />}
|
|
</button>
|
|
{ showPopup && <AuthorizationPopup /> }
|
|
</div>
|
|
)
|
|
}
|
|
}
|