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

refactor(spinner): strong typed API and modeless

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-26 19:08:17 +02:00
parent 8b768fb73d
commit ae9c6f2adb
9 changed files with 44 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/spinner/readme.md
View File

@ -11,13 +11,12 @@ The default spinner to use is based on the platform. The default spinner for `io
## Properties
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` |
| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `name` | `name` | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` |
| `paused` | `paused` | If true, the spinner's animation will be paused. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` |
| `duration` | `duration` | Duration of the spinner animation in milliseconds. The default varies based on the spinner. | `number` |
| `name` | -- | The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `SpinnerTypes` |
| `paused` | `paused` | If true, the spinner's animation will be paused. Defaults to `false`. | `boolean` |
## CSS Custom Properties

22
core/src/components/spinner/spinner-configs.ts
View File

@ -1,5 +1,6 @@
import { SpinnerConfigs } from './spinner-interface';
export const SPINNERS: SpinnerConfigs = {
const spinners = {
'lines': {
dur: 1000,
@ -98,20 +99,5 @@ export const SPINNERS: SpinnerConfigs = {
}
};
export interface SpinnerConfigs {
[spinnerName: string]: SpinnerConfig;
}
export interface SpinnerConfig {
dur: number;
circles?: number;
lines?: number;
fn: (dur: number, index: number, total: number) => SpinnerData;
}
export interface SpinnerData {
r?: number;
y1?: number;
y2?: number;
style: any;
}
export const SPINNERS: SpinnerConfigs = spinners;
export type SpinnerTypes = keyof typeof SPINNERS;

22
core/src/components/spinner/spinner-interface.ts Normal file
View File

@ -0,0 +1,22 @@
import { SPINNERS } from './spinner-configs';
export type SpinnerTypes = keyof typeof SPINNERS;
export interface SpinnerConfigs {
[spinnerName: string]: SpinnerConfig;
}
export interface SpinnerConfig {
dur: number;
circles?: number;
lines?: number;
fn: (dur: number, index: number, total: number) => SpinnerData;
}
export interface SpinnerData {
r?: number;
y1?: number;
y2?: number;
style: any;
}

2
core/src/components/spinner/spinner.ios.scss
View File

@ -1,2 +0,0 @@
@import "./spinner";
@import "./spinner.ios.vars";

19
core/src/components/spinner/spinner.ios.vars.scss
View File

@ -1,19 +0,0 @@
@import "../../themes/ionic.globals.ios";
// iOS Spinner
// --------------------------------------------------
/// @prop - Color of the lines spinner
$spinner-ios-lines-color: $text-color-step-400 !default;
/// @prop - Color of the bubbles spinner
$spinner-ios-bubbles-color: $text-color !default;
/// @prop - Color of the circles spinner
$spinner-ios-circles-color: $text-color-step-400 !default;
/// @prop - Color of the crescent spinner
$spinner-ios-crescent-color: $text-color !default;
/// @prop - Color of the dots spinner
$spinner-ios-dots-color: $text-color-step-300 !default;

2
core/src/components/spinner/spinner.md.scss
View File

@ -1,2 +0,0 @@
@import "./spinner";
@import "./spinner.md.vars";

19
core/src/components/spinner/spinner.md.vars.scss
View File

@ -1,19 +0,0 @@
@import "../../themes/ionic.globals.md";
// Material Design Spinner
// --------------------------------------------------
/// @prop - Color of the lines spinner
$spinner-md-lines-color: $text-color-step-400 !default;
/// @prop - Color of the bubbles spinner
$spinner-md-bubbles-color: $text-color !default;
/// @prop - Color of the circles spinner
$spinner-md-circles-color: $text-color-step-400 !default;
/// @prop - Color of the crescent spinner
$spinner-md-crescent-color: $text-color !default;
/// @prop - Color of the dots spinner
$spinner-md-dots-color: $text-color-step-300 !default;

43
core/src/components/spinner/spinner.tsx
View File

@ -1,21 +1,20 @@
import { Component, Prop } from '@stencil/core';
import { Color, Config, Mode } from '../../interface';
import { Color, Config, Mode, SpinnerConfig, SpinnerTypes } from '../../interface';
import { createColorClasses } from '../../utils/theme';
import { SPINNERS, SpinnerConfig } from './spinner-configs';
import { SPINNERS } from './spinner-configs';
@Component({
tag: 'ion-spinner',
styleUrls: {
ios: 'spinner.ios.scss',
md: 'spinner.md.scss'
},
styleUrl: 'spinner.scss',
shadow: true
})
export class Spinner {
@Prop({ context: 'config' }) config!: Config;
mode!: Mode;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -23,12 +22,6 @@ export class Spinner {
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* Duration of the spinner animation in milliseconds. The default varies based on the spinner.
*/
@ -39,33 +32,19 @@ export class Spinner {
* spinner will be used. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`,
* `"circles"`, `"crescent"`.
*/
@Prop() name?: string;
@Prop() name?: SpinnerTypes;
/**
* If true, the spinner's animation will be paused. Defaults to `false`.
*/
@Prop() paused = false;
private getName(): string {
let name = this.name || this.config.get('spinner');
if (!name) {
// fallback
if (this.mode === 'md') {
return 'crescent';
} else {
return 'lines';
}
private getName(): SpinnerTypes {
const name = this.name || this.config.get('spinner');
if (name) {
return name;
}
if (name === 'ios') {
// deprecation warning, renamed in v4
console.warn(`spinner "ios" has been renamed to "lines"`);
name = 'lines';
} else if (name === 'ios-small') {
// deprecation warning, renamed in v4
console.warn(`spinner "ios-small" has been renamed to "lines-small"`);
name = 'lines-small';
}
return name;
return (this.mode === 'ios') ? 'lines' : 'crescent';
}
hostData() {

1
core/src/interface.d.ts vendored
View File

@ -15,6 +15,7 @@ export * from './components/range/range-interface';
export * from './components/content/content-interface';
export * from './components/select/select-interface';
export * from './components/select-popover/select-popover-interface';
export * from './components/spinner/spinner-interface';
export * from './components/tabbar/tabbar-interface';
export * from './components/toast/toast-interface';
export * from './components/virtual-scroll/virtual-scroll-interface';