ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(select-rich): added signleoption functionality

Browse source
This commit is contained in:
palash2601 2020-04-10 11:20:35 +02:00
parent 41ac853d42
commit 7c3741854d
3 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/select-rich/src/LionSelectInvoker.js
View file

@ -28,7 +28,7 @@ export class LionSelectInvoker extends LionButton {
type: Object,
},
/**
* @desc When the connected LionSelectRich insteance is readOnly,
* @desc When the connected LionSelectRich instance is readOnly,
* this should be reflected in the invoker as well
*/
readOnly: {
@ -36,6 +36,15 @@ export class LionSelectInvoker extends LionButton {
reflect: true,
attribute: 'readonly',
},
/**
* @desc When the connected LionSelectRich instance has only one option,
* this should be reflected in the invoker as well
*/
singleOption: {
type: Boolean,
reflect: true,
attribute: 'singleOption',
},
};
}

6
packages/select-rich/src/LionSelectRich.js
View file

@ -219,6 +219,10 @@ export class LionSelectRich extends ScopedElementsMixin(
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
if (this._listboxNode.childElementCount === 1) {
this.singleOption = true;
this._invokerNode.singleOption = true;
}
this._overlaySetupComplete.then(() => {
this.__setupOverlay();
@ -572,7 +576,7 @@ export class LionSelectRich extends ScopedElementsMixin(
__setupInvokerNodeEventListener() {
this.__invokerOnClick = () => {
if (!this.disabled && !this.readOnly) {
if (!this.disabled && !this.readOnly && !this.singleOption) {
this._overlayCtrl.toggle();
}
};

27
packages/select-rich/test/lion-select-rich.test.js
View file

@ -274,6 +274,19 @@ describe('lion-select-rich', () => {
expect(el.hasAttribute('readonly')).to.be.true;
expect(el._invokerNode.hasAttribute('readonly')).to.be.true;
});
it('delegates singleOption to the invoker', async () => {
const el = await fixture(html`
<lion-select-rich>
<lion-options slot="input">
<lion-option .choiceValue=${10}>Item 1</lion-option>
</lion-options>
</lion-select-rich>
`);
expect(el.singleOption).to.be.true;
expect(el._invokerNode.hasAttribute('singleOption')).to.be.true;
});
});
describe('overlay', () => {
@ -351,7 +364,7 @@ describe('lion-select-rich', () => {
expect(options[1].checked).to.be.true;
});
it('stays closed on click if it is disabled or readonly', async () => {
it('stays closed on click if it is disabled or readonly or has a single option', async () => {
const elReadOnly = await fixture(html`
<lion-select-rich readonly>
<lion-options slot="input">
@ -370,6 +383,14 @@ describe('lion-select-rich', () => {
</lion-select-rich>
`);
const elSingleoption = await fixture(html`
<lion-select-rich>
<lion-options slot="input">
<lion-option .choiceValue=${10}>Item 1</lion-option>
</lion-options>
</lion-select-rich>
`);
elReadOnly._invokerNode.click();
await elReadOnly.updateComplete;
expect(elReadOnly.opened).to.be.false;
@ -377,6 +398,10 @@ describe('lion-select-rich', () => {
elDisabled._invokerNode.click();
await elDisabled.updateComplete;
expect(elDisabled.opened).to.be.false;
elSingleoption._invokerNode.click();
await elSingleoption.updateComplete;
expect(elSingleoption.opened).to.be.false;
});
it('should override the inheritsWidth prop when no default selected feature is used', async () => {