wix-style-react
Version:
310 lines (260 loc) • 11.4 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import debounce from 'lodash/debounce';
import shallowEqual from 'shallowequal';
import { st, classes, vars } from './Ellipsis.st.css';
import Tooltip from '../../Tooltip';
import { ZIndex } from '../../ZIndex';
import { TooltipCommonProps } from '../PropTypes/TooltipCommon';
var TextComponent = /*#__PURE__*/function (_React$PureComponent) {
_inherits(TextComponent, _React$PureComponent);
var _super = _createSuper(TextComponent);
function TextComponent() {
var _this;
_classCallCheck(this, TextComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "_getEllipsisClasses", function () {
var _this$props = _this.props,
ellipsis = _this$props.ellipsis,
maxLines = _this$props.maxLines;
var ellipsisLines = maxLines > 1 ? 'multiline' : 'singleLine';
return function (className) {
return ellipsis ? st(classes.text, {
ellipsisLines: ellipsisLines
}, className) : className;
};
});
return _this;
}
_createClass(TextComponent, [{
key: "componentDidMount",
value: function componentDidMount() {
if (!this.props.textRendered) {
this.props.onTextRendered();
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (!this.props.textRendered) {
this.props.onTextRendered();
}
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
render = _this$props2.render,
maxLines = _this$props2.maxLines,
textElementRef = _this$props2.textElementRef;
return render({
ref: textElementRef,
ellipsisClasses: this._getEllipsisClasses(),
ellipsisInlineStyle: _defineProperty({}, vars.maxLines, maxLines)
});
}
}]);
return TextComponent;
}(React.PureComponent);
var Ellipsis = /*#__PURE__*/function (_React$PureComponent2) {
_inherits(Ellipsis, _React$PureComponent2);
var _super2 = _createSuper(Ellipsis);
function Ellipsis(props) {
var _this2;
_classCallCheck(this, Ellipsis);
_this2 = _super2.call(this, props);
_defineProperty(_assertThisInitialized(_this2), "_onTextRendered", function () {
var _this2$state = _this2.state,
isActive = _this2$state.isActive,
textContent = _this2$state.textContent;
var newState = {
textRendered: true
};
var newTextContent = _this2._getTextContent();
if (newTextContent !== textContent) {
newState.textContent = newTextContent;
}
var shouldBeActive = _this2._checkShouldBeActive();
if (shouldBeActive !== isActive) {
newState.isActive = shouldBeActive;
}
_this2.setState(newState);
});
_defineProperty(_assertThisInitialized(_this2), "_updateIsActive", function () {
var isActive = _this2.state.isActive;
var shouldBeActive = _this2._checkShouldBeActive();
if (shouldBeActive !== isActive) {
_this2.setState({
isActive: shouldBeActive
});
}
});
_defineProperty(_assertThisInitialized(_this2), "_getTextContent", function () {
var textElement = _this2.ref.current;
return textElement && textElement.textContent;
});
_defineProperty(_assertThisInitialized(_this2), "_checkShouldBeActive", function () {
return _this2._isOverflowingHorizontally() || _this2._isOverflowingVertically();
});
_defineProperty(_assertThisInitialized(_this2), "_isOverflowingHorizontally", function () {
var textElement = _this2.ref.current;
var ellipsis = _this2.props.ellipsis;
return ellipsis && textElement && (textElement.scrollWidth - textElement.parentNode.offsetWidth > 1 || textElement.offsetWidth < textElement.scrollWidth);
});
_defineProperty(_assertThisInitialized(_this2), "_isOverflowingVertically", function () {
var textElement = _this2.ref.current;
var _this2$props = _this2.props,
ellipsis = _this2$props.ellipsis,
maxLines = _this2$props.maxLines;
return maxLines > 1 && ellipsis && textElement && (textElement.scrollHeight - textElement.parentNode.offsetHeight > 1 || textElement.offsetHeight < textElement.scrollHeight);
});
_defineProperty(_assertThisInitialized(_this2), "_debouncedUpdate", debounce(_this2._updateIsActive, 100));
_this2.state = {
isActive: false,
textContent: null,
textRendered: false
};
_this2.ref = /*#__PURE__*/React.createRef();
return _this2;
}
/**
* Once text component has rendered,
* Update text content and tooltip active state
* @private
*/
_createClass(Ellipsis, [{
key: "componentDidMount",
value: function componentDidMount() {
window.addEventListener('resize', this._debouncedUpdate);
}
}, {
key: "_renderText",
value: function _renderText() {
var _this$props3 = this.props,
render = _this$props3.render,
ellipsis = _this$props3.ellipsis,
maxLines = _this$props3.maxLines;
var textRendered = this.state.textRendered;
return /*#__PURE__*/React.createElement(TextComponent, {
render: render,
ellipsis: ellipsis,
maxLines: maxLines,
textRendered: textRendered,
onTextRendered: this._onTextRendered,
textElementRef: this.ref
});
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
appendTo = _this$props4.appendTo,
wrapperClassName = _this$props4.wrapperClassName,
disabled = _this$props4.disabled,
enterDelay = _this$props4.enterDelay,
exitDelay = _this$props4.exitDelay,
fixed = _this$props4.fixed,
flip = _this$props4.flip,
maxWidth = _this$props4.maxWidth,
moveArrowTo = _this$props4.moveArrowTo,
onHide = _this$props4.onHide,
onShow = _this$props4.onShow,
placement = _this$props4.placement,
showTooltip = _this$props4.showTooltip,
textAlign = _this$props4.textAlign,
zIndex = _this$props4.zIndex,
size = _this$props4.size;
var _this$state = this.state,
isActive = _this$state.isActive,
textContent = _this$state.textContent;
return showTooltip && isActive ? /*#__PURE__*/React.createElement(Tooltip, {
className: st(classes.tooltip, wrapperClassName),
content: textContent,
appendTo: appendTo,
disabled: disabled,
enterDelay: enterDelay,
exitDelay: exitDelay,
fixed: fixed,
flip: flip,
maxWidth: maxWidth,
moveArrowTo: moveArrowTo,
onHide: onHide,
onShow: onShow,
placement: placement,
textAlign: textAlign,
zIndex: zIndex,
size: size
}, this._renderText()) : this._renderText();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var textRendered = this.state.textRendered;
if (textRendered && !shallowEqual(prevProps, this.props)) {
this._updateIsActive();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._debouncedUpdate.cancel();
window.removeEventListener('resize', this._debouncedUpdate);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
var render = props.render,
ellipsis = props.ellipsis,
maxLines = props.maxLines;
var textPropsChanged = state.prevRender !== render || state.prevEllipsis !== ellipsis || state.prevMaxLines !== maxLines;
if (!textPropsChanged) {
return null;
} // Text changed, initialize textRendered state
return {
textRendered: false,
prevRender: render,
prevEllipsis: ellipsis,
prevMaxLines: maxLines
};
}
}]);
return Ellipsis;
}(React.PureComponent);
_defineProperty(Ellipsis, "propTypes", _objectSpread({
/** When true, text that is longer than it's container will be truncated to a single line followed by ellipsis. Otherwise the text will break into several lines. */
ellipsis: PropTypes.bool,
/** True by default, set it to false in order to show ellipsis without a tooltip. */
showTooltip: PropTypes.bool,
/** A className to be applied to the Ellipsis wrapper. */
wrapperClassName: PropTypes.string,
/** The render function, use it to render a text you want to truncate with ellipsis. */
render: PropTypes.func,
/** maxLines truncates text at a specific number of lines. */
maxLines: PropTypes.number
}, TooltipCommonProps));
_defineProperty(Ellipsis, "defaultProps", {
ellipsis: false,
appendTo: 'window',
flip: false,
fixed: false,
placement: 'top',
zIndex: ZIndex('Tooltip'),
enterDelay: 0,
exitDelay: 0,
showTooltip: true
});
export default Ellipsis;