@onesy/ui-react
Version:
UI for React
161 lines (152 loc) • 7.4 kB
JavaScript
;
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 _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "ids", "offset", "offsetStart", "addClassName", "addStyle", "onActive", "parent", "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: {}
}), {
name: 'onesy-SpyScroll'
});
const SpyScroll = props_ => {
var _theme$ui, _theme$ui2;
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.onesySpyScroll) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const {
ref,
ids,
offset,
offsetStart,
addClassName,
addStyle,
onActive,
parent,
className,
style,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
active: _react.default.useRef([]),
parent: _react.default.useRef(parent),
props: _react.default.useRef(undefined),
onActive: _react.default.useRef(onActive)
};
refs.props.current = props;
refs.parent.current = parent;
refs.onActive.current = onActive;
_react.default.useEffect(() => {
var _refs$root$current2;
// Listen to window scroll value
const isVisible = element => new Promise(resolve => {
if (!(element && refs.root.current)) return resolve(null);
const observer = new IntersectionObserver(entries => {
const intersecting = entries === null || entries === void 0 ? void 0 : entries[0].isIntersecting;
// clean up
observer.disconnect();
return resolve(intersecting);
}, {
root: refs.parent.current
});
observer.observe(element);
});
const method = async () => {
var _refs$root$current;
// Find first active id
let id;
const rootElement_ = (0, _utils.isEnvironment)('browser') ? refs.parent.current || ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
for (const item of refs.props.current.ids || []) {
id = await isVisible(rootElement_.querySelector(`#${item}`.replace('##', '#')));
if (id) {
id = item;
break;
}
}
if (id && refs.root.current) {
// Update all elements in root
// Remove active className and style from
// all previous active elements
for (const element_0 of refs.active.current) {
// addClassName
element_0.classList.remove(refs.props.current.addClassName);
// addStyle
if (refs.props.current.addStyle) {
Object.keys(refs.props.current.addStyle).forEach(item_0 => {
element_0.style.removeProperty(item_0);
});
}
}
// And add to all elements with href containing #id with addClassName and style
refs.active.current = (0, _utils.unique)([
// a elemnts with id
...Array.from(refs.root.current.querySelectorAll(`[href$='#${id}']`)),
// elements active for multiple ids
...Array.from(refs.root.current.querySelectorAll(`[data-onesy-spy-scroll~=${id}]`))]).filter(Boolean);
for (const element_1 of refs.active.current) {
// addClassName
if (!element_1.classList.contains(refs.props.current.addClassName)) element_1.classList.add(refs.props.current.addClassName);
// addStyle
if (refs.props.current.addStyle) {
Object.keys(refs.props.current.addStyle).forEach(item_1 => {
element_1.style[item_1] = refs.props.current.addStyle[item_1];
});
}
}
// onActive
if ((0, _utils.is)('function', refs.onActive.current)) refs.onActive.current(id);
} else {
// Remove active className and style from
// all previous active elements
for (const element_2 of refs.active.current) {
// addClassName
element_2.classList.remove(refs.props.current.addClassName);
// addStyle
if (refs.props.current.addStyle) {
Object.keys(refs.props.current.addStyle).forEach(item_2 => {
element_2.style.removeProperty(item_2);
});
}
}
}
};
// Initial
method();
const rootElement = (0, _utils.isEnvironment)('browser') ? refs.parent.current || ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
if (refs.root.current) {
rootElement.addEventListener('scroll', method);
}
return () => {
if (refs.root.current) {
rootElement.removeEventListener('scroll', method);
}
};
}, [parent]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
children: /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
ref: item_3 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_3);else ref.current = item_3;
}
refs.root.current = item_3;
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('SpyScroll', theme) && ['onesy-SpyScroll-root'], children.props.className, className, classes.root])
}, other))
});
};
SpyScroll.displayName = 'onesy-SpyScroll';
var _default = exports.default = SpyScroll;