javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(picker-column-internal): add ability to disable items (#25412)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-06-07 11:27:25 -04:00
committed by GitHub
parent 01c40eae55
commit 8b7c07968e
6 changed files with 219 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/picker-column-internal/picker-column-internal.tsx
View File

@ -146,7 +146,7 @@ export class PickerColumnInternal implements ComponentInterface {
private setValue(value?: string | number) {
const { items } = this;
this.value = value;
const findItem = items.find((item) => item.value === value);
const findItem = items.find((item) => item.value === value && item.disabled !== true);
if (findItem) {
this.ionChange.emit(findItem);
}
@ -226,11 +226,15 @@ export class PickerColumnInternal implements ComponentInterface {
const centerX = bbox.x + bbox.width / 2;
const centerY = bbox.y + bbox.height / 2;
const activeElement = el.shadowRoot!.elementFromPoint(centerX, centerY) as HTMLElement;
const activeElement = el.shadowRoot!.elementFromPoint(centerX, centerY) as HTMLButtonElement;
if (activeEl !== null) {
activeEl.classList.remove(PICKER_COL_ACTIVE);
}
if (activeElement.disabled) {
return;
}
/**
* If we are selecting a new value,
* we need to run haptics again.
@ -280,7 +284,9 @@ export class PickerColumnInternal implements ComponentInterface {
};
get activeItem() {
return getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]`) as HTMLElement | null;
return getElementRoot(this.el).querySelector(
`.picker-item[data-value="${this.value}"]:not([disabled])`
) as HTMLElement | null;
}
render() {
@ -301,16 +307,20 @@ export class PickerColumnInternal implements ComponentInterface {
<div class="picker-item picker-item-empty">&nbsp;</div>
{items.map((item, index) => {
return (
<div
class="picker-item"
<button
class={{
'picker-item': true,
'picker-item-disabled': item.disabled || false,
}}
data-value={item.value}
data-index={index}
onClick={(ev: Event) => {
this.centerPickerItemInView(ev.target as HTMLElement);
}}
disabled={item.disabled}
>
{item.text}
</div>
</button>
);
})}
<div class="picker-item picker-item-empty">&nbsp;</div>