Rewrite `<LoadingIndicator/>` as FC and TS (#25364)
alfe
11 months ago
committed by
GitHub
parent
72590e601a
commit
a86886b1fd
24 changed files with 55 additions and 53 deletions
@ -0,0 +1,27 @@ |
||||
interface Props { |
||||
size: number; |
||||
strokeWidth: number; |
||||
} |
||||
|
||||
export const CircularProgress: React.FC<Props> = ({ size, strokeWidth }) => { |
||||
const viewBox = `0 0 ${size} ${size}`; |
||||
const radius = (size - strokeWidth) / 2; |
||||
|
||||
return ( |
||||
<svg |
||||
width={size} |
||||
height={size} |
||||
viewBox={viewBox} |
||||
className='circular-progress' |
||||
role='progressbar' |
||||
> |
||||
<circle |
||||
fill='none' |
||||
cx={size / 2} |
||||
cy={size / 2} |
||||
r={radius} |
||||
strokeWidth={`${strokeWidth}px`} |
||||
/> |
||||
</svg> |
||||
); |
||||
}; |
||||
@ -1,31 +0,0 @@ |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
export const CircularProgress = ({ size, strokeWidth }) => { |
||||
const viewBox = `0 0 ${size} ${size}`; |
||||
const radius = (size - strokeWidth) / 2; |
||||
|
||||
return ( |
||||
<svg width={size} height={size} viewBox={viewBox} className='circular-progress' role='progressbar'> |
||||
<circle |
||||
fill='none' |
||||
cx={size / 2} |
||||
cy={size / 2} |
||||
r={radius} |
||||
strokeWidth={`${strokeWidth}px`} |
||||
/> |
||||
</svg> |
||||
); |
||||
}; |
||||
|
||||
CircularProgress.propTypes = { |
||||
size: PropTypes.number.isRequired, |
||||
strokeWidth: PropTypes.number.isRequired, |
||||
}; |
||||
|
||||
const LoadingIndicator = () => ( |
||||
<div className='loading-indicator'> |
||||
<CircularProgress size={50} strokeWidth={6} /> |
||||
</div> |
||||
); |
||||
|
||||
export default LoadingIndicator; |
||||
@ -0,0 +1,7 @@ |
||||
import { CircularProgress } from './circular_progress'; |
||||
|
||||
export const LoadingIndicator: React.FC = () => ( |
||||
<div className='loading-indicator'> |
||||
<CircularProgress size={50} strokeWidth={6} /> |
||||
</div> |
||||
); |
||||
Loading…
Reference in new issue