mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
b87418f945
* Genericize ReactTimeago by ComponentType
This allows properties from `component` to be added to `TimeAgo` without throwing an error.
e.g.
```
<TimeAgo<typeof Text>
component={Text}
style={[styles.lastActiveText, { fontSize: activeBubbleSize * 0.588 }]}
date={lastActiveAt}
/>
```
Type inferencing not working yet, so must specify generic in order to add properties from `component`
* Removing RN dep
* Stylefix and updating TS to 2.9
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import ReactTimeago, { Unit, Suffix } from "react-timeago";
|
|
import * as React from "react";
|
|
|
|
const ReactTimeagoRequiredOptions: JSX.Element = (
|
|
<ReactTimeago date={new Date()} />
|
|
);
|
|
|
|
const customFormatter = (
|
|
value: number,
|
|
unit: Unit,
|
|
suffix: Suffix,
|
|
epochMiliseconds: number
|
|
) => {
|
|
return epochMiliseconds > 300000
|
|
? `${value}${unit[0]} ${suffix}`
|
|
: "a really long time ago";
|
|
};
|
|
|
|
const ReactTimeagoAllOptions: JSX.Element = (
|
|
<ReactTimeago
|
|
date={new Date()}
|
|
live
|
|
minPeriod={0}
|
|
maxPeriod={100}
|
|
component={() => <div />}
|
|
title="Timeago"
|
|
formatter={customFormatter}
|
|
/>
|
|
);
|
|
|
|
// inspired by react-native
|
|
class Text extends React.Component<{
|
|
style?: Array<{}>;
|
|
numberOfLines?: number;
|
|
ellipsizeMode?: "head" | "middle" | "tail" | "clip";
|
|
allowFontScaling?: boolean;
|
|
}> {}
|
|
|
|
const ReactTimeagoCustomComponent: JSX.Element = (
|
|
<ReactTimeago<typeof Text>
|
|
date={new Date()}
|
|
component={Text}
|
|
// props passed down to Text
|
|
style={[{ textAlign: "center" }, { fontSize: 24 }]}
|
|
numberOfLines={2}
|
|
ellipsizeMode="middle"
|
|
allowFontScaling
|
|
/>
|
|
);
|