-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
icon.tsx
executable file
路172 lines (143 loc) 路 4.39 KB
/
icon.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
import { getSvgContent, ioniconContent } from './request';
import { getName, getUrl } from './utils';
@Component({
tag: 'ion-icon',
assetsDir: 'svg',
styleUrl: 'icon.css',
shadow: true
})
export class Icon {
private io?: IntersectionObserver;
@Element() el!: HTMLElement;
@State() private svgContent?: string;
@State() private isVisible = false;
/**
* The mode determines which platform styles to use.
*/
@Prop({ mutable: true }) mode = getIonMode();
/**
* The color to use for the background of the item.
*/
@Prop() color?: string;
/**
* Specifies the label to use for accessibility. Defaults to the icon name.
*/
@Prop({ mutable: true, reflectToAttr: true }) ariaLabel?: string;
/**
* Specifies which icon to use on `ios` mode.
*/
@Prop() ios?: string;
/**
* Specifies which icon to use on `md` mode.
*/
@Prop() md?: string;
/**
* Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
*/
@Prop() flipRtl?: boolean;
/**
* Specifies which icon to use from the built-in set of icons.
*/
@Prop() name?: string;
/**
* Specifies the exact `src` of an SVG file to use.
*/
@Prop() src?: string;
/**
* A combination of both `name` and `src`. If a `src` url is detected
* it will set the `src` property. Otherwise it assumes it's a built-in named
* SVG and set the `name` property.
*/
@Prop() icon?: any;
/**
* The size of the icon.
* Available options are: `"small"` and `"large"`.
*/
@Prop() size?: string;
/**
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
* Default, `false`.
*/
@Prop() lazy = false;
connectedCallback() {
// purposely do not return the promise here because loading
// the svg file should not hold up loading the app
// only load the svg if it's visible
this.waitUntilVisible(this.el, '50px', () => {
this.isVisible = true;
this.loadIcon();
});
}
disconnectedCallback() {
if (this.io) {
this.io.disconnect();
this.io = undefined;
}
}
private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {
if (Build.isBrowser && this.lazy && typeof window !== 'undefined' && (window as any).IntersectionObserver) {
const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {
if (data[0].isIntersecting) {
io.disconnect();
this.io = undefined;
cb();
}
}, { rootMargin });
io.observe(el);
} else {
// browser doesn't support IntersectionObserver
// so just fallback to always show it
cb();
}
}
@Watch('name')
@Watch('src')
@Watch('icon')
loadIcon() {
if (Build.isBrowser && this.isVisible) {
const url = getUrl(this);
if (url) {
if (ioniconContent.has(url)) {
// sync if it's already loaded
this.svgContent = ioniconContent.get(url);
} else {
// async if it hasn't been loaded
getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
}
}
}
if (!this.ariaLabel) {
const label = getName(this.name, this.icon, this.mode, this.ios, this.md);
// user did not provide a label
// come up with the label based on the icon name
if (label) {
this.ariaLabel = label.replace(/\-/g, ' ');
}
}
}
render() {
const mode = this.mode || 'md';
const flipRtl = this.flipRtl || (this.ariaLabel && (this.ariaLabel.indexOf('arrow') > -1 || this.ariaLabel.indexOf('chevron') > -1) && this.flipRtl !== false);
return (
<Host role="img" class={{
[mode]: true,
...createColorClasses(this.color),
[`icon-${this.size}`]: !!this.size,
'flip-rtl': !!flipRtl && (this.el.ownerDocument as Document).dir === 'rtl'
}}>{(
(Build.isBrowser && this.svgContent)
? <div class="icon-inner" innerHTML={this.svgContent}></div>
: <div class="icon-inner"></div>
)}
</Host>
);
}
}
const getIonMode = () => (Build.isBrowser && document.documentElement.getAttribute('mode')) || 'md';
const createColorClasses = (color: string | undefined) => {
return (color) ? {
'ion-color': true,
[`ion-color-${color}`]: true
} : null;
};