Removing top cancel button when in send draft flow (#12304)

feature/default_network_editable
ryanml 3 years ago committed by GitHub
parent e328433b70
commit 31b681f301
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      ui/components/ui/page-container/index.scss
  2. 69
      ui/components/ui/page-container/page-container-header/page-container-header.component.js
  3. 1
      ui/pages/send/send-header/send-header.component.js

@ -104,6 +104,10 @@
color: $black;
font-weight: 500;
margin-right: 1.5rem;
&--no-margin-right {
margin-right: 0;
}
}
&__subtitle {

@ -15,6 +15,7 @@ export default class PageContainerHeader extends Component {
tabs: PropTypes.node,
headerCloseText: PropTypes.string,
className: PropTypes.string,
hideClose: PropTypes.bool,
};
renderTabs() {
@ -23,6 +24,37 @@ export default class PageContainerHeader extends Component {
return tabs && <ul className="page-container__tabs">{tabs}</ul>;
}
renderCloseAction() {
const { hideClose, onClose, headerCloseText } = this.props;
if (hideClose) {
return null;
}
if (headerCloseText) {
return (
onClose && (
<Button
type="link"
className="page-container__header-close-text"
onClick={() => onClose()}
>
{headerCloseText}
</Button>
)
);
}
return (
onClose && (
<div
className="page-container__header-close"
onClick={() => onClose()}
/>
)
);
}
renderHeaderRow() {
const {
showBackButton,
@ -47,14 +79,7 @@ export default class PageContainerHeader extends Component {
}
render() {
const {
title,
subtitle,
onClose,
tabs,
headerCloseText,
className,
} = this.props;
const { title, subtitle, tabs, className, hideClose } = this.props;
return (
<div
@ -65,26 +90,18 @@ export default class PageContainerHeader extends Component {
>
{this.renderHeaderRow()}
{title && <div className="page-container__title">{title}</div>}
{subtitle && <div className="page-container__subtitle">{subtitle}</div>}
{onClose && headerCloseText ? (
<Button
type="link"
className="page-container__header-close-text"
onClick={() => onClose()}
{title && (
<div
className={classnames('page-container__title', {
'page-container__title--no-margin-right': hideClose,
})}
>
{headerCloseText}
</Button>
) : (
onClose && (
<div
className="page-container__header-close"
onClick={() => onClose()}
/>
)
{title}
</div>
)}
{subtitle && <div className="page-container__subtitle">{subtitle}</div>}
{this.renderCloseAction()}
{this.renderTabs()}
</div>

@ -41,6 +41,7 @@ export default function SendHeader() {
headerCloseText={
stage === SEND_STAGES.EDIT ? t('cancelEdit') : t('cancel')
}
hideClose={stage === SEND_STAGES.DRAFT}
/>
);
}

Loading…
Cancel
Save