feat(web): font awesome icon animations

This commit is contained in:
Luke
2023-11-15 15:28:21 +01:00
parent a50f7a2052
commit 882e372895
24 changed files with 124 additions and 47 deletions

View File

@@ -1,5 +1,7 @@
import { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
type IconAnimation = 'spin' | 'spinPulse' | 'spinReverse' | 'pulse' | 'beat' | 'fade' | 'beatFade' | 'bounce' | 'shake';
interface ContextMenuItem {
menu?: string;
title?: string;
@@ -8,6 +10,7 @@ interface ContextMenuItem {
image?: string;
icon?: IconName | [IconPrefix, IconName] | string;
iconColor?: string;
iconAnimation?: IconAnimation;
progress?: number;
colorScheme?: string;
onSelect?: (args: any) => void;

View File

@@ -2,10 +2,13 @@ import { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
type MenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
type ChangeFunction = (selected: number, scrollIndex?: number, args?: any, checked?: boolean) => void;
type IconAnimation = 'spin' | 'spinPulse' | 'spinReverse' | 'pulse' | 'beat' | 'fade' | 'beatFade' | 'bounce' | 'shake';
interface MenuOptions {
label: string;
icon?: IconName | [IconPrefix, IconName] | string;
iconColor?: string;
iconAnimation?: IconAnimation;
checked?: boolean;
values?: Array<string | { label: string; description: string }>;
description?: string;

View File

@@ -11,6 +11,7 @@ type NotificationPosition =
| 'center-right'
| 'center-left';
type NotificationType = 'inform' | 'error' | 'success';
type IconAnimation = 'spin' | 'spinPulse' | 'spinReverse' | 'pulse' | 'beat' | 'fade' | 'beatFade' | 'bounce' | 'shake';
interface NotifyProps {
id?: string | number;
@@ -22,6 +23,7 @@ interface NotifyProps {
style?: Sx;
icon?: IconName | [IconPrefix, IconName];
iconColor?: string;
iconAnimation?: IconAnimation;
alignIcon?: 'top' | 'center';
}

View File

@@ -1,10 +1,13 @@
import { IconLookup, IconName, IconPrefix } from '@fortawesome/fontawesome-common-types';
import { CSSProperties } from 'react';
type IconAnimation = 'spin' | 'spinPulse' | 'spinReverse' | 'pulse' | 'beat' | 'fade' | 'beatFade' | 'bounce' | 'shake';
interface OptionsProps {
position?: 'right-center' | 'left-center' | 'top-center';
icon?: IconName | [IconPrefix, IconName];
iconColor?: string;
iconAnimation?: IconAnimation;
style?: CSSProperties;
alignIcon?: 'top' | 'center';
}