Skip to content

Commit

Permalink
Convert flash-message to Glimmer component (#382)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@charlesfries
charlesfries committed Jun 16, 2022
1 parent da038c7 commit 0f4c0ac
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 55 deletions.
5 changes: 3 additions & 2 deletions addon/templates/components/flash-message.hbs → addon/components/flash-message.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
{{on "click" this.onClick}}
{{did-insert this.onDidInsert}}
{{will-destroy this.onWillDestroy}}
{{! template-lint-disable no-invalid-interactive }}
>
{{#if (has-block)}}
{{yield this this.flash (action "onClose")}}
{{yield this @flash this.onClose}}
{{else}}
{{this.flash.message}}
{{@flash.message}}
{{#if this.showProgressBar}}
<div class="alert-progress">
<div class="alert-progressBar" style={{this.progressDuration}}></div>
Expand Down
93 changes: 58 additions & 35 deletions addon/components/flash-message.js
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,101 @@
import Component from '@ember/component';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { classify } from '@ember/string';
import { htmlSafe } from '@ember/template';
import { isPresent } from '@ember/utils';
import { next, cancel } from '@ember/runloop';
import { action, computed, set } from '@ember/object';
import { and, readOnly, not } from '@ember/object/computed';
import layout from '../templates/components/flash-message';
import { action, computed } from '@ember/object';

/**
* ARGS
*
* flash: FlashObject
* messageStyle?: 'bootstrap' | 'foundation'
* messageStylePrefix?: string
*/

export default class FlashMessage extends Component {
tagName = '';
layout = layout;
active = false;
messageStyle = 'bootstrap';
@tracked active = false;

@tracked pendingSet;
@tracked _mouseEnterHandler;
@tracked _mouseLeaveHandler;

get messageStyle() {
return this.args.messageStyle ?? 'bootstrap';
}

get showProgress() {
return this.args.flash.showProgress;
}

@readOnly('flash.showProgress')
showProgress;
get notExiting() {
return !this.exiting;
}

@not('exiting')
notExiting;
get showProgressBar() {
return this.showProgress && this.notExiting;
}

@and('showProgress', 'notExiting')
showProgressBar;
@computed('args.flash.exiting')
get exiting() {
return this.args.flash.exiting;
}

@readOnly('flash.exiting')
exiting;
get messageStylePrefix() {
return this.args.messageStylePrefix ?? this._defaultMessageStylePrefix;
}

@computed('messageStyle')
get _defaultMessageStylePrefix() {
const isFoundation = this.messageStyle === 'foundation';
return isFoundation ? 'alert-box ' : 'alert alert-';
}

@computed('flash.type', 'messageStylePrefix', '_defaultMessageStylePrefix')
@computed('args.flash.type', 'messageStylePrefix')
get alertType() {
const flashType = this.flash.type || '';
const prefix = this.messageStylePrefix || this._defaultMessageStylePrefix;
const flashType = this.args.flash.type || '';
const prefix = this.messageStylePrefix;
return `${prefix}${flashType}`;
}

@computed('flash.type')
@computed('args.flash.type')
get flashType() {
return classify(this.flash.type || '');
return classify(this.args.flash.type || '');
}

@computed('flash.{showProgress,timeout}')
@computed('args.flash.{showProgress,timeout}')
get progressDuration() {
if (!this.flash?.showProgress) {
if (!this.args.flash?.showProgress) {
return false;
}
const duration = this.flash?.timeout || 0;
const duration = this.args.flash?.timeout || 0;
return htmlSafe(`transition-duration: ${duration}ms`);
}

@action
_mouseEnter() {
if (isPresent(this.flash)) {
this.flash.preventExit();
if (isPresent(this.args.flash)) {
this.args.flash.preventExit();
}
}

@action
_mouseLeave() {
if (isPresent(this.flash) && !this.flash.exiting) {
this.flash.allowExit();
if (isPresent(this.args.flash) && !this.args.flash.exiting) {
this.args.flash.allowExit();
}
}

_destroyFlashMessage() {
if (this.flash) {
this.flash.destroyMessage();
if (this.args.flash) {
this.args.flash.destroyMessage();
}
}

@action
onClick() {
const destroyOnClick = this.flash?.destroyOnClick ?? true;
const destroyOnClick = this.args.flash?.destroyOnClick ?? true;

if (destroyOnClick) {
this._destroyFlashMessage();
Expand All @@ -87,11 +110,11 @@ export default class FlashMessage extends Component {
@action
onDidInsert(element) {
const pendingSet = next(this, () => {
set(this, 'active', true);
this.active = true;
});
set(this, 'pendingSet', pendingSet);
set(this, '_mouseEnterHandler', this._mouseEnter);
set(this, '_mouseLeaveHandler', this._mouseLeave);
this.pendingSet = pendingSet;
this._mouseEnterHandler = this._mouseEnter;
this._mouseLeaveHandler = this._mouseLeave;
element.addEventListener('mouseenter', this._mouseEnterHandler);
element.addEventListener('mouseleave', this._mouseLeaveHandler);
}
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
},
"dependencies": {
"@ember/render-modifiers": "^2.0.2",
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"ember-auto-import": "^2.4.1",
"ember-cli-babel": "^7.26.11",
"ember-cli-htmlbars": "^6.0.1"
Expand Down
109 changes: 91 additions & 18 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2317,6 +2317,15 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-typescript" "^7.2.0"

"@babel/plugin-transform-typescript@~7.5.0":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.5.5.tgz#6d862766f09b2da1cb1f7d505fe2aedab6b7d4b8"
integrity sha512-pehKf4m640myZu5B2ZviLaiBlxMCjSZ1qTEO459AXKX5GnPueyulJeCqZFs1nz/Ya2dDzXQ1NxZ/kKNWyD4h6w==
dependencies:
"@babel/helper-create-class-features-plugin" "^7.5.5"
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-typescript" "^7.2.0"

"@babel/plugin-transform-unicode-escapes@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
Expand Down Expand Up @@ -3032,6 +3041,31 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"

"@glimmer/component@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@glimmer/component/-/component-1.1.2.tgz#892ec0c9f0b6b3e41c112be502fde073cf24d17c"
integrity sha512-XyAsEEa4kWOPy+gIdMjJ8XlzA3qrGH55ZDv6nA16ibalCR17k74BI0CztxuRds+Rm6CtbUVgheCVlcCULuqD7A==
dependencies:
"@glimmer/di" "^0.1.9"
"@glimmer/env" "^0.1.7"
"@glimmer/util" "^0.44.0"
broccoli-file-creator "^2.1.1"
broccoli-merge-trees "^3.0.2"
ember-cli-babel "^7.7.3"
ember-cli-get-component-path-option "^1.0.0"
ember-cli-is-package-missing "^1.0.0"
ember-cli-normalize-entity-name "^1.0.0"
ember-cli-path-utils "^1.0.0"
ember-cli-string-utils "^1.1.0"
ember-cli-typescript "3.0.0"
ember-cli-version-checker "^3.1.3"
ember-compatibility-helpers "^1.1.2"

"@glimmer/di@^0.1.9":
version "0.1.11"
resolved "https://registry.yarnpkg.com/@glimmer/di/-/di-0.1.11.tgz#a6878c07a13a2c2c76fcde598a5c97637bfc4280"
integrity sha512-moRwafNDwHTnTHzyyZC9D+mUSvYrs1Ak0tRPjjmCghdoHHIvMshVbEnwKb/1WmW5CUlKc2eL9rlAV32n3GiItg==

"@glimmer/encoder@^0.42.2":
version "0.42.2"
resolved "https://registry.yarnpkg.com/@glimmer/encoder/-/encoder-0.42.2.tgz#d3ba3dc9f1d4fa582d1d18b63da100fc5c664057"
Expand Down Expand Up @@ -3129,10 +3163,18 @@
"@handlebars/parser" "~2.0.0"
simple-html-tokenizer "^0.5.11"

"@glimmer/util@0.83.1":
version "0.83.1"
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.83.1.tgz#cc7511b03164d658cf6e3262fce5a0fcb82edceb"
integrity sha512-amvjtl9dvrkxsoitXAly9W5NUaLIE3A2J2tWhBWIL1Z6DOFotfX7ytIosOIcPhJLZCtiXPHzMutQRv0G/MSMsA==
"@glimmer/tracking@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@glimmer/tracking/-/tracking-1.1.2.tgz#74e71be07b0a7066518d24044d2665d0cf8281eb"
integrity sha512-cyV32zsHh+CnftuRX84ALZpd2rpbDrhLhJnTXn9W//QpqdRZ5rdMsxSY9fOsj0CKEc706tmEU299oNnDc0d7tA==
dependencies:
"@glimmer/env" "^0.1.7"
"@glimmer/validator" "^0.44.0"

"@glimmer/util@0.65.4":
version "0.65.4"
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.65.4.tgz#e464145078f3f40da9013ff2590a6016515455d2"
integrity sha512-aofe+rdBhkREKP2GZta6jy1UcbRRMfWx7M18zxGxspPoeD08NscD04Kx+WiOKXmC1TcrfITr8jvqMfrKrMzYWQ==
dependencies:
"@glimmer/env" "0.1.7"
"@glimmer/interfaces" "0.83.1"
Expand All @@ -3143,14 +3185,24 @@
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.42.2.tgz#9ca1631e42766ea6059f4b49d0bdfb6095aad2c4"
integrity sha512-Heck0baFSaWDanCYtmOcLeaz7v+rSqI8ovS7twrp2/FWEteb3Ze5sWQ2BEuSAG23L/k/lzVwYM/MY7ZugxBpaA==

"@glimmer/validator@0.83.1", "@glimmer/validator@^0.83.0":
version "0.83.1"
resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.83.1.tgz#7578cb2284f728c8e9302c51fc6e7660b570ac54"
integrity sha512-LaILSNnQgDHZpaUsfjVndbS1JfVn0xdTlJdFJblPbhoVklOBSReZVekens3EQ6xOr3BC612sRm1hBnEPixOY6A==
"@glimmer/util@^0.44.0":
version "0.44.0"
resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.44.0.tgz#45df98d73812440206ae7bda87cfe04aaae21ed9"
integrity sha512-duAsm30uVK9jSysElCbLyU6QQYO2X9iLDLBIBUcCqck9qN1o3tK2qWiHbGK5d6g8E2AJ4H88UrfElkyaJlGrwg==

"@glimmer/validator@0.65.4", "@glimmer/validator@^0.65.0":
version "0.65.4"
resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.65.4.tgz#12c27a9a63706c60e6499fd687940e9d1affb32c"
integrity sha512-0YUjAyo45DF5JkQxdv5kHn96nMNhvZiEwsAD4Jme0kk5Q9MQcPOUtN76pQAS4f+C6GdF9DeUr2yGXZLFMmb+LA==
dependencies:
"@glimmer/env" "^0.1.7"
"@glimmer/global-context" "0.83.1"

"@glimmer/validator@^0.44.0":
version "0.44.0"
resolved "https://registry.yarnpkg.com/@glimmer/validator/-/validator-0.44.0.tgz#03d127097dc9cb23052cdb7fcae59d0a9dca53e1"
integrity sha512-i01plR0EgFVz69GDrEuFgq1NheIjZcyTy3c7q+w7d096ddPVeVcRzU3LKaqCfovvLJ+6lJx40j45ecycASUUyw==

"@glimmer/vm-babel-plugins@0.83.1":
version "0.83.1"
resolved "https://registry.yarnpkg.com/@glimmer/vm-babel-plugins/-/vm-babel-plugins-0.83.1.tgz#5da67e3d84199352bbf0c5bc3f1ce71bf2b2ddfc"
Expand Down Expand Up @@ -7540,6 +7592,17 @@ ember-cli@~4.4.0:
workerpool "^6.2.0"
yam "^1.0.0"

ember-compatibility-helpers@^1.1.2:
version "1.2.6"
resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.6.tgz#603579ab2fb14be567ef944da3fc2d355f779cd8"
integrity sha512-2UBUa5SAuPg8/kRVaiOfTwlXdeVweal1zdNPibwItrhR0IvPrXpaqwJDlEZnWKEoB+h33V0JIfiWleSG6hGkkA==
dependencies:
babel-plugin-debug-macros "^0.2.0"
ember-cli-version-checker "^5.1.1"
find-up "^5.0.0"
fs-extra "^9.1.0"
semver "^5.4.1"

ember-compatibility-helpers@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.1.tgz#87c92c4303f990ff455c28ca39fb3ee11441aa16"
Expand Down Expand Up @@ -8975,7 +9038,7 @@ fs-extra@^7.0.0, fs-extra@^7.0.1:
jsonfile "^4.0.0"
universalify "^0.1.0"

fs-extra@^8.0.1, fs-extra@^8.1.0:
fs-extra@^8.0.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
Expand Down Expand Up @@ -12295,6 +12358,16 @@ p-finally@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"

p-finally@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==

p-is-promise@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
integrity sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=

p-limit@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
Expand Down Expand Up @@ -15574,24 +15647,24 @@ walk-sync@^1.0.0, walk-sync@^1.1.3:
ensure-posix-path "^1.1.0"
matcher-collection "^1.1.1"

walk-sync@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.0.2.tgz#5ea8a28377c8be68c92d50f4007ea381725da14b"
integrity sha512-dCZkrxfHjPn7tIvdYrX3uMD/R0beVrHpA8lROQ5wWrl8psJgR6xwCkwqTFes0dNujbS2o/ITpvSYgIFsLsf13A==
walk-sync@^2.0.0, walk-sync@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.2.0.tgz#80786b0657fcc8c0e1c0b1a042a09eae2966387a"
integrity sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==
dependencies:
"@types/minimatch" "^3.0.3"
ensure-posix-path "^1.1.0"
matcher-collection "^2.0.0"
minimatch "^3.0.4"

walk-sync@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.2.0.tgz#80786b0657fcc8c0e1c0b1a042a09eae2966387a"
integrity sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==
walk-sync@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-2.0.2.tgz#5ea8a28377c8be68c92d50f4007ea381725da14b"
integrity sha512-dCZkrxfHjPn7tIvdYrX3uMD/R0beVrHpA8lROQ5wWrl8psJgR6xwCkwqTFes0dNujbS2o/ITpvSYgIFsLsf13A==
dependencies:
"@types/minimatch" "^3.0.3"
ensure-posix-path "^1.1.0"
matcher-collection "^2.0.0"
minimatch "^3.0.4"

walk-sync@^3.0.0:
version "3.0.0"
Expand Down

0 comments on commit 0f4c0ac

Please sign in to comment.