From f8f6dcfed9f6cd7a58d1e05342856d6df8011f01 Mon Sep 17 00:00:00 2001 From: alex8088 <244096523@qq.com> Date: Sat, 29 Jun 2024 00:01:59 +0800 Subject: [PATCH] feat: toast --- .github/workflows/release-tag.yml | 1 + README.md | 1 + package.json | 3 +- packages/playground/package.json | 3 +- packages/playground/src/main/index.ts | 10 + packages/playground/src/renderer/src/index.ts | 28 +- packages/toast/README.md | 150 ++++++++ packages/toast/package.json | 67 ++++ packages/toast/rollup.config.ts | 67 ++++ packages/toast/screenshots/toast.png | Bin 0 -> 357885 bytes packages/toast/src/common.ts | 4 + packages/toast/src/constants.ts | 1 + packages/toast/src/main.ts | 68 ++++ packages/toast/src/renderer.ts | 353 ++++++++++++++++++ packages/toast/src/types.ts | 16 + packages/toast/tsconfig.json | 4 + pnpm-lock.yaml | 9 + 17 files changed, 779 insertions(+), 6 deletions(-) create mode 100644 packages/toast/README.md create mode 100644 packages/toast/package.json create mode 100644 packages/toast/rollup.config.ts create mode 100644 packages/toast/screenshots/toast.png create mode 100644 packages/toast/src/common.ts create mode 100644 packages/toast/src/constants.ts create mode 100644 packages/toast/src/main.ts create mode 100644 packages/toast/src/renderer.ts create mode 100644 packages/toast/src/types.ts create mode 100644 packages/toast/tsconfig.json diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml index e9b8709..e14e157 100644 --- a/.github/workflows/release-tag.yml +++ b/.github/workflows/release-tag.yml @@ -5,6 +5,7 @@ on: - 'titlebar*' - 'contextmenu*' - 'notification*' + - 'toast*' name: Create Release diff --git a/README.md b/README.md index a5becba..a62b321 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ | [@electron-uikit/contextmenu](packages/contextmenu) | Context menu | [![contextmenu version](https://img.shields.io/npm/v/@electron-uikit/contextmenu.svg?label=%20)](packages/contextmenu/CHANGELOG.md) | | [@electron-uikit/notification](packages/notification) | Notification | [![notification version](https://img.shields.io/npm/v/@electron-uikit/notification.svg?label=%20)](packages/notification/CHANGELOG.md) | | [@electron-uikit/titlebar](packages/titlebar) | Title bar web component | [![titlebar version](https://img.shields.io/npm/v/@electron-uikit/titlebar.svg?label=%20)](packages/titlebar/CHANGELOG.md) | +| [@electron-uikit/toast](packages/toast) | Toast | [![toast version](https://img.shields.io/npm/v/@electron-uikit/toast.svg?label=%20)](packages/toast/CHANGELOG.md) | ## License diff --git a/package.json b/package.json index a65324d..4e6edb2 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "build:core": "pnpm run -C packages/core build", "build:contextmenu": "pnpm run -C packages/contextmenu build", "build:notification": "pnpm run -C packages/notification build", - "build:titlebar": "pnpm run -C packages/titlebar build" + "build:titlebar": "pnpm run -C packages/titlebar build", + "build:toast": "pnpm run -C packages/toast build" }, "devDependencies": { "@rollup/plugin-commonjs": "^26.0.1", diff --git a/packages/playground/package.json b/packages/playground/package.json index 062b8a2..4b56e7b 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -11,7 +11,8 @@ "@electron-uikit/contextmenu": "workspace:^", "@electron-uikit/core": "workspace:^", "@electron-uikit/notification": "workspace:^", - "@electron-uikit/titlebar": "workspace:^" + "@electron-uikit/titlebar": "workspace:^", + "@electron-uikit/toast": "workspace:^" }, "devDependencies": { "electron-vite": "^2.2.0", diff --git a/packages/playground/src/main/index.ts b/packages/playground/src/main/index.ts index 50cc291..c951e06 100644 --- a/packages/playground/src/main/index.ts +++ b/packages/playground/src/main/index.ts @@ -11,6 +11,7 @@ import { registerTitleBarListener, attachTitleBarToWindow } from '@electron-uikit/titlebar' +import { Toast } from '@electron-uikit/toast' function createWindow(): void { const mainWindow = new BrowserWindow({ @@ -85,6 +86,15 @@ app.whenReady().then(() => { return nativeTheme.shouldUseDarkColors }) + ipcMain.on('toast:loading', (e) => { + const win = BrowserWindow.fromWebContents(e.sender) + if (win) { + const toast = new Toast(win) + const reply = toast.loading('Downloading') + setTimeout(() => reply.dismiss(), 3000) + } + }) + app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) diff --git a/packages/playground/src/renderer/src/index.ts b/packages/playground/src/renderer/src/index.ts index e8f80b3..ffda3ea 100644 --- a/packages/playground/src/renderer/src/index.ts +++ b/packages/playground/src/renderer/src/index.ts @@ -1,7 +1,12 @@ import { Menu, MenuItem } from '@electron-uikit/contextmenu/renderer' import { notification } from '@electron-uikit/notification/renderer' +import { toast } from '@electron-uikit/toast/renderer' function init(): void { + toast.config({ + supportMain: true, + bottom: 80 + }) window.addEventListener('DOMContentLoaded', () => { const theme = document.getElementById('theme') const icon = document.getElementById('icon') @@ -33,11 +38,26 @@ function init(): void { menu.append(new MenuItem({ type: 'separator' })) menu.append( new MenuItem({ - type: 'checkbox', - label: 'Menu Item Two', - checked: true, + label: 'Show Text Toast', + click: (): void => { + toast.text('I am toast', 4000) + } + }) + ) + menu.append( + new MenuItem({ + label: 'Show Loading Toast', + click: (): void => { + const reply = toast.loading('Loading') + setTimeout(() => reply.success('Done'), 3000000) + } + }) + ) + menu.append( + new MenuItem({ + label: 'Show Loading Toast (Main Process)', click: (): void => { - console.log('menu item two') + window.uikit.ipcRenderer.send('toast:loading') } }) ) diff --git a/packages/toast/README.md b/packages/toast/README.md new file mode 100644 index 0000000..8275c28 --- /dev/null +++ b/packages/toast/README.md @@ -0,0 +1,150 @@ +# @electron-uikit/toast + +![toast version](https://img.shields.io/npm/v/@electron-uikit/toast.svg?color=orange&label=version) + +Toast for Electron app. + +Toast is a concise, non-modal notification method that is used to briefly display information on the user interface without interrupting the user's current operation. It is widely used in mobile operating systems such as Android and iOS to provide quick feedback and important prompt information. Through toast notifications, developers can improve user experience and effectively communicate application status changes. + +
+ +
+ +## Usage + +### Install + +```sh +npm i @electron-uikit/core @electron-uikit/toast +``` + +### Get Started + +#### Using the toast in the renderer process. + +```js +import { toast } from '@electron-uikit/toast/renderer' + +toast.text('foo') +toast.loading('loading') +``` + +#### Using the toast in the main process. + +1. Exposes the UI Kit APIs for components. See [@electron-uikit/core](https://github.com/alex8088/electron-uikit/tree/main/packages/core) guide for more details. + + You can expose it in the specified preload script: + + ```js + import { exposeUIKit } from '@electron-uikit/core/preload' + + exposeUIKit() + ``` + + Or, you can expose it globally in the main process for all renderer processes: + + ```js + import { useUIKit } from '@electron-uikit/core/main' + + useUIKit() + ``` + +> [!NOTE] +> If you are using [@electron-toolkit/preload](https://github.com/alex8088/electron-toolkit/tree/master/packages/preload) to expose Electron APIs, there is no need to use this module, because `core` is also an export of it. + +2. Register a listener in the renderer process, so that you can use it in the main process. + + ```js + import { toast } from '@electron-uikit/toast/renderer' + + toast.config({ + supportMain: true + }) + ``` + +3. Use the notification in the main process. + + ```js + import { BrowserWindow } from 'electron' + import { Toast } from '@electron-uikit/toast' + + const win = new BrowserWindow() + + const toast = new Toast(win) + toast.text('foo') + toast.loading('loading') + ``` + +## APIs + +> [!NOTE] +> To use Toast in the main process, you need to create a Toast instance of the specified window. + +### `.config(options)` + +Configure toast defaults or customize toast. Can only be used in the renderer process. + +- options: `object` + + - **container**: `HTMLElement` (optional) - Container element of Toast. Default to `document.body`. + - **duration**: `number` (optional) - Display duration in millisecond. If set to `0`, it will not turn off automatically. Default to `2000`. + - **customClass**: `string` (optional) - Custom CSS class name for toast. + - **bottom**: `number` (optional) - Toast position to the bottom. Default to `50`. + - **maxWidth**: `number` (optional) - The maximum width of toast. Default to `320`. + - **color**: `string` (optional) - Toast background color. + - **textColor**: `string` (optional) - Toast text color. + - **fontSize**: `number` (optional) - Toast font size. Default to `14`. + - **iconSize**: `number` (optional) - Toast icon size. Default to `20`. + - **supportMain**: `boolean` (optional) - Support Electron main process. Default to `false`. + +### `.text(text[, duration])` + +Show text. The default duration is `2000` ms. + +### `.loading(text[, duration])` + +Show loading. The default duration is 0, which means it is always displayed and can be turned off by calling its return value function. + +```js +import { toast } from '@electron-uikit/toast/renderer' + +const reply = toast.loading('Loading') + +setTimeout(() => { + reply.success('Successful') + // reply.fail('Failed') + // reply.dismiss() +}, 3000) +``` + +## Customization + +1. Customize using CSS classes + +```css +.toast { + --toast-bottom: 50px; + --toast-z-index: 5001; + --toast-color: #48484e; + --toast-text-color: #ffffffd1; + --toast-font-size: 14px; + --toast-font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI'; + --toast-icon-size: 20px; + --toast-max-width: 320px; +} +``` + +```js +toast.config({ + customClass: 'toast' +}) +``` + +2. Customize using `config` API + +```js +toast.config({ + bottom: 200, + maxWidth: 280 +}) +``` diff --git a/packages/toast/package.json b/packages/toast/package.json new file mode 100644 index 0000000..cb6df01 --- /dev/null +++ b/packages/toast/package.json @@ -0,0 +1,67 @@ +{ + "name": "@electron-uikit/toast", + "version": "0.0.0", + "description": "Toast for Electron app.", + "main": "dist/main.cjs", + "module": "dist/main.mjs", + "types": "dist/main.d.ts", + "exports": { + ".": { + "types": "./dist/main.d.ts", + "import": "./dist/main.mjs", + "require": "./dist/main.cjs" + }, + "./main": { + "types": "./dist/main.d.ts", + "import": "./dist/main.mjs", + "require": "./dist/main.cjs" + }, + "./renderer": { + "types": "./dist/renderer.d.ts", + "import": "./dist/renderer.mjs" + } + }, + "typesVersions": { + "*": { + "main": [ + "./dist/main.d.ts" + ], + "renderer": [ + "./dist/renderer.d.ts" + ] + } + }, + "files": [ + "dist" + ], + "author": "Alex Weiv*bqE&SSt8c3giBbV2Q@DZw-t39r}`Yi+~QhoG%}1KeBqT%
zLD%oK_Kj9FB|@qsMSIsUJax^LKDKoeBnb=5L-;CCV6eWEiV1}-CF$ET?(U%I?~;|@
zzvWOx{cJXo(scRzzsuP0rhws^=_0cMIJf`W6JGl+^Zf=LzyOVe_WO@M63sTk!WX@D
zSFG^6VBm!@Rya?|$^O) v6~~Y5d