Skip to content

Commit 0f4c0ac

Browse files
charlesfriescharlesfries
authored
Convert flash-message to Glimmer component (#382)
* Convert `flash-message` to Glimmer component * Fix computed dependant key * Move Glimmer packages to dependencies * ember-template-lint: Disable `no-invalid-interactive` for `flash-message` component
1 parent da038c7 commit 0f4c0ac

File tree

4 files changed

+154
-55
lines changed

4 files changed

+154
-55
lines changed

‎addon/templates/components/flash-message.hbs‎ renamed to ‎addon/components/flash-message.hbs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55
{{on "click" this.onClick}}
66
{{did-insert this.onDidInsert}}
77
{{will-destroy this.onWillDestroy}}
8+
{{! template-lint-disable no-invalid-interactive }}
89
>
910
{{#if (has-block)}}
10-
{{yield this this.flash (action "onClose")}}
11+
{{yield this @flash this.onClose}}
1112
{{else}}
12-
{{this.flash.message}}
13+
{{@flash.message}}
1314
{{#if this.showProgressBar}}
1415
<div class="alert-progress">
1516
<div class="alert-progressBar" style={{this.progressDuration}}></div>

‎addon/components/flash-message.js‎

Lines changed: 58 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,101 @@
1-
import Component from '@ember/component';
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
23
import { classify } from '@ember/string';
34
import { htmlSafe } from '@ember/template';
45
import { isPresent } from '@ember/utils';
56
import { next, cancel } from '@ember/runloop';
6-
import { action, computed, set } from '@ember/object';
7-
import { and, readOnly, not } from '@ember/object/computed';
8-
import layout from '../templates/components/flash-message';
7+
import { action, computed } from '@ember/object';
8+
9+
/**
10+
* ARGS
11+
*
12+
* flash: FlashObject
13+
* messageStyle?: 'bootstrap' | 'foundation'
14+
* messageStylePrefix?: string
15+
*/
916

1017
export default class FlashMessage extends Component {
11-
tagName = '';
12-
layout = layout;
13-
active = false;
14-
messageStyle = 'bootstrap';
18+
@tracked active = false;
19+
20+
@tracked pendingSet;
21+
@tracked _mouseEnterHandler;
22+
@tracked _mouseLeaveHandler;
23+
24+
get messageStyle() {
25+
return this.args.messageStyle ?? 'bootstrap';
26+
}
27+
28+
get showProgress() {
29+
return this.args.flash.showProgress;
30+
}
1531

16-
@readOnly('flash.showProgress')
17-
showProgress;
32+
get notExiting() {
33+
return !this.exiting;
34+
}
1835

19-
@not('exiting')
20-
notExiting;
36+
get showProgressBar() {
37+
return this.showProgress && this.notExiting;
38+
}
2139

22-
@and('showProgress', 'notExiting')
23-
showProgressBar;
40+
@computed('args.flash.exiting')
41+
get exiting() {
42+
return this.args.flash.exiting;
43+
}
2444

25-
@readOnly('flash.exiting')
26-
exiting;
45+
get messageStylePrefix() {
46+
return this.args.messageStylePrefix ?? this._defaultMessageStylePrefix;
47+
}
2748

2849
@computed('messageStyle')
2950
get _defaultMessageStylePrefix() {
3051
const isFoundation = this.messageStyle === 'foundation';
3152
return isFoundation ? 'alert-box ' : 'alert alert-';
3253
}
3354

34-
@computed('flash.type', 'messageStylePrefix', '_defaultMessageStylePrefix')
55+
@computed('args.flash.type', 'messageStylePrefix')
3556
get alertType() {
36-
const flashType = this.flash.type || '';
37-
const prefix = this.messageStylePrefix || this._defaultMessageStylePrefix;
57+
const flashType = this.args.flash.type || '';
58+
const prefix = this.messageStylePrefix;
3859
return `${prefix}${flashType}`;
3960
}
4061

41-
@computed('flash.type')
62+
@computed('args.flash.type')
4263
get flashType() {
43-
return classify(this.flash.type || '');
64+
return classify(this.args.flash.type || '');
4465
}
4566

46-
@computed('flash.{showProgress,timeout}')
67+
@computed('args.flash.{showProgress,timeout}')
4768
get progressDuration() {
48-
if (!this.flash?.showProgress) {
69+
if (!this.args.flash?.showProgress) {
4970
return false;
5071
}
51-
const duration = this.flash?.timeout || 0;
72+
const duration = this.args.flash?.timeout || 0;
5273
return htmlSafe(`transition-duration: ${duration}ms`);
5374
}
5475

76+
@action
5577
_mouseEnter() {
56-
if (isPresent(this.flash)) {
57-
this.flash.preventExit();
78+
if (isPresent(this.args.flash)) {
79+
this.args.flash.preventExit();
5880
}
5981
}
6082

83+
@action
6184
_mouseLeave() {
62-
if (isPresent(this.flash) && !this.flash.exiting) {
63-
this.flash.allowExit();
85+
if (isPresent(this.args.flash) && !this.args.flash.exiting) {
86+
this.args.flash.allowExit();
6487
}
6588
}
6689

6790
_destroyFlashMessage() {
68-
if (this.flash) {
69-
this.flash.destroyMessage();
91+
if (this.args.flash) {
92+
this.args.flash.destroyMessage();
7093
}
7194
}
7295

7396
@action
7497
onClick() {
75-
const destroyOnClick = this.flash?.destroyOnClick ?? true;
98+
const destroyOnClick = this.args.flash?.destroyOnClick ?? true;
7699

77100
if (destroyOnClick) {
78101
this._destroyFlashMessage();
@@ -87,11 +110,11 @@ export default class FlashMessage extends Component {
87110
@action
88111
onDidInsert(element) {
89112
const pendingSet = next(this, () => {
90-
set(this, 'active', true);
113+
this.active = true;
91114
});
92-
set(this, 'pendingSet', pendingSet);
93-
set(this, '_mouseEnterHandler', this._mouseEnter);
94-
set(this, '_mouseLeaveHandler', this._mouseLeave);
115+
this.pendingSet = pendingSet;
116+
this._mouseEnterHandler = this._mouseEnter;
117+
this._mouseLeaveHandler = this._mouseLeave;
95118
element.addEventListener('mouseenter', this._mouseEnterHandler);
96119
element.addEventListener('mouseleave', this._mouseLeaveHandler);
97120
}

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@
5050
},
5151
"dependencies": {
5252
"@ember/render-modifiers": "^2.0.2",
53+
"@glimmer/component": "^1.1.2",
54+
"@glimmer/tracking": "^1.1.2",
5355
"ember-auto-import": "^2.4.1",
5456
"ember-cli-babel": "^7.26.11",
5557
"ember-cli-htmlbars": "^6.0.1"

‎yarn.lock‎

Lines changed: 91 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2317,6 +2317,15 @@
23172317
"@babel/helper-plugin-utils" "^7.0.0"
23182318
"@babel/plugin-syntax-typescript" "^7.2.0"
23192319

2320+
"@babel/plugin-transform-typescript@~7.5.0":
2321+
version "7.5.5"
2322+
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.5.5.tgz#6d862766f09b2da1cb1f7d505fe2aedab6b7d4b8"
2323+
integrity sha512-pehKf4m640myZu5B2ZviLaiBlxMCjSZ1qTEO459AXKX5GnPueyulJeCqZFs1nz/Ya2dDzXQ1NxZ/kKNWyD4h6w==
2324+
dependencies:
2325+
"@babel/helper-create-class-features-plugin" "^7.5.5"
2326+
"@babel/helper-plugin-utils" "^7.0.0"
2327+
"@babel/plugin-syntax-typescript" "^7.2.0"
2328+
23202329
"@babel/plugin-transform-unicode-escapes@^7.14.5":
23212330
version "7.14.5"
23222331
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
@@ -3032,6 +3041,31 @@
30323041
minimatch "^3.0.4"
30333042
strip-json-comments "^3.1.1"
30343043

3044+
"@glimmer/component@^1.1.2":
3045+
version "1.1.2"
3046+
resolved "https://registry.yarnpkg.com/@glimmer/component/-/component-1.1.2.tgz#892ec0c9f0b6b3e41c112be502fde073cf24d17c"
3047+
integrity sha512-XyAsEEa4kWOPy+gIdMjJ8XlzA3qrGH55ZDv6nA16ibalCR17k74BI0CztxuRds+Rm6CtbUVgheCVlcCULuqD7A==
3048+
dependencies:
3049+
"@glimmer/di" "^0.1.9"
3050+
"@glimmer/env" "^0.1.7"
3051+
"@glimmer/util" "^0.44.0"
3052+
broccoli-file-creator "^2.1.1"
3053+
broccoli-merge-trees "^3.0.2"
3054+
ember-cli-babel "^7.7.3"
3055+
ember-cli-get-component-path-option "^1.0.0"
3056+
ember-cli-is-package-missing "^1.0.0"
3057+
ember-cli-normalize-entity-name "^1.0.0"
3058+
ember-cli-path-utils "^1.0.0"
3059+
ember-cli-string-utils "^1.1.0"
3060+
ember-cli-typescript "3.0.0"
3061+
ember-cli-version-checker "^3.1.3"
3062+
ember-compatibility-helpers "^1.1.2"
3063+
3064+
"@glimmer/di@^0.1.9":
3065+
version "0.1.11"
3066+
resolved "https://registry.yarnpkg.com/@glimmer/di/-/di-0.1.11.tgz#a6878c07a13a2c2c76fcde598a5c97637bfc4280"
3067+
integrity sha512-moRwafNDwHTnTHzyyZC9D+mUSvYrs1Ak0tRPjjmCghdoHHIvMshVbEnwKb/1WmW5CUlKc2eL9rlAV32n3GiItg==
3068+
30353069
"@glimmer/encoder@^0.42.2":
30363070
version "0.42.2"
30373071
resolved "https://registry.yarnpkg.com/@glimmer/encoder/-/encoder-0.42.2.tgz#d3ba3dc9f1d4fa582d1d18b63da100fc5c664057"
@@ -3129,10 +3163,18 @@
31293163
"@handlebars/parser" "~2.0.0"
31303164
simple-html-tokenizer "^0.5.11"
31313165

3132-
"@glimmer/[email protected]":
3133-
version "0.83.1"
3134-
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.83.1.tgz#cc7511b03164d658cf6e3262fce5a0fcb82edceb"
3135-
integrity sha512-amvjtl9dvrkxsoitXAly9W5NUaLIE3A2J2tWhBWIL1Z6DOFotfX7ytIosOIcPhJLZCtiXPHzMutQRv0G/MSMsA==
3166+
"@glimmer/tracking@^1.1.2":
3167+
version "1.1.2"
3168+
resolved "https://registry.yarnpkg.com/@glimmer/tracking/-/tracking-1.1.2.tgz#74e71be07b0a7066518d24044d2665d0cf8281eb"
3169+
integrity sha512-cyV32zsHh+CnftuRX84ALZpd2rpbDrhLhJnTXn9W//QpqdRZ5rdMsxSY9fOsj0CKEc706tmEU299oNnDc0d7tA==
3170+
dependencies:
3171+
"@glimmer/env" "^0.1.7"
3172+
"@glimmer/validator" "^0.44.0"
3173+
3174+
"@glimmer/[email protected]":
3175+
version "0.65.4"
3176+
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.65.4.tgz#e464145078f3f40da9013ff2590a6016515455d2"
3177+
integrity sha512-aofe+rdBhkREKP2GZta6jy1UcbRRMfWx7M18zxGxspPoeD08NscD04Kx+WiOKXmC1TcrfITr8jvqMfrKrMzYWQ==
31363178
dependencies:
31373179
"@glimmer/env" "0.1.7"
31383180
"@glimmer/interfaces" "0.83.1"
@@ -3143,14 +3185,24 @@
31433185
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.42.2.tgz#9ca1631e42766ea6059f4b49d0bdfb6095aad2c4"
31443186
integrity sha512-Heck0baFSaWDanCYtmOcLeaz7v+rSqI8ovS7twrp2/FWEteb3Ze5sWQ2BEuSAG23L/k/lzVwYM/MY7ZugxBpaA==
31453187

3146-
"@glimmer/[email protected]", "@glimmer/validator@^0.83.0":
3147-
version "0.83.1"
3148-
resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.83.1.tgz#7578cb2284f728c8e9302c51fc6e7660b570ac54"
3149-
integrity sha512-LaILSNnQgDHZpaUsfjVndbS1JfVn0xdTlJdFJblPbhoVklOBSReZVekens3EQ6xOr3BC612sRm1hBnEPixOY6A==
3188+
"@glimmer/util@^0.44.0":
3189+
version "0.44.0"
3190+
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.44.0.tgz#45df98d73812440206ae7bda87cfe04aaae21ed9"
3191+
integrity sha512-duAsm30uVK9jSysElCbLyU6QQYO2X9iLDLBIBUcCqck9qN1o3tK2qWiHbGK5d6g8E2AJ4H88UrfElkyaJlGrwg==
3192+
3193+
"@glimmer/[email protected]", "@glimmer/validator@^0.65.0":
3194+
version "0.65.4"
3195+
resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.65.4.tgz#12c27a9a63706c60e6499fd687940e9d1affb32c"
3196+
integrity sha512-0YUjAyo45DF5JkQxdv5kHn96nMNhvZiEwsAD4Jme0kk5Q9MQcPOUtN76pQAS4f+C6GdF9DeUr2yGXZLFMmb+LA==
31503197
dependencies:
31513198
"@glimmer/env" "^0.1.7"
31523199
"@glimmer/global-context" "0.83.1"
31533200

3201+
"@glimmer/validator@^0.44.0":
3202+
version "0.44.0"
3203+
resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.44.0.tgz#03d127097dc9cb23052cdb7fcae59d0a9dca53e1"
3204+
integrity sha512-i01plR0EgFVz69GDrEuFgq1NheIjZcyTy3c7q+w7d096ddPVeVcRzU3LKaqCfovvLJ+6lJx40j45ecycASUUyw==
3205+
31543206
"@glimmer/[email protected]":
31553207
version "0.83.1"
31563208
resolved "https://registry.yarnpkg.com/@glimmer/vm-babel-plugins/-/vm-babel-plugins-0.83.1.tgz#5da67e3d84199352bbf0c5bc3f1ce71bf2b2ddfc"
@@ -7540,6 +7592,17 @@ ember-cli@~4.4.0:
75407592
workerpool "^6.2.0"
75417593
yam "^1.0.0"
75427594

7595+
ember-compatibility-helpers@^1.1.2:
7596+
version "1.2.6"
7597+
resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.6.tgz#603579ab2fb14be567ef944da3fc2d355f779cd8"
7598+
integrity sha512-2UBUa5SAuPg8/kRVaiOfTwlXdeVweal1zdNPibwItrhR0IvPrXpaqwJDlEZnWKEoB+h33V0JIfiWleSG6hGkkA==
7599+
dependencies:
7600+
babel-plugin-debug-macros "^0.2.0"
7601+
ember-cli-version-checker "^5.1.1"
7602+
find-up "^5.0.0"
7603+
fs-extra "^9.1.0"
7604+
semver "^5.4.1"
7605+
75437606
ember-compatibility-helpers@^1.2.0:
75447607
version "1.2.1"
75457608
resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.1.tgz#87c92c4303f990ff455c28ca39fb3ee11441aa16"
@@ -8975,7 +9038,7 @@ fs-extra@^7.0.0, fs-extra@^7.0.1:
89759038
jsonfile "^4.0.0"
89769039
universalify "^0.1.0"
89779040

8978-
fs-extra@^8.0.1, fs-extra@^8.1.0:
9041+
fs-extra@^8.0.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
89799042
version "8.1.0"
89809043
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
89819044
integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -12295,6 +12358,16 @@ p-finally@^1.0.0:
1229512358
version "1.0.0"
1229612359
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
1229712360

12361+
p-finally@^2.0.0:
12362+
version "2.0.1"
12363+
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
12364+
integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
12365+
12366+
p-is-promise@^1.1.0:
12367+
version "1.1.0"
12368+
resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
12369+
integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=
12370+
1229812371
p-limit@^1.1.0:
1229912372
version "1.1.0"
1230012373
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
@@ -15574,24 +15647,24 @@ walk-sync@^1.0.0, walk-sync@^1.1.3:
1557415647
ensure-posix-path "^1.1.0"
1557515648
matcher-collection "^1.1.1"
1557615649

15577-
walk-sync@^2.0.2:
15578-
version "2.0.2"
15579-
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.0.2.tgz#5ea8a28377c8be68c92d50f4007ea381725da14b"
15580-
integrity sha512-dCZkrxfHjPn7tIvdYrX3uMD/R0beVrHpA8lROQ5wWrl8psJgR6xwCkwqTFes0dNujbS2o/ITpvSYgIFsLsf13A==
15650+
walk-sync@^2.0.0, walk-sync@^2.2.0:
15651+
version "2.2.0"
15652+
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.2.0.tgz#80786b0657fcc8c0e1c0b1a042a09eae2966387a"
15653+
integrity sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==
1558115654
dependencies:
1558215655
"@types/minimatch" "^3.0.3"
1558315656
ensure-posix-path "^1.1.0"
1558415657
matcher-collection "^2.0.0"
15658+
minimatch "^3.0.4"
1558515659

15586-
walk-sync@^2.2.0:
15587-
version "2.2.0"
15588-
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.2.0.tgz#80786b0657fcc8c0e1c0b1a042a09eae2966387a"
15589-
integrity sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==
15660+
walk-sync@^2.0.2:
15661+
version "2.0.2"
15662+
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.0.2.tgz#5ea8a28377c8be68c92d50f4007ea381725da14b"
15663+
integrity sha512-dCZkrxfHjPn7tIvdYrX3uMD/R0beVrHpA8lROQ5wWrl8psJgR6xwCkwqTFes0dNujbS2o/ITpvSYgIFsLsf13A==
1559015664
dependencies:
1559115665
"@types/minimatch" "^3.0.3"
1559215666
ensure-posix-path "^1.1.0"
1559315667
matcher-collection "^2.0.0"
15594-
minimatch "^3.0.4"
1559515668

1559615669
walk-sync@^3.0.0:
1559715670
version "3.0.0"

0 commit comments

Comments
 (0)