mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-03 10:40:44 +08:00
Peng Xiao
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
110 lines
3.5 KiB
JSON
110 lines
3.5 KiB
JSON
{
|
|
"name": "@affine/component",
|
|
"private": true,
|
|
"main": "./src/index.ts",
|
|
"exports": {
|
|
".": "./src/index.ts",
|
|
"./theme/*": "./src/theme/*",
|
|
"./ui/*": "./src/ui/*/index.ts",
|
|
"./*": "./src/components/*/index.tsx"
|
|
},
|
|
"scripts": {
|
|
"dev": "storybook dev -p 6006",
|
|
"build:storybook": "storybook build"
|
|
},
|
|
"peerDependencies": {
|
|
"@blocksuite/blocks": "*",
|
|
"@blocksuite/global": "*",
|
|
"@blocksuite/icons": "2.1.34",
|
|
"@blocksuite/presets": "*",
|
|
"@blocksuite/store": "*"
|
|
},
|
|
"dependencies": {
|
|
"@affine/debug": "workspace:*",
|
|
"@affine/electron-api": "workspace:*",
|
|
"@affine/graphql": "workspace:*",
|
|
"@affine/i18n": "workspace:*",
|
|
"@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",
|
|
"@lit/react": "^1.0.3",
|
|
"@popperjs/core": "^2.11.8",
|
|
"@radix-ui/react-avatar": "^1.0.4",
|
|
"@radix-ui/react-collapsible": "^1.0.3",
|
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
|
"@radix-ui/react-popover": "^1.0.7",
|
|
"@radix-ui/react-radio-group": "^1.1.3",
|
|
"@radix-ui/react-scroll-area": "^1.0.5",
|
|
"@radix-ui/react-toast": "^1.1.5",
|
|
"@radix-ui/react-toolbar": "^1.0.4",
|
|
"@radix-ui/react-tooltip": "^1.0.7",
|
|
"@toeverything/theme": "^0.7.29",
|
|
"@vanilla-extract/dynamic": "^2.1.0",
|
|
"bytes": "^3.1.2",
|
|
"check-password-strength": "^2.0.7",
|
|
"clsx": "^2.1.0",
|
|
"dayjs": "^1.11.10",
|
|
"foxact": "^0.2.31",
|
|
"jotai": "^2.6.5",
|
|
"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",
|
|
"nanoid": "^5.0.6",
|
|
"next-themes": "^0.2.1",
|
|
"react": "18.2.0",
|
|
"react-dom": "18.2.0",
|
|
"react-error-boundary": "^4.0.12",
|
|
"react-is": "^18.2.0",
|
|
"react-paginate": "^8.2.0",
|
|
"react-router-dom": "^6.22.1",
|
|
"react-transition-state": "^2.1.1",
|
|
"react-virtuoso": "~4.6.3",
|
|
"rxjs": "^7.8.1",
|
|
"swr": "^2.2.5",
|
|
"uuid": "^9.0.1"
|
|
},
|
|
"devDependencies": {
|
|
"@blocksuite/blocks": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/icons": "2.1.44",
|
|
"@blocksuite/lit": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/presets": "0.12.0-canary-202402220729-0868ac6",
|
|
"@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
|
|
"@storybook/addon-actions": "^7.6.17",
|
|
"@storybook/addon-essentials": "^7.6.17",
|
|
"@storybook/addon-interactions": "^7.6.17",
|
|
"@storybook/addon-links": "^7.6.17",
|
|
"@storybook/addon-mdx-gfm": "^7.6.17",
|
|
"@storybook/addon-storysource": "^7.6.17",
|
|
"@storybook/blocks": "^7.6.17",
|
|
"@storybook/builder-vite": "^7.6.17",
|
|
"@storybook/jest": "^0.2.3",
|
|
"@storybook/react": "^7.6.17",
|
|
"@storybook/react-vite": "^7.6.17",
|
|
"@storybook/test-runner": "^0.16.0",
|
|
"@storybook/testing-library": "^0.2.2",
|
|
"@testing-library/react": "^14.2.1",
|
|
"@types/bytes": "^3.1.4",
|
|
"@types/react": "^18.2.58",
|
|
"@types/react-dnd": "^3.0.2",
|
|
"@types/react-dom": "^18.2.19",
|
|
"@vanilla-extract/css": "^1.14.1",
|
|
"fake-indexeddb": "^5.0.2",
|
|
"storybook": "^7.6.17",
|
|
"storybook-dark-mode": "^3.0.3",
|
|
"typescript": "^5.3.3",
|
|
"vite": "^5.1.4",
|
|
"vitest": "1.3.1",
|
|
"yjs": "^13.6.12"
|
|
},
|
|
"version": "0.12.0"
|
|
}
|