Commit 72e7e55a authored by Chunchi Che's avatar Chunchi Che

Add quick select

parent 23b803a0
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 5rem;
button {
width: 7rem;
height: 3rem;
font-size: 1rem;
}
}
// 表示形式选择弹窗
import { CheckCard } from "@ant-design/pro-components";
import { Button } from "antd";
import React, { useState } from "react";
import React from "react";
import { proxy, useSnapshot } from "valtio";
import { sendSelectPositionResponse, ygopro } from "@/api";
import { getUIContainer } from "@/container/compat";
import { NeosModal } from "../NeosModal";
import styles from "./index.module.scss";
interface PositionModalProps {
isOpen: boolean;
......@@ -94,44 +94,26 @@ const translations: Translations = {
export const PositionModal = () => {
const container = getUIContainer();
const { isOpen, positions } = useSnapshot(localStore);
const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
undefined,
);
const onSummit = (position: ygopro.CardPosition) => {
sendSelectPositionResponse(container.conn, position);
rs();
};
return (
<NeosModal
title={translations[language].Title}
open={isOpen}
footer={
<Button
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectPositionResponse(container.conn, selected);
rs();
}
}}
>
submit
</Button>
}
centered
footer={<></>}
>
<CheckCard.Group
bordered
size="small"
onChange={(value) => {
// @ts-ignore
setSelected(value);
}}
>
{positions.map((position, idx) => (
<CheckCard
key={idx}
title={cardPosition(position)}
value={position}
/>
<div className={styles.container}>
{positions.map((position) => (
<Button onClick={() => onSummit(position)}>
{cardPosition(position)}
</Button>
))}
</CheckCard.Group>
</div>
</NeosModal>
);
};
......
......@@ -104,6 +104,15 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
fetchStrings(Region.System, n),
);
// Quick select if possiable
const onQuickSelect = (option: Option) => {
if (max === 1 || single) {
// if `max` is 1, it means that we can just select one,
// so quick selection is possiable in this case.
onSubmit([option]);
}
};
return (
<NeosModal
title={
......@@ -180,7 +189,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
key={j}
>
{/* 这儿必须有一个div,不然tooltip不生效 */}
<div>
<div
onDoubleClick={() => onQuickSelect(card as Option)}
>
<CheckCard
cover={
<YgoCard
......
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