Skip to content

N
Neos
Commit 9511809e authored by Chunchi Che's avatar Chunchi Che
Browse files
Options

Merge branch 'feat/dragmodal' into 'main' 

Feat/dragmodal

See merge request mycard/Neos!157
parents 40fa8d97 869449bf
Show whitespace changes
Inline Side-by-side
Showing with 262 additions and 164 deletions
src/ui/Duel/checkCardModal.tsx
View file @ 9511809e
...@@ -13,15 +13,14 @@ import { ...@@ -13,15 +13,14 @@ import {
resetCheckCardModal, resetCheckCardModal,
setCheckCardModalIsOpen, setCheckCardModalIsOpen,
} from "../../reducers/duel/mod"; } from "../../reducers/duel/mod";
import { Modal, Button, Row, Col, Popover } from "antd"; import { Button, Row, Col, Popover } from "antd";
import { CheckCard } from "@ant-design/pro-components"; import { CheckCard } from "@ant-design/pro-components";
import { import {
sendSelectCardResponse, sendSelectCardResponse,
sendSelectChainResponse, sendSelectChainResponse,
} from "../../api/ocgcore/ocgHelper"; } from "../../api/ocgcore/ocgHelper";
import type { DraggableData, DraggableEvent } from "react-draggable";
import Draggable from "react-draggable";
import NeosConfig from "../../../neos.config.json"; import NeosConfig from "../../../neos.config.json";
import DragModal from "./dragModal";
const CheckCardModal = () => { const CheckCardModal = () => {
const dispatch = store.dispatch; const dispatch = store.dispatch;
...@@ -33,30 +32,10 @@ const CheckCardModal = () => { ...@@ -33,30 +32,10 @@ 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 相关 // Draggable 相关
const [draggable, setDraggable] = useState(false); const [draggable, setDraggable] = useState(false);
const [bounds, setBounds] = useState({
left: 0,
top: 0,
bottom: 0,
right: 0,
});
const draggleRef = useRef<HTMLDivElement>(null); const draggleRef = useRef<HTMLDivElement>(null);
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
const onMouseOver = () => { const onMouseOver = () => {
if (draggable) { if (draggable) {
setDraggable(false); setDraggable(false);
...@@ -65,7 +44,6 @@ const CheckCardModal = () => { ...@@ -65,7 +44,6 @@ const CheckCardModal = () => {
const onMouseOut = () => { const onMouseOut = () => {
setDraggable(true); setDraggable(true);
}; };
// TODO: 这里可以考虑更好地封装 // TODO: 这里可以考虑更好地封装
const sendResponseHandler = ( const sendResponseHandler = (
handlerName: string | undefined, handlerName: string | undefined,
...@@ -86,11 +64,12 @@ const CheckCardModal = () => { ...@@ -86,11 +64,12 @@ const CheckCardModal = () => {
}; };
return ( return (
<Modal <DragModal
title={`请选择${min}到${max}张卡片`} modalProps={{
open={isOpen} title: `请选择${min}到${max}张卡片`,
closable={false} open: isOpen,
footer={ closable: false,
footer: (
<> <>
<Button <Button
disabled={response.length < min || response.length > max} disabled={response.length < min || response.length > max}
...@@ -126,13 +105,11 @@ const CheckCardModal = () => { ...@@ -126,13 +105,11 @@ const CheckCardModal = () => {
<></> <></>
)} )}
</> </>
} ),
modalRender={(modal) => ( width: 800,
<Draggable disabled={!draggable} bounds={bounds} onStart={onStart}> }}
<div ref={draggleRef}>{modal}</div> dragRef={draggleRef}
</Draggable> draggable={draggable}
)}
width={800}
> >
<CheckCard.Group <CheckCard.Group
multiple multiple
...@@ -181,7 +158,7 @@ const CheckCardModal = () => { ...@@ -181,7 +158,7 @@ const CheckCardModal = () => {
); );
})} })}
</CheckCard.Group> </CheckCard.Group>
</Modal> </DragModal>
); );
}; };
......
src/ui/Duel/checkCardModalV2.tsx
View file @ 9511809e
import React from "react"; import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Modal, Button, Card, Row, Col } from "antd"; import { Button, Card, Row, Col } from "antd";
import { CheckCard } from "@ant-design/pro-components"; import { CheckCard } from "@ant-design/pro-components";
import { import {
selectCheckCardModalV2CancelAble, selectCheckCardModalV2CancelAble,
...@@ -19,6 +19,7 @@ import { ...@@ -19,6 +19,7 @@ import {
setCheckCardModalV2ResponseAble, setCheckCardModalV2ResponseAble,
} from "../../reducers/duel/mod"; } from "../../reducers/duel/mod";
import NeosConfig from "../../../neos.config.json"; import NeosConfig from "../../../neos.config.json";
import DragModal from "./dragModal";
const CheckCardModalV2 = () => { const CheckCardModalV2 = () => {
const dispatch = store.dispatch; const dispatch = store.dispatch;
...@@ -31,35 +32,59 @@ const CheckCardModalV2 = () => { ...@@ -31,35 +32,59 @@ 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));
dispatch(resetCheckCardModalV2()); dispatch(resetCheckCardModalV2());
dispatch(setCheckCardModalV2ResponseAble(false)); dispatch(setCheckCardModalV2ResponseAble(false));
}; };
const onCancel = () => { const onCancel = () => {
sendSelectUnselectCardResponse({ cancel_or_finish: true }); sendSelectUnselectCardResponse({ cancel_or_finish: true });
dispatch(setCheckCardModalV2ResponseAble(false)); dispatch(setCheckCardModalV2ResponseAble(false));
}; };
return ( return (
<Modal <DragModal
title={`请选择未选择的卡片，最少${min}张，最多${max}张`} modalProps={{
open={isOpen} title: `请选择未选择的卡片，最少${min}张，最多${max}张`,
closable={false} open: isOpen,
footer={ closable: false,
footer: (
<> <>
<Button disabled={!finishable || !responseable} onClick={onFinish}> <Button
disabled={!finishable || !responseable}
onClick={onFinish}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
finish finish
</Button> </Button>
<Button disabled={!cancelable || !responseable} onClick={onCancel}> <Button
disabled={!cancelable || !responseable}
onClick={onCancel}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
cancel cancel
</Button> </Button>
</> </>
} ),
width={800} width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
...@@ -89,6 +114,8 @@ const CheckCardModalV2 = () => { ...@@ -89,6 +114,8 @@ const CheckCardModalV2 = () => {
/> />
} }
value={option.response} value={option.response}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/> />
</Col> </Col>
); );
...@@ -114,7 +141,7 @@ const CheckCardModalV2 = () => { ...@@ -114,7 +141,7 @@ const CheckCardModalV2 = () => {
); );
})} })}
</Row> </Row>
</Modal> </DragModal>
); );
}; };
......
src/ui/Duel/checkCardModalV3.tsx
View file @ 9511809e
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Modal, Button, Card, Row, Col } from "antd"; import { Button, Card, Row, Col } from "antd";
import { CheckCard } from "@ant-design/pro-components"; import { CheckCard } from "@ant-design/pro-components";
import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper"; import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
import { import {
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
} from "../../reducers/duel/mod"; } from "../../reducers/duel/mod";
import NeosConfig from "../../../neos.config.json"; import NeosConfig from "../../../neos.config.json";
import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice"; import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
import DragModal from "./dragModal";
const CheckCardModalV3 = () => { const CheckCardModalV3 = () => {
const dispatch = store.dispatch; const dispatch = store.dispatch;
...@@ -31,14 +32,24 @@ const CheckCardModalV3 = () => { ...@@ -31,14 +32,24 @@ 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
: Level1Sum == LevelSum || Level2Sum == LevelSum) && : Level1Sum == LevelSum || Level2Sum == LevelSum) &&
selectedOptions.length <= max && selectedOptions.length <= max &&
selectedOptions.length >= min; selectedOptions.length >= min;
const onFinish = () => { const onFinish = () => {
sendSelectCardResponse( sendSelectCardResponse(
mustSelectOptions.concat(selectedOptions).map((option) => option.response) mustSelectOptions.concat(selectedOptions).map((option) => option.response)
...@@ -49,18 +60,27 @@ const CheckCardModalV3 = () => { ...@@ -49,18 +60,27 @@ const CheckCardModalV3 = () => {
}; };
return ( return (
<Modal <DragModal
title={`请选择卡片，最少${min}张，最多${max}张`} modalProps={{
open={isOpen} title: `请选择卡片，最少${min}张，最多${max}张`,
closable={false} open: isOpen,
footer={ closable: false,
footer: (
<> <>
<Button disabled={!responseable} onClick={onFinish}> <Button
disabled={!responseable}
onClick={onFinish}
onMouseOver={onMouseOver}
onMouseOut={onMouseOut}
>
finish finish
</Button> </Button>
</> </>
} ),
width={800} width: 800,
}}
dragRef={draggleRef}
draggable={draggable}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
...@@ -87,6 +107,8 @@ const CheckCardModalV3 = () => { ...@@ -87,6 +107,8 @@ const CheckCardModalV3 = () => {
/> />
} }
value={option} value={option}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseOut}
/> />
</Col> </Col>
); );
...@@ -112,7 +134,7 @@ const CheckCardModalV3 = () => { ...@@ -112,7 +134,7 @@ const CheckCardModalV3 = () => {
); );
})} })}
</Row> </Row>
</Modal> </DragModal>
); );
}; };
......
src/ui/Duel/dragModal.tsx 0 → 100644
View file @ 9511809e
// 经过封装的可拖拽`Modal`
import React, { useState } from "react";
import type { DraggableData, DraggableEvent } from "react-draggable";
import Draggable from "react-draggable";
import { Modal, ModalProps } from "antd";
export interface DragModalProps {
modalProps: ModalProps;
dragRef: React.RefObject<HTMLDivElement>;
draggable: boolean;
children?: React.ReactNode;
}
const DragModal = (props: DragModalProps) => {
const [bounds, setBounds] = useState({
left: 0,
top: 0,
bottom: 0,
right: 0,
});
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = props.dragRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
return (
<Modal
{...props.modalProps}
modalRender={(modal) => (
<Draggable
disabled={!props.draggable}
bounds={bounds}
onStart={onStart}
>
<div ref={props.dragRef}>{modal}</div>
</Draggable>
)}
>
{props.children}
</Modal>
);
};
export default DragModal;
src/ui/Duel/optionModal.tsx
View file @ 9511809e
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Modal, Button } from "antd"; import { Button } from "antd";
import { CheckCard } from "@ant-design/pro-components"; import { CheckCard } from "@ant-design/pro-components";
import { import {
selectOptionModalIsOpen, selectOptionModalIsOpen,
...@@ -12,19 +12,22 @@ import { ...@@ -12,19 +12,22 @@ import {
resetOptionModal, resetOptionModal,
setOptionModalIsOpen, setOptionModalIsOpen,
} from "../../reducers/duel/mod"; } from "../../reducers/duel/mod";
import DragModal from "./dragModal";
const OptionModal = () => { const OptionModal = () => {
const dispatch = store.dispatch; const dispatch = store.dispatch;
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 (
<Modal <DragModal
title="请选择需要发动的效果" modalProps={{
open={isOpen} title: "请选择需要发动的效果",
closable={false} open: isOpen,
footer={ closable: false,
footer: (
<Button <Button
disabled={selected === undefined} disabled={selected === undefined}
onClick={() => { onClick={() => {
...@@ -37,7 +40,10 @@ const OptionModal = () => { ...@@ -37,7 +40,10 @@ const OptionModal = () => {
> >
submit submit
</Button> </Button>
} ),
}}
dragRef={draggleRef}
draggable={true}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
...@@ -51,7 +57,7 @@ const OptionModal = () => { ...@@ -51,7 +57,7 @@ const OptionModal = () => {
<CheckCard key={idx} title={option.msg} value={option.response} /> <CheckCard key={idx} title={option.msg} value={option.response} />
))} ))}
</CheckCard.Group> </CheckCard.Group>
</Modal> </DragModal>
); );
}; };
......
src/ui/Duel/positionModal.tsx
View file @ 9511809e
import React, { useState } from "react"; import React, { useRef, useState } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Modal, Button } from "antd"; import { Button } from "antd";
import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper"; import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
import { import {
selectPositionModalIsOpen, selectPositionModalIsOpen,
...@@ -13,6 +13,7 @@ import { ...@@ -13,6 +13,7 @@ import {
setPositionModalIsOpen, setPositionModalIsOpen,
} from "../../reducers/duel/mod"; } from "../../reducers/duel/mod";
import { CheckCard } from "@ant-design/pro-components"; import { CheckCard } from "@ant-design/pro-components";
import DragModal from "./dragModal";
const PositionModal = () => { const PositionModal = () => {
const dispatch = store.dispatch; const dispatch = store.dispatch;
...@@ -21,13 +22,15 @@ const PositionModal = () => { ...@@ -21,13 +22,15 @@ 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 (
<Modal <DragModal
title="请选择表示形式" modalProps={{
open={isOpen} title: "请选择表示形式",
closable={false} open: isOpen,
footer={ closable: false,
footer: (
<Button <Button
disabled={selected === undefined} disabled={selected === undefined}
onClick={() => { onClick={() => {
...@@ -40,7 +43,10 @@ const PositionModal = () => { ...@@ -40,7 +43,10 @@ const PositionModal = () => {
> >
submit submit
</Button> </Button>
} ),
}}
dragRef={draggleRef}
draggable={true}
> >
<CheckCard.Group <CheckCard.Group
bordered bordered
...@@ -58,7 +64,7 @@ const PositionModal = () => { ...@@ -58,7 +64,7 @@ const PositionModal = () => {
/> />
))} ))}
</CheckCard.Group> </CheckCard.Group>
</Modal> </DragModal>
); );
}; };
......
src/ui/Duel/yesNoModal.tsx
View file @ 9511809e
import React from "react"; import React, { useRef } from "react";
import { useAppSelector } from "../../hook"; import { useAppSelector } from "../../hook";
import { store } from "../../store"; import { store } from "../../store";
import { Modal, Button } from "antd"; import { Button } from "antd";
import { sendSelectEffectYnResponse } from "../../api/ocgcore/ocgHelper"; import { sendSelectEffectYnResponse } from "../../api/ocgcore/ocgHelper";
import { import {
selectYesNoModalIsOpen, selectYesNoModalIsOpen,
selectYesNOModalMsg, selectYesNOModalMsg,
} from "../../reducers/duel/modal/mod"; } from "../../reducers/duel/modal/mod";
import { setYesNoModalIsOpen } from "../../reducers/duel/mod"; import { setYesNoModalIsOpen } from "../../reducers/duel/mod";
import DragModal from "./dragModal";
const YesNoModal = () => { 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 (
<Modal <DragModal
title={msg} modalProps={{
open={isOpen} title: msg,
closable={false} open: isOpen,
footer={ closable: false,
footer: (
<> <>
<Button <Button
onClick={() => { onClick={() => {
...@@ -38,7 +42,10 @@ const YesNoModal = () => { ...@@ -38,7 +42,10 @@ const YesNoModal = () => {
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