@onesy/ui-react
Version:
UI for React
501 lines (500 loc) • 21 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Grow = _interopRequireDefault(require("../Grow"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _Append = _interopRequireDefault(require("../Append"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "open", "openDefault", "name", "label", "size", "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) { (0, _defineProperty2.default)(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; }
const useStyle = (0, _styleReact.style)(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: {},
name_size_small: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
borderRadius: `${(0, _utils.clamp)(theme.shape.radius.unit / 2, 0, 6)}px`,
lineHeight: '1.3'
}),
name_size_regular: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`,
borderRadius: `${(0, _utils.clamp)(theme.shape.radius.unit / 2, 0, 8)}px`,
lineHeight: '1.3'
}),
name_size_large: _objectSpread(_objectSpread({}, theme.typography.values.b1), {}, {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
borderRadius: `${(0, _utils.clamp)(theme.shape.radius.unit / 2, 0, 12)}px`,
lineHeight: '1.3'
}),
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: `${((0, _utils.isEnvironment)('browser') ? window.innerWidth : 1400) - +theme.methods.space.value('rg', '', 1)}px`
},
nowrap: {
whiteSpace: 'nowrap'
}
}), {
name: 'onesy-Tooltip'
});
const Tooltip = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTooltip) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Grow = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Grow) || _Grow.default;
const Append = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Append) || _Append.default;
const Modal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Modal) || _Modal.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
const {
ref,
tonal = true,
color = 'inverted',
open: open_,
openDefault,
name,
label: label_,
size = 'regular',
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 = (0, _objectWithoutProperties2.default)(props, _excluded);
const [init, setInit] = _react.default.useState(false);
const [open, setOpen] = _react.default.useState(openDefault !== undefined ? openDefault : open_);
const [hover, setHover] = _react.default.useState(false);
const [touch, setTouch] = _react.default.useState(false);
const [focus, setFocus] = _react.default.useState(false);
const [longPress, setLongPress] = _react.default.useState(false);
const [anchor, setAnchor] = _react.default.useState(anchor_);
const [inProp, setInProp] = _react.default.useState(open_);
const refs = {
root: _react.default.useRef(null),
open: _react.default.useRef(false),
inProp: _react.default.useRef(inProp),
longPress: _react.default.useRef(false),
longPressTimer: _react.default.useRef(null),
touchProps: _react.default.useRef(touch_),
props: _react.default.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 = event => {
if (longPress_) refs.longPressTimer.current = setTimeout(() => setLongPress(true), 700);
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseDown)) children.props.onMouseDown(event);
};
const onMouseUp = event_0 => {
if (longPress_) {
clearTimeout(refs.longPressTimer.current);
setLongPress(false);
}
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseUp)) children.props.onMouseUp(event_0);
};
const onMouseEnter = event_1 => {
if (hover_) setHover(true);
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseEnter)) children.props.onMouseEnter(event_1);
};
const onMouseLeave = event_2 => {
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 ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseLeave)) children.props.onMouseLeave(event_2);
};
const onTouchStart = event_3 => {
if (!refs.touchProps.current) return;
setTouch(true);
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchStart)) children.props.onTouchStart(event_3);
};
const onTouchEnd = event_4 => {
if (!refs.touchProps.current) return;
setTouch(false);
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onTouchEnd)) children.props.onTouchEnd(event_4);
};
const onFocus = event_5 => {
if (focus_) setFocus(true);
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onFocus)) children.props.onFocus(event_5);
};
const onBlur = event_6 => {
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 ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onBlur)) children.props.onBlur(event_6);
};
const onMouseMove = event_7 => {
if (follow) {
setAnchor({
x: event_7.clientX,
y: event_7.clientY,
width: 10,
height: 20
});
}
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.props.onMouseMove)) children.props.onMouseMove(event_7);
};
const onOpen = () => {
if (!open) setOpen(true);
if (!refs.inProp.current) setInProp(true);
if ((0, _utils.is)('function', onOpen_) && !open) onOpen_();
};
const onClose = () => {
setOpen(false);
if ((0, _utils.is)('function', onClose_)) onClose_();
if ((0, _utils.is)('function', onExited)) onExited();
};
const onPreClose = () => {
if (!refs.inProp.current) onClose();else setInProp(false);
};
const onClick = event_8 => {
!refs.open.current ? onOpen() : onPreClose();
};
_react.default.useEffect(() => {
var _refs$root$current;
setInit(true);
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
rootDocument.addEventListener('touchend', onTouchEnd);
return () => {
rootDocument.removeEventListener('touchend', onTouchEnd);
};
}, []);
_react.default.useEffect(() => {
setAnchor(anchor_);
}, [anchor_]);
_react.default.useEffect(() => {
if (init) {
refs.open.current = open_;
if (open_) onOpen();else onPreClose();
}
}, [open_]);
_react.default.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.default.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.default.useEffect(() => {
if (init) {
if (longPress) refs.open.current = longPress;
refs.longPress.current = longPress;
if (refs.open.current) onOpen();
}
}, [longPress]);
const resolvePosition = (switched = 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__*/(0, _jsxRuntime.jsx)(Append, _objectSpread(_objectSpread({
open: open,
portal: portal,
anchor: anchor,
anchorElement: anchorElement,
position: position,
alignment: alignment,
switch: switch_,
inset: inset,
parent: parent,
padding: [8, 8]
}, AppendProps), {}, {
element: items => {
var _props;
const rtl = theme.direction === 'rtl';
const switched_0 = items.values.switch;
if (!rtl) {
styles.nameRoot.transformOrigin = (!switched_0 ? transformOrigin : transformOriginSwitch) || transformOrigin;
} else {
styles.nameRoot.transformOrigin = (!switched_0 ? transformOriginRtl : transformOriginRtlSwitch) || transformOriginRtl;
}
if (!styles.nameRoot.transformOrigin) styles.nameRoot.transformOrigin = transformOrigin;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: item => {
if (ref) {
if ((0, _utils.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: (0, _styleReact.classNames)([(0, _utils2.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 === null || ModalProps === void 0 ? void 0 : ModalProps.className, switched_0 && classNameSwitch]),
style: _objectSpread(_objectSpread(_objectSpread({}, items.style), style), ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.style)
}, other), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({
in: inProp,
onExited: onClose,
add: true,
removeOnExited: true
}, TransitionComponentProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
role: "tooltip",
"aria-label": (0, _utils.is)('simple', label) ? label : undefined,
className: (0, _styleReact.classNames)([(0, _utils2.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,
children: (0, _utils.is)('simple', label) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, _objectSpread(_objectSpread({
tonal: tonal,
color: color
}, LabelProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
style: _objectSpread(_objectSpread({}, styles.name), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, LabelTextProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps === null || LabelTextProps === void 0 ? void 0 : LabelTextProps.className]),
children: label
}))
})) : /*#__PURE__*/_react.default.cloneElement(label, {
className: (0, _styleReact.classNames)([label === null || label === void 0 || (_props = label.props) === null || _props === void 0 ? void 0 : _props.className, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]])
})
})
}))
}));
},
children: children && (/*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({
ref: item_0 => {
if (children !== null && children !== void 0 && children.ref) {
if ((0, _utils.is)('function', children === null || children === void 0 ? void 0 : children.ref)) children === null || children === void 0 || children.ref(item_0);else children.ref.current = item_0;
}
refs.root.current = item_0;
},
onMouseMove
}, click && {
onClick: event_9 => {
var _children$props, _children$props2;
if ((0, _utils.is)('function', children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.onClick)) children === null || children === void 0 || (_children$props2 = children.props) === null || _children$props2 === void 0 || _children$props2.onClick(event_9);
onClick(event_9);
}
}), {}, {
onFocus,
onBlur,
onMouseDown,
onMouseUp,
onMouseEnter,
onMouseLeave,
onTouchStart,
onTouchEnd
})))
}));
};
Tooltip.displayName = 'onesy-Tooltip';
var _default = exports.default = Tooltip;