diff --git a/package.json b/package.json index 7c3d25f..8f1b897 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.69.0", + "version": "1.70.0", "main": "src/index.ts", "repository": "git@github.com:observation/react-native-components.git", "author": "Observation.org", diff --git a/src/components/RenderHtmlWrapper.tsx b/src/components/RenderHtmlWrapper.tsx index e53f268..d4d4d85 100644 --- a/src/components/RenderHtmlWrapper.tsx +++ b/src/components/RenderHtmlWrapper.tsx @@ -10,7 +10,7 @@ import htmlStyle from '../styles/html' import textStyle from '../styles/text' import theme from '../styles/theme' -export const imgRenderer = ({ tnode }: { tnode: TBlock }) => { +const imgRenderer = ({ tnode }: { tnode: TBlock }) => { const { src, alt } = tnode.attributes Log.debug('RenderHtmlWrapper:imgRenderer', src, alt) if (!src) { @@ -19,7 +19,7 @@ export const imgRenderer = ({ tnode }: { tnode: TBlock }) => { return } -export const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps) => ( +const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps) => ( ) -export const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererProps) => ( +const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererProps) => ( <> {props.tnode.children.map((item, i) => ( @@ -40,7 +40,7 @@ export const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererPr ) -const renderers = { +const defaultRenderers = { img: imgRenderer, ol: olRenderer, ul: ulRenderer, @@ -57,19 +57,26 @@ const systemFonts = [...defaultSystemFonts, 'Ubuntu'] const RenderHtmlWrapper = ({ contentWidth = Dimensions.get('window').width - 2 * theme.margin.common, renderersProps = defaultRenderersProps, + renderers: customRenderers = {}, baseStyle = textStyle.body, ...props -}: RenderHTMLProps) => ( - -) +}: RenderHTMLProps) => { + const mergedRenderers = { + ...defaultRenderers, + ...customRenderers, + } + return ( + + ) +} export default RenderHtmlWrapper diff --git a/src/components/__tests__/RenderHtmlWrapper.test.tsx b/src/components/__tests__/RenderHtmlWrapper.test.tsx index e9a3006..32e621c 100644 --- a/src/components/__tests__/RenderHtmlWrapper.test.tsx +++ b/src/components/__tests__/RenderHtmlWrapper.test.tsx @@ -20,6 +20,24 @@ describe('RenderHtmlWrapper', () => { }) }) + describe('Override renderer', () => { + test('Override ol', () => { + const html = '
    \n
  1. Ein
    2. \n
  2. Zwei
    3. \n
  3. Drei
    4. \n
' + const renderers = { ol: () => <> } + const { toJSON, queryByText } = render() + expect(queryByText('Ein')).toBeFalsy() + expect(toJSON()).toMatchSnapshot() + }) + + test('Override ul does not affect ol', () => { + const html = '
    \n
  1. Ein
    2. \n
  2. Zwei
    3. \n
  3. Drei
    4. \n
' + const renderers = { ul: () => <> } + const { toJSON, queryByText } = render() + expect(queryByText('Ein')).toBeTruthy() + expect(toJSON()).toMatchSnapshot() + }) + }) + describe('Custom ordered list renderer', () => { test('Normal renderer', () => { const html = '
    \n
  1. Ein
    2. \n
  2. Zwei
    3. \n
  3. Drei
    4. \n
' diff --git a/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap b/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap index 9b17ff5..c5d9a10 100644 --- a/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap @@ -1456,3 +1456,336 @@ exports[`RenderHtmlWrapper Rendering Custom unordered list Normal render 1`] = ` `; + +exports[`RenderHtmlWrapper Rendering Override renderer Override ol 1`] = ` + + + +`; + +exports[`RenderHtmlWrapper Rendering Override renderer Override ul does not affect ol 1`] = ` + + + + + + + 1.  + + + + + + Ein + + + + + + + + 2.  + + + + + + Zwei + + + + + + + + 3.  + + + + + + Drei + + + + + + + +`;