baseui
Version:
A React Component library implementing the Base design language
209 lines (207 loc) • 6.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _constants = require("./constants");
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 _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 defaultStateReducer = (type, nextState) => nextState;
class StatefulContainer extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "state", {
isOpen: false,
...this.props.initialState
});
_defineProperty(this, "onBlur", e => {
if (this.props.onBlur) {
this.props.onBlur(e);
}
if (this.props.focusLock || this.props.autoFocus) {
return;
}
this.close();
});
_defineProperty(this, "onClick", e => {
if (this.props.onClick) {
this.props.onClick(e);
}
if (this.state.isOpen) {
this.close();
} else {
this.open();
}
});
_defineProperty(this, "onClickOutside", () => {
this.close();
});
_defineProperty(this, "onEsc", () => {
this.close();
});
_defineProperty(this, "onFocus", e => {
if (this.props.onFocus) {
this.props.onFocus(e);
}
if ((0, _focusVisible.isFocusVisible)(e)) {
this.open();
}
});
_defineProperty(this, "onMouseEnter", e => {
if (this.props.onMouseEnter) {
this.props.onMouseEnter(e);
}
this.open();
});
_defineProperty(this, "onMouseLeave", e => {
if (this.props.onMouseLeave) {
this.props.onMouseLeave(e);
}
this.close();
});
_defineProperty(this, "onContentClose", () => {
this.close();
});
/**
* If user passed a content render prop, we want to give them a
* callback to close the Popover. This is useful in any case where
* a dev wants to manually close the popover based on some action.
*
* One simple example is a Popover with a "Dismiss" button in it:
* <StatefulPopover content={({close}) => <button onClick={close}>Dismiss</button>}>
* Click me
* </StatefulPopover>
*/
_defineProperty(this, "renderContent", () => {
const {
content
} = this.props;
if (typeof content === 'function') {
return content({
close: this.onContentClose
});
}
return content;
});
}
open() {
this.internalSetState(_constants.STATE_CHANGE_TYPE.open, {
isOpen: true
});
if (this.props.onOpen) {
this.props.onOpen();
}
}
close() {
this.internalSetState(_constants.STATE_CHANGE_TYPE.close, {
isOpen: false
});
if (this.props.onClose) {
this.props.onClose();
}
}
internalSetState(type, changes) {
const {
stateReducer
} = this.props;
if (typeof stateReducer !== 'function') {
this.setState(changes);
return;
}
this.setState(prevState => stateReducer(type, changes, prevState));
}
render() {
const {
accessibilityType,
autoFocus,
animateOutTime,
dismissOnClickOutside,
dismissOnEsc,
focusLock,
ignoreBoundary,
mountNode,
onBlur,
onClick,
onFocus,
onMouseEnter,
onMouseLeave,
onMouseEnterDelay,
onMouseLeaveDelay,
overrides,
placement,
popperOptions,
renderAll,
returnFocus,
showArrow,
triggerType,
popoverMargin,
focusOptions
} = this.props;
const popoverProps = {
accessibilityType,
animateOutTime,
autoFocus,
content: this.renderContent,
focusLock,
ignoreBoundary,
isOpen: this.state.isOpen,
mountNode,
onBlur,
onClick,
onFocus,
onMouseEnter,
onMouseLeave,
onMouseEnterDelay,
onMouseLeaveDelay,
overrides,
placement,
popperOptions,
renderAll,
returnFocus,
showArrow,
triggerType,
popoverMargin,
focusOptions
};
if (dismissOnClickOutside) {
popoverProps.onClickOutside = this.onClickOutside;
}
if (dismissOnEsc) {
popoverProps.onEsc = this.onEsc;
}
if (triggerType === _constants.TRIGGER_TYPE.hover) {
popoverProps.onBlur = this.onBlur;
popoverProps.onFocus = this.onFocus;
popoverProps.onMouseEnter = this.onMouseEnter;
popoverProps.onMouseLeave = this.onMouseLeave;
} else {
popoverProps.onClick = this.onClick;
}
return this.props.children(popoverProps);
}
}
_defineProperty(StatefulContainer, "defaultProps", {
accessibilityType: _constants.ACCESSIBILITY_TYPE.menu,
ignoreBoundary: false,
overrides: {},
onMouseEnterDelay: 200,
onMouseLeaveDelay: 200,
placement: _constants.PLACEMENT.auto,
popperOptions: {},
showArrow: false,
triggerType: _constants.TRIGGER_TYPE.click,
dismissOnClickOutside: true,
dismissOnEsc: true,
stateReducer: defaultStateReducer,
popoverMargin: _constants.POPOVER_MARGIN
});
var _default = exports.default = StatefulContainer;