nishant-design-system
Version:
Sense UI components library
121 lines (119 loc) • 4.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ClickAway = void 0;
var React = _interopRequireWildcard(require("react"));
var _invariant = _interopRequireDefault(require("invariant"));
var _dom = require("./dom");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// TODO(Nishant): Make this a functional component
class ClickAway extends React.Component {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
isOpen: false,
height: null,
pageBottom: null
});
_defineProperty(this, "el", null);
_defineProperty(this, "cancelNext", false);
_defineProperty(this, "handleOpenClick", () => {
// NOTE (kyle): we recalculate the position on click because sibling and niece components
// could have changed.
let {
pageBottom
} = this.state;
if (this.el) {
pageBottom = this.pageBottom();
}
this.setState({
isOpen: true,
pageBottom
}, this.handleOnChange);
});
_defineProperty(this, "handleCloseClick", evt => {
if (this.props.shouldCancel(evt)) {
return;
}
if (this.cancelNext === true) {
this.cancelNext = false;
} else {
this.setState({
isOpen: false
}, this.handleOnChange);
}
});
_defineProperty(this, "handleCloseOnEscapeKeypress", evt => {
if (evt?.key === 'Escape') {
this.forceClose();
}
});
_defineProperty(this, "forceClose", () => {
this.setState({
isOpen: false
}, this.handleOnChange);
});
_defineProperty(this, "cancelNextClickAway", () => {
this.cancelNext = true;
});
_defineProperty(this, "handleOnChange", () => this.props.onChange && this.props.onChange(this.state.isOpen));
}
componentDidMount() {
if (this.el) {
this.setState({
height: this.el.offsetHeight,
pageBottom: this.pageBottom()
});
}
}
componentDidUpdate(prevProps, prevState) {
const {
isOpen
} = this.state;
if (prevState.isOpen !== isOpen) {
if (this.state.isOpen) {
window.document.addEventListener('click', this.handleCloseClick);
if (this.props.closeOnEscapeKeypress) {
window.document.addEventListener('keyup', this.handleCloseOnEscapeKeypress);
}
} else {
window.document.removeEventListener('click', this.handleCloseClick);
window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
}
}
}
componentWillUnmount() {
window.document.removeEventListener('click', this.handleCloseClick);
window.document.removeEventListener('keyup', this.handleCloseOnEscapeKeypress);
}
render() {
const {
height,
isOpen,
pageBottom
} = this.state;
return this.props.children({
onOpen: this.handleOpenClick,
isOpen,
height,
pageBottom,
cancelNext: this.cancelNextClickAway,
clickAway: this.forceClose,
anchorRef: el => this.el = el
});
}
pageBottom() {
(0, _invariant.default)(this.el, 'pageBottom() requires that this.el not be null');
const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
return (0, _dom.pageHeight)() - bottomBound + window.scrollY;
}
}
exports.ClickAway = ClickAway;
_defineProperty(ClickAway, "defaultProps", {
shouldCancel: () => false,
closeOnEscapeKeypress: true
});