/
EdcIcon.tsx
75 lines (66 loc) · 2 KB
/
EdcIcon.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { PopoverData } from '../data/EdcHelpData'
import React, { forwardRef } from 'react'
import { FailBehavior } from '..'
import { EdcPopoverConfig } from '../config/PopoverConfigProvider'
import { defaultFailBehavior } from '../data/FailBehavior'
export type EdcIconData =
| string
| {
type: 'class' | 'url'
content?: string
}
export type EdcIconProps = {
data: PopoverData
config: EdcPopoverConfig
failBehavior?: FailBehavior
}
function getIconContent(icon: EdcIconData): string | undefined {
return typeof icon === 'string' ? icon : icon.content
}
export const EdcIcon = forwardRef<HTMLImageElement, EdcIconProps>(
(props, ref) => {
const { data, config, failBehavior, ...newProps } = props
const behaviorData = data.failBehaviorData
let icon = getIconContent(behaviorData.displayIcon)
let cssClass = ''
let forceCss = false
if (data.triggerError) {
let newFailBehavior = failBehavior
if (!newFailBehavior) {
newFailBehavior = defaultFailBehavior
}
newFailBehavior = data.failBehaviorData.forceBehavior || newFailBehavior
switch (newFailBehavior.icon) {
case 'SHOWN':
cssClass += 'edc-help-icon'
break
case 'DISABLED':
cssClass += 'edc-help-icon-disabled'
break
case 'HIDDEN':
cssClass += 'edc-help-icon-hidden'
break
case 'ERROR':
forceCss = true
cssClass += 'edc-help-icon-error'
icon = getIconContent(behaviorData.errorIcon)
}
} else {
cssClass += 'edc-help-icon'
}
cssClass += config.options?.dark ? ' edc-on-dark' : ''
return forceCss ||
typeof behaviorData.displayIcon === 'string' ||
behaviorData.displayIcon.type === 'class' ? (
<i {...newProps} className={`${icon} ${cssClass}`} ref={ref} />
) : (
<img
{...newProps}
className={cssClass}
src={icon}
alt={behaviorData.iconAlt || 'Help'}
ref={ref}
/>
)
}
)