ultra-design
Version:
237 lines (213 loc) • 8.93 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var winhooks = require('winhooks');
var placement = require('./placement.js');
var layer = require('./layer.js');
var mergeProps = require('../utils/mergeProps.js');
var withStyle = require('../utils/withStyle.js');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultPositionRect = {
top: -1000,
left: -1000,
bottom: -1000,
right: -1000,
width: 0,
height: 0,
x: -1000,
y: -1000
};
var defaultProps = {
trigger: 'hover',
defaultVisible: false,
placement: 'bottom',
showDelay: 50,
hideDelay: 50,
offset: 12,
showArrow: true,
transitionClassName: 'ultra-trigger-layer-fade',
transitionTimeout: 300,
name: 'ultra-trigger'
};
var TriggerComponent = /*#__PURE__*/React.forwardRef(function (p, r) {
var props = mergeProps.useMergeProps(defaultProps, p);
var children = props.children,
trigger = props.trigger,
placement$1 = props.placement,
defaultVisible = props.defaultVisible,
customVisible = props.visible,
onVisibleChange = props.onVisibleChange,
showDelay = props.showDelay,
hideDelay = props.hideDelay,
showArrow = props.showArrow,
offset = props.offset,
getLayerContainer = props.getLayerContainer,
triggerRef = props.triggerRef,
customLayerStyle = props.layerStyle;
var _useState = React.useState(defaultVisible),
_useState2 = _slicedToArray__default["default"](_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = React.useState(defaultPositionRect),
_useState4 = _slicedToArray__default["default"](_useState3, 2),
rect = _useState4[0],
setRect = _useState4[1];
var timer = React.useRef();
var layerOffset = showArrow ? offset : offset - 6;
var childRef = React.useRef(null);
var layerRef = React.useRef(null);
var updateRect = function updateRect() {
var trigger = triggerRef || childRef;
if (!trigger.current) return;
if (customLayerStyle) return;
var triggerRect = trigger.current.getBoundingClientRect();
if (!getLayerContainer) {
var _document$documentEle = document.documentElement,
scrollTop = _document$documentEle.scrollTop,
scrollLeft = _document$documentEle.scrollLeft;
setRect(_objectSpread(_objectSpread({}, triggerRect), {}, {
width: triggerRect.width || rect.right - rect.left,
height: triggerRect.height || rect.bottom - rect.top,
top: triggerRect.top + scrollTop,
bottom: triggerRect.bottom + scrollTop,
left: triggerRect.left + scrollLeft,
right: triggerRect.right + scrollLeft
}));
} else {
var _trigger$current = trigger.current,
offsetHeight = _trigger$current.offsetHeight,
offsetLeft = _trigger$current.offsetLeft,
offsetTop = _trigger$current.offsetTop,
offsetWidth = _trigger$current.offsetWidth;
setRect(_objectSpread(_objectSpread({}, triggerRect), {}, {
width: offsetWidth,
height: offsetHeight,
top: offsetTop,
bottom: offsetTop + offsetHeight,
left: offsetLeft,
right: offsetLeft + offsetWidth
}));
}
};
React.useEffect(function () {
updateRect();
}, [childRef.current ? childRef : triggerRef, visible]);
React.useEffect(function () {
window.addEventListener('resize', updateRect);
return function () {
window.removeEventListener('resize', updateRect);
};
}, []);
var changeVisible = function changeVisible(next) {
var clear = function clear() {
clearTimeout(timer.current);
timer.current = undefined;
};
var handler = function handler(next) {
setVisible(next);
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(next);
clear();
};
clear();
if (next) {
timer.current = window.setTimeout(function () {
return handler(true);
}, showDelay);
return;
}
var hideDelayWithoutClick = trigger === 'click' ? 0 : hideDelay;
timer.current = window.setTimeout(function () {
handler(false);
}, hideDelayWithoutClick);
};
var prevCustomVisbile = winhooks.usePrevious(customVisible);
React.useEffect(function () {
if (customVisible === undefined) return;
if (prevCustomVisbile === undefined && prevCustomVisbile === customVisible) return;
changeVisible(customVisible);
}, [customVisible]);
var mouseEventHandler = function mouseEventHandler(next) {
return trigger === 'hover' && changeVisible(next);
};
var clickEventHandler = function clickEventHandler() {
trigger === 'click' && changeVisible(!visible);
};
winhooks.useClickOutSide(childRef.current ? childRef : triggerRef, function () {
trigger === 'click' && changeVisible(false);
}, [layerRef]);
React.useImperativeHandle(r, function () {
return {
layerElement: layerRef.current,
update: updateRect,
visible: visible,
changeVisible: changeVisible
};
}, [layerRef.current, visible]);
var isElement = /*#__PURE__*/React__default["default"].isValidElement(children);
var layerStyle = placement.getPosition(placement$1, rect, layerOffset);
var child = isElement && /*#__PURE__*/React.cloneElement(children, {
ref: childRef,
onMouseEnter: function onMouseEnter() {
return mouseEventHandler(true);
},
onMouseLeave: function onMouseLeave() {
return mouseEventHandler(false);
},
onClick: function onClick(e) {
var _children$props$onCli, _children$props;
clickEventHandler();
isElement && ((_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, e));
}
});
React.useEffect(function () {
if (!(triggerRef !== null && triggerRef !== void 0 && triggerRef.current)) return;
triggerRef.current.addEventListener('mouseenter', function () {
return mouseEventHandler(true);
});
triggerRef.current.addEventListener('mouseleave', function () {
return mouseEventHandler(false);
});
triggerRef.current.addEventListener('click', function () {
return changeVisible(!visible);
});
return function () {
if (!(triggerRef !== null && triggerRef !== void 0 && triggerRef.current)) return;
triggerRef.current.removeEventListener('mouseenter', function () {
return mouseEventHandler(true);
});
triggerRef.current.removeEventListener('mouseleave', function () {
return mouseEventHandler(false);
});
triggerRef.current.removeEventListener('click', function () {
return changeVisible(!visible);
});
};
}, [triggerRef, visible]);
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [child, jsxRuntime.jsx(layer["default"], _objectSpread(_objectSpread({
ref: layerRef
}, props), {}, {
visible: visible,
childRef: childRef.current ? childRef : triggerRef,
style: customLayerStyle || layerStyle,
onMouseEnter: function onMouseEnter() {
return mouseEventHandler(true);
},
onMouseLeave: function onMouseLeave() {
return mouseEventHandler(false);
}
}))]
});
});
TriggerComponent.displayName = 'UltraTrigger';
var Trigger = withStyle["default"](TriggerComponent);
var Trigger$1 = Trigger;
exports["default"] = Trigger$1;