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

Comparing version 2.0.2 to 2.0.3-optimize

lib/TextOverflowProcessor/index.d.ts

 /// <reference types="react" />
+import { TextProcessProps } from './types';
 import './index.scss';
-/**TS类型声明 start */
-type ProcessType = 'ellipsis' | 'shadow';
-type EllipsisOptionType = {
-    ellipsisLineClamp?: number;
-    /**
-     * 是否使用Js逻辑计算文字开始折叠时显示的文案，可以传字号大小
-     * 注意：
-     * 1、启用此功能是为了兼容部分浏览器不支持display: -webkit-box,属性的使用（或出现异常）
-     * 2、计算出来的文案可能不够完美，可以通过extraOccupiedW调整计算的误差
-     * 3、这时只支持传string类型内容
-     * 4、此时textEndSlot、buttonBeforeSlot，以及foldButtonText是非string类型（string类型除外）
-     * 所额外占用的宽度，都需要通过extraOccupiedW告知组件
-     */
-    isJsComputed?: boolean;
-    fontSize?: number;
-    /**
-     * 紧跟文字内容尾部的额外内容，可以是icon等任意内容，例如超链接icon，点击跳转到外部网站
-     * 文案溢出时显示在...后面，不溢出时在文字尾部
-     * 注意：启用isJsComputed时，textEndSlot所占的宽需要通过extraOccupiedW告知才能精确计算
-     */
-    textEndSlot?: any;
-    extraOccupiedW?: number;
-    buttonBeforeSlot?: string | JSX.Element | JSX.Element[] | null;
-};
-type ShadowOptionType = {
-    shadowInitBoxShowH?: number;
-    isShadowLayer?: boolean;
-    shadowClassName?: string;
-    shadowStyle?: React.CSSProperties;
-};
-type OptionType = {
-    type?: ProcessType;
-    /** >>>>>>ellipsis配置 */
-    ellipsisOption?: EllipsisOptionType;
-    /** >>>>>>shadow配置 */
-    shadowOption?: ShadowOptionType;
-    buttonClassName?: string;
-    buttonStyle?: React.CSSProperties;
-    isClickOriginalEvent?: boolean;
-    isDefaultFold?: boolean;
-    unfoldButtonText?: string | JSX.Element | JSX.Element[];
-    foldButtonText?: string | JSX.Element | JSX.Element[];
-    isShowAllContent?: boolean;
-    isMustButton?: boolean;
-    isMustNoButton?: boolean;
-    lineHeight?: number;
-    isRenderShowAllDOM?: boolean;
-};
-interface TextProcessProps {
-    text: string;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: (() => void) | null;
-    getIsFold?: ((v: boolean) => void) | null;
-    option?: OptionType;
-}
-/**常量声明 end */
 declare function TextOverflowProcessor(props: TextProcessProps): JSX.Element;
