@onesy/ui-react
Version:
UI for React
142 lines (138 loc) • 7.16 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 _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
const _excluded = ["ref", "value", "root", "render", "rate", "scrollDirection", "transformDirection", "transition", "disabled", "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-Parallax'
});
const Parallax = 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.onesyParallax) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const {
ref,
value: value_,
// element
root = window.document,
render,
// value or a method
rate = -1,
scrollDirection = 'vertical',
transformDirection = 'vertical',
transition = `transform ${theme.transitions.duration.xxs}`,
disabled: disabled_,
className,
style,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
value: _react.default.useRef(undefined),
scrollDirection: _react.default.useRef(undefined),
transformDirection: _react.default.useRef(undefined),
rate: _react.default.useRef(undefined),
disabled: _react.default.useRef(undefined)
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [disabled_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [disabled_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const disabled = (0, _utils2.valueBreakpoints)(disabled_, false, breakpoints, theme);
const [value, setValue] = _react.default.useState(0);
refs.value.current = value;
refs.scrollDirection.current = scrollDirection;
refs.transformDirection.current = transformDirection;
refs.rate.current = rate;
refs.disabled.current = disabled;
const update = () => {
let valueNew;
if (refs.disabled.current) return;
// Element rect
const rect = refs.root.current.getBoundingClientRect();
// Viewport
if (
// Vertically
(
// Element in view
rect.y >= 0 && rect.bottom <= window.innerHeight ||
// Element y out of view, but bottom in view
rect.y < 0 && rect.bottom >= 0 ||
// Element bottom out of view, but y in view
rect.bottom > window.innerHeight && rect.y <= window.innerHeight) && (
// Horizontally
// Element in view
rect.x >= 0 && rect.right <= window.innerWidth ||
// Element x out of view, but right in view
rect.x < 0 && rect.right >= 0 ||
// Element right out of view, but x in view
rect.right > window.innerWidth && rect.y <= window.innerWidth)) {
const padding = Math.abs((window.innerHeight - rect.height) / 2);
const max = rect.height + padding;
valueNew = ((window.innerHeight - rect.y) / max - 1) * 100;
}
if (valueNew !== undefined && valueNew !== refs.value.current) setValue((0, _utils.clamp)(valueNew, -100, 100));
};
_react.default.useEffect(() => {
// Update on init
if (!props.hasOwnProperty('value')) update();
}, []);
_react.default.useEffect(() => {
if (!props.hasOwnProperty('value') && root !== null && root !== void 0 && root.addEventListener) root.addEventListener('scroll', update);
return () => {
if (!props.hasOwnProperty('value') && root !== null && root !== void 0 && root.addEventListener) root.removeEventListener('scroll', update);
};
}, [root]);
_react.default.useEffect(() => {
if (value_ !== undefined && value_ !== refs.value.current) setValue(value_);
}, [value_]);
let styles = {};
if ((0, _utils.is)('function', render)) styles = _objectSpread({}, render(value, root, rate, scrollDirection, transformDirection, transition, props));else {
let valueUpdate = 0;
if ((0, _utils.is)('function', rate)) valueUpdate = rate(value);else valueUpdate = value * rate;
if (transformDirection === 'vertical') styles.transform = `translate3d(0, ${valueUpdate}%, 0)`;else styles.transform = `translate3d(${valueUpdate}%, 0, 0)`;
styles.transition = transition;
}
return (0, _utils.is)('function', children) ? children(value, styles, other) : /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Parallax', theme) && [`onesy-Parallax-root`], className, classes.root]),
ref: item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
}
refs.root.current = item_0;
if (children.ref) {
if ((0, _utils.is)('function', children.ref)) children.ref(item_0);else children.ref.current = item_0;
}
},
style: _objectSpread(_objectSpread({}, children.props.style), styles)
}, other));
};
Parallax.displayName = 'onesy-Parallax';
var _default = exports.default = Parallax;