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 { Button } from "antd";
import React, { useState } from "react"; import React from "react";
import { proxy, useSnapshot } from "valtio"; import { proxy, useSnapshot } from "valtio";
import { sendSelectPositionResponse, ygopro } from "@/api"; import { sendSelectPositionResponse, ygopro } from "@/api";
import { getUIContainer } from "@/container/compat"; import { getUIContainer } from "@/container/compat";
import { NeosModal } from "../NeosModal"; import { NeosModal } from "../NeosModal";
import styles from "./index.module.scss";
interface PositionModalProps { interface PositionModalProps {
isOpen: boolean; isOpen: boolean;
...@@ -94,44 +94,26 @@ const translations: Translations = { ...@@ -94,44 +94,26 @@ const translations: Translations = {
export const PositionModal = () => { export const PositionModal = () => {
const container = getUIContainer(); const container = getUIContainer();
const { isOpen, positions } = useSnapshot(localStore); const { isOpen, positions } = useSnapshot(localStore);
const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
undefined, const onSummit = (position: ygopro.CardPosition) => {
); sendSelectPositionResponse(container.conn, position);
rs();
};
return ( return (
<NeosModal <NeosModal
title={translations[language].Title} title={translations[language].Title}
open={isOpen} open={isOpen}
footer={ centered
<Button footer={<></>}
disabled={selected === undefined}
onClick={() => {
if (selected !== undefined) {
sendSelectPositionResponse(container.conn, selected);
rs();
}
}}
>
submit
</Button>
}
> >
<CheckCard.Group <div className={styles.container}>
bordered {positions.map((position) => (
size="small" <Button onClick={() => onSummit(position)}>
onChange={(value) => { {cardPosition(position)}
// @ts-ignore </Button>
setSelected(value);
}}
>
{positions.map((position, idx) => (
<CheckCard
key={idx}
title={cardPosition(position)}
value={position}
/>
))} ))}
</CheckCard.Group> </div>
</NeosModal> </NeosModal>
); );
}; };
......
...@@ -104,6 +104,15 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -104,6 +104,15 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
fetchStrings(Region.System, n), 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 ( return (
<NeosModal <NeosModal
title={ title={
...@@ -180,7 +189,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({ ...@@ -180,7 +189,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
key={j} key={j}
> >
{/* 这儿必须有一个div,不然tooltip不生效 */} {/* 这儿必须有一个div,不然tooltip不生效 */}
<div> <div
onDoubleClick={() => onQuickSelect(card as Option)}
>
<CheckCard <CheckCard
cover={ cover={
<YgoCard <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