Feat: add text-ellipsis component

package.json

@@ -13,7 +13,8 @@
     "changelog": "pnpm -r --filter ./packages/rc-ui-lib changelog",
     "test": "pnpm -r --filter ./packages/rc-ui-lib test",
     "lint": "pnpm -r --filter ./packages/rc-ui-lib lint",
-    "lint:prettier": "prettier --write  \"packages/rc-ui-lib/src/**/*.{js,json,ts,tsx,css,less,md}\""
+    "lint:prettier": "prettier --write  \"packages/rc-ui-lib/src/**/*.{js,json,ts,tsx,css,less,md}\"",
+    "clean": "rimraf node_modules"
   },
   "repository": {
     "type": "git",

packages/rc-cli/package.json

@@ -54,6 +54,7 @@
     "conventional-changelog": "^3.1.24",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
+    "esbuild": "^0.14.54",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.4",
     "front-matter": "^4.0.2",
@@ -80,6 +81,7 @@
     "vite-plugin-html": "^2.1.2"
   },
   "devDependencies": {
+    "@jest/types": "^26.6.2",
     "@types/fs-extra": "^9.0.13",
     "@types/jest": "^27.0.3",
     "@types/less": "^3.0.3",

packages/rc-ui-lib/package.json

@@ -62,17 +62,17 @@
   "devDependencies": {
     "@rancui/cli": "workspace:*",
     "@rancui/linter": "workspace:*",
-    "@types/react": "^16.9.55",
-    "@types/react-dom": "^16.9.9",
+    "@testing-library/react": "^12.1.2",
+    "@types/enzyme": "^3.10.12",
+    "@types/enzyme-to-json": "^1.5.4",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/react-transition-group": "^4.4.5",
     "gh-pages": "^3.2.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "peerDependencies": {
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0"
-  },
   "browserslist": [
     "Android >= 4.0",
     "iOS >= 8"

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

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { components } from 'site-mobile-demo';
-import { CurrentTime } from 'rc-ui-lib/es/hooks/use-count-down';
+import { CurrentTime } from '../../hooks/use-count-down';
 import { CountDown, Grid } from '../..';
 import { CountDownInstance } from '../PropsType';
 import './style.less';

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

@@ -562,18 +562,6 @@ exports[`DatePicker columnsOrder prop 1`] = `
             role="button"
             style="height: 44px;"
             tabindex="0"
-          >
-            <div
-              class="rc-ellipsis"
-            >
-              2012
-            </div>
-          </li>
-          <li
-            class="rc-picker-column__item"
-            role="button"
-            style="height: 44px;"
-            tabindex="0"
           >
             <div
               class="rc-ellipsis"
@@ -809,6 +797,18 @@ exports[`DatePicker columnsOrder prop 1`] = `
               2032
             </div>
           </li>
+          <li
+            class="rc-picker-column__item"
+            role="button"
+            style="height: 44px;"
+            tabindex="0"
+          >
+            <div
+              class="rc-ellipsis"
+            >
+              2033
+            </div>
+          </li>
         </ul>
       </div>
       <div

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

@@ -1,56 +1,57 @@
-export { default as Button } from './button';
+export { default as ActionBar } from './action-bar';
+export { default as ActionSheet } from './action-sheet';
 export { default as Badge } from './badge';
-export { default as Form } from './form';
-export { default as Field } from './field';
-export { default as Flex } from './flex';
-export { default as Typography } from './typography';
+export { default as Button } from './button';
+export { default as Calendar } from './calendar';
+export { default as Cascader } from './cascader';
 export { default as Cell } from './cell';
+export { default as Checkbox } from './checkbox';
+export { default as Circle } from './circle';
+export { default as Collapse } from './collapse';
+export { default as ConfigProvider } from './config-provider';
+export { default as CountDown } from './count-down';
+export { default as DatetimePicker } from './datetime-picker';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Empty } from './empty';
+export { default as Field } from './field';
+export { default as Flex } from './flex';
+export { default as Form } from './form';
+export { default as Grid } from './grid';
 export { default as Icon } from './icon';
 export { default as Image } from './image';
 export { default as ImagePreview } from './image-preview';
-export { default as Popup } from './popup';
-export { default as DropdownMenu } from './dropdown-menu';
-export { default as Overlay } from './overlay';
-export { default as Empty } from './empty';
+export { default as Lazyload } from './lazyload';
+export { default as List } from './list';
 export { default as Loading } from './loading';
+export { default as NavBar } from './nav-bar';
+export { default as NoticeBar } from './notice-bar';
 export { default as Notify } from './notify';
+export { default as NumberKeyboard } from './number-keyboard';
+export { default as Overlay } from './overlay';
+export { default as PasswordInput } from './password-input';
+export { default as Picker } from './picker';
+export { default as Popover } from './popover';
+export { default as Popup } from './popup';
+export { default as Progress } from './progress';
 export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
 export { default as ShareSheet } from './share-sheet';
-export { default as NoticeBar } from './notice-bar';
-export { default as List } from './list';
+export { default as Sidebar } from './sidebar';
 export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
 export { default as Steps } from './steps';
-export { default as Toast } from './toast';
-export { default as ActionSheet } from './action-sheet';
-export { default as Dialog } from './dialog';
+export { default as Sticky } from './sticky';
+export { default as SwipeCell } from './swipe-cell';
 export { default as Swiper } from './swiper';
+export { default as Switch } from './switch';
+export { default as Tabbar } from './tabbar';
 export { default as Tabs } from './tabs';
-export { default as Sticky } from './sticky';
 export { default as Tag } from './tag';
-export { default as Grid } from './grid';
-export { default as Collapse } from './collapse';
-export { default as Radio } from './radio';
-export { default as Rate } from './rate';
-export { default as Cascader } from './cascader';
-export { default as Checkbox } from './checkbox';
-export { default as Slider } from './slider';
-export { default as Switch } from './switch';
+export { default as TextEllipsis } from './text-ellipsis';
+export { default as Toast } from './toast';
+export { default as Typography } from './typography';
 export { default as Uploader } from './uploader';
-export { default as Circle } from './circle';
-export { default as ActionBar } from './action-bar';
-export { default as Tabbar } from './tabbar';
-export { default as ConfigProvider } from './config-provider';
-export { default as NumberKeyboard } from './number-keyboard';
-export { default as PasswordInput } from './password-input';
-export { default as SwipeCell } from './swipe-cell';
-export { default as Sidebar } from './sidebar';
-export { default as Lazyload } from './lazyload';
-export { default as Calendar } from './calendar';
-export { default as Picker } from './picker';
-export { default as Popover } from './popover';
-export { default as DatetimePicker } from './datetime-picker';
-export { default as NavBar } from './nav-bar';
-export { default as CountDown } from './count-down';
-export { default as Progress } from './progress';
 export * from './hooks';

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

@@ -0,0 +1,14 @@
+import { BaseTypeProps } from '../utils';
+
+export interface TextEllipsisProps extends BaseTypeProps {
+  /** 展示的行数, 默认值为1	 */
+  rows?: number | string;
+  /** 需要展示的文本	 */
+  content: string;
+  /** 展开操作的文案	 */
+  expandText?: string;
+  /** 收起操作的文案	 */
+  collapseText?: string;
+  /** 点击	 */
+  onClick?: (e: React.MouseEvent) => void;
+}

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

@@ -0,0 +1,108 @@
+# TextEllipsis 文本省略
+
+### 介绍
+
+对长文本进行省略，支持展开/收起。请升级到 >= 2.0.0 版本来使用该组件。
+
+### 引入
+
+通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
+
+```js
+import { TextEllipsis } from 'rc-ui-lib';
+```
+
+## 代码演示
+
+### 基础用法
+
+默认展示 `1` 行，超过 `1` 行显示省略号。
+
+```tsx
+import { useState } from 'react';
+import { TextEllipsis } from 'rc-ui-lib';
+
+export default () => {
+  const text =
+    'Rc-ui-lib 是一个轻量、可定制的移动端React组件库，于 2021 年开源。50+ 个高质量组件，覆盖移动端各类场景，单元测试覆盖率超过 95%，提供稳定性保障, 支持按需引入、主题定制、Typescript。';
+  return (
+    <>
+      <TextEllipsis content={text} />
+    </>
+  );
+};
+```
+
+### 展开/收起
+
+超过行数支持展开/收起。
+
+```tsx
+import { useState } from 'react';
+import { TextEllipsis } from 'rc-ui-lib';
+
+export default () => {
+  const text =
+    'Rc-ui-lib 是一个轻量、可定制的移动端React组件库，于 2021 年开源。50+ 个高质量组件，覆盖移动端各类场景，单元测试覆盖率超过 95%，提供稳定性保障, 支持按需引入、主题定制、Typescript。';
+  return (
+    <>
+      <TextEllipsis content={text} expandText="展开" collapseText="收起" />
+    </>
+  );
+};
+```
+
+### 自定义展示行数
+
+通过设置 `rows` 限制展示行数。
+
+```tsx
+import { useState } from 'react';
+import { TextEllipsis } from 'rc-ui-lib';
+
+export default () => {
+  const text =
+    'Rc-ui-lib 是一个轻量、可定制的移动端React组件库，于 2021 年开源。50+ 个高质量组件，覆盖移动端各类场景，单元测试覆盖率超过 95%，提供稳定性保障, 支持按需引入、主题定制、Typescript。';
+  return (
+    <>
+      <TextEllipsis content={text} rows="3" expandText="展开" collapseText="收起" />
+    </>
+  );
+};
+```
+
+## API
+
+### Props
+
+| 参数          | 说明           | 类型               | 默认值 |
+| ------------- | -------------- | ------------------ | ------ |
+| rows          | 展示的行数     | _number \| string_ | `1`    |
+| content       | 需要展示的文本 | _string_           | -      |
+| expand-text   | 展开操作的文案 | _string_           | -      |
+| collapse-text | 收起操作的文案 | _string_           | -      |
+
+### Events
+
+| 事件         | 说明                | 回调参数            |
+| ------------ | ------------------- | ------------------- |
+| click-action | 点击展开/收起时触发 | _event: MouseEvent_ |
+
+### 类型定义
+
+组件导出以下类型定义：
+
+```ts
+import type { TextEllipsisProps } from 'rc-ui-lib';
+```
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+
+| 名称                            | 默认值           | 描述           |
+| ------------------------------- | ---------------- | -------------- |
+| --rc-text-ellipsis-action-color | _var(--rc-blue)_ | 操作按钮的颜色 |
+| --rc-text-ellipsis-line-height  | _1.6_            | 文本的行高     |