Buckets:
ktongue/docker_container / CAD_kevin /frontend /node_modules /@mui /material /LinearProgress /LinearProgress.js
| 'use client'; | |
| import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| const _excluded = ["className", "color", "value", "valueBuffer", "variant"]; | |
| let _ = t => t, | |
| _t, | |
| _t2, | |
| _t3, | |
| _t4, | |
| _t5, | |
| _t6; | |
| import * as React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import clsx from 'clsx'; | |
| import composeClasses from '@mui/utils/composeClasses'; | |
| import { keyframes, css } from '@mui/system'; | |
| import { darken, lighten } from '@mui/system/colorManipulator'; | |
| import { useRtl } from '@mui/system/RtlProvider'; | |
| import capitalize from '../utils/capitalize'; | |
| import styled from '../styles/styled'; | |
| import { useDefaultProps } from '../DefaultPropsProvider'; | |
| import { getLinearProgressUtilityClass } from './linearProgressClasses'; | |
| import { jsx as _jsx } from "react/jsx-runtime"; | |
| import { jsxs as _jsxs } from "react/jsx-runtime"; | |
| const TRANSITION_DURATION = 4; // seconds | |
| const indeterminate1Keyframe = keyframes(_t || (_t = _` | |
| 0% { | |
| left: -35%; | |
| right: 100%; | |
| } | |
| 60% { | |
| left: 100%; | |
| right: -90%; | |
| } | |
| 100% { | |
| left: 100%; | |
| right: -90%; | |
| } | |
| `)); | |
| const indeterminate2Keyframe = keyframes(_t2 || (_t2 = _` | |
| 0% { | |
| left: -200%; | |
| right: 100%; | |
| } | |
| 60% { | |
| left: 107%; | |
| right: -8%; | |
| } | |
| 100% { | |
| left: 107%; | |
| right: -8%; | |
| } | |
| `)); | |
| const bufferKeyframe = keyframes(_t3 || (_t3 = _` | |
| 0% { | |
| opacity: 1; | |
| background-position: 0 -23px; | |
| } | |
| 60% { | |
| opacity: 0; | |
| background-position: 0 -23px; | |
| } | |
| 100% { | |
| opacity: 1; | |
| background-position: -200px -23px; | |
| } | |
| `)); | |
| const useUtilityClasses = ownerState => { | |
| const { | |
| classes, | |
| variant, | |
| color | |
| } = ownerState; | |
| const slots = { | |
| root: ['root', `color${capitalize(color)}`, variant], | |
| dashed: ['dashed', `dashedColor${capitalize(color)}`], | |
| bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'], | |
| bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer'] | |
| }; | |
| return composeClasses(slots, getLinearProgressUtilityClass, classes); | |
| }; | |
| const getColorShade = (theme, color) => { | |
| if (color === 'inherit') { | |
| return 'currentColor'; | |
| } | |
| if (theme.vars) { | |
| return theme.vars.palette.LinearProgress[`${color}Bg`]; | |
| } | |
| return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5); | |
| }; | |
| const LinearProgressRoot = styled('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Root', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]]; | |
| } | |
| })(({ | |
| ownerState, | |
| theme | |
| }) => _extends({ | |
| position: 'relative', | |
| overflow: 'hidden', | |
| display: 'block', | |
| height: 4, | |
| zIndex: 0, | |
| // Fix Safari's bug during composition of different paint. | |
| '@media print': { | |
| colorAdjust: 'exact' | |
| }, | |
| backgroundColor: getColorShade(theme, ownerState.color) | |
| }, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && { | |
| backgroundColor: 'none', | |
| '&::before': { | |
| content: '""', | |
| position: 'absolute', | |
| left: 0, | |
| top: 0, | |
| right: 0, | |
| bottom: 0, | |
| backgroundColor: 'currentColor', | |
| opacity: 0.3 | |
| } | |
| }, ownerState.variant === 'buffer' && { | |
| backgroundColor: 'transparent' | |
| }, ownerState.variant === 'query' && { | |
| transform: 'rotate(180deg)' | |
| })); | |
| const LinearProgressDashed = styled('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Dashed', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]]; | |
| } | |
| })(({ | |
| ownerState, | |
| theme | |
| }) => { | |
| const backgroundColor = getColorShade(theme, ownerState.color); | |
| return _extends({ | |
| position: 'absolute', | |
| marginTop: 0, | |
| height: '100%', | |
| width: '100%' | |
| }, ownerState.color === 'inherit' && { | |
| opacity: 0.3 | |
| }, { | |
| backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`, | |
| backgroundSize: '10px 10px', | |
| backgroundPosition: '0 -23px' | |
| }); | |
| }, css(_t4 || (_t4 = _` | |
| animation: ${0} 3s infinite linear; | |
| `), bufferKeyframe)); | |
| const LinearProgressBar1 = styled('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Bar1', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer]; | |
| } | |
| })(({ | |
| ownerState, | |
| theme | |
| }) => _extends({ | |
| width: '100%', | |
| position: 'absolute', | |
| left: 0, | |
| bottom: 0, | |
| top: 0, | |
| transition: 'transform 0.2s linear', | |
| transformOrigin: 'left', | |
| backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main | |
| }, ownerState.variant === 'determinate' && { | |
| transition: `transform .${TRANSITION_DURATION}s linear` | |
| }, ownerState.variant === 'buffer' && { | |
| zIndex: 1, | |
| transition: `transform .${TRANSITION_DURATION}s linear` | |
| }), ({ | |
| ownerState | |
| }) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _` | |
| width: auto; | |
| animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; | |
| `), indeterminate1Keyframe)); | |
| const LinearProgressBar2 = styled('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Bar2', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer]; | |
| } | |
| })(({ | |
| ownerState, | |
| theme | |
| }) => _extends({ | |
| width: '100%', | |
| position: 'absolute', | |
| left: 0, | |
| bottom: 0, | |
| top: 0, | |
| transition: 'transform 0.2s linear', | |
| transformOrigin: 'left' | |
| }, ownerState.variant !== 'buffer' && { | |
| backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main | |
| }, ownerState.color === 'inherit' && { | |
| opacity: 0.3 | |
| }, ownerState.variant === 'buffer' && { | |
| backgroundColor: getColorShade(theme, ownerState.color), | |
| transition: `transform .${TRANSITION_DURATION}s linear` | |
| }), ({ | |
| ownerState | |
| }) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _` | |
| width: auto; | |
| animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; | |
| `), indeterminate2Keyframe)); | |
| /** | |
| * ## ARIA | |
| * | |
| * If the progress bar is describing the loading progress of a particular region of a page, | |
| * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy` | |
| * attribute to `true` on that region until it has finished loading. | |
| */ | |
| const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) { | |
| const props = useDefaultProps({ | |
| props: inProps, | |
| name: 'MuiLinearProgress' | |
| }); | |
| const { | |
| className, | |
| color = 'primary', | |
| value, | |
| valueBuffer, | |
| variant = 'indeterminate' | |
| } = props, | |
| other = _objectWithoutPropertiesLoose(props, _excluded); | |
| const ownerState = _extends({}, props, { | |
| color, | |
| variant | |
| }); | |
| const classes = useUtilityClasses(ownerState); | |
| const isRtl = useRtl(); | |
| const rootProps = {}; | |
| const inlineStyles = { | |
| bar1: {}, | |
| bar2: {} | |
| }; | |
| if (variant === 'determinate' || variant === 'buffer') { | |
| if (value !== undefined) { | |
| rootProps['aria-valuenow'] = Math.round(value); | |
| rootProps['aria-valuemin'] = 0; | |
| rootProps['aria-valuemax'] = 100; | |
| let transform = value - 100; | |
| if (isRtl) { | |
| transform = -transform; | |
| } | |
| inlineStyles.bar1.transform = `translateX(${transform}%)`; | |
| } else if (process.env.NODE_ENV !== 'production') { | |
| console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .'); | |
| } | |
| } | |
| if (variant === 'buffer') { | |
| if (valueBuffer !== undefined) { | |
| let transform = (valueBuffer || 0) - 100; | |
| if (isRtl) { | |
| transform = -transform; | |
| } | |
| inlineStyles.bar2.transform = `translateX(${transform}%)`; | |
| } else if (process.env.NODE_ENV !== 'production') { | |
| console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.'); | |
| } | |
| } | |
| return /*#__PURE__*/_jsxs(LinearProgressRoot, _extends({ | |
| className: clsx(classes.root, className), | |
| ownerState: ownerState, | |
| role: "progressbar" | |
| }, rootProps, { | |
| ref: ref | |
| }, other, { | |
| children: [variant === 'buffer' ? /*#__PURE__*/_jsx(LinearProgressDashed, { | |
| className: classes.dashed, | |
| ownerState: ownerState | |
| }) : null, /*#__PURE__*/_jsx(LinearProgressBar1, { | |
| className: classes.bar1, | |
| ownerState: ownerState, | |
| style: inlineStyles.bar1 | |
| }), variant === 'determinate' ? null : /*#__PURE__*/_jsx(LinearProgressBar2, { | |
| className: classes.bar2, | |
| ownerState: ownerState, | |
| style: inlineStyles.bar2 | |
| })] | |
| })); | |
| }); | |
| process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-proptypes */ = { | |
| // ┌────────────────────────────── Warning ──────────────────────────────┐ | |
| // │ These PropTypes are generated from the TypeScript type definitions. │ | |
| // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ | |
| // └─────────────────────────────────────────────────────────────────────┘ | |
| /** | |
| * Override or extend the styles applied to the component. | |
| */ | |
| classes: PropTypes.object, | |
| /** | |
| * @ignore | |
| */ | |
| className: PropTypes.string, | |
| /** | |
| * The color of the component. | |
| * It supports both default and custom theme colors, which can be added as shown in the | |
| * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). | |
| * @default 'primary' | |
| */ | |
| color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]), | |
| /** | |
| * The system prop that allows defining system overrides as well as additional CSS styles. | |
| */ | |
| sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]), | |
| /** | |
| * The value of the progress indicator for the determinate and buffer variants. | |
| * Value between 0 and 100. | |
| */ | |
| value: PropTypes.number, | |
| /** | |
| * The value for the buffer variant. | |
| * Value between 0 and 100. | |
| */ | |
| valueBuffer: PropTypes.number, | |
| /** | |
| * The variant to use. | |
| * Use indeterminate or query when there is no progress value. | |
| * @default 'indeterminate' | |
| */ | |
| variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query']) | |
| } : void 0; | |
| export default LinearProgress; |
Xet Storage Details
- Size:
- 11.6 kB
- Xet hash:
- 2ee362ade5585a56fca4c7d403dddc32cc3e8ba94d017e9986acfdae26617274
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.