npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

text-overflow-processor-react

v2.0.13

Published

text overflow process for react

Downloads

86

Readme

文本溢出处理

当文案在给定容器显示不下,要对文案进行折叠/展开切换处理,获取文案是否被折叠的状态(例如:被折叠时气泡展示全部)进行多功能定制时,可以尝试使用本组件TextOverflowProcessor,它也许能帮到你!目前提供ellipsisshadow两种处理方式。

效果展示: demonstration

作者:陈星~

一、安装

npm i text-overflow-processor-react -S

yarn add text-overflow-processor-react

二、使用

import TextOverflowProcessor from 'text-overflow-processor-react'

三、参数注解及默认值

参数含义:
interface TextOverflowProcessorPropsType {
  /** >>>>>>公共配置 */
  text: string, // 文本内容,shadow时支持传DOM模板字符串(注:尽量传string文案)
  className?: string,
  style?: React.CSSProperties,
  onClick?: ((e: React.MouseEvent<HTMLElement, MouseEvent>) => void) | null,
  getIsFold?: (( // 获取文案的折叠状态
    isFold: boolean, // 文案是否是折叠的(文案是否溢出)
    isInitState: boolean, // 返回的是否是初始化状态,有时初始化状态可能会影响组件的使用,可以用这个区分
  ) => void) | null,
  option?: {
    /**
     * 自定义组件刷新依赖的自身属性:依赖中的属性发生变化时,会触发组件刷新。建议不要使用all,伤性能
     * 其实通过key或其它方式也能实现同样的效果,这里只是为了方便而提供
     * 注意:
     * 属性中unfoldButtonText/foldButtonText/textEndSlot/buttonBeforeSlot作为组件监听依赖项时,
     * 传递的属性值为string字符串类型时将正常使用,当为Element复杂类型时将不作为监听依赖项,
     * 此时结构发生变化可以给组件加key告知变化实现刷新效果
     */
    reRenderDependentProperties?: ReRenderDependentPropertiesEnum[],
    type?: 'ellipsis' | 'shadow', // 文案处理类型
    /** >>>>>>ellipsis配置 */
    ellipsisOption?: {
      ellipsisLineClamp?: number, // 控制显示的行数
      /**
       * 是否使用JS逻辑计算文字开始折叠时显示的文案,可以传字号大小
       * 注意:
       * 1、启用此功能是为了兼容部分浏览器不支持display: -webkit-box,属性的使用(或出现异常)
       * 2、计算出来的文案可能不够完美,可以通过extraOccupiedW调整计算的误差
       * 3、这时只支持传string类型内容
       * 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,点击跳转到外部网站
       * 文案溢出时显示在...后面,不溢出时在文字尾部
       * 注意:启用isJsComputed时,textEndSlot所占的宽需要通过extraOccupiedW告知才能精确计算
       */
      textEndSlot?: any,
      // 占用文本的额外宽度,启用isJsComputed时,此属性可以调整计算误差
      extraOccupiedW?: number,
      // 按钮前面的占位内容
      buttonBeforeSlot?: string | JSX.Element | JSX.Element[] | null,
    },
    /** >>>>>>shadow配置 */
    shadowOption?: {
      shadowInitBoxShowH?: number, // 折叠时显示的文案高度,超出这个高度才出现操作按钮
      shadowFoldButtonPlacement?: 'outer' | 'inner'; // 折叠态时按钮位置在文案外部还是内部
      isShadowLayer?: boolean, // 是否需要阴影遮罩层
      shadowClassName?: string, // 阴影遮罩层自定义类名
      shadowStyle?: React.CSSProperties, // 阴影遮罩层自定义样式
    },
    buttonClassName?: string,
    buttonStyle?: React.CSSProperties,
    isClickOriginalEvent?: boolean, // 当传了onClick时,点击事件是否触发原始事件
    isDefaultFold?: boolean, // 是否默认折叠
    unfoldButtonText?: string | JSX.Element | JSX.Element[], // 展开时按钮文案
    foldButtonText?: string | JSX.Element | JSX.Element[], // 折叠时按钮文案
    isShowAllContent?: boolean, // 当选择展示所有内容时将不提供操作按钮
    isMustButton?: boolean, // 是否常驻显示按钮
    isMustNoButton?: boolean, // 是否不要显示按钮
    lineHeight?: number,
    isRenderShowAllDOM?: boolean, // 是否渲染被隐藏的全部文案展示DOM
  },
}
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';
对应默认值:
TextOverflowProcessor.defaultProps = {
  text: '',
  className: '',
  style: {},
  onClick: null,
  getIsFold: null,
  option: {
    reRenderDependentProperties: ['text'],
    type: 'ellipsis',
    /** >>>>>>ellipsis配置 */
    ellipsisOption: {
      ellipsisLineClamp: 2,
      isJsComputed: false,
      fontSize: 12,
      fontClassName: '',
      fontStyle: {},
      textEndSlot: null,
      extraOccupiedW: 0,
      buttonBeforeSlot: null,
    },
    /** >>>>>>shadow配置 */
    shadowOption: {
      shadowInitBoxShowH: 76,
      shadowFoldButtonPlacement: 'outer',
      isShadowLayer: true,
      shadowClassName: '',
      shadowStyle: {},
    },
    buttonClassName: '',
    buttonStyle: {},
    isClickOriginalEvent: false,
    isDefaultFold: true,
    unfoldButtonText: 'Show Less',
    foldButtonText: 'Show All',
    isShowAllContent: false,
    isMustButton: false,
    isMustNoButton: false,
    lineHeight: 24,
    isRenderShowAllDOM: false,
  },
}
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-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',
  'letter-spacing',
  'text-transform',
  'text-indent',
  'text-combine-upright',
  'text-emphasis',
  'text-emphasis-position',
  'text-emphasis-style',
  'text-orientation',
  'text-rendering',
  'text-size-adjust',
  'word-spacing',
]

