Merge "Add confirmOnEnter prop to confirm dialog"
This commit is contained in:
@@ -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">
|
||||
|
@@ -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>
|
||||
|
@@ -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">
|
||||
|
@@ -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">
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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); }
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user