1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
 
const useSideShift = (): {
    left: boolean;
    right: boolean;
    onSideShiftLeft: (e: React.TouchEvent<HTMLDivElement>) => void;
    onSideShiftRight: (e: React.TouchEvent<HTMLDivElement>) => void;
} => {
    const [left, setLeft] = React.useState(false);
    const [right, setRight] = React.useState(false);
 
    const onSideShiftLeft = (e: React.TouchEvent<HTMLDivElement>) => {
        const { clientX } = e.touches[0];
        const { clientWidth } = e.currentTarget;
        if (clientX < clientWidth / 2) {
            setLeft(true);
        } else {
            setLeft(false);
        }
    };
 
    const onSideShiftRight = (e: React.TouchEvent<HTMLDivElement>) => {
        const { clientX } = e.touches[0];
        const { clientWidth } = e.currentTarget;
        if (clientX > clientWidth / 2) {
            setRight(false);
        } else {
            setRight(true);
        }
    };
 
    return { left, onSideShiftLeft, right, onSideShiftRight };
};
 
export default useSideShift;