注:

1、type为ellipsis时,默认...省略号的展示是通过CSS属性display: -webkit-box实现的,顾不是谷歌内核的浏览器使用时无法达到预期折叠省略的效果(甚至可能出现文案展示为空白的情况,例如:低版本的safari浏览器),为此在1.1.0版增加isJsComputed属性,文案内容在折叠时通过js计算得出。

2、本组件及本组件之内的元素标签尽量不要使用CSS属性white-space: nowrap,否则可能影响getIsFold获取的正确性。

3、提供去渲染两套dom,通过属性isRenderShowAllDOM控制,class类名分别为text-overflow-processor-on /text-overflow-processor-off,text-overflow-processor-on为文案被正常处理展示效果的dom(默认显示),text-overflow-processor-off为文案未处理全部展示的dom(默认隐藏),如果需要,可以合理应用它们。

四、更新日志

↪2.0.13

2024-08-25

☆ TS代码优化。

↪2.0.12-optimize

2024-01-08

☆ readme文档使用说明修正更新。

↪2.0.12

2024-01-07

☆ 增加shadowFoldButtonPlacement属性,shadow时,控制折叠态时按钮位置在文案外部还是内部;

☆ 修复reRenderDependentProperties属性带来的死循环问题;

☆ 优化展开态屏幕缩放变成折叠态问题;

☆ 优化屏幕缩放时,显示效果;

☆ 优化复杂依赖属性的依赖项使用;

ellipsis时,去除按钮前的&nbsp;空格占位。

↪2.0.11

2023-11-25

☆ 增加reRenderDependentProperties属性。

↪2.0.10

2023-11-19

☆ 代码优化。

↪2.0.9

2023-08-01

☆ 修复shadow时,初始化折叠状态在按钮不显示时展示错误;

☆ package.json文件repository地址修改。

↪2.0.8

2023-07-31

☆ 修复shadow时,初始化折叠状态错误;

☆ getIsFold方法增加返回的状态是否是初始化状态标识;

☆ onClick方法增加事件对象返回,可用于阻止事件冒泡及默认行为等。

↪2.0.7-correction

2023-07-23

☆ 优化代码。

↪2.0.6

2023-07-08

☆ fontStyle属性有效CSS属性更新,去除部分暂不支持的属性,例如white-space;

☆ 其他优化。

↪2.0.5

2023-05-27

☆ isJsComputed开启时,支持textarea文本。

↪2.0.4

2023-05-23

☆ 修复shadow时,屏幕缩放文案展示状态错误。

↪2.0.3-optimize

2023-05-10

☆ package.json文件补充及代码优化。

↪2.0.3

2023-05-08

ellipsisJS计算,增加fontClassName、fontStyle属性,弥补当文案样式比较丰富时,仅fontSize属性无法满足要求;

☆ 优化isJsComputed计算逻辑。

↪2.0.2

2023-05-03

☆ readme文档添加gif使用效果演示。

↪2.0.1

2023-04-30

☆ 属性配置项规则变化。

↪2.0.0

2023-04-29

注:2.x.x版本不兼容1.x.x版本(配置项),且type属性默认值变更,升级需谨慎!!!至此,1.x.x版本和2.x.x版本将分开维护。

☆ 属性配置项规则变化;

☆ type属性默认值修改为ellipsis

↪1.1.8

2023-04-24

☆ 组件样式white-space: pre-wrap修改为white-space: break-spaces,ellipsis时文案全是空格时兼容换行;

☆ 增加isShadowLayer属性。

↪1.1.7

2023-03-11

☆ 组件样式增加white-space: pre-wrap,以免被组件外部样式white-space: nowrap影响,导致getIsFold获取的结果不正确。

↪1.1.6

2023-03-04

☆ 增加isClickOriginalEvent属性。

↪1.1.5-remedying

2023-02-20

☆ 修复1.1.5修改带来的bug:视口变小,不折叠的文案应该变成折叠无效。

↪1.1.5

2023-02-15

☆ 修复isShowAllContent为true时,视口大小改变导致文案被折叠或出现按钮。

↪1.1.4-remedying

2023-02-01

☆ 修复下载下来的包自动下载了相关额外无用依赖;

☆ 增加修改shadow阴影样式属性shadowClassName和shadowStyle。

↪1.1.4

2023-01-31

☆ 修复在ellipsis下,屏幕缩放时,原本文案是折叠的,屏幕放大再缩小时文案不折叠;

☆ 修改仅当ellipsis时,且没有开启isJsComputed、文案是折叠的、显示操作按钮时,文案对齐方式才是justify,其他情况使用默认对齐方式;

☆ 组件属性描述位置优化。

↪1.1.3

2022-11-28

☆ 修复isJsComputed开启时,“按钮文案尽量传DOM结构”的错误描述。

↪1.1.2

2022-11-26

☆ 增加textEndSlot和extraOccupiedW属性,extraOccupiedW解决isJsComputed计算不精确问题;

☆ 修复isShowAllContent属性传true时,isMustButton传true按钮没有显示。

↪1.1.0

2022-11-19

☆ 增加isJsComputed和fontSize属性,以适配不支持display: -webkit-box的浏览器去...折叠展示文案。