From 737d47a7d4378abf3cbdaff823ef8f9f2a1e253b Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Sat, 17 May 2025 19:15:36 +0800 Subject: [PATCH 1/6] Refactoring --- .gitignore | 1 + README.md | 2 +- docs/examples/_util/motionUtil.ts | 6 +++++- package.json | 17 ++++++++------- src/Collapse.tsx | 4 ++-- src/Panel.tsx | 8 +++---- src/PanelContent.tsx | 2 +- src/hooks/useItems.tsx | 35 ++++++++++++++++++------------- src/index.tsx | 1 + src/interface.ts | 11 +++++----- tests/index.spec.tsx | 4 ++-- 11 files changed, 53 insertions(+), 38 deletions(-) diff --git a/.gitignore b/.gitignore index 2623981..e1c3a36 100644 --- a/.gitignore +++ b/.gitignore @@ -28,6 +28,7 @@ coverage es yarn.lock package-lock.json +pnpm-lock.yaml .storybook .doc diff --git a/README.md b/README.md index d790077..96ceda1 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ ReactDOM.render(App, container); default active key - destroyInactivePanel + destroyOnHidden Boolean false If destroy the panel which not active, default false. diff --git a/docs/examples/_util/motionUtil.ts b/docs/examples/_util/motionUtil.ts index 802a022..7163efe 100644 --- a/docs/examples/_util/motionUtil.ts +++ b/docs/examples/_util/motionUtil.ts @@ -1,4 +1,8 @@ -import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion'; +import type { + CSSMotionProps, + MotionEndEventHandler, + MotionEventHandler, +} from '@rc-component/motion'; const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 }); const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 }); diff --git a/package.json b/package.json index b349b40..966c929 100644 --- a/package.json +++ b/package.json @@ -46,9 +46,9 @@ }, "dependencies": { "@babel/runtime": "^7.10.1", + "@rc-component/motion": "^1.1.4", "@rc-component/util": "^1.0.1", - "classnames": "2.x", - "rc-motion": "^2.3.4" + "classnames": "2.x" }, "devDependencies": { "@rc-component/father-plugin": "^2.0.1", @@ -57,8 +57,9 @@ "@testing-library/user-event": "^14.5.2", "@types/classnames": "^2.2.9", "@types/jest": "^29.4.0", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", + "@types/node": "^22.15.18", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "@umijs/fabric": "^4.0.0", "dumi": "^2.1.1", "eslint": "^8.55.0", @@ -73,12 +74,12 @@ "np": "^9.1.0", "prettier": "^3.0.3", "rc-test": "^7.0.14", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", "typescript": "^5.0.0" }, "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0" + "react": ">=18.0.0", + "react-dom": ">=18.0.0" } } diff --git a/src/Collapse.tsx b/src/Collapse.tsx index e75ec5f..1b0b099 100644 --- a/src/Collapse.tsx +++ b/src/Collapse.tsx @@ -20,7 +20,7 @@ function getActiveKeysArray(activeKey: React.Key | React.Key[]) { const Collapse = React.forwardRef((props, ref) => { const { prefixCls = 'rc-collapse', - destroyInactivePanel = false, + destroyOnHidden = false, style, accordion, className, @@ -72,7 +72,7 @@ const Collapse = React.forwardRef((props, ref) => openMotion, expandIcon, collapsible, - destroyInactivePanel, + destroyOnHidden, onItemClick, activeKey, classNames: customizeClassNames, diff --git a/src/Panel.tsx b/src/Panel.tsx index c463325..f5e7bb2 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import CSSMotion from 'rc-motion'; +import CSSMotion from '@rc-component/motion'; import KeyCode from '@rc-component/util/lib/KeyCode'; import React from 'react'; import type { CollapsePanelProps } from './interface'; @@ -23,7 +23,7 @@ const CollapsePanel = React.forwardRef((prop header, expandIcon, openMotion, - destroyInactivePanel, + destroyOnHidden, children, ...resetProps } = props; @@ -104,7 +104,7 @@ const CollapsePanel = React.forwardRef((prop leavedClassName={`${prefixCls}-panel-hidden`} {...openMotion} forceRender={forceRender} - removeOnLeave={destroyInactivePanel} + removeOnLeave={destroyOnHidden} > {({ className: motionClassName, style: motionStyle }, motionRef) => { return ( @@ -117,7 +117,7 @@ const CollapsePanel = React.forwardRef((prop styles={styles} isActive={isActive} forceRender={forceRender} - role={accordion ? 'tabpanel' : void 0} + role={accordion ? 'tabpanel' : undefined} > {children} diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx index e5fc2fc..f62bd30 100644 --- a/src/PanelContent.tsx +++ b/src/PanelContent.tsx @@ -4,7 +4,7 @@ import type { CollapsePanelProps } from './interface'; const PanelContent = React.forwardRef< HTMLDivElement, - CollapsePanelProps & { children: React.ReactNode } + React.PropsWithChildren> >((props, ref) => { const { prefixCls, diff --git a/src/hooks/useItems.tsx b/src/hooks/useItems.tsx index 08317ac..4b937a9 100644 --- a/src/hooks/useItems.tsx +++ b/src/hooks/useItems.tsx @@ -7,7 +7,7 @@ type Props = Pick< CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles' > & - Pick & { + Pick & { activeKey: React.Key[]; }; @@ -16,7 +16,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => { prefixCls, accordion, collapsible, - destroyInactivePanel, + destroyOnHidden, onItemClick, activeKey, openMotion, @@ -32,7 +32,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => { key: rawKey, collapsible: rawCollapsible, onItemClick: rawOnItemClick, - destroyInactivePanel: rawDestroyInactivePanel, + destroyOnHidden: rawDestroyOnHidden, ...restProps } = item; @@ -40,10 +40,12 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => { // Maybe: https://github.com/react-component/collapse/blob/aac303a8b6ff30e35060b4f8fecde6f4556fcbe2/src/Collapse.tsx#L15 const key = String(rawKey ?? index); const mergeCollapsible = rawCollapsible ?? collapsible; - const mergeDestroyInactivePanel = rawDestroyInactivePanel ?? destroyInactivePanel; + const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden; const handleItemClick = (value: React.Key) => { - if (mergeCollapsible === 'disabled') return; + if (mergeCollapsible === 'disabled') { + return; + } onItemClick(value); rawOnItemClick?.(value); }; @@ -70,7 +72,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => { header={label} collapsible={mergeCollapsible} onItemClick={handleItemClick} - destroyInactivePanel={mergeDestroyInactivePanel} + destroyOnHidden={mergedDestroyOnHidden} > {children} @@ -86,13 +88,15 @@ const getNewChild = ( index: number, props: Props, ) => { - if (!child) return null; + if (!child) { + return null; + } const { prefixCls, accordion, collapsible, - destroyInactivePanel, + destroyOnHidden, onItemClick, activeKey, openMotion, @@ -106,7 +110,7 @@ const getNewChild = ( const { header, headerClass, - destroyInactivePanel: childDestroyInactivePanel, + destroyOnHidden: childDestroyOnHidden, collapsible: childCollapsible, onItemClick: childOnItemClick, } = child.props; @@ -121,7 +125,9 @@ const getNewChild = ( const mergeCollapsible = childCollapsible ?? collapsible; const handleItemClick = (value: React.Key) => { - if (mergeCollapsible === 'disabled') return; + if (mergeCollapsible === 'disabled') { + return; + } onItemClick(value); childOnItemClick?.(value); }; @@ -135,7 +141,7 @@ const getNewChild = ( styles, isActive, prefixCls, - destroyInactivePanel: childDestroyInactivePanel ?? destroyInactivePanel, + destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden, openMotion, accordion, children: child.props.children, @@ -155,7 +161,7 @@ const getNewChild = ( } }); - return React.cloneElement(child, childProps); + return React.cloneElement(child, childProps); }; function useItems( @@ -166,8 +172,9 @@ function useItems( if (Array.isArray(items)) { return convertItemsToNodes(items, props); } - - return toArray(rawChildren).map((child, index) => getNewChild(child, index, props)); + return toArray(rawChildren).map((child, index) => + getNewChild(child as React.ReactElement, index, props), + ); } export default useItems; diff --git a/src/index.tsx b/src/index.tsx index 8e963c6..8916ef2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import Collapse from './Collapse'; export type { CollapsePanelProps, CollapseProps } from './interface'; diff --git a/src/interface.ts b/src/interface.ts index 123c793..b420b7e 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,4 +1,4 @@ -import type { CSSMotionProps } from 'rc-motion'; +import type { CSSMotionProps } from '@rc-component/motion'; import type * as React from 'react'; export type CollapsibleType = 'header' | 'icon' | 'disabled'; @@ -28,7 +28,7 @@ export interface CollapseProps { accordion?: boolean; className?: string; style?: object; - destroyInactivePanel?: boolean; + destroyOnHidden?: boolean; expandIcon?: (props: object) => React.ReactNode; collapsible?: CollapsibleType; children?: React.ReactNode; @@ -42,9 +42,10 @@ export interface CollapseProps { } export type SemanticName = 'header' | 'title' | 'body' | 'icon'; + export interface CollapsePanelProps extends React.DOMAttributes { id?: string; - header?: string | React.ReactNode; + header?: React.ReactNode; prefixCls?: string; headerClass?: string; showArrow?: boolean; @@ -54,10 +55,10 @@ export interface CollapsePanelProps extends React.DOMAttributes styles?: Partial>; isActive?: boolean; openMotion?: CSSMotionProps; - destroyInactivePanel?: boolean; + destroyOnHidden?: boolean; accordion?: boolean; forceRender?: boolean; - extra?: string | React.ReactNode; + extra?: React.ReactNode; onItemClick?: (panelKey: React.Key) => void; expandIcon?: (props: object) => React.ReactNode; panelKey?: React.Key; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index ff5f759..f0d8117 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1,6 +1,6 @@ import type { RenderResult } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react'; -import KeyCode from 'rc-util/lib/KeyCode'; +import KeyCode from '@rc-component/util/lib/KeyCode'; import React, { Fragment } from 'react'; import Collapse, { Panel } from '../src/index'; import type { CollapseProps, ItemType } from '../src/interface'; @@ -240,7 +240,7 @@ describe('collapse', () => { it('click should toggle panel state', () => { const { container } = render( - + first From 365e7447d654ce89228c5a0ba448b7c0d8a72c02 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Sat, 17 May 2025 19:18:41 +0800 Subject: [PATCH 2/6] Refactoring --- src/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 8916ef2..8e963c6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import Collapse from './Collapse'; export type { CollapsePanelProps, CollapseProps } from './interface'; From 0098a1ad574f316fb2166e324775e0da8b7e49a9 Mon Sep 17 00:00:00 2001 From: Jianan Li Date: Sat, 17 May 2025 19:20:47 +0800 Subject: [PATCH 3/6] Refactoring --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 966c929..21dd9c4 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ }, "devDependencies": { "@rc-component/father-plugin": "^2.0.1", + "@rc-component/np": "^1.0.4", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", @@ -71,7 +72,6 @@ "jest": "^29.1.2", "less": "^4.2.0", "lint-staged": "^15.0.2", - "np": "^9.1.0", "prettier": "^3.0.3", "rc-test": "^7.0.14", "react": "^19.1.0", From e4d24310cf5e1bf4066ab7d752d0efa9c278d802 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 19 May 2025 11:11:07 +0800 Subject: [PATCH 4/6] chore: update vercel --- now.json | 11 ----------- vercel.json | 3 +++ 2 files changed, 3 insertions(+), 11 deletions(-) delete mode 100644 now.json create mode 100644 vercel.json diff --git a/now.json b/now.json deleted file mode 100644 index c502a14..0000000 --- a/now.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "version": 2, - "name": "rc-collapse", - "builds": [ - { - "src": "package.json", - "use": "@now/static-build", - "config": { "distDir": ".doc" } - } - ] -} diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..cc12e40 --- /dev/null +++ b/vercel.json @@ -0,0 +1,3 @@ +{ + "framework": "umijs" +} From f8bad81e771982c4fc04cc149c929b35b70f06f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 19 May 2025 11:12:35 +0800 Subject: [PATCH 5/6] chore: fix peer --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 21dd9c4..6a36d49 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@rc-component/father-plugin": "^2.0.1", "@rc-component/np": "^1.0.4", "@testing-library/jest-dom": "^6.1.4", - "@testing-library/react": "^14.1.2", + "@testing-library/react": "^16.3.0", "@testing-library/user-event": "^14.5.2", "@types/classnames": "^2.2.9", "@types/jest": "^29.4.0", From 92c2b1a940a764d1c4113246c1f0a0641bb50f10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 19 May 2025 11:23:57 +0800 Subject: [PATCH 6/6] chore: update build config --- .dumirc.ts | 1 - .github/workflows/site-deploy.yml | 2 +- package.json | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index 2365eec..95ecbc3 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -16,7 +16,6 @@ export default defineConfig({ name: 'Collapse', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, - outputPath: '.doc', base: basePath, publicPath, }); diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml index 19eaa7b..8f12507 100644 --- a/.github/workflows/site-deploy.yml +++ b/.github/workflows/site-deploy.yml @@ -33,7 +33,7 @@ jobs: uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./.doc + publish_dir: ./dist force_orphan: true user_name: 'github-actions[bot]' user_email: 'github-actions[bot]@users.noreply.github.com' diff --git a/package.json b/package.json index 6a36d49..d551259 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "compile": "father build && lessc assets/index.less assets/index.css", "coverage": "rc-test --coverage", "docs:build": "dumi build", - "docs:deploy": "npm run docs:build && gh-pages -d .doc", + "docs:deploy": "npm run docs:build && gh-pages -d dist", "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", "prepare": "husky", "now-build": "npm run docs:build",