Buckets:
ktongue/docker_container / fem_tutos /node_modules /@mui /material /LinearProgress /LinearProgress.js
| ; | |
| 'use client'; | |
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default; | |
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default; | |
| Object.defineProperty(exports, "__esModule", { | |
| value: true | |
| }); | |
| exports.default = void 0; | |
| var React = _interopRequireWildcard(require("react")); | |
| var _propTypes = _interopRequireDefault(require("prop-types")); | |
| var _clsx = _interopRequireDefault(require("clsx")); | |
| var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses")); | |
| var _RtlProvider = require("@mui/system/RtlProvider"); | |
| var _zeroStyled = require("../zero-styled"); | |
| var _memoTheme = _interopRequireDefault(require("../utils/memoTheme")); | |
| var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter")); | |
| var _DefaultPropsProvider = require("../DefaultPropsProvider"); | |
| var _capitalize = _interopRequireDefault(require("../utils/capitalize")); | |
| var _linearProgressClasses = require("./linearProgressClasses"); | |
| var _jsxRuntime = require("react/jsx-runtime"); | |
| const TRANSITION_DURATION = 4; // seconds | |
| const indeterminate1Keyframe = (0, _zeroStyled.keyframes)` | |
| 0% { | |
| left: -35%; | |
| right: 100%; | |
| } | |
| 60% { | |
| left: 100%; | |
| right: -90%; | |
| } | |
| 100% { | |
| left: 100%; | |
| right: -90%; | |
| } | |
| `; | |
| // This implementation is for supporting both Styled-components v4+ and Pigment CSS. | |
| // A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12). | |
| // which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string). | |
| const indeterminate1Animation = typeof indeterminate1Keyframe !== 'string' ? (0, _zeroStyled.css)` | |
| animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; | |
| ` : null; | |
| const indeterminate2Keyframe = (0, _zeroStyled.keyframes)` | |
| 0% { | |
| left: -200%; | |
| right: 100%; | |
| } | |
| 60% { | |
| left: 107%; | |
| right: -8%; | |
| } | |
| 100% { | |
| left: 107%; | |
| right: -8%; | |
| } | |
| `; | |
| const indeterminate2Animation = typeof indeterminate2Keyframe !== 'string' ? (0, _zeroStyled.css)` | |
| animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; | |
| ` : null; | |
| const bufferKeyframe = (0, _zeroStyled.keyframes)` | |
| 0% { | |
| opacity: 1; | |
| background-position: 0 -23px; | |
| } | |
| 60% { | |
| opacity: 0; | |
| background-position: 0 -23px; | |
| } | |
| 100% { | |
| opacity: 1; | |
| background-position: -200px -23px; | |
| } | |
| `; | |
| const bufferAnimation = typeof bufferKeyframe !== 'string' ? (0, _zeroStyled.css)` | |
| animation: ${bufferKeyframe} 3s infinite linear; | |
| ` : null; | |
| const useUtilityClasses = ownerState => { | |
| const { | |
| classes, | |
| variant, | |
| color | |
| } = ownerState; | |
| const slots = { | |
| root: ['root', `color${(0, _capitalize.default)(color)}`, variant], | |
| dashed: ['dashed', `dashedColor${(0, _capitalize.default)(color)}`], | |
| bar1: ['bar', 'bar1', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'], | |
| bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer'] | |
| }; | |
| return (0, _composeClasses.default)(slots, _linearProgressClasses.getLinearProgressUtilityClass, classes); | |
| }; | |
| const getColorShade = (theme, color) => { | |
| if (theme.vars) { | |
| return theme.vars.palette.LinearProgress[`${color}Bg`]; | |
| } | |
| return theme.palette.mode === 'light' ? theme.lighten(theme.palette[color].main, 0.62) : theme.darken(theme.palette[color].main, 0.5); | |
| }; | |
| const LinearProgressRoot = (0, _zeroStyled.styled)('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Root', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], styles[ownerState.variant]]; | |
| } | |
| })((0, _memoTheme.default)(({ | |
| theme | |
| }) => ({ | |
| position: 'relative', | |
| overflow: 'hidden', | |
| display: 'block', | |
| height: 4, | |
| // Fix Safari's bug during composition of different paint. | |
| zIndex: 0, | |
| '@media print': { | |
| colorAdjust: 'exact' | |
| }, | |
| variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({ | |
| props: { | |
| color | |
| }, | |
| style: { | |
| backgroundColor: getColorShade(theme, color) | |
| } | |
| })), { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.color === 'inherit' && ownerState.variant !== 'buffer', | |
| style: { | |
| '&::before': { | |
| content: '""', | |
| position: 'absolute', | |
| left: 0, | |
| top: 0, | |
| right: 0, | |
| bottom: 0, | |
| backgroundColor: 'currentColor', | |
| opacity: 0.3 | |
| } | |
| } | |
| }, { | |
| props: { | |
| variant: 'buffer' | |
| }, | |
| style: { | |
| backgroundColor: 'transparent' | |
| } | |
| }, { | |
| props: { | |
| variant: 'query' | |
| }, | |
| style: { | |
| transform: 'rotate(180deg)' | |
| } | |
| }] | |
| }))); | |
| const LinearProgressDashed = (0, _zeroStyled.styled)('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Dashed', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.dashed, styles[`dashedColor${(0, _capitalize.default)(ownerState.color)}`]]; | |
| } | |
| })((0, _memoTheme.default)(({ | |
| theme | |
| }) => ({ | |
| position: 'absolute', | |
| marginTop: 0, | |
| height: '100%', | |
| width: '100%', | |
| backgroundSize: '10px 10px', | |
| backgroundPosition: '0 -23px', | |
| variants: [{ | |
| props: { | |
| color: 'inherit' | |
| }, | |
| style: { | |
| opacity: 0.3, | |
| backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)` | |
| } | |
| }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => { | |
| const backgroundColor = getColorShade(theme, color); | |
| return { | |
| props: { | |
| color | |
| }, | |
| style: { | |
| backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)` | |
| } | |
| }; | |
| })] | |
| })), bufferAnimation || { | |
| // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used. | |
| animation: `${bufferKeyframe} 3s infinite linear` | |
| }); | |
| const LinearProgressBar1 = (0, _zeroStyled.styled)('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Bar1', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.bar, styles.bar1, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer]; | |
| } | |
| })((0, _memoTheme.default)(({ | |
| theme | |
| }) => ({ | |
| width: '100%', | |
| position: 'absolute', | |
| left: 0, | |
| bottom: 0, | |
| top: 0, | |
| transition: 'transform 0.2s linear', | |
| transformOrigin: 'left', | |
| variants: [{ | |
| props: { | |
| color: 'inherit' | |
| }, | |
| style: { | |
| backgroundColor: 'currentColor' | |
| } | |
| }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({ | |
| props: { | |
| color | |
| }, | |
| style: { | |
| backgroundColor: (theme.vars || theme).palette[color].main | |
| } | |
| })), { | |
| props: { | |
| variant: 'determinate' | |
| }, | |
| style: { | |
| transition: `transform .${TRANSITION_DURATION}s linear` | |
| } | |
| }, { | |
| props: { | |
| variant: 'buffer' | |
| }, | |
| style: { | |
| zIndex: 1, | |
| transition: `transform .${TRANSITION_DURATION}s linear` | |
| } | |
| }, { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query', | |
| style: { | |
| width: 'auto' | |
| } | |
| }, { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query', | |
| style: indeterminate1Animation || { | |
| animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite` | |
| } | |
| }] | |
| }))); | |
| const LinearProgressBar2 = (0, _zeroStyled.styled)('span', { | |
| name: 'MuiLinearProgress', | |
| slot: 'Bar2', | |
| overridesResolver: (props, styles) => { | |
| const { | |
| ownerState | |
| } = props; | |
| return [styles.bar, styles.bar2, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer]; | |
| } | |
| })((0, _memoTheme.default)(({ | |
| theme | |
| }) => ({ | |
| width: '100%', | |
| position: 'absolute', | |
| left: 0, | |
| bottom: 0, | |
| top: 0, | |
| transition: 'transform 0.2s linear', | |
| transformOrigin: 'left', | |
| variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({ | |
| props: { | |
| color | |
| }, | |
| style: { | |
| '--LinearProgressBar2-barColor': (theme.vars || theme).palette[color].main | |
| } | |
| })), { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit', | |
| style: { | |
| backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)' | |
| } | |
| }, { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit', | |
| style: { | |
| backgroundColor: 'currentColor' | |
| } | |
| }, { | |
| props: { | |
| color: 'inherit' | |
| }, | |
| style: { | |
| opacity: 0.3 | |
| } | |
| }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({ | |
| props: { | |
| color, | |
| variant: 'buffer' | |
| }, | |
| style: { | |
| backgroundColor: getColorShade(theme, color), | |
| transition: `transform .${TRANSITION_DURATION}s linear` | |
| } | |
| })), { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query', | |
| style: { | |
| width: 'auto' | |
| } | |
| }, { | |
| props: ({ | |
| ownerState | |
| }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query', | |
| style: indeterminate2Animation || { | |
| animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite` | |
| } | |
| }] | |
| }))); | |
| /** | |
| * ## 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 = (0, _DefaultPropsProvider.useDefaultProps)({ | |
| props: inProps, | |
| name: 'MuiLinearProgress' | |
| }); | |
| const { | |
| className, | |
| color = 'primary', | |
| value, | |
| valueBuffer, | |
| variant = 'indeterminate', | |
| ...other | |
| } = props; | |
| const ownerState = { | |
| ...props, | |
| color, | |
| variant | |
| }; | |
| const classes = useUtilityClasses(ownerState); | |
| const isRtl = (0, _RtlProvider.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__*/(0, _jsxRuntime.jsxs)(LinearProgressRoot, { | |
| className: (0, _clsx.default)(classes.root, className), | |
| ownerState: ownerState, | |
| role: "progressbar", | |
| ...rootProps, | |
| ref: ref, | |
| ...other, | |
| children: [variant === 'buffer' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearProgressDashed, { | |
| className: classes.dashed, | |
| ownerState: ownerState | |
| }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearProgressBar1, { | |
| className: classes.bar1, | |
| ownerState: ownerState, | |
| style: inlineStyles.bar1 | |
| }), variant === 'determinate' ? null : /*#__PURE__*/(0, _jsxRuntime.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.default.object, | |
| /** | |
| * @ignore | |
| */ | |
| className: _propTypes.default.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.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['inherit', 'primary', 'secondary']), _propTypes.default.string]), | |
| /** | |
| * The system prop that allows defining system overrides as well as additional CSS styles. | |
| */ | |
| sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]), | |
| /** | |
| * The value of the progress indicator for the determinate and buffer variants. | |
| * Value between 0 and 100. | |
| */ | |
| value: _propTypes.default.number, | |
| /** | |
| * The value for the buffer variant. | |
| * Value between 0 and 100. | |
| */ | |
| valueBuffer: _propTypes.default.number, | |
| /** | |
| * The variant to use. | |
| * Use indeterminate or query when there is no progress value. | |
| * @default 'indeterminate' | |
| */ | |
| variant: _propTypes.default.oneOf(['buffer', 'determinate', 'indeterminate', 'query']) | |
| } : void 0; | |
| var _default = exports.default = LinearProgress; |
Xet Storage Details
- Size:
- 15.2 kB
- Xet hash:
- 5525af3f138ab66e36dbc181aa8dbf919b7e91d995a1e0ad64d1b64207bff03b
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.