Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 1219x 1219x 17x 1219x 1219x 1x 1218x 1216x 2x 17x 17x 17x 1219x 17x 17x | import React from 'react'; import PropTypes from 'prop-types'; import { Paragraph } from 'src/elements/typography'; import { Hideable } from 'src/elements/utils'; import { CircularProgress } from './CircleProgress'; import { LinearProgress } from './LinearProgress'; const showCircular = props => props.progressType === 'circular'; const showLinear = props => props.progressType === 'linear'; const getCaption = props => { const { caption, captionProps, } = props; if (React.isValidElement(caption)) { return caption; } if (caption === undefined) { return null; } return ( <Paragraph isHidden={!caption} sm {...captionProps} > {caption} </Paragraph> ); }; getCaption.propTypes = { caption: PropTypes.oneOfType([ PropTypes.node, PropTypes.string, ]), captionProps: PropTypes.object, }; getCaption.defaultProps = { caption: '', captionProps: {}, }; export const Progress = props => ( <> <Hideable isHidden={!showCircular(props)}> <CircularProgress {...props} /> </Hideable> <Hideable isHidden={!showLinear(props)}> <LinearProgress {...props} /> </Hideable> {getCaption(props)} </> ); Progress.propTypes = { /** Styled system prop for defining animation */ animation: PropTypes.any, /** Styled system prop for defining animation-delay */ animationDelay: PropTypes.any, /** Styled system prop for defining animation-direction */ animationDirection: PropTypes.any, /** Styled system prop for defining animation-duration */ animationDuration: PropTypes.any, /** Styled system prop for defining animation-fill-mode */ animationFillMode: PropTypes.any, /** Styled system prop for defining animation-iteration-count. When blank, it will determine if its value based off the `loop` property. */ animationIterationCount: PropTypes.any, /** Prop for defining custom animation name. Does NOT follow styled system's responsive breakpoints. */ animationName: PropTypes.any, /** Styled system prop for defining animation-play-state */ animationPlayState: PropTypes.any, /** Styled system prop for defining animation-timing-function */ animationTimingFunction: PropTypes.any, /** Shorthand for setting the track to transparent */ hideTrack: PropTypes.bool, /** Defines the background color for the indicator. */ indicatorColor: PropTypes.string, /** Passes props to the inidicator DOM. */ indicatorProps: PropTypes.object, /** Allow for additional props to be removed from the indicator DOM. Props passed through `indicatorProps` are already trimmed. */ indicatorPropsToTrim: PropTypes.arrayOf(PropTypes.string), /** Will make the progress bar finite. */ isDeterminate: PropTypes.bool, /** Shorthand prop for setting `animationDuration` to 'infinite'. */ loop: PropTypes.bool, /** Defines which progress bar to display */ progressType: PropTypes.oneOf(['circular', 'linear']), /** Defines the total length for the indicator. */ total: PropTypes.number, /** Defines the background color for the track. */ trackColor: PropTypes.string, /** Passes props to the track DOM. */ trackProps: PropTypes.object, /** Allow for additional props to be removed from the track DOM. Props passed through `trackProps` are already trimmed. */ trackPropsToTrim: PropTypes.arrayOf(PropTypes.string), /** Defines the length of the indicator within the track total. When provided 0 or above, will make progess bar determinate. */ value: PropTypes.number, }; Progress.defaultProps = { animation: '', animationDelay: '0s', animationDirection: 'normal', animationDuration: '1.5s', animationFillMode: 'none', animationIterationCount: '', animationName: '', animationPlayState: 'running', animationTimingFunction: 'linear', hideTrack: false, indicatorColor: 'brandPrimary.light', indicatorProps: {}, indicatorPropsToTrim: [], isDeterminate: false, loop: true, progressType: 'linear', total: 100, trackColor: 'gray.light', trackProps: {}, trackPropsToTrim: [], value: -1, }; |