Skip to content

Commit ff70d57

Browse files
committed
wip
1 parent 07e26f8 commit ff70d57

File tree

1 file changed

+68
-72
lines changed

1 file changed

+68
-72
lines changed

src/elements/Icon/Icon.js

Lines changed: 68 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,96 @@
11
import cx from 'clsx'
22
import _ from 'lodash'
33
import PropTypes from 'prop-types'
4-
import React from 'react'
4+
import React, { PureComponent } from 'react'
55

66
import {
77
createShorthandFactory,
88
customPropTypes,
99
getElementType,
1010
getUnhandledProps,
1111
SUI,
12-
useLatestCallback,
1312
useKeyOnly,
1413
useKeyOrValueAndKey,
1514
useValueAndKey,
1615
} from '../../lib'
1716
import IconGroup from './IconGroup'
1817

19-
function getAriaProps(props) {
20-
const ariaOptions = {}
21-
const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = props
18+
/**
19+
* An icon is a glyph used to represent something else.
20+
* @see Image
21+
*/
22+
class Icon extends PureComponent {
23+
getIconAriaOptions() {
24+
const ariaOptions = {}
25+
const { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = this.props
26+
27+
if (_.isNil(ariaLabel)) {
28+
ariaOptions['aria-hidden'] = 'true'
29+
} else {
30+
ariaOptions['aria-label'] = ariaLabel
31+
}
2232

23-
if (_.isNil(ariaLabel)) {
24-
ariaOptions['aria-hidden'] = 'true'
25-
} else {
26-
ariaOptions['aria-label'] = ariaLabel
27-
}
33+
if (!_.isNil(ariaHidden)) {
34+
ariaOptions['aria-hidden'] = ariaHidden
35+
}
2836

29-
if (!_.isNil(ariaHidden)) {
30-
ariaOptions['aria-hidden'] = ariaHidden
37+
return ariaOptions
3138
}
3239

33-
return ariaOptions
34-
}
40+
handleClick = (e) => {
41+
const { disabled } = this.props
3542

36-
/**
37-
* An icon is a glyph used to represent something else.
38-
* @see Image
39-
*/
40-
const Icon = React.forwardRef(function IconInner(props, ref) {
41-
const {
42-
bordered,
43-
circular,
44-
className,
45-
color,
46-
corner,
47-
disabled,
48-
fitted,
49-
flipped,
50-
inverted,
51-
link,
52-
loading,
53-
name,
54-
rotated,
55-
size,
56-
} = props
57-
58-
const classes = cx(
59-
color,
60-
name,
61-
size,
62-
useKeyOnly(bordered, 'bordered'),
63-
useKeyOnly(circular, 'circular'),
64-
useKeyOnly(disabled, 'disabled'),
65-
useKeyOnly(fitted, 'fitted'),
66-
useKeyOnly(inverted, 'inverted'),
67-
useKeyOnly(link, 'link'),
68-
useKeyOnly(loading, 'loading'),
69-
useKeyOrValueAndKey(corner, 'corner'),
70-
useValueAndKey(flipped, 'flipped'),
71-
useValueAndKey(rotated, 'rotated'),
72-
'icon',
73-
className,
74-
)
75-
76-
const rest = getUnhandledProps(Icon, props)
77-
const ElementType = getElementType(Icon, props)
78-
const ariaProps = getAriaProps(props)
79-
80-
const handleClick = useLatestCallback((e) => {
8143
if (disabled) {
8244
e.preventDefault()
8345
return
8446
}
8547

86-
_.invoke(props, 'onClick', e, props)
87-
})
48+
_.invoke(this.props, 'onClick', e, this.props)
49+
}
8850

89-
return (
90-
<ElementType {...rest} {...ariaProps} className={classes} onClick={handleClick} ref={ref} />
91-
)
92-
})
51+
render() {
52+
const {
53+
bordered,
54+
circular,
55+
className,
56+
color,
57+
corner,
58+
disabled,
59+
fitted,
60+
flipped,
61+
inverted,
62+
link,
63+
loading,
64+
name,
65+
rotated,
66+
size,
67+
} = this.props
68+
69+
const classes = cx(
70+
color,
71+
name,
72+
size,
73+
useKeyOnly(bordered, 'bordered'),
74+
useKeyOnly(circular, 'circular'),
75+
useKeyOnly(disabled, 'disabled'),
76+
useKeyOnly(fitted, 'fitted'),
77+
useKeyOnly(inverted, 'inverted'),
78+
useKeyOnly(link, 'link'),
79+
useKeyOnly(loading, 'loading'),
80+
useKeyOrValueAndKey(corner, 'corner'),
81+
useValueAndKey(flipped, 'flipped'),
82+
useValueAndKey(rotated, 'rotated'),
83+
'icon',
84+
className,
85+
)
86+
const rest = getUnhandledProps(Icon, this.props)
87+
const ElementType = getElementType(Icon, this.props)
88+
const ariaOptions = this.getIconAriaOptions()
89+
90+
return <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick} />
91+
}
92+
}
9393

94-
Icon.displayName = 'Icon'
9594
Icon.propTypes = {
9695
/** An element type to render as (string or function). */
9796
as: PropTypes.elementType,
@@ -152,11 +151,8 @@ Icon.defaultProps = {
152151
as: 'i',
153152
}
154153

155-
// Heads up!
156-
// .create() factories should be defined on exported component to be visible as static properties
157-
const MemoIcon = React.memo(Icon)
154+
Icon.Group = IconGroup
158155

159-
MemoIcon.Group = IconGroup
160-
MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
156+
Icon.create = createShorthandFactory(Icon, (value) => ({ name: value }))
161157

162-
export default MemoIcon
158+
export default Icon

0 commit comments

Comments
 (0)