@fountain-ui/core 2.0.0-beta.61 → 2.0.0-beta.63
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/build/commonjs/Tooltip/Tooltip.js +6 -2
- package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
- package/build/commonjs/Tooltip/TooltipProps.js.map +1 -1
- package/build/module/Tooltip/Tooltip.js +5 -2
- package/build/module/Tooltip/Tooltip.js.map +1 -1
- package/build/module/Tooltip/TooltipProps.js.map +1 -1
- package/build/typescript/Tooltip/TooltipProps.d.ts +11 -0
- package/package.json +2 -2
- package/src/Tooltip/Tooltip.tsx +6 -2
- package/src/Tooltip/TooltipProps.ts +8 -0
|
@@ -15,6 +15,8 @@ var _utils = require("@fountain-ui/utils");
|
|
|
15
15
|
|
|
16
16
|
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
|
17
17
|
|
|
18
|
+
var _hooks = require("../hooks");
|
|
19
|
+
|
|
18
20
|
var _styles = require("../styles");
|
|
19
21
|
|
|
20
22
|
var _icons = require("../internal/icons");
|
|
@@ -28,7 +30,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
28
30
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
31
|
|
|
30
32
|
const DEFAULT_OPACITY = 0.8;
|
|
31
|
-
const
|
|
33
|
+
const INITIAL_LAYOUT = {
|
|
32
34
|
width: 0,
|
|
33
35
|
height: 0,
|
|
34
36
|
x: 0,
|
|
@@ -42,6 +44,7 @@ function Tooltip(props) {
|
|
|
42
44
|
const {
|
|
43
45
|
arrowLayout,
|
|
44
46
|
children,
|
|
47
|
+
initialLayout = INITIAL_LAYOUT,
|
|
45
48
|
left,
|
|
46
49
|
onClose,
|
|
47
50
|
placement = 'top',
|
|
@@ -98,6 +101,7 @@ function Tooltip(props) {
|
|
|
98
101
|
[arrowLayout.placement]: arrowLayout.offset
|
|
99
102
|
})
|
|
100
103
|
});
|
|
104
|
+
const setLayoutWithDebounce = (0, _hooks.useDebounce)(event => setLayout(event.nativeEvent.layout), 300);
|
|
101
105
|
|
|
102
106
|
const buttonElem = /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
|
|
103
107
|
pressEffect: 'none',
|
|
@@ -126,7 +130,7 @@ function Tooltip(props) {
|
|
|
126
130
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
127
131
|
style: style
|
|
128
132
|
}, children, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
129
|
-
onLayout:
|
|
133
|
+
onLayout: e => setLayoutWithDebounce(e),
|
|
130
134
|
style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
|
|
131
135
|
}, placement === 'top' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, arrowElem, buttonElem)));
|
|
132
136
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DEFAULT_OPACITY","
|
|
1
|
+
{"version":3,"names":["DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","useTheme","layout","setLayout","useState","scale","useSharedValue","animatedStyle","useAnimatedStyle","transform","value","r","g","b","rgb","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextScaleValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","createFontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","css","marginRight","flexShrink","arrowStyle","offset","setLayoutWithDebounce","useDebounce","event","nativeEvent","buttonElem","arrowElem","e"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { useDebounce } from '../hooks';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n const {\n arrowLayout,\n children,\n initialLayout = INITIAL_LAYOUT,\n left,\n onClose,\n placement = 'top',\n right,\n numberOfTitleLines = 1,\n style,\n title,\n tooltipStyle,\n verticalOffset = 4,\n visible = false,\n } = props;\n\n const theme = useTheme();\n\n const [layout, setLayout] = useState(initialLayout);\n\n const scale = useSharedValue(0);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scale.value }],\n }), []);\n\n const [r, g, b] = rgb(theme.palette.primary.main);\n\n const totalVerticalOffset = -(layout.height + verticalOffset);\n const tooltipLayoutStyle: ViewProps['style'] = {\n alignItems: arrowLayout?.placement === 'left'\n ? 'flex-start'\n : arrowLayout?.placement === 'right'\n ? 'flex-end'\n : 'center',\n bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n left,\n position: 'absolute',\n right,\n top: placement === 'top' ? totalVerticalOffset : undefined,\n zIndex: theme.zIndex.tooltip,\n height: visible ? undefined : 0,\n overflow: visible ? undefined : 'hidden',\n };\n\n useEffect(() => {\n const nextScaleValue = visible ? 1 : 0;\n\n scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n }, [visible]);\n\n const touchableStyle: ViewProps['style'] = {\n alignItems: 'center',\n backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n borderRadius: theme.shape.roundness,\n flexDirection: 'row',\n padding: theme.spacing(2),\n width: '100%',\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const textStyle = css([\n fontStyle,\n {\n marginRight: theme.spacing(2),\n flexShrink: 1,\n },\n ]);\n\n const arrowStyle = css({\n ...(arrowLayout && {\n [arrowLayout.placement]: arrowLayout.offset,\n }),\n });\n\n const setLayoutWithDebounce = useDebounce(event => setLayout(event.nativeEvent.layout), 300);\n\n const buttonElem = (\n <ButtonBase\n pressEffect={'none'}\n onPress={onClose}\n >\n <View style={css(touchableStyle)}>\n <Text\n children={title}\n // TODO: Should we provide text prop customization?\n numberOfLines={numberOfTitleLines}\n style={textStyle}\n />\n <CloseIcon\n fill={theme.palette.primary.contrastTextColor}\n width={20}\n height={20}\n />\n </View>\n </ButtonBase>\n );\n\n const arrowElem = (\n <View style={arrowStyle}>\n <UpArrow\n upsideDown={placement === 'top'}\n fill={theme.palette.primary.main}\n opacity={DEFAULT_OPACITY}\n />\n </View>\n );\n\n return (\n <View style={style}>\n {children}\n\n <Animated.View\n onLayout={(e) => setLayoutWithDebounce(e)}\n style={[\n animatedStyle,\n tooltipLayoutStyle,\n tooltipStyle,\n ]}\n >\n {placement === 'top' ? (\n <React.Fragment>\n {buttonElem}\n {arrowElem}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {arrowElem}\n {buttonElem}\n </React.Fragment>\n )}\n </Animated.View>\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport default interface TooltipProps extends ComponentProps<{\n /**\n * Tooltip reference element.\n */\n children: React.ReactNode;\n\n /**\n * Left position relative to reference element.\n */\n left?: number;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void;\n\n /**\n * Tooltip placement.\n * @default 'top'\n */\n placement?: TooltipPlacement;\n\n /**\n * Right position relative to reference element.\n */\n right?: number;\n\n /**\n * Tooltip title.\n */\n title: ButtonProps['children'];\n\n /**\n * Additional style for tooltip wrapper.\n */\n tooltipStyle?: ViewProps['style'];\n\n /**\n * The additional amount to vertically shift.\n * @default 4\n */\n verticalOffset?: number;\n\n /**\n * If `true`, the tooltip is shown.\n * @default false\n */\n visible?: boolean;\n\n /**\n * Tooltip arrow layout.\n * If 'undefined', the arrow will be centered on tooltip.\n */\n arrowLayout?: {\n placement: TooltipArrowPlacement;\n offset: number;\n }\n\n /**\n * number of tooltip's title lines\n * @default 1\n */\n numberOfTitleLines?: TextProps['numberOfLines'];\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport type TooltipInitialLayout = { height: number, width: number, x: number, y: number };\n\nexport default interface TooltipProps extends ComponentProps<{\n /**\n * Tooltip reference element.\n */\n children: React.ReactNode;\n\n /**\n * Left position relative to reference element.\n */\n left?: number;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void;\n\n /**\n * Tooltip placement.\n * @default 'top'\n */\n placement?: TooltipPlacement;\n\n /**\n * Right position relative to reference element.\n */\n right?: number;\n\n /**\n * Tooltip title.\n */\n title: ButtonProps['children'];\n\n /**\n * Additional style for tooltip wrapper.\n */\n tooltipStyle?: ViewProps['style'];\n\n /**\n * The additional amount to vertically shift.\n * @default 4\n */\n verticalOffset?: number;\n\n /**\n * If `true`, the tooltip is shown.\n * @default false\n */\n visible?: boolean;\n\n /**\n * Tooltip arrow layout.\n * If 'undefined', the arrow will be centered on tooltip.\n */\n arrowLayout?: {\n placement: TooltipArrowPlacement;\n offset: number;\n }\n\n /**\n * number of tooltip's title lines\n * @default 1\n */\n numberOfTitleLines?: TextProps['numberOfLines'];\n\n /**\n * position of tooltip before onLayout call\n * @default { height: 0, width: 0 , x: 0, y: 0}\n */\n initialLayout: TooltipInitialLayout;\n}> {}\n"],"mappings":""}
|
|
@@ -3,11 +3,12 @@ import { Text, View } from 'react-native';
|
|
|
3
3
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
4
|
import { rgb } from '@fountain-ui/utils';
|
|
5
5
|
import ButtonBase from '../ButtonBase';
|
|
6
|
+
import { useDebounce } from '../hooks';
|
|
6
7
|
import { createFontStyle, css, useTheme } from '../styles';
|
|
7
8
|
import { Close as CloseIcon } from '../internal/icons';
|
|
8
9
|
import UpArrow from './UpArrow';
|
|
9
10
|
const DEFAULT_OPACITY = 0.8;
|
|
10
|
-
const
|
|
11
|
+
const INITIAL_LAYOUT = {
|
|
11
12
|
width: 0,
|
|
12
13
|
height: 0,
|
|
13
14
|
x: 0,
|
|
@@ -20,6 +21,7 @@ export default function Tooltip(props) {
|
|
|
20
21
|
const {
|
|
21
22
|
arrowLayout,
|
|
22
23
|
children,
|
|
24
|
+
initialLayout = INITIAL_LAYOUT,
|
|
23
25
|
left,
|
|
24
26
|
onClose,
|
|
25
27
|
placement = 'top',
|
|
@@ -76,6 +78,7 @@ export default function Tooltip(props) {
|
|
|
76
78
|
[arrowLayout.placement]: arrowLayout.offset
|
|
77
79
|
})
|
|
78
80
|
});
|
|
81
|
+
const setLayoutWithDebounce = useDebounce(event => setLayout(event.nativeEvent.layout), 300);
|
|
79
82
|
const buttonElem = /*#__PURE__*/React.createElement(ButtonBase, {
|
|
80
83
|
pressEffect: 'none',
|
|
81
84
|
onPress: onClose
|
|
@@ -101,7 +104,7 @@ export default function Tooltip(props) {
|
|
|
101
104
|
return /*#__PURE__*/React.createElement(View, {
|
|
102
105
|
style: style
|
|
103
106
|
}, children, /*#__PURE__*/React.createElement(Animated.View, {
|
|
104
|
-
onLayout:
|
|
107
|
+
onLayout: e => setLayoutWithDebounce(e),
|
|
105
108
|
style: [animatedStyle, tooltipLayoutStyle, tooltipStyle]
|
|
106
109
|
}, placement === 'top' ? /*#__PURE__*/React.createElement(React.Fragment, null, buttonElem, arrowElem) : /*#__PURE__*/React.createElement(React.Fragment, null, arrowElem, buttonElem)));
|
|
107
110
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withTiming","rgb","ButtonBase","useDebounce","createFontStyle","css","useTheme","Close","CloseIcon","UpArrow","DEFAULT_OPACITY","INITIAL_LAYOUT","width","height","x","y","ANIMATION_CONFIG","duration","Tooltip","props","arrowLayout","children","initialLayout","left","onClose","placement","right","numberOfTitleLines","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","scale","animatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","nextScaleValue","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","flexShrink","arrowStyle","offset","setLayoutWithDebounce","event","nativeEvent","buttonElem","arrowElem","e"],"sources":["Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport ButtonBase from '../ButtonBase';\nimport { useDebounce } from '../hooks';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst DEFAULT_OPACITY = 0.8;\nconst INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n const {\n arrowLayout,\n children,\n initialLayout = INITIAL_LAYOUT,\n left,\n onClose,\n placement = 'top',\n right,\n numberOfTitleLines = 1,\n style,\n title,\n tooltipStyle,\n verticalOffset = 4,\n visible = false,\n } = props;\n\n const theme = useTheme();\n\n const [layout, setLayout] = useState(initialLayout);\n\n const scale = useSharedValue(0);\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scale.value }],\n }), []);\n\n const [r, g, b] = rgb(theme.palette.primary.main);\n\n const totalVerticalOffset = -(layout.height + verticalOffset);\n const tooltipLayoutStyle: ViewProps['style'] = {\n alignItems: arrowLayout?.placement === 'left'\n ? 'flex-start'\n : arrowLayout?.placement === 'right'\n ? 'flex-end'\n : 'center',\n bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n left,\n position: 'absolute',\n right,\n top: placement === 'top' ? totalVerticalOffset : undefined,\n zIndex: theme.zIndex.tooltip,\n height: visible ? undefined : 0,\n overflow: visible ? undefined : 'hidden',\n };\n\n useEffect(() => {\n const nextScaleValue = visible ? 1 : 0;\n\n scale.value = withTiming(nextScaleValue, ANIMATION_CONFIG);\n }, [visible]);\n\n const touchableStyle: ViewProps['style'] = {\n alignItems: 'center',\n backgroundColor: `rgba(${r}, ${g}, ${b}, ${DEFAULT_OPACITY})`,\n borderRadius: theme.shape.roundness,\n flexDirection: 'row',\n padding: theme.spacing(2),\n width: '100%',\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const textStyle = css([\n fontStyle,\n {\n marginRight: theme.spacing(2),\n flexShrink: 1,\n },\n ]);\n\n const arrowStyle = css({\n ...(arrowLayout && {\n [arrowLayout.placement]: arrowLayout.offset,\n }),\n });\n\n const setLayoutWithDebounce = useDebounce(event => setLayout(event.nativeEvent.layout), 300);\n\n const buttonElem = (\n <ButtonBase\n pressEffect={'none'}\n onPress={onClose}\n >\n <View style={css(touchableStyle)}>\n <Text\n children={title}\n // TODO: Should we provide text prop customization?\n numberOfLines={numberOfTitleLines}\n style={textStyle}\n />\n <CloseIcon\n fill={theme.palette.primary.contrastTextColor}\n width={20}\n height={20}\n />\n </View>\n </ButtonBase>\n );\n\n const arrowElem = (\n <View style={arrowStyle}>\n <UpArrow\n upsideDown={placement === 'top'}\n fill={theme.palette.primary.main}\n opacity={DEFAULT_OPACITY}\n />\n </View>\n );\n\n return (\n <View style={style}>\n {children}\n\n <Animated.View\n onLayout={(e) => setLayoutWithDebounce(e)}\n style={[\n animatedStyle,\n tooltipLayoutStyle,\n tooltipStyle,\n ]}\n >\n {placement === 'top' ? (\n <React.Fragment>\n {buttonElem}\n {arrowElem}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {arrowElem}\n {buttonElem}\n </React.Fragment>\n )}\n </Animated.View>\n </View>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport default interface TooltipProps extends ComponentProps<{\n /**\n * Tooltip reference element.\n */\n children: React.ReactNode;\n\n /**\n * Left position relative to reference element.\n */\n left?: number;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void;\n\n /**\n * Tooltip placement.\n * @default 'top'\n */\n placement?: TooltipPlacement;\n\n /**\n * Right position relative to reference element.\n */\n right?: number;\n\n /**\n * Tooltip title.\n */\n title: ButtonProps['children'];\n\n /**\n * Additional style for tooltip wrapper.\n */\n tooltipStyle?: ViewProps['style'];\n\n /**\n * The additional amount to vertically shift.\n * @default 4\n */\n verticalOffset?: number;\n\n /**\n * If `true`, the tooltip is shown.\n * @default false\n */\n visible?: boolean;\n\n /**\n * Tooltip arrow layout.\n * If 'undefined', the arrow will be centered on tooltip.\n */\n arrowLayout?: {\n placement: TooltipArrowPlacement;\n offset: number;\n }\n\n /**\n * number of tooltip's title lines\n * @default 1\n */\n numberOfTitleLines?: TextProps['numberOfLines'];\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["TooltipProps.ts"],"sourcesContent":["import React from 'react';\nimport type { TextProps, ViewProps } from 'react-native';\nimport type { ComponentProps } from '../types';\nimport type { ButtonProps } from '../Button';\n\nexport type TooltipPlacement = 'top' | 'bottom';\n\nexport type TooltipArrowPlacement = 'left' | 'right';\n\nexport type TooltipInitialLayout = { height: number, width: number, x: number, y: number };\n\nexport default interface TooltipProps extends ComponentProps<{\n /**\n * Tooltip reference element.\n */\n children: React.ReactNode;\n\n /**\n * Left position relative to reference element.\n */\n left?: number;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void;\n\n /**\n * Tooltip placement.\n * @default 'top'\n */\n placement?: TooltipPlacement;\n\n /**\n * Right position relative to reference element.\n */\n right?: number;\n\n /**\n * Tooltip title.\n */\n title: ButtonProps['children'];\n\n /**\n * Additional style for tooltip wrapper.\n */\n tooltipStyle?: ViewProps['style'];\n\n /**\n * The additional amount to vertically shift.\n * @default 4\n */\n verticalOffset?: number;\n\n /**\n * If `true`, the tooltip is shown.\n * @default false\n */\n visible?: boolean;\n\n /**\n * Tooltip arrow layout.\n * If 'undefined', the arrow will be centered on tooltip.\n */\n arrowLayout?: {\n placement: TooltipArrowPlacement;\n offset: number;\n }\n\n /**\n * number of tooltip's title lines\n * @default 1\n */\n numberOfTitleLines?: TextProps['numberOfLines'];\n\n /**\n * position of tooltip before onLayout call\n * @default { height: 0, width: 0 , x: 0, y: 0}\n */\n initialLayout: TooltipInitialLayout;\n}> {}\n"],"mappings":""}
|
|
@@ -4,6 +4,12 @@ import type { ComponentProps } from '../types';
|
|
|
4
4
|
import type { ButtonProps } from '../Button';
|
|
5
5
|
export declare type TooltipPlacement = 'top' | 'bottom';
|
|
6
6
|
export declare type TooltipArrowPlacement = 'left' | 'right';
|
|
7
|
+
export declare type TooltipInitialLayout = {
|
|
8
|
+
height: number;
|
|
9
|
+
width: number;
|
|
10
|
+
x: number;
|
|
11
|
+
y: number;
|
|
12
|
+
};
|
|
7
13
|
export default interface TooltipProps extends ComponentProps<{
|
|
8
14
|
/**
|
|
9
15
|
* Tooltip reference element.
|
|
@@ -57,5 +63,10 @@ export default interface TooltipProps extends ComponentProps<{
|
|
|
57
63
|
* @default 1
|
|
58
64
|
*/
|
|
59
65
|
numberOfTitleLines?: TextProps['numberOfLines'];
|
|
66
|
+
/**
|
|
67
|
+
* position of tooltip before onLayout call
|
|
68
|
+
* @default { height: 0, width: 0 , x: 0, y: 0}
|
|
69
|
+
*/
|
|
70
|
+
initialLayout: TooltipInitialLayout;
|
|
60
71
|
}> {
|
|
61
72
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.63",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "aeb531757546b87d8b7f75ca5e0f08ab742297a0"
|
|
71
71
|
}
|
package/src/Tooltip/Tooltip.tsx
CHANGED
|
@@ -4,13 +4,14 @@ import type { WithTimingConfig } from 'react-native-reanimated';
|
|
|
4
4
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
5
5
|
import { rgb } from '@fountain-ui/utils';
|
|
6
6
|
import ButtonBase from '../ButtonBase';
|
|
7
|
+
import { useDebounce } from '../hooks';
|
|
7
8
|
import { createFontStyle, css, useTheme } from '../styles';
|
|
8
9
|
import { Close as CloseIcon } from '../internal/icons';
|
|
9
10
|
import type TooltipProps from './TooltipProps';
|
|
10
11
|
import UpArrow from './UpArrow';
|
|
11
12
|
|
|
12
13
|
const DEFAULT_OPACITY = 0.8;
|
|
13
|
-
const
|
|
14
|
+
const INITIAL_LAYOUT = { width: 0, height: 0, x: 0, y: 0 };
|
|
14
15
|
|
|
15
16
|
const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 150 };
|
|
16
17
|
|
|
@@ -18,6 +19,7 @@ export default function Tooltip(props: TooltipProps) {
|
|
|
18
19
|
const {
|
|
19
20
|
arrowLayout,
|
|
20
21
|
children,
|
|
22
|
+
initialLayout = INITIAL_LAYOUT,
|
|
21
23
|
left,
|
|
22
24
|
onClose,
|
|
23
25
|
placement = 'top',
|
|
@@ -93,6 +95,8 @@ export default function Tooltip(props: TooltipProps) {
|
|
|
93
95
|
}),
|
|
94
96
|
});
|
|
95
97
|
|
|
98
|
+
const setLayoutWithDebounce = useDebounce(event => setLayout(event.nativeEvent.layout), 300);
|
|
99
|
+
|
|
96
100
|
const buttonElem = (
|
|
97
101
|
<ButtonBase
|
|
98
102
|
pressEffect={'none'}
|
|
@@ -129,7 +133,7 @@ export default function Tooltip(props: TooltipProps) {
|
|
|
129
133
|
{children}
|
|
130
134
|
|
|
131
135
|
<Animated.View
|
|
132
|
-
onLayout={(
|
|
136
|
+
onLayout={(e) => setLayoutWithDebounce(e)}
|
|
133
137
|
style={[
|
|
134
138
|
animatedStyle,
|
|
135
139
|
tooltipLayoutStyle,
|
|
@@ -7,6 +7,8 @@ export type TooltipPlacement = 'top' | 'bottom';
|
|
|
7
7
|
|
|
8
8
|
export type TooltipArrowPlacement = 'left' | 'right';
|
|
9
9
|
|
|
10
|
+
export type TooltipInitialLayout = { height: number, width: number, x: number, y: number };
|
|
11
|
+
|
|
10
12
|
export default interface TooltipProps extends ComponentProps<{
|
|
11
13
|
/**
|
|
12
14
|
* Tooltip reference element.
|
|
@@ -70,4 +72,10 @@ export default interface TooltipProps extends ComponentProps<{
|
|
|
70
72
|
* @default 1
|
|
71
73
|
*/
|
|
72
74
|
numberOfTitleLines?: TextProps['numberOfLines'];
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* position of tooltip before onLayout call
|
|
78
|
+
* @default { height: 0, width: 0 , x: 0, y: 0}
|
|
79
|
+
*/
|
|
80
|
+
initialLayout: TooltipInitialLayout;
|
|
73
81
|
}> {}
|