|
22 | 22 | * SOFTWARE. |
23 | 23 | */ |
24 | 24 |
|
25 | | -import { Component } from 'react' |
| 25 | +import { useState, useEffect, useId, forwardRef } from 'react' |
26 | 26 |
|
27 | | -import { View } from '@instructure/ui-view' |
28 | | -import { |
29 | | - callRenderProp, |
30 | | - omitProps, |
31 | | - withDeterministicId |
32 | | -} from '@instructure/ui-react-utils' |
| 27 | +import { useStyle } from '@instructure/emotion' |
| 28 | +import { callRenderProp, omitProps } from '@instructure/ui-react-utils' |
33 | 29 | import { logError as error } from '@instructure/console' |
34 | 30 |
|
35 | | -import { withStyle } from '@instructure/emotion' |
36 | | - |
37 | 31 | import generateStyle from './styles' |
38 | 32 | import generateComponentTheme from './theme' |
39 | | -import type { SpinnerProps, SpinnerState } from './props' |
| 33 | +import type { SpinnerProps } from './props' |
40 | 34 | import { allowedProps } from './props' |
41 | 35 |
|
42 | 36 | /** |
43 | 37 | --- |
44 | 38 | category: components |
45 | 39 | --- |
46 | 40 | **/ |
47 | | -@withDeterministicId() |
48 | | -@withStyle(generateStyle, generateComponentTheme) |
49 | | -class Spinner extends Component<SpinnerProps, SpinnerState> { |
50 | | - static readonly componentId = 'Spinner' |
51 | | - static allowedProps = allowedProps |
52 | | - static defaultProps = { |
53 | | - as: 'div', |
54 | | - size: 'medium', |
55 | | - variant: 'default' |
56 | | - } |
57 | | - |
58 | | - ref: Element | null = null |
59 | | - private readonly titleId?: string |
60 | | - private delayTimeout?: NodeJS.Timeout |
61 | | - |
62 | | - handleRef = (el: Element | null) => { |
63 | | - const { elementRef } = this.props |
64 | | - |
65 | | - this.ref = el |
66 | | - |
67 | | - if (typeof elementRef === 'function') { |
68 | | - elementRef(el) |
69 | | - } |
70 | | - } |
71 | | - |
72 | | - constructor(props: SpinnerProps) { |
73 | | - super(props) |
74 | | - |
75 | | - this.titleId = props.deterministicId!() |
76 | | - |
77 | | - this.state = { |
78 | | - shouldRender: !props.delay |
79 | | - } |
80 | | - } |
81 | | - |
82 | | - componentDidMount() { |
83 | | - this.props.makeStyles?.() |
84 | | - const { delay } = this.props |
85 | | - |
| 41 | +const Spinner = forwardRef<HTMLDivElement, SpinnerProps>((props, ref) => { |
| 42 | + const { |
| 43 | + size = 'medium', |
| 44 | + variant = 'default', |
| 45 | + delay, |
| 46 | + renderTitle, |
| 47 | + margin, |
| 48 | + // elementRef, |
| 49 | + themeOverride |
| 50 | + } = props |
| 51 | + |
| 52 | + const [shouldRender, setShouldRender] = useState(!delay) |
| 53 | + const titleId = useId() |
| 54 | + |
| 55 | + const styles = useStyle({ |
| 56 | + generateStyle, |
| 57 | + generateComponentTheme, |
| 58 | + params: { |
| 59 | + size, |
| 60 | + variant, |
| 61 | + themeOverride, |
| 62 | + margin |
| 63 | + }, |
| 64 | + componentId: 'Spinner', |
| 65 | + displayName: 'Spinner' |
| 66 | + }) |
| 67 | + |
| 68 | + useEffect(() => { |
86 | 69 | if (delay) { |
87 | | - this.delayTimeout = setTimeout(() => { |
88 | | - this.setState({ shouldRender: true }) |
| 70 | + const delayTimeout = setTimeout(() => { |
| 71 | + setShouldRender(true) |
89 | 72 | }, delay) |
90 | | - } |
91 | | - } |
92 | | - |
93 | | - componentDidUpdate() { |
94 | | - this.props.makeStyles?.() |
95 | | - } |
96 | | - |
97 | | - componentWillUnmount() { |
98 | | - clearTimeout(this.delayTimeout) |
99 | | - } |
100 | 73 |
|
101 | | - radius() { |
102 | | - switch (this.props.size) { |
103 | | - case 'x-small': |
104 | | - return '0.5em' |
105 | | - case 'small': |
106 | | - return '1em' |
107 | | - case 'large': |
108 | | - return '2.25em' |
109 | | - default: |
110 | | - return '1.75em' |
| 74 | + return () => clearTimeout(delayTimeout) |
111 | 75 | } |
112 | | - } |
113 | | - |
114 | | - renderSpinner() { |
115 | | - const passthroughProps = View.omitViewProps( |
116 | | - omitProps(this.props, Spinner.allowedProps), |
117 | | - Spinner |
118 | | - ) |
| 76 | + return undefined |
| 77 | + }, [delay]) |
119 | 78 |
|
120 | | - const hasTitle = this.props.renderTitle |
| 79 | + const renderSpinner = () => { |
| 80 | + const hasTitle = renderTitle |
121 | 81 | error( |
122 | 82 | !!hasTitle, |
123 | 83 | '[Spinner] The renderTitle prop is necessary for screen reader support.' |
124 | 84 | ) |
125 | 85 |
|
| 86 | + const passthroughProps = omitProps(props, allowedProps) |
| 87 | + |
126 | 88 | return ( |
127 | | - <View |
128 | | - {...passthroughProps} |
129 | | - as={this.props.as} |
130 | | - elementRef={this.handleRef} |
131 | | - css={this.props.styles?.spinner} |
132 | | - margin={this.props.margin} |
133 | | - data-cid="Spinner" |
134 | | - > |
| 89 | + <div {...passthroughProps} css={styles?.spinner} ref={ref}> |
135 | 90 | <svg |
136 | | - css={this.props.styles?.circle} |
| 91 | + css={styles?.circle} |
137 | 92 | role="img" |
138 | | - aria-labelledby={this.titleId} |
| 93 | + aria-labelledby={titleId} |
139 | 94 | focusable="false" |
140 | 95 | > |
141 | | - <title id={this.titleId}> |
142 | | - {callRenderProp(this.props.renderTitle)} |
143 | | - </title> |
| 96 | + <title id={titleId}>{callRenderProp(renderTitle)}</title> |
144 | 97 | <g role="presentation"> |
145 | | - {this.props.variant !== 'inverse' && ( |
| 98 | + {variant !== 'inverse' && ( |
146 | 99 | <circle |
147 | | - css={this.props.styles?.circleTrack} |
| 100 | + css={styles?.circleTrack} |
148 | 101 | cx="50%" |
149 | 102 | cy="50%" |
150 | | - r={this.radius()} |
| 103 | + r={styles?.radius as string} |
151 | 104 | /> |
152 | 105 | )} |
153 | 106 | <circle |
154 | | - css={this.props.styles?.circleSpin} |
| 107 | + css={styles?.circleSpin} |
155 | 108 | cx="50%" |
156 | 109 | cy="50%" |
157 | | - r={this.radius()} |
| 110 | + r={styles?.radius as string} |
158 | 111 | /> |
159 | 112 | </g> |
160 | 113 | </svg> |
161 | | - </View> |
| 114 | + </div> |
162 | 115 | ) |
163 | 116 | } |
164 | 117 |
|
165 | | - render() { |
166 | | - return this.state.shouldRender ? this.renderSpinner() : null |
167 | | - } |
168 | | -} |
| 118 | + return shouldRender ? renderSpinner() : null |
| 119 | +}) |
| 120 | + |
| 121 | +Spinner.displayName = 'Spinner' |
169 | 122 |
|
170 | 123 | export default Spinner |
171 | 124 | export { Spinner } |
0 commit comments