4 |
5 |
4 |
5 | 
20 |
21 | {/* 36 | 37 | 38 | put your long text right here 39 | 40 | 41 | */}
42 |HELLO!
19 |HELLO!
32 |text
10 | 11 | ); 12 | 13 | const childrenArray = tree.props.children; 14 | 15 | expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 2 }); 16 | expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 1 }); 17 | expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 4 }); 18 | expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 0 }); 19 | }); 20 | 21 | test("getLevelInfo with falsy children", () => { 22 | const tree = ( 23 | <> 24 | 25 | 26 | 27 | ); 28 | 29 | const childrenArray = tree.props.children; 30 | 31 | expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 0 }); 32 | }); 33 | 34 | test("getLevelInfo with arrays as children", () => { 35 | const tree = ( 36 | <> 37 | 38 |{["text",
text
]} 39 | 40 | ); 41 | 42 | const childrenArray = tree.props.children; 43 | 44 | expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 2 }); 45 | expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 2 }); 46 | expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 1 }); 47 | expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 4 }); 48 | }); 49 | 50 | test("getLevelInfo with arrays as children and text", () => { 51 | const tree = ( 52 | <> 53 |54 |
{["text"]} text
55 | 56 | 57 | ); 58 | 59 | const childrenArray = tree.props.children; 60 | 61 | expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 1 }); 62 | expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 1 }); 63 | expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 2 }); 64 | expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 5 }); 65 | }); 66 | }); 67 | -------------------------------------------------------------------------------- /src/__tests__/truncateLevel.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { getLevelInfo, truncateLevel } from "../treeUtils"; 3 | 4 | describe("TruncateLevel", () => { 5 | const tree = ( 6 | <> 7 | 8 |{["text",
text
]} 9 | 10 | ); 11 | 12 | const childrenArray = tree.props.children; 13 | 14 | test("level 0", () => { 15 | expect(getLevelInfo(childrenArray, 0)).toEqual({ length: 2 }); 16 | expect(truncateLevel(childrenArray, 0)).toMatchInlineSnapshot(``); 17 | }); 18 | 19 | test("level 1", () => { 20 | expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 2 }); 21 | expect(truncateLevel(childrenArray, 1)).toMatchInlineSnapshot(` 22 | Array [ 23 | , 24 |25 | text 26 |
, 27 | ] 28 | `); 29 | }); 30 | 31 | test("level 2", () => { 32 | expect(getLevelInfo(childrenArray, 2)).toEqual({ length: 1 }); 33 | expect(truncateLevel(childrenArray, 2)).toMatchInlineSnapshot(` 34 | Array [ 35 | , 36 |37 | text 38 |
, 39 | ] 40 | `); 41 | }); 42 | 43 | test("level 3", () => { 44 | expect(getLevelInfo(childrenArray, 3)).toEqual({ length: 4 }); 45 | expect(truncateLevel(childrenArray, 3)).toMatchInlineSnapshot(` 46 | Array [ 47 | , 48 |49 | text 50 |
51 | tex 52 |
53 | , 54 | ] 55 | `); 56 | }); 57 | 58 | test("Truncating an array shound always keep the children array", () => { 59 | const tree = ( 60 | <> 61 |{["text", "test"]}
62 | 63 | ); 64 | 65 | const childrenArray = tree.props.children; 66 | 67 | expect(getLevelInfo(childrenArray, 1)).toEqual({ length: 2 }); 68 | const truncate1 = truncateLevel(childrenArray, 1); 69 | expect(getLevelInfo(truncate1, 1)).toEqual({ length: 1 }); 70 | }); 71 | 72 | test("truncateLevel to specific index ", () => { 73 | const tree = ( 74 | <> 75 |76 |
text
77 | 78 | 79 | ); 80 | 81 | const childrenArray = tree.props.children; 82 | 83 | expect(truncateLevel(childrenArray, 3, 1)).toMatchInlineSnapshot(` 84 |85 |
86 | t 87 |
88 | 89 | `); 90 | }); 91 | 92 | test("truncateLevel removes void elements", () => { 93 | const tree = ( 94 | <> 95 |96 |
text
97 | 98 | 99 | ); 100 | 101 | const childrenArray = tree.props.children; 102 | 103 | expect(truncateLevel(childrenArray, 2)).toMatchInlineSnapshot(`null`); 104 | }); 105 | }); 106 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import * as React from "react"; 3 | 4 | import ResultBox from "./resultBox"; 5 | import { getLevelInfo } from "./treeUtils"; 6 | import updater from "./updater"; 7 | import { didContentChange } from "./utils"; 8 | import type { TruncatedComponentProps, TruncatedComponentState } from "./types"; 9 | 10 | class TruncatedComponent extends React.Component< 11 | TruncatedComponentProps, 12 | TruncatedComponentState, 13 | > { 14 | static defaultProps = { 15 | numberOfLines: undefined, 16 | onTruncate: () => {}, 17 | ellipsis: "...", 18 | }; 19 | 20 | state = updater.getInitialState(this.props.children, this.props.cacheKey); 21 | 22 | containerRef: ?React.ElementRef<"div">; 23 | 24 | componentDidMount() { 25 | if (this.state.isTruncationCompleted) { 26 | this.callOnTruncate(); 27 | } 28 | } 29 | 30 | componentDidUpdate( 31 | prevProps: TruncatedComponentProps, 32 | prevState: TruncatedComponentState, 33 | ) { 34 | const { isTruncationCompleted } = this.state; 35 | if (isTruncationCompleted && !prevState.isTruncationCompleted) { 36 | this.callOnTruncate(); 37 | } 38 | 39 | this.reRunTruncationIfNeeded(prevProps); 40 | } 41 | 42 | componentWillUnmount() { 43 | const { cacheKey } = this.props; 44 | if (!this.state.isTruncationCompleted) { 45 | updater.clearCache(cacheKey); 46 | } 47 | } 48 | 49 | reRunTruncationIfNeeded(prevProps: TruncatedComponentProps) { 50 | if ( 51 | didContentChange(prevProps, this.props) || 52 | this.props.numberOfLines !== prevProps.numberOfLines 53 | ) { 54 | this.setState( 55 | updater.getInitialState(this.props.children, this.props.cacheKey), 56 | ); 57 | } 58 | } 59 | 60 | callOnTruncate() { 61 | this.props.onTruncate(this.state.isTruncated); 62 | } 63 | 64 | getCurrentNumberOfLines(heightByParagraph: Array{/* 22 | 23 | 24 | put your long text right here 25 | 26 | 27 | */}
28 |81 | 82 | Nothomyrmecia 83 | 84 | , also known as the dinosaur ant or dawn ant, is a 85 | rare{" "} 86 | 91 | genus 92 | {" "} 93 | of{" "} 94 | 99 | ants 100 | {" "} 101 | consisting of a single{" "} 102 | 107 | species 108 | 109 | ,{" "} 110 | 111 | Nothomyrmecia macrops 112 | 113 | . These ants live in South Australia, nesting in old-growth{" "} 114 | 119 | mallee 120 | {" "} 121 | woodland and{" "} 122 | 123 | 128 | Eucalyptus 129 | 130 | {" "} 131 | woodland. The full distribution of Nothomyrmecia has never 132 | been assessed, and it is unknown how widespread the species truly 133 | is; its potential range may be wider if it does favour{" "} 134 | 139 | old-growth 140 | {" "} 141 | mallee woodland. 142 |
143 |144 | Possible threats to its survival include habitat destruction and 145 | climate change. Nothomyrmecia is most active when it is 146 | cold because workers encounter fewer competitors and predators 147 | such as{" "} 148 | 149 | 154 | Camponotus 155 | 156 | {" "} 157 | and{" "} 158 | 159 | 164 | Iridomyrmex 165 | 166 | 167 | , and it also increases hunting success. Thus, the increase of 168 | temperature may prevent them from foraging and very few areas 169 | would be suitable for the ant to live in. As a result, the{" "} 170 | 174 | IUCN 175 | {" "} 176 | lists the ant as{" "} 177 | 182 | Critically Endangered 183 | 184 | . 185 |
186 | 187 |