Skip to content

Commit 5026c13

Browse files
IVLIUIVLIU
committed
fix: 移除rc-motion & 修复用例错误
2 parents 925207f + da6f7fa commit 5026c13

File tree

13 files changed

+73
-137
lines changed

13 files changed

+73
-137
lines changed

‎.dumirc.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export default defineConfig({
1616
name: 'Collapse',
1717
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
1818
},
19-
outputPath: '.doc',
2019
base: basePath,
2120
publicPath,
2221
});

‎.github/workflows/site-deploy.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ jobs:
3333
uses: peaceiris/actions-gh-pages@v3
3434
with:
3535
github_token: ${{ secrets.GITHUB_TOKEN }}
36-
publish_dir: ./.doc
36+
publish_dir: ./dist
3737
force_orphan: true
3838
user_name: 'github-actions[bot]'
3939
user_email: 'github-actions[bot]@users.noreply.github.com'

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ ReactDOM.render(App, container);
7878
<td>default active key</td>
7979
</tr>
8080
<tr>
81-
<td>destroyInactivePanel</td>
81+
<td>destroyOnHidden</td>
8282
<td>Boolean</td>
8383
<th>false</th>
8484
<td>If destroy the panel which not active, default false. </td>

‎docs/examples/_util/motionUtil.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
1+
import type {
2+
CSSMotionProps,
3+
MotionEndEventHandler,
4+
MotionEventHandler,
5+
} from '@rc-component/motion';
26

37
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
48
const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });

‎now.json‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎package.json‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rc-component/collapse",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "rc-collapse ui component for react",
55
"keywords": [
66
"react",
@@ -31,11 +31,11 @@
3131
"compile": "father build && lessc assets/index.less assets/index.css",
3232
"coverage": "rc-test --coverage",
3333
"docs:build": "dumi build",
34-
"docs:deploy": "npm run docs:build && gh-pages -d .doc",
34+
"docs:deploy": "npm run docs:build && gh-pages -d dist",
3535
"lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
3636
"prepare": "husky",
3737
"now-build": "npm run docs:build",
38-
"prepublishOnly": "npm run compile && np --yolo --no-publish",
38+
"prepublishOnly": "npm run compile && rc-np",
3939
"prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
4040
"postpublish": "npm run docs:deploy",
4141
"start": "dumi dev",
@@ -46,20 +46,21 @@
4646
},
4747
"dependencies": {
4848
"@babel/runtime": "^7.10.1",
49+
"@rc-component/motion": "^1.1.4",
4950
"@rc-component/util": "^1.0.1",
50-
"classnames": "2.x",
51-
"rc-motion": "^2.3.4"
51+
"classnames": "2.x"
5252
},
5353
"devDependencies": {
5454
"@rc-component/father-plugin": "^2.0.1",
55-
"@rc-component/np": "^1.0.3",
55+
"@rc-component/np": "^1.0.4",
5656
"@testing-library/jest-dom": "^6.1.4",
57-
"@testing-library/react": "^14.1.2",
57+
"@testing-library/react": "^16.3.0",
5858
"@testing-library/user-event": "^14.5.2",
5959
"@types/classnames": "^2.2.9",
6060
"@types/jest": "^29.4.0",
61-
"@types/react": "^18.0.0",
62-
"@types/react-dom": "^18.0.0",
61+
"@types/node": "^22.15.18",
62+
"@types/react": "^19.1.4",
63+
"@types/react-dom": "^19.1.5",
6364
"@umijs/fabric": "^4.0.0",
6465
"dumi": "^2.1.1",
6566
"eslint": "^8.55.0",
@@ -71,15 +72,14 @@
7172
"jest": "^29.1.2",
7273
"less": "^4.2.0",
7374
"lint-staged": "^15.0.2",
74-
"np": "^9.1.0",
7575
"prettier": "^3.0.3",
7676
"rc-test": "^7.0.14",
77-
"react": "^18.2.0",
78-
"react-dom": "^18.2.0",
77+
"react": "^19.1.0",
78+
"react-dom": "^19.1.0",
7979
"typescript": "^5.0.0"
8080
},
8181
"peerDependencies": {
82-
"react": ">=16.9.0",
83-
"react-dom": ">=16.9.0"
82+
"react": ">=18.0.0",
83+
"react-dom": ">=18.0.0"
8484
}
8585
}

‎src/Collapse.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
2020
const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
2121
const {
2222
prefixCls = 'rc-collapse',
23-
destroyInactivePanel = false,
23+
destroyOnHidden = false,
2424
style,
2525
accordion,
2626
className,
@@ -76,7 +76,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
7676
openMotion,
7777
expandIcon,
7878
collapsible,
79-
destroyInactivePanel,
79+
destroyOnHidden,
8080
onItemClick,
8181
activeKey,
8282
classNames: customizeClassNames,

‎src/Panel.tsx‎

Lines changed: 13 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import classNames from 'classnames';
2-
import CSSMotion from 'rc-motion';
32
import KeyCode from '@rc-component/util/lib/KeyCode';
4-
import React, { useMemo } from 'react';
3+
import React from 'react';
54
import type { CollapsePanelProps } from './interface';
65
import PanelContent from './PanelContent';
76

@@ -23,7 +22,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
2322
header,
2423
expandIcon,
2524
openMotion,
26-
destroyInactivePanel,
25+
destroyOnHidden,
2726
children,
2827
...resetProps
2928
} = props;
@@ -32,15 +31,6 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
3231

3332
const ifExtraExist = extra !== null && extra !== undefined && typeof extra !== 'boolean';
3433

35-
// ? 用于判断浏览器是否支持::details-content 否则使用CSSMotion
36-
const supportsDetailsContentSelector = useMemo(
37-
() =>
38-
typeof document !== 'undefined' && typeof document.createElement === 'function'
39-
? CSS.supports('selector(details::details-content)')
40-
: false,
41-
[],
42-
);
43-
4434
const collapsibleProps = {
4535
onClick: (e: React.MouseEvent) => {
4636
onItemClick?.(panelKey);
@@ -78,7 +68,7 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
7868
},
7969
className,
8070
// ? 修改为details实现后动画是作用在details元素上 需要将motionName设置在details上
81-
supportsDetailsContentSelector && openMotion?.motionName,
71+
openMotion?.motionName,
8272
);
8373

8474
const headerClassName = classNames(
@@ -98,68 +88,6 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
9888
};
9989

10090
// ======================== Render ========================
101-
102-
const leavedClassName = `${prefixCls}-panel-hidden`;
103-
const createPanelContent = (
104-
props: Partial<{
105-
className: string;
106-
style: React.CSSProperties;
107-
motionRef: (node: HTMLDivElement) => void;
108-
}>,
109-
) => {
110-
const { className, style, motionRef } = props;
111-
112-
return (
113-
<PanelContent
114-
ref={motionRef}
115-
prefixCls={prefixCls}
116-
className={className}
117-
classNames={customizeClassNames}
118-
style={style}
119-
styles={styles}
120-
isActive={isActive}
121-
forceRender={forceRender}
122-
role={accordion ? 'tabpanel' : void 0}
123-
>
124-
{children}
125-
</PanelContent>
126-
);
127-
};
128-
let detailsChildren = (
129-
<CSSMotion
130-
visible={isActive}
131-
leavedClassName={leavedClassName}
132-
{...openMotion}
133-
forceRender={forceRender}
134-
removeOnLeave={destroyInactivePanel}
135-
>
136-
{({ className, style }, motionRef) =>
137-
createPanelContent({
138-
className,
139-
style,
140-
motionRef,
141-
})
142-
}
143-
</CSSMotion>
144-
);
145-
146-
// ? 模拟CSSMotion子元素生命周期管理
147-
if (supportsDetailsContentSelector) {
148-
if (isActive) {
149-
detailsChildren = createPanelContent({});
150-
} else if (!destroyInactivePanel && leavedClassName) {
151-
detailsChildren = createPanelContent({
152-
className: leavedClassName,
153-
});
154-
} else if (forceRender || (!destroyInactivePanel && !leavedClassName)) {
155-
detailsChildren = createPanelContent({
156-
style: { display: 'none' },
157-
});
158-
} else {
159-
detailsChildren = null;
160-
}
161-
}
162-
16391
return (
16492
<details {...resetProps} ref={ref} className={collapsePanelClassNames} open={isActive}>
16593
<summary {...headerProps}>
@@ -173,7 +101,16 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
173101
</span>
174102
{ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
175103
</summary>
176-
{detailsChildren}
104+
<PanelContent
105+
prefixCls={prefixCls}
106+
classNames={customizeClassNames}
107+
styles={styles}
108+
isActive={isActive}
109+
forceRender={forceRender}
110+
role={accordion ? 'tabpanel' : undefined}
111+
>
112+
{children}
113+
</PanelContent>
177114
</details>
178115
);
179116
});

‎src/PanelContent.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { CollapsePanelProps } from './interface';
44

55
const PanelContent = React.forwardRef<
66
HTMLDivElement,
7-
CollapsePanelProps & { children: React.ReactNode }
7+
React.PropsWithChildren<Readonly<CollapsePanelProps>>
88
>((props, ref) => {
99
const {
1010
prefixCls,
@@ -35,7 +35,10 @@ const PanelContent = React.forwardRef<
3535
},
3636
className,
3737
)}
38-
style={style}
38+
style={{
39+
display: isActive ? 'block' : 'none',
40+
...style,
41+
}}
3942
role={role}
4043
>
4144
<div

0 commit comments

Comments
 (0)