Skip to content

Commit b9b1976

Browse files
windolepengjin
windole
and
pengjin
authored
Feat: add text-ellipsis component (#53)
* fix: 取消hoist，避免幽灵依赖 * chore: 添加类型包，防止测试文件报错 * fix: 整理入口文件 * feat: 新增TextEllipsis组件 * test: 新增TextEllipsis 单元测试 * fix: 修改引入路径 --------- Co-authored-by: pengjin <pengjin@vcredit.com>
1 parent 82af30d commit b9b1976

File tree

18 files changed

+536
-132
lines changed

18 files changed

+536
-132
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"changelog": "pnpm -r --filter ./packages/rc-ui-lib changelog",
1414
"test": "pnpm -r --filter ./packages/rc-ui-lib test",
1515
"lint": "pnpm -r --filter ./packages/rc-ui-lib lint",
16-
"lint:prettier": "prettier --write \"packages/rc-ui-lib/src/**/*.{js,json,ts,tsx,css,less,md}\""
16+
"lint:prettier": "prettier --write \"packages/rc-ui-lib/src/**/*.{js,json,ts,tsx,css,less,md}\"",
17+
"clean": "rimraf node_modules"
1718
},
1819
"repository": {
1920
"type": "git",

‎packages/rc-cli/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"conventional-changelog": "^3.1.24",
5555
"enzyme": "^3.11.0",
5656
"enzyme-to-json": "^3.6.1",
57+
"esbuild": "^0.14.54",
5758
"execa": "^5.1.1",
5859
"fast-glob": "^3.2.4",
5960
"front-matter": "^4.0.2",
@@ -80,6 +81,7 @@
8081
"vite-plugin-html": "^2.1.2"
8182
},
8283
"devDependencies": {
84+
"@jest/types": "^26.6.2",
8385
"@types/fs-extra": "^9.0.13",
8486
"@types/jest": "^27.0.3",
8587
"@types/less": "^3.0.3",

‎packages/rc-ui-lib/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,17 +62,17 @@
6262
"devDependencies": {
6363
"@rancui/cli": "workspace:*",
6464
"@rancui/linter": "workspace:*",
65-
"@types/react": "^16.9.55",
66-
"@types/react-dom": "^16.9.9",
65+
"@testing-library/react": "^12.1.2",
66+
"@types/enzyme": "^3.10.12",
67+
"@types/enzyme-to-json": "^1.5.4",
68+
"@types/jest": "^27.0.3",
69+
"@types/react": "^17.0.3",
70+
"@types/react-dom": "^17.0.3",
6771
"@types/react-transition-group": "^4.4.5",
6872
"gh-pages": "^3.2.3",
6973
"react": "^17.0.2",
7074
"react-dom": "^17.0.2"
7175
},
72-
"peerDependencies": {
73-
"react": ">=16.14.0",
74-
"react-dom": ">=16.14.0"
75-
},
7676
"browserslist": [
7777
"Android >= 4.0",
7878
"iOS >= 8"

‎packages/rc-ui-lib/src/count-down/demo/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useRef, useState } from 'react';
22
import { components } from 'site-mobile-demo';
3-
import { CurrentTime } from 'rc-ui-lib/es/hooks/use-count-down';
3+
import { CurrentTime } from '../../hooks/use-count-down';
44
import { CountDown, Grid } from '../..';
55
import { CountDownInstance } from '../PropsType';
66
import './style.less';

‎packages/rc-ui-lib/src/datetime-picker/__test__/__snapshots__/date-picker.spec.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -562,18 +562,6 @@ exports[`DatePicker columnsOrder prop 1`] = `
562562
role="button"
563563
style="height: 44px;"
564564
tabindex="0"
565-
>
566-
<div
567-
class="rc-ellipsis"
568-
>
569-
2012
570-
</div>
571-
</li>
572-
<li
573-
class="rc-picker-column__item"
574-
role="button"
575-
style="height: 44px;"
576-
tabindex="0"
577565
>
578566
<div
579567
class="rc-ellipsis"
@@ -809,6 +797,18 @@ exports[`DatePicker columnsOrder prop 1`] = `
809797
2032
810798
</div>
811799
</li>
800+
<li
801+
class="rc-picker-column__item"
802+
role="button"
803+
style="height: 44px;"
804+
tabindex="0"
805+
>
806+
<div
807+
class="rc-ellipsis"
808+
>
809+
2033
810+
</div>
811+
</li>
812812
</ul>
813813
</div>
814814
<div

‎packages/rc-ui-lib/src/index.ts‎

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,57 @@
1-
export { default as Button } from './button';
1+
export { default as ActionBar } from './action-bar';
2+
export { default as ActionSheet } from './action-sheet';
23
export { default as Badge } from './badge';
3-
export { default as Form } from './form';
4-
export { default as Field } from './field';
5-
export { default as Flex } from './flex';
6-
export { default as Typography } from './typography';
4+
export { default as Button } from './button';
5+
export { default as Calendar } from './calendar';
6+
export { default as Cascader } from './cascader';
77
export { default as Cell } from './cell';
8+
export { default as Checkbox } from './checkbox';
9+
export { default as Circle } from './circle';
10+
export { default as Collapse } from './collapse';
11+
export { default as ConfigProvider } from './config-provider';
12+
export { default as CountDown } from './count-down';
13+
export { default as DatetimePicker } from './datetime-picker';
14+
export { default as Dialog } from './dialog';
815
export { default as Divider } from './divider';
16+
export { default as DropdownMenu } from './dropdown-menu';
17+
export { default as Empty } from './empty';
18+
export { default as Field } from './field';
19+
export { default as Flex } from './flex';
20+
export { default as Form } from './form';
21+
export { default as Grid } from './grid';
922
export { default as Icon } from './icon';
1023
export { default as Image } from './image';
1124
export { default as ImagePreview } from './image-preview';
12-
export { default as Popup } from './popup';
13-
export { default as DropdownMenu } from './dropdown-menu';
14-
export { default as Overlay } from './overlay';
15-
export { default as Empty } from './empty';
25+
export { default as Lazyload } from './lazyload';
26+
export { default as List } from './list';
1627
export { default as Loading } from './loading';
28+
export { default as NavBar } from './nav-bar';
29+
export { default as NoticeBar } from './notice-bar';
1730
export { default as Notify } from './notify';
31+
export { default as NumberKeyboard } from './number-keyboard';
32+
export { default as Overlay } from './overlay';
33+
export { default as PasswordInput } from './password-input';
34+
export { default as Picker } from './picker';
35+
export { default as Popover } from './popover';
36+
export { default as Popup } from './popup';
37+
export { default as Progress } from './progress';
1838
export { default as PullRefresh } from './pull-refresh';
39+
export { default as Radio } from './radio';
40+
export { default as Rate } from './rate';
1941
export { default as ShareSheet } from './share-sheet';
20-
export { default as NoticeBar } from './notice-bar';
21-
export { default as List } from './list';
42+
export { default as Sidebar } from './sidebar';
2243
export { default as Skeleton } from './skeleton';
44+
export { default as Slider } from './slider';
2345
export { default as Steps } from './steps';
24-
export { default as Toast } from './toast';
25-
export { default as ActionSheet } from './action-sheet';
26-
export { default as Dialog } from './dialog';
46+
export { default as Sticky } from './sticky';
47+
export { default as SwipeCell } from './swipe-cell';
2748
export { default as Swiper } from './swiper';
49+
export { default as Switch } from './switch';
50+
export { default as Tabbar } from './tabbar';
2851
export { default as Tabs } from './tabs';
29-
export { default as Sticky } from './sticky';
3052
export { default as Tag } from './tag';
31-
export { default as Grid } from './grid';
32-
export { default as Collapse } from './collapse';
33-
export { default as Radio } from './radio';
34-
export { default as Rate } from './rate';
35-
export { default as Cascader } from './cascader';
36-
export { default as Checkbox } from './checkbox';
37-
export { default as Slider } from './slider';
38-
export { default as Switch } from './switch';
53+
export { default as TextEllipsis } from './text-ellipsis';
54+
export { default as Toast } from './toast';
55+
export { default as Typography } from './typography';
3956
export { default as Uploader } from './uploader';
40-
export { default as Circle } from './circle';
41-
export { default as ActionBar } from './action-bar';
42-
export { default as Tabbar } from './tabbar';
43-
export { default as ConfigProvider } from './config-provider';
44-
export { default as NumberKeyboard } from './number-keyboard';
45-
export { default as PasswordInput } from './password-input';
46-
export { default as SwipeCell } from './swipe-cell';
47-
export { default as Sidebar } from './sidebar';
48-
export { default as Lazyload } from './lazyload';
49-
export { default as Calendar } from './calendar';
50-
export { default as Picker } from './picker';
51-
export { default as Popover } from './popover';
52-
export { default as DatetimePicker } from './datetime-picker';
53-
export { default as NavBar } from './nav-bar';
54-
export { default as CountDown } from './count-down';
55-
export { default as Progress } from './progress';
5657
export * from './hooks';

‎packages/rc-ui-lib/src/text-ellipsis/PropsType.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { BaseTypeProps } from '../utils';
2+
3+
export interface TextEllipsisProps extends BaseTypeProps {
4+
/** 展示的行数, 默认值为1 */
5+
rows?: number | string;
6+
/** 需要展示的文本 */
7+
content: string;
8+
/** 展开操作的文案 */
9+
expandText?: string;
10+
/** 收起操作的文案 */
11+
collapseText?: string;
12+
/** 点击 */
13+
onClick?: (e: React.MouseEvent) => void;
14+
}

‎packages/rc-ui-lib/src/text-ellipsis/README.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# TextEllipsis 文本省略
2+
3+
### 介绍
4+
5+
对长文本进行省略，支持展开/收起。请升级到 >= 2.0.0 版本来使用该组件。
6+
7+
### 引入
8+
9+
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
10+
11+
```js
12+
import { TextEllipsis } from 'rc-ui-lib';
13+
```
14+
15+
## 代码演示
16+
17+
### 基础用法
18+
19+
默认展示 `1` 行，超过 `1` 行显示省略号。
20+
21+
```tsx
22+
import { useState } from 'react';
23+
import { TextEllipsis } from 'rc-ui-lib';
24+
25+
export default () => {
26+
const text =
27+
'Rc-ui-lib 是一个轻量、可定制的移动端React组件库，于 2021 年开源。50+ 个高质量组件，覆盖移动端各类场景，单元测试覆盖率超过 95%，提供稳定性保障, 支持按需引入、主题定制、Typescript。';
28+
return (
29+
<>
30+
<TextEllipsis content={text} />
31+
</>
32+
);
33+
};
34+
```
35+
36+
### 展开/收起
37+
38+
超过行数支持展开/收起。
39+
40+
```tsx
41+
import { useState } from 'react';
42+
import { TextEllipsis } from 'rc-ui-lib';
43+
44+
export default () => {
45+
const text =
46+
'Rc-ui-lib 是一个轻量、可定制的移动端React组件库，于 2021 年开源。50+ 个高质量组件，覆盖移动端各类场景，单元测试覆盖率超过 95%，提供稳定性保障, 支持按需引入、主题定制、Typescript。';
47+
return (
48+
<>
49+
<TextEllipsis content={text} expandText="展开" collapseText="收起" />
50+
</>
51+
);
52+
};
53+
```
54+
55+
### 自定义展示行数
56+
57+
通过设置 `rows` 限制展示行数。
58+
59+
```tsx
60+
import { useState } from 'react';
61+
import { TextEllipsis } from 'rc-ui-lib';
62+
63+
export default () => {
64+
const text =
65+
'Rc-ui-lib 是一个轻量、可定制的移动端React组件库，于 2021 年开源。50+ 个高质量组件，覆盖移动端各类场景，单元测试覆盖率超过 95%，提供稳定性保障, 支持按需引入、主题定制、Typescript。';
66+
return (
67+
<>
68+
<TextEllipsis content={text} rows="3" expandText="展开" collapseText="收起" />
69+
</>
70+
);
71+
};
72+
```
73+
74+
## API
75+
76+
### Props
77+
78+
| 参数 | 说明 | 类型 | 默认值 |
79+
| ------------- | -------------- | ------------------ | ------ |
80+
| rows | 展示的行数 | _number \| string_ | `1` |
81+
| content | 需要展示的文本 | _string_ | - |
82+
| expand-text | 展开操作的文案 | _string_ | - |
83+
| collapse-text | 收起操作的文案 | _string_ | - |
84+
85+
### Events
86+
87+
| 事件 | 说明 | 回调参数 |
88+
| ------------ | ------------------- | ------------------- |
89+
| click-action | 点击展开/收起时触发 | _event: MouseEvent_ |
90+
91+
### 类型定义
92+
93+
组件导出以下类型定义：
94+
95+
```ts
96+
import type { TextEllipsisProps } from 'rc-ui-lib';
97+
```
98+
99+
## 主题定制
100+
101+
### 样式变量
102+
103+
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
104+
105+
| 名称 | 默认值 | 描述 |
106+
| ------------------------------- | ---------------- | -------------- |
107+
| --rc-text-ellipsis-action-color | _var(--rc-blue)_ | 操作按钮的颜色 |
108+
| --rc-text-ellipsis-line-height | _1.6_ | 文本的行高 |

0 commit comments

Comments
 (0)