Skip to content

Commit 4cf948f

Browse files
docs: account for this context (#28720)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In #28694 there was some confusion around how to access `this` inside of a callback function passed to a property on Ionic components. The root issue was due to how the `this` context is determined with developers being responsible for setting the appropriate `this` context. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - While this isn't an Ionic bug, I think it's worth calling out this behavior so developers are aware of how to account for it. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Note: The link in the docs will not work until ionic-team/ionic-docs#3333 is merged. --------- Co-authored-by: Amanda Johnston <[email protected]>
1 parent 5d3bf98 commit 4cf948f

File tree

6 files changed

+25
-10
lines changed

6 files changed

+25
-10
lines changed

core/src/components.d.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -943,7 +943,7 @@ export namespace Components {
943943
*/
944944
"size": 'cover' | 'fixed';
945945
/**
946-
* A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
946+
* A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
947947
*/
948948
"titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
949949
/**
@@ -1182,7 +1182,7 @@ export namespace Components {
11821182
*/
11831183
"counter": boolean;
11841184
/**
1185-
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
1185+
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
11861186
*/
11871187
"counterFormatter"?: (inputLength: number, maxLength: number) => string;
11881188
/**
@@ -1701,7 +1701,7 @@ export namespace Components {
17011701
*/
17021702
"breakpoints"?: number[];
17031703
/**
1704-
* Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
1704+
* Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
17051705
*/
17061706
"canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
17071707
/**
@@ -2336,7 +2336,7 @@ export namespace Components {
23362336
*/
23372337
"pin": boolean;
23382338
/**
2339-
* A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
2339+
* A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
23402340
*/
23412341
"pinFormatter": PinFormatter;
23422342
/**
@@ -2978,7 +2978,7 @@ export namespace Components {
29782978
*/
29792979
"counter": boolean;
29802980
/**
2981-
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
2981+
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
29822982
*/
29832983
"counterFormatter"?: (inputLength: number, maxLength: number) => string;
29842984
/**
@@ -5650,7 +5650,7 @@ declare namespace LocalJSX {
56505650
*/
56515651
"size"?: 'cover' | 'fixed';
56525652
/**
5653-
* A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
5653+
* A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
56545654
*/
56555655
"titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
56565656
/**
@@ -5901,7 +5901,7 @@ declare namespace LocalJSX {
59015901
*/
59025902
"counter"?: boolean;
59035903
/**
5904-
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
5904+
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
59055905
*/
59065906
"counterFormatter"?: (inputLength: number, maxLength: number) => string;
59075907
/**
@@ -6432,7 +6432,7 @@ declare namespace LocalJSX {
64326432
*/
64336433
"breakpoints"?: number[];
64346434
/**
6435-
* Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
6435+
* Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
64366436
*/
64376437
"canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
64386438
/**
@@ -7064,7 +7064,7 @@ declare namespace LocalJSX {
70647064
*/
70657065
"pin"?: boolean;
70667066
/**
7067-
* A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
7067+
* A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
70687068
*/
70697069
"pinFormatter"?: PinFormatter;
70707070
/**
@@ -7758,7 +7758,7 @@ declare namespace LocalJSX {
77587758
*/
77597759
"counter"?: boolean;
77607760
/**
7761-
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
7761+
* A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
77627762
*/
77637763
"counterFormatter"?: (inputLength: number, maxLength: number) => string;
77647764
/**

core/src/components/datetime/datetime.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,9 @@ export class Datetime implements ComponentInterface {
341341
* dates are selected. Only used if there are 0 or more than 1
342342
* selected (i.e. unused for exactly 1). By default, the header
343343
* text is set to "numberOfDates days".
344+
*
345+
* See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
346+
* if you need to access `this` from within the callback.
344347
*/
345348
@Prop() titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
346349

core/src/components/input/input.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,9 @@ export class Input implements ComponentInterface {
121121
/**
122122
* A callback used to format the counter text.
123123
* By default the counter text is set to "itemLength / maxLength".
124+
*
125+
* See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
126+
* if you need to access `this` from within the callback.
124127
*/
125128
@Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
126129

core/src/components/modal/modal.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
264264
*
265265
* If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
266266
* If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
267+
*
268+
* See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
269+
* if you need to access `this` from within the callback.
267270
*/
268271
@Prop() canDismiss: boolean | ((data?: any, role?: string) => Promise<boolean>) = true;
269272

core/src/components/range/range.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,9 @@ export class Range implements ComponentInterface {
141141
/**
142142
* A callback used to format the pin text.
143143
* By default the pin text is set to `Math.round(value)`.
144+
*
145+
* See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
146+
* if you need to access `this` from within the callback.
144147
*/
145148
@Prop() pinFormatter: PinFormatter = (value: number): number => Math.round(value);
146149

core/src/components/textarea/textarea.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,9 @@ export class Textarea implements ComponentInterface {
222222
/**
223223
* A callback used to format the counter text.
224224
* By default the counter text is set to "itemLength / maxLength".
225+
*
226+
* See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
227+
* if you need to access `this` from within the callback.
225228
*/
226229
@Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
227230

0 commit comments

Comments
 (0)