@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
260 lines (258 loc) • 11.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Tooltip", {
enumerable: true,
get: function get() {
return _Tooltip.Tooltip;
}
});
Object.defineProperty(exports, "TooltipBase", {
enumerable: true,
get: function get() {
return _Tooltip.TooltipBase;
}
});
exports["default"] = exports.TooltipDecorator = void 0;
Object.defineProperty(exports, "useTooltip", {
enumerable: true,
get: function get() {
return _useTooltip2.useTooltip;
}
});
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _I18nDecorator = require("@enact/i18n/I18nDecorator");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Tooltip = require("./Tooltip");
var _useTooltip2 = require("./useTooltip");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
* Sandstone styled tooltip components.
*
* @module sandstone/TooltipDecorator
* @exports Tooltip
* @exports TooltipBase
* @exports TooltipDecorator
*/ /**
* Default config for {@link sandstone/TooltipDecorator.TooltipDecorator|TooltipDecorator}
*
* @memberof sandstone/TooltipDecorator.TooltipDecorator
* @hocconfig
*/
var defaultConfig = {
/**
* The boundary around the screen which the tooltip should never cross, typically involving
* flipping to an alternate orientation or adjusting its offset to remain on screen.
* The default of 48 is derived from a standard 24px screen-keepout size plus the standard
* Spotlight-outset (24px) margin/padding value which keeps elements and text aligned inside a
* {@link sandstone/Panels.Panel|Panel}. Note: This value will be scaled according to the
* resolution.
*
* @type {Number}
* @default 48
* @memberof sandstone/TooltipDecorator.TooltipDecorator.defaultConfig
*/
screenEdgeKeepout: _useTooltip2.defaultScreenEdgeKeepout,
/**
* The name of the property which will receive the tooltip node.
*
* By default, `TooltipDecorator` will add a new child to the wrapped component, following any
* other children passed in. If a component needs to, it can specify another property to receive
* the tooltip and the `children` property will not be modified.
*
* @type {String}
* @default 'children'
* @memberof sandstone/TooltipDecorator.TooltipDecorator.defaultConfig
*/
tooltipDestinationProp: 'children'
};
/**
* A higher-order component which positions {@link sandstone/TooltipDecorator.Tooltip|Tooltip} in
* relation to the wrapped component.
*
* The tooltip is automatically displayed when the decorated component is focused after a set
* period of time.
*
* The tooltip is positioned around the decorator where there is available window space.
*
* Note that the direction of tooltip will be flipped horizontally in RTL locales.
*
* @class TooltipDecorator
* @memberof sandstone/TooltipDecorator
* @hoc
* @public
*/
var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var screenEdgeKeepout = config.screenEdgeKeepout,
tooltipDestinationProp = config.tooltipDestinationProp;
var Decorator = function Decorator(props) {
var _useTooltip = (0, _useTooltip2.useTooltip)(_objectSpread({
screenEdgeKeepout: screenEdgeKeepout
}, props)),
tooltip = _useTooltip.tooltip,
handlers = _useTooltip.handlers,
restProps = _useTooltip.restProps;
if (tooltip) {
if (tooltipDestinationProp === 'children') {
restProps.children = [props.children, tooltip];
} else {
restProps[tooltipDestinationProp] = tooltip;
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, restProps), handlers));
};
Decorator.displayName = 'TooltipDecorator';
Decorator.propTypes = /** @lends sandstone/TooltipDecorator.TooltipDecorator.prototype */{
/**
* Disables the component but does not affect tooltip operation.
*
* @type {Boolean}
* @default false
* @public
*/
disabled: _propTypes["default"].bool,
/**
* Indicates the tooltip text direction is right-to-left.
*
* @type {Boolean}
* @private
*/
rtl: _propTypes["default"].bool,
/**
* Time to wait (in milliseconds) before showing tooltip on hover.
*
* @type {Number}
* @default 500
* @public
*/
tooltipDelay: _propTypes["default"].number,
/**
* Allows the tooltip to marquee.
*
* Specifying a {@link sandstone/TooltipDecorator.TooltipDecorator.tooltipWidth|tooltipWidth}
* restrects the marquee to that size.
*
* @type {Boolean}
* @public
*/
tooltipMarquee: _propTypes["default"].bool,
/**
* Position of the tooltip with respect to the wrapped component.
*
* | *Value* | *Tooltip Direction* |
* |---|---|
* | `'above'` | Above component, flowing to the right |
* | `'above center'` | Above component, centered |
* | `'above left'` | Above component, flowing to the left |
* | `'above right'` | Above component, flowing to the right |
* | `'below'` | Below component, flowing to the right |
* | `'below center'` | Below component, centered |
* | `'below left'` | Below component, flowing to the left |
* | `'below right'` | Below component, flowing to the right |
* | `'left bottom'` | Left of the component, contents at the bottom |
* | `'left middle'` | Left of the component, contents middle aligned |
* | `'left top'` | Left of the component, contents at the top |
* | `'right bottom'` | Right of the component, contents at the bottom |
* | `'right middle'` | Right of the component, contents middle aligned |
* | `'right top'` | Right of the component, contents at the top |
*
* `TooltipDecorator` attempts to choose the best direction to meet layout and language
* requirements. Left and right directions will reverse for RTL languages. Additionally,
* the tooltip will reverse direction if it will prevent overflowing off the viewport
*
* For `type="balloon"`, the default is `"top right"`
* For `type="transparent"`, the default is `"bottom center"`
*
* @type {('above'|'above center'|'above left'|'above right'|'below'|
* 'below center'|'below left'|'below right'|'left bottom'|'left middle'|'left top'|
* 'right bottom'|'right middle'|'right top')}
* @public
*/
tooltipPosition: _propTypes["default"].oneOf(['above', 'above center', 'above left', 'above right', 'below', 'below center', 'below left', 'below right', 'left bottom', 'left middle', 'left top', 'right bottom', 'right middle', 'right top']),
/**
* Properties to be passed to tooltip component.
*
* @type {Object}
* @public
*/
tooltipProps: _propTypes["default"].object,
/**
* Positions the tooltip relative to its container.
*
* Determines whether your tooltip should position itself relative to its container or
* relative to the screen (absolute positioning on the floating layer). When setting to
* `true`, to enable relative positioning, it may be important to specify the
* `tooltipDestinationProp` key in this HoC's config object. A relatively positioned
* Tooltip for a `Button`, for example, must be placed in the `decoration` prop.
*
* It may be necessary to assign the CSS rule `position` to the containing element so
* relatively positioned Tooltip has a frame to "stick to" the edge of.
*
* Anchoring points can be visualized as follows:
* ```
* ┌───◎───┐
* ◎ ◎
* └───◎───┘
* ```
*
* @type {Boolean}
* @public
*/
tooltipRelative: _propTypes["default"].bool,
/**
* Tooltip content.
*
* @type {String|Node}
* @public
*/
tooltipText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
/**
* Type of tooltip.
*
* | *Value* | *Tooltip Appearance* |
* |---|---|
* | `'balloon'` | Tooltip with a border, background and arrow to the activator |
* | `'transparent'` | Text only without any of the decorations above |
*
* @type {('balloon'|'transparent')}
* @default 'balloon'
* @public
*/
tooltipType: _propTypes["default"].oneOf(['balloon', 'transparent']),
/**
* The interval (in milliseconds) to recheck the math for a currently showing tooltip's
* positioning and orientation. Useful if your anchor element moves.
*
* @type {Number}
* @default 400
* @public
*/
tooltipUpdateDelay: _propTypes["default"].number,
/**
* The width of tooltip content.
*
* Value expects a number of pixels, which will be automatically scaled to the
* appropriate size given the current screen resolution, or a string value containing a
* measurement and a valid CSS unit included. If the content goes over the given width,
* it will automatically wrap, or marquee if `marquee` is enabled.
*
* When `null`, content will auto-size and not wrap. If `tooltipMarquee` is also
* enabled, marqueeing will begin when the width is greater than the default (theme
* specified) width.
*
* @type {Number|String}
* @public
*/
tooltipWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
};
return (0, _I18nDecorator.I18nContextDecorator)({
rtlProp: 'rtl'
}, Decorator);
});
var _default = exports["default"] = TooltipDecorator;