mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-11 20:08:37 +00:00
148807879b
## **User description**
use react-transition-state to simplify exit animation
___
## **Type**
enhancement
___
## **Description**
- Integrated `react-transition-state` for managing animations in `ResizePanel` and `CMDKModal` components, simplifying the code and improving maintainability.
- Introduced a shared animation timeout variable to standardize animation durations across components.
- Added `react-transition-state` to dependencies to enable the new animation handling.
___
## **Changes walkthrough**
<table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>resize-panel.tsx</strong><dd><code>Integrate `react-transition-state` for Resize Panel Animations</code></dd></summary>
<hr>
packages/frontend/component/src/components/resize-panel/resize-panel.tsx
<li>Introduced <code>useTransition</code> hook from <code>react-transition-state</code> for managing <br>animations.<br> <li> Added a constant for animation timeout and applied it to the <br>transition.<br> <li> Utilized the transition state to toggle the open state of the resize <br>panel.<br>
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-a4d6e633862f63f97c167ff41ba62aff8aebf3e3b2f6e7ce13d5a0e22e8ff287">+12/-0</a> </td>
</tr>
<tr>
<td>
<details>
<summary><strong>modal.css.ts</strong><dd><code>Use Variable for Animation Timeout in Modal CSS</code> </dd></summary>
<hr>
packages/frontend/core/src/components/pure/cmdk/modal.css.ts
<li>Created a variable for animation timeout.<br> <li> Updated animation durations to use the new timeout variable.<br>
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-ba8935611b9c1695153d92d08ecb0f7dac73a6197f54ccda5a6e791902cd651d">+6/-3</a> </td>
</tr>
<tr>
<td>
<details>
<summary><strong>modal.tsx</strong><dd><code>Simplify CMDK Modal Animation with `react-transition-state`</code></dd></summary>
<hr>
packages/frontend/core/src/components/pure/cmdk/modal.tsx
<li>Replaced custom animation state management with <code>useTransition</code> hook.<br> <li> Removed old animation state logic and simplified the component.<br> <li> Added animation timeout variable and applied it to the transition.<br>
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-ab3fe66c9b1d3a691fafd1aebc9988e840fedfcd09b5b89570838a5a2a9469c9">+13/-33</a> </td>
</tr>
</table></td></tr><tr><td><strong>Dependencies</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>package.json</strong><dd><code>Add `react-transition-state` Dependency</code> </dd></summary>
<hr>
packages/frontend/core/package.json
- Added `react-transition-state` as a dependency.
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-23e0e5dc0ceb004a0a5d3d13e7d00545de7487535ca0e5eab4c5047f1e24eff0">+1/-0</a> </td>
</tr>
</table></td></tr></tr></tbody></table>
___
> ✨ **PR-Agent usage**:
>Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions
132 lines
4.2 KiB
JSON
132 lines
4.2 KiB
JSON
{
|
|
"name": "@affine/core",
|
|
"type": "module",
|
|
"private": true,
|
|
"version": "0.12.0",
|
|
"scripts": {
|
|
"build": "yarn -T run build-core",
|
|
"dev": "yarn -T run dev-core",
|
|
"static-server": "yarn -T run dev-core --static"
|
|
},
|
|
"exports": {
|
|
"./app": "./src/app.tsx",
|
|
"./router": "./src/router.ts",
|
|
"./bootstrap/setup": "./src/bootstrap/setup.ts",
|
|
"./bootstrap/register-plugins": "./src/bootstrap/register-plugins.ts",
|
|
"./*": "./src/*"
|
|
},
|
|
"dependencies": {
|
|
"@affine-test/fixtures": "workspace:*",
|
|
"@affine/component": "workspace:*",
|
|
"@affine/debug": "workspace:*",
|
|
"@affine/electron-api": "workspace:*",
|
|
"@affine/env": "workspace:*",
|
|
"@affine/graphql": "workspace:*",
|
|
"@affine/i18n": "workspace:*",
|
|
"@affine/templates": "workspace:*",
|
|
"@affine/workspace-impl": "workspace:*",
|
|
"@blocksuite/block-std": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/blocks": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/icons": "2.1.44",
|
|
"@blocksuite/inline": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/lit": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/presets": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
|
|
"@dnd-kit/core": "^6.1.0",
|
|
"@dnd-kit/modifiers": "^7.0.0",
|
|
"@dnd-kit/sortable": "^8.0.0",
|
|
"@emotion/cache": "^11.11.0",
|
|
"@emotion/react": "^11.11.3",
|
|
"@emotion/server": "^11.11.0",
|
|
"@emotion/styled": "^11.11.0",
|
|
"@marsidev/react-turnstile": "^0.5.3",
|
|
"@radix-ui/react-collapsible": "^1.0.3",
|
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
"@radix-ui/react-popover": "^1.0.7",
|
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
|
"@radix-ui/react-select": "^2.0.0",
|
|
"@radix-ui/react-toolbar": "^1.0.4",
|
|
"@react-hookz/web": "^24.0.4",
|
|
"@sentry/integrations": "^7.102.1",
|
|
"@sentry/react": "^7.102.1",
|
|
"@toeverything/theme": "^0.7.29",
|
|
"@vanilla-extract/dynamic": "^2.1.0",
|
|
"animejs": "^3.2.2",
|
|
"async-call-rpc": "^6.4.0",
|
|
"bytes": "^3.1.2",
|
|
"clsx": "^2.1.0",
|
|
"cmdk": "patch:cmdk@npm%3A0.2.0#~/.yarn/patches/cmdk-npm-0.2.0-302237a911.patch",
|
|
"css-spring": "^4.1.0",
|
|
"cssnano": "^6.0.4",
|
|
"dayjs": "^1.11.10",
|
|
"foxact": "^0.2.31",
|
|
"fractional-indexing": "^3.2.0",
|
|
"graphql": "^16.8.1",
|
|
"history": "^5.3.0",
|
|
"idb": "^8.0.0",
|
|
"image-blob-reduce": "^4.1.0",
|
|
"intl-segmenter-polyfill-rs": "^0.1.7",
|
|
"jotai": "^2.6.5",
|
|
"jotai-devtools": "^0.8.0",
|
|
"jotai-effect": "^0.5.0",
|
|
"jotai-scope": "^0.5.1",
|
|
"lit": "^3.1.2",
|
|
"lodash-es": "^4.17.21",
|
|
"lottie-react": "^2.4.0",
|
|
"lottie-web": "^5.12.2",
|
|
"mini-css-extract-plugin": "^2.8.0",
|
|
"nanoid": "^5.0.6",
|
|
"next-auth": "^4.24.5",
|
|
"next-themes": "^0.2.1",
|
|
"postcss-loader": "^8.1.0",
|
|
"react": "18.2.0",
|
|
"react-dom": "18.2.0",
|
|
"react-error-boundary": "^4.0.12",
|
|
"react-is": "18.2.0",
|
|
"react-router-dom": "^6.22.1",
|
|
"react-transition-state": "^2.1.1",
|
|
"react-virtuoso": "~4.6.3",
|
|
"rxjs": "^7.8.1",
|
|
"ses": "^1.3.0",
|
|
"swr": "2.2.5",
|
|
"uuid": "^9.0.1",
|
|
"valtio": "^1.13.1",
|
|
"y-protocols": "^1.0.6",
|
|
"yjs": "^13.6.12",
|
|
"zod": "^3.22.4"
|
|
},
|
|
"devDependencies": {
|
|
"@aws-sdk/client-s3": "3.515.0",
|
|
"@perfsee/webpack": "^1.12.2",
|
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
|
|
"@sentry/webpack-plugin": "^2.14.2",
|
|
"@swc/core": "^1.4.2",
|
|
"@testing-library/react": "^14.2.1",
|
|
"@types/animejs": "^3.1.12",
|
|
"@types/bytes": "^3.1.4",
|
|
"@types/image-blob-reduce": "^4.1.4",
|
|
"@types/lodash-es": "^4.17.12",
|
|
"@types/uuid": "^9.0.8",
|
|
"@types/webpack-env": "^1.18.4",
|
|
"@vanilla-extract/css": "^1.14.1",
|
|
"copy-webpack-plugin": "^12.0.2",
|
|
"css-loader": "^6.10.0",
|
|
"express": "^4.18.2",
|
|
"fake-indexeddb": "^5.0.2",
|
|
"html-webpack-plugin": "^5.6.0",
|
|
"lodash-es": "^4.17.21",
|
|
"mime-types": "^2.1.35",
|
|
"raw-loader": "^4.0.2",
|
|
"source-map-loader": "^5.0.0",
|
|
"style-loader": "^3.3.4",
|
|
"swc-loader": "^0.2.6",
|
|
"thread-loader": "^4.0.2",
|
|
"vitest": "1.3.1",
|
|
"webpack": "^5.90.3",
|
|
"webpack-cli": "^5.1.4",
|
|
"webpack-dev-server": "^5.0.2",
|
|
"webpack-merge": "^5.10.0"
|
|
}
|
|
}
|