jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
234 lines (194 loc) • 8.62 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../../prop-types/index.js');
var index$2 = require('../../utils/es/index.js');
var index$1 = require('../../portal/es/index.js');
var index$3 = require('../node_modules/react-focus-lock/dist/es2015/index.js');
var Combination = require('../../../react-remove-scroll/dist/es2015/Combination.js');
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var overlayPropTypes = {
initialFocusRef: function initialFocusRef() {},
allowPinchZoom: index.default.bool,
onDismiss: index.default.func
}; ////////////////////////////////////////////////////////////////////////////////
// DialogOverlay
var DialogOverlay = React.forwardRef(function DialogOverlay(_ref, forwardedRef) {
var _ref$isOpen = _ref.isOpen,
isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen,
props = _objectWithoutPropertiesLoose(_ref, ["isOpen"]);
React.useEffect(function () {
return index$2.checkStyles("dialog");
}, []);
return isOpen ? React__default.createElement(index$1.default, {
"data-reach-dialog-wrapper": ""
}, React__default.createElement(DialogInner, _extends({
ref: forwardedRef
}, props))) : null;
});
DialogOverlay.displayName = "DialogOverlay";
if (process.env.NODE_ENV !== "production") {
DialogOverlay.propTypes = _extends({}, overlayPropTypes, {
isOpen: index.default.bool
});
} ////////////////////////////////////////////////////////////////////////////////
// DialogInner
var DialogInner = React.forwardRef(function DialogInner(_ref2, forwardedRef) {
var allowPinchZoom = _ref2.allowPinchZoom,
initialFocusRef = _ref2.initialFocusRef,
onClick = _ref2.onClick,
_ref2$onDismiss = _ref2.onDismiss,
onDismiss = _ref2$onDismiss === void 0 ? index$2.noop : _ref2$onDismiss,
onMouseDown = _ref2.onMouseDown,
onKeyDown = _ref2.onKeyDown,
props = _objectWithoutPropertiesLoose(_ref2, ["allowPinchZoom", "initialFocusRef", "onClick", "onDismiss", "onMouseDown", "onKeyDown"]);
var mouseDownTarget = React.useRef(null);
var overlayNode = React.useRef(null);
var ref = index$2.useForkedRef(overlayNode, forwardedRef);
var activateFocusLock = React.useCallback(function () {
if (initialFocusRef && initialFocusRef.current) {
initialFocusRef.current.focus();
}
}, [initialFocusRef]);
function handleClick(event) {
if (mouseDownTarget.current === event.target) {
event.stopPropagation();
onDismiss(event);
}
}
function handleKeyDown(event) {
if (event.key === "Escape") {
event.stopPropagation();
onDismiss(event);
}
}
function handleMouseDown(event) {
mouseDownTarget.current = event.target;
}
React.useEffect(function () {
return createAriaHider(overlayNode.current);
}, []);
return React__default.createElement(index$3.default, {
autoFocus: true,
returnFocus: true,
onActivation: activateFocusLock
}, React__default.createElement(Combination.default, {
allowPinchZoom: allowPinchZoom
}, React__default.createElement("div", _extends({}, props, {
ref: ref,
"data-reach-dialog-overlay": ""
/*
* We can ignore the `no-static-element-interactions` warning here
* because our overlay is only designed to capture any outside
* clicks, not to serve as a clickable element itself.
*/
,
onClick: index$2.wrapEvent(onClick, handleClick),
onKeyDown: index$2.wrapEvent(onKeyDown, handleKeyDown),
onMouseDown: index$2.wrapEvent(onMouseDown, handleMouseDown)
}))));
});
DialogOverlay.displayName = "DialogOverlay";
if (process.env.NODE_ENV !== "production") {
DialogOverlay.propTypes = _extends({}, overlayPropTypes);
} ////////////////////////////////////////////////////////////////////////////////
// DialogContent
var DialogContent = React.forwardRef(function DialogContent(_ref3, forwardedRef) {
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
props = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onKeyDown"]);
return React__default.createElement("div", _extends({}, props, {
ref: forwardedRef,
"data-reach-dialog-content": "",
"aria-modal": "true",
onClick: index$2.wrapEvent(onClick, function (event) {
event.stopPropagation();
}),
role: "dialog",
tabIndex: -1
}));
});
DialogContent.displayName = "DialogContent";
if (process.env.NODE_ENV !== "production") {
DialogContent.propTypes = {
"aria-label": ariaLabelType,
"aria-labelledby": ariaLabelType
};
} ////////////////////////////////////////////////////////////////////////////////
// Dialog
var Dialog = React.forwardRef(function Dialog(_ref4, forwardedRef) {
var isOpen = _ref4.isOpen,
_ref4$onDismiss = _ref4.onDismiss,
onDismiss = _ref4$onDismiss === void 0 ? index$2.noop : _ref4$onDismiss,
initialFocusRef = _ref4.initialFocusRef,
props = _objectWithoutPropertiesLoose(_ref4, ["isOpen", "onDismiss", "initialFocusRef"]);
return React__default.createElement(DialogOverlay, {
initialFocusRef: initialFocusRef,
isOpen: isOpen,
onDismiss: onDismiss
}, React__default.createElement(DialogContent, _extends({
ref: forwardedRef
}, props)));
});
Dialog.displayName = "Dialog";
if (process.env.NODE_ENV !== "production") {
Dialog.propTypes = {
isOpen: index.default.bool,
onDismiss: index.default.func,
"aria-label": ariaLabelType,
"aria-labelledby": ariaLabelType
};
}
function createAriaHider(dialogNode) {
var originalValues = [];
var rootNodes = [];
if (!dialogNode) {
if (process.env.NODE_ENV !== "production") {
console.warn("A ref has not yet been attached to a dialog node when attempting to call `createAriaHider`.");
}
return index$2.noop;
}
Array.prototype.forEach.call(document.querySelectorAll("body > *"), function (node) {
var portalNode = dialogNode.parentNode.parentNode.parentNode;
if (node === portalNode) {
return;
}
var attr = node.getAttribute("aria-hidden");
var alreadyHidden = attr !== null && attr !== "false";
if (alreadyHidden) {
return;
}
originalValues.push(attr);
rootNodes.push(node);
node.setAttribute("aria-hidden", "true");
});
return function () {
rootNodes.forEach(function (node, index) {
var originalValue = originalValues[index];
if (originalValue === null) {
node.removeAttribute("aria-hidden");
} else {
node.setAttribute("aria-hidden", originalValue);
}
});
};
}
function ariaLabelType(props, name, compName) {
var details = "\nSee https://www.w3.org/TR/wai-aria/#aria-label for details.";
if (!props["aria-label"] && !props["aria-labelledby"]) {
return new Error("A <" + compName + "> must have either an `aria-label` or `aria-labelledby` prop.\n " + details);
}
if (props["aria-label"] && props["aria-labelledby"]) {
return new Error("You provided both `aria-label` and `aria-labelledby` props to a <" + compName + ">. If the a label for this component is visible on the screen, that label's component should be given a unique ID prop, and that ID should be passed as the `aria-labelledby` prop into <" + compName + ">. If the label cannot be determined programmatically from the content of the element, an alternative label should be provided as the `aria-label` prop, which will be used as an `aria-label` on the HTML tag." + details);
}
for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
rest[_key - 3] = arguments[_key];
}
return index.default.string.apply(index.default, [name, props, compName].concat(rest));
}
exports.Dialog = Dialog;
exports.DialogContent = DialogContent;
exports.DialogOverlay = DialogOverlay;