@material-ui/core
Version:
React components that implement Google's Material Design.
509 lines (436 loc) • 18.6 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import warning from 'warning';
import debounce from '../utils/debounce';
import clsx from 'clsx';
import { chainPropTypes, elementTypeAcceptingRef } from '@material-ui/utils';
import ownerDocument from '../utils/ownerDocument';
import ownerWindow from '../utils/ownerWindow';
import { createChainedFunction } from '../utils/helpers';
import withStyles from '../styles/withStyles';
import Modal from '../Modal';
import Grow from '../Grow';
import Paper from '../Paper';
export function getOffsetTop(rect, vertical) {
var offset = 0;
if (typeof vertical === 'number') {
offset = vertical;
} else if (vertical === 'center') {
offset = rect.height / 2;
} else if (vertical === 'bottom') {
offset = rect.height;
}
return offset;
}
export function getOffsetLeft(rect, horizontal) {
var offset = 0;
if (typeof horizontal === 'number') {
offset = horizontal;
} else if (horizontal === 'center') {
offset = rect.width / 2;
} else if (horizontal === 'right') {
offset = rect.width;
}
return offset;
}
function getTransformOriginValue(transformOrigin) {
return [transformOrigin.horizontal, transformOrigin.vertical].map(function (n) {
return typeof n === 'number' ? "".concat(n, "px") : n;
}).join(' ');
} // Sum the scrollTop between two elements.
function getScrollParent(parent, child) {
var element = child;
var scrollTop = 0;
while (element && element !== parent) {
element = element.parentNode;
scrollTop += element.scrollTop;
}
return scrollTop;
}
function getAnchorEl(anchorEl) {
return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
}
export var styles = {
/* Styles applied to the `Paper` component. */
paper: {
position: 'absolute',
overflowY: 'auto',
overflowX: 'hidden',
// So we see the popover when it's empty.
// It's most likely on issue on userland.
minWidth: 16,
minHeight: 16,
maxWidth: 'calc(100% - 32px)',
maxHeight: 'calc(100% - 32px)',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 'none'
}
};
var Popover = React.forwardRef(function Popover(props, ref) {
var action = props.action,
anchorEl = props.anchorEl,
_props$anchorOrigin = props.anchorOrigin,
anchorOrigin = _props$anchorOrigin === void 0 ? {
vertical: 'top',
horizontal: 'left'
} : _props$anchorOrigin,
anchorPosition = props.anchorPosition,
_props$anchorReferenc = props.anchorReference,
anchorReference = _props$anchorReferenc === void 0 ? 'anchorEl' : _props$anchorReferenc,
children = props.children,
classes = props.classes,
containerProp = props.container,
_props$elevation = props.elevation,
elevation = _props$elevation === void 0 ? 8 : _props$elevation,
getContentAnchorEl = props.getContentAnchorEl,
_props$marginThreshol = props.marginThreshold,
marginThreshold = _props$marginThreshol === void 0 ? 16 : _props$marginThreshol,
ModalClasses = props.ModalClasses,
onEnter = props.onEnter,
onEntered = props.onEntered,
onEntering = props.onEntering,
onExit = props.onExit,
onExited = props.onExited,
onExiting = props.onExiting,
open = props.open,
_props$PaperProps = props.PaperProps,
PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
_props$transformOrigi = props.transformOrigin,
transformOrigin = _props$transformOrigi === void 0 ? {
vertical: 'top',
horizontal: 'left'
} : _props$transformOrigi,
_props$TransitionComp = props.TransitionComponent,
TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
_props$transitionDura = props.transitionDuration,
transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,
_props$TransitionProp = props.TransitionProps,
TransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "classes", "container", "elevation", "getContentAnchorEl", "marginThreshold", "ModalClasses", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);
var paperRef = React.useRef();
var handleResizeRef = React.useRef(function () {});
React.useImperativeHandle(action, function () {
return {
updatePosition: handleResizeRef.current
};
}, []); // Returns the top/left offset of the position
// to attach to on the anchor element (or body if none is provided)
var getAnchorOffset = React.useCallback(function (contentAnchorOffset) {
if (anchorReference === 'anchorPosition') {
process.env.NODE_ENV !== "production" ? warning(anchorPosition, 'Material-UI: you need to provide a `anchorPosition` prop when using ' + '<Popover anchorReference="anchorPosition" />.') : void 0;
return anchorPosition;
}
var resolvedAnchorEl = getAnchorEl(anchorEl); // If an anchor element wasn't provided, just use the parent body element of this Popover
var anchorElement = resolvedAnchorEl instanceof Element ? resolvedAnchorEl : ownerDocument(paperRef.current).body;
var anchorRect = anchorElement.getBoundingClientRect();
var anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
return {
top: anchorRect.top + getOffsetTop(anchorRect, anchorVertical),
left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal)
};
}, [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference]); // Returns the vertical offset of inner content to anchor the transform on if provided
var getContentAnchorOffset = React.useCallback(function (element) {
var contentAnchorOffset = 0;
if (getContentAnchorEl && anchorReference === 'anchorEl') {
var contentAnchorEl = getContentAnchorEl(element);
if (contentAnchorEl && element.contains(contentAnchorEl)) {
var scrollTop = getScrollParent(element, contentAnchorEl);
contentAnchorOffset = contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;
} // != the default value
process.env.NODE_ENV !== "production" ? warning(anchorOrigin.vertical === 'top', ['Material-UI: you can not change the default `anchorOrigin.vertical` value ', 'when also providing the `getContentAnchorEl` prop to the popover component.', 'Only use one of the two props.', 'Set `getContentAnchorEl` to `null | undefined`' + ' or leave `anchorOrigin.vertical` unchanged.'].join('\n')) : void 0;
}
return contentAnchorOffset;
}, [anchorOrigin.vertical, anchorReference, getContentAnchorEl]); // Return the base transform origin using the element
// and taking the content anchor offset into account if in use
var getTransformOrigin = React.useCallback(function (elemRect) {
var contentAnchorOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
return {
vertical: getOffsetTop(elemRect, transformOrigin.vertical) + contentAnchorOffset,
horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal)
};
}, [transformOrigin.horizontal, transformOrigin.vertical]);
var getPositioningStyle = React.useCallback(function (element) {
// Check if the parent has requested anchoring on an inner content node
var contentAnchorOffset = getContentAnchorOffset(element);
var elemRect = {
width: element.offsetWidth,
height: element.offsetHeight
}; // Get the transform origin point on the element itself
var elemTransformOrigin = getTransformOrigin(elemRect, contentAnchorOffset);
if (anchorReference === 'none') {
return {
top: null,
left: null,
transformOrigin: getTransformOriginValue(elemTransformOrigin)
};
} // Get the offset of of the anchoring element
var anchorOffset = getAnchorOffset(contentAnchorOffset); // Calculate element positioning
var top = anchorOffset.top - elemTransformOrigin.vertical;
var left = anchorOffset.left - elemTransformOrigin.horizontal;
var bottom = top + elemRect.height;
var right = left + elemRect.width; // Use the parent window of the anchorEl if provided
var containerWindow = ownerWindow(getAnchorEl(anchorEl)); // Window thresholds taking required margin into account
var heightThreshold = containerWindow.innerHeight - marginThreshold;
var widthThreshold = containerWindow.innerWidth - marginThreshold; // Check if the vertical axis needs shifting
if (top < marginThreshold) {
var diff = top - marginThreshold;
top -= diff;
elemTransformOrigin.vertical += diff;
} else if (bottom > heightThreshold) {
var _diff = bottom - heightThreshold;
top -= _diff;
elemTransformOrigin.vertical += _diff;
}
process.env.NODE_ENV !== "production" ? warning(elemRect.height <= heightThreshold || !elemRect.height || !heightThreshold, ['Material-UI: the popover component is too tall.', "Some part of it can not be seen on the screen (".concat(elemRect.height - heightThreshold, "px)."), 'Please consider adding a `max-height` to improve the user-experience.'].join('\n')) : void 0; // Check if the horizontal axis needs shifting
if (left < marginThreshold) {
var _diff2 = left - marginThreshold;
left -= _diff2;
elemTransformOrigin.horizontal += _diff2;
} else if (right > widthThreshold) {
var _diff3 = right - widthThreshold;
left -= _diff3;
elemTransformOrigin.horizontal += _diff3;
}
return {
top: "".concat(top, "px"),
left: "".concat(left, "px"),
transformOrigin: getTransformOriginValue(elemTransformOrigin)
};
}, [anchorEl, anchorReference, getAnchorOffset, getContentAnchorOffset, getTransformOrigin, marginThreshold]);
var setPositioningStyles = React.useCallback(function (element) {
var positioning = getPositioningStyle(element);
if (positioning.top !== null) {
element.style.top = positioning.top;
}
if (positioning.left !== null) {
element.style.left = positioning.left;
}
element.style.transformOrigin = positioning.transformOrigin;
}, [getPositioningStyle]);
var handleEntering = function handleEntering(element) {
if (onEntering) {
onEntering(element);
}
setPositioningStyles(element);
};
var handlePaperRef = React.useCallback(function (instance) {
// #StrictMode ready
paperRef.current = ReactDOM.findDOMNode(instance);
}, []);
React.useEffect(function () {
handleResizeRef.current = debounce(function () {
// Because we debounce the event, the open prop might no longer be true
// when the callback resolves.
if (!open) {
return;
}
setPositioningStyles(paperRef.current);
});
window.addEventListener('resize', handleResizeRef.current);
return function () {
handleResizeRef.current.clear();
window.removeEventListener('resize', handleResizeRef.current);
};
}, [open, setPositioningStyles]);
var transitionDuration = transitionDurationProp;
if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
transitionDuration = undefined;
} // If the container prop is provided, use that
// If the anchorEl prop is provided, use its parent body element as the container
// If neither are provided let the Modal take care of choosing the container
var container = containerProp || (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);
return React.createElement(Modal, _extends({
classes: ModalClasses,
container: container,
open: open,
ref: ref,
BackdropProps: {
invisible: true
}
}, other), React.createElement(TransitionComponent, _extends({
appear: true,
in: open,
onEnter: onEnter,
onEntered: onEntered,
onExit: onExit,
onExited: onExited,
onExiting: onExiting,
timeout: transitionDuration
}, TransitionProps, {
onEntering: createChainedFunction(handleEntering, TransitionProps.onEntering)
}), React.createElement(Paper, _extends({
elevation: elevation,
ref: handlePaperRef
}, PaperProps, {
// eslint-disable-next-line react/prop-types
className: clsx(classes.paper, PaperProps.className)
}), children)));
});
process.env.NODE_ENV !== "production" ? Popover.propTypes = {
/**
* This is callback prop. It's called by the component on mount.
* This is useful when you want to trigger an action programmatically.
* It currently only supports updatePosition() action.
*
* @param {object} actions This object contains all possible actions
* that can be triggered programmatically.
*/
action: PropTypes.func,
/**
* This is the DOM element, or a function that returns the DOM element,
* that may be used to set the position of the popover.
*/
anchorEl: chainPropTypes(PropTypes.oneOfType([PropTypes.object, PropTypes.func]), function (props) {
if (props.open && (!props.anchorReference || props.anchorReference === 'anchorEl')) {
var resolvedAnchorEl = getAnchorEl(props.anchorEl);
if (resolvedAnchorEl instanceof Element) {
var box = resolvedAnchorEl.getBoundingClientRect();
if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', 'The node element should be visible.'].join('\n'));
}
} else {
return new Error(['Material-UI: the `anchorEl` prop provided to the component is invalid.', "It should be an Element instance but it's `".concat(resolvedAnchorEl, "` instead.")].join('\n'));
}
}
return null;
}),
/**
* This is the point on the anchor where the popover's
* `anchorEl` will attach to. This is not used when the
* anchorReference is 'anchorPosition'.
*
* Options:
* vertical: [top, center, bottom];
* horizontal: [left, center, right].
*/
anchorOrigin: PropTypes.shape({
horizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['left', 'center', 'right'])]).isRequired,
vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]).isRequired
}),
/**
* This is the position that may be used
* to set the position of the popover.
* The coordinates are relative to
* the application's client area.
*/
anchorPosition: PropTypes.shape({
left: PropTypes.number.isRequired,
top: PropTypes.number.isRequired
}),
/*
* This determines which anchor prop to refer to to set
* the position of the popover.
*/
anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object.isRequired,
/**
* A node, component instance, or function that returns either.
* The `container` will passed to the Modal component.
* By default, it uses the body of the anchorEl's top-level document object,
* so it's simply `document.body` most of the time.
*/
container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
/**
* The elevation of the popover.
*/
elevation: PropTypes.number,
/**
* This function is called in order to retrieve the content anchor element.
* It's the opposite of the `anchorEl` prop.
* The content anchor element should be an element inside the popover.
* It's used to correctly scroll and set the position of the popover.
* The positioning strategy tries to make the content anchor element just above the
* anchor element.
*/
getContentAnchorEl: PropTypes.func,
/**
* Specifies how close to the edge of the window the popover can appear.
*/
marginThreshold: PropTypes.number,
/**
* `classes` prop applied to the [`Modal`](/api/modal/) element.
*/
ModalClasses: PropTypes.object,
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"`
*/
onClose: PropTypes.func,
/**
* Callback fired before the component is entering.
*/
onEnter: PropTypes.func,
/**
* Callback fired when the component has entered.
*/
onEntered: PropTypes.func,
/**
* Callback fired when the component is entering.
*/
onEntering: PropTypes.func,
/**
* Callback fired before the component is exiting.
*/
onExit: PropTypes.func,
/**
* Callback fired when the component has exited.
*/
onExited: PropTypes.func,
/**
* Callback fired when the component is exiting.
*/
onExiting: PropTypes.func,
/**
* If `true`, the popover is visible.
*/
open: PropTypes.bool.isRequired,
/**
* Props applied to the [`Paper`](/api/paper/) element.
*/
PaperProps: PropTypes.shape({
component: elementTypeAcceptingRef
}),
/**
* This is the point on the popover which
* will attach to the anchor's origin.
*
* Options:
* vertical: [top, center, bottom, x(px)];
* horizontal: [left, center, right, x(px)].
*/
transformOrigin: PropTypes.shape({
horizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['left', 'center', 'right'])]).isRequired,
vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]).isRequired
}),
/**
* The component used for the transition.
*/
TransitionComponent: PropTypes.elementType,
/**
* Set to 'auto' to automatically calculate transition time based on height.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
enter: PropTypes.number,
exit: PropTypes.number
}), PropTypes.oneOf(['auto'])]),
/**
* Props applied to the `Transition` element.
*/
TransitionProps: PropTypes.object
} : void 0;
export default withStyles(styles, {
name: 'MuiPopover'
})(Popover);