/
back-button.tsx
92 lines (76 loc) · 2.51 KB
/
back-button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
import { Color, Config, Mode } from '../../interface';
import { createColorClasses, openURL } from '../../utils/theme';
@Component({
tag: 'ion-back-button',
styleUrls: {
ios: 'back-button.ios.scss',
md: 'back-button.md.scss'
},
scoped: true
})
export class BackButton implements ComponentInterface {
@Element() el!: HTMLElement;
@Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'window' }) win!: Window;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* The url to navigate back to by default when there is no history.
*/
@Prop() defaultHref?: string;
/**
* The icon name to use for the back button.
*/
@Prop() icon?: string | null;
/**
* The text to display in the back button.
*/
@Prop() text?: string | null;
@Listen('click')
async onClick(ev: Event) {
const nav = this.el.closest('ion-nav');
ev.preventDefault();
if (nav && await nav.canGoBack()) {
return nav.pop({ skipIfBusy: true });
}
return openURL(this.win, this.defaultHref, ev, 'back');
}
hostData() {
const showBackButton = this.defaultHref !== undefined;
return {
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
'button': true, // ion-buttons target .button
'ion-activatable': true,
'show-back-button': showBackButton
}
};
}
render() {
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
return (
<button
type="button"
class="button-native"
>
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{backButtonText && <span class="button-text">{backButtonText}</span>}
</span>
{this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</button>
);
}
}