wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / utils / Icon.tsx

Icon.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.5.4, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/utils/Icon.tsx

127 lines 3.8 KB

Raw Download Zip

1	import { memo, type ComponentType, type KeyboardEvent, type ReactNode } from 'react';
2	import Tooltip from './Tooltip/Tooltip';
3	import type { TooltipProps } from './Tooltip/Tooltip';
4	import customIcons from './customIcons';
5	import materialIcons from './materialIcons';
6
7	// Color mapping from our custom colors to CSS variables
8	const iconColors = {
9	black: 'var(--teamupdraft-black)',
10	green: 'var(--teamupdraft-green)',
11	yellow: 'var(--teamupdraft-yellow)',
12	red: 'var(--teamupdraft-red)',
13	blue: 'var(--teamupdraft-blue)',
14	gray: 'var(--teamupdraft-grey-400)',
15	gray500: 'var(--teamupdraft-grey-500)',
16	white: 'var(--teamupdraft-white)',
17	};
18
19	export type IconName = keyof typeof materialIcons \| keyof typeof customIcons \| string;
20	export type ColorName = keyof typeof iconColors \| string;
21
22	export interface IconProps {
23	name?: IconName;
24	color?: ColorName;
25	size?: number;
26	strokeWidth?: number;
27	tooltip?: TooltipProps;
28	onClick?: () => void;
29	className?: string;
30	stroke?: string;
31	fill?: string;
32	type?: 'material' \| 'custom';
33	}
34
35	const Icon = memo((
36	{
37	name = 'bullet',
38	color = 'var(--teamupdraft-orange-dark)',
39	fill = 'var(--teamupdraft-orange-dark)',
40	size = 18,
41	stroke = 'none',
42	strokeWidth = 1.5,
43	tooltip,
44	onClick,
45	className,
46	type = "material"
47	}: IconProps) => {
48	// resolved color (CSS var or raw color)
49	const colorVal = (iconColors[color as keyof typeof iconColors] \|\| color) as string;
50
51	// try to resolve components from both maps (may be undefined)
52	const MaterialIcon = (materialIcons as Record<string, ComponentType<any>>)[String(name)];
53	const CustomIcon = (customIcons as Record<string, ComponentType<any>>)[String(name)];
54
55	// click handler (keyboard accessible)
56	const handleClick = () => {
57	if (onClick) onClick();
58	};
59
60	const handleKeyDown = (e: KeyboardEvent) => {
61	if (!onClick) return;
62	if (e.key === 'Enter' \|\| e.key === ' ') {
63	e.preventDefault();
64	onClick();
65	}
66	};
67
68	// choose which icon to render based on `type` prop or availability
69	let inner: ReactNode = null;
70
71	const customElement = CustomIcon ? (
72	// custom SVG/React component: pass common props (your custom icons should accept these)
73	<CustomIcon width={size} height={size} stroke={stroke} strokeWidth={strokeWidth} color={colorVal} fill={fill} />
74	) : null;
75
76	const materialElement = MaterialIcon ? (
77	// MUI icons accept `sx` for size/color
78	<MaterialIcon sx={{ fontSize: size, color: colorVal,"& path": {
79	stroke: stroke,
80	strokeWidth: strokeWidth,
81	fill: fill,
82	}, }} />
83	) : null;
84
85	if (type === 'custom') {
86	inner = customElement ?? materialElement;
87	} else if (type === 'material') {
88	inner = materialElement ?? customElement;
89	} else {
90	// no explicit type: prefer material if present, otherwise custom
91	inner = materialElement ?? customElement;
92	}
93
94	// fallback: small filled circle (keeps layout predictable)
95	if (!inner) {
96	inner = <span style={{ display: 'inline-block', width: size, height: size, borderRadius: '50%', background: colorVal }} />;
97	}
98
99	const animateCss = String(name) === 'loading-circle' ? ' animate-spin' : '';
100	const finalClass = `${className ?? ''} icon-${String(name)} flex items-center justify-center${animateCss}`.trim();
101
102	const iconElement = (
103	<div
104	role={onClick ? 'button' : undefined}
105	tabIndex={onClick ? 0 : undefined}
106	onClick={handleClick}
107	onKeyDown={handleKeyDown}
108	className={finalClass}
109	aria-hidden={onClick ? undefined : true}
110	>
111	{inner}
112	</div>
113	);
114
115	if (tooltip) {
116	return (
117	<Tooltip tooltip={tooltip}>
118	{iconElement}
119	</Tooltip>
120	);
121	}
122
123	return iconElement;
124	});
125
126	export default Icon;
127