baseui
Version:
A React Component library implementing the Base design language
218 lines (216 loc) • 10.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Provider = exports.LayersContext = exports.Consumer = void 0;
var React = _interopRequireWildcard(require("react"));
var _styles = require("../styles");
var _overrides = require("../helpers/overrides");
var _focusVisible = require("../utils/focusVisible");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const StyledAppContainer = (0, _styles.styled)('div', {});
StyledAppContainer.displayName = "StyledAppContainer";
const StyledLayersContainer = (0, _styles.styled)('div', {});
StyledLayersContainer.displayName = "StyledLayersContainer";
function defaultEventHandlerFn() {
if (process.env.NODE_ENV !== "production") {
console.warn('`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information');
}
}
const LayersContext = exports.LayersContext = /*#__PURE__*/React.createContext({
addEscapeHandler: defaultEventHandlerFn,
removeEscapeHandler: defaultEventHandlerFn,
addKeyDownHandler: defaultEventHandlerFn,
removeKeyDownHandler: defaultEventHandlerFn,
addKeyUpHandler: defaultEventHandlerFn,
removeKeyUpHandler: defaultEventHandlerFn,
addKeyPressHandler: defaultEventHandlerFn,
removeKeyPressHandler: defaultEventHandlerFn,
addDocClickHandler: defaultEventHandlerFn,
removeDocClickHandler: defaultEventHandlerFn,
host: undefined,
zIndex: undefined
});
const Provider = exports.Provider = LayersContext.Provider;
const Consumer = exports.Consumer = LayersContext.Consumer;
class LayersManager extends React.Component {
constructor(props) {
super(props);
_defineProperty(this, "host", /*#__PURE__*/React.createRef());
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_defineProperty(this, "containerRef", /*#__PURE__*/React.createRef());
_defineProperty(this, "onDocumentClick", event => {
const docClickHandler = this.state.docClickHandlers[this.state.docClickHandlers.length - 1];
if (docClickHandler) {
docClickHandler(event);
}
});
_defineProperty(this, "onKeyDown", event => {
const keyDownHandler = this.state.keyDownHandlers[this.state.keyDownHandlers.length - 1];
if (keyDownHandler) {
keyDownHandler(event);
}
});
_defineProperty(this, "onKeyUp", event => {
if (event.key === 'Escape') {
const escapeKeyHandler = this.state.escapeKeyHandlers[this.state.escapeKeyHandlers.length - 1];
if (escapeKeyHandler) {
escapeKeyHandler();
}
}
const keyUpHandler = this.state.keyUpHandlers[this.state.keyUpHandlers.length - 1];
if (keyUpHandler) {
keyUpHandler(event);
}
});
_defineProperty(this, "onKeyPress", event => {
const keyPressHandler = this.state.keyPressHandlers[this.state.keyPressHandlers.length - 1];
if (keyPressHandler) {
keyPressHandler(event);
}
});
_defineProperty(this, "onAddEscapeHandler", escapeKeyHandler => {
this.setState(prev => {
return {
escapeKeyHandlers: [...prev.escapeKeyHandlers, escapeKeyHandler]
};
});
});
_defineProperty(this, "onRemoveEscapeHandler", escapeKeyHandler => {
this.setState(prev => {
return {
escapeKeyHandlers: prev.escapeKeyHandlers.filter(handler => handler !== escapeKeyHandler)
};
});
});
_defineProperty(this, "onAddKeyDownHandler", keyDownHandler => {
this.setState(prev => {
return {
keyDownHandlers: [...prev.keyDownHandlers, keyDownHandler]
};
});
});
_defineProperty(this, "onRemoveKeyDownHandler", keyDownHandler => {
this.setState(prev => {
return {
keyDownHandlers: prev.keyDownHandlers.filter(handler => handler !== keyDownHandler)
};
});
});
_defineProperty(this, "onAddKeyUpHandler", keyUpHandler => {
this.setState(prev => {
return {
keyUpHandlers: [...prev.keyUpHandlers, keyUpHandler]
};
});
});
_defineProperty(this, "onRemoveKeyUpHandler", keyUpHandler => {
this.setState(prev => {
return {
keyUpHandlers: prev.keyUpHandlers.filter(handler => handler !== keyUpHandler)
};
});
});
_defineProperty(this, "onAddKeyPressHandler", keyPressHandler => {
this.setState(prev => {
return {
keyPressHandlers: [...prev.keyPressHandlers, keyPressHandler]
};
});
});
_defineProperty(this, "onRemoveKeyPressHandler", keyPressHandler => {
this.setState(prev => {
return {
keyPressHandlers: prev.keyPressHandlers.filter(handler => handler !== keyPressHandler)
};
});
});
_defineProperty(this, "onAddDocClickHandler", docClickHandler => {
this.setState(prev => {
return {
docClickHandlers: [...prev.docClickHandlers, docClickHandler]
};
});
});
_defineProperty(this, "onRemoveDocClickHandler", docClickHandler => {
this.setState(prev => {
return {
docClickHandlers: prev.docClickHandlers.filter(handler => handler !== docClickHandler)
};
});
});
this.state = {
escapeKeyHandlers: [],
keyDownHandlers: [],
keyUpHandlers: [],
keyPressHandlers: [],
docClickHandlers: []
};
}
componentDidMount() {
this.forceUpdate();
(0, _focusVisible.initFocusVisible)(this.containerRef.current);
if (typeof document !== 'undefined') {
document.addEventListener('keydown', this.onKeyDown);
document.addEventListener('keyup', this.onKeyUp);
document.addEventListener('keypress', this.onKeyPress);
// using mousedown event so that callback runs before events on children inside of the layer
document.addEventListener('mousedown', this.onDocumentClick);
}
}
componentWillUnmount() {
if (typeof document !== 'undefined') {
document.removeEventListener('keydown', this.onKeyDown);
document.removeEventListener('keyup', this.onKeyUp);
document.removeEventListener('keypress', this.onKeyPress);
document.removeEventListener('mousedown', this.onDocumentClick);
}
}
render() {
const {
overrides = {}
} = this.props;
const [AppContainer, appContainerProps] = (0, _overrides.getOverrides)(overrides.AppContainer, StyledAppContainer);
const [LayersContainer, layersContainerProps] = (0, _overrides.getOverrides)(overrides.LayersContainer, StyledLayersContainer);
return /*#__PURE__*/React.createElement(Consumer, null, ({
host
}) => {
if (process.env.NODE_ENV !== "production") {
if (host !== undefined) {
// eslint-disable-next-line no-console
console.warn('There is a LayersManager already exists in your application. It is not recommended to have more than one LayersManager in an application.');
}
}
return /*#__PURE__*/React.createElement(Provider, {
value: {
host: host || this.host.current,
zIndex: this.props.zIndex,
addEscapeHandler: this.onAddEscapeHandler,
removeEscapeHandler: this.onRemoveEscapeHandler,
addKeyDownHandler: this.onAddKeyDownHandler,
removeKeyDownHandler: this.onRemoveKeyDownHandler,
addKeyUpHandler: this.onAddKeyUpHandler,
removeKeyUpHandler: this.onRemoveKeyUpHandler,
addKeyPressHandler: this.onAddKeyPressHandler,
removeKeyPressHandler: this.onRemoveKeyPressHandler,
addDocClickHandler: this.onAddDocClickHandler,
removeDocClickHandler: this.onRemoveDocClickHandler
}
}, /*#__PURE__*/React.createElement(AppContainer, _extends({}, appContainerProps, {
ref: this.containerRef
}), this.props.children), /*#__PURE__*/React.createElement(LayersContainer, _extends({}, layersContainerProps, {
ref: this.host
})));
});
}
}
exports.default = LayersManager;