-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: progress bar * progress bar * v1.4.0
- Loading branch information
1 parent
dc346ca
commit 8c87af4
Showing
8 changed files
with
577 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { DOMRef } from '@react-types/shared'; | ||
| import React from 'react'; | ||
| import { useProgressBar } from '@react-aria/progress'; | ||
| import { ACProgressBarProps } from '../types'; | ||
| import { classNames } from '../utils'; | ||
| import { ProgressBarBase } from './ProgressBarBase'; | ||
|
|
||
| function ProgressBar(props: ACProgressBarProps, ref: DOMRef<HTMLDivElement>) { | ||
| let { staticColor, ...otherProps } = props; | ||
| const { progressBarProps, labelProps } = useProgressBar(props); | ||
|
|
||
| return ( | ||
| <ProgressBarBase | ||
| {...otherProps} | ||
| ref={ref} | ||
| barProps={progressBarProps} | ||
| labelProps={labelProps} | ||
| barClassName={classNames({ | ||
| 'ac-barloader--static-white': staticColor === 'white', | ||
| 'ac-barloader--static-black': staticColor === 'black', | ||
| })} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. | ||
| * They can represent either determinate or indeterminate progress. | ||
| */ | ||
| let _ProgressBar = React.forwardRef(ProgressBar); | ||
| export { _ProgressBar as ProgressBar }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { clamp } from '@react-aria/utils'; | ||
| import React, { CSSProperties, HTMLAttributes } from 'react'; | ||
| import { DOMRef, ProgressBarProps, ACProgressBarBaseProps } from '../types'; | ||
| import { classNames, useDOMRef, useStyleProps } from '../utils'; | ||
| import { progressBarCSS } from './styles'; | ||
| interface ProgressBarBaseProps | ||
| extends ACProgressBarBaseProps, | ||
| ProgressBarProps { | ||
| barClassName?: string; | ||
| barProps?: HTMLAttributes<HTMLDivElement>; | ||
| labelProps?: HTMLAttributes<HTMLLabelElement>; | ||
| } | ||
|
|
||
| // Base ProgressBar component shared with Meter. | ||
| function ProgressBarBase( | ||
| props: ProgressBarBaseProps, | ||
| ref: DOMRef<HTMLDivElement> | ||
| ) { | ||
| let { | ||
| value = 0, | ||
| minValue = 0, | ||
| maxValue = 100, | ||
| size = 'L', | ||
| label, | ||
| barClassName, | ||
| showValueLabel = !!label, | ||
| labelPosition = 'top', | ||
| isIndeterminate = false, | ||
| barProps, | ||
| labelProps, | ||
| 'aria-label': ariaLabel, | ||
| 'aria-labelledby': ariaLabelledby, | ||
| ...otherProps | ||
| } = props; | ||
| let domRef = useDOMRef(ref); | ||
| let { styleProps } = useStyleProps(otherProps); | ||
|
|
||
| value = clamp(value, minValue, maxValue); | ||
|
|
||
| let barStyle: CSSProperties = {}; | ||
| if (!isIndeterminate) { | ||
| let percentage = (value - minValue) / (maxValue - minValue); | ||
| barStyle.width = `${Math.round(percentage * 100)}%`; | ||
| } | ||
|
|
||
| // Ideally this should be in useProgressBar, but children | ||
| // are not supported in ProgressCircle which shares that hook... | ||
| if (!label && !ariaLabel && !ariaLabelledby) { | ||
| // eslint-disable-next-line no-console | ||
| console.warn( | ||
| 'If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility' | ||
| ); | ||
| } | ||
| // use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files | ||
| return ( | ||
| <div | ||
| {...barProps} | ||
| ref={domRef} | ||
| className={classNames( | ||
| 'ac-barloader', | ||
| { | ||
| 'ac-barloader--small': size === 'S', | ||
| 'ac-barloader--large': size === 'L', | ||
| 'ac-barloader--indeterminate': isIndeterminate, | ||
| 'ac-barloader--sideLabel': labelPosition === 'side', | ||
| }, | ||
| barClassName, | ||
| styleProps.className | ||
| )} | ||
| css={progressBarCSS} | ||
| style={{ minWidth: '-moz-fit-content', ...styleProps.style }} | ||
| > | ||
| {label && ( | ||
| <span {...labelProps} className="ac-barloader-label"> | ||
| {label} | ||
| </span> | ||
| )} | ||
| {showValueLabel && barProps && ( | ||
| <div className={'ac-barloader-percentage'}> | ||
| {barProps['aria-valuetext']} | ||
| </div> | ||
| )} | ||
| <div className={'ac-barloader-track'}> | ||
| <div className={'ac-barloader-fill'} style={barStyle} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| let _ProgressBarBase = React.forwardRef(ProgressBarBase); | ||
| export { _ProgressBarBase as ProgressBarBase }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './ProgressCircle'; | ||
| export * from './ProgressBar'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.