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

feat(select-option): pass class from the option to the interface for individual styling (#21304)

Browse Source 
Co-authored-by: Robb Wright <audaxion@gmail.com>
This commit is contained in:
Brandy Carney
2020-05-27 12:12:01 -04:00
committed by GitHub
parent 2dac12c577
commit 5285824da5
12 changed files with 1465 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components/select/select.tsx
View File

@ -229,9 +229,15 @@ export class Select implements ComponentInterface {
private createActionSheetButtons(data: HTMLIonSelectOptionElement[], selectValue: any): ActionSheetButton[] {
const actionSheetButtons = data.map(option => {
const value = getOptionValue(option);
// Remove hydrated before copying over classes
const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
const optClass = `${OPTION_CLASS} ${copyClasses}`;
return {
role: (isOptionSelected(value, selectValue, this.compareWith) ? 'selected' : ''),
text: option.textContent,
cssClass: optClass,
handler: () => {
this.value = value;
}
@ -251,32 +257,48 @@ export class Select implements ComponentInterface {
}
private createAlertInputs(data: HTMLIonSelectOptionElement[], inputType: 'checkbox' | 'radio', selectValue: any): AlertInput[] {
return data.map(o => {
const value = getOptionValue(o);
const alertInputs = data.map(option => {
const value = getOptionValue(option);
// Remove hydrated before copying over classes
const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
const optClass = `${OPTION_CLASS} ${copyClasses}`;
return {
type: inputType,
label: o.textContent || '',
cssClass: optClass,
label: option.textContent || '',
value,
checked: isOptionSelected(value, selectValue, this.compareWith),
disabled: o.disabled
disabled: option.disabled
};
});
return alertInputs;
}
private createPopoverOptions(data: HTMLIonSelectOptionElement[], selectValue: any): SelectPopoverOption[] {
return data.map(o => {
const value = getOptionValue(o);
const popoverOptions = data.map(option => {
const value = getOptionValue(option);
// Remove hydrated before copying over classes
const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
const optClass = `${OPTION_CLASS} ${copyClasses}`;
return {
text: o.textContent || '',
text: option.textContent || '',
cssClass: optClass,
value,
checked: isOptionSelected(value, selectValue, this.compareWith),
disabled: o.disabled,
disabled: option.disabled,
handler: () => {
this.value = value;
this.close();
}
};
});
return popoverOptions;
}
private async openPopover(ev: UIEvent) {
@ -529,3 +551,5 @@ const textForValue = (opts: HTMLIonSelectOptionElement[], value: any, compareWit
};
let selectIds = 0;
const OPTION_CLASS = 'select-interface-option';