@bootstrap-styled/v4
Version:
twbs/bootstrap V4 UI Components made with bootstrap-styled. Work with css-in-js, react, styled-components, and Bootstrap Styled utilities.
393 lines (301 loc) • 18.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TooltipUnstyled = exports.defaultProps = exports.propTypes = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _lodash = _interopRequireDefault(require("lodash.omit"));
var _tools = require("@bootstrap-styled/utils/lib/tools");
var _mapToCssModules = _interopRequireDefault(require("map-to-css-modules"));
var _borderRadius = require("@bootstrap-styled/css-mixins/lib/border-radius");
var _TetherContent = _interopRequireDefault(require("../TetherContent"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _typeof(obj) { "@babel/helpers - typeof"; 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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
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 _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 DEFAULT_DELAYS = {
shape: 0,
hide: 250
};
var defaultTetherConfig = {
classPrefix: 'bs-tether',
classes: {
element: false,
enabled: 'show'
},
constraints: [{
to: 'scrollParent',
attachment: 'together none'
}, {
to: 'window',
attachment: 'together none'
}]
}; // propTypes need to be excluded of the tooltip class
// issue on : https://github.com/yannickcr/eslint-plugin-react/issues/203
var propTypes = {
/**
* @ignore
*/
className: _propTypes.default.string,
/** Tooltip placement. Please consult [Tether documentation](http://tether.io/) for more information. */
placement: _propTypes.default.oneOf(_tools.tetherAttachements),
/** Id name of the component triggering tooltip action. */
target: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
/** Toggles opened CSS display. */
isOpen: _propTypes.default.bool,
/** Toggles disabled CSS display. */
disabled: _propTypes.default.bool,
/** Tether object. Please consult [Tether documentation](http://tether.io/) for more information. */
tether: _propTypes.default.object,
/** Tether reference. Please consult [Tether documentation](http://tether.io/) for more information. */
tetherRef: _propTypes.default.func,
/** Call specified function when toggle action is triggered. */
toggle: _propTypes.default.func,
/** Toggles hide CSS display. */
autohide: _propTypes.default.bool,
/** Define delay before opening the tooltip. */
delay: _propTypes.default.oneOfType([_propTypes.default.shape({
show: _propTypes.default.number,
hide: _propTypes.default.number
}), _propTypes.default.number]),
/** Theme variables. */
theme: _propTypes.default.shape({
'$zindex-tooltip': _propTypes.default.string,
'$tooltip-font-family': _propTypes.default.string,
'$tooltip-font-size': _propTypes.default.string,
'$tooltip-font-weight': _propTypes.default.string,
'$tooltip-max-width': _propTypes.default.string,
'$tooltip-color': _propTypes.default.string,
'$tooltip-bg': _propTypes.default.string,
'$tooltip-border-radius': _propTypes.default.string,
'$tooltip-opacity': _propTypes.default.string,
'$tooltip-line-height': _propTypes.default.string,
'$tooltip-padding-y': _propTypes.default.string,
'$tooltip-padding-x': _propTypes.default.string,
'$tooltip-margin': _propTypes.default.string,
'$tooltip-arrow-width': _propTypes.default.string,
'$tooltip-arrow-height': _propTypes.default.string,
'$tooltip-arrow-color': _propTypes.default.string,
'$component-active-color': _propTypes.default.string
}),
/**
* Replace or remove a className from the component.
* See example <a href="https://www.npmjs.com/package/map-to-css-modules" target="_blank">here</a>.
*/
cssModule: _propTypes.default.object
};
exports.propTypes = propTypes;
var defaultProps = {
isOpen: false,
placement: 'bottom',
delay: DEFAULT_DELAYS,
autohide: true,
toggle: null,
theme: {
'$zindex-tooltip': '1070',
'$tooltip-font-family': '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
'$tooltip-font-size': '.875rem',
'$tooltip-font-weight': '400',
'$tooltip-max-width': '200px',
'$tooltip-color': '#fff',
'$tooltip-bg': '#000',
'$tooltip-line-height': '1.5',
'$tooltip-border-radius': '.25rem',
'$tooltip-opacity': '.9',
'$tooltip-padding-y': '.25rem',
'$tooltip-padding-x': '.5rem',
'$tooltip-margin': '0',
'$tooltip-arrow-width': '.8rem',
'$tooltip-arrow-height': '.4rem',
'$tooltip-arrow-color': '#000'
}
};
exports.defaultProps = defaultProps;
var TooltipUnstyled =
/*#__PURE__*/
function (_React$Component) {
_inherits(TooltipUnstyled, _React$Component);
function TooltipUnstyled() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, TooltipUnstyled);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(TooltipUnstyled)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "state", {
focus: false
});
_defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
_this.target = _this.getTarget();
_this.addTargetEvents();
});
_defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
_this.removeTargetEvents();
});
_defineProperty(_assertThisInitialized(_this), "onMouseOverTooltip", function () {
if (_this.hideTimeout) {
_this.clearHideTimeout();
}
_this.showTimeout = setTimeout(_this.show, _this.getDelay('show'));
});
_defineProperty(_assertThisInitialized(_this), "onMouseLeaveTooltip", function () {
if (_this.showTimeout) {
_this.clearShowTimeout();
}
_this.hideTimeout = setTimeout(_this.hide, _this.getDelay('hide'));
});
_defineProperty(_assertThisInitialized(_this), "onMouseOverTooltipContent", function () {
if (_this.props.autohide) {
return;
}
if (_this.hideTimeout) {
_this.clearHideTimeout();
}
});
_defineProperty(_assertThisInitialized(_this), "onMouseLeaveTooltipContent", function () {
if (_this.props.autohide) {
return;
}
if (_this.showTimeout) {
_this.clearShowTimeout();
}
_this.hideTimeout = setTimeout(_this.hide, _this.getDelay('hide'));
});
_defineProperty(_assertThisInitialized(_this), "getDelay", function (key) {
var delay = _this.props.delay;
if (_typeof(delay) === 'object') {
return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key]; // eslint-disable-line no-restricted-globals
}
return delay;
});
_defineProperty(_assertThisInitialized(_this), "getTarget", function () {
var target = _this.props.target;
if (_typeof(target) === 'object') {
return target;
}
return document.getElementById(target);
});
_defineProperty(_assertThisInitialized(_this), "getTetherConfig", function () {
var attachments = (0, _tools.getTetherAttachments)(_this.props.placement);
return _objectSpread({}, defaultTetherConfig, {}, attachments, {
target: _this.getTarget
}, _this.props.tether);
});
_defineProperty(_assertThisInitialized(_this), "show", function () {
if (!_this.props.isOpen) {
_this.clearShowTimeout();
_this.toggle();
}
});
_defineProperty(_assertThisInitialized(_this), "hide", function () {
if (_this.props.isOpen) {
_this.clearHideTimeout();
_this.toggle();
}
});
_defineProperty(_assertThisInitialized(_this), "clearShowTimeout", function () {
clearTimeout(_this.showTimeout);
_this.showTimeout = undefined;
});
_defineProperty(_assertThisInitialized(_this), "clearHideTimeout", function () {
clearTimeout(_this.hideTimeout);
_this.hideTimeout = undefined;
});
_defineProperty(_assertThisInitialized(_this), "handleDocumentClick", function (e) {
if (e.target === _this.target || _this.target.contains(e.target)) {
if (_this.hideTimeout) {
_this.clearHideTimeout();
}
if (!_this.props.isOpen) {
_this.toggle();
}
}
});
_defineProperty(_assertThisInitialized(_this), "addTargetEvents", function () {
if (_this.target) {
_this.target.addEventListener('mouseover', _this.onMouseOverTooltip, true);
_this.target.addEventListener('mouseout', _this.onMouseLeaveTooltip, true);
document.addEventListener('click', _this.handleDocumentClick, true);
}
});
_defineProperty(_assertThisInitialized(_this), "removeTargetEvents", function () {
if (_this.target) {
_this.target.removeEventListener('mouseover', _this.onMouseOverTooltip, true);
_this.target.removeEventListener('mouseout', _this.onMouseLeaveTooltip, true);
document.removeEventListener('click', _this.handleDocumentClick, true);
}
});
_defineProperty(_assertThisInitialized(_this), "toggle", function (e) {
if (_this.props.disabled) {
return e && e.preventDefault();
}
if (_this.props.toggle) {
return _this.props.toggle();
}
return null;
});
_defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
_this.setState({
focus: true
});
});
return _this;
}
_createClass(TooltipUnstyled, [{
key: "render",
value: function render() {
if (!this.props.isOpen) {
return null;
}
var attributes = (0, _lodash.default)(this.props, Object.keys(propTypes));
var classes = (0, _mapToCssModules.default)((0, _classnames.default)('tooltip', this.props.className), this.props.cssModule);
var tetherConfig = this.getTetherConfig();
var optional = {};
if (this.state.focus === true) {
optional.onFocus = this.handleFocus;
}
return _react.default.createElement(_TetherContent.default, {
className: classes,
tether: tetherConfig,
tetherRef: this.props.tetherRef,
isOpen: this.props.isOpen,
toggle: this.toggle
}, _react.default.createElement("div", _extends({}, attributes, {
className: "tooltip-inner",
onMouseOver: this.onMouseOverTooltipContent,
onMouseLeave: this.onMouseLeaveTooltipContent,
onFocus: this.handleFocus,
tabIndex: "-1"
}, optional)));
}
}]);
return TooltipUnstyled;
}(_react.default.Component);
exports.TooltipUnstyled = TooltipUnstyled;
_defineProperty(TooltipUnstyled, "propTypes", propTypes);
_defineProperty(TooltipUnstyled, "defaultProps", defaultProps);
var Tooltip = (0, _styledComponents.default)(TooltipUnstyled).withConfig({
displayName: "Tooltip",
componentId: "l83az1-0"
})(["", ""], function (props) {
return "\n &.tooltip {\n position: absolute;\n z-index: ".concat(props.theme['$zindex-tooltip'], ";\n display: block;\n margin: ").concat(props.theme['$tooltip-margin'], ";\n font-family: ").concat(props.theme['$tooltip-font-family'], ";\n font-size: ").concat(props.theme['$tooltip-font-size'], ";\n font-style: normal;\n font-weight: ").concat(props.theme['$tooltip-font-weight'], ";\n letter-spacing: normal;\n line-break: auto;\n line-height: ").concat(props.theme['$tooltip-line-height'], ";\n text-align: left;\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n white-space: normal;\n word-break: normal;\n word-spacing: normal;\n // Allow breaking very long words so they don't overflow the tooltip's bounds\n word-wrap: break-word;\n opacity: 0;\n }\n \n &.tooltip.show {\n opacity: ").concat(props.theme['$tooltip-opacity'], ";\n }\n \n &.tooltip.bs-tether-element-attached-bottom,\n &.tooltip.tooltip-top {\n padding: 5px 0;\n margin-top: -3px;\n }\n \n &.tooltip.bs-tether-element-attached-bottom .tooltip-inner:before,\n &.tooltip.tooltip-top .tooltip-inner:before {\n bottom: 0;\n left: 50%;\n margin-left: -5px;\n content: \"\";\n border-width: 5px 5px 0;\n border-top-color: ").concat(props.theme['$tooltip-arrow-color'], ";\n }\n \n &.tooltip.bs-tether-element-attached-left,\n &.tooltip.tooltip-right {\n padding: 0 5px;\n margin-left: 3px;\n }\n \n &.tooltip.bs-tether-element-attached-left .tooltip-inner:before,\n &.tooltip.tooltip-right .tooltip-inner:before {\n top: 50%;\n left: 0;\n margin-top: -5px;\n content: \"\";\n border-width: 5px 5px 5px 0;\n border-right-color: ").concat(props.theme['$tooltip-arrow-color'], ";\n }\n \n &.tooltip.bs-tether-element-attached-top,\n &.tooltip.tooltip-bottom {\n padding: 5px 0;\n margin-top: 3px;\n }\n \n &.tooltip.bs-tether-element-attached-top .tooltip-inner:before,\n &.tooltip.tooltip-bottom .tooltip-inner:before {\n top: 0;\n left: 50%;\n margin-left: -5px;\n content: \"\";\n border-width: 0 5px 5px;\n border-bottom-color: ").concat(props.theme['$tooltip-arrow-color'], ";\n }\n \n &.tooltip.bs-tether-element-attached-right,\n &.tooltip.tooltip-left {\n padding: 0 5px;\n margin-left: -3px;\n }\n \n &.tooltip.bs-tether-element-attached-right .tooltip-inner:before,\n &.tooltip.tooltip-left .tooltip-inner:before {\n top: 50%;\n right: 0;\n margin-top: -5px;\n content: \"\";\n border-width: 5px 0 5px 5px;\n border-left-color: ").concat(props.theme['$tooltip-arrow-color'], ";\n }\n \n // Wrapper for the tooltip content\n & .tooltip-inner {\n max-width: ").concat(props.theme['$tooltip-max-width'], ";\n padding: ").concat(props.theme['$tooltip-padding-y'], " ").concat(props.theme['$tooltip-padding-x'], ";\n color: ").concat(props.theme['$tooltip-color'], ";\n text-align: center;\n background-color: ").concat(props.theme['$tooltip-bg'], ";\n ").concat((0, _borderRadius.borderRadius)(props.theme['$enable-rounded'], props.theme['$tooltip-border-radius']), ";\n }\n \n & .tooltip-inner:before {\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n }\n ");
});
Tooltip.defaultProps = defaultProps;
Tooltip.propTypes = propTypes;
/** @component */
var _default = Tooltip;
exports.default = _default;