Files F102457248

Backdrop.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Thu, Feb 20, 22:43

Backdrop.js
View Options

	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	import _extends from "@babel/runtime/helpers/esm/extends";
	const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import clsx from 'clsx';
	import { unstable_composeClasses as composeClasses } from '@mui/base';
	import styled from '../styles/styled';
	import useThemeProps from '../styles/useThemeProps';
	import Fade from '../Fade';
	import { getBackdropUtilityClass } from './backdropClasses';
	import { jsx as _jsx } from "react/jsx-runtime";
	const useUtilityClasses = ownerState => {
	const {
	classes,
	invisible
	} = ownerState;
	const slots = {
	root: ['root', invisible && 'invisible']
	};
	return composeClasses(slots, getBackdropUtilityClass, classes);
	};
	const BackdropRoot = styled('div', {
	name: 'MuiBackdrop',
	slot: 'Root',
	overridesResolver: (props, styles) => {
	const {
	ownerState
	} = props;
	return [styles.root, ownerState.invisible && styles.invisible];
	}
	})(({
	ownerState
	}) => _extends({
	position: 'fixed',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	right: 0,
	bottom: 0,
	top: 0,
	left: 0,
	backgroundColor: 'rgba(0, 0, 0, 0.5)',
	WebkitTapHighlightColor: 'transparent'
	}, ownerState.invisible && {
	backgroundColor: 'transparent'
	}));
	const Backdrop = /#__PURE__/React.forwardRef(function Backdrop(inProps, ref) {
	var _slotProps$root, _ref, _slots$root;
	const props = useThemeProps({
	props: inProps,
	name: 'MuiBackdrop'
	});
	const {
	children,
	component = 'div',
	components = {},
	componentsProps = {},
	className,
	invisible = false,
	open,
	slotProps = {},
	slots = {},
	transitionDuration,
	// eslint-disable-next-line react/prop-types
	TransitionComponent = Fade
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const ownerState = _extends({}, props, {
	component,
	invisible
	});
	const classes = useUtilityClasses(ownerState);
	const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
	return /#__PURE__/_jsx(TransitionComponent, _extends({
	in: open,
	timeout: transitionDuration
	}, other, {
	children: /#__PURE__/_jsx(BackdropRoot, _extends({
	"aria-hidden": true
	}, rootSlotProps, {
	as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
	className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
	ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
	classes: classes,
	ref: ref,
	children: children
	}))
	}));
	});
	process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit the d.ts file and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* The content of the component.
	*/
	children: PropTypes.node,
	/**
	* Override or extend the styles applied to the component.
	*/
	classes: PropTypes.object,
	/**
	* @ignore
	*/
	className: PropTypes.string,
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: PropTypes.elementType,
	/**
	* The components used for each slot inside.
	*
	* This prop is an alias for the `slots` prop.
	* It's recommended to use the `slots` prop instead.
	*
	* @default {}
	*/
	components: PropTypes.shape({
	Root: PropTypes.elementType
	}),
	/**
	* The extra props for the slot components.
	* You can override the existing props or add new ones.
	*
	* This prop is an alias for the `slotProps` prop.
	* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
	*
	* @default {}
	*/
	componentsProps: PropTypes.shape({
	root: PropTypes.object
	}),
	/**
	* If `true`, the backdrop is invisible.
	* It can be used when rendering a popover or a custom select component.
	* @default false
	*/
	invisible: PropTypes.bool,
	/**
	* If `true`, the component is shown.
	*/
	open: PropTypes.bool.isRequired,
	/**
	* The extra props for the slot components.
	* You can override the existing props or add new ones.
	*
	* This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
	*
	* @default {}
	*/
	slotProps: PropTypes.shape({
	root: PropTypes.object
	}),
	/**
	* The components used for each slot inside.
	*
	* This prop is an alias for the `components` prop, which will be deprecated in the future.
	*
	* @default {}
	*/
	slots: PropTypes.shape({
	root: PropTypes.elementType
	}),
	/**
	* 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 duration for the transition, in milliseconds.
	* You may specify a single timeout for all transitions, or individually with an object.
	*/
	transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
	appear: PropTypes.number,
	enter: PropTypes.number,
	exit: PropTypes.number
	})])
	} : void 0;
	export default Backdrop;

Event Timeline