bsidelinger912/shiitake

React Line clamp that won't get you fired

shiitake's Issues

Will you support crossbrowser?

Well done on ie.
But in mozilla. I write lines={2}. The result is one line.
In chrome, when line-height is difference then font-size, i saw only half part of text.
Also some times all looks good after resize.

Ref issues with jest snapshot testing

I'm using storybook's storyshots addon to run jest snapshot tests in my app.

I have an issue with refs during my test runtime, it's definitely related to: https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing

shiitake/dist/index.js:91 -> testChildrenEl ref is null

var contentHeight = testChildrenEl.current.offsetHeight;

Stack trace:

    TypeError: Cannot read property 'offsetHeight' of null

      at checkHeight (node_modules/shiitake/dist/index.js:91:48)
      at node_modules/shiitake/dist/index.js:152:7
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10345:26)
      at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10383:11)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9972:14)

shiitake version: 3.0.2

Could you help with creating node mock for this case?

Cannot read property 'length' of null

Given the following:

const text = null;
<Shiitake lines={2}>{text}</Shiitake>

Throws the following error:

Uncaught (in promise) TypeError: Cannot read property 'length' of null
    at Shiitake.render (bundle-program-builder.js?compile=false:76149)

Sometimes text comes from an API as null. There is a workaround:

const text = null;
<Shiitake lines={2}>{text ? text : ''}</Shiitake>

But I'd rather have the Shiitake component handle this for me instead.

Also, I noticed there is no unit test in shiitake.spec.js for this particular case. I would have sent a pull request, but I could not run any tests on my local machine. Maybe you could add some info in README.md about how to run tests and what dev dependencies are needed for this.

Does the repo support HTML content type?

Does the repo support HTML content type?

[3.0] Typescript: attributes property should be optional

@bsidelinger912

export interface ShiitakeProps { lines: number, throttleRate?: number, className?: string, tagName?: string, overflowNode?: React.ReactNode, onTruncationChange?: (isTruncated: boolean) => void, **attributes: WhitelistedElementAttributes,** }

Text is limited to a block of text

{text} needs to be a string and linebreaks are not interpreted. Adding html elements breaks shittake.

Remove 'componentWillReceiveProps' for React 17

componentWillReceiveProps and the other will lifecycle events are deprecated, and support will be removed soon. Please either remove the need for these events, or switch to the UNSAFE_ versions.

Thanks!

How to know if the text is truncated ?

First of all, let me thank you for the great component (you saved me a lot of time).

I was wondering if there's a supported way to determine if shiitake truncated it's children or not. (without messing around with the DOM)

I tried taking a ref and looking at the state. found allChildren, testChildren but it didn't help much.

add custom params

For example, I would like to add the "title" property

Updating UI state does not result in a change of value rendered

We are using v3.0.1 within a react app. When we have a state change with this version, the value in which is wrapped in the Shiitake component does not update without a resize event. Therefore, when the UI needs to change, it holds onto the old value and just appends a ... instead of re-rendering the component to determine if the new value needs to be truncated or not.

The value appears to be appended to the DOM but the original value does not update. This is not an issue in v2.3.1

Work around is to add a key={stateValue} to trigger a re-render of the component so when the value in the state changes, the component will adjust

How to compare the original text with truncated text

We're using shiitake to display a show more/show less button. However this button shows regardless of whether something has been truncated.

Is there a way using react refs to access the original text and the new truncated text to compare length and determine if the show more button should be displayed or not?

<Fragment>
        {!displayFullNote && (
          <Shiitake id="truncated" className="d-block text-midgrey font-14" lines={1}>
          {text}
          </Shiitake>
          )}
        {displayFullNote && (
          <small id="non-truncated" className="d-block text-midgrey">{text}</small>
          )}
          <small
          id="display-fullnote"
          className="cursor-pointer border-0 text-primary bg-none d-block"
          onClick={() =>
          this.setState({
            displayFullNote: !displayFullNote
          })
        }
          >
          {displayFullNote ? "Show less" : "Show more"}
          </small>
      </Fragment>

Guidance on use with React 17.0.0

Does this package support ^17.0.0 without any work? Or, what is the outline for support?

ResizeListener rerenders despite same props

Hi! Great component!

We may be having a problem where this ResizeListener fires when CSS Media breakpoints are fired off... essentially, any resize event will fire an event, which your component processes

Is is possible for you to check with shouldComponentUpdate or use a PureComponent to see if a rerender is actually required? It is rerendering even though all the props are the same coming in

I can create a minimal example if you want, we discovered this with why-did-you-update

Thanks!
~ B

Shiitake doesn't play well with lazy/Suspense

If you lazy-load a component including a Shiitake, the content sometimes doesn't render. This isn't your fault; it's due to a design flaw in React that the developers have said they aren't going to fix. Here's why it happens:

