wix-style-react
Version:
140 lines (105 loc) • 5.79 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "tooltipProps"];
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; }
import React from 'react';
import RawText from './RawText';
import PropTypes from 'prop-types';
import { st, classes } from './Text.st.css';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
var TextWithEllipsis = function TextWithEllipsis(_ref) {
var className = _ref.className,
tooltipProps = _ref.tooltipProps,
props = _objectWithoutProperties(_ref, _excluded);
var _extractEllipsisProps = extractEllipsisProps(props),
ellipsisProps = _extractEllipsisProps.ellipsisProps,
componentProps = _extractEllipsisProps.componentProps;
return /*#__PURE__*/React.createElement(Ellipsis, _extends({}, ellipsisProps, tooltipProps, {
wrapperClassName: st(classes.root, {
size: props.size,
weight: props.weight,
listStyle: props.listStyle
}),
render: function render(_ref2) {
var ref = _ref2.ref,
ellipsisClasses = _ref2.ellipsisClasses,
ellipsisInlineStyle = _ref2.ellipsisInlineStyle;
return /*#__PURE__*/React.createElement(RawText, _extends({}, componentProps, {
ref: ref,
className: ellipsisClasses(className),
style: ellipsisInlineStyle
}));
}
}));
};
TextWithEllipsis.displayName = 'Text';
TextWithEllipsis.propTypes = {
/*
* Text props
*/
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Defines a tag name that text should be rendered inside of (e.g., div, a, p). */
tagName: PropTypes.string,
/** Controls the font size of the text. */
size: PropTypes.oneOf(['tiny', 'small', 'medium']),
/** Renders any kind of content within a heading. Usually it’s a text string. */
children: PropTypes.any,
/** Sets text type to secondary. Affects font color only. */
secondary: PropTypes.bool,
/** Controls the skin of the text. */
skin: PropTypes.oneOf(['standard', 'success', 'error', 'premium', 'disabled', 'primary']),
/** Sets list items style. */
listStyle: PropTypes.oneOf(['checkmark', 'circle']),
/** Inverts text color so it can be used on dark backgrounds. */
light: PropTypes.bool,
/** Controls the font weight of the text. */
weight: PropTypes.oneOf(['thin', 'normal', 'bold']),
/*
* Ellipsis props
*/
/** Truncates text that is longer than its parent container and displays ellipsis at the end of the last line. */
ellipsis: PropTypes.bool,
/** Specifies whether to show a tooltip for ellipsis. */
showTooltip: PropTypes.bool,
/** Specifies tooltip content z index. */
zIndex: PropTypes.number,
/** Defines tooltip placement in relation to target element. */
placement: PropTypes.string,
/** Disables tooltip element trigger. If not specified, disabled prop value of the children element will be used. */
disabled: PropTypes.bool,
/** Defines a tooltip content calculation relation to a dom element. */
appendTo: PropTypes.oneOfType([PropTypes.oneOf(['window', 'scrollParent', 'viewport', 'parent']), PropTypes.element, PropTypes.func]),
/** Flips tooltip placement when it starts to overlap the target element. */
flip: PropTypes.bool,
/** Keeps tooltip at its original placement even when it's being positioned outside the boundary. */
fixed: PropTypes.bool,
/** Specifies time to wait before showing the tooltip in milliseconds. */
enterDelay: PropTypes.number,
/** Specifies time to wait before hiding the tooltip in milliseconds. */
exitDelay: PropTypes.number,
/** Specifies tooltip width in pixels. */
maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Defines a callback function which is called every time tooltip is shown. */
onShow: PropTypes.func,
/** Defines a callback function which is called every time tooltip is hidden. */
onHide: PropTypes.func,
/** Moves tooltip content relative to the parent on X or Y axis. */
moveBy: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number
}),
/** Moves tooltip arrow by a specified amount. */
moveArrowTo: PropTypes.number,
/** Controls tooltip content alignment on X axis. */
textAlign: PropTypes.oneOf(['start', 'center']),
/** Allows to pass all common tooltip props. Check <Tooltip/> for a full API. */
tooltipProps: PropTypes.shape(TooltipCommonProps)
};
TextWithEllipsis.defaultProps = _objectSpread(_objectSpread({}, RawText.defaultProps), Ellipsis.defaultProps);
export default TextWithEllipsis;