@mirai/ui 1.0.237 → 1.0.238
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -51,6 +51,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
51
51
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
52
52
|
position = _useState4[0],
|
|
53
53
|
setPosition = _useState4[1];
|
|
54
|
+
var ref = (0, _react.useRef)();
|
|
54
55
|
var fixed = inherit.fixed,
|
|
55
56
|
_inherit$role = inherit.role,
|
|
56
57
|
role = _inherit$role === void 0 ? 'tooltip' : _inherit$role,
|
|
@@ -60,6 +61,21 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
60
61
|
right = position.right,
|
|
61
62
|
_position$top = position.top,
|
|
62
63
|
top = _position$top === void 0 ? propTop : _position$top;
|
|
64
|
+
(0, _react.useEffect)(function () {
|
|
65
|
+
if (!pressable || !visible) return;
|
|
66
|
+
var handleClickOutside = function handleClickOutside() {
|
|
67
|
+
var _ref$current;
|
|
68
|
+
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
69
|
+
target = _ref2.target;
|
|
70
|
+
return !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && setVisible(false);
|
|
71
|
+
};
|
|
72
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
73
|
+
return function () {
|
|
74
|
+
return document.removeEventListener('click', handleClickOutside, true);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
|
+
}, [visible]);
|
|
63
79
|
return text || Template ? /*#__PURE__*/_react.default.createElement(_primitives.Layer, {
|
|
64
80
|
fixed: fixed,
|
|
65
81
|
role: role,
|
|
@@ -74,7 +90,9 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
74
90
|
onPosition: setPosition
|
|
75
91
|
}, _react.default.Children.map(children, function (child, index) {
|
|
76
92
|
var _objectSpread2;
|
|
77
|
-
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({
|
|
93
|
+
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread(_objectSpread({}, pressable ? {
|
|
94
|
+
ref: ref
|
|
95
|
+
} : null), {}, {
|
|
78
96
|
key: index
|
|
79
97
|
}, child.props), {}, (_objectSpread2 = {
|
|
80
98
|
onClick: pressable ? function () {
|
|
@@ -82,9 +100,9 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
82
100
|
} : undefined
|
|
83
101
|
}, _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onEnter' : 'onMouseEnter', !pressable ? function () {
|
|
84
102
|
return setVisible(true);
|
|
85
|
-
} : undefined), _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onLeave' : 'onMouseLeave', function () {
|
|
103
|
+
} : undefined), _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onLeave' : 'onMouseLeave', !pressable ? function () {
|
|
86
104
|
return setVisible(false);
|
|
87
|
-
}), _defineProperty(_objectSpread2, "className", (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className)), _defineProperty(_objectSpread2, "testId", testId ? "".concat(testId, "-dispatcher") : undefined), _objectSpread2)));
|
|
105
|
+
} : undefined), _defineProperty(_objectSpread2, "className", (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className)), _defineProperty(_objectSpread2, "testId", testId ? "".concat(testId, "-dispatcher") : undefined), _objectSpread2)));
|
|
88
106
|
}), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
|
|
89
107
|
className: (0, _helpers.styles)(_TooltipModule.default.tooltip, (propLeft || propRight) && _TooltipModule.default.align, left && _TooltipModule.default.left, right && _TooltipModule.default.right, top ? _TooltipModule.default.top : _TooltipModule.default.bottom, others.className)
|
|
90
108
|
}), Template ? /*#__PURE__*/_react.default.createElement(Template, null) : /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","inherit","useState","setVisible","position","setPosition","fixed","role","testId","others","React","Children","map","child","index","cloneElement","key","props","onClick","undefined","isPressableInstance","styles","style","dispatcher","className","tooltip","align","bottom","displayName","propTypes","PropTypes","node","isRequired","bool","oneOfType","func","string","number"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport { isPressableInstance } from './helpers';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({\n children,\n left: propLeft,\n pressable = false,\n right: propRight,\n Template,\n text,\n timestamp,\n top: propTop,\n visible: propVisible = false,\n ...inherit\n}) => {\n const [visible, setVisible] = useState(propVisible);\n const [position, setPosition] = useState({});\n\n const { fixed, role = 'tooltip', testId, ...others } = inherit;\n const { left, right, top = propTop } = position;\n\n return text || Template ? (\n <Layer\n {...{ fixed, role, testId, timestamp, top, visible }}\n centered\n forceRender={false}\n left={propLeft}\n right={propRight}\n onPosition={setPosition}\n >\n {React.Children.map(children, (child, index) =>\n React.cloneElement(child, {\n key: index,\n ...child.props,\n onClick: pressable ? () => setVisible(!visible) : undefined,\n [isPressableInstance(child) ? 'onEnter' : 'onMouseEnter']: !pressable ? () => setVisible(true) : undefined,\n [isPressableInstance(child) ? 'onLeave' : 'onMouseLeave']: () => setVisible(false),\n className: styles(style.dispatcher, child.props.className),\n testId: testId ? `${testId}-dispatcher` : undefined,\n }),\n )}\n\n <LayerContent>\n <View\n {...others}\n className={styles(\n style.tooltip,\n (propLeft || propRight) && style.align,\n left && style.left,\n right && style.right,\n top ? style.top : style.bottom,\n others.className,\n )}\n >\n {Template ? (\n <Template />\n ) : (\n <Text bold small className={style.text}>\n {text}\n </Text>\n )}\n </View>\n </LayerContent>\n </Layer>\n ) : (\n <>{children}</>\n );\n};\n\nTooltip.displayName = 'Component:Tooltip';\n\nTooltip.propTypes = {\n children: PropTypes.node.isRequired,\n left: PropTypes.bool,\n pressable: PropTypes.bool,\n right: PropTypes.bool,\n Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n text: PropTypes.string,\n timestamp: PropTypes.number,\n top: PropTypes.bool,\n visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAyC;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEzC,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAWP;EAAA,IAVJC,QAAQ,QAARA,QAAQ;IACFC,QAAQ,QAAdC,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACVC,SAAS,QAAhBC,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACJC,OAAO,QAAZC,GAAG;IAAA,oBACHC,OAAO;IAAEC,WAAW,6BAAG,KAAK;IACzBC,OAAO;EAEV,gBAA8B,IAAAC,eAAQ,EAACF,WAAW,CAAC;IAAA;IAA5CD,OAAO;IAAEI,UAAU;EAC1B,iBAAgC,IAAAD,eAAQ,EAAC,CAAC,CAAC,CAAC;IAAA;IAArCE,QAAQ;IAAEC,WAAW;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","inherit","useState","setVisible","position","setPosition","ref","useRef","fixed","role","testId","others","useEffect","handleClickOutside","target","current","contains","document","addEventListener","removeEventListener","React","Children","map","child","index","cloneElement","key","props","onClick","undefined","isPressableInstance","styles","style","dispatcher","className","tooltip","align","bottom","displayName","propTypes","PropTypes","node","isRequired","bool","oneOfType","func","string","number"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport { isPressableInstance } from './helpers';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({\n children,\n left: propLeft,\n pressable = false,\n right: propRight,\n Template,\n text,\n timestamp,\n top: propTop,\n visible: propVisible = false,\n ...inherit\n}) => {\n const [visible, setVisible] = useState(propVisible);\n const [position, setPosition] = useState({});\n const ref = useRef();\n\n const { fixed, role = 'tooltip', testId, ...others } = inherit;\n const { left, right, top = propTop } = position;\n\n useEffect(() => {\n if (!pressable || !visible) return;\n\n const handleClickOutside = ({ target } = {}) => !ref.current?.contains(target) && setVisible(false);\n\n document.addEventListener('click', handleClickOutside, true);\n\n return () => document.removeEventListener('click', handleClickOutside, true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible]);\n\n return text || Template ? (\n <Layer\n {...{ fixed, role, testId, timestamp, top, visible }}\n centered\n forceRender={false}\n left={propLeft}\n right={propRight}\n onPosition={setPosition}\n >\n {React.Children.map(children, (child, index) =>\n React.cloneElement(child, {\n ...(pressable ? { ref } : null),\n key: index,\n ...child.props,\n onClick: pressable ? () => setVisible(!visible) : undefined,\n [isPressableInstance(child) ? 'onEnter' : 'onMouseEnter']: !pressable ? () => setVisible(true) : undefined,\n [isPressableInstance(child) ? 'onLeave' : 'onMouseLeave']: !pressable ? () => setVisible(false) : undefined,\n className: styles(style.dispatcher, child.props.className),\n testId: testId ? `${testId}-dispatcher` : undefined,\n }),\n )}\n\n <LayerContent>\n <View\n {...others}\n className={styles(\n style.tooltip,\n (propLeft || propRight) && style.align,\n left && style.left,\n right && style.right,\n top ? style.top : style.bottom,\n others.className,\n )}\n >\n {Template ? (\n <Template />\n ) : (\n <Text bold small className={style.text}>\n {text}\n </Text>\n )}\n </View>\n </LayerContent>\n </Layer>\n ) : (\n <>{children}</>\n );\n};\n\nTooltip.displayName = 'Component:Tooltip';\n\nTooltip.propTypes = {\n children: PropTypes.node.isRequired,\n left: PropTypes.bool,\n pressable: PropTypes.bool,\n right: PropTypes.bool,\n Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n text: PropTypes.string,\n timestamp: PropTypes.number,\n top: PropTypes.bool,\n visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":"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"}
|