ng-lib-tsx
Version:
pc端基础类库
169 lines • 7.72 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
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; }
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; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { NG } from 'ng-base-stand';
import React, { useLayoutEffect, useRef } from 'react';
var globalWindow = window;
/**
* 组件自适应容器
* @param children 需要自适应的组件
* @param style
* @param onResize 父容器高宽变化时回调，undefined 则直接返回children组件
* @param beforeResize
* @param delay
* @constructor
*/
export function AutoResize(_ref) {
var children = _ref.children,
style = _ref.style,
onResize = _ref.onResize,
beforeResize = _ref.beforeResize,
_ref$delay = _ref.delay,
delay = _ref$delay === void 0 ? undefined : _ref$delay;
var objRef = useRef();
var mountRef = useRef(false);
var beforeResizeRef = useRef(beforeResize);
beforeResizeRef.current = beforeResize;
var supportResizeObserver = globalWindow.ResizeObserver;
useLayoutEffect(function () {
mountRef.current = true;
if (onResize) {
var lastBcr = {
width: 0,
height: 0
};
var pEl = objRef.current.parentElement;
var offset = pEl ? {
x: (parseFloat(NG.getStyle(pEl, 'paddingLeft')) || 0) + (parseFloat(NG.getStyle(pEl, 'paddingRight')) || 0),
y: (parseFloat(NG.getStyle(pEl, 'paddingTop')) || 0) + (parseFloat(NG.getStyle(pEl, 'paddingBottom')) || 0)
} : {
x: 0,
y: 0
};
var onResizeEvent = function onResizeEvent() {
if (!mountRef.current || !objRef.current || !objRef.current.offsetParent) {
return;
}
var bcr = {
width: objRef.current.clientWidth,
height: objRef.current.clientHeight
};
if (bcr.width !== lastBcr.width || bcr.height !== lastBcr.height) {
lastBcr.width = bcr.width;
lastBcr.height = bcr.height;
onResize({
width: bcr.width - offset.x,
height: bcr.height - offset.y
});
}
};
var debounce = function debounce(func, delayTime) {
var timer = null;
var exec = delayTime ? setTimeout : window['requestIdleCallback'] || window['requestAnimationFrame'];
var cancel = delayTime ? clearTimeout : window['cancelIdleCallback'] || window['cancelAnimationFrame'];
return function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
timer && cancel(timer);
!timer && func.apply(void 0, args);
timer = exec(function () {
timer = null;
func.apply(void 0, args);
}, delayTime || undefined);
};
};
var resizeObserver;
var targetView;
var debounceFn = debounce(onResizeEvent, delay !== null && delay !== void 0 ? delay : 60);
var resize = function resize() {
var _beforeResizeRef$curr;
if (!mountRef.current || !objRef.current) {
return;
}
(_beforeResizeRef$curr = beforeResizeRef.current) === null || _beforeResizeRef$curr === void 0 ? void 0 : _beforeResizeRef$curr.call(beforeResizeRef, {
width: objRef.current.clientWidth,
height: objRef.current.clientHeight
});
debounceFn();
};
if (supportResizeObserver) {
resizeObserver = new supportResizeObserver(resize);
resizeObserver.observe(objRef.current);
} else {
targetView = objRef.current.contentWindow;
if (targetView) {
targetView.addEventListener('resize', resize);
} else {
// NG客户端第一次可能拿不到contentWindow
setTimeout(function () {
var _objRef$current$conte;
(_objRef$current$conte = objRef.current.contentWindow) === null || _objRef$current$conte === void 0 ? void 0 : _objRef$current$conte.addEventListener('resize', resize);
}, 300);
}
}
if (objRef.current.clientWidth > 0) {
onResizeEvent();
} else if (!supportResizeObserver) {
// NG客户端第一次不会自动触发resize，导致数据渲染不出来
setTimeout(function () {
if (objRef.current.clientWidth > 0) {
onResizeEvent();
} else {
setTimeout(function () {
onResizeEvent();
}, 300);
}
});
}
return function () {
mountRef.current = false;
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = null;
} else {
var _objRef$current$conte2;
(_objRef$current$conte2 = objRef.current.contentWindow) === null || _objRef$current$conte2 === void 0 ? void 0 : _objRef$current$conte2.removeEventListener('resize', resize);
}
};
}
return function () {
mountRef.current = false;
};
}, [onResize]);
var props = supportResizeObserver ? {} : {
type: 'text/html',
data: 'about:blank'
};
return _jsxs(_Fragment, {
children: [children, onResize && /*#__PURE__*/React.createElement(supportResizeObserver ? 'div' : 'iframe', _objectSpread({
ref: objRef,
tabIndex: -1,
style: _objectSpread({
display: 'block',
position: 'absolute',
top: 0,
left: 0,
height: '100%',
width: '100%',
overflow: 'hidden',
opacity: 0,
pointerEvents: 'none',
zIndex: -1
}, style)
}, props))]
});
}
/**
* 不支持ResizeObserver的浏览器，resize事件绑定在window页面，需要手动调用触发
*/
export function polyfillResize() {
var supportResizeObserver = globalWindow.ResizeObserver;
if (!supportResizeObserver) {
window.dispatchEvent(new Event('resize'));
}
}