@mirai/ui 1.0.172 → 1.0.173
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.
- package/README.md +1 -0
- package/build/components/Button/Button.js +8 -3
- package/build/components/Button/Button.js.map +1 -1
- package/build/components/Button/Button.stories.js +1 -0
- package/build/components/Button/Button.stories.js.map +1 -1
- package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap +12 -0
- package/build/components/Tooltip/Tooltip.js +9 -13
- package/build/components/Tooltip/Tooltip.js.map +1 -1
- package/build/components/Tooltip/helpers/index.js +17 -0
- package/build/components/Tooltip/helpers/index.js.map +1 -0
- package/build/components/Tooltip/helpers/isPressableInstance.js +16 -0
- package/build/components/Tooltip/helpers/isPressableInstance.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -414,6 +414,7 @@ A button component that receives the following props:
|
|
|
414
414
|
- `small:boolean` modifying the button size
|
|
415
415
|
- `squared:boolean` if true gives rectangular shape to the button (false by default)
|
|
416
416
|
- `tag:string` html tag of resulting element ('button' by default)
|
|
417
|
+
- `tooltip:string` text it will appears when hover on component.
|
|
417
418
|
- `wide:bool` modifying the button to full-width
|
|
418
419
|
- `onEnter:function` executed when the user hovers over
|
|
419
420
|
- `onLeave:function` executed when the user hovers away
|
|
@@ -9,8 +9,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
|
+
var _Tooltip = require("../Tooltip");
|
|
12
13
|
var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
|
|
13
|
-
var _excluded = ["busy", "children", "disabled", "large", "rounded", "secondary", "small", "squared", "tag", "wide", "onPress"];
|
|
14
|
+
var _excluded = ["busy", "children", "disabled", "large", "rounded", "secondary", "small", "squared", "tag", "tooltip", "wide", "onPress"];
|
|
14
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
16
17
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -31,10 +32,13 @@ var Button = function Button(_ref) {
|
|
|
31
32
|
squared = _ref$squared === void 0 ? false : _ref$squared,
|
|
32
33
|
_ref$tag = _ref.tag,
|
|
33
34
|
tag = _ref$tag === void 0 ? 'button' : _ref$tag,
|
|
35
|
+
tooltip = _ref.tooltip,
|
|
34
36
|
wide = _ref.wide,
|
|
35
37
|
onPress = _ref.onPress,
|
|
36
38
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement(tooltip ? _Tooltip.Tooltip : _react.default.Fragment, tooltip ? {
|
|
40
|
+
text: tooltip
|
|
41
|
+
} : undefined, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
|
|
38
42
|
disabled: disabled || busy,
|
|
39
43
|
role: others.role || 'button',
|
|
40
44
|
tag: tag,
|
|
@@ -47,7 +51,7 @@ var Button = function Button(_ref) {
|
|
|
47
51
|
})), /*#__PURE__*/_react.default.createElement(_primitives.View, {
|
|
48
52
|
row: true,
|
|
49
53
|
className: _ButtonModule.default.children
|
|
50
|
-
}, children)));
|
|
54
|
+
}, children))));
|
|
51
55
|
};
|
|
52
56
|
exports.Button = Button;
|
|
53
57
|
Button.displayName = 'Component:Button';
|
|
@@ -61,6 +65,7 @@ Button.propTypes = {
|
|
|
61
65
|
small: _propTypes.default.bool,
|
|
62
66
|
squared: _propTypes.default.bool,
|
|
63
67
|
tag: _propTypes.default.string,
|
|
68
|
+
tooltip: _propTypes.default.string,
|
|
64
69
|
wide: _propTypes.default.bool,
|
|
65
70
|
onEnter: _propTypes.default.func,
|
|
66
71
|
onLeave: _propTypes.default.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","onPress","others","React","createElement","Pressable","role","className","styles","style","button","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","tooltip","wide","onPress","others","React","createElement","Tooltip","Fragment","text","undefined","Pressable","role","className","styles","style","button","busyContainer","active","spinner","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport { Tooltip } from '../Tooltip';\nimport style from './Button.module.css';\n\nconst Button = ({\n busy,\n children,\n disabled,\n large,\n rounded,\n secondary,\n small,\n squared = false,\n tag = 'button',\n tooltip,\n wide,\n onPress,\n ...others\n}) =>\n React.createElement(\n tooltip ? Tooltip : React.Fragment,\n tooltip ? { text: tooltip } : undefined,\n React.createElement(\n Pressable,\n {\n ...others,\n disabled: disabled || busy,\n role: others.role || 'button',\n tag,\n onPress,\n className: styles(\n style.button,\n busy && !disabled && style.busy,\n large && style.large,\n small && style.small,\n rounded && style.rounded,\n squared && style.squared,\n secondary && !disabled && style.secondary,\n (disabled || busy) && style.disabled,\n wide && style.wide,\n others.className,\n ),\n },\n busy === undefined ? (\n children\n ) : (\n <>\n <View className={styles(style.busyContainer, busy && style.active)}>\n <View className={style.spinner} />\n </View>\n <View row className={style.children}>\n {children}\n </View>\n </>\n ),\n ),\n );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n busy: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n disabled: PropTypes.bool,\n large: PropTypes.bool,\n rounded: PropTypes.bool,\n secondary: PropTypes.bool,\n small: PropTypes.bool,\n squared: PropTypes.bool,\n tag: PropTypes.string,\n tooltip: PropTypes.string,\n wide: PropTypes.bool,\n onEnter: PropTypes.func,\n onLeave: PropTypes.func,\n onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","names":["title","Story","busyProp","busy","icon","props","useState","setBusy","ICON","storyName","args","children","disabled","undefined","large","rounded","secondary","small","squared","tag","wide","testId","style","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { Icon, ICON, View } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ busy: busyProp, icon, ...props }) => {\n const [busy, setBusy] = useState(busyProp);\n\n return (\n <>\n <Button {...{ ...props, busy }} />\n <Button {...{ ...props, busy }}>\n <Icon value={ICON[icon]} />\n </Button>\n\n <View onClick={() => setBusy(!busy)}>Switch busy</View>\n </>\n );\n};\n\nStory.storyName = 'Button';\n\nStory.args = {\n busy: false,\n children: 'children',\n disabled: false,\n icon: undefined,\n large: false,\n rounded: false,\n secondary: false,\n small: false,\n squared: false,\n tag: 'button',\n wide: false,\n // inherited properties\n testId: 'test-story',\n style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n icon: {\n options: Object.keys(ICON),\n control: { type: 'select' },\n defaultValue: Object.keys(ICON)[0],\n },\n onEnter: { action: 'onEnter' },\n onLeave: { action: 'onLeave' },\n onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAA2C;EAAA,IAA/BC,QAAQ,QAAdC,IAAI;IAAYC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACpD,gBAAwB,IAAAC,eAAQ,EAACJ,QAAQ,CAAC;IAAA;IAAnCC,IAAI;IAAEI,OAAO;EAEpB,oBACE,yEACE,6BAAC,cAAM,kCAAUF,KAAK;IAAEF,IAAI,EAAJA;EAAI,GAAM,eAClC,6BAAC,cAAM,kCAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI,iBAC1B,6BAAC,MAAI;IAAC,KAAK,EAAEK,MAAI,CAACJ,IAAI;EAAE,EAAG,CACpB,eAET,6BAAC,MAAI;IAAC,OAAO,EAAE;MAAA,OAAMG,OAAO,CAAC,CAACJ,IAAI,CAAC;IAAA;EAAC,iBAAmB,CACtD;AAEP,CAAC;AAAC;AAEFF,KAAK,CAACQ,SAAS,GAAG,QAAQ;AAE1BR,KAAK,CAACS,IAAI,GAAG;EACXP,IAAI,EAAE,KAAK;EACXQ,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfR,IAAI,EAAES,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAA0B;AACnD,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.stories.js","names":["title","Story","busyProp","busy","icon","props","useState","setBusy","ICON","storyName","args","children","disabled","undefined","large","rounded","secondary","small","squared","tag","tooltip","wide","testId","style","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { Icon, ICON, View } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ busy: busyProp, icon, ...props }) => {\n const [busy, setBusy] = useState(busyProp);\n\n return (\n <>\n <Button {...{ ...props, busy }} />\n <Button {...{ ...props, busy }}>\n <Icon value={ICON[icon]} />\n </Button>\n\n <View onClick={() => setBusy(!busy)}>Switch busy</View>\n </>\n );\n};\n\nStory.storyName = 'Button';\n\nStory.args = {\n busy: false,\n children: 'children',\n disabled: false,\n icon: undefined,\n large: false,\n rounded: false,\n secondary: false,\n small: false,\n squared: false,\n tag: 'button',\n tooltip: 'tooltip',\n wide: false,\n // inherited properties\n testId: 'test-story',\n style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n icon: {\n options: Object.keys(ICON),\n control: { type: 'select' },\n defaultValue: Object.keys(ICON)[0],\n },\n onEnter: { action: 'onEnter' },\n onLeave: { action: 'onLeave' },\n onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAA2C;EAAA,IAA/BC,QAAQ,QAAdC,IAAI;IAAYC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACpD,gBAAwB,IAAAC,eAAQ,EAACJ,QAAQ,CAAC;IAAA;IAAnCC,IAAI;IAAEI,OAAO;EAEpB,oBACE,yEACE,6BAAC,cAAM,kCAAUF,KAAK;IAAEF,IAAI,EAAJA;EAAI,GAAM,eAClC,6BAAC,cAAM,kCAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI,iBAC1B,6BAAC,MAAI;IAAC,KAAK,EAAEK,MAAI,CAACJ,IAAI;EAAE,EAAG,CACpB,eAET,6BAAC,MAAI;IAAC,OAAO,EAAE;MAAA,OAAMG,OAAO,CAAC,CAACJ,IAAI,CAAC;IAAA;EAAC,iBAAmB,CACtD;AAEP,CAAC;AAAC;AAEFF,KAAK,CAACQ,SAAS,GAAG,QAAQ;AAE1BR,KAAK,CAACS,IAAI,GAAG;EACXP,IAAI,EAAE,KAAK;EACXQ,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfR,IAAI,EAAES,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAA0B;AACnD,CAAC;AAEDvB,KAAK,CAACwB,QAAQ,GAAG;EACfrB,IAAI,EAAE;IACJsB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACpB,MAAI,CAAC;IAC1BqB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACpB,MAAI,CAAC,CAAC,CAAC;EACnC,CAAC;EACDwB,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
|
|
@@ -115,6 +115,18 @@ exports[`component:<Button> prop:tag 1`] = `
|
|
|
115
115
|
</DocumentFragment>
|
|
116
116
|
`;
|
|
117
117
|
|
|
118
|
+
exports[`component:<Button> prop:tooltip 1`] = `
|
|
119
|
+
<DocumentFragment>
|
|
120
|
+
<span>
|
|
121
|
+
<button
|
|
122
|
+
class="pressable dispatcher button"
|
|
123
|
+
>
|
|
124
|
+
children
|
|
125
|
+
</button>
|
|
126
|
+
</span>
|
|
127
|
+
</DocumentFragment>
|
|
128
|
+
`;
|
|
129
|
+
|
|
118
130
|
exports[`component:<Button> prop:wide 1`] = `
|
|
119
131
|
<DocumentFragment>
|
|
120
132
|
<button
|
|
@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _helpers = require("../../helpers");
|
|
11
11
|
var _primitives = require("../../primitives");
|
|
12
|
+
var _helpers2 = require("./helpers");
|
|
12
13
|
var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
|
|
13
14
|
var _excluded = ["children", "left", "pressable", "right", "Template", "text", "timestamp", "top", "visible"],
|
|
14
15
|
_excluded2 = ["testId"];
|
|
@@ -68,21 +69,16 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
68
69
|
onPosition: setPosition,
|
|
69
70
|
testId: testId
|
|
70
71
|
}, _react.default.Children.map(children, function (child, index) {
|
|
72
|
+
var _objectSpread2;
|
|
71
73
|
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({
|
|
72
74
|
key: index
|
|
73
|
-
}, child.props), {}, {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
onMouseLeave: function onMouseLeave() {
|
|
81
|
-
return setVisible(false);
|
|
82
|
-
},
|
|
83
|
-
className: (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className),
|
|
84
|
-
testId: testId ? "".concat(testId, "-dispatcher") : undefined
|
|
85
|
-
}));
|
|
75
|
+
}, child.props), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onPress' : 'onClick', pressable ? function () {
|
|
76
|
+
return setVisible(!visible);
|
|
77
|
+
} : undefined), _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onEnter' : 'onMouseEnter', !pressable ? function () {
|
|
78
|
+
return setVisible(true);
|
|
79
|
+
} : undefined), _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onLeave' : 'onMouseLeave', function () {
|
|
80
|
+
return setVisible(false);
|
|
81
|
+
}), _defineProperty(_objectSpread2, "className", (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className)), _defineProperty(_objectSpread2, "testId", testId ? "".concat(testId, "-dispatcher") : undefined), _objectSpread2)));
|
|
86
82
|
}), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, rest, {
|
|
87
83
|
className: (0, _helpers.styles)(_TooltipModule.default.tooltip, (propLeft || propRight) && _TooltipModule.default.aline, left && _TooltipModule.default.left, right && _TooltipModule.default.right, top ? _TooltipModule.default.top : _TooltipModule.default.bottom, rest.className)
|
|
88
84
|
}), 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","others","useState","setVisible","position","setPosition","testId","rest","role","React","Children","map","child","index","cloneElement","key","props","
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","others","useState","setVisible","position","setPosition","testId","rest","role","React","Children","map","child","index","cloneElement","key","props","isPressableInstance","undefined","styles","style","dispatcher","className","tooltip","aline","bottom","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 ...others\n}) => {\n const [visible, setVisible] = useState(propVisible);\n const [position, setPosition] = useState({});\n\n const { testId, ...rest } = others;\n\n const { left, right, top = propTop } = position;\n\n return text || Template ? (\n <Layer\n centered\n forceRender={false}\n left={propLeft}\n right={propRight}\n role={others.role || 'tooltip'}\n timestamp={timestamp}\n top={top}\n visible={visible}\n onPosition={setPosition}\n testId={testId}\n >\n {React.Children.map(children, (child, index) =>\n React.cloneElement(child, {\n key: index,\n ...child.props,\n [isPressableInstance(child) ? 'onPress' : '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 {...rest}\n className={styles(\n style.tooltip,\n (propLeft || propRight) && style.aline,\n left && style.left,\n right && style.right,\n top ? style.top : style.bottom,\n rest.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.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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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _isPressableInstance = require("./isPressableInstance");
|
|
7
|
+
Object.keys(_isPressableInstance).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _isPressableInstance[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _isPressableInstance[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Tooltip/helpers/index.js"],"sourcesContent":["export * from './isPressableInstance';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isPressableInstance = void 0;
|
|
7
|
+
var _primitives = require("../../../primitives");
|
|
8
|
+
var isPressableInstance = function isPressableInstance() {
|
|
9
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
10
|
+
_ref$type = _ref.type;
|
|
11
|
+
_ref$type = _ref$type === void 0 ? {} : _ref$type;
|
|
12
|
+
var displayName = _ref$type.displayName;
|
|
13
|
+
return displayName === _primitives.Pressable.displayName;
|
|
14
|
+
};
|
|
15
|
+
exports.isPressableInstance = isPressableInstance;
|
|
16
|
+
//# sourceMappingURL=isPressableInstance.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isPressableInstance.js","names":["isPressableInstance","type","displayName","Pressable"],"sources":["../../../../src/components/Tooltip/helpers/isPressableInstance.js"],"sourcesContent":["import { Pressable } from '../../../primitives';\n\nexport const isPressableInstance = ({ type: { displayName } = {} } = {}) => displayName === Pressable.displayName;\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB;EAAA,+EAAqC,CAAC,CAAC;IAAA,iBAAjCC,IAAI;EAAA,mCAAoB,CAAC,CAAC;EAAA,IAAlBC,WAAW,aAAXA,WAAW;EAAA,OAAmBA,WAAW,KAAKC,qBAAS,CAACD,WAAW;AAAA;AAAC"}
|