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

feat(many): expand global config for icons (#29373)

Browse Source 
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-05-08 16:22:12 -07:00
committed by GitHub
parent 7c7c483ab9
commit a58d9fa2e1
16 changed files with 370 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
core/src/components/datetime/datetime.tsx
View File

@@ -7,6 +7,7 @@ import { isRTL } from '@utils/rtl';
import { createColorClasses } from '@utils/theme';
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
import { config } from '../../global/config';
import { getIonMode, getIonTheme } from '../../global/ionic-global';
import type { Color, StyleEventDetail, Theme } from '../../interface';
@@ -2115,9 +2116,10 @@ export class Datetime implements ComponentInterface {
*/
private renderCalendarHeader(theme: Theme) {
const { disabled } = this;
const expandedIcon = theme === 'ios' ? chevronDown : caretUpSharp;
const collapsedIcon = theme === 'ios' ? chevronForward : caretDownSharp;
const { disabled, datetimeShowMonthYearIcon, datetimeHideMonthYearIcon } = this;
const datetimeNextIcon = config.get('datetimeNextIcon', chevronForward);
const datetimePrevIcon = config.get('datetimePreviousIcon', chevronBack);
const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
@@ -2144,7 +2146,7 @@ export class Datetime implements ComponentInterface {
{getMonthAndYear(this.locale, this.workingParts)}
<ion-icon
aria-hidden="true"
icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
icon={this.showMonthAndYear ? datetimeShowMonthYearIcon : datetimeHideMonthYearIcon}
lazy={false}
flipRtl={true}
></ion-icon>
@@ -2160,7 +2162,7 @@ export class Datetime implements ComponentInterface {
dir={hostDir}
aria-hidden="true"
slot="icon-only"
icon={chevronBack}
icon={datetimePrevIcon}
lazy={false}
flipRtl
></ion-icon>
@@ -2170,7 +2172,7 @@ export class Datetime implements ComponentInterface {
dir={hostDir}
aria-hidden="true"
slot="icon-only"
icon={chevronForward}
icon={datetimeNextIcon}
lazy={false}
flipRtl
></ion-icon>
@@ -2593,6 +2595,34 @@ export class Datetime implements ComponentInterface {
}
}
/**
* Get the icon to use for the show month and year icon.
* Otherwise, use the icon set in the config.
* If no icon is set in the config, use the default icon.
*
* @returns {string} The icon to use for the show month and year icon.
*/
get datetimeShowMonthYearIcon(): string {
const theme = getIonTheme(this);
const expandedIcon = theme === 'ios' ? chevronDown : caretUpSharp;
return config.get('datetimeShowMonthYearIcon', expandedIcon);
}
/**
* Get the icon to use for the hide month and year icon.
* Otherwise, use the icon set in the config.
* If no icon is set in the config, use the default icon.
*
* @returns {string} The icon to use for the hide month and year icon.
*/
get datetimeHideMonthYearIcon(): string {
const theme = getIonTheme(this);
const collapsedIcon = theme === 'ios' ? chevronForward : caretDownSharp;
return config.get('datetimeHideMonthYearIcon', collapsedIcon);
}
render() {
const {
name,