1. The lazy-loaded component is downloaded, and the virtual DOM is constructed, with display: none on the topmost element. While this is happening, the Suspense fallback is being displayed.
2. The DOM is rendered, and all JS is executed.
3. Depending on timing, this is when Shiitake measures itself to figure out how much vertical space is being used. Since the parent has display: none, the measured height is zero.
4. React hides the Suspense fallback, and removes display: none. This action is not linked to the React lifecycle, and doesn't fire any sort of event, so there's no way to detect that this is happening.
5. If the user doesn't trigger a Shiitake rerender by resizing the window or something, the content is rendered inside a height: 0 element, which makes it invisible to the user.

In my project, I worked around the issue by creating a wrapper component around Shiitake which goes up the DOM tree looking for display: none, and polling for that style's removal. It's very hacky, but it works.

If you fix this, you'll have the only popular line-clamping component which can safely be lazy-loaded. I checked the others. :) If you like, I can ask my boss whether my workaround can be open sourced so you can use it as a dependency.

Which commit is pointing to 1.3.0 release on npm?

First of all, thanks for putting this library out for others to use. It's really helpful 👍

I can see that there is 1.3.0 version of this package available on npm:

However, I cannot see which commit that is pointing to. This is the latest commit I can find but it's for 1.2.0: d870278

As a general feedback, it would be nice to tag the releases.

Very long text without spaces gives only '...' as a clamping result

Reproduction steps:

• go to provided demo in a CodeOpen
• replace this line: const text = 'Cook it up all night with Shitakes'; with this one const text = 'Proposal_for_a_Directive_COM_2016_450_final_of_7-May-2016_Money_No_Money_-short.pdf';

Add resize ref

I would like to manage the component rerender myself. This is necessary when resizing the parent component.

alt-codes/emoticons/emojis and after are removed

Hi! Please redirect me if this issue has already been addressed somewhere, I could not find it. Also please tell me if this is lacking information you need.

As far as i can tell Shiitake will remove special characters, including all characters following it. From what i can gather, special characters that have a char-length of 2 or more are removed, along with everything after. At least those I have tested.

The following test-string
Cool! 😀 .😀 This is super cool( ͡° ͜ʖ ͡°) yo (•⚗ ৺⚗•) ᕕ ༼⌐■-■༽ᕗ ?????????
will only render
Cool! (with the final empty-space)
when used with Shiitake.

The behaviour repeats itself with later special characters, like Lennyface ( ͡° ͜ʖ ͡°), bulletpoint •, and so on. Just to be clear on this, if I remove all the special characters, everything is rendered. I have also tested other strings and emoticons. Æ, Ø and Å - three Norwegian letters, are rendered.

I'm not sure, but I think the issue might relate to the length of each of the special characters and how length is handled. All the emoticons have a char-length of 2 or more, while Æ,Ø and Å, for instance, have a char length of 1.
"😀".length === 2 // true
"Æ".length === 1 // true

I haven't found time to check your src and see if i can find a solution.

If no children are passed, it just chokes with no good error handling.

I just ran into this today, will fix ASAP.

React v15.5 deprecating React.PropTypes

Can you please update to support the breaking change coming in v16?

No aria-hidden tags on unseen elements

Hey there, it would be really helpful for accessibility reasons that the hidden elements (like the Ws and repeated spans) to have an aria-hidden tag on them. Otherwise screen readers read the text, the W's and the text over again, making it very confusing to someone who needs to consume the content by listening.

I can help by making a PR, I can easily see where the W's get added so that one is easy. With your help I'm sure this is a small change.

Unable to remove styling from inner span

I am unable to remove the styling from inner elements generated by shiitake. Is there a way to do this? Specifically, I need to remove position: relative from the inline styling from the span which also contains max-height: 36px in the attached image

set lines dynamically

Hi @bsidelinger912 I would like to be able to set the lines dynamically, depending on state. But can't seem to get this to work. It only registers the change when the window is resized. Example: http://codepen.io/mangakid/pen/LxmdjR

Can be "a" in the tag whitelist?

Would the truncation work? Thanks!

Support React 16

npm WARN [email protected] requires a peer of react@^15.5.4 but none is installed. You must install peer dependencies yourself.

classes for span...

hi i just wondering if you can add a className for the span children that you create for clamp...

thanks!

Customize '...'

Is there a way to replace the "..." text with "read more"?

Improve performance on initial load

This module works really well, but I'm noticing a slight lag before the clamped content appears, illustrated below:

I have 10 items per page that are getting clamped. Could that be contributing to the issue?

Also, I have the throttleRate set to 100, but not sure if that affects the initial load.

What can be done to speed it up, or maybe even display the content (and hiding overflow via CSS) before clamping?