text-overflow-processor-react - npm Package Compare versions

Comparing version 2.0.14 to 2.0.15

lib/index.d.ts

@@ -8,2 +8,3 @@ /**
  * 测试调试：
+ * （注意：可以先npm unlink一下，防止上次这个包还在link中，且此时必须以管理员身份运行，否则可能出bug把代码全删了一点痕迹不留）
  * 项目中打包组件后执行npm link（此时会把本组件link到全局）
@@ -10,0 +11,0 @@ * 然后随便选个项目（这个项目可以是当前项目）执行npm link 包名（此时会把全局中刚才link的包link到当前项目中，此时可以调试）

lib/TextOverflowProcessor/types/index.d.ts

 /// <reference types="react" />
 type ProcessType = 'ellipsis' | 'shadow';
+type DOMElementType = string | JSX.Element | JSX.Element[] | null;
 type ProcessTypeArr = ProcessType[];
 type ReRenderDependentPropertiesEnum = 'all' | 'text' | 'type' | 'className' | 'style' | 'buttonClassName' | 'buttonStyle' | 'isClickOriginalEvent' | 'isDefaultFold' | 'unfoldButtonText' | 'foldButtonText' | 'isShowAllContent' | 'isMustButton' | 'isMustNoButton' | 'lineHeight' | 'isRenderShowAllDOM' | 'ellipsisLineClamp' | 'isJsComputed' | 'fontSize' | 'fontClassName' | 'fontStyle' | 'textEndSlot' | 'extraOccupiedW' | 'buttonBeforeSlot' | 'shadowInitBoxShowH' | 'shadowFoldButtonPlacement' | 'isShadowLayer' | 'shadowClassName' | 'shadowStyle';
 type EllipsisOptionType = {
-    /** 控制显示的行数 */
+    /**
+     * 控制显示的行数
+     *
+     * 默认值：2
+     */
     ellipsisLineClamp?: number;
     /**
      * 是否使用JS逻辑计算文字开始折叠时显示的文案，可以传字号大小
+     *
+     * 默认值：false
+     *
      * 注意：
+     *
      * 1、启用此功能是为了兼容部分浏览器不支持display: -webkit-box,属性的使用（或出现异常）
+     *
      * 2、计算出来的文案可能不够完美，可以通过extraOccupiedW调整计算的误差
+     *
      * 3、这时只支持传string类型内容
+     *
      * 4、此时textEndSlot、buttonBeforeSlot所额外占用的宽度，都需要通过extraOccupiedW告知组件
      */
     isJsComputed?: boolean;
-    /** 字号大小，不传时，字号大小默认12，计算出来的结果会有误差 */
+    /**
+     * 字号大小，不传时，字号大小默认12，计算出来的结果会有误差
+     *
+     * 默认值：12
+     */
     fontSize?: number;
-    /** 字体容器类名，仅用于JS计算 */
+    /**
+     * 字体容器类名，仅用于JS计算
+     *
+     * 默认值：空
+     */
     fontClassName?: string;
     /**
      * 字体容器相关样式（当字体样式比较丰富时，代替掉fontSize属性），仅用于JS计算
+     *
+     * 默认值：{}
+     *
      * 注意：
+     *
      * 1、字号大小将覆盖fontSize属性
+     *
      * 2、仅JS_COMPUTED_VALID_CSS_PROPERTIES中的CSS属性有效
@@ -30,21 +55,53 @@ */
      * 紧跟文字内容尾部的额外内容，可以是icon等任意内容，例如超链接icon，点击跳转到外部网站
+     *
      * 文案溢出时显示在...后面，不溢出时在文字尾部
+     *
+     * 默认值：null
+     *
      * 注意：启用isJsComputed时，textEndSlot所占的宽需要通过extraOccupiedW告知才能精确计算
      */
     textEndSlot?: any;
-    /** 占用文本的额外宽度，启用isJsComputed时，此属性可以调整计算误差 */
+    /**
+     * 占用文本的额外宽度，启用isJsComputed时，此属性可以调整计算误差
+     *
+     * 默认值：0
+     */
     extraOccupiedW?: number;
-    /** 按钮前面的占位内容，isJsComputed为false时默认会有4个空格（使用频率低） */
-    buttonBeforeSlot?: string | JSX.Element | JSX.Element[] | null;
+    /**
+     * 按钮前面的占位内容，isJsComputed为false时默认会有4个空格（使用频率低）
+     *
+     * 默认值：null
+     */
+    buttonBeforeSlot?: DOMElementType;
 };
 type ShadowOptionType = {
-    /** 折叠时显示的文案高度，超出这个高度才出现操作按钮 */
+    /**
+     * 折叠时显示的文案高度，超出这个高度才出现操作按钮
+     *
+     * 默认值：76
+     */
     shadowInitBoxShowH?: number;
-    /** 折叠态时按钮位置在文案外部还是内部 */
+    /**
+     * 折叠态时按钮位置在文案外部还是内部
+     *
+     * 默认值：outer
+     */
     shadowFoldButtonPlacement?: 'outer' | 'inner';
-    /** 是否需要阴影遮罩层 */
+    /**
+     * 是否需要阴影遮罩层
+     *
+     * 默认值：true
+     */
     isShadowLayer?: boolean;
-    /** 阴影遮罩层自定义类名 */
+    /**
+     * 阴影遮罩层自定义类名
+     *
+     * 默认值：空
+     */
     shadowClassName?: string;
-    /** 阴影遮罩层自定义样式 */
+    /**
+     * 阴影遮罩层自定义样式
+     *
+     * 默认值：{}
+     */
     shadowStyle?: React.CSSProperties;
@@ -55,8 +112,17 @@ };
      * 自定义组件刷新依赖的自身属性：依赖中的属性发生变化时，会触发组件刷新。建议不要使用all，伤性能
