Merge "Add confirmOnEnter prop to confirm dialog"

This commit is contained in:
Kasper Nilsson
2018-02-14 00:43:05 +00:00
committed by Gerrit Code Review
8 changed files with 45 additions and 3 deletions

View File

@@ -68,6 +68,7 @@ limitations under the License.
class="confirmDialog"
disabled="[[!_hasNewGroupName]]"
confirm-label="Create"
confirm-on-enter
on-confirm="_handleCreateGroup"
on-cancel="_handleCloseCreate">
<div class="header" slot="header">

View File

@@ -28,6 +28,7 @@ limitations under the License.
</style>
<gr-confirm-dialog
confirm-label="Delete [[_computeItemName(itemType)]]"
confirm-on-enter
on-confirm="_handleConfirmTap"
on-cancel="_handleCancelTap">
<div class="header" slot="header">[[_computeItemName(itemType)]] Deletion</div>

View File

@@ -167,6 +167,7 @@ limitations under the License.
id="confirmDeleteDialog"
class="confirmDialog"
confirm-label="Delete"
confirm-on-enter
on-cancel="_handleConfirmDialogCancel"
on-confirm="_handleDeleteConfirm">
<div class="header" slot="header">
@@ -180,6 +181,7 @@ limitations under the License.
id="confirmDeleteEditDialog"
class="confirmDialog"
confirm-label="Delete"
confirm-on-enter
on-cancel="_handleConfirmDialogCancel"
on-confirm="_handleDeleteEditConfirm">
<div class="header" slot="header">

View File

@@ -331,6 +331,7 @@ limitations under the License.
<gr-confirm-dialog
id="confirmDiscardDialog"
confirm-label="Discard"
confirm-on-enter
on-confirm="_handleConfirmDiscard"
on-cancel="_closeConfirmDiscardOverlay">
<div class="header" slot="header">

View File

@@ -83,6 +83,7 @@ limitations under the License.
class="invisible dialog"
disabled$="[[!_isValidPath(_path)]]"
confirm-label="Open"
confirm-on-enter
on-confirm="_handleOpenConfirm"
on-cancel="_handleDialogCancel">
<div class="header" slot="header">
@@ -100,6 +101,7 @@ limitations under the License.
class="invisible dialog"
disabled$="[[!_isValidPath(_path)]]"
confirm-label="Delete"
confirm-on-enter
on-confirm="_handleDeleteConfirm"
on-cancel="_handleDialogCancel">
<div class="header" slot="header">Delete a file from the repo</div>
@@ -115,6 +117,7 @@ limitations under the License.
class="invisible dialog"
disabled$="[[!_computeRenameDisabled(_path, _newPath)]]"
confirm-label="Rename"
confirm-on-enter
on-confirm="_handleRenameConfirm"
on-cancel="_handleDialogCancel">
<div class="header" slot="header">Rename a file in the repo</div>
@@ -134,6 +137,7 @@ limitations under the License.
id="restoreDialog"
class="invisible dialog"
confirm-label="Restore"
confirm-on-enter
on-confirm="_handleRestoreConfirm"
on-cancel="_handleDialogCancel">
<div class="header" slot="header">Restore this file?</div>

View File

@@ -54,12 +54,12 @@ limitations under the License.
justify-content: flex-end;
}
</style>
<div class="container">
<div class="container" on-keydown="_handleKeydown">
<header><slot name="header"></slot></header>
<main><slot name="main"></slot></main>
<footer>
<gr-button link on-tap="_handleCancelTap">[[cancelLabel]]</gr-button>
<gr-button link primary on-tap="_handleConfirmTap" disabled="[[disabled]]">
<gr-button link primary on-tap="_handleConfirm" disabled="[[disabled]]">
[[confirmLabel]]
</gr-button>
</footer>

View File

@@ -42,13 +42,19 @@
type: Boolean,
value: false,
},
confirmOnEnter: {
type: Boolean,
value: false,
},
},
hostAttributes: {
role: 'dialog',
},
_handleConfirmTap(e) {
_handleConfirm(e) {
if (this.disabled) { return; }
e.preventDefault();
this.fire('confirm', null, {bubbles: false});
},
@@ -57,5 +63,9 @@
e.preventDefault();
this.fire('cancel', null, {bubbles: false});
},
_handleKeydown(e) {
if (this.confirmOnEnter && e.keyCode === 13) { this._handleConfirm(e); }
},
});
})();

View File

@@ -34,11 +34,15 @@ limitations under the License.
<script>
suite('gr-confirm-dialog tests', () => {
let element;
let sandbox;
setup(() => {
sandbox = sinon.sandbox.create();
element = fixture('basic');
});
teardown(() => { sandbox.restore(); });
test('events', done => {
let numEvents = 0;
function handler() { if (++numEvents == 2) { done(); } }
@@ -49,5 +53,24 @@ limitations under the License.
MockInteractions.tap(element.$$('gr-button[primary]'));
MockInteractions.tap(element.$$('gr-button:not([primary])'));
});
test('confirmOnEnter', () => {
element.confirmOnEnter = false;
const handleConfirmStub = sandbox.stub(element, '_handleConfirm');
const handleKeydownSpy = sandbox.spy(element, '_handleKeydown');
MockInteractions.pressAndReleaseKeyOn(element.$$('main'),
13, null, 'enter');
flushAsynchronousOperations();
assert.isTrue(handleKeydownSpy.called);
assert.isFalse(handleConfirmStub.called);
element.confirmOnEnter = true;
MockInteractions.pressAndReleaseKeyOn(element.$$('main'),
13, null, 'enter');
flushAsynchronousOperations();
assert.isTrue(handleConfirmStub.called);
});
});
</script>