[aptitude]

Mój pierwszy React npm komponent pakiet i w pełni napisany w TypeScript (ʘ‿ʘ)
https://www.npmjs.com/package/react-simple-ellipsis
Bardzo prosty komponent który skraca długi tekst i pozwala wyświetlić cały tekst po kliknięciu na "Pokaż więcej" :3

#programowanie

[Borntobefit]

@aptitude: ile zajmuje nauka żeby taki skracacz ubić?
Btw nie wiedzialem že takie rzeczy trzeba programować myślałem że sa poprostu w sklepie online z komponentami albo kreator/edytor to ogarnia.

[aptitude]

@Borntobefit: Jeżeli znasz React, to napisanie pakietu niczym nie różni się od napisania komponentu w swoim projekcie.
By stworzyć pakiet npm trzeba tylko zbudować go, ja używam rollup.js.

Polecam poradnik alexa: https://github.com/alexeagleson/template-react-component-library
Około ~5-15 minut nauki.

PS. Wszystko co znajdziesz w npm zostało przez kogoś napisane...
Tutaj znajdziesz moje inne npm pakiety: https://www.npmjs.com/~skorotkiewicz

[Borntobefit]

@aptitude: thx !
Wesołych!

[aptitude]

@Borntobefit: Wzajemnie Mirku!

[shdw]

@aptitude:
- zmień ternary na ??, dzieki czemu bedziesz mogl uzywac pusty string i 0 w opcjach (kto wie, moze ktos tego bedzie potrzebowal jako fallback)
- imo ellipsis powinen byc wliczany do ilosci znakow, czyli str.length > limit + ellipsis i ${str.slice(0, limit - ellipsis)}${ellipsis}
- fajnie by było jak byś wykrywał gdzie jest najdalszy mozliwy whitespace w danym limicie, zeby nie ucinac slow w losowych miejscach
- albo

[veracholera]

@aptitude: gdzie testy, bo widzę jest config Jesta, a testów nie ma żadnych

[aptitude]

@shdw: Dziękuje za PR! Marged i zaktualizowany pakiet na npm.

@veracholera: Dodane :) https://github.com/skorotkiewicz/react-simple-ellipsis/blob/main/src/components/Ellipsis/Ellipsis.test.tsx

[shdw]

@aptitude: To nie moj PR :P

[aptitude]

zmień ternary na ??

już ktoś zmienił

imo ellipsis powinen byc wliczany do ilosci znakow, czyli str.length > limit + ellipsis i ${str.slice(0, limit - ellipsis)}${ellipsis}

Dodane!

fajnie by było jak byś wykrywał gdzie jest najdalszy mozliwy whitespace w danym limicie, zeby nie ucinac slow w losowych miejscach

Dodane! Teraz masz 3 różne sposoby, skrócić tekst przed wyrazem lub po kolejnym wyrazie po osiągnięciu limitu, lub po prostu przyciąć.

- albo EllipsisProps

[shdw]

@aptitude: Mozesz jeszcze ten mode zmienic na enum EllipsisMode albo TrimmingMode, bedzie ladniejsze typowanie.

[aptitude]

Mozesz jeszcze ten mode zmienic na enum EllipsisMode albo TrimmingMode, bedzie ladniejsze typowanie.

Dodane!

https://github.com/skorotkiewicz/react-simple-ellipsis/commit/27b2223d629ea4538f28acb2784b0ced7a1e2b89#diff-9c492058fdeb248cb3778e716e6cbab7f8b055186a5ef849c5cc41db0ef5ec78

Dzięki za pomoc! Jak coś, to śmiało uderzaj PRy ;)

@shdw:

[shdw]

@aptitude: Zapomniales L10

Z telefonu ciezko wysylac PRy :P

[aptitude]

Zapomniales L10

Dodane!

https://github.com/skorotkiewicz/react-simple-ellipsis/commit/46a95082e33cf946f36bc94a252a1a63a1bc7b11#diff-9c492058fdeb248cb3778e716e6cbab7f8b055186a5ef849c5cc41db0ef5ec78

@shdw:

[aptitude]

@shdw: Dobrze zrobiłem? mode?: TrimmingMode;
Czy enum trzeba exportować?

export enum TrimmingMode {
 Next = 1,
 Before = 2,
}

[shdw]

@aptitude: tak, bo uzywasz tego jako: `

W sumie mozesz to nazwac EllipsisMode jak chcesz exportowac, bo wtedy import bedzie bardziej oczywisty.

```import { Ellipsis, EllipsisMode } from 'react-simple-ellipsis'```

Do tego nie potrzebujesz tego = 1` bo enumy sie inicjalizuja same, daj tylko ten defaultowy jako

export enum EllipsisMode {
 InPlace,
 Before,
 After
}

albo coś w ten desen. Nie interesuja Cie wartosci tak czy inaczej, bo w kodzie uzywasz referencji

[aptitude]

EllipsisMode

Dodane!

https://github.com/skorotkiewicz/react-simple-ellipsis/commit/492022b782d8aa712ad77a6ef1bf252a3cf7e133#diff-9c492058fdeb248cb3778e716e6cbab7f8b055186a5ef849c5cc41db0ef5ec78

Dziękuje (ʘ‿ʘ)

@shdw:

[aptitude]

@shdw: Wow, >300 pobrań na npmjs ma nasz komponent :D