@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
45 lines (44 loc) • 1.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCursorRepaint = useCursorRepaint;
var _react = require("react");
var _chaynsApi = require("chayns-api");
/**
* Forces multiple repaints on the referenced element whenever it gains focus.
* Useful for Safari/iOS WebView cursor misalignment issues.
*/
function useCursorRepaint(ref) {
const {
app,
os
} = (0, _chaynsApi.useDevice)();
(0, _react.useEffect)(() => {
// only run on iOS in chayns app
if ((app === null || app === void 0 ? void 0 : app.flavor) !== _chaynsApi.AppFlavor.Chayns || os !== 'iOS') {
return () => {};
}
const triggerRepaint = (el, delay) => {
window.setTimeout(() => {
// eslint-disable-next-line no-param-reassign
el.style.transform = 'translateZ(0px)';
requestAnimationFrame(() => {
// eslint-disable-next-line no-param-reassign
el.style.transform = '';
});
}, delay);
};
const handleFocus = () => {
const el = ref.current;
if (!el) return;
[50, 100, 150, 200, 250, 300, 350, 400, 450, 500].forEach(delay => triggerRepaint(el, delay));
};
const el = ref.current;
if (el) el.addEventListener('focus', handleFocus);
return () => {
if (el) el.removeEventListener('focus', handleFocus);
};
}, [app, os, ref]);
}
//# sourceMappingURL=resize.js.map