antdのreact19に関する複数の問題を修正しました。

harumiWeb · Jan 10, 2025 · b21253b · b21253b
1 parent ccc33cc
commit b21253b
Show file tree

Hide file tree

Showing 13 changed files with 343 additions and 102 deletions.
diff --git a/app/components/ConvertButton/ConvertButton.tsx b/app/components/ConvertButton/ConvertButton.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Button } from "antd";
 import { useAtom } from "jotai";
 import {
   filePathsAtom,
@@ -14,20 +13,6 @@ import {
 import { Modal } from "antd";
 import { convert } from "@/app/lib/utils";
 import "@ant-design/v5-patch-for-react-19";
-import { createStyles } from 'antd-style';
-
-const useStyles = createStyles(({ token, css }) => {
-  return {
-    button: css`
-      padding: 20px 16px;
-      font-weight: bold;
-      text-transform: uppercase;
-      color: ${token.colorPrimary};
-      letter-spacing: 0.1em;
-      font-size: 18px;
-    `
-  };
-});
 
 export default function ConvertButton() {
   const [filePaths] = useAtom(filePathsAtom);
@@ -37,12 +22,11 @@ export default function ConvertButton() {
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
   const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
   const [, setTabSelected] = useAtom(tabSelectedAtom);
-  const { styles, } = useStyles();
   const [modal, contextHolder] = Modal.useModal();
 
   return (
     <>
-      <Button
+      <button
         onClick={() =>
           convert(
             setIsProcessing,
@@ -55,8 +39,8 @@ export default function ConvertButton() {
             setTabSelected
           )
         }
-        className={`${styles.button} ${
-          filePaths.length > 0 && !isProcessing ? "" : "cursor-not-allowed"
+        className={`bg-white font-bold text-lg uppercase text-primary border-none p-[8px_8px] tracking-wider hover:bg-[#b1fede] rounded-md transition-all duration-200 ${
+          filePaths.length > 0 && !isProcessing ? "" : "cursor-not-allowed opacity-50"
         }`}
         title={
           filePaths.length > 0 && !isProcessing
@@ -66,7 +50,7 @@ export default function ConvertButton() {
         disabled={filePaths.length === 0 || isProcessing}
       >
         Convert
-      </Button>
+      </button>
       {contextHolder}
     </>
   );

diff --git a/app/components/LoadingModal/LoadingModal.tsx b/app/components/LoadingModal/LoadingModal.tsx
@@ -18,7 +18,7 @@ export default function LoadingModal() {
         isProcessing || isSaving ? "block" : "hidden"
       }`}
     >
-      <div className="bg-white rounded-lg px-6 py-6 min-w-[300px] flex flex-col gap-4 justify-center items-center">
+      <div className="bg-white rounded-lg px-6 py-6 min-w-[300px] flex flex-col gap-4 justify-center items-center modal-open-animation">
         <div className="flex flex-col gap-2 justify-center items-center">
           <Spin size="large"></Spin>
           <p className="text-lg font-medium text-[#00b96b]">

diff --git a/app/components/SettingsMenu/Quality.tsx b/app/components/SettingsMenu/Quality.tsx
@@ -21,13 +21,15 @@ const IntegerStep: React.FC = () => {
           min={1}
           max={100}
           onChange={onChange}
+          defaultValue={75}
           value={typeof inputValue === "number" ? inputValue : 0}
         />
       </Col>
       <Col span={4}>
         <InputNumber
           min={1}
           max={100}
+          defaultValue={75}
           style={{ margin: "0 16px" }}
           value={inputValue}
           onChange={onChange}

diff --git a/app/components/WindowMenu/ContextMenu/FileMenu.tsx b/app/components/WindowMenu/ContextMenu/FileMenu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { MenuProps } from "antd";
-import { Dropdown, Button } from "antd";
+import { Dropdown } from "antd";
 import { useAtom } from "jotai";
 import {
   fileInfosAtom,
@@ -20,7 +20,6 @@ import { convert, openDialog, saveAll, saveSelected } from "@/app/lib/utils";
 import { useEffect, useRef, useState } from "react";
 import { Modal } from "antd";
 import "@ant-design/v5-patch-for-react-19";
-import { useStyles } from "@/app/components/WindowMenu/WindowMenu";
 
 const items: MenuProps["items"] = [
   {
@@ -53,23 +52,20 @@ const items: MenuProps["items"] = [
 
 export default function FileMenu() {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [isFocused, ] = useAtom(isFocusedAtom);
+  const [isFocused] = useAtom(isFocusedAtom);
   const fileButtonRef = useRef<HTMLButtonElement | null>(null);
   const [fileInfos, setFileInfos] = useAtom(fileInfosAtom);
   const [tabSelected, setTabSelected] = useAtom(tabSelectedAtom);
   const [processedFilePathsSorted, setProcessedFilePathsSorted] = useAtom(
     processedFilePathsSortedAtom
   );
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(
-    processedFilePathsAtom
-  );
+  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
   const [, setIsSaving] = useAtom(isSavingAtom);
-  const [quality, ] = useAtom(qualityAtom);
-  const [extensionType, ] = useAtom(extensionTypeAtom);
+  const [quality] = useAtom(qualityAtom);
+  const [extensionType] = useAtom(extensionTypeAtom);
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [modal, ] = Modal.useModal();
-  const { styles, } = useStyles();
+  const [modal] = Modal.useModal();
 
   function removeResult() {
     setProcessedFilePathsSorted([]);
@@ -160,13 +156,13 @@ export default function FileMenu() {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button
+      <button
         ref={fileButtonRef}
         onClick={() => {}}
-        className={styles.button}
+        className="bg-primary text-white border-none h-[98%] p-[2px_8px] text-sm tracking-wide hover:bg-[#84ddb8] rounded-md transition-all duration-200"
       >
         File(F)
-      </Button>
+      </button>
     </Dropdown>
   );
 }
@@ -194,15 +190,13 @@ function FileOpen(): React.ReactNode {
 
 function FileRemoveAll(): React.ReactNode {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [tabSelected, ] = useAtom(tabSelectedAtom);
+  const [tabSelected] = useAtom(tabSelectedAtom);
   const [, setFileInfos] = useAtom(fileInfosAtom);
   const [processedFilePathsSorted, setProcessedFilePathsSorted] = useAtom(
     processedFilePathsSortedAtom
   );
   const [, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(
-    processedFilePathsAtom
-  );
+  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
 
   function removeAll() {
     setFilePaths([]);
@@ -255,10 +249,8 @@ function FileRemoveAll(): React.ReactNode {
 
 function FileSaveAll(): React.ReactNode {
   const [isSaving, setIsSaving] = useState(false);
-  const [processedFilePathsSorted, ] = useAtom(
-    processedFilePathsSortedAtom
-  );
-  const [modal, ] = Modal.useModal();
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
+  const [modal] = Modal.useModal();
   return (
     <button
       className={`flex items-center justify-between leading-5 w-full ${
@@ -285,11 +277,9 @@ function FileSaveAll(): React.ReactNode {
 
 function FileSaveSelected(): React.ReactNode {
   const [isSaving, setIsSaving] = useState(false);
-  const [processedFilePathsSorted, ] = useAtom(
-    processedFilePathsSortedAtom
-  );
-  const [checkboxSelected, ] = useAtom(checkboxSelectedAtom);
-  const [modal, ] = Modal.useModal();
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
+  const [checkboxSelected] = useAtom(checkboxSelectedAtom);
+  const [modal] = Modal.useModal();
   return (
     <button
       className={`flex items-center justify-between leading-5 w-full ${
@@ -328,14 +318,12 @@ function FileSaveSelected(): React.ReactNode {
 
 function FileConvert(): React.ReactNode {
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [, setProcessedFilePaths] = useAtom(
-    processedFilePathsAtom
-  );
-  const [modal, ] = Modal.useModal();
-  const [filePaths, ] = useAtom(filePathsAtom);
-  const [fileInfos, ] = useAtom(fileInfosAtom);
-  const [quality, ] = useAtom(qualityAtom);
-  const [extensionType, ] = useAtom(extensionTypeAtom);
+  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
+  const [modal] = Modal.useModal();
+  const [filePaths] = useAtom(filePathsAtom);
+  const [fileInfos] = useAtom(fileInfosAtom);
+  const [quality] = useAtom(qualityAtom);
+  const [extensionType] = useAtom(extensionTypeAtom);
   const [, setTabSelected] = useAtom(tabSelectedAtom);
   return (
     <button

diff --git a/app/components/WindowMenu/ContextMenu/HelpMenu.tsx b/app/components/WindowMenu/ContextMenu/HelpMenu.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import type { MenuProps } from "antd";
-import { Dropdown, Button, Modal } from "antd";
+import { Dropdown, Modal } from "antd";
 import { useAtom } from "jotai";
 import { isFocusedAtom } from "@/app/lib/atom";
 import { useEffect, useRef, useState } from "react";
 import "@ant-design/v5-patch-for-react-19";
-import { useStyles } from "@/app/components/WindowMenu/WindowMenu";
+import "antd/dist/reset.css";
 
 const items: MenuProps["items"] = [
   {
@@ -18,7 +18,6 @@ const items: MenuProps["items"] = [
 export default function HelpMenu() {
   const [isFocused] = useAtom(isFocusedAtom);
   const helpButtonRef = useRef<HTMLButtonElement | null>(null);
-  const { styles, } = useStyles();
   useEffect(() => {
     const handleKeyDownSelectShortcut = async (event: KeyboardEvent) => {
       if (event.key === "h" && event.altKey && isFocused) {
@@ -37,13 +36,13 @@ export default function HelpMenu() {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button
+      <button
         onClick={() => {}}
-        className={styles.button}
+        className="bg-primary text-white border-none h-[98%] p-[2px_8px] text-sm tracking-wide hover:bg-[#84ddb8] rounded-md transition-all duration-200"
         ref={helpButtonRef}
       >
         Help(H)
-      </Button>
+      </button>
     </Dropdown>
   );
 }

diff --git a/app/components/WindowMenu/ContextMenu/SelectMenu.tsx b/app/components/WindowMenu/ContextMenu/SelectMenu.tsx
@@ -1,29 +1,36 @@
 "use client";
 
 import type { MenuProps } from "antd";
-import { Dropdown, Button } from "antd";
+import { Dropdown } from "antd";
 import { useAtom } from "jotai";
-import { checkboxSelectedAtom, isFocusedAtom, processedFilePathsSortedAtom } from "@/app/lib/atom";
+import {
+  checkboxSelectedAtom,
+  isFocusedAtom,
+  processedFilePathsSortedAtom,
+} from "@/app/lib/atom";
 import { useEffect, useRef } from "react";
 import "@ant-design/v5-patch-for-react-19";
-import { useStyles } from "@/app/components/WindowMenu/WindowMenu";
 
 const items: MenuProps["items"] = [
   {
     label: <SelectAll />,
     key: "0",
-  }
+  },
 ];
 
 export default function SelectMenu() {
-  const [isFocused, ] = useAtom(isFocusedAtom);
+  const [isFocused] = useAtom(isFocusedAtom);
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [processedFilePathsSorted, ] = useAtom(processedFilePathsSortedAtom);
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
   const selectButtonRef = useRef<HTMLButtonElement | null>(null);
-  const { styles, } = useStyles();
   useEffect(() => {
     const handleKeyDownSelectShortcut = async (event: KeyboardEvent) => {
-      if (event.key === "a" && event.ctrlKey && isFocused && processedFilePathsSorted.length > 0) {
+      if (
+        event.key === "a" &&
+        event.ctrlKey &&
+        isFocused &&
+        processedFilePathsSorted.length > 0
+      ) {
         event.preventDefault();
         setCheckboxSelected((prev) =>
           prev.map((item) => ({
@@ -47,29 +54,31 @@ export default function SelectMenu() {
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
-      <Button
+      <button
         onClick={() => {}}
-        className={styles.button}
         ref={selectButtonRef}
+        className="bg-primary text-white border-none h-[98%] p-[2px_8px] text-sm tracking-wide hover:bg-[#84ddb8] rounded-md transition-all duration-200"
       >
         Select(S)
-      </Button>
+      </button>
     </Dropdown>
   );
 }
 
 function SelectAll(): React.ReactNode {
   const [, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [processedFilePathsSorted, ] = useAtom(processedFilePathsSortedAtom);
+  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
   return (
     <button
       title="Select all files."
-      onClick={() => setCheckboxSelected((prev) =>
+      onClick={() =>
+        setCheckboxSelected((prev) =>
           prev.map((item) => ({
             ...item,
             checked: !item.checked,
           }))
-        )}
+        )
+      }
       onKeyDown={(e) => {
         if (e.key === "Enter") {
           setCheckboxSelected((prev) =>
@@ -81,12 +90,16 @@ function SelectAll(): React.ReactNode {
         }
       }}
       disabled={processedFilePathsSorted.length === 0}
-      className={`flex items-center justify-between leading-5 ${processedFilePathsSorted.length === 0 ? "text-gray-300 cursor-not-allowed" : ""}`}
+      className={`flex items-center justify-between leading-5 ${
+        processedFilePathsSorted.length === 0
+          ? "text-gray-300 cursor-not-allowed"
+          : ""
+      }`}
     >
       Select All
       <span className="text-xs pl-4 flex items-center justify-center pt-[1px]">
         Ctrl+A
       </span>
     </button>
   );
-}
+}
diff --git a/app/components/WindowMenu/WindowMenu.tsx b/app/components/WindowMenu/WindowMenu.tsx
@@ -13,16 +13,16 @@ import HelpMenu from "./ContextMenu/HelpMenu";
 import { BorderOutlined, MinusOutlined, CloseOutlined } from "@ant-design/icons";
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ token, css }) => ({
+export const useStyles = createStyles(({ css }) => ({
   button: css`
-    background-color: ${token.colorPrimary};
+    background-color: #00b96b;
     &:hover {
-      background-color: ${token.colorPrimaryHover};
-      color: ${token.colorPrimary};
+      background-color: #6cd9ac;
+      color: #00b96b;
     }
     color: white;
     border: none;
-    height: 99%;
+    height: 98%;
     padding: 2px 8px;
   `,
 }));