@@ -61,0 +5,0 @@ declare namespace TextOverflowProcessor {

lib/TextOverflowProcessor/utils/index.d.ts

@@ -7,4 +7,7 @@ /**
  * @isNeedEllipsis 当text的宽度大于width时是否需要省略号，会在传入的width基础上加，最后返回字符串宽度会>width
+ * @fontStyleCSSText 文案样式
+ * @fontClassName 文案类名
+ * @containerEl 文案容器dom
  */
-declare const getFixedWidthText: (text: string, width: number, fontSize?: number, fontWeight?: number, isNeedEllipsis?: boolean) => string;
+declare const getFixedWidthText: (text: string, width: number, fontSize?: number, fontWeight?: number, isNeedEllipsis?: boolean, fontStyleCSSText?: string, fontClassName?: string, containerEl?: any) => string;
 declare const getClassNames: (obj: {
@@ -11,0 +14,0 @@ [keyName: string]: boolean;

package.json

 {
   "name": "text-overflow-processor-react",
-  "version": "2.0.2",
+  "version": "2.0.3-optimize",
   "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "typings": "./lib/index.d.ts",
   "description": "text overflow process for react",
@@ -18,3 +18,8 @@ "keywords": [
     "url": "https://github.com/skystar-chen/public-product_text-overflow-processor-react"
+  },
+  "homepage": "https://github.com/skystar-chen/public-product_text-overflow-processor-react/tree/main",
+  "bugs": {
+    "url": "https://github.com/skystar-chen/public-product_text-overflow-processor-react/issues",
+    "email": "[e-mail]"
   }
 }

README.md

@@ -45,3 +45,3 @@ # 文本溢出处理
       /**
-       * 是否使用Js逻辑计算文字开始折叠时显示的文案，可以传字号大小
+       * 是否使用JS逻辑计算文字开始折叠时显示的文案，可以传字号大小
        * 注意：
@@ -51,8 +51,15 @@ * 1、启用此功能是为了兼容部分浏览器不支持display: -webkit-box,属性的使用（或出现异常）
        * 3、这时只支持传string类型内容
-       * 4、此时textEndSlot、buttonBeforeSlot，以及foldButtonText是非string类型（string类型除外）
-       * 所额外占用的宽度，都需要通过extraOccupiedW告知组件
+       * 4、此时textEndSlot、buttonBeforeSlot所额外占用的宽度，都需要通过extraOccupiedW告知组件
        */
       isJsComputed?: boolean,
       fontSize?: number, // 字号大小，不传时，字号大小默认12，计算出来的结果会有误差
+      fontClassName?: string; // 字体容器类名，仅用于JS计算
       /**
+       * 字体容器相关样式（当字体样式比较丰富时，代替掉fontSize属性），仅用于JS计算
+       * 注意：
+       * 1、字号大小将覆盖fontSize属性
+       * 2、仅JS_COMPUTED_VALID_CSS_PROPERTIES（下方将标出）中的CSS属性有效
+       */
+      fontStyle?: React.CSSProperties;
+      /**
        * 紧跟文字内容尾部的额外内容，可以是icon等任意内容，例如超链接icon，点击跳转到外部网站
@@ -102,2 +109,4 @@ * 文案溢出时显示在...后面，不溢出时在文字尾部
       fontSize: 12,
+      fontClassName: '',
+      fontStyle: {},
       textEndSlot: null,
@@ -127,2 +136,48 @@ extraOccupiedW: 0,
 }
+fontStyle属性中有效的CSS属性：
+JS_COMPUTED_VALID_CSS_PROPERTIES = [
+  'font-size',
+  'font-weight',
+  'font-style',
+  'font-family',
+  'font-feature-settings',
+  'font-kerning',
+  'font-language-override',
+  'font-optical-sizing',
+  'font-stretch',
+  'font-size-adjust',
+  'font-smooth',
+  'font-synthesis',
+  'font-variant',
+  'font-variant-alternates',
+  'font-variant-caps',
+  'font-variant-east-asian',
+  'font-variant-emoji',
+  'font-variant-ligatures',
+  'font-variant-numeric',
+  'font-variant-position',
+  'font-variation-settings',
+  'initial-letter',
+  'inline-size',
+  'line-height',
+  'line-height-step',
+  'line-break',
+  'letter-spacing',
+  'text-shadow',
+  'text-transform',
+  'text-indent',
+  'text-combine-upright',
+  'text-emphasis',
+  'text-emphasis-position',
+  'text-emphasis-style',
+  'text-orientation',
+  'text-rendering',
+  'text-size-adjust',
+  'vertical-align',
+  'white-space',
+  'word-spacing',
+  'word-break',
+  'word-wrap',
+  'writing-mode',
+]
 ```
@@ -140,2 +195,16 @@
 
+### ↪2.0.3-optimize
+
+`2023-05-10`
+
+☆ package.json文件补充及代码优化。
+
+### ↪2.0.3
+
+`2023-05-08`
+
+☆ `ellipsis`JS计算，增加fontClassName、fontStyle属性，弥补当文案样式比较丰富时，仅fontSize属性无法满足要求；
+
+☆ 优化isJsComputed计算逻辑。
+
 ### ↪2.0.2
@@ -142,0 +211,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102495

280.39%

Number of package files

8

33.33%

Lines of code

273

170.3%

Number of low maintenance alerts

0

-100%

Number of lines in readme file

296

30.4%

Worsened metrics

Number of low supply chain risk alerts

4

300%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes