const { useState, useRef, useCallback, useEffect } = React;
const { createGlobalStyle, css } = styled;
const GlobalStyle = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');
:root {
--accent-color: rgb(62, 93, 228);
--text-color: #333;
--bg-color: #CFDBEA;
--button-color: #333;
--button-text-color: #fff;
--button-disabled-color: #ccc;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Orelega One', cursive;
font-size: 4vmin;
margin: 0;
height: 100vh;
width: 100%;
}
`;
const Spacer = ({ size, horizontal }) => {
return (
<div
style={
horizontal
? { width: size, height: 'auto', display: 'inline-block', flexShrink: 0 }
: { width: 'auto', height: size, flexShrink: 0 }
}
/>
)
}
const StyledTimeDisplay = styled.div`
color: ${({ textColor }) => textColor ? textColor : `#333`};
font-weight: bold;
font-size: ${({ fontSize }) => fontSize ? fontSize : '1em'};
`;
const TimeDisplay = ({ className, time, delimiter, fontSize, textColor }) => {
const newTime = Array.isArray(time) ? time : Object.values(time)
return (
<StyledTimeDisplay
className={className}
fontSize={fontSize}
textColor={textColor}
>
{
newTime.map((n, i, array) => (
<>
<span>{String(n).padStart(2, "0")}</span>
{(i !== array.length - 1) && delimiter}
</>
))
}
</StyledTimeDisplay>
);
};
const StyledWheelPicker = styled.div`
display: grid;
grid-template-rows: repeat(2, auto);
${({ itemLength, delimiterLength }) => `
grid-template-columns: repeat(${itemLength + delimiterLength}, auto);
`}// = auto-fill
place-items: center;
align-items: center;
justify-content: center;
gap: .5em;
& .delimiter {
font-size: .75em;
&-1 {
grid-column: 2 / 3;
}
&-2 {
grid-column: 4 / 5;
}
&-3 {
grid-column: 6 / 7;
}
}
& .dial {
&-display {
border-top: .1em solid #333;
border-bottom: .1em solid #333;
height: 1em;
overflow-y: hidden;
padding: .4em;
&-1 {
grid-column: 1 / 2;
}
&-2 {
grid-column: 3 / 4;
}
&-3 {
grid-column: 5 / 6;
}
}
&-title {
font-size: .6em;
&-1 {
grid-column: 1 / 2;
}
&-2 {
grid-column: 3 / 4;
}
&-3 {
grid-column: 5 / 6;
}
}
&-nums {
cursor: pointer;
position: relative;
top: 0em;
transition: .2s linear;
user-select: none;
}
&-num {
height: 1em;
}
}
`
const WheelPicker = ({ className, items, delimiters, handleWheel, handleDown }) => {
const itemsArray = Object.keys(items)//Object.entries(items).map((t) => t.shift())
/*useEffect(() => {
console.log('items', Object.entries(items).map((t) => t.shift()))
}, [items])*/
return (
<StyledWheelPicker
className={className}
itemLength={items.length}
delimiterLength={delimiters.length}
>
{
itemsArray.map((item, i, arr) => (
<div className={`dial-title dial-title-${i + 1}`}>
{item}
</div>
))
}
{
itemsArray.map((item, i, arr) => (
<>
<div className={`dial-display dial-display-${i + 1}`}>
<div
className={`dial-nums dial-nums-${i}
draggable`}
key={i}
id={item}
onMouseDown={handleDown}
onWheel={handleWheel}
>
{
items[item].map((elem, i, array) => (
<div className="dial-num" key={i}>{String(elem).padStart(2, "0")}</div>
))
}
</div>
</div>
{delimiters[i] && <div className={`delimiter delimiter-${i + 1}`}>{delimiters[i]}</div>}
</>
))
}
<Spacer size=".5em" horizontal={true} />
</StyledWheelPicker>
)
}
/*const useDragElement = () => {
const [dragAmount, setDragAmount] = useState({ x: 0, y: 0 });
const [elementPosition, setElementPosition] = useState({ top: 0, left: 0 });
const startPoint = useRef({ x: 0, y: 0 });
const draggingElement = useRef(null);
const verticalDirection = useRef(null);
const horizontalDirection = useRef(null);
const prevPosition = useRef({ x: 0, y: 0 });
const handleDown = useCallback((e) => {
draggingElement.current = e.currentTarget;
//const rect = draggingElement.current.getBoundingClientRect();
//const top = rect.top;
//const left = rect.left;
const x = e.clientX - draggingElement.current.offsetLeft;//left;
const y = e.clientY - draggingElement.current.offsetTop;//top;
startPoint.current = { x, y };
});
const handleMove = useCallback((e) => {
if (!draggingElement.current) return;
const x = e.clientX - startPoint.current.x;
const y = e.clientY - startPoint.current.y;
if (x > prevPosition.current.x) {
horizontalDirection.current = "right";
}
if(x < prevPosition.current.x) {
horizontalDirection.current = "left";
}
if (y > prevPosition.current.y) {
verticalDirection.current = "bottom";
}
if (y < prevPosition.current.y) {
verticalDirection.current = "top";
}
setDragAmount({ x, y });
//draggingElement.current.style.transform = `translate3d(${x}px, ${y}px, 0)`
prevPosition.current = {
x,
y
};
});
const handleUp = useCallback((e) => {
if (!draggingElement.current) return;
setElementPosition((p) => ({
top: dragAmount.y,
left: dragAmount.x
}));
//draggingElement.current.style.top = `${dragAmount.y}px`
//draggingElement.current.style.left = `${dragAmount.x}px`
draggingElement.current = null;
console.log('up')
});
useEffect(() => {
document.body.addEventListener("mousemove", handleMove);
document.body.addEventListener("mouseup", handleUp);
document.body.addEventListener("mouseleave", handleUp);
return () => {
document.body.removeEventListener("mousemove", handleMove);
document.body.removeEventListener("mouseup", handleUp);
document.body.removeEventListener("mouseleave", handleUp);
};
}, []);
return [
draggingElement.current,
dragAmount,
elementPosition,
verticalDirection.current,
horizontalDirection.current,
handleDown
]
}*/
const useDraggableElements = () => {
const [draggableElements, setDraggableElements] = useState([])
const startPoint = useRef({ x: 0, y: 0 });
const draggingElement = useRef(null);
const draggingDirection = useRef({
horizontal: null,
vertical: null,
})
const handleDown = useCallback((e) => {
draggingElement.current = e.currentTarget;
const draggableElements = document.getElementsByClassName("draggable");
for(let i = 0; i < draggableElements.length; i++) {
draggableElements[i].style.zIndex = `1000`
}
draggingElement.current.style.zIndex = `1001`
setDraggableElements(currentDraggableElements => {
currentDraggableElements.forEach(elm => {
if(draggingElement.current.className.includes(elm.name)) {
const x = e.pageX - elm.x
const y = e.pageY - elm.y
startPoint.current = { x, y };
}
})
return currentDraggableElements
})
console.log(startPoint.current)
});
const handleMove = useCallback((e) => {
e.preventDefault();
if (!draggingElement.current) return;
const x = e.pageX - startPoint.current.x;
const y = e.pageY - startPoint.current.y;
setDraggableElements(currentDraggableElements => {
currentDraggableElements.forEach(elm => {
if(draggingElement.current.className.includes(elm.name)){
if (x > elm.x) {
draggingDirection.current.horizontal = "right";
}
if (x < elm.x) {
draggingDirection.current.horizontal = "left";
}
if (y > elm.y) {
draggingDirection.current.vertical = "bottom";
}
if (y < elm.y) {
draggingDirection.current.vertical = "top";
}
}
})
return currentDraggableElements
})
draggingElement.current.style.transform = `translate3d(${x}px, ${y}px, 0)`;
setDraggableElements(currentDraggableElements =>
currentDraggableElements.map(elm =>
draggingElement.current.className.includes(elm.name) ? ({
...elm,
x,
y
}) : elm))
});
const handleUp = useCallback((e) => {
if (!draggingElement.current) return;
draggingElement.current = null;// nullにしないと、先頭でif (!draggingElement.current) return;としているため、要素がカーソルから離れない
console.log("up");
});
// 初回のレンダー後に一度だけ行う処理
useEffect(() => {
const draggableElements = document.getElementsByClassName("draggable");
for(let i = 0; i < draggableElements.length; i++) {
draggableElements[i].addEventListener("mousedown", handleDown);
}
document.body.addEventListener("mousemove", handleMove);
document.body.addEventListener("mouseup", handleUp);
document.body.addEventListener("mouseleave", handleUp);
setDraggableElements(currentDraggableElements => {
const newDraggableElements = [...currentDraggableElements]
for(let i = 0; i < draggableElements.length; i++) {
newDraggableElements[i] = {
name: draggableElements[i].className,
x: 0,
y: 0
}
}
return newDraggableElements
})
return () => {
document.body.removeEventListener("mousemove", handleMove);
document.body.removeEventListener("mouseup", handleUp);
document.body.removeEventListener("mouseleave", handleUp);
};
}, [])
// ドラッグしている方向
useEffect(() => {
console.log(draggingDirection.current);
}, [draggableElements]);
return [
draggingElement.current,
draggableElements,
draggingDirection.current
];
};
const useWheelPicker = (nums) => {
const [selectNum, setSelectNum] = useState(() => {
const newNums = {}
Object.keys(nums).forEach((key) => {
newNums[key] = nums[key][0]
})
return newNums
})
/*const [
draggingElement,
dragAmount,
elementPosition,
verticalDirection,
horizontalDirection,
handleDown
] = useDragElement()*/
const [
draggingElement,
draggableElements,
draggingDirection
] = useDraggableElements();
const handleWheel = useCallback((e) => {
const deltaY = e.deltaY;
const elm = e.currentTarget;
const targetNums = nums[elm.id]
setSelectNum(p => {
const currentSelectNum = Math.abs(p[elm.id])
const currentSelectNumIndex = targetNums.indexOf(currentSelectNum)
const firstIndex = 0
const lastIndex = targetNums.length - 1
console.log('currentSelectNum', currentSelectNum)
console.log('currentSelectNumIndex', currentSelectNumIndex)
const firstNum = targetNums[firstIndex]
const lastNum = targetNums[lastIndex]
if (e.deltaY > firstIndex) {// 下にホイール
const nextIndex = currentSelectNumIndex + 1
const nextNum = targetNums[currentSelectNumIndex + 1];
console.log('nextNum', nextNum)
if(nextIndex > lastIndex){
elm.style.transform = `translate3d(0, ${firstIndex}em, 0)`
return {
...p,
[elm.id]: firstNum
}
}else{
elm.style.transform = `translate3d(0, -${nextIndex}em, 0)`
return {
...p,
[elm.id]: nextNum
}
}
}else{// 上にホイール
const prevIndex = currentSelectNumIndex - 1
const prevNum = targetNums[currentSelectNumIndex - 1];
if(prevIndex < firstIndex) {
elm.style.transform = `translate3d(0, -${lastIndex}em, 0)`
return {
...p,
[elm.id]: lastNum
}
}else{
elm.style.transform = `translate3d(0, -${prevIndex}em, 0)`
return {
...p,
[elm.id]: prevNum
}
}
}
})
});
useEffect(() => {
if(!draggingElement) return;
//if(Math.abs(dragAmount.y) % 8 !== 0) return
//console.log('dragAmount.y', dragAmount.y)
console.log('draggingElement', draggingElement)
const targetNums = nums[draggingElement.id]
setSelectNum(p => {
const currentSelectNum = Math.abs(p[draggingElement.id])
const currentSelectNumIndex = targetNums.indexOf(currentSelectNum)
const firstIndex = 0
const lastIndex = targetNums.length - 1
console.log('currentSelectNum', currentSelectNum)
console.log('currentSelectNumIndex', currentSelectNumIndex)
const firstNum = targetNums[firstIndex]
const lastNum = targetNums[lastIndex]
if(draggingDirection.vertical === 'top') {
// 上へドラッグ
const prevIndex = currentSelectNumIndex - 1
const prevNum = targetNums[currentSelectNumIndex - 1];
if(prevIndex < firstIndex) {
draggingElement.style.transform = `translate3d(0, -${lastIndex}em, 0)`
return {
...p,
[draggingElement.id]: lastNum
}
}else{
draggingElement.style.transform = `translate3d(0, -${prevIndex}em, 0)`
return {
...p,
[draggingElement.id]: prevNum
}
}
}
if(draggingDirection.vertical === 'bottom') {
// 下へドラッグ
const nextIndex = currentSelectNumIndex + 1
const nextNum = targetNums[currentSelectNumIndex + 1];
if(nextIndex > lastIndex) {
draggingElement.style.transform = `translate3d(0, -${firstIndex}em, 0)`//`0em`
return {
...p,
[draggingElement.id]: firstNum
}
}else{
draggingElement.style.transform = `translate3d(0, -${nextIndex}em, 0)`
return {
...p,
[draggingElement.id]: nextNum
}
}
}
})
console.log('isVerticalDirection', draggingDirection.vertical)
}, [draggableElements])
return [
selectNum,
handleWheel
]
}
const date = new Date()
const year = date.getFullYear()
const DATE = {
Days: [...Array(31)].map((u, i) => i + 1),
Months: [...Array(12)].map((u, i) => i + 1),
Years: [...Array(120)].map((u, i) => year - i),
}
// 6th Janauary 2008
const DELIMITERS = ['/', '/']
const StyledApp = styled.div`
width: 16em;
`
const App = () => {
const [
selectNum,
//handleDown,
handleWheel
] = useWheelPicker(DATE)
return (
<>
<GlobalStyle />
<StyledApp>
<WheelPicker
className="wheel-picker"
items={DATE}
delimiters={DELIMITERS}
handleWheel={handleWheel}
//handleDown={handleDown}
/>
<Spacer size="1.4em" />
<TimeDisplay
className="date-of-birth"
time={selectNum}
delimiter="/"
fontSize="2.8em"
/>
</StyledApp>
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
!
