refactor: remove update-tailwind
This commit is contained in:
草鞋没号
parent
b1f19196df
commit
767cde8f25
|
|
@ -1,87 +0,0 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const ModalTemplate: React.FC<
|
||||
React.PropsWithChildren<{
|
||||
title?: ReactNode;
|
||||
footer?: ReactNode;
|
||||
cancelText?: string;
|
||||
okText?: string;
|
||||
onCancel?: () => void;
|
||||
onOk?: () => void;
|
||||
width?: number;
|
||||
}>
|
||||
> = (props) => {
|
||||
const {
|
||||
title,
|
||||
children,
|
||||
footer,
|
||||
cancelText = "Cancel",
|
||||
okText = "OK",
|
||||
onCancel,
|
||||
onOk,
|
||||
width = 530,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-screen h-screen fixed top-0 left-0 z-10 bg-modalMask" />
|
||||
<div className="fixed top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
className="shadow-modalContent overflow-hidden -border-r-4"
|
||||
style={{ width }}
|
||||
>
|
||||
<div className="flex leading-[38px] bg-crimson">
|
||||
<div className="font-bold w-0 flex-grow">{title}</div>
|
||||
<span
|
||||
className="w-[30px] h-[30px] m-[4px] text-center cursor-pointer leading-[30px]"
|
||||
onClick={onCancel}
|
||||
>
|
||||
<svg
|
||||
className="w-[17px] h-[17px]"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M557.312 513.248l265.28-263.904c12.544-12.48 12.608-32.704 0.128-45.248-12.512-12.576-32.704-12.608-45.248-0.128l-265.344 263.936-263.04-263.84C236.64 191.584 216.384 191.52 203.84 204 191.328 216.48 191.296 236.736 203.776 249.28l262.976 263.776L201.6 776.8c-12.544 12.48-12.608 32.704-0.128 45.248 6.24 6.272 14.464 9.44 22.688 9.44 8.16 0 16.32-3.104 22.56-9.312l265.216-263.808 265.44 266.24c6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.592-9.344 12.512-12.48 12.544-32.704 0.064-45.248L557.312 513.248z"
|
||||
p-id="2764"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-[10px] bg-white text-darkGrey1">{children}</div>
|
||||
{typeof footer !== "undefined" ? (
|
||||
<div className="p-[10px] bg-white flex justify-end">
|
||||
<button
|
||||
className="p-[7px] bg-crimson text-sm ml-[10px] first:ml-0"
|
||||
onClick={onCancel}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
className="p-[7px] bg-crimson text-sm ml-[10px] first:ml-0"
|
||||
onClick={onOk}
|
||||
>
|
||||
{okText}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
footer
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Modal = (
|
||||
props: Parameters<typeof ModalTemplate>[0] & { open: boolean },
|
||||
) => {
|
||||
const { open, ...omit } = props;
|
||||
|
||||
return createPortal(open ? ModalTemplate(omit) : null, document.body);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const Progress: React.FC<
|
||||
React.PropsWithChildren<{
|
||||
percent?: number;
|
||||
}>
|
||||
> = (props) => {
|
||||
const { percent = 0 } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<div className="border-[1px] rounded-[3px] border-solid border-black h-[6px] w-[300px]">
|
||||
<div
|
||||
className="h-[6px] rounded-[4px] bg-gradient-to-r from-purple1 via-transparent to-crimson"
|
||||
style={{ width: `${3 * percent}px` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="m-[0,10px]">
|
||||
{(percent ?? 0).toString().substring(0, 4)}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Progress;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# electron-updater-tailwindcss
|
||||
|
||||
[tailwindcss docs](https://tailwindcss.com/).
|
||||
|
||||
|
||||
## If you don't want to use tailwindcss, want to use the default css style:
|
||||
|
||||
[`<Update/>` Written entirely in CSS](../update/)
|
||||
|
||||
### remove dependencies:
|
||||
```diff
|
||||
- autoprefixer
|
||||
- tailwindcss
|
||||
```
|
||||
### remove files:
|
||||
```diff
|
||||
- postcss.config.cjs
|
||||
- tailwind.config.cjs
|
||||
```
|
||||
### remove import:
|
||||
```diff
|
||||
//src/main.tsx
|
||||
- import "@/components/update-tailwind/tailwind.css";
|
||||
```
|
||||
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
import { ipcRenderer } from "electron";
|
||||
import type { ProgressInfo } from "electron-updater";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Modal from "@/components/update-tailwind/Modal";
|
||||
import Progress from "@/components/update-tailwind/Progress";
|
||||
|
||||
const UpdateElectron = () => {
|
||||
const [checking, setChecking] = useState(false);
|
||||
const [updateAvailable, setUpdateAvailable] = useState(false);
|
||||
const [versionInfo, setVersionInfo] = useState<VersionInfo>();
|
||||
const [updateError, setUpdateError] = useState<ErrorType>();
|
||||
const [progressInfo, setProgressInfo] = useState<Partial<ProgressInfo>>();
|
||||
const [modalOpen, setModalOpen] = useState<boolean>(false);
|
||||
const [modalBtn, setModalBtn] = useState<{
|
||||
cancelText?: string;
|
||||
okText?: string;
|
||||
onCancel?: () => void;
|
||||
onOk?: () => void;
|
||||
}>({
|
||||
onCancel: () => setModalOpen(false),
|
||||
onOk: () => ipcRenderer.invoke("start-download"),
|
||||
});
|
||||
|
||||
const checkUpdate = async () => {
|
||||
setChecking(true);
|
||||
/**
|
||||
* @type {import('electron-updater').UpdateCheckResult | null | { message: string, error: Error }}
|
||||
*/
|
||||
const result = await ipcRenderer.invoke("check-update");
|
||||
setProgressInfo({ percent: 0 });
|
||||
setChecking(false);
|
||||
setModalOpen(true);
|
||||
if (result?.error) {
|
||||
setUpdateAvailable(false);
|
||||
setUpdateError(result?.error);
|
||||
}
|
||||
};
|
||||
|
||||
const onUpdateCanAvailable = useCallback(
|
||||
(_event: Electron.IpcRendererEvent, arg1: VersionInfo) => {
|
||||
setVersionInfo(arg1);
|
||||
setUpdateError(undefined);
|
||||
// Can be update
|
||||
if (arg1.update) {
|
||||
setModalBtn((state) => ({
|
||||
...state,
|
||||
cancelText: "Cancel",
|
||||
okText: "Update",
|
||||
onOk: () => ipcRenderer.invoke("start-download"),
|
||||
}));
|
||||
setUpdateAvailable(true);
|
||||
} else {
|
||||
setUpdateAvailable(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const onUpdateError = useCallback(
|
||||
(_event: Electron.IpcRendererEvent, arg1: ErrorType) => {
|
||||
setUpdateAvailable(false);
|
||||
setUpdateError(arg1);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const onDownloadProgress = useCallback(
|
||||
(_event: Electron.IpcRendererEvent, arg1: ProgressInfo) => {
|
||||
setProgressInfo(arg1);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const onUpdateDownloaded = useCallback(
|
||||
(_event: Electron.IpcRendererEvent, ...args: any[]) => {
|
||||
setProgressInfo({ percent: 100 });
|
||||
setModalBtn((state) => ({
|
||||
...state,
|
||||
cancelText: "Later",
|
||||
okText: "Install now",
|
||||
onOk: () => ipcRenderer.invoke("quit-and-install"),
|
||||
}));
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// Get version information and whether to update
|
||||
ipcRenderer.on("update-can-available", onUpdateCanAvailable);
|
||||
ipcRenderer.on("update-error", onUpdateError);
|
||||
ipcRenderer.on("download-progress", onDownloadProgress);
|
||||
ipcRenderer.on("update-downloaded", onUpdateDownloaded);
|
||||
|
||||
return () => {
|
||||
ipcRenderer.off("update-can-available", onUpdateCanAvailable);
|
||||
ipcRenderer.off("update-error", onUpdateError);
|
||||
ipcRenderer.off("download-progress", onDownloadProgress);
|
||||
ipcRenderer.off("update-downloaded", onUpdateDownloaded);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
open={modalOpen}
|
||||
cancelText={modalBtn?.cancelText}
|
||||
okText={modalBtn?.okText}
|
||||
onCancel={modalBtn?.onCancel}
|
||||
onOk={modalBtn?.onOk}
|
||||
footer={updateAvailable ? /* hide footer */ null : undefined}
|
||||
>
|
||||
<div>
|
||||
{updateError ? (
|
||||
<div>
|
||||
<p>Error downloading the latest version.</p>
|
||||
<p>{updateError.message}</p>
|
||||
</div>
|
||||
) : updateAvailable ? (
|
||||
<div>
|
||||
<div>The last version is: v{versionInfo?.newVersion}</div>
|
||||
<div className="ml-[40px]">
|
||||
v{versionInfo?.version} -> v{versionInfo?.newVersion}
|
||||
</div>
|
||||
<div className="ml-[40px]">
|
||||
<div className="mr-[4px]">Update progress:</div>
|
||||
<div className="w-0 flex-grow">
|
||||
<Progress percent={progressInfo?.percent}></Progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-[20px] text-center">
|
||||
{JSON.stringify(versionInfo ?? {}, null, 2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
<button
|
||||
disabled={checking}
|
||||
onClick={checkUpdate}
|
||||
>
|
||||
{checking ? "Checking..." : "Check update"}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpdateElectron;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
padding: 10px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
button {
|
||||
padding: 7px 11px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue