@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
89 lines (88 loc) • 3.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "EllipsisText", {
enumerable: true,
get: function() {
return EllipsisText;
}
});
var _define_property = require("@swc/helpers/_/_define_property");
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _react = require("react");
var _clsx = /*#__PURE__*/ _interop_require_default._(require("clsx"));
var _EllipsisTextmodulecss = /*#__PURE__*/ _interop_require_default._(require("./EllipsisText.module.css"));
var defaultProps = {
tooltipProps: {}
};
var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
var _useProps = (0, _core.useProps)('EllipsisText', defaultProps, props), className = _useProps.className, children = _useProps.children, style = _useProps.style, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, variant = _useProps.variant, lineClamp = _useProps.lineClamp, tooltipProps = _useProps.tooltipProps, others = _object_without_properties._(_useProps, [
"className",
"children",
"style",
"classNames",
"styles",
"unstyled",
"variant",
"lineClamp",
"tooltipProps"
]);
var getStyles = (0, _core.useStyles)({
name: 'EllipsisText',
classes: _EllipsisTextmodulecss.default,
props: props,
className: className,
style: style,
classNames: classNames,
styles: styles,
unstyled: unstyled
});
var _useState = _sliced_to_array._((0, _react.useState)(false), 2), showTooltip = _useState[0], setShowTooltip = _useState[1];
var textRef = (0, _react.useRef)();
var _getStyles = getStyles('root'), rootClass = _getStyles.className, rootStyles = _object_without_properties._(_getStyles, [
"className"
]);
var _getStyles1 = getStyles('text'), textClass = _getStyles1.className, textStyles = _object_without_properties._(_getStyles1, [
"className"
]);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({
ref: ref,
onMouseEnter: function() {
if (textRef.current && isOverflowing(textRef.current)) {
setShowTooltip(true);
}
},
onMouseLeave: function() {
return setShowTooltip(false);
},
className: (0, _clsx.default)(rootClass, _define_property._({}, _EllipsisTextmodulecss.default.noWrap, !lineClamp))
}, rootStyles, others), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, _object_spread_props._(_object_spread._({
label: children,
opened: showTooltip
}, tooltipProps, getStyles('tooltip')), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, _object_spread_props._(_object_spread._({
span: true,
inherit: true,
variant: variant,
ref: textRef,
className: (0, _clsx.default)(textClass, _define_property._({}, _EllipsisTextmodulecss.default.ellipsis, !lineClamp))
}, !!lineClamp && {
lineClamp: lineClamp
}, textStyles), {
children: children
}))
}))
}));
});
var isOverflowing = function(h) {
return h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;
};
//# sourceMappingURL=EllipsisText.js.map