+     *
      * 其实通过key或其它方式也能实现同样的效果，这里只是为了方便而提供，使用到的频率极小
+     *
+     * 默认值：['text']
+     *
      * 注：由于2.x.x版本大部分配置在option属性中，属于引用状态类型，故配置变化一般都能够触发组件刷新，
+     *
      *     因此本属性在2.x.x版本几乎用不上...
      */
     reRenderDependentProperties?: ReRenderDependentPropertiesEnum[];
-    /** 文案处理类型 */
+    /**
+     * 文案处理类型
+     *
+     * 默认值：ellipsis
+     */
     type?: ProcessType;
@@ -67,31 +133,109 @@ /** >>>>>>ellipsis配置 */
     shadowOption?: ShadowOptionType;
+    /**
+     * 按钮外出容器span的类名
+     *
+     * 默认值：空
+     */
     buttonClassName?: string;
+    /**
+     * 按钮外出容器span的样式
+     *
+     * 默认值：{}
+     */
     buttonStyle?: React.CSSProperties;
-    /** 当传了onClick时，点击事件是否触发原始事件 */
+    /**
+     * 当传了onClick时，点击事件是否触发原始事件
+     *
+     * 默认值：false
+     */
     isClickOriginalEvent?: boolean;
-    /** 是否默认折叠 */
+    /**
+     * 是否默认折叠
+     *
+     * 默认值：true
+     */
     isDefaultFold?: boolean;
-    /** 展开时按钮文案 */
-    unfoldButtonText?: string | JSX.Element | JSX.Element[];
-    /** 折叠时按钮文案 */
-    foldButtonText?: string | JSX.Element | JSX.Element[];
-    /** 是否展示所有内容，为true时将不提供操作按钮 */
+    /**
+     * 展开时按钮文案
+     *
+     * 默认值：Show Less
+     */
+    unfoldButtonText?: DOMElementType;
+    /**
+     * 折叠时按钮文案
+     *
+     * 默认值：Show All
+     */
+    foldButtonText?: DOMElementType;
+    /**
+     * 是否展示所有内容，为true时将不提供操作按钮
+     *
+     * 默认值：false
+     */
     isShowAllContent?: boolean;
-    /** 是否常驻显示按钮 */
+    /**
+     * 是否常驻显示按钮
+     *
+     * 默认值：false
+     */
     isMustButton?: boolean;
-    /** 是否不要显示按钮 */
+    /**
+     * 是否不要显示按钮
+     *
+     * 默认值：false
+     */
     isMustNoButton?: boolean;
+    /**
+     * 文案行高
+     *
+     * 默认值：24
+     */
     lineHeight?: number;
-    /** 是否渲染被隐藏的全部文案展示DOM */
+    /**
+     * 是否渲染被隐藏的全部文案展示DOM
+     *
+     * 默认值：false
+     */
     isRenderShowAllDOM?: boolean;
 };
 interface TextOverflowProcessorPropsType {
-    /** 文本内容，shadow时支持传DOM模板字符串（注：尽量传string文案） */
+    /**
+     * 文本内容，shadow时支持传DOM模板字符串（注：尽量传string文案）
+     *
+     * 默认值：空
+     */
     text: string;
+    /**
+     * 组件类名
+     *
+     * 默认值：空
+     */
     className?: string;
+    /**
+     * 组件样式
+     *
+     * 默认值：{}
+     */
     style?: React.CSSProperties;
+    /**
+     * 按钮点击事件
+     *
+     * 参数注解：
+     *
+     * e -> 事件对象
+     *
+     * isFold -> 文案是否是折叠的（文案是否溢出）
+     */
     onClick?: ((e: React.MouseEvent<HTMLElement, MouseEvent>, 
     /** 文案是否是折叠的（文案是否溢出） */
     isFold: boolean) => void) | null;
-    /** 获取文案的折叠状态，折叠状态发生改变时会触发，相当于onChange */
+    /**
+     * 获取文案的折叠状态，折叠状态发生改变时会触发，相当于onChange
+     *
+     * 参数注解：
+     *
+     * isFold -> 文案是否是折叠的（文案是否溢出）
+     *
+     * isInitState -> 返回的是否是初始化状态，有时初始化状态可能会影响组件的使用，可以用这个区分
+     */
     getIsFold?: ((
@@ -102,4 +246,5 @@ /** 文案是否是折叠的（文案是否溢出） */
     isInitState: boolean) => void) | null;
+    /** >>>>>>具体配置 */
     option?: OptionType;
 }
-export { ProcessType, ProcessTypeArr, EllipsisOptionType, ShadowOptionType, OptionType, TextOverflowProcessorPropsType, ReRenderDependentPropertiesEnum, };
+export { ProcessType, DOMElementType, ProcessTypeArr, EllipsisOptionType, ShadowOptionType, OptionType, TextOverflowProcessorPropsType, ReRenderDependentPropertiesEnum, };

lib/TextOverflowProcessor/utils/index.d.ts

@@ -12,3 +12,3 @@ /**
  */
-type GetFixedWidthTextFn = (text: string, lineWidth: number, width: number, fontSize?: number, fontWeight?: number, isNeedEllipsis?: boolean, fontStyleCSSText?: string, fontClassName?: string, containerEl?: any) => string;
+type GetFixedWidthTextFn = (text: string, lineWidth: number, width: number, fontSize?: number, fontWeight?: number, isNeedEllipsis?: boolean, fontStyleCSSText?: string, fontClassName?: string, containerEl?: HTMLElement | null) => string;
 declare const getFixedWidthText: GetFixedWidthTextFn;
@@ -15,0 +15,0 @@ declare const getClassNames: (obj: {

package.json

 {
   "name": "text-overflow-processor-react",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "main": "./lib/index.js",
@@ -5,0 +5,0 @@ "typings": "./lib/index.d.ts",

README.md

@@ -35,8 +35,7 @@ # 文本溢出处理
   text: string, // 文本内容，shadow时支持传DOM模板字符串（注：尽量传string文案）
-  className?: string,
-  style?: React.CSSProperties,
-  onClick?: ((
-    e: React.MouseEvent<HTMLElement, MouseEvent>,
-    /** 文案是否是折叠的（文案是否溢出） */
-    isFold: boolean,
+  className?: string, // 组件类名
+  style?: React.CSSProperties, // 组件样式
+  onClick?: (( // 按钮点击事件
+    e: React.MouseEvent<HTMLElement, MouseEvent>, // 事件对象
+    isFold: boolean, // 文案是否是折叠的（文案是否溢出）
   ) => void) | null,
@@ -51,6 +50,4 @@ getIsFold?: (( // 获取文案的折叠状态，折叠状态发生改变时会触发，相当于onChange
      * 其实通过key或其它方式也能实现同样的效果，这里只是为了方便而提供
-     * 注意：
-     * 属性中unfoldButtonText/foldButtonText/textEndSlot/buttonBeforeSlot作为组件监听依赖项时，
-     * 传递的属性值为string字符串类型时将正常使用，当为Element复杂类型时将不作为监听依赖项，
-     * 此时结构发生变化可以给组件加key告知变化实现刷新效果
+     * 注：由于2.x.x版本大部分配置在option属性中，属于引用状态类型，故配置变化一般都能够触发组件刷新，
+     *     因此本属性在2.x.x版本几乎用不上...
      */
@@ -99,12 +96,12 @@ reRenderDependentProperties?: ReRenderDependentPropertiesEnum[],
     },
-    buttonClassName?: string,
-    buttonStyle?: React.CSSProperties,
+    buttonClassName?: string, // 按钮外出容器span的类名
+    buttonStyle?: React.CSSProperties, // 按钮外出容器span的样式
     isClickOriginalEvent?: boolean, // 当传了onClick时，点击事件是否触发原始事件
     isDefaultFold?: boolean, // 是否默认折叠
-    unfoldButtonText?: string | JSX.Element | JSX.Element[], // 展开时按钮文案
-    foldButtonText?: string | JSX.Element | JSX.Element[], // 折叠时按钮文案
+    unfoldButtonText?: string | JSX.Element | JSX.Element[] | null, // 展开时按钮文案
+    foldButtonText?: string | JSX.Element | JSX.Element[] | null, // 折叠时按钮文案
     isShowAllContent?: boolean, // 是否展示所有内容，为true时将不提供操作按钮
     isMustButton?: boolean, // 是否常驻显示按钮
     isMustNoButton?: boolean, // 是否不要显示按钮
-    lineHeight?: number,
+    lineHeight?: number, // 文案行高
     isRenderShowAllDOM?: boolean, // 是否渲染被隐藏的全部文案展示DOM
@@ -234,2 +231,12 @@ },
 
+### ↪2.0.15
+
+`2025-04-26`
+
+☆ CSS浏览器兼容前缀添加；
+
+☆ 组件属性注解优化，使用时注解提示更合理；
+
+☆ 代码优化。
+
 ### ↪2.0.14
@@ -236,0 +243,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116047

1.47%

Number of package files

10

11.11%

Lines of code

476

47.37%

Number of lines in readme file

433

1.64%

No dependency changes