Skip to content

Commit 3d89f21

Browse files
committed
feat(spinner): add recipe and config types
1 parent 2ffac3e commit 3d89f21

7 files changed

Lines changed: 89 additions & 31 deletions

File tree

core/src/components.d.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
3939
import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
4040
import { SelectModalOption } from "./components/select-modal/select-modal-interface";
4141
import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
42+
import { IonSpinnerSizes } from "./components/spinner/spinner.interfaces";
4243
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
4344
import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
4445
import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -77,6 +78,7 @@ export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-i
7778
export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
7879
export { SelectModalOption } from "./components/select-modal/select-modal-interface";
7980
export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
81+
export { IonSpinnerSizes } from "./components/spinner/spinner.interfaces";
8082
export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
8183
export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
8284
export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
@@ -3883,7 +3885,7 @@ export namespace Components {
38833885
/**
38843886
* Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size. Defaults to `"medium"`.
38853887
*/
3886-
"size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
3888+
"size"?: IonSpinnerSizes;
38873889
}
38883890
interface IonSplitPane {
38893891
/**
@@ -9909,7 +9911,7 @@ declare namespace LocalJSX {
99099911
/**
99109912
* Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size. Defaults to `"medium"`.
99119913
*/
9912-
"size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
9914+
"size"?: IonSpinnerSizes;
99139915
}
99149916
interface IonSplitPane {
99159917
/**

core/src/components/spinner/spinner-configs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { SpinnerConfigs } from './spinner-interface';
1+
import type { SpinnerConfigs } from './spinner.interfaces';
22

33
const spinners = {
44
bubbles: {

core/src/components/spinner/spinner-interface.ts

Lines changed: 0 additions & 22 deletions
This file was deleted.
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
export interface SpinnerConfigs {
2+
[spinnerName: string]: SpinnerConfig;
3+
}
4+
5+
export interface SpinnerConfig {
6+
dur: number;
7+
circles?: number;
8+
lines?: number;
9+
elmDuration?: boolean;
10+
fn: (dur: number, index: number, total: number) => SpinnerData;
11+
}
12+
13+
interface SpinnerData {
14+
r?: number;
15+
y1?: number;
16+
y2?: number;
17+
cx?: number;
18+
cy?: number;
19+
style: { [key: string]: string | undefined };
20+
viewBox?: string;
21+
transform?: string;
22+
}
23+
24+
export type IonSpinnerRecipe = {
25+
color?: string;
26+
27+
lines?: {
28+
stroke?: {
29+
width?: string;
30+
};
31+
32+
small?: {
33+
stroke?: {
34+
width?: string;
35+
};
36+
};
37+
38+
sharp?: {
39+
stroke?: {
40+
width?: string;
41+
};
42+
43+
small?: {
44+
stroke?: {
45+
width?: string;
46+
};
47+
};
48+
};
49+
};
50+
51+
circular?: {
52+
stroke?: {
53+
width?: string;
54+
};
55+
};
56+
57+
crescent?: {
58+
stroke?: {
59+
width?: string;
60+
};
61+
};
62+
63+
// Sizes
64+
size?: {
65+
[K in IonSpinnerSizes]?: IonSpinnerSizeDefinition;
66+
};
67+
};
68+
69+
type IonSpinnerSizeDefinition = {
70+
width?: string;
71+
height?: string;
72+
};
73+
74+
export type IonSpinnerConfig = {
75+
size?: IonSpinnerSizes;
76+
};
77+
78+
export type IonSpinnerSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

core/src/components/spinner/spinner.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type { Color } from '../../interface';
88

99
import type { SpinnerTypes } from './spinner-configs';
1010
import { SPINNERS } from './spinner-configs';
11-
import type { SpinnerConfig } from './spinner-interface';
11+
import type { SpinnerConfig, IonSpinnerSizes } from './spinner.interfaces';
1212

1313
/**
1414
* @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -51,7 +51,7 @@ export class Spinner implements ComponentInterface {
5151
*
5252
* Defaults to `"medium"`.
5353
*/
54-
@Prop() size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
54+
@Prop() size?: IonSpinnerSizes;
5555

5656
private getName(): SpinnerTypes {
5757
const spinnerName = this.name || config.get('spinner');
@@ -67,7 +67,6 @@ export class Spinner implements ComponentInterface {
6767
*/
6868
get sizeValue(): string {
6969
const sizeConfig = config.getObjectValue('IonSpinner.size', 'medium') as string;
70-
console.log('sizeConfig', sizeConfig);
7170
const size = this.size || sizeConfig;
7271

7372
return size;

core/src/components/spinner/test/size/spinner.e2e.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
33

44
/**
55
* This behavior does not vary across directions.
6-
*
6+
*
77
* `ios` does not differ from `md`.
88
*/
99
configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {

core/src/themes/themes.interfaces.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { IonChipRecipe, IonChipConfig } from '../components/chip/chip.interfaces';
2+
import type { IonSpinnerRecipe, IonSpinnerConfig } from '../components/spinner/spinner.interfaces';
23
import type { IonicConfig as IonicGlobalConfig } from '../utils/config';
34

45
// Platform-specific theme
@@ -245,7 +246,7 @@ export type BaseTheme = {
245246
export type IonicConfig = IonicGlobalConfig & {
246247
components?: {
247248
IonChip?: IonChipConfig;
248-
IonSpinner?: any;
249+
IonSpinner?: IonSpinnerConfig;
249250
};
250251
};
251252

@@ -283,7 +284,7 @@ export type DefaultTheme = BaseTheme & {
283284

284285
type Components = {
285286
IonChip?: IonChipRecipe;
286-
IonSpinner?: any;
287+
IonSpinner?: IonSpinnerRecipe;
287288

288289
IonCard?: any;
289290
IonItem?: any;

0 commit comments

Comments
 (0)