@fluentui/react-northstar
Version:
A themable React component library.
125 lines (123 loc) • 5 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _invoke from "lodash/invoke";
import _keys from "lodash/keys";
import { FocusTrapZone, useFluentContext, useTelemetry, useAutoControlled } from '@fluentui/react-bindings';
import { EventListener } from '@fluentui/react-component-event-listener';
import { handleRef, Ref } from '@fluentui/react-component-ref';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, doesNodeContainClick, commonPropTypes, rtlTextContainer, createShorthandFactory } from '../../utils';
import { PortalInner } from './PortalInner';
/**
* (DEPRECATED) A Portal allows to render children outside of their parent.
*
* @deprecated Please use "Popup" or "Dialog" components instead.
*/
export var Portal = /*#__PURE__*/function () {
var Portal = function Portal(props) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(Portal.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var children = props.children,
content = props.content,
trapFocus = props.trapFocus,
trigger = props.trigger,
triggerAccessibility = props.triggerAccessibility;
var portalRef = React.useRef();
var triggerRef = React.useRef();
var _useAutoControlled = useAutoControlled({
defaultValue: props.defaultOpen,
value: props.open,
initialValue: false
}),
open = _useAutoControlled[0],
setOpen = _useAutoControlled[1];
var renderPortal = function renderPortal() {
var contentToRender = childrenExist(children) ? children : content;
var focusTrapZoneProps = _keys(trapFocus).length && trapFocus || {};
return open && /*#__PURE__*/React.createElement(Ref, {
innerRef: portalRef
}, /*#__PURE__*/React.createElement(PortalInner, _extends({
onMount: handleMount,
onUnmount: handleUnmount
}, rtlTextContainer.getAttributes({
forElements: [contentToRender]
})), trapFocus ? /*#__PURE__*/React.createElement(FocusTrapZone, focusTrapZoneProps, contentToRender) : contentToRender, /*#__PURE__*/React.createElement(EventListener, {
listener: handleDocumentClick,
target: context.target,
type: "click"
})));
};
var renderTrigger = function renderTrigger() {
return trigger && /*#__PURE__*/React.createElement(Ref, {
innerRef: handleTriggerRef
}, /*#__PURE__*/React.cloneElement(trigger, Object.assign({
onClick: handleTriggerClick
}, triggerAccessibility.attributes, triggerAccessibility.keyHandlers)));
};
var handleMount = function handleMount() {
_invoke(props, 'onMount', props);
};
var handleUnmount = function handleUnmount() {
_invoke(props, 'onUnmount', props);
};
var handleTriggerRef = function handleTriggerRef(node) {
triggerRef.current = node;
handleRef(props.triggerRef, node);
};
var handleTriggerClick = function handleTriggerClick(e) {
_invoke(props, 'onTriggerClick', e); // Call handler from parent component
for (var _len = arguments.length, unhandledProps = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
unhandledProps[_key - 1] = arguments[_key];
}
_invoke.apply(void 0, [trigger, 'props.onClick', e].concat(unhandledProps)); // Call original event handler
setOpen(function (isOpen) {
return !isOpen;
});
};
var handleDocumentClick = function handleDocumentClick(e) {
if (!portalRef ||
// no portal
doesNodeContainClick(triggerRef.current, e, context.target) ||
// event happened in trigger (delegate to trigger handlers)
doesNodeContainClick(portalRef.current, e, context.target) // event happened in the portal
) {
return; // ignore the click
}
_invoke(props, 'onOutsideClick', e);
setOpen(false);
};
var element = /*#__PURE__*/React.createElement(React.Fragment, null, renderPortal(), renderTrigger());
setEnd();
return element;
};
Portal.propTypes = Object.assign({}, commonPropTypes.createCommon({
accessibility: false,
as: false,
className: false,
styled: false
}), {
defaultOpen: PropTypes.bool,
onMount: PropTypes.func,
onUnmount: PropTypes.func,
open: PropTypes.bool,
trigger: PropTypes.element,
triggerRef: customPropTypes.ref,
triggerAccessibility: PropTypes.object,
onTriggerClick: PropTypes.func,
onOutsideClick: PropTypes.func,
trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
});
Portal.handledProps = Object.keys(Portal.propTypes);
Portal.create = createShorthandFactory({
Component: Portal
});
Portal.defaultProps = {
triggerAccessibility: {}
};
return Portal;
}();
//# sourceMappingURL=Portal.js.map