baseui
Version:
A React Component library implementing the Base design language
193 lines (189 loc) • 7.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Layer;
var React = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _styles = require("../styles");
var _layersManager = require("./layers-manager");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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.
*/ /* global document */
const Container = (0, _styles.styled)('div', ({
$zIndex
}) => ({
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: $zIndex || null
}));
Container.displayName = "Container";
class LayerComponent extends React.Component {
constructor(...args) {
super(...args);
// @ts-ignore
_defineProperty(this, "context", void 0);
// @ts-ignore
_defineProperty(this, "state", {
container: null
});
_defineProperty(this, "onEscape", () => {
if (this.props.onEscape) {
this.props.onEscape();
}
});
_defineProperty(this, "onKeyDown", event => {
if (this.props.onKeyDown) {
this.props.onKeyDown(event);
}
});
_defineProperty(this, "onKeyUp", event => {
if (this.props.onKeyUp) {
this.props.onKeyUp(event);
}
});
_defineProperty(this, "onKeyPress", event => {
if (this.props.onKeyPress) {
this.props.onKeyPress(event);
}
});
_defineProperty(this, "onDocumentClick", event => {
if (this.props.onDocumentClick) {
this.props.onDocumentClick(event);
}
});
}
componentDidMount() {
this.context.addEscapeHandler(this.onEscape);
this.context.addKeyDownHandler(this.onKeyDown);
this.context.addKeyUpHandler(this.onKeyUp);
this.context.addKeyPressHandler(this.onKeyPress);
if (!this.props.isHoverLayer) {
this.context.addDocClickHandler(this.onDocumentClick);
}
const {
onMount,
mountNode,
host: layersManagerHost
} = this.props;
if (mountNode) {
onMount && onMount();
return;
}
// There was no LayersManager added if this.props.host === undefined.
// Use document.body is the case no LayersManager is used.
const hasLayersManager = layersManagerHost !== undefined;
if (process.env.NODE_ENV !== "production") {
if (!hasLayersManager) {
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 host = hasLayersManager ? layersManagerHost : document.body;
if (host) {
this.addContainer(host);
}
}
// @ts-ignore
componentDidUpdate(prevProps) {
const {
host,
mountNode
} = this.props;
if (mountNode) {
return;
}
if (host && host !== prevProps.host && prevProps.host === null) {
this.addContainer(host);
}
if (prevProps.isHoverLayer != this.props.isHoverLayer) {
if (this.props.isHoverLayer) {
this.context.removeDocClickHandler(this.onDocumentClick);
} else {
this.context.addDocClickHandler(this.onDocumentClick);
}
}
}
componentWillUnmount() {
this.context.removeEscapeHandler(this.onEscape);
this.context.removeKeyDownHandler(this.onKeyDown);
this.context.removeKeyUpHandler(this.onKeyUp);
this.context.removeKeyPressHandler(this.onKeyPress);
this.context.removeDocClickHandler(this.onDocumentClick);
if (this.props.onUnmount) {
this.props.onUnmount();
}
const host = this.props.host;
const container = this.state.container;
if (host && container) {
if (host.contains(container)) {
host.removeChild(container);
}
}
}
// @ts-ignore
addContainer(host) {
const {
index,
mountNode,
onMount
} = this.props;
// Do nothing if mountNode is provided
if (mountNode) {
return;
}
if (host) {
const container = host.ownerDocument.createElement('div');
// `host` is an DOM node, but not a React component
const sibling = typeof index === 'number' ? host.children[index] : null;
sibling ? host.insertBefore(container, sibling) : host.appendChild(container);
this.setState({
container
}, () => {
onMount && onMount();
});
}
}
render() {
const {
container
} = this.state;
const {
children,
mountNode,
zIndex
} = this.props;
// Only adding an additional wrapper when a layer has z-index to be set
const childrenToRender = zIndex ? /*#__PURE__*/React.createElement(Container, {
$zIndex: zIndex
}, children) : children;
if (typeof document !== 'undefined') {
if (mountNode) {
return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, mountNode);
} else if (container) {
return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, container);
}
return null;
}
return null;
}
}
_defineProperty(LayerComponent, "contextType", _layersManager.LayersContext);
function Layer(props) {
return /*#__PURE__*/React.createElement(_layersManager.Consumer, null, ({
host,
zIndex
}) => /*#__PURE__*/React.createElement(LayerComponent, _extends({}, props, {
host: host,
zIndex: zIndex
})));
}