-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.ts
76 lines (66 loc) · 2 KB
/
index.ts
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
import { provide, tag, utils, Tag } from '@storefront/core';
import Button from '../button';
import Select from '../select';
@provide('customSelect')
@tag('gb-custom-select', require('./index.html'), require('./index.css'))
class CustomSelect {
refs: { toggle: Button };
props: CustomSelect.Props = {
hover: false,
} as CustomSelect.Props;
state: CustomSelect.State = {
selected: () => this.props.options.find((option) => option.selected),
onSelect: (event) => {
if (this.props.onSelect) {
this.props.onSelect(event.item.i);
}
this.set({ isActive: false });
},
isActive: false,
};
onUpdated() {
if (this.state.isActive) {
utils.WINDOW().document.addEventListener('click', this.onClickDeactivate);
} else {
utils.WINDOW().document.removeEventListener('click', this.onClickDeactivate);
}
}
onUnmount() {
utils.WINDOW().document.removeEventListener('click', this.onClickDeactivate);
}
onHoverActivate(event: MouseEvent & Tag.Event) {
event.preventUpdate = true;
if (this.props.hover && !this.state.isActive) {
this.set({ isActive: true });
}
}
onHoverDeactivate(event: MouseEvent & Tag.Event) {
event.preventUpdate = true;
if (!this.props.hover && !this.state.isActive) {
this.set(true);
}
}
onClickDeactivate = (event: MouseEvent & Tag.Event) => {
event.preventUpdate = true;
if (!this.props.hover && event.target !== this.refs.toggle.refs.button) {
this.set({ isActive: false });
}
};
onClickToggleActive = () => {
if (!this.props.hover) {
this.set({ isActive: !this.state.isActive });
}
};
}
interface CustomSelect extends Tag<CustomSelect.Props, CustomSelect.State> {}
namespace CustomSelect {
export interface Props extends Tag.Props, Select.Props {
hover: boolean;
}
export interface State {
isActive: boolean;
selected(): Select.Option;
onSelect(event: MouseEvent & { item: { i: number } }): void;
}
}
export default CustomSelect;