mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Change prettier rules
This commit is contained in:
ErickSkrauch
@@ -4,35 +4,35 @@ import { withRouter } from 'react-router-dom';
|
||||
import { restoreScroll } from './scroll';
|
||||
|
||||
interface OwnProps {
|
||||
top?: boolean; // don't touch any DOM and simply scroll to top on location change
|
||||
top?: boolean; // don't touch any DOM and simply scroll to top on location change
|
||||
}
|
||||
|
||||
type Props = RouteComponentProps & OwnProps;
|
||||
|
||||
class ScrollIntoView extends React.PureComponent<Props> {
|
||||
componentDidMount() {
|
||||
this.onPageUpdate();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.props.location !== prevProps.location) {
|
||||
this.onPageUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
onPageUpdate() {
|
||||
if (this.props.top) {
|
||||
restoreScroll();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.top) {
|
||||
return null;
|
||||
componentDidMount() {
|
||||
this.onPageUpdate();
|
||||
}
|
||||
|
||||
return <span ref={(el) => el && restoreScroll(el)} />;
|
||||
}
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.props.location !== prevProps.location) {
|
||||
this.onPageUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
onPageUpdate() {
|
||||
if (this.props.top) {
|
||||
restoreScroll();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.top) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <span ref={(el) => el && restoreScroll(el)} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(ScrollIntoView);
|
||||
|
||||
@@ -10,84 +10,84 @@ const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
|
||||
// нагрузку на рендеринг мы откладываем первый скрол на 200ms
|
||||
let isFirstScroll = true;
|
||||
let scrollJob: {
|
||||
hasAmplitude: boolean;
|
||||
start: number;
|
||||
y: number;
|
||||
amplitude: number;
|
||||
hasAmplitude: boolean;
|
||||
start: number;
|
||||
y: number;
|
||||
amplitude: number;
|
||||
} | null = null;
|
||||
|
||||
export function scrollTo(y: number) {
|
||||
if (scrollJob) {
|
||||
// we already scrolling, so simply change the coordinates we are scrolling to
|
||||
if (scrollJob.hasAmplitude) {
|
||||
const delta = y - scrollJob.y;
|
||||
scrollJob.amplitude += delta;
|
||||
if (scrollJob) {
|
||||
// we already scrolling, so simply change the coordinates we are scrolling to
|
||||
if (scrollJob.hasAmplitude) {
|
||||
const delta = y - scrollJob.y;
|
||||
scrollJob.amplitude += delta;
|
||||
}
|
||||
|
||||
scrollJob.y = y;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
scrollJob.y = y;
|
||||
const start = Date.now();
|
||||
let scrollWasTouched = false;
|
||||
scrollJob = {
|
||||
// NOTE: we may use some sort of debounce to wait till we catch all the
|
||||
// scroll requests after app state changes, but the way with hasAmplitude
|
||||
// seems to be more reliable
|
||||
hasAmplitude: false,
|
||||
start,
|
||||
y,
|
||||
amplitude: 0,
|
||||
};
|
||||
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
// wrap in requestAnimationFrame to optimize initial reading of scrollTop
|
||||
if (!scrollJob) {
|
||||
return;
|
||||
}
|
||||
|
||||
const start = Date.now();
|
||||
let scrollWasTouched = false;
|
||||
scrollJob = {
|
||||
// NOTE: we may use some sort of debounce to wait till we catch all the
|
||||
// scroll requests after app state changes, but the way with hasAmplitude
|
||||
// seems to be more reliable
|
||||
hasAmplitude: false,
|
||||
start,
|
||||
y,
|
||||
amplitude: 0,
|
||||
};
|
||||
const y = normalizeScrollPosition(scrollJob.y);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
// wrap in requestAnimationFrame to optimize initial reading of scrollTop
|
||||
if (!scrollJob) {
|
||||
return;
|
||||
scrollJob.hasAmplitude = true;
|
||||
scrollJob.y = y;
|
||||
scrollJob.amplitude = y - getScrollTop();
|
||||
|
||||
(function animateScroll() {
|
||||
if (!scrollJob) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { start, y, amplitude } = scrollJob;
|
||||
const elapsed = Date.now() - start;
|
||||
|
||||
let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
|
||||
|
||||
if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
|
||||
requestAnimationFrame(animateScroll);
|
||||
} else {
|
||||
// the last animation frame
|
||||
delta = 0;
|
||||
scrollJob = null;
|
||||
document.removeEventListener('mousewheel', markScrollTouched);
|
||||
document.removeEventListener('touchstart', markScrollTouched);
|
||||
}
|
||||
|
||||
if (scrollWasTouched) {
|
||||
// block any animation visualisation in case, when user touched scroll
|
||||
return;
|
||||
}
|
||||
|
||||
const newScrollTop = y + delta;
|
||||
window.scrollTo(0, newScrollTop);
|
||||
})();
|
||||
});
|
||||
|
||||
document.addEventListener('mousewheel', markScrollTouched);
|
||||
document.addEventListener('touchstart', markScrollTouched);
|
||||
function markScrollTouched() {
|
||||
scrollWasTouched = true;
|
||||
}
|
||||
|
||||
const y = normalizeScrollPosition(scrollJob.y);
|
||||
|
||||
scrollJob.hasAmplitude = true;
|
||||
scrollJob.y = y;
|
||||
scrollJob.amplitude = y - getScrollTop();
|
||||
|
||||
(function animateScroll() {
|
||||
if (!scrollJob) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { start, y, amplitude } = scrollJob;
|
||||
const elapsed = Date.now() - start;
|
||||
|
||||
let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
|
||||
|
||||
if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
|
||||
requestAnimationFrame(animateScroll);
|
||||
} else {
|
||||
// the last animation frame
|
||||
delta = 0;
|
||||
scrollJob = null;
|
||||
document.removeEventListener('mousewheel', markScrollTouched);
|
||||
document.removeEventListener('touchstart', markScrollTouched);
|
||||
}
|
||||
|
||||
if (scrollWasTouched) {
|
||||
// block any animation visualisation in case, when user touched scroll
|
||||
return;
|
||||
}
|
||||
|
||||
const newScrollTop = y + delta;
|
||||
window.scrollTo(0, newScrollTop);
|
||||
})();
|
||||
});
|
||||
|
||||
document.addEventListener('mousewheel', markScrollTouched);
|
||||
document.addEventListener('touchstart', markScrollTouched);
|
||||
function markScrollTouched() {
|
||||
scrollWasTouched = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -98,12 +98,11 @@ export function scrollTo(y: number) {
|
||||
* @returns {number}
|
||||
*/
|
||||
function normalizeScrollPosition(y: number): number {
|
||||
const contentHeight =
|
||||
(document.documentElement && document.documentElement.scrollHeight) || 0;
|
||||
const windowHeight: number = window.innerHeight;
|
||||
const maxY = contentHeight - windowHeight;
|
||||
const contentHeight = (document.documentElement && document.documentElement.scrollHeight) || 0;
|
||||
const windowHeight: number = window.innerHeight;
|
||||
const maxY = contentHeight - windowHeight;
|
||||
|
||||
return Math.min(y, maxY);
|
||||
return Math.min(y, maxY);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -112,41 +111,41 @@ function normalizeScrollPosition(y: number): number {
|
||||
* @param {?HTMLElement} targetEl - the element to scroll to
|
||||
*/
|
||||
export function restoreScroll(targetEl: HTMLElement | null = null) {
|
||||
const { hash } = window.location;
|
||||
const { hash } = window.location;
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
isFirstScroll = false;
|
||||
setTimeout(
|
||||
() => {
|
||||
isFirstScroll = false;
|
||||
|
||||
if (targetEl === null) {
|
||||
const id = hash.substr(1);
|
||||
if (targetEl === null) {
|
||||
const id = hash.substr(1);
|
||||
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
|
||||
targetEl = document.getElementById(id);
|
||||
}
|
||||
targetEl = document.getElementById(id);
|
||||
}
|
||||
|
||||
const viewPort = document.body;
|
||||
const viewPort = document.body;
|
||||
|
||||
if (!viewPort) {
|
||||
console.log('Can not find viewPort element'); // eslint-disable-line
|
||||
if (!viewPort) {
|
||||
console.log('Can not find viewPort element'); // eslint-disable-line
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let y = 0;
|
||||
let y = 0;
|
||||
|
||||
if (targetEl) {
|
||||
const { top } = targetEl.getBoundingClientRect();
|
||||
y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET;
|
||||
}
|
||||
if (targetEl) {
|
||||
const { top } = targetEl.getBoundingClientRect();
|
||||
y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET;
|
||||
}
|
||||
|
||||
scrollTo(y);
|
||||
},
|
||||
isFirstScroll ? 200 : 0,
|
||||
);
|
||||
scrollTo(y);
|
||||
},
|
||||
isFirstScroll ? 200 : 0,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -155,11 +154,11 @@ export function restoreScroll(targetEl: HTMLElement | null = null) {
|
||||
* @returns {number}
|
||||
*/
|
||||
export function getScrollTop(): number {
|
||||
const doc = document.documentElement;
|
||||
const doc = document.documentElement;
|
||||
|
||||
if (doc) {
|
||||
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
|
||||
}
|
||||
if (doc) {
|
||||
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
|
||||
}
|
||||
|
||||
return 0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user