[ListItem] Added Dynamic Text functionality with tertiaryText prop

[matthewfbenjamin]

Deleted the previous pull request, only one commit now. Sorry for the confusion!

[codecov-io]

Codecov Report

Merging #89 into master will not impact coverage.

@@          Coverage Diff           @@
##           master     #89   +/-   ##
======================================
  Coverage    85.3%   85.3%           
======================================
  Files          13      13           
  Lines         592     592           
  Branches       78      78           
======================================
  Hits          505     505           
  Misses         87      87

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e353959...5ab7a8a. Read the comment docs.

[xotahal]

No problem @mbenjamin618 :) It's much more better :)

Now, we could talk about this. Could you try to explain how should this work? I mean:

props.numberOfLines === 0 || null -> first, second and third === 1 line
props.numberOfLines === 1 -> first, second and third === 1 line
props.numberOfLines === 2 -> first === 1, second === 1, third?
etc.

Just want to say It's not clear now :) Is there a way how to make it better?

[xotahal]

what about null? or empty string? or false? think !tertiaryText it's better in this case ...

[matthewfbenjamin]

I see what you're saying. I think that changing type of tertiaryText to !tertiaryText might work better too, let me experiment.

Line 272 is basically saying: if there isn't a tertiaryText prop then the numberOfLines prop for the Text will be the numberOfLines const on 255, but if there is a tertiaryText prop then the second line should only ever be 1 line.

Similarly, line 273 does that same thing. I attached a picture with 4 different examples of cards I made with both two and three lines of text/. This is the code for it:

          <Card flex={1}>
            <ListItem
              leftElement={<InitialsAvatar name={'Matthew Benjamin'} color={'red'} />}
              centerElement={{primaryText: 'Primary Text', secondaryText: 'Secondary Text'}}
              numberOfLines={2}
            />
          </Card>
          
          <Card flex={1}>
            <ListItem
              leftElement={<InitialsAvatar name={'Matthew Benjamin'} color={'red'} />}
              centerElement={{primaryText: 'Primary Text', secondaryText: 'This is long text to show off how the dynamic text field works with only two lines!'}}
              numberOfLines='dynamic'
            />
          </Card>
          
          <Card flex={1}>
            <ListItem
              leftElement={<InitialsAvatar name={'Matthew Benjamin'} color={'red'} />}
              centerElement={{primaryText: 'Primary Text', secondaryText: 'Secondary Text', tertiaryText: 'Tertiary Text'}}
              numberOfLines={3}
            />
          </Card>

        <Card flex={1}>
            <ListItem
              leftElement={<InitialsAvatar name={'Matthew Benjamin'} color={'red'} />}
              centerElement={{primaryText: 'Primary Text', secondaryText: 'Secondary Text', tertiaryText: 'This is long text to show off how the dynamic text field works with only three lines!'}}
              numberOfLines='dynamic'
            />
          </Card>

[xotahal]

I see, sounds good .. but still if we need to think about it so much, what about people who no nothing about this library? :)

I have this idea:

<ListItem
    centerElement={{
        primaryText: 'Always one line',
        secondaryText: { text: 'more than one line', numberOfLines: 'dynamic' },
        tertiaryText: { text: 'one line', numberOfLines: 1 },
    }}
/>

I think it's so clear. But, I have to say it looks like we almost provide the same api as RN does but in another form :)

Maybe your solution is better. What do you think?

[matthewfbenjamin]

I like the idea you wrote, but that wasn't the intention of my update. With mine, even though it looks similar to what is already implemented, it gives the user the capability to start a new line of text on a third line instead of it automatically wrapping. My code doesn't support taking in the props the way you wrote it, but it might be something to look into further when I have more time.