Skip to content

N
Neos
Commit 20ee2923 authored by Chunchi Che's avatar Chunchi Che
Browse files
Options

optimize dragmodal code

parent 2ce5bffb
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 241 deletions
src/ui/Duel/checkCardModal.tsx
View file @ 20ee2923
import React, { useRef, useState } from "react"; import React, { useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { import {
...@@ -32,18 +32,7 @@ const CheckCardModal = () => { ...@@ -32,18 +32,7 @@ const CheckCardModal = () => {
const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse); const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
const [response, setResponse] = useState<number[]>([]); const [response, setResponse] = useState<number[]>([]);
const defaultValue: number[] = []; const defaultValue: number[] = [];
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const draggleRef = useRef<HTMLDivElement>(null);
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
}
};
const onMouseOut = () => {
setDraggable(true);
};
// TODO: 这里可以考虑更好地封装 // TODO: 这里可以考虑更好地封装
const sendResponseHandler = ( const sendResponseHandler = (
handlerName: string | undefined, handlerName: string | undefined,
...@@ -65,51 +54,43 @@ const CheckCardModal = () => { ...@@ -65,51 +54,43 @@ const CheckCardModal = () => {
return ( return (
<DragModal <DragModal
modalProps={{ title={`请选择${min}到${max}张卡片`}
title: `请选择${min}到${max}张卡片`, open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <>
<> <Button
disabled={response.length < min || response.length > max}
onClick={() => {
sendResponseHandler(onSubmit, response);
dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal());
}}
onFocus={() => {}}
onBlur={() => {}}
>
submit
</Button>
{cancelAble ? (
<Button <Button
disabled={response.length < min || response.length > max}
onClick={() => { onClick={() => {
sendResponseHandler(onSubmit, response); if (cancelResponse) {
sendResponseHandler(onSubmit, [cancelResponse]);
}
dispatch(setCheckCardModalIsOpen(false)); dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal()); dispatch(resetCheckCardModal());
}} }}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={() => {}} onFocus={() => {}}
onBlur={() => {}} onBlur={() => {}}
> >
submit cancel
</Button> </Button>
{cancelAble ? ( ) : (
<Button <></>
onClick={() => { )}
if (cancelResponse) { </>
sendResponseHandler(onSubmit, [cancelResponse]); }
} width={800}
dispatch(setCheckCardModalIsOpen(false));
dispatch(resetCheckCardModal());
}}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
onFocus={() => {}}
onBlur={() => {}}
>
cancel
</Button>
) : (
<></>
)}
</>
),
width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
> >
<CheckCard.Group <CheckCard.Group
multiple multiple
...@@ -146,8 +127,6 @@ const CheckCardModal = () => { ...@@ -146,8 +127,6 @@ const CheckCardModal = () => {
style={{ width: 100 }} style={{ width: 100 }}
/> />
} }
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
value={option.response} value={option.response}
/> />
</Popover> </Popover>
......
src/ui/Duel/checkCardModalV2.tsx
View file @ 20ee2923
import React, { useRef, useState } from "react"; import React from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Button, Card, Row, Col } from "antd"; import { Button, Card, Row, Col } from "antd";
...@@ -32,18 +32,7 @@ const CheckCardModalV2 = () => { ...@@ -32,18 +32,7 @@ const CheckCardModalV2 = () => {
); );
const selectedOptions = useAppSelector(selectCheckCardModalV2SelectedOptions); const selectedOptions = useAppSelector(selectCheckCardModalV2SelectedOptions);
const responseable = useAppSelector(selectCheckCardModalV2ResponseAble); const responseable = useAppSelector(selectCheckCardModalV2ResponseAble);
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const draggleRef = useRef<HTMLDivElement>(null);
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
}
};
const onMouseOut = () => {
setDraggable(true);
};
const onFinish = () => { const onFinish = () => {
sendSelectUnselectCardResponse({ cancel_or_finish: true }); sendSelectUnselectCardResponse({ cancel_or_finish: true });
dispatch(setCheckCardModalV2IsOpen(false)); dispatch(setCheckCardModalV2IsOpen(false));
...@@ -57,34 +46,20 @@ const CheckCardModalV2 = () => { ...@@ -57,34 +46,20 @@ const CheckCardModalV2 = () => {
return ( return (
<DragModal <DragModal
modalProps={{ title={`请选择未选择的卡片，最少${min}张，最多${max}张`}
title: `请选择未选择的卡片，最少${min}张，最多${max}张`, open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <>
<> <Button disabled={!finishable || !responseable} onClick={onFinish}>
<Button finish
disabled={!finishable || !responseable} </Button>
onClick={onFinish} <Button disabled={!cancelable || !responseable} onClick={onCancel}>
onMouseOver={onMouseOver} cancel
onMouseOut={onMouseOut} </Button>
> </>
finish }
</Button> width={800}
<Button
disabled={!cancelable || !responseable}
onClick={onCancel}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
cancel
</Button>
</>
),
width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
...@@ -114,8 +89,6 @@ const CheckCardModalV2 = () => { ...@@ -114,8 +89,6 @@ const CheckCardModalV2 = () => {
/> />
} }
value={option.response} value={option.response}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/> />
</Col> </Col>
); );
......
src/ui/Duel/checkCardModalV3.tsx
View file @ 20ee2923
import React, { useRef, useState } from "react"; import React, { useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Button, Card, Row, Col } from "antd"; import { Button, Card, Row, Col } from "antd";
...@@ -32,18 +32,7 @@ const CheckCardModalV3 = () => { ...@@ -32,18 +32,7 @@ const CheckCardModalV3 = () => {
.concat(selectedOptions) .concat(selectedOptions)
.map((option) => option.level2) .map((option) => option.level2)
.reduce((sum, current) => sum + current, 0); .reduce((sum, current) => sum + current, 0);
// Draggable 相关
const [draggable, setDraggable] = useState(false);
const draggleRef = useRef<HTMLDivElement>(null);
const onMouseOver = () => {
if (draggable) {
setDraggable(false);
}
};
const onMouseOut = () => {
setDraggable(true);
};
const responseable = const responseable =
(overflow (overflow
? Level1Sum >= LevelSum || Level2Sum >= LevelSum ? Level1Sum >= LevelSum || Level2Sum >= LevelSum
...@@ -61,26 +50,17 @@ const CheckCardModalV3 = () => { ...@@ -61,26 +50,17 @@ const CheckCardModalV3 = () => {
return ( return (
<DragModal <DragModal
modalProps={{ title={`请选择卡片，最少${min}张，最多${max}张`}
title: `请选择卡片，最少${min}张，最多${max}张`, open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <>
<> <Button disabled={!responseable} onClick={onFinish}>
<Button finish
disabled={!responseable} </Button>
onClick={onFinish} </>
onMouseOver={onMouseOver} }
onMouseOut={onMouseOut} width={800}
>
finish
</Button>
</>
),
width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
...@@ -107,8 +87,6 @@ const CheckCardModalV3 = () => { ...@@ -107,8 +87,6 @@ const CheckCardModalV3 = () => {
/> />
} }
value={option} value={option}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/> />
</Col> </Col>
); );
......
src/ui/Duel/checkCounterModal.tsx
View file @ 20ee2923
import { Button, Row, Col, Card, InputNumber } from "antd"; import { Button, Row, Col, Card, InputNumber } from "antd";
import React, { useRef, useState } from "react"; import React, { useState } from "react";
import { sendSelectCounterResponse } from "../../api/ocgcore/ocgHelper"; import { sendSelectCounterResponse } from "../../api/ocgcore/ocgHelper";
import { fetchStrings } from "../../api/strings"; import { fetchStrings } from "../../api/strings";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
...@@ -19,7 +19,6 @@ const CheckCounterModal = () => { ...@@ -19,7 +19,6 @@ const CheckCounterModal = () => {
const [selected, setSelected] = useState(new Array(options.length)); const [selected, setSelected] = useState(new Array(options.length));
const sum = selected.reduce((sum, current) => sum + current, 0); const sum = selected.reduce((sum, current) => sum + current, 0);
const finishable = sum == min; const finishable = sum == min;
const draggleRef = useRef<HTMLDivElement>(null);
const onFinish = () => { const onFinish = () => {
sendSelectCounterResponse(selected); sendSelectCounterResponse(selected);
...@@ -28,18 +27,14 @@ const CheckCounterModal = () => { ...@@ -28,18 +27,14 @@ const CheckCounterModal = () => {
return ( return (
<DragModal <DragModal
modalProps={{ title={`请移除${min}个${counterName}`}
title: `请移除${min}个${counterName}`, open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <Button disabled={!finishable} onClick={onFinish}>
<Button disabled={!finishable} onClick={onFinish}> finish
finish </Button>
</Button> }
),
}}
dragRef={draggleRef}
draggable={true}
> >
<Row> <Row>
{options.map((option, idx) => { {options.map((option, idx) => {
......
src/ui/Duel/dragModal.tsx
View file @ 20ee2923
// 经过封装的可拖拽`Modal` // 经过封装的可拖拽`Modal`
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import type { DraggableData, DraggableEvent } from "react-draggable"; import type { DraggableData, DraggableEvent } from "react-draggable";
import Draggable from "react-draggable"; import Draggable from "react-draggable";
import { Modal, ModalProps } from "antd"; import { Modal, ModalProps } from "antd";
export interface DragModalProps { export interface DragModalProps extends ModalProps {}
modalProps: ModalProps;
dragRef: React.RefObject<HTMLDivElement>;
draggable: boolean;
children?: React.ReactNode;
}
const DragModal = (props: DragModalProps) => { const DragModal = (props: DragModalProps) => {
const dragRef = useRef<HTMLDivElement>(null);
const [bounds, setBounds] = useState({ const [bounds, setBounds] = useState({
left: 0, left: 0,
top: 0, top: 0,
...@@ -20,7 +16,7 @@ const DragModal = (props: DragModalProps) => { ...@@ -20,7 +16,7 @@ const DragModal = (props: DragModalProps) => {
}); });
const onStart = (_event: DraggableEvent, uiData: DraggableData) => { const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement; const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = props.dragRef.current?.getBoundingClientRect(); const targetRect = dragRef.current?.getBoundingClientRect();
if (!targetRect) { if (!targetRect) {
return; return;
} }
...@@ -34,14 +30,10 @@ const DragModal = (props: DragModalProps) => { ...@@ -34,14 +30,10 @@ const DragModal = (props: DragModalProps) => {
return ( return (
<Modal <Modal
{...props.modalProps} {...props}
modalRender={(modal) => ( modalRender={(modal) => (
<Draggable <Draggable bounds={bounds} onStart={onStart}>
disabled={!props.draggable} <div ref={dragRef}>{modal}</div>
bounds={bounds}
onStart={onStart}
>
<div ref={props.dragRef}>{modal}</div>
</Draggable> </Draggable>
)} )}
> >
......
src/ui/Duel/optionModal.tsx
View file @ 20ee2923
import React, { useRef, useState } from "react"; import React, { useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Button } from "antd"; import { Button } from "antd";
...@@ -19,31 +19,26 @@ const OptionModal = () => { ...@@ -19,31 +19,26 @@ const OptionModal = () => {
const isOpen = useAppSelector(selectOptionModalIsOpen); const isOpen = useAppSelector(selectOptionModalIsOpen);
const options = useAppSelector(selectOptionModalOptions); const options = useAppSelector(selectOptionModalOptions);
const [selected, setSelected] = useState<number | undefined>(undefined); const [selected, setSelected] = useState<number | undefined>(undefined);
const draggleRef = useRef<HTMLDivElement>(null);
return ( return (
<DragModal <DragModal
modalProps={{ title="请选择需要发动的效果"
title: "请选择需要发动的效果", open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <Button
<Button disabled={selected === undefined}
disabled={selected === undefined} onClick={() => {
onClick={() => { if (selected !== undefined) {
if (selected !== undefined) { sendSelectOptionResponse(selected);
sendSelectOptionResponse(selected); dispatch(setOptionModalIsOpen(false));
dispatch(setOptionModalIsOpen(false)); dispatch(resetOptionModal());
dispatch(resetOptionModal()); }
} }}
}} >
> submit
submit </Button>
</Button> }
),
}}
dragRef={draggleRef}
draggable={true}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
......
src/ui/Duel/positionModal.tsx
View file @ 20ee2923
import React, { useRef, useState } from "react"; import React, { useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Button } from "antd"; import { Button } from "antd";
...@@ -22,31 +22,26 @@ const PositionModal = () => { ...@@ -22,31 +22,26 @@ const PositionModal = () => {
const [selected, setSelected] = useState<ygopro.CardPosition | undefined>( const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
undefined undefined
); );
const draggleRef = useRef<HTMLDivElement>(null);
return ( return (
<DragModal <DragModal
modalProps={{ title="请选择表示形式"
title: "请选择表示形式", open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <Button
<Button disabled={selected === undefined}
disabled={selected === undefined} onClick={() => {
onClick={() => { if (selected !== undefined) {
if (selected !== undefined) { sendSelectPositionResponse(selected);
sendSelectPositionResponse(selected); dispatch(setPositionModalIsOpen(false));
dispatch(setPositionModalIsOpen(false)); dispatch(resetPositionModal());
dispatch(resetPositionModal()); }
} }}
}} >
> submit
submit </Button>
</Button> }
),
}}
dragRef={draggleRef}
draggable={true}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
......
src/ui/Duel/sortCardModal.tsx
View file @ 20ee2923
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
DndContext, DndContext,
closestCenter, closestCenter,
...@@ -38,7 +38,6 @@ const SortCardModal = () => { ...@@ -38,7 +38,6 @@ const SortCardModal = () => {
coordinateGetter: sortableKeyboardCoordinates, coordinateGetter: sortableKeyboardCoordinates,
}) })
); );
const draggleRef = useRef<HTMLDivElement>(null);
const onFinish = () => { const onFinish = () => {
sendSortCardResponse(items.map((item) => item.response)); sendSortCardResponse(items.map((item) => item.response));
...@@ -63,14 +62,10 @@ const SortCardModal = () => { ...@@ -63,14 +62,10 @@ const SortCardModal = () => {
return ( return (
<DragModal <DragModal
modalProps={{ title="请为下列卡牌排序"
title: "请为下列卡牌排序", open={isOpen}
open: isOpen, closable={false}
closable: false, footer={<Button onClick={onFinish}>finish</Button>}
footer: <Button onClick={onFinish}>finish</Button>,
}}
dragRef={draggleRef}
draggable={false}
> >
<DndContext <DndContext
sensors={sensors} sensors={sensors}
......
src/ui/Duel/yesNoModal.tsx
View file @ 20ee2923
import React, { useRef } from "react"; import React from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Button } from "antd"; import { Button } from "antd";
...@@ -14,38 +14,32 @@ const YesNoModal = () => { ...@@ -14,38 +14,32 @@ const YesNoModal = () => {
const dispatch = store.dispatch; const dispatch = store.dispatch;
const isOpen = useAppSelector(selectYesNoModalIsOpen); const isOpen = useAppSelector(selectYesNoModalIsOpen);
const msg = useAppSelector(selectYesNOModalMsg); const msg = useAppSelector(selectYesNOModalMsg);
// Draggable 相关
const draggleRef = useRef<HTMLDivElement>(null);
return ( return (
<DragModal <DragModal
modalProps={{ title={msg}
title: msg, open={isOpen}
open: isOpen, closable={false}
closable: false, footer={
footer: ( <>
<> <Button
<Button onClick={() => {
onClick={() => { sendSelectEffectYnResponse(true);
sendSelectEffectYnResponse(true); dispatch(setYesNoModalIsOpen(false));
dispatch(setYesNoModalIsOpen(false)); }}
}} >
> Yes
Yes </Button>
</Button> <Button
<Button onClick={() => {
onClick={() => { sendSelectEffectYnResponse(false);
sendSelectEffectYnResponse(false); dispatch(setYesNoModalIsOpen(false));
dispatch(setYesNoModalIsOpen(false)); }}
}} >
> No
No </Button>
</Button> </>
</> }
),
}}
dragRef={draggleRef}
draggable={true}
/> />
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment