Skip to content

Commit 8bd6b5f

Browse files
mortalYoungmortalYoung
authored
docs: update Tree&Details builtin components (#408)
* docs: update Tree&Details builtin components * fix: improve style
1 parent bfc53ae commit 8bd6b5f

File tree

7 files changed

+10518
-10902
lines changed

7 files changed

+10518
-10902
lines changed

‎.dumi/theme/builtins/Details.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { useEffect, useRef, useState } from 'react';
2+
import CSSMotion, { type CSSMotionProps, type MotionEventHandler } from 'rc-motion';
3+
import type { MotionEndEventHandler, MotionEvent } from 'rc-motion/lib/interface';
4+
5+
import './index.less';
6+
7+
interface IDetailProps {
8+
title: string;
9+
children?: any;
10+
}
11+
12+
// ================== Collapse Motion ==================
13+
const getCollapsedHeight: MotionEventHandler = () => ({
14+
height: 0,
15+
opacity: 0,
16+
});
17+
const getRealHeight: MotionEventHandler = (node) => {
18+
const { scrollHeight } = node;
19+
return { height: scrollHeight, opacity: 1 };
20+
};
21+
const getCurrentHeight: MotionEventHandler = (node) => ({
22+
height: node?.offsetHeight ?? 0,
23+
});
24+
25+
const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
26+
event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
27+
28+
const initCollapseMotion: CSSMotionProps = {
29+
motionName: 'ant-motion-collapse',
30+
onAppearStart: getCollapsedHeight,
31+
onEnterStart: getCollapsedHeight,
32+
onAppearActive: getRealHeight,
33+
onEnterActive: getRealHeight,
34+
onLeaveStart: getCurrentHeight,
35+
onLeaveActive: getCollapsedHeight,
36+
onAppearEnd: skipOpacityTransition,
37+
onEnterEnd: skipOpacityTransition,
38+
onLeaveEnd: skipOpacityTransition,
39+
motionDeadline: 500,
40+
};
41+
42+
export default function Details({ title, children }: IDetailProps) {
43+
const [open, setOpen] = useState(false);
44+
const container = useRef<HTMLDetailsElement>(null);
45+
const raf = useRef<number | undefined>(undefined);
46+
47+
useEffect(() => {
48+
if (open) {
49+
raf.current = window.requestAnimationFrame(() => {
50+
if (container.current) {
51+
container.current.open = true;
52+
}
53+
});
54+
}
55+
56+
return () => {
57+
raf.current !== undefined && window.cancelAnimationFrame(raf.current);
58+
};
59+
}, [open]);
60+
61+
const handleVisibleChanged = (visible: boolean) => {
62+
if (!visible) {
63+
raf.current !== undefined && window.cancelAnimationFrame(raf.current);
64+
raf.current = window.requestAnimationFrame(() => {
65+
if (container.current) {
66+
container.current.open = false;
67+
}
68+
});
69+
}
70+
};
71+
72+
return (
73+
<details
74+
ref={container}
75+
className="dumi-builtins-details"
76+
onClick={(e) => {
77+
e.preventDefault();
78+
}}
79+
data-open={open}
80+
>
81+
<summary onClick={() => setOpen((o) => !o)}>{title}</summary>
82+
<CSSMotion
83+
{...initCollapseMotion}
84+
visible={open}
85+
onVisibleChanged={handleVisibleChanged}
86+
>
87+
{({ className, style }) => (
88+
<section
89+
className={`dumi-builtins-details-content ${className || ''}`}
90+
style={style}
91+
>
92+
{children}
93+
</section>
94+
)}
95+
</CSSMotion>
96+
</details>
97+
);
98+
}

‎.dumi/theme/builtins/index.less‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.dumi-builtins-details {
2+
background: #ECF4FF;
3+
padding: 16px;
4+
font-size: 14px;
5+
color: #3367AF;
6+
border-radius: 4px;
7+
margin: 12px 0;
8+
&[data-open="true"] {
9+
> summary::before {
10+
transform: rotate(90deg);
11+
}
12+
}
13+
> summary {
14+
cursor: pointer;
15+
list-style: none;
16+
padding-left: 1em;
17+
line-height: 1.5em;
18+
position: relative;
19+
&::before {
20+
border-color: transparent transparent transparent #3367AF;
21+
border-style: solid;
22+
border-width: 0.38em;
23+
content: "";
24+
left: 0;
25+
position: absolute;
26+
top: 0.4em;
27+
transform: rotate(0);
28+
transform-origin: 3px 50%;
29+
transition: transform 0.5s;
30+
}
31+
}
32+
&-content {
33+
transition: height 0.3s;
34+
> :last-child {
35+
margin-bottom: 0;
36+
}
37+
}
38+
}

‎docs/guide/componentDev.md‎

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -19,51 +19,67 @@ group: 研发
1919

2020
### 目录结构
2121

22-
```plain
23-
dt-react-component
24-
├─.dumirc.ts --> dumi 的配置文件
25-
├─.editorconfig --> 编辑器配置文件，可以约定项目中使用的代码风格、缩进等等规则
26-
├─.eslintrc.js
27-
├─.fatherrc.ts --> father-build 的配置文件
28-
├─.prettierignore
29-
├─.prettierrc.js
30-
├─.stylelintignore
31-
├─.stylelintrc
32-
├─CHANGELOG.md
33-
├─LICENSE
34-
├─README-zh_CN.md
35-
├─README.md
36-
├─jest.config.js --> jest配置文件
37-
├─package.json
38-
├─pnpm-lock.yaml
39-
├─tsconfig.json --> TypeScript 的配置文件
40-
├─tests --> jest配置相关的文件
41-
| ├─fileTransformer.js
42-
| ├─setupTests.js
43-
| └styleMock.js
44-
├─src --> 组件源码
45-
| ├─index.ts --> 组件主入口
46-
| ├─utils
47-
| | ├─antdProps.ts --> antd的一些props
48-
| | ├─copy.tsx --> Copy工具类
49-
| | ├─index.ts --> 公共方法主入口
50-
| | ├─interface.ts --> 公共的类型定义
51-
| | └__tests__
52-
| ├─useList --> 单个组件目录
53-
| | ├─index.md --> 组件说明文档
54-
| | ├─index.ts --> 单个组件的源码
55-
| | ├─demos --> 不同场景的示例
56-
| | └__tests__ --> 单元测试
57-
├─docs --> 文档目录
58-
| ├─index.md
59-
| ├─guide
60-
| | ├─CONTRIBUTING.md --> 贡献指南
61-
| | ├─componentDev.md --> 组件开发
62-
| | ├─index.md --> 快速上手
63-
| | └updateLog.md --> 更新日志
64-
└.dumi --> dumi的配置文件
65-
66-
```
22+
<Tree>
23+
<ul>
24+
<li>.dumi<small>dumi的配置文件</small></li>
25+
<li>.dumirc.ts<small>dumi 的配置文件</small></li>
26+
<li>.editorconfig<small>编辑器配置文件，可以约定项目中使用的代码风格、缩进等等规则</small></li>
27+
<li>.eslintrc.js</li>
28+
<li>.fatherrc.ts<small>father-build 的配置文件</small></li>
29+
<li>.prettierignore</li>
30+
<li>.prettierrc.js</li>
31+
<li>.stylelintignore</li>
32+
<li>.stylelintrc</li>
33+
<li>CHANGELOG.md</li>
34+
<li>LICENSE</li>
35+
<li>README-zh_CN.md</li>
36+
<li>README.md</li>
37+
<li>jest.config.js<small>jest配置文件</small></li>
38+
<li>package.json</li>
39+
<li>pnpm-lock.yaml</li>
40+
<li>tsconfig.json<small>TypeScript 的配置文件</small></li>
41+
<li>
42+
tests<small>jest配置相关的文件</small>
43+
<ul>
44+
<li>fileTransformer.js</li>
45+
<li>setupTests.js</li>
46+
<li>styleMock.js</li>
47+
</ul>
48+
</li>
49+
<li>
50+
src<small>组件源码</small>
51+
<ul>
52+
<li>index.ts<small>组件主入口</small></li>
53+
<li>
54+
utils
55+
<ul>
56+
<li>antdProps.ts<small>antd的一些props</small></li>
57+
<li>copy.tsx<small>Copy工具类</small></li>
58+
<li>index.ts<small>公共方法主入口</small></li>
59+
<li>interface.ts<small>公共的类型定义</small></li>
60+
<li>__tests__</li>
61+
</ul>
62+
</li>
63+
<li>
64+
useList<small>单个组件目录</small>
65+
<ul>
66+
<li>index.md<small>组件说明文档</small></li>
67+
<li>index.ts<small>单个组件的源码</small></li>
68+
<li>demos<small>不同场景的示例</small></li>
69+
<li>__tests__<small>单元测试</small></li>
70+
</ul>
71+
</li>
72+
</ul>
73+
</li>
74+
<li>
75+
docs<small>文档目录</small>
76+
<ul>
77+
<li>index.md</li>
78+
<li>guide</li>
79+
</ul>
80+
</li>
81+
</ul>
82+
</Tree>
6783

6884
### 开发流程
6985

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
"prettier": "^2.7.1",
104104
"prettier-plugin-organize-imports": "^3.0.0",
105105
"prettier-plugin-packagejson": "^2.2.18",
106+
"rc-motion": "2.6.2",
106107
"react": "^18.0.0",
107108
"react-dom": "^18.0.0",
108109
"react-test-renderer": "^18.2.0",

0 commit comments

Comments
 (0)