mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Experiment useAutoAnimate

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-23 08:42:40 +08:00
parent cafadd0980
commit 8d694ecf1b
4 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@formatjs/intl-localematcher": "~0.4.2",
"@formkit/auto-animate": "~0.8.0",
"@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.8",
"@justinribeiro/lite-youtube": "~1.5.0",
@ -3043,6 +3044,11 @@
"tslib": "^2.4.0"
}
},
"node_modules/@formkit/auto-animate": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.0.tgz",
"integrity": "sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw=="
},
"node_modules/@github/combobox-nav": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",
@ -9558,6 +9564,11 @@
"tslib": "^2.4.0"
}
},
"@formkit/auto-animate": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.0.tgz",
"integrity": "sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw=="
},
"@github/combobox-nav": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",

1
package.json
View file

@ -11,6 +11,7 @@
},
"dependencies": {
"@formatjs/intl-localematcher": "~0.4.2",
"@formkit/auto-animate": "~0.8.0",
"@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.8",
"@justinribeiro/lite-youtube": "~1.5.0",

8
src/components/shortcuts-settings.jsx
View file

@ -1,5 +1,6 @@
import './shortcuts-settings.css';
import { useAutoAnimate } from '@formkit/auto-animate/preact';
import {
compressToEncodedURIComponent,
decompressFromEncodedURIComponent,
@ -201,6 +202,8 @@ function ShortcutsSettings({ onClose }) {
const [showForm, setShowForm] = useState(false);
const [showImportExport, setShowImportExport] = useState(false);
const [shortcutsListParent] = useAutoAnimate();
useEffect(() => {
(async () => {
try {
@ -316,9 +319,10 @@ function ShortcutsSettings({ onClose }) {
</details>
</p> */}
{shortcuts.length > 0 ? (
<ol class="shortcuts-list">
<ol class="shortcuts-list" ref={shortcutsListParent}>
{shortcuts.filter(Boolean).map((shortcut, i) => {
const key = i + Object.values(shortcut);
// const key = i + Object.values(shortcut);
const key = Object.values(shortcut).join('-');
const { type } = shortcut;
if (!SHORTCUTS_META[type]) return null;
let { icon, title, subtitle } = SHORTCUTS_META[type];

5
src/pages/accounts.jsx
View file

@ -1,7 +1,7 @@
import './accounts.css';
import { useAutoAnimate } from '@formkit/auto-animate/preact';
import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
import { useReducer, useState } from 'preact/hooks';
import { useReducer } from 'preact/hooks';
import Avatar from '../components/avatar';
@ -21,6 +21,7 @@ function Accounts({ onClose }) {
const moreThanOneAccount = accounts.length > 1;
const [_, reload] = useReducer((x) => x + 1, 0);
const [accountsListParent] = useAutoAnimate();
return (
<div id="accounts-container" class="sheet" tabIndex="-1">
@ -34,7 +35,7 @@ function Accounts({ onClose }) {
</header>
<main>
<section>
<ul class="accounts-list">
<ul class="accounts-list" ref={accountsListParent}>
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
const isDefault = i === 0; // first account is always default