vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

feat: update html render

Browse source
This commit is contained in:
Arnaud Vergnet 2021-09-12 23:31:17 +02:00
parent 2c11addf40
commit dc944060e1
3 changed files with 357 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

502
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -48,7 +48,7 @@
"react-native-permissions": "3.0.5", "react-native-permissions": "3.0.5",
"react-native-push-notification": "8.1.0", "react-native-push-notification": "8.1.0",
"react-native-reanimated": "1.13.2", "react-native-reanimated": "1.13.2",
"react-native-render-html": "5.1.1", "react-native-render-html": "6.1.0",
"react-native-safe-area-context": "3.3.2", "react-native-safe-area-context": "3.3.2",
"react-native-screens": "3.7.0", "react-native-screens": "3.7.0",
"react-native-splash-screen": "3.2.0", "react-native-splash-screen": "3.2.0",

63
src/components/Overrides/CustomHTML.tsx
View file

@ -18,9 +18,13 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { Text } from 'react-native-paper'; import { Text, useTheme } from 'react-native-paper';
import HTML from 'react-native-render-html'; import HTML, {
import { GestureResponderEvent, Linking } from 'react-native'; CustomRendererProps,
TBlock,
TText,
} from 'react-native-render-html';
import { Dimensions, GestureResponderEvent, Linking } from 'react-native';
type PropsType = { type PropsType = {
html: string; html: string;
@ -30,37 +34,54 @@ type PropsType = {
* Abstraction layer for Agenda component, using custom configuration * Abstraction layer for Agenda component, using custom configuration
*/ */
function CustomHTML(props: PropsType) { function CustomHTML(props: PropsType) {
const theme = useTheme();
const openWebLink = (_event: GestureResponderEvent, link: string) => { const openWebLink = (_event: GestureResponderEvent, link: string) => {
Linking.openURL(link); Linking.openURL(link);
}; };
const getBasicText = ( // Why is this so complex?? I just want to replace the default Text element with the one
_htmlAttribs: any, // from react-native-paper
children: any, // Might need to read the doc a bit more: https://meliorence.github.io/react-native-render-html/
_convertedCSSStyles: any, // For now this seems to work
passProps: any const getBasicText = (rendererProps: CustomRendererProps<TBlock>) => {
) => { let text: TText | undefined;
return <Text {...passProps}>{children}</Text>; if (rendererProps.tnode.children.length > 0) {
const phrasing = rendererProps.tnode.children[0];
if (phrasing.children.length > 0) {
text = phrasing.children[0] as TText;
}
}
if (text) {
return <Text>{text.data}</Text>;
} else {
return null;
}
}; };
const getListBullet = () => {
return <Text>- </Text>;
};
// Surround description with p to allow text styling if the description is not html
return ( return (
<HTML <HTML
html={`<p>${props.html}</p>`} // Surround description with p to allow text styling if the description is not html
source={{ html: `<p>${props.html}</p>` }}
// Use Paper Text instead of React
renderers={{ renderers={{
p: getBasicText, p: getBasicText,
li: getBasicText, li: getBasicText,
}} }}
listsPrefixesRenderers={{ // Sometimes we have images inside the text, just ignore them
ul: getListBullet, ignoredDomTags={['img']}
// Ignore text color
ignoredStyles={['color', 'backgroundColor']}
contentWidth={Dimensions.get('window').width - 50}
renderersProps={{
a: {
onPress: openWebLink,
},
ul: {
markerTextStyle: {
color: theme.colors.text,
},
},
}} }}
ignoredTags={['img']}
ignoredStyles={['color', 'background-color']}
onLinkPress={openWebLink}
/> />
); );
} }