calcite-react
Version:
Calcite components for React
205 lines (158 loc) • 9.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactPopper = require("react-popper");
var _styledComponents = require("styled-components");
var _helpers = require("../utils/helpers");
var _CalciteThemeProvider = require("../CalciteThemeProvider");
var _TooltipStyled = require("./Tooltip-styled");
var _TooltipPopper = _interopRequireDefault(require("./TooltipPopper"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
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; }
var Tooltip =
/*#__PURE__*/
function (_Component) {
_inherits(Tooltip, _Component);
function Tooltip(props) {
var _this;
_classCallCheck(this, Tooltip);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Tooltip).call(this, props));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleReferenceEnter", function () {
_this.setState({
open: true
});
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleReferenceLeave", function () {
_this.setState({
open: false
});
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_getPopper", function (popper, appendToBody) {
if (appendToBody) {
return _reactDom.default.createPortal(popper, document.body);
}
return popper;
});
_this.state = {
open: false
};
return _this;
}
_createClass(Tooltip, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
children = _this$props.children,
appendToBody = _this$props.appendToBody,
positionFixed = _this$props.positionFixed,
targetWrapperStyle = _this$props.targetWrapperStyle,
enterDelay = _this$props.enterDelay,
placement = _this$props.placement,
transitionDuration = _this$props.transitionDuration,
title = _this$props.title,
arrowStyle = _this$props.arrowStyle,
popperModifiers = _this$props.popperModifiers;
var isOpen = this.props.open !== undefined ? this.props.open : this.state.open;
return _react.default.createElement(_styledComponents.ThemeContext.Consumer, null, function () {
var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _CalciteThemeProvider.CalciteTheme;
return _react.default.createElement(_reactPopper.Manager, null, _react.default.createElement(_reactPopper.Reference, {
style: {
display: 'inline-block'
}
}, function (_ref) {
var ref = _ref.ref;
return _react.default.createElement(_TooltipStyled.StyledTargetWrapper, {
ref: ref,
style: targetWrapperStyle,
onMouseEnter: _this2._handleReferenceEnter,
onMouseLeave: _this2._handleReferenceLeave
}, children);
}), _react.default.createElement(_Transition.default, {
in: isOpen,
timeout: enterDelay !== undefined ? enterDelay : theme.tooltipEnterDelay
}, function (state) {
return isOpen ? _this2._getPopper(_react.default.createElement(_reactPopper.Popper, {
positionFixed: positionFixed,
placement: (0, _helpers.rtlPlacement)(placement),
modifiers: _objectSpread({
preventOverflow: {
boundariesElement: positionFixed || appendToBody ? 'window' : 'scrollParent'
}
}, popperModifiers)
}, function (_ref2) {
var ref = _ref2.ref,
style = _ref2.style,
placement = _ref2.placement,
arrowProps = _ref2.arrowProps,
scheduleUpdate = _ref2.scheduleUpdate;
return _react.default.createElement(_TooltipPopper.default, {
innerRef: ref,
style: _objectSpread({}, style, _this2.props.style),
transitionState: state,
transitionDuration: transitionDuration,
"data-placement": placement,
scheduleUpdate: scheduleUpdate
}, title, _react.default.createElement(_TooltipStyled.StyledTooltipArrow, {
ref: arrowProps.ref,
"data-placement": placement,
style: _objectSpread({}, arrowProps.style, arrowStyle)
}));
}), appendToBody) : null;
}));
});
}
}]);
return Tooltip;
}(_react.Component);
Tooltip.propTypes = {
/** Nodes to be used as the target of the Tooltip. */
children: _propTypes.default.node,
/** Nodes to be used as Tooltip content. */
title: _propTypes.default.node,
/** Boolean to programatically control the visibility of the Tooltip */
open: _propTypes.default.bool,
/** Placement of the popover in relation to the target. The Tooltip will override the placement if there is no room.
If this property is not set, the Tooltip will position itself wherever there is room. */
placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left', 'top-start', 'right-start', 'bottom-start', 'left-start', 'top-end', 'right-end', 'bottom-end', 'left-end']),
/** Uses `position: fixed` on the Tooltip, allowing it to show up outside of containers that have `overflow: hidden`. */
positionFixed: _propTypes.default.bool,
/** Duration of animation in milliseconds. */
transitionDuration: _propTypes.default.number,
/** Delay (in milliseconds) before the Tooltip will show. Prop overrides the value specified in the theme (0ms). */
enterDelay: _propTypes.default.number,
/** Apply styles to the Tooltip element. */
style: _propTypes.default.object,
/** Apply styles to the Tooltip arrow element. */
arrowStyle: _propTypes.default.object,
/** Apply styles to the Tooltip target wrapper element. */
targetWrapperStyle: _propTypes.default.object,
/** Modifiers to be passed to the Popper element */
popperModifiers: _propTypes.default.object
};
Tooltip.defaultProps = {
title: '',
placement: undefined,
transitionDuration: 200,
enterDelay: undefined
};
Tooltip.displayName = 'Tooltip';
var _default = Tooltip;
exports.default = _default;