removes ember-basic-dropdown-hover addon and adds mouse events to ToolTip component (#14816)
This commit is contained in:
Jordan Reimer
GitHub
parent
9ae2a85700
commit
fc648409e2
|
|
@ -0,0 +1,24 @@
|
|||
<BasicDropdown
|
||||
@renderInPlace={{@renderInPlace}}
|
||||
@verticalPosition={{@verticalPosition}}
|
||||
@horizontalPosition={{this.horizontalPosition}}
|
||||
@matchTriggerWidth={{@matchTriggerWidth}}
|
||||
@triggerComponent={{@triggerComponent}}
|
||||
@contentComponent={{@contentComponent}}
|
||||
@calculatePosition={{@calculatePosition}}
|
||||
@onOpen={{@onOpen}}
|
||||
@onClose={{@onClose}}
|
||||
@onFocus={{@onFocus}}
|
||||
@calculateInPlacePosition={{@calculateInPlacePosition}}
|
||||
as |dd|
|
||||
>
|
||||
{{yield
|
||||
(assign
|
||||
dd
|
||||
(hash
|
||||
Trigger=(component dd.Trigger onMouseDown=this.prevent onMouseEnter=this.open onMouseLeave=this.close)
|
||||
Content=(component dd.Content onMouseEnter=this.open onMouseLeave=this.close)
|
||||
)
|
||||
)
|
||||
}}
|
||||
</BasicDropdown>
|
||||
|
|
@ -1,8 +1,29 @@
|
|||
import HoverDropdown from 'ember-basic-dropdown-hover/components/basic-dropdown-hover';
|
||||
import layout from '../templates/components/tool-tip';
|
||||
import Component from '@glimmer/component';
|
||||
import { action } from '@ember/object';
|
||||
import { debounce } from '@ember/runloop';
|
||||
|
||||
export default HoverDropdown.extend({
|
||||
layout,
|
||||
delay: 200, // delay allows tooltip to remain open on content hover
|
||||
horizontalPosition: 'auto-right',
|
||||
});
|
||||
export default class ToolTipComponent extends Component {
|
||||
get delay() {
|
||||
return this.args.delay || 200;
|
||||
}
|
||||
get horizontalPosition() {
|
||||
return this.args.delay || 'auto-right';
|
||||
}
|
||||
|
||||
toggleState({ dropdown, action }) {
|
||||
dropdown.actions[action]();
|
||||
}
|
||||
|
||||
@action
|
||||
open(dropdown) {
|
||||
debounce(this, 'toggleState', { dropdown, action: 'open' }, this.delay);
|
||||
}
|
||||
@action
|
||||
close(dropdown) {
|
||||
debounce(this, 'toggleState', { dropdown, action: 'close' }, this.delay);
|
||||
}
|
||||
@action
|
||||
prevent() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
<BasicDropdown
|
||||
@renderInPlace={{this.renderInPlace}}
|
||||
@verticalPosition={{this.verticalPosition}}
|
||||
@horizontalPosition={{this.horizontalPosition}}
|
||||
@matchTriggerWidth={{this.matchTriggerWidth}}
|
||||
@triggerComponent={{this.triggerComponent}}
|
||||
@contentComponent={{this.contentComponent}}
|
||||
@calculatePosition={{this.calculatePosition}}
|
||||
@onOpen={{this.onOpen}}
|
||||
@onClose={{this.onClose}}
|
||||
@onFocus={{this.onFocus}}
|
||||
@calculateInPlacePosition={{this.calculateInPlacePosition}}
|
||||
{{on "mousedown" this.prevent}}
|
||||
{{on "mouseenter" this.open}}
|
||||
{{on "mouseleave" this.closeLater}}
|
||||
as |dd|
|
||||
>
|
||||
{{yield
|
||||
(assign
|
||||
dd
|
||||
(hash
|
||||
Trigger=(component
|
||||
dd.Trigger onMouseDown=(action "prevent") onMouseEnter=(action "open") onMouseLeave=(action "close")
|
||||
)
|
||||
Content=(component dd.Content onMouseEnter=(action "open") onMouseLeave=(action "close"))
|
||||
)
|
||||
)
|
||||
}}
|
||||
</BasicDropdown>
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
"base64-js": "*",
|
||||
"ember-auto-import": "*",
|
||||
"ember-basic-dropdown": "*",
|
||||
"ember-basic-dropdown-hover": "*",
|
||||
"ember-cli-babel": "*",
|
||||
"ember-cli-clipboard": "*",
|
||||
"ember-cli-htmlbars": "*",
|
||||
|
|
|
|||
|
|
@ -94,7 +94,6 @@
|
|||
"ember-api-actions": "^0.2.8",
|
||||
"ember-auto-import": "^1.10.1",
|
||||
"ember-basic-dropdown": "3.0.19",
|
||||
"ember-basic-dropdown-hover": "0.6.0",
|
||||
"ember-cli": "~3.24.0",
|
||||
"ember-cli-autoprefixer": "^0.8.1",
|
||||
"ember-cli-babel": "^7.23.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render, triggerEvent } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | tool-tip', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it should open and close on mouse enter and leave', async function (assert) {
|
||||
await render(hbs`
|
||||
<ToolTip as |T|>
|
||||
<T.Trigger>
|
||||
<span data-test-trigger>Trigger</span>
|
||||
</T.Trigger>
|
||||
<T.Content>
|
||||
<span data-test-content>Tooltip</span>
|
||||
</T.Content>
|
||||
</ToolTip>
|
||||
`);
|
||||
|
||||
assert.dom('[data-test-content]').doesNotExist('Tooltip is hidden');
|
||||
await triggerEvent('[data-test-trigger]', 'mouseenter');
|
||||
assert.dom('[data-test-content]').exists('Tooltip renders on mouse enter');
|
||||
await triggerEvent('[data-test-content]', 'mouseleave');
|
||||
assert.dom('[data-test-content]').doesNotExist('Tooltip is hidden on mouse leave');
|
||||
});
|
||||
});
|
||||
19
ui/yarn.lock
19
ui/yarn.lock
|
|
@ -9627,13 +9627,6 @@ ember-asset-loader@^0.6.1:
|
|||
object-assign "^4.1.0"
|
||||
walk-sync "^1.1.3"
|
||||
|
||||
ember-assign-helper@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-assign-helper/-/ember-assign-helper-0.2.0.tgz#02d1b5ee6b4f9cb68036b7d19db47f2a9d74f148"
|
||||
integrity sha512-WO6K24m6Wk+G1PBOMaXUtOMkzCTtt9z67SPIcAFxOVqc95hUU62wDRUdDiPa/854T5rroq5CJ7Ey4LgxorCsgg==
|
||||
dependencies:
|
||||
ember-cli-babel "^6.6.0"
|
||||
|
||||
ember-assign-helper@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-assign-helper/-/ember-assign-helper-0.4.0.tgz#f0a313033656c0d2cbbcb29d55b9cd13f04bc7c1"
|
||||
|
|
@ -9712,17 +9705,7 @@ ember-auto-import@^1.2.19:
|
|||
walk-sync "^0.3.3"
|
||||
webpack "^4.43.0"
|
||||
|
||||
ember-basic-dropdown-hover@0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/ember-basic-dropdown-hover/-/ember-basic-dropdown-hover-0.6.0.tgz#67716dfe15cbfa07f851054f51753f1bbcc24ae7"
|
||||
integrity sha512-3RS+FV7WxedaZrkafUHseXyVzp/Rc/ZUVbIm0VYXS+Eke2ajDifAfi52BFpl2w6SdmM5KG7Bvcc3WY8oDqjGgg==
|
||||
dependencies:
|
||||
ember-assign-helper "^0.2.0"
|
||||
ember-basic-dropdown "^1.1.2"
|
||||
ember-cli-babel "^7.1.2"
|
||||
ember-cli-htmlbars "^3.0.0"
|
||||
|
||||
ember-basic-dropdown@3.0.19, ember-basic-dropdown@^1.1.2, "ember-basic-dropdown@^3.1.0 || ^4.0.2":
|
||||
ember-basic-dropdown@3.0.19, "ember-basic-dropdown@^3.1.0 || ^4.0.2":
|
||||
version "3.0.19"
|
||||
resolved "https://registry.yarnpkg.com/ember-basic-dropdown/-/ember-basic-dropdown-3.0.19.tgz#e15e71097cbcbc585e85c2c5cf677a6434edb1d5"
|
||||
integrity sha512-5mZ4hbfGLd+TrFAp0JsfcpIb10zqF60SorKc1Bsm29kJF2wy8p0JUXMb21VVF7+phkrRFYbcXy5enFc8qdm4xw==
|
||||
|
|
|
|||
Loading…
Reference in New Issue