replace gh-select-native with one-way-select (#286)

no issue
- removes `gh-select-native` component as ember-one-way-control's `one-way-select` component offers the same one-way-binding but also allows element attributes to be set
This commit is contained in:
Kevin Ansfield 2016-09-26 18:39:43 +02:00 committed by Austin Burdine
parent 467ee93b21
commit c296437366
7 changed files with 17 additions and 84 deletions

View File

@ -1,40 +0,0 @@
import Component from 'ember-component';
import {reads} from 'ember-computed';
function K() {
return this;
}
export default Component.extend({
content: null,
prompt: null,
optionValuePath: 'id',
optionLabelPath: 'title',
selection: null,
action: K, // action to fire on change
// shadow the passed-in `selection` to avoid
// leaking changes to it via a 2-way binding
_selection: reads('selection'),
actions: {
change() {
// jscs:disable requireArrayDestructuring
let selectEl = this.$('select')[0];
// jscs:enable requireArrayDestructuring
let {selectedIndex} = selectEl;
// decrement index by 1 if we have a prompt
let hasPrompt = !!this.get('prompt');
let contentIndex = hasPrompt ? selectedIndex - 1 : selectedIndex;
let selection = this.get('content').objectAt(contentIndex);
// set the local, shadowed selection to avoid leaking
// changes to `selection` out via 2-way binding
this.set('_selection', selection);
this.sendAction('action', selection);
}
}
});

View File

@ -1,13 +1,13 @@
<label for="activeTimezone">Timezone</label>
<span class="gh-select" data-select-text="{{selectedTimezone.label}}" tabindex="0">
{{gh-select-native
{{one-way-select
id="activeTimezone"
name="general[activeTimezone]"
content=selectableTimezones
options=selectableTimezones
optionValuePath="name"
optionLabelPath="label"
selection=selectedTimezone
action="setTimezone"
value=selectedTimezone
update=(action "setTimezone")
}}
</span>
{{#if hasTimezoneOverride}}

View File

@ -67,14 +67,14 @@
<label for="author-list">Author</label>
<span class="input-icon icon-user">
<span class="gh-select" tabindex="0">
{{gh-select-native
name="post-setting-author"
{{one-way-select
id="author-list"
content=authors
name="post-setting-author"
options=authors
optionValuePath="id"
optionLabelPath="name"
selection=selectedAuthor
action="changeAuthor"
value=selectedAuthor
update=(action "changeAuthor")
}}
</span>
</span>

View File

@ -115,12 +115,13 @@
<div class="form-group">
<label for="user-role">Role</label>
<span class="gh-select" tabindex="0">
{{gh-select-native id="new-user-role"
content=roles
{{one-way-select
id="new-user-role"
options=roles
optionValuePath="id"
optionLabelPath="name"
selection=model.role
action="changeRole"
value=model.role
update=(action "changeRole")
}}
</span>
<p>What permissions should this user have?</p>

View File

@ -208,7 +208,7 @@ describe('Acceptance: Editor', function() {
find('#activeTimezone option[value="Pacific/Kwajalein"]').prop('selected', true);
});
triggerEvent('#activeTimezone select', 'change');
triggerEvent('#activeTimezone', 'change');
// save the settings
click('.view-header .btn.btn-blue');

View File

@ -135,12 +135,12 @@ describe('Acceptance: Settings - General', function () {
andThen(() => {
expect(currentURL(), 'currentURL').to.equal('/settings/general');
expect(find('#activeTimezone select option').length, 'available timezones').to.equal(66);
expect(find('#activeTimezone option').length, 'available timezones').to.equal(66);
expect(find('#activeTimezone option:selected').text().trim()).to.equal('(GMT) UTC');
find('#activeTimezone option[value="Africa/Cairo"]').prop('selected', true);
});
triggerEvent('#activeTimezone select', 'change');
triggerEvent('#activeTimezone', 'change');
click('.view-header .btn.btn-blue');
andThen(() => {

View File

@ -1,28 +0,0 @@
/* jshint expr:true */
import {expect} from 'chai';
import {
describeComponent,
it
} from 'ember-mocha';
describeComponent(
'gh-select-native',
'Unit: Component: gh-select-native',
{
unit: true
// specify the other units that are required for this test
// needs: ['component:foo', 'helper:bar']
},
function () {
it('renders', function () {
// creates the component instance
let component = this.subject();
expect(component._state).to.equal('preRender');
// renders the component on the page
this.render();
expect(component._state).to.equal('inDOM');
});
}
);