|
1 | 1 | import cx from 'clsx'
|
2 | 2 | import _ from 'lodash'
|
3 | 3 | import PropTypes from 'prop-types'
|
4 |
| -import React from 'react' |
| 4 | +import React, { PureComponent } from 'react' |
5 | 5 |
|
6 | 6 | import {
|
7 | 7 | createShorthandFactory,
|
8 | 8 | customPropTypes,
|
9 | 9 | getElementType,
|
10 | 10 | getUnhandledProps,
|
11 | 11 | SUI,
|
12 |
| - useLatestCallback, |
13 | 12 | useKeyOnly,
|
14 | 13 | useKeyOrValueAndKey,
|
15 | 14 | useValueAndKey,
|
16 | 15 | } from '../../lib'
|
17 | 16 | import IconGroup from './IconGroup'
|
18 | 17 |
|
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 | + } |
22 | 32 |
|
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 | + } |
28 | 36 |
|
29 |
| - if (!_.isNil(ariaHidden)) { |
30 |
| - ariaOptions['aria-hidden'] = ariaHidden |
| 37 | + return ariaOptions |
31 | 38 | }
|
32 | 39 |
|
33 |
| - return ariaOptions |
34 |
| -} |
| 40 | + handleClick = (e) => { |
| 41 | + const { disabled } = this.props |
35 | 42 |
|
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) => { |
81 | 43 | if (disabled) {
|
82 | 44 | e.preventDefault()
|
83 | 45 | return
|
84 | 46 | }
|
85 | 47 |
|
86 |
| - _.invoke(props, 'onClick', e, props) |
87 |
| - }) |
| 48 | + _.invoke(this.props, 'onClick', e, this.props) |
| 49 | + } |
88 | 50 |
|
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 | +} |
93 | 93 |
|
94 |
| -Icon.displayName = 'Icon' |
95 | 94 | Icon.propTypes = {
|
96 | 95 | /** An element type to render as (string or function). */
|
97 | 96 | as: PropTypes.elementType,
|
@@ -152,11 +151,8 @@ Icon.defaultProps = {
|
152 | 151 | as: 'i',
|
153 | 152 | }
|
154 | 153 |
|
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 |
158 | 155 |
|
159 |
| -MemoIcon.Group = IconGroup |
160 |
| -MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value })) |
| 156 | +Icon.create = createShorthandFactory(Icon, (value) => ({ name: value })) |
161 | 157 |
|
162 |
| -export default MemoIcon |
| 158 | +export default Icon |
0 commit comments