@onesy/ui-react
Version:
UI for React
470 lines • 16.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["tonal", "color", "open", "openDefault", "name", "label", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "className", "style", "children"];
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; }
import React from 'react';
import { clamp, is, isEnvironment } from '@onesy/utils';
import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
import GrowElement from '../Grow';
import ModalElement from '../Modal';
import AppendElement from '../Append';
import SurfaceElement from '../Surface';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
root: {
inset: '0px auto auto 0px'
},
nameRoot: {
pointerEvents: 'all'
// whiteSpace: 'nowrap'
},
nameRoot_position_top: {
paddingBlock: theme.methods.space.value(2, 'px')
},
nameRoot_position_bottom: {
paddingBlock: theme.methods.space.value(2, 'px')
},
nameRoot_position_left: {
paddingInline: theme.methods.space.value(2, 'px')
},
nameRoot_position_right: {
paddingInline: theme.methods.space.value(2, 'px')
},
nameRoot_noMargin: {
padding: '0'
},
name: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
borderRadius: `${clamp(theme.shape.radius.unit / 2, 0, 8)}px`,
padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
lineHeight: '1.455'
}),
arrow: {
'&::before': {
content: "''",
width: '8px',
height: '8px',
background: 'inherit',
position: 'absolute',
zIndex: '0'
}
},
arrow_position_top_alignment_start: {
'&::before': {
bottom: '-4px',
left: 'clamp(11px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_top_alignment_center: {
'&::before': {
bottom: '-4px',
left: '50%',
transform: 'translate(-50%, 0) rotate(45deg)'
}
},
arrow_position_top_alignment_end: {
'&::before': {
bottom: '-4px',
right: 'clamp(11px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_bottom_alignment_start: {
'&::before': {
top: '-4px',
left: 'clamp(11px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_bottom_alignment_center: {
'&::before': {
top: '-4px',
left: '50%',
transform: 'translate(-50%, 0) rotate(45deg)'
}
},
arrow_position_bottom_alignment_end: {
'&::before': {
top: '-4px',
right: 'clamp(11px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_left_alignment_start: {
'&::before': {
right: '-4px',
top: 'clamp(5.4px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_left_alignment_center: {
'&::before': {
right: '-4px',
top: '50%',
transform: 'translate(0, -50%) rotate(45deg)'
}
},
arrow_position_left_alignment_end: {
'&::before': {
right: '-4px',
bottom: 'clamp(5.4px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_right_alignment_start: {
'&::before': {
left: '-4px',
top: 'clamp(5.4px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
arrow_position_right_alignment_center: {
'&::before': {
left: '-4px',
top: '50%',
transform: 'translate(0, -50%) rotate(45deg)'
}
},
arrow_position_right_alignment_end: {
'&::before': {
left: '-4px',
bottom: 'clamp(5.4px, 14%, 24px)',
transform: 'translate(0, 0) rotate(45deg)'
}
},
// maxWidth
maxWidth_xxs: {
maxWidth: `320px`
},
maxWidth_xs: {
maxWidth: `400px`
},
maxWidth_sm: {
maxWidth: `480px`
},
maxWidth_rg: {
maxWidth: `560px`
},
maxWidth_lg: {
maxWidth: `800px`
},
maxWidth_xl: {
maxWidth: `1120px`
},
maxWidth_xxl: {
maxWidth: `1360px`
},
maxWidth_unset: {
maxWidth: `unset`
},
fullWidth: {
maxWidth: `${(isEnvironment('browser') ? window.innerWidth : 1400) - +theme.methods.space.value('rg', '', 1)}px`
},
nowrap: {
whiteSpace: 'nowrap'
}
}), {
name: 'onesy-Tooltip'
});
const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTooltip?.props?.default), props_), [props_]);
const Grow = React.useMemo(() => theme?.elements?.Grow || GrowElement, [theme]);
const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
const Modal = React.useMemo(() => theme?.elements?.Modal || ModalElement, [theme]);
const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
const {
tonal = true,
color = 'inverted',
open: open_,
openDefault,
name,
label: label_,
parent,
position = 'bottom',
switch: switch_ = true,
alignment = 'center',
portal = true,
fullWidth,
maxWidth = 'unset',
arrow,
anchor: anchor_,
anchorElement,
noMargin,
classNameSwitch,
transformOrigin,
transformOriginSwitch,
transformOriginRtl,
transformOriginRtlSwitch,
click,
touch: touch_,
longPress: longPress_ = false,
hover: hover_ = true,
focus: focus_ = false,
inset,
nowrap,
follow,
interactive,
onOpen: onOpen_,
onClose: onClose_,
onExited,
TransitionComponent = Grow,
TransitionComponentProps,
AppendProps,
ModalProps,
LabelProps,
LabelTextProps,
// other
elevation,
className,
style,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const [init, setInit] = React.useState(false);
const [open, setOpen] = React.useState(openDefault !== undefined ? openDefault : open_);
const [hover, setHover] = React.useState(false);
const [touch, setTouch] = React.useState(false);
const [focus, setFocus] = React.useState(false);
const [longPress, setLongPress] = React.useState(false);
const [anchor, setAnchor] = React.useState(anchor_);
const [inProp, setInProp] = React.useState(open_);
const refs = {
root: React.useRef(null),
open: React.useRef(false),
inProp: React.useRef(inProp),
longPress: React.useRef(false),
longPressTimer: React.useRef(null),
touchProps: React.useRef(touch_),
props: React.useRef(undefined)
};
refs.props.current = props;
refs.open.current = open;
refs.inProp.current = inProp;
refs.touchProps.current = touch_;
const {
classes
} = useStyle();
const styles = {
name: {},
nameRoot: {}
};
const label = name !== undefined ? name : label_;
const onMouseDown = React.useCallback(event => {
if (longPress_) refs.longPressTimer.current = setTimeout(() => setLongPress(true), 700);
if (is('function', children?.props.onMouseDown)) children.props.onMouseDown(event);
}, []);
const onMouseUp = React.useCallback(event => {
if (longPress_) {
clearTimeout(refs.longPressTimer.current);
setLongPress(false);
}
if (is('function', children?.props.onMouseUp)) children.props.onMouseUp(event);
}, []);
const onMouseEnter = React.useCallback(event => {
if (hover_) setHover(true);
if (is('function', children?.props.onMouseEnter)) children.props.onMouseEnter(event);
}, []);
const onMouseLeave = React.useCallback(event => {
if (refs.longPress.current) {
setLongPress(false);
if (refs.props.current.open === undefined) {
if (!refs.inProp.current) onClose();else setInProp(false);
}
}
if (hover_) setHover(false);
if (is('function', children?.props.onMouseLeave)) children.props.onMouseLeave(event);
}, []);
const onTouchStart = React.useCallback(event => {
if (!refs.touchProps.current) return;
setTouch(true);
if (is('function', children?.props.onTouchStart)) children.props.onTouchStart(event);
}, [touch_]);
const onTouchEnd = React.useCallback(event => {
if (!refs.touchProps.current) return;
setTouch(false);
if (is('function', children?.props.onTouchEnd)) children.props.onTouchEnd(event);
}, [touch_]);
const onFocus = React.useCallback(event => {
if (focus_) setFocus(true);
if (is('function', children?.props.onFocus)) children.props.onFocus(event);
}, []);
const onBlur = React.useCallback(event => {
if (refs.longPress.current) {
setLongPress(false);
if (refs.props.current.open === undefined) {
if (!refs.inProp.current) onClose();else setInProp(false);
}
}
if (focus_) setFocus(false);
if (is('function', children?.props.onBlur)) children.props.onBlur(event);
}, []);
const onMouseMove = React.useCallback(event => {
if (follow) {
setAnchor({
x: event.clientX,
y: event.clientY,
width: 10,
height: 20
});
}
if (is('function', children?.props.onMouseMove)) children.props.onMouseMove(event);
}, []);
const onOpen = () => {
if (!open) setOpen(true);
if (!refs.inProp.current) setInProp(true);
if (is('function', onOpen_) && !open) onOpen_();
};
const onClose = () => {
setOpen(false);
if (is('function', onClose_)) onClose_();
if (is('function', onExited)) onExited();
};
const onPreClose = () => {
if (!refs.inProp.current) onClose();else setInProp(false);
};
const onClick = React.useCallback(event => {
!refs.open.current ? onOpen() : onPreClose();
}, [onOpen, onPreClose]);
React.useEffect(() => {
setInit(true);
const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
rootDocument.addEventListener('touchend', onTouchEnd);
return () => {
rootDocument.removeEventListener('touchend', onTouchEnd);
};
}, []);
React.useEffect(() => {
setAnchor(anchor_);
}, [anchor_]);
React.useEffect(() => {
if (init) {
refs.open.current = open_;
if (open_) onOpen();else onPreClose();
}
}, [open_]);
React.useEffect(() => {
if (init && refs.props.current.open === undefined) {
refs.open.current = touch || hover || longPress;
if (refs.open.current) onOpen();else {
if (!refs.inProp.current) onClose();else setInProp(false);
}
}
}, [touch, hover, longPress]);
React.useEffect(() => {
if (init && refs.props.current.open === undefined) {
refs.open.current = focus;
if (refs.open.current) onOpen();else {
if (!refs.inProp.current) onClose();else setInProp(false);
}
}
}, [focus]);
React.useEffect(() => {
if (init) {
if (longPress) refs.open.current = longPress;
refs.longPress.current = longPress;
if (refs.open.current) onOpen();
}
}, [longPress]);
const resolvePosition = function () {
let switched = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (!switched) return position;
if (position === 'top') return 'bottom';
if (position === 'left') return 'right';
if (position === 'right') return 'left';
if (position === 'bottom') return 'top';
};
return /*#__PURE__*/React.createElement(Append, _extends({
open: open,
portal: portal,
anchor: anchor,
anchorElement: anchorElement,
position: position,
alignment: alignment,
switch: switch_,
inset: inset,
parent: parent,
padding: [8, 8]
}, AppendProps, {
element: items => {
const rtl = theme.direction === 'rtl';
const switched = items.values.switch;
if (!rtl) {
styles.nameRoot.transformOrigin = (!switched ? transformOrigin : transformOriginSwitch) || transformOrigin;
} else {
styles.nameRoot.transformOrigin = (!switched ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
}
if (!styles.nameRoot.transformOrigin) styles.nameRoot.transformOrigin = transformOrigin;
return /*#__PURE__*/React.createElement(Modal, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
items.ref.current = item;
},
open: open
}, interactive && {
onMouseEnter,
onTouchStart,
onMouseLeave,
onTouchEnd
}, {
modalWrapper: false,
portal: false,
background: false,
freezeScroll: false,
focus: false,
disableKeyboardClose: true
}, ModalProps, {
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-root', open && `onesy-Button-open`, touch && 'onesy-Tooltip-touch', longPress && 'onesy-Tooltip-long-press', hover && 'onesy-Tooltip-hover', focus && 'onesy-Tooltip-focus', `onesy-Tooltip-position-${position}`], className, classes.root, ModalProps?.className, switched && classNameSwitch]),
style: _objectSpread(_objectSpread(_objectSpread({}, items.style), style), ModalProps?.style)
}, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
in: inProp,
onExited: onClose,
add: true,
removeOnExited: true
}, TransitionComponentProps), /*#__PURE__*/React.createElement("div", {
role: "tooltip",
"aria-label": is('simple', label) ? label : undefined,
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-root'], classes.nameRoot, classes[`nameRoot_position_${resolvePosition(items.values.switch)}`], classes[`maxWidth_${maxWidth}`], noMargin && classes.nameRoot_noMargin, fullWidth && classes.fullWidth, nowrap && classes.nowrap]),
style: styles.nameRoot
}, is('simple', label) ? /*#__PURE__*/React.createElement(Surface, _extends({
tonal: tonal,
color: color
}, LabelProps, {
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps?.className, classes.name, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
style: _objectSpread(_objectSpread({}, styles.name), LabelProps?.style)
}), /*#__PURE__*/React.createElement("span", _extends({}, LabelTextProps, {
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps?.className])
}), label)) : /*#__PURE__*/React.cloneElement(label, {
className: classNames([label?.props?.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
}))));
}
}), children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
ref: item => {
if (children?.ref) {
if (is('function', children?.ref)) children?.ref(item);else children.ref.current = item;
}
refs.root.current = item;
},
onMouseMove
}, click && {
onClick: event => {
if (is('function', children?.props?.onClick)) children?.props?.onClick(event);
onClick(event);
}
}), {}, {
onFocus,
onBlur,
onMouseDown,
onMouseUp,
onMouseEnter,
onMouseLeave,
onTouchStart,
onTouchEnd
}))));
});
Tooltip.displayName = 'onesy-Tooltip';
export default Tooltip;