From 5b4bee0fd9f5a512c46bd49c991b26be63d0db93 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 18 Feb 2021 19:16:06 -0300 Subject: [PATCH 01/94] chore(heuristic-table): add release-it config file --- packages/heuristic-table-plugin/.release-it.js | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/heuristic-table-plugin/.release-it.js diff --git a/packages/heuristic-table-plugin/.release-it.js b/packages/heuristic-table-plugin/.release-it.js new file mode 100644 index 0000000..fc91046 --- /dev/null +++ b/packages/heuristic-table-plugin/.release-it.js @@ -0,0 +1,3 @@ +const name = require('./package.json').name; +const configureRelease = require("release-config"); +module.exports = configureRelease(name); From cd435f98ccbb92a4f6841c664b72917f834ced1e Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 18 Feb 2021 19:18:20 -0300 Subject: [PATCH 02/94] chore: release @native-html/heuristic-table-plugin@0.1.0 --- packages/heuristic-table-plugin/CHANGELOG.md | 7 +++++++ packages/heuristic-table-plugin/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 packages/heuristic-table-plugin/CHANGELOG.md diff --git a/packages/heuristic-table-plugin/CHANGELOG.md b/packages/heuristic-table-plugin/CHANGELOG.md new file mode 100644 index 0000000..c8d91c9 --- /dev/null +++ b/packages/heuristic-table-plugin/CHANGELOG.md @@ -0,0 +1,7 @@ +# 0.1.0 (2021-02-18) + + +### Features + +* **heuristic-table:** new 100% native table plugin ([b1ea3f6](https://github.com/native-html/plugins/commit/b1ea3f696cb3f65c9f7cbd56036ab34d1ae08a09)) + diff --git a/packages/heuristic-table-plugin/package.json b/packages/heuristic-table-plugin/package.json index 9ad1ade..3e0e4e0 100644 --- a/packages/heuristic-table-plugin/package.json +++ b/packages/heuristic-table-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@native-html/heuristic-table-plugin", - "version": "0.0.0", + "version": "0.1.0", "description": "🔠 A 100% native component using heuristics to render tables in react-native-render-html", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", From 690cee56f67846c81841f393be7daeb6a01b6777 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 18 Feb 2021 19:27:20 -0300 Subject: [PATCH 03/94] docs: add heuristic-table-plugin in root README --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index f253df4..05148c5 100644 --- a/README.md +++ b/README.md @@ -2,18 +2,18 @@ [![](https://img.shields.io/discord/736906960041148476?label=discord)](https://discord.gg/3B9twTMEzb) - ## Packages -| Package | Release | Build Status | Coverage | -| ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [@native-html/table-plugin](packages/table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/table-plugin)](https://www.npmjs.com/package/@native-html/table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=table-plugin)](https://codecov.io/gh/native-html/plugins?flag=table-plugin) | -| [@native-html/iframe-plugin](packages/iframe-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/iframe-plugin)](https://www.npmjs.com/package/@native-html/iframe-plugin) | [![CI](https://github.com/native-html/plugins/workflows/iframe/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aiframe) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=iframe-plugin)](https://codecov.io/gh/native-html/plugins?flag=iframe-plugin) | +| Package | Release | Build Status | Coverage | +| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [@native-html/iframe-plugin](packages/iframe-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/iframe-plugin)](https://www.npmjs.com/package/@native-html/iframe-plugin) | [![CI](https://github.com/native-html/plugins/workflows/iframe/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aiframe) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=iframe-plugin)](https://codecov.io/gh/native-html/plugins?flag=iframe-plugin) | +| [@native-html/heuristic-table-plugin](packages/heuristic-table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/heuristic-table-plugin)](https://www.npmjs.com/package/@native-html/heuristic-table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=heuristic-table-plugin)](https://codecov.io/gh/native-html/plugins?flag=heuristic-table-plugin) | +| [@native-html/table-plugin](packages/table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/table-plugin)](https://www.npmjs.com/package/@native-html/table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=table-plugin)](https://codecov.io/gh/native-html/plugins?flag=table-plugin) | -## Compat Table +## Plugins Compat Table -| react-native-render-html | @native-html/table-plugin | @native-html/iframe-plugin | -| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| ≥ 4.2.1 < 5.0.0 | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/4.x#readme)) | _No Plugin, iframes were rendered internally_ | -| ≥ 5.0.0 < 6.0.0 | 3.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/table-plugin#readme)) | 1.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/iframe-plugin#readme)) | -| ≥ 6.0.0 | 4.x ([documentation](https://github.com/native-html/plugins/tree/@native-html/table-plugin@4.0.3/packages/table-plugin#readme))
5.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/table-plugin#readme)) | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/iframe-plugin#readme)) | +| react-native-render-html | iframe | table | heuristic-table | +| ------------------------ | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | +| ≥ 4.2.1 < 5.0.0 | _No Plugin, iframes were rendered internally_ | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/4.x#readme)) | _No Plugin_ | +| ≥ 5.0.0 < 6.0.0 | 1.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/iframe-plugin#readme)) | 3.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/table-plugin#readme)) | _No Plugin_ | +| ≥ 6.0.0 | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/iframe-plugin#readme)) | 4.x ([documentation](https://github.com/native-html/plugins/tree/@native-html/table-plugin@4.0.3/packages/table-plugin#readme))
5.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/table-plugin#readme)) | 0.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/heuristic-table-plugin#readme)) | From bfecb1f2c434575bc66f1d8885d84d9ece0a1b12 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 18 Feb 2021 20:22:42 -0300 Subject: [PATCH 04/94] docs: fix links to workflows --- README.md | 10 +++++----- packages/heuristic-table-plugin/README.md | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 05148c5..14901ed 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,11 @@ ## Packages -| Package | Release | Build Status | Coverage | -| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [@native-html/iframe-plugin](packages/iframe-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/iframe-plugin)](https://www.npmjs.com/package/@native-html/iframe-plugin) | [![CI](https://github.com/native-html/plugins/workflows/iframe/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aiframe) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=iframe-plugin)](https://codecov.io/gh/native-html/plugins?flag=iframe-plugin) | -| [@native-html/heuristic-table-plugin](packages/heuristic-table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/heuristic-table-plugin)](https://www.npmjs.com/package/@native-html/heuristic-table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=heuristic-table-plugin)](https://codecov.io/gh/native-html/plugins?flag=heuristic-table-plugin) | -| [@native-html/table-plugin](packages/table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/table-plugin)](https://www.npmjs.com/package/@native-html/table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=table-plugin)](https://codecov.io/gh/native-html/plugins?flag=table-plugin) | +| Package | Release | Build Status | Coverage | +| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [@native-html/iframe-plugin](packages/iframe-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/iframe-plugin)](https://www.npmjs.com/package/@native-html/iframe-plugin) | [![CI](https://github.com/native-html/plugins/workflows/iframe/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aiframe) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=iframe-plugin)](https://codecov.io/gh/native-html/plugins?flag=iframe-plugin) | +| [@native-html/heuristic-table-plugin](packages/heuristic-table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/heuristic-table-plugin)](https://www.npmjs.com/package/@native-html/heuristic-table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/heuristic-table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aheuristic-table) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=heuristic-table-plugin)](https://codecov.io/gh/native-html/plugins?flag=heuristic-table-plugin) | +| [@native-html/table-plugin](packages/table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/table-plugin)](https://www.npmjs.com/package/@native-html/table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=table-plugin)](https://codecov.io/gh/native-html/plugins?flag=table-plugin) | ## Plugins Compat Table diff --git a/packages/heuristic-table-plugin/README.md b/packages/heuristic-table-plugin/README.md index 66ab653..a8e6b42 100644 --- a/packages/heuristic-table-plugin/README.md +++ b/packages/heuristic-table-plugin/README.md @@ -19,9 +19,9 @@ alt="codecov" /> CI From 12331044fd9f21e443086ca7bd50d37c3ceaa8eb Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Fri, 19 Feb 2021 10:05:25 -0300 Subject: [PATCH 05/94] fix: force responsive layout when scalesPageToFit = false (1:1) When `scalesPageToFit` is disabled, the viewport should not be scaled automatically by the WebView. --- packages/iframe-plugin/src/HTMLIframe.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/iframe-plugin/src/HTMLIframe.tsx b/packages/iframe-plugin/src/HTMLIframe.tsx index dc549cc..3b8e106 100644 --- a/packages/iframe-plugin/src/HTMLIframe.tsx +++ b/packages/iframe-plugin/src/HTMLIframe.tsx @@ -100,13 +100,11 @@ export default function HTMLIframe({ }: HTMLIframeProps) { const scaleFeature = useMemo( () => - scalesPageToFit - ? new ForceResponsiveViewportFeature({ - initScale: scaleFactor, - maxScale: scaleFactor, - minScale: scaleFactor - }) - : null, + new ForceResponsiveViewportFeature({ + initScale: scalesPageToFit ? scaleFactor : 1, + maxScale: scalesPageToFit ? scaleFactor : 1, + minScale: scalesPageToFit ? scaleFactor : 1 + }), [scaleFactor, scalesPageToFit] ); const onDOMLinkPress = useCallback( From 2166dc6139065d19a8d1bf914f9bad055c59389b Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Fri, 19 Feb 2021 10:43:19 -0300 Subject: [PATCH 06/94] feat(iframe): new `removeBodySpacing` and `injectedCSSStyles` options --- .../iframe-plugin/etc/iframe-plugin.api.md | 4 +- packages/iframe-plugin/src/HTMLIframe.tsx | 77 ++++++++++++++++--- 2 files changed, 69 insertions(+), 12 deletions(-) diff --git a/packages/iframe-plugin/etc/iframe-plugin.api.md b/packages/iframe-plugin/etc/iframe-plugin.api.md index eef5ecf..1def2ae 100644 --- a/packages/iframe-plugin/etc/iframe-plugin.api.md +++ b/packages/iframe-plugin/etc/iframe-plugin.api.md @@ -17,7 +17,7 @@ import type { TBlock } from '@native-html/transient-render-engine'; import { ViewStyle } from 'react-native'; // @public -export function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, scalesPageToFit }: HTMLIframeProps): React_2.ReactElement React_2.ReactElement React_2.Component)> | null) | (new (props: any) => React_2.Component)>; +export function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): React_2.ReactElement React_2.ReactElement React_2.Component)> | null) | (new (props: any) => React_2.Component)>; // @public export interface HTMLIframeProps extends IframeConfig { @@ -35,6 +35,8 @@ export interface HTMLIframeProps extends IframeConfig { // @public export interface IframeConfig { + injectedCSSStyles?: string; + removeBodySpacing?: boolean; scalesPageToFit?: boolean; webViewProps?: any; } diff --git a/packages/iframe-plugin/src/HTMLIframe.tsx b/packages/iframe-plugin/src/HTMLIframe.tsx index 3b8e106..857d259 100644 --- a/packages/iframe-plugin/src/HTMLIframe.tsx +++ b/packages/iframe-plugin/src/HTMLIframe.tsx @@ -3,7 +3,8 @@ import { HandleLinkPressFeature, ForceResponsiveViewportFeature, LinkPressTarget, - useWebshell + useWebshell, + FeatureBuilder } from '@formidable-webview/webshell'; import { StyleProp, ViewStyle } from 'react-native'; import { @@ -30,6 +31,18 @@ export interface IframeConfig { * @defaultvalue false */ scalesPageToFit?: boolean; + + /** + * When `true`, a stylesheet will be inserted in the `WebView` to remove + * padding and margins for the `body` element. + */ + removeBodySpacing?: boolean; + + /** + * When defined, the provided CSS will be injected in a `style` element. + */ + injectedCSSStyles?: string; + /** * Any props you'd like to pass to the `WebView` component. * @@ -82,6 +95,30 @@ export interface HTMLIframeProps extends IframeConfig { scaleFactor: number; } +interface InjectStyleFeatureOptions { + css: string; +} + +const InjectStyleFeatureOptions = new FeatureBuilder( + { + defaultOptions: { css: '' }, + identifier: '@native-html/iframe-strip-body-spacing', + script: ` +function InjectStyleFeature(context) { + var options = context.options || {}, + css = options.css || "", + head = document.head || document.getElementsByTagName("head")[0], + style = document.createElement("style"); + style.type = 'text/css'; + style.appendChild(document.createTextNode(css)); + head.appendChild(style); +}` + } +).build(); + +const RM_BODY_SPACING_CSS = + 'body{padding: 0 !important; margin: 0 !important;}'; + const features = [new HandleLinkPressFeature({ preventDefault: true })]; /** @@ -96,24 +133,42 @@ export default function HTMLIframe({ style, onLinkPress, scaleFactor, + injectedCSSStyles, + removeBodySpacing, scalesPageToFit = false }: HTMLIframeProps) { - const scaleFeature = useMemo( - () => - new ForceResponsiveViewportFeature({ - initScale: scalesPageToFit ? scaleFactor : 1, - maxScale: scalesPageToFit ? scaleFactor : 1, - minScale: scalesPageToFit ? scaleFactor : 1 - }), - [scaleFactor, scalesPageToFit] - ); const onDOMLinkPress = useCallback( (event: LinkPressTarget) => onLinkPress?.apply(null, linkPressTargetToOnDOMLinkPressArgs(event)), [onLinkPress] ); + const injectedCss = useMemo( + () => + ((removeBodySpacing && RM_BODY_SPACING_CSS) || '').concat( + injectedCSSStyles || '' + ), + [injectedCSSStyles, removeBodySpacing] + ); + const assembledFeatures = useMemo(() => { + const feats = [ + ...features, + new ForceResponsiveViewportFeature({ + initScale: scalesPageToFit ? scaleFactor : 1, + maxScale: scalesPageToFit ? scaleFactor : 1, + minScale: scalesPageToFit ? scaleFactor : 1 + }) + ]; + if (injectedCss) { + feats.push( + new InjectStyleFeatureOptions({ + css: injectedCss + }) as any + ); + } + return feats; + }, [injectedCss, scaleFactor, scalesPageToFit]); const webViewProps = useWebshell({ - features: [...features, scaleFeature as any], + features: assembledFeatures, props: { ...userWebViewProps, onDOMLinkPress, From 34f5839d79ee20651e76c505e30400022688ca3a Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Fri, 19 Feb 2021 11:26:01 -0300 Subject: [PATCH 07/94] docs(iframe): enhance documentation --- packages/iframe-plugin/README.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/iframe-plugin/README.md b/packages/iframe-plugin/README.md index b44e214..65628d1 100644 --- a/packages/iframe-plugin/README.md +++ b/packages/iframe-plugin/README.md @@ -66,7 +66,7 @@ yarn add @native-html/iframe-plugin react-native-webview - Supports `onLinkPress`; - Supports `defaultWebViewProps`; -- Compliance with [RFC001](https://github.com/archriss/react-native-render-html/blob/master/rfc/001-A-deterministic-approach-to-embedded-content-scaling.adoc#L13): scales to available width; +- Compliance with [RFC001](https://github.com/meliorence/react-native-render-html/blob/master/rfc/001-A-deterministic-approach-to-embedded-content-scaling.adoc#L13): scales to available width; - Autoscale feature (adapt zoom level to available width! Disabled by default.); - A single renderer component exported as default, super easy to plug-in! - Compatible with `react-native-web` via [`@formidable-webview/web`](https://github.com/formidable-webview/ubiquitous/tree/master/packages/web#readme) @@ -77,10 +77,10 @@ yarn add @native-html/iframe-plugin react-native-webview ## Compat Table -| react-native-render-html | @native-html/iframe-plugin | -| ------------------------ | --------------------------------------------------------------------------------------------------------- | -| ≥ 5.0.0 < 6.0.0 | 1.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/iframe-plugin#readme)) | -| ≥ 6.0.0 | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/iframe-plugin#readme) | +| react-native-render-html | @native-html/iframe-plugin | +| ------------------------ | ------------------------------------------------------------------- | +| ≥ 5.0.0 < 6.0.0 | 1.x ([documentation](/tree/rnrh/5.x/packages/iframe-plugin#readme)) | +| ≥ 6.0.0 | 2.x ([documentation](/tree/rnrh/6.x/packages/iframe-plugin#readme) | ## Minimal working example @@ -104,7 +104,14 @@ const renderers = { ``` -## Autoscale feature +## Customizing + +To customize the behavior of this renderer, you can pass a config object +to the `renderersProps.iframe` prop of `RenderHTML` component. + +See the documentation for this object here: [`IframeConfig`](docs/iframe-plugin.iframeconfig.md). + +## Zoom on the autoscale feature When `scalesPageToFit` is set to true, if the iframe width (as determined by the `width` element attribute) is greater than the available width (as determined @@ -113,7 +120,7 @@ be zoomed out by just the right amount to have no horizontal cropping. This is equivalent to `resizeMode: 'contain'` for images. See example below with `scalesPageToFit` enabled (left) and disabled (right): -![](https://github.com/native-html/plugins/blob/master/images/scalesPageToFit.jpg) +![](/blob/master/images/scalesPageToFit.jpg) ## Customizing the renderer From e2cb5c7f0536d2371f7802b8166813b21151b9e0 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Fri, 19 Feb 2021 11:30:46 -0300 Subject: [PATCH 08/94] docs(iframe): generate documentation for this plugin on builds --- packages/iframe-plugin/README.md | 4 +++ .../docs/iframe-plugin.htmliframe.md | 24 +++++++++++++++++ ...rame-plugin.htmliframeprops.htmlattribs.md | 13 +++++++++ .../docs/iframe-plugin.htmliframeprops.md | 27 +++++++++++++++++++ ...rame-plugin.htmliframeprops.onlinkpress.md | 13 +++++++++ ...rame-plugin.htmliframeprops.scalefactor.md | 13 +++++++++ .../iframe-plugin.htmliframeprops.source.md | 16 +++++++++++ .../iframe-plugin.htmliframeprops.style.md | 13 +++++++++ .../iframe-plugin.htmliframeprops.webview.md | 13 +++++++++ ...ame-plugin.htmliframeprops.webviewprops.md | 13 +++++++++ ...e-plugin.iframeconfig.injectedcssstyles.md | 13 +++++++++ .../docs/iframe-plugin.iframeconfig.md | 23 ++++++++++++++++ ...e-plugin.iframeconfig.removebodyspacing.md | 13 +++++++++ ...ame-plugin.iframeconfig.scalespagetofit.md | 18 +++++++++++++ ...iframe-plugin.iframeconfig.webviewprops.md | 18 +++++++++++++ .../docs/iframe-plugin.iframemodel.md | 13 +++++++++ .../docs/iframe-plugin.iframerenderer.md | 13 +++++++++ packages/iframe-plugin/docs/iframe-plugin.md | 27 +++++++++++++++++++ .../docs/iframe-plugin.usehtmliframeprops.md | 25 +++++++++++++++++ packages/iframe-plugin/docs/index.md | 12 +++++++++ packages/iframe-plugin/package.json | 3 ++- 21 files changed, 326 insertions(+), 1 deletion(-) create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframe.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.htmlattribs.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.onlinkpress.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.scalefactor.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.source.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.style.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webview.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webviewprops.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframeconfig.injectedcssstyles.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframeconfig.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframeconfig.removebodyspacing.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframeconfig.scalespagetofit.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframeconfig.webviewprops.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframemodel.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.iframerenderer.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.md create mode 100644 packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md create mode 100644 packages/iframe-plugin/docs/index.md diff --git a/packages/iframe-plugin/README.md b/packages/iframe-plugin/README.md index 65628d1..4463ab4 100644 --- a/packages/iframe-plugin/README.md +++ b/packages/iframe-plugin/README.md @@ -143,3 +143,7 @@ const renderers = { // use "renderers" prop in your RenderHTML instance ``` + +## API Reference + +Documentation for all exports of this library [is available here](docs/iframe-plugin.md). diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframe.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframe.md new file mode 100644 index 0000000..bbbfa41 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframe.md @@ -0,0 +1,24 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframe](./iframe-plugin.htmliframe.md) + +## HTMLIframe() function + +A component to render iframes in react-native-render-html. + +Signature: + +```typescript +export default function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): React.ReactElement React.ReactElement React.Component)> | null) | (new (props: any) => React.Component)>; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| { WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit } | [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) | | + +Returns: + +React.ReactElement<any, string \| ((props: any) => React.ReactElement<any, string \| any \| (new (props: any) => React.Component<any, any, any>)> \| null) \| (new (props: any) => React.Component<any, any, any>)> + diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.htmlattribs.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.htmlattribs.md new file mode 100644 index 0000000..433a0c0 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.htmlattribs.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [htmlAttribs](./iframe-plugin.htmliframeprops.htmlattribs.md) + +## HTMLIframeProps.htmlAttribs property + +Html attributes for this iframe node. + +Signature: + +```typescript +htmlAttribs: HtmlAttributesDictionary; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.md new file mode 100644 index 0000000..d316ba8 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.md @@ -0,0 +1,27 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) + +## HTMLIframeProps interface + +Props for the HTMLIframe component. + +Signature: + +```typescript +export interface HTMLIframeProps extends IframeConfig +``` +Extends: [IframeConfig](./iframe-plugin.iframeconfig.md) + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [htmlAttribs](./iframe-plugin.htmliframeprops.htmlattribs.md) | HtmlAttributesDictionary | Html attributes for this iframe node. | +| [onLinkPress?](./iframe-plugin.htmliframeprops.onlinkpress.md) | RenderHTMLProps\['onLinkPress'\] | (Optional) Handle link press events. | +| [scaleFactor](./iframe-plugin.htmliframeprops.scalefactor.md) | number | When scalesPageToFit is enabled, scales the WebView zoom level to make sure the viewport fits contentWidth. | +| [source](./iframe-plugin.htmliframeprops.source.md) | { uri?: string; html?: string; } | The source for the iframe. | +| [style](./iframe-plugin.htmliframeprops.style.md) | StyleProp<ViewStyle> | Container style. | +| [WebView](./iframe-plugin.htmliframeprops.webview.md) | ComponentType<WebViewProps> | The WebView Component you wish to use. | +| [webViewProps?](./iframe-plugin.htmliframeprops.webviewprops.md) | WebViewProps | (Optional) Props to be passed to the WebView component; | + diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.onlinkpress.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.onlinkpress.md new file mode 100644 index 0000000..031f12f --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.onlinkpress.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [onLinkPress](./iframe-plugin.htmliframeprops.onlinkpress.md) + +## HTMLIframeProps.onLinkPress property + +Handle link press events. + +Signature: + +```typescript +onLinkPress?: RenderHTMLProps['onLinkPress']; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.scalefactor.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.scalefactor.md new file mode 100644 index 0000000..b30dda3 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.scalefactor.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [scaleFactor](./iframe-plugin.htmliframeprops.scalefactor.md) + +## HTMLIframeProps.scaleFactor property + +When scalesPageToFit is enabled, scales the WebView zoom level to make sure the viewport fits contentWidth. + +Signature: + +```typescript +scaleFactor: number; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.source.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.source.md new file mode 100644 index 0000000..804c010 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.source.md @@ -0,0 +1,16 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [source](./iframe-plugin.htmliframeprops.source.md) + +## HTMLIframeProps.source property + +The source for the iframe. + +Signature: + +```typescript +source: { + uri?: string; + html?: string; + }; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.style.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.style.md new file mode 100644 index 0000000..00417d8 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.style.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [style](./iframe-plugin.htmliframeprops.style.md) + +## HTMLIframeProps.style property + +Container style. + +Signature: + +```typescript +style: StyleProp; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webview.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webview.md new file mode 100644 index 0000000..409a932 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webview.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [WebView](./iframe-plugin.htmliframeprops.webview.md) + +## HTMLIframeProps.WebView property + +The `WebView` Component you wish to use. + +Signature: + +```typescript +WebView: ComponentType; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webviewprops.md b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webviewprops.md new file mode 100644 index 0000000..e1187ce --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webviewprops.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [webViewProps](./iframe-plugin.htmliframeprops.webviewprops.md) + +## HTMLIframeProps.webViewProps property + +Props to be passed to the `WebView` component; + +Signature: + +```typescript +webViewProps?: WebViewProps; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.injectedcssstyles.md b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.injectedcssstyles.md new file mode 100644 index 0000000..753df17 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.injectedcssstyles.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [injectedCSSStyles](./iframe-plugin.iframeconfig.injectedcssstyles.md) + +## IframeConfig.injectedCSSStyles property + +When defined, the provided CSS will be injected in a `style` element. + +Signature: + +```typescript +injectedCSSStyles?: string; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.md b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.md new file mode 100644 index 0000000..92fb857 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.md @@ -0,0 +1,23 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) + +## IframeConfig interface + +Configuration options for the HTMLIframe component. You can pass those options through `renderersProps.iframe` HTML prop. + +Signature: + +```typescript +export interface IframeConfig +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [injectedCSSStyles?](./iframe-plugin.iframeconfig.injectedcssstyles.md) | string | (Optional) When defined, the provided CSS will be injected in a style element. | +| [removeBodySpacing?](./iframe-plugin.iframeconfig.removebodyspacing.md) | boolean | (Optional) When true, a stylesheet will be inserted in the WebView to remove padding and margins for the body element. | +| [scalesPageToFit?](./iframe-plugin.iframeconfig.scalespagetofit.md) | boolean | (Optional) When the iframe attribute width is wider than the contentWidth, scales down the viewport so that it doesn't overflows horizontally. | +| [webViewProps?](./iframe-plugin.iframeconfig.webviewprops.md) | any | (Optional) Any props you'd like to pass to the WebView component. | + diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.removebodyspacing.md b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.removebodyspacing.md new file mode 100644 index 0000000..a4845ad --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.removebodyspacing.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [removeBodySpacing](./iframe-plugin.iframeconfig.removebodyspacing.md) + +## IframeConfig.removeBodySpacing property + +When `true`, a stylesheet will be inserted in the `WebView` to remove padding and margins for the `body` element. + +Signature: + +```typescript +removeBodySpacing?: boolean; +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.scalespagetofit.md b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.scalespagetofit.md new file mode 100644 index 0000000..810d74e --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.scalespagetofit.md @@ -0,0 +1,18 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [scalesPageToFit](./iframe-plugin.iframeconfig.scalespagetofit.md) + +## IframeConfig.scalesPageToFit property + +When the iframe attribute width is wider than the contentWidth, scales down the viewport so that it doesn't overflows horizontally. + +Signature: + +```typescript +scalesPageToFit?: boolean; +``` + +## Remarks + +Although it looks like the eponymous `WebView` prop, it works both on iOS and Android. + diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.webviewprops.md b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.webviewprops.md new file mode 100644 index 0000000..1543f82 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.webviewprops.md @@ -0,0 +1,18 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [webViewProps](./iframe-plugin.iframeconfig.webviewprops.md) + +## IframeConfig.webViewProps property + +Any props you'd like to pass to the `WebView` component. + +Signature: + +```typescript +webViewProps?: any; +``` + +## Remarks + +`source` and `javascriptEnabled` will be ignored and overriden. + diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframemodel.md b/packages/iframe-plugin/docs/iframe-plugin.iframemodel.md new file mode 100644 index 0000000..cd6fa52 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframemodel.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [iframeModel](./iframe-plugin.iframemodel.md) + +## iframeModel variable + +The model to attach to custom iframe renderers. + +Signature: + +```typescript +iframeModel: HTMLElementModel<'iframe', HTMLContentModel.block> +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.iframerenderer.md b/packages/iframe-plugin/docs/iframe-plugin.iframerenderer.md new file mode 100644 index 0000000..9d3e363 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.iframerenderer.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeRenderer](./iframe-plugin.iframerenderer.md) + +## IframeRenderer variable + +The renderer component for the iframe element. This renderer is fully scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`. It also features `onLinkPress`. + +Signature: + +```typescript +IframeRenderer: CustomBlockRenderer +``` diff --git a/packages/iframe-plugin/docs/iframe-plugin.md b/packages/iframe-plugin/docs/iframe-plugin.md new file mode 100644 index 0000000..bb45b9b --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.md @@ -0,0 +1,27 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) + +## iframe-plugin package + +## Functions + +| Function | Description | +| --- | --- | +| [HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit })](./iframe-plugin.htmliframe.md) | A component to render iframes in react-native-render-html. | +| [useHtmlIframeProps({ key, style, tnode }, iframeConfig)](./iframe-plugin.usehtmliframeprops.md) | Extract props for the HTMLIframe component from renderer function arguments. This function is especially usefull for custom iframe renderers. | + +## Interfaces + +| Interface | Description | +| --- | --- | +| [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) | Props for the HTMLIframe component. | +| [IframeConfig](./iframe-plugin.iframeconfig.md) | Configuration options for the HTMLIframe component. You can pass those options through renderersProps.iframe HTML prop. | + +## Variables + +| Variable | Description | +| --- | --- | +| [iframeModel](./iframe-plugin.iframemodel.md) | The model to attach to custom iframe renderers. | +| [IframeRenderer](./iframe-plugin.iframerenderer.md) | The renderer component for the iframe element. This renderer is fully scalable, and will adjust to contentWidth and computeEmbeddedMaxWidth. It also features onLinkPress. | + diff --git a/packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md b/packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md new file mode 100644 index 0000000..272f475 --- /dev/null +++ b/packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md @@ -0,0 +1,25 @@ + + +[Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [useHtmlIframeProps](./iframe-plugin.usehtmliframeprops.md) + +## useHtmlIframeProps() function + +Extract props for the HTMLIframe component from renderer function arguments. This function is especially usefull for custom iframe renderers. + +Signature: + +```typescript +export default function useHtmlIframeProps({ key, style, tnode }: CustomTagRendererProps, iframeConfig?: IframeConfig): HTMLIframeProps | null; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| { key, style, tnode } | CustomTagRendererProps<TBlock> | | +| iframeConfig | [IframeConfig](./iframe-plugin.iframeconfig.md) | Override config options. | + +Returns: + +[HTMLIframeProps](./iframe-plugin.htmliframeprops.md) \| null + diff --git a/packages/iframe-plugin/docs/index.md b/packages/iframe-plugin/docs/index.md new file mode 100644 index 0000000..75e94fc --- /dev/null +++ b/packages/iframe-plugin/docs/index.md @@ -0,0 +1,12 @@ + + +[Home](./index.md) + +## API Reference + +## Packages + +| Package | Description | +| --- | --- | +| [@native-html/iframe-plugin](./iframe-plugin.md) | | + diff --git a/packages/iframe-plugin/package.json b/packages/iframe-plugin/package.json index c777cb7..d9ef051 100644 --- a/packages/iframe-plugin/package.json +++ b/packages/iframe-plugin/package.json @@ -16,9 +16,10 @@ "test:jest": "jest src/", "test:ts": "tsc --noEmit", "test:lint": "eslint --ext ts,tsx src/", - "build": "yarn build:source && yarn build:defs", + "build": "yarn build:source && yarn build:defs && yarn build:doc", "build:source": "bob build", "build:defs": "api-extractor run --local --verbose", + "build:doc": "api-documenter markdown --input-folder temp --output-folder ./docs", "prepack": "yarn run build" }, "keywords": [ From 0dd874cceff1329ceb852e6c8a00135d9b7f6a76 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Fri, 19 Feb 2021 11:34:13 -0300 Subject: [PATCH 09/94] chore: release @native-html/iframe-plugin@2.2.0 --- packages/iframe-plugin/CHANGELOG.md | 12 ++++++++++++ packages/iframe-plugin/package.json | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/iframe-plugin/CHANGELOG.md b/packages/iframe-plugin/CHANGELOG.md index 547c940..25c6002 100644 --- a/packages/iframe-plugin/CHANGELOG.md +++ b/packages/iframe-plugin/CHANGELOG.md @@ -1,3 +1,15 @@ +# [2.2.0](https://github.com/native-html/plugins/compare/@native-html/iframe-plugin@2.1.1...@native-html/iframe-plugin@2.2.0) (2021-02-19) + + +### Bug Fixes + +* force responsive layout when scalesPageToFit = false (1:1) ([1233104](https://github.com/native-html/plugins/commit/12331044fd9f21e443086ca7bd50d37c3ceaa8eb)) + + +### Features + +* **iframe:** new `removeBodySpacing` and `injectedCSSStyles` options ([2166dc6](https://github.com/native-html/plugins/commit/2166dc6139065d19a8d1bf914f9bad055c59389b)) + ## [2.1.1](https://github.com/native-html/plugins/compare/@native-html/iframe-plugin@2.1.0...@native-html/iframe-plugin@2.1.1) (2021-02-18) diff --git a/packages/iframe-plugin/package.json b/packages/iframe-plugin/package.json index d9ef051..535e252 100644 --- a/packages/iframe-plugin/package.json +++ b/packages/iframe-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@native-html/iframe-plugin", - "version": "2.1.1", + "version": "2.2.0", "description": "🌐 A WebView-based plugin to render iframes in react-native-render-html", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", From f808a13e16d54626c80f223ffb8360b561f6de25 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 09:52:58 -0300 Subject: [PATCH 10/94] build(deps): upgrade @formidable-webview/webshell to v2.4.0 --- packages/iframe-plugin/package.json | 2 +- packages/plugins-core/package.json | 2 +- packages/table-plugin/package.json | 2 +- yarn.lock | 14 +++++++------- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/iframe-plugin/package.json b/packages/iframe-plugin/package.json index 535e252..33d25cb 100644 --- a/packages/iframe-plugin/package.json +++ b/packages/iframe-plugin/package.json @@ -60,7 +60,7 @@ "typescript": "~4.1.3" }, "dependencies": { - "@formidable-webview/webshell": "^2.3.0", + "@formidable-webview/webshell": "^2.4.0", "@native-html/plugins-core": "workspace:*", "@types/prop-types": "^15.7.3", "prop-types": "^15.7.2" diff --git a/packages/plugins-core/package.json b/packages/plugins-core/package.json index 4cffb4e..51ad974 100644 --- a/packages/plugins-core/package.json +++ b/packages/plugins-core/package.json @@ -28,7 +28,7 @@ "@babel/plugin-transform-react-jsx": "^7.12.13", "@babel/preset-typescript": "^7.12.13", "@babel/runtime": "^7.12.13", - "@formidable-webview/webshell": "^2.3.0", + "@formidable-webview/webshell": "^2.4.0", "@microsoft/api-extractor": "7.13.1", "@release-it/conventional-changelog": "^2.0.0", "@testing-library/react-native": "^7.1.0", diff --git a/packages/table-plugin/package.json b/packages/table-plugin/package.json index ee15ef5..5b339c9 100644 --- a/packages/table-plugin/package.json +++ b/packages/table-plugin/package.json @@ -64,7 +64,7 @@ "typescript": "~4.1.3" }, "dependencies": { - "@formidable-webview/webshell": "2.3.0", + "@formidable-webview/webshell": "2.4.0", "@native-html/plugins-core": "workspace:*", "@types/prop-types": "^15.7.3", "prop-types": "^15.7.2" diff --git a/yarn.lock b/yarn.lock index a638ebb..e1c9a09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3015,13 +3015,13 @@ __metadata: languageName: node linkType: hard -"@formidable-webview/webshell@npm:2.3.0, @formidable-webview/webshell@npm:^2.3.0": - version: 2.3.0 - resolution: "@formidable-webview/webshell@npm:2.3.0" +"@formidable-webview/webshell@npm:2.4.0, @formidable-webview/webshell@npm:^2.4.0": + version: 2.4.0 + resolution: "@formidable-webview/webshell@npm:2.4.0" peerDependencies: react: "*" react-native: ">= 0.59.0" - checksum: d72595268e4156e1d213be729589f6016a1b0002df6fbdd8198a53204e1af6031354d6cbca8b20f43863f7a4bc9da5bf92a4833a9b920d5e11d11969e57f4c37 + checksum: 197de25275efa7e43bc6cc96de839a617f836c4702bc48bd205e4d0cbac64509f43ddf49792b6970f959e99651b06367ea96bf42c868aa148b58b97f7209f634 languageName: node linkType: hard @@ -3919,7 +3919,7 @@ __metadata: "@babel/runtime": ^7.12.13 "@formidable-webview/ersatz": ^2.1.2 "@formidable-webview/ersatz-testing": ^2.0.5 - "@formidable-webview/webshell": ^2.3.0 + "@formidable-webview/webshell": ^2.4.0 "@microsoft/api-documenter": ^7.12.7 "@microsoft/api-extractor": 7.13.1 "@native-html/plugins-core": "workspace:*" @@ -3960,7 +3960,7 @@ __metadata: "@babel/plugin-transform-react-jsx": ^7.12.13 "@babel/preset-typescript": ^7.12.13 "@babel/runtime": ^7.12.13 - "@formidable-webview/webshell": ^2.3.0 + "@formidable-webview/webshell": ^2.4.0 "@microsoft/api-extractor": 7.13.1 "@release-it/conventional-changelog": ^2.0.0 "@testing-library/react-native": ^7.1.0 @@ -4001,7 +4001,7 @@ __metadata: "@babel/runtime": ^7.12.13 "@formidable-webview/ersatz": ^2.1.2 "@formidable-webview/ersatz-testing": ^2.0.5 - "@formidable-webview/webshell": 2.3.0 + "@formidable-webview/webshell": 2.4.0 "@microsoft/api-documenter": ^7.12.7 "@microsoft/api-extractor": 7.13.1 "@native-html/plugins-core": "workspace:*" From 2851c384412e0ce8daf83ebbd5503dc8f4bad436 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 09:53:37 -0300 Subject: [PATCH 11/94] refactor(iframe): import `InjectStyleFeature` from latest webshell --- packages/iframe-plugin/src/HTMLIframe.tsx | 27 +++-------------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/packages/iframe-plugin/src/HTMLIframe.tsx b/packages/iframe-plugin/src/HTMLIframe.tsx index 857d259..f49377b 100644 --- a/packages/iframe-plugin/src/HTMLIframe.tsx +++ b/packages/iframe-plugin/src/HTMLIframe.tsx @@ -1,10 +1,10 @@ import React, { ComponentType, useCallback, useMemo } from 'react'; import { HandleLinkPressFeature, + InjectStyleFeature, ForceResponsiveViewportFeature, LinkPressTarget, - useWebshell, - FeatureBuilder + useWebshell } from '@formidable-webview/webshell'; import { StyleProp, ViewStyle } from 'react-native'; import { @@ -95,27 +95,6 @@ export interface HTMLIframeProps extends IframeConfig { scaleFactor: number; } -interface InjectStyleFeatureOptions { - css: string; -} - -const InjectStyleFeatureOptions = new FeatureBuilder( - { - defaultOptions: { css: '' }, - identifier: '@native-html/iframe-strip-body-spacing', - script: ` -function InjectStyleFeature(context) { - var options = context.options || {}, - css = options.css || "", - head = document.head || document.getElementsByTagName("head")[0], - style = document.createElement("style"); - style.type = 'text/css'; - style.appendChild(document.createTextNode(css)); - head.appendChild(style); -}` - } -).build(); - const RM_BODY_SPACING_CSS = 'body{padding: 0 !important; margin: 0 !important;}'; @@ -160,7 +139,7 @@ export default function HTMLIframe({ ]; if (injectedCss) { feats.push( - new InjectStyleFeatureOptions({ + new InjectStyleFeature({ css: injectedCss }) as any ); From d0f15298cd6c17799f87d87ff25bb8b6433193bd Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 14:49:12 -0300 Subject: [PATCH 12/94] feat(heuristic-table): export hooks to reuse internal rendering logic --- packages/heuristic-table-plugin/README.md | 73 +++++++++++++++++- .../docs/heuristic-table-plugin.htmltable.md | 24 ++++++ ...stic-table-plugin.htmltableprops.config.md | 11 +++ ...able-plugin.htmltableprops.contentwidth.md | 11 +++ .../heuristic-table-plugin.htmltableprops.md | 23 ++++++ ...ristic-table-plugin.htmltableprops.root.md | 11 +++ .../docs/heuristic-table-plugin.md | 19 +++++ ...le-plugin.tablecellpropsfromparent.cell.md | 11 +++ ...-plugin.tablecellpropsfromparent.config.md | 11 +++ ...c-table-plugin.tablecellpropsfromparent.md | 22 ++++++ ...lugin.tableflexcolumncontainer.children.md | 11 +++ ...c-table-plugin.tableflexcolumncontainer.md | 21 +++++ ...le-plugin.tableflexcolumncontainer.type.md | 11 +++ ...e-plugin.tableflexrowcontainer.children.md | 11 +++ ...stic-table-plugin.tableflexrowcontainer.md | 21 +++++ ...table-plugin.tableflexrowcontainer.type.md | 11 +++ .../docs/heuristic-table-plugin.tablemodel.md | 12 +++ .../heuristic-table-plugin.tablerenderer.md | 13 ++++ ...uristic-table-plugin.tableroot.children.md | 11 +++ .../docs/heuristic-table-plugin.tableroot.md | 20 +++++ .../heuristic-table-plugin.tableroot.type.md | 11 +++ .../docs/heuristic-table-plugin.tdmodel.md | 12 +++ .../docs/heuristic-table-plugin.tdrenderer.md | 13 ++++ .../docs/heuristic-table-plugin.thmodel.md | 12 +++ .../docs/heuristic-table-plugin.threnderer.md | 13 ++++ ...stic-table-plugin.usehtmltablecellprops.md | 24 ++++++ ...euristic-table-plugin.usehtmltableprops.md | 29 +++++++ .../etc/heuristic-table-plugin.api.md | 76 +++++++++++++++++++ packages/heuristic-table-plugin/package.json | 2 +- .../heuristic-table-plugin/src/HTMLTable.tsx | 27 +++++++ .../heuristic-table-plugin/src/RenderCell.tsx | 45 ----------- .../src/RenderTable.tsx | 64 ---------------- .../heuristic-table-plugin/src/RenderTd.tsx | 20 ----- .../heuristic-table-plugin/src/RenderTh.ts | 20 ----- .../src/TableRenderer.ts | 27 +++++++ .../heuristic-table-plugin/src/TdRenderer.tsx | 22 ++++++ .../heuristic-table-plugin/src/ThRenderer.ts | 22 ++++++ .../src/{RenderTree.tsx => TreeRenderer.tsx} | 12 +-- .../src/helpers/createRenderTree.ts | 22 +++--- packages/heuristic-table-plugin/src/index.ts | 31 +++++--- .../src/models/index.ts | 3 + .../src/models/tableModel.ts | 12 +++ .../src/models/tdModel.ts | 11 +++ .../src/models/thModel.ts | 11 +++ .../src/shared-types.ts | 56 +++++++++++--- .../src/useHtmlTableCellProps.ts | 39 ++++++++++ .../src/useHtmlTableProps.ts | 65 ++++++++++++++++ 47 files changed, 870 insertions(+), 189 deletions(-) create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.config.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.cell.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.config.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.children.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.type.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.children.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.type.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablemodel.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablerenderer.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.children.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.type.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdmodel.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.thmodel.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltablecellprops.md create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md create mode 100644 packages/heuristic-table-plugin/src/HTMLTable.tsx delete mode 100644 packages/heuristic-table-plugin/src/RenderCell.tsx delete mode 100644 packages/heuristic-table-plugin/src/RenderTable.tsx delete mode 100644 packages/heuristic-table-plugin/src/RenderTd.tsx delete mode 100644 packages/heuristic-table-plugin/src/RenderTh.ts create mode 100644 packages/heuristic-table-plugin/src/TableRenderer.ts create mode 100644 packages/heuristic-table-plugin/src/TdRenderer.tsx create mode 100644 packages/heuristic-table-plugin/src/ThRenderer.ts rename packages/heuristic-table-plugin/src/{RenderTree.tsx => TreeRenderer.tsx} (74%) create mode 100644 packages/heuristic-table-plugin/src/models/index.ts create mode 100644 packages/heuristic-table-plugin/src/models/tableModel.ts create mode 100644 packages/heuristic-table-plugin/src/models/tdModel.ts create mode 100644 packages/heuristic-table-plugin/src/models/thModel.ts create mode 100644 packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts create mode 100644 packages/heuristic-table-plugin/src/useHtmlTableProps.ts diff --git a/packages/heuristic-table-plugin/README.md b/packages/heuristic-table-plugin/README.md index a8e6b42..3f5f5f4 100644 --- a/packages/heuristic-table-plugin/README.md +++ b/packages/heuristic-table-plugin/README.md @@ -56,7 +56,7 @@ yarn add @native-html/heuristic-table-plugin | react-native-render-html | @native-html/heuristic-table-plugin | | ------------------------ | ------------------------------------------------------------------------------------------------------------------ | -| < 6.0.0 | - | +| < 6.0.0 | - | | ≥ 6.0.0 | 6.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/heuristic-table-plugin#readme)) | ## Minimal working example @@ -99,9 +99,78 @@ export const Example = () => ( ); ``` -## Customizing +## Configuration To change the layout of cells and other options, you can pass a config object to the `renderersProps.table` prop of `RenderHTML` component. See the documentation for this object here: [`HeuristicTablePluginConfig`](docs/heuristic-table-plugin.heuristictablepluginconfig.md) + +## Custom Renderers + +### Customizing Root renderer + +You can customize the renderer logic thanks to `useHtmlTableProps` hook, `tableModel` and `HTMLTable` exports: + +```jsx +import React from 'react'; +import tableRenderers, {useHtmlTableProps, HTMLTable, tableModel} from '@native-html/heuristic-table-plugin'; + +function TableRenderer(props) { + const tableProps = useHtmlTableProps(props, /* config */); + // Do customize the props here; wrap with your own container... + return ; +}; + +TableRenderer.model = tableModel; + +const renderers = { + ...tableRenderers, + table: TableRenderer +} + +// use "renderers" prop in your RenderHTML instance +``` + +### Customizing Th and Td renderers + +You can customize cell rendering via `useHtmlTableCellProps`, `thModel` and +`tdModel` exports. This renderer will receive a special `propsFromParent` of +type +[`TableCellPropsFromParent`](docs/heuristic-table-plugin.tablecellpropsfromparent.md). +You can take advantage of this information to customize depending on the +position of the cell in the grid system coordinate, as shown below: + +```jsx +import React from 'react'; +import { + TableRenderer, + ThRenderer, + useHtmlTableCellProps, + tdModel +} from '@native-html/heuristic-table-plugin'; + +function TdRenderer(props) { + const cellProps = useHtmlTableCellProps(props); + // The cell parent prop contains information about this cell, + // especially its position (x, y) and lengths (lenX, lenY). + // In this example, we customize the background depending on the + // y coordinate (row index). + const { cell } = cellProps.propsFromParent; + const style = [ + cellProps.style, + backgroundColor: cell.x % 2 === 0 ? 'lightgray' : 'white' + ] + return React.createElement(cellProps.TDefaultRenderer, { ...cellProps, style }); +} + +TdRenderer.model = tdModel; + +const renderers = { + table: TableRenderer, + td: TdRenderer, + th: ThRenderer +} + +// use "renderers" prop in your RenderHTML instance +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md new file mode 100644 index 0000000..7509ef5 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md @@ -0,0 +1,24 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTable](./heuristic-table-plugin.htmltable.md) + +## HTMLTable() function + +A component layout to render tables. + +Signature: + +```typescript +export default function HTMLTable({ root: tree, contentWidth, TDefaultRenderer, config, ...props }: HTMLTableProps): JSX.Element; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| { root: tree, contentWidth, TDefaultRenderer, config, ...props } | [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) | | + +Returns: + +JSX.Element + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.config.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.config.md new file mode 100644 index 0000000..36e54c7 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.config.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [config](./heuristic-table-plugin.htmltableprops.config.md) + +## HTMLTableProps.config property + +Signature: + +```typescript +config: HeuristicTablePluginConfig; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md new file mode 100644 index 0000000..3124e24 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [contentWidth](./heuristic-table-plugin.htmltableprops.contentwidth.md) + +## HTMLTableProps.contentWidth property + +Signature: + +```typescript +contentWidth: number; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md new file mode 100644 index 0000000..3d9f048 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md @@ -0,0 +1,23 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) + +## HTMLTableProps interface + +Props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component. + +Signature: + +```typescript +export interface HTMLTableProps extends CustomTagRendererProps +``` +Extends: CustomTagRendererProps<TBlock> + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [config](./heuristic-table-plugin.htmltableprops.config.md) | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | | +| [contentWidth](./heuristic-table-plugin.htmltableprops.contentwidth.md) | number | | +| [root](./heuristic-table-plugin.htmltableprops.root.md) | [TableRoot](./heuristic-table-plugin.tableroot.md) | | + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md new file mode 100644 index 0000000..c142943 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [root](./heuristic-table-plugin.htmltableprops.root.md) + +## HTMLTableProps.root property + +Signature: + +```typescript +root: TableRoot; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md index d63e746..83bbec5 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md @@ -4,6 +4,14 @@ ## heuristic-table-plugin package +## Functions + +| Function | Description | +| --- | --- | +| [HTMLTable({ root: tree, contentWidth, TDefaultRenderer, config, ...props })](./heuristic-table-plugin.htmltable.md) | A component layout to render tables. | +| [useHtmlTableCellProps({ propsFromParent, ...props })](./heuristic-table-plugin.usehtmltablecellprops.md) | Customize td and th renderers while reusing default cell renderer logic. | +| [useHtmlTableProps({ sharedProps, tnode, ...props }, options)](./heuristic-table-plugin.usehtmltableprops.md) | Customize the rendering logic of the table renderer via this hook. | + ## Interfaces | Interface | Description | @@ -12,11 +20,22 @@ | [Coordinates](./heuristic-table-plugin.coordinates.md) | | | [DisplayCell](./heuristic-table-plugin.displaycell.md) | | | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | Options to customize this plugin renderers. | +| [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) | Props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component. | | [TableCell](./heuristic-table-plugin.tablecell.md) | A cell is a unit of display for one th or td in a table, with coordinates and lengths relative to the matrix (rows, columns) coordinate system.
 0 1 2 → x 1 . . 2 . . ↓ y
| +| [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md) | Props received by td and th custom renderers in propsFromParent prop field. | +| [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) | A container to display items in columns (think 'flex-dierection: column') | +| [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) | A container to display items in row. (think 'flex-direction: row') | +| [TableRoot](./heuristic-table-plugin.tableroot.md) | | ## Variables | Variable | Description | | --- | --- | | [renderers](./heuristic-table-plugin.renderers.md) | Renderers to be merged in the renderers prop of RenderHTML component. | +| [tableModel](./heuristic-table-plugin.tablemodel.md) | | +| [TableRenderer](./heuristic-table-plugin.tablerenderer.md) | A 100% native renderer component for table tag. | +| [tdModel](./heuristic-table-plugin.tdmodel.md) | | +| [TdRenderer](./heuristic-table-plugin.tdrenderer.md) | The renderer component for td tag. | +| [thModel](./heuristic-table-plugin.thmodel.md) | | +| [ThRenderer](./heuristic-table-plugin.threnderer.md) | The renderer component for th tag. | diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.cell.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.cell.md new file mode 100644 index 0000000..f2f6823 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.cell.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md) > [cell](./heuristic-table-plugin.tablecellpropsfromparent.cell.md) + +## TableCellPropsFromParent.cell property + +Signature: + +```typescript +cell: TableCell; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.config.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.config.md new file mode 100644 index 0000000..977ecc1 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.config.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md) > [config](./heuristic-table-plugin.tablecellpropsfromparent.config.md) + +## TableCellPropsFromParent.config property + +Signature: + +```typescript +config?: HeuristicTablePluginConfig; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.md new file mode 100644 index 0000000..a810ae2 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.md @@ -0,0 +1,22 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md) + +## TableCellPropsFromParent interface + +Props received by td and th custom renderers in `propsFromParent` prop field. + +Signature: + +```typescript +export interface TableCellPropsFromParent extends PropsFromParent +``` +Extends: PropsFromParent + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [cell](./heuristic-table-plugin.tablecellpropsfromparent.cell.md) | [TableCell](./heuristic-table-plugin.tablecell.md) | | +| [config?](./heuristic-table-plugin.tablecellpropsfromparent.config.md) | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | (Optional) | + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.children.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.children.md new file mode 100644 index 0000000..be94c57 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.children.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) > [children](./heuristic-table-plugin.tableflexcolumncontainer.children.md) + +## TableFlexColumnContainer.children property + +Signature: + +```typescript +children: (TableFlexRowContainer | TableCell)[]; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md new file mode 100644 index 0000000..fb633f7 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) + +## TableFlexColumnContainer interface + +A container to display items in columns (think 'flex-dierection: column') + +Signature: + +```typescript +export interface TableFlexColumnContainer +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [children](./heuristic-table-plugin.tableflexcolumncontainer.children.md) | ([TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) \| [TableCell](./heuristic-table-plugin.tablecell.md))\[\] | | +| [type](./heuristic-table-plugin.tableflexcolumncontainer.type.md) | 'col-container' | | + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.type.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.type.md new file mode 100644 index 0000000..01e5679 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.type.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) > [type](./heuristic-table-plugin.tableflexcolumncontainer.type.md) + +## TableFlexColumnContainer.type property + +Signature: + +```typescript +type: 'col-container'; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.children.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.children.md new file mode 100644 index 0000000..71de143 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.children.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) > [children](./heuristic-table-plugin.tableflexrowcontainer.children.md) + +## TableFlexRowContainer.children property + +Signature: + +```typescript +children: (TableFlexColumnContainer | TableCell)[]; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.md new file mode 100644 index 0000000..2a5c8dd --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) + +## TableFlexRowContainer interface + +A container to display items in row. (think 'flex-direction: row') + +Signature: + +```typescript +export interface TableFlexRowContainer +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [children](./heuristic-table-plugin.tableflexrowcontainer.children.md) | ([TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) \| [TableCell](./heuristic-table-plugin.tablecell.md))\[\] | | +| [type](./heuristic-table-plugin.tableflexrowcontainer.type.md) | 'row-container' | | + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.type.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.type.md new file mode 100644 index 0000000..a30e92c --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.type.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) > [type](./heuristic-table-plugin.tableflexrowcontainer.type.md) + +## TableFlexRowContainer.type property + +Signature: + +```typescript +type: 'row-container'; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablemodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablemodel.md new file mode 100644 index 0000000..f731b8d --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablemodel.md @@ -0,0 +1,12 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [tableModel](./heuristic-table-plugin.tablemodel.md) + +## tableModel variable + + +Signature: + +```typescript +tableModel: DefaultHTMLElementModels['table'] +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablerenderer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablerenderer.md new file mode 100644 index 0000000..a5dba97 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablerenderer.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableRenderer](./heuristic-table-plugin.tablerenderer.md) + +## TableRenderer variable + +A 100% native renderer component for `table` tag. + +Signature: + +```typescript +TableRenderer: CustomBlockRenderer +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.children.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.children.md new file mode 100644 index 0000000..30ff1cc --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.children.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableRoot](./heuristic-table-plugin.tableroot.md) > [children](./heuristic-table-plugin.tableroot.children.md) + +## TableRoot.children property + +Signature: + +```typescript +children: TableFlexRowContainer[]; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.md new file mode 100644 index 0000000..8179c7b --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.md @@ -0,0 +1,20 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableRoot](./heuristic-table-plugin.tableroot.md) + +## TableRoot interface + + +Signature: + +```typescript +export interface TableRoot +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [children](./heuristic-table-plugin.tableroot.children.md) | [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md)\[\] | | +| [type](./heuristic-table-plugin.tableroot.type.md) | 'root' | | + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.type.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.type.md new file mode 100644 index 0000000..0cd46c5 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.type.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableRoot](./heuristic-table-plugin.tableroot.md) > [type](./heuristic-table-plugin.tableroot.type.md) + +## TableRoot.type property + +Signature: + +```typescript +type: 'root'; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdmodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdmodel.md new file mode 100644 index 0000000..2ee5edc --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdmodel.md @@ -0,0 +1,12 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [tdModel](./heuristic-table-plugin.tdmodel.md) + +## tdModel variable + + +Signature: + +```typescript +tdModel: DefaultHTMLElementModels['td'] +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md new file mode 100644 index 0000000..cc23f10 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TdRenderer](./heuristic-table-plugin.tdrenderer.md) + +## TdRenderer variable + +The renderer component for `td` tag. + +Signature: + +```typescript +TdRenderer: CustomBlockRenderer +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.thmodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.thmodel.md new file mode 100644 index 0000000..7da1641 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.thmodel.md @@ -0,0 +1,12 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [thModel](./heuristic-table-plugin.thmodel.md) + +## thModel variable + + +Signature: + +```typescript +thModel: DefaultHTMLElementModels['th'] +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md new file mode 100644 index 0000000..926ec59 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [ThRenderer](./heuristic-table-plugin.threnderer.md) + +## ThRenderer variable + +The renderer component for `th` tag. + +Signature: + +```typescript +ThRenderer: CustomBlockRenderer +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltablecellprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltablecellprops.md new file mode 100644 index 0000000..482ea01 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltablecellprops.md @@ -0,0 +1,24 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [useHtmlTableCellProps](./heuristic-table-plugin.usehtmltablecellprops.md) + +## useHtmlTableCellProps() function + +Customize `td` and `th` renderers while reusing default cell renderer logic. + +Signature: + +```typescript +export default function useHtmlTableCellProps({ propsFromParent, ...props }: DefaultTagRendererProps): DefaultTagRendererProps; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| { propsFromParent, ...props } | DefaultTagRendererProps<TBlock, [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md)> | | + +Returns: + +DefaultTagRendererProps<TBlock, [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md)> + diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md new file mode 100644 index 0000000..6fd500f --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md @@ -0,0 +1,29 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [useHtmlTableProps](./heuristic-table-plugin.usehtmltableprops.md) + +## useHtmlTableProps() function + +Customize the rendering logic of the table renderer via this hook. + +Signature: + +```typescript +export default function useHtmlTableProps({ sharedProps, tnode, ...props }: CustomTagRendererProps, options?: { + overrideContentWidth?: number; +}): HTMLTableProps; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| { sharedProps, tnode, ...props } | CustomTagRendererProps<TBlock> | | +| options | { overrideContentWidth?: number; } | Customize this hook behavior. | + +Returns: + +[HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) + +props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component. + diff --git a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md index 6886168..bf0b05a 100644 --- a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md +++ b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md @@ -5,6 +5,11 @@ ```ts import { CustomBlockRenderer } from 'react-native-render-html'; +import { CustomTagRendererProps } from 'react-native-render-html'; +import { DefaultHTMLElementModels } from 'react-native-render-html'; +import { DefaultTagRendererProps } from 'react-native-render-html'; +import { PropsFromParent } from 'react-native-render-html'; +import { TBlock } from 'react-native-render-html'; import { TNode } from 'react-native-render-html'; import { ViewStyle } from 'react-native'; @@ -37,6 +42,19 @@ export interface HeuristicTablePluginConfig { getStyleForCell?(cell: TableCell): ViewStyle | null; } +// @public +export function HTMLTable({ root: tree, contentWidth, TDefaultRenderer, config, ...props }: HTMLTableProps): JSX.Element; + +// @public +export interface HTMLTableProps extends CustomTagRendererProps { + // (undocumented) + config: HeuristicTablePluginConfig; + // (undocumented) + contentWidth: number; + // (undocumented) + root: TableRoot; +} + // @public const renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer>; @@ -50,6 +68,64 @@ export interface TableCell extends DisplayCell { width: number; } +// @public +export interface TableCellPropsFromParent extends PropsFromParent { + // (undocumented) + cell: TableCell; + // (undocumented) + config?: HeuristicTablePluginConfig; +} + +// @public +export interface TableFlexColumnContainer { + // (undocumented) + children: (TableFlexRowContainer | TableCell)[]; + // (undocumented) + type: 'col-container'; +} + +// @public +export interface TableFlexRowContainer { + // (undocumented) + children: (TableFlexColumnContainer | TableCell)[]; + // (undocumented) + type: 'row-container'; +} + +// @public (undocumented) +export const tableModel: DefaultHTMLElementModels['table']; + +// @public +export const TableRenderer: CustomBlockRenderer; + +// @public (undocumented) +export interface TableRoot { + // (undocumented) + children: TableFlexRowContainer[]; + // (undocumented) + type: 'root'; +} + +// @public (undocumented) +export const tdModel: DefaultHTMLElementModels['td']; + +// @public +export const TdRenderer: CustomBlockRenderer; + +// @public (undocumented) +export const thModel: DefaultHTMLElementModels['th']; + +// @public +export const ThRenderer: CustomBlockRenderer; + +// @public +export function useHtmlTableCellProps({ propsFromParent, ...props }: DefaultTagRendererProps): DefaultTagRendererProps; + +// @public +export function useHtmlTableProps({ sharedProps, tnode, ...props }: CustomTagRendererProps, options?: { + overrideContentWidth?: number; +}): HTMLTableProps; + // (No @packageDocumentation comment for this package) diff --git a/packages/heuristic-table-plugin/package.json b/packages/heuristic-table-plugin/package.json index 3e0e4e0..c11eece 100644 --- a/packages/heuristic-table-plugin/package.json +++ b/packages/heuristic-table-plugin/package.json @@ -55,7 +55,7 @@ "react": "16.13.1", "react-native": "^0.63.2", "react-native-builder-bob": "^0.17.1", - "react-native-render-html": "6.0.0-alpha.18", + "react-native-render-html": "6.0.0-alpha.20", "react-test-renderer": "16.13.1", "release-it": "^14.3.0", "typescript": "~4.1.3" diff --git a/packages/heuristic-table-plugin/src/HTMLTable.tsx b/packages/heuristic-table-plugin/src/HTMLTable.tsx new file mode 100644 index 0000000..ca67614 --- /dev/null +++ b/packages/heuristic-table-plugin/src/HTMLTable.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { ScrollView } from 'react-native'; +import TreeRenderer from './TreeRenderer'; +import { HTMLTableProps } from './shared-types'; + +/** + * A component layout to render tables. + * + * @param props - Props from {@link useHtmlTableProps} hook. + * + * @public + */ +export default function HTMLTable({ + root: tree, + contentWidth, + TDefaultRenderer, + config, + ...props +}: HTMLTableProps) { + return ( + + + {React.createElement(TreeRenderer, { node: tree, config })} + + + ); +} diff --git a/packages/heuristic-table-plugin/src/RenderCell.tsx b/packages/heuristic-table-plugin/src/RenderCell.tsx deleted file mode 100644 index 3fc2a5a..0000000 --- a/packages/heuristic-table-plugin/src/RenderCell.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { CustomBlockRenderer } from 'react-native-render-html'; -import { HeuristicTablePluginConfig, TableCell } from './shared-types'; - -interface CellPropsFromParent { - config?: HeuristicTablePluginConfig; - cell: TableCell; -} - -const RenderCell: CustomBlockRenderer = function ({ - TDefaultRenderer, - propsFromParent, - ...props -}) { - // const markCells = { margin: 5, backgroundColor: 'red' } - const markCells = {}; - const { config, cell } = (propsFromParent as unknown) as CellPropsFromParent; - const styleFromConfig = config?.getStyleForCell?.call(null, cell); - let spanStyles = {}; - if (cell.lenY > 1) { - spanStyles = { justifyContent: 'center' }; - } - if (cell.lenX > 1) { - spanStyles = { alignItems: 'center' }; - } - const style = [ - props.style, - { - flexGrow: 1, - flexShrink: 0, - ...markCells, - ...spanStyles - }, - styleFromConfig - ]; - return ( - - ); -}; - -export default RenderCell; diff --git a/packages/heuristic-table-plugin/src/RenderTable.tsx b/packages/heuristic-table-plugin/src/RenderTable.tsx deleted file mode 100644 index 2ac1d2b..0000000 --- a/packages/heuristic-table-plugin/src/RenderTable.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useMemo } from 'react'; -import { ScrollView } from 'react-native'; -import { - CustomBlockRenderer, - defaultHTMLElementModels, - TNode -} from 'react-native-render-html'; -import computeColumnWidths from './helpers/computeColumnWidths'; -import createRenderTree from './helpers/createRenderTree'; -import fillTableDisplay, { - createEmptyDisplay -} from './helpers/fillTableDisplay'; -import RenderTree from './RenderTree'; -import { HeuristicTablePluginConfig } from './shared-types'; - -function useRenderTree({ - tnode, - contentWidth -}: { - tnode: TNode; - contentWidth: number; -}) { - return useMemo(() => { - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); - const columnWidths = computeColumnWidths(display, contentWidth); - return createRenderTree(display, columnWidths); - }, [tnode, contentWidth]); -} - -declare module 'react-native-render-html' { - // eslint-disable-next-line no-shadow - interface RenderersPropsBase { - table?: HeuristicTablePluginConfig; - } -} - -/** - * The renderer component for `table` tag. - * - * @param props - Component props. - * @public - */ -const RenderTable: CustomBlockRenderer = function ({ - TDefaultRenderer, - ...props -}) { - const { - contentWidth, - renderersProps: { table } - } = props.sharedProps; - const tree = useRenderTree({ tnode: props.tnode, contentWidth }); - return ( - - - {React.createElement(RenderTree, { node: tree, config: table })} - - - ); -}; - -RenderTable.model = defaultHTMLElementModels.table; - -export default RenderTable; diff --git a/packages/heuristic-table-plugin/src/RenderTd.tsx b/packages/heuristic-table-plugin/src/RenderTd.tsx deleted file mode 100644 index c1c866f..0000000 --- a/packages/heuristic-table-plugin/src/RenderTd.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { - CustomBlockRenderer, - defaultHTMLElementModels -} from 'react-native-render-html'; -import RenderCell from './RenderCell'; - -/** - * The renderer component for `td` tag. - * - * @param props - Component props. - * @public - */ -const RenderTd: CustomBlockRenderer = function (props) { - return React.createElement(RenderCell, props); -}; - -RenderTd.model = defaultHTMLElementModels.td; - -export default RenderTd; diff --git a/packages/heuristic-table-plugin/src/RenderTh.ts b/packages/heuristic-table-plugin/src/RenderTh.ts deleted file mode 100644 index 507465b..0000000 --- a/packages/heuristic-table-plugin/src/RenderTh.ts +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { - CustomBlockRenderer, - defaultHTMLElementModels -} from 'react-native-render-html'; -import RenderCell from './RenderCell'; - -/** - * The renderer component for `th` tag. - * - * @param props - Component props. - * @public - */ -const RenderTh: CustomBlockRenderer = function (props) { - return React.createElement(RenderCell, props); -}; - -RenderTh.model = defaultHTMLElementModels.th; - -export default RenderTh; diff --git a/packages/heuristic-table-plugin/src/TableRenderer.ts b/packages/heuristic-table-plugin/src/TableRenderer.ts new file mode 100644 index 0000000..01f4424 --- /dev/null +++ b/packages/heuristic-table-plugin/src/TableRenderer.ts @@ -0,0 +1,27 @@ +import React from 'react'; +import { CustomBlockRenderer } from 'react-native-render-html'; +import HTMLTable from './HTMLTable'; +import tableModel from './models/tableModel'; +import { HeuristicTablePluginConfig } from './shared-types'; +import useHtmlTableProps from './useHtmlTableProps'; + +declare module 'react-native-render-html' { + // eslint-disable-next-line no-shadow + interface RenderersPropsBase { + table?: HeuristicTablePluginConfig; + } +} + +/** + * A 100% native renderer component for `table` tag. + * + * @param props - Component props. + * @public + */ +const TableRenderer: CustomBlockRenderer = function (props) { + return React.createElement(HTMLTable, useHtmlTableProps(props)); +}; + +TableRenderer.model = tableModel; + +export default TableRenderer; diff --git a/packages/heuristic-table-plugin/src/TdRenderer.tsx b/packages/heuristic-table-plugin/src/TdRenderer.tsx new file mode 100644 index 0000000..5dc43b4 --- /dev/null +++ b/packages/heuristic-table-plugin/src/TdRenderer.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { CustomBlockRenderer } from 'react-native-render-html'; +import tdModel from './models/tdModel'; +import { TableCellPropsFromParent } from './shared-types'; +import useHtmlTableCellProps from './useHtmlTableCellProps'; + +/** + * The renderer component for `td` tag. + * + * @param props - Component props. + * @public + */ +const TdRenderer: CustomBlockRenderer = function (props) { + return React.createElement( + props.TDefaultRenderer, + useHtmlTableCellProps(props) + ); +}; + +TdRenderer.model = tdModel; + +export default TdRenderer; diff --git a/packages/heuristic-table-plugin/src/ThRenderer.ts b/packages/heuristic-table-plugin/src/ThRenderer.ts new file mode 100644 index 0000000..b20ae5e --- /dev/null +++ b/packages/heuristic-table-plugin/src/ThRenderer.ts @@ -0,0 +1,22 @@ +import React from 'react'; +import { CustomBlockRenderer } from 'react-native-render-html'; +import thModel from './models/thModel'; +import { TableCellPropsFromParent } from './shared-types'; +import useHtmlTableCellProps from './useHtmlTableCellProps'; + +/** + * The renderer component for `th` tag. + * + * @param props - Component props. + * @public + */ +const ThRenderer: CustomBlockRenderer = function (props) { + return React.createElement( + props.TDefaultRenderer, + useHtmlTableCellProps(props) + ); +}; + +ThRenderer.model = thModel; + +export default ThRenderer; diff --git a/packages/heuristic-table-plugin/src/RenderTree.tsx b/packages/heuristic-table-plugin/src/TreeRenderer.tsx similarity index 74% rename from packages/heuristic-table-plugin/src/RenderTree.tsx rename to packages/heuristic-table-plugin/src/TreeRenderer.tsx index 4224282..30dba8b 100644 --- a/packages/heuristic-table-plugin/src/RenderTree.tsx +++ b/packages/heuristic-table-plugin/src/TreeRenderer.tsx @@ -1,18 +1,18 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; import { TNodeRenderer } from 'react-native-render-html'; -import { HeuristicTablePluginConfig, RenderNode } from './shared-types'; +import { HeuristicTablePluginConfig, TableRenderNode } from './shared-types'; const styles = StyleSheet.create({ colContainer: { flexDirection: 'column', flexGrow: 1 }, rowContainer: { flexDirection: 'row', flexGrow: 1 } }); -export default function RenderTree({ +export default function TreeRenderer({ node, config }: { - node: RenderNode; + node: TableRenderNode; config?: HeuristicTablePluginConfig; }) { if (node.type === 'cell') { @@ -29,8 +29,8 @@ export default function RenderTree({ ); } if (node.type === 'root' || node.type === 'col-container') { - const children = (node.children as RenderNode[]).map((v, i) => - React.createElement(RenderTree, { node: v, key: i, config }) + const children = (node.children as TableRenderNode[]).map((v, i) => + React.createElement(TreeRenderer, { node: v, key: i, config }) ); return {children}; } @@ -38,7 +38,7 @@ export default function RenderTree({ return ( {node.children.map((v, i) => - React.createElement(RenderTree, { node: v, key: i, config }) + React.createElement(TreeRenderer, { node: v, key: i, config }) )} ); diff --git a/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts b/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts index 1395f0c..a5cef88 100644 --- a/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts +++ b/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts @@ -2,9 +2,9 @@ import { TableCell, Display, DisplayCell, - FlexColumnContainer, - FlexRowContainer, - Root + TableFlexColumnContainer, + TableFlexRowContainer, + TableRoot } from '../shared-types'; import pipe from 'ramda/src/pipe'; import prop from 'ramda/src/prop'; @@ -35,14 +35,14 @@ function groupCellsByVGroup(cellsByRow: TableCell[][]) { return cellsByVGroup; } -function makeRowContainer(cells: TableCell[]): FlexRowContainer { +function makeRowContainer(cells: TableCell[]): TableFlexRowContainer { return { type: 'row-container', children: cells }; } -function makeColContainer(cells: TableCell[]): FlexColumnContainer { +function makeColContainer(cells: TableCell[]): TableFlexColumnContainer { return { type: 'col-container', children: makeRows(cells).map(makeRowContainer) @@ -52,8 +52,8 @@ function makeColContainer(cells: TableCell[]): FlexColumnContainer { const splitToColumnContainers = pipe< TableCell[][], TableCell[], - FlexColumnContainer[] ->(flatten, function (cells: TableCell[]): FlexColumnContainer[] { + TableFlexColumnContainer[] +>(flatten, function (cells: TableCell[]): TableFlexColumnContainer[] { let breakpointsX: number[] = pipe( filter((cell: TableCell) => cell.lenY > 1), map(prop('x')) @@ -78,8 +78,8 @@ const splitToColumnContainers = pipe< function translateVGroups( virtualRowGroups: TableCell[][][] -): FlexRowContainer[] { - const flattenRows: FlexRowContainer[] = []; +): TableFlexRowContainer[] { + const flattenRows: TableFlexRowContainer[] = []; for (const rowGroup of virtualRowGroups) { if (rowGroup.length === 1) { flattenRows.push({ @@ -87,7 +87,7 @@ function translateVGroups( children: rowGroup[0] }); } else { - const container: FlexRowContainer = { + const container: TableFlexRowContainer = { type: 'row-container', children: splitToColumnContainers(rowGroup) }; @@ -108,7 +108,7 @@ function makeCell(columnWidths: number[], cell: DisplayCell): TableCell { export default function createRenderTree( display: Display, columnWidths: number[] -): Root { +): TableRoot { const children = pipe( map(partial(makeCell, [columnWidths])), makeRows, diff --git a/packages/heuristic-table-plugin/src/index.ts b/packages/heuristic-table-plugin/src/index.ts index 5b2b427..fe421f3 100644 --- a/packages/heuristic-table-plugin/src/index.ts +++ b/packages/heuristic-table-plugin/src/index.ts @@ -1,25 +1,38 @@ import { CustomBlockRenderer } from 'react-native-render-html'; -import RenderTable from './RenderTable'; -import RenderTd from './RenderTd'; -import RenderTh from './RenderTh'; +import TableRenderer from './TableRenderer'; +import TdRenderer from './TdRenderer'; +import ThRenderer from './ThRenderer'; export { - TableCell, - DisplayCell, CellProperties, Coordinates, - HeuristicTablePluginConfig + DisplayCell, + HeuristicTablePluginConfig, + HTMLTableProps, + TableCell, + TableFlexColumnContainer, + TableFlexRowContainer, + TableCellPropsFromParent, + TableRoot } from './shared-types'; +export { TableRenderer, ThRenderer, TdRenderer }; + /** * Renderers to be merged in the `renderers` prop of `RenderHTML` component. * * @public */ const renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer> = { - table: RenderTable, - th: RenderTh, - td: RenderTd + table: TableRenderer, + th: ThRenderer as any, + td: TdRenderer as any }; +export * from './models'; + +export { default as useHtmlTableProps } from './useHtmlTableProps'; +export { default as useHtmlTableCellProps } from './useHtmlTableCellProps'; +export { default as HTMLTable } from './HTMLTable'; + export default renderers; diff --git a/packages/heuristic-table-plugin/src/models/index.ts b/packages/heuristic-table-plugin/src/models/index.ts new file mode 100644 index 0000000..05570a1 --- /dev/null +++ b/packages/heuristic-table-plugin/src/models/index.ts @@ -0,0 +1,3 @@ +export { default as thModel } from './thModel'; +export { default as tdModel } from './tdModel'; +export { default as tableModel } from './tableModel'; diff --git a/packages/heuristic-table-plugin/src/models/tableModel.ts b/packages/heuristic-table-plugin/src/models/tableModel.ts new file mode 100644 index 0000000..a64c978 --- /dev/null +++ b/packages/heuristic-table-plugin/src/models/tableModel.ts @@ -0,0 +1,12 @@ +import { + DefaultHTMLElementModels, + defaultHTMLElementModels +} from 'react-native-render-html'; + +/** + * @public + */ +const tableModel: DefaultHTMLElementModels['table'] = + defaultHTMLElementModels.table; + +export default tableModel; diff --git a/packages/heuristic-table-plugin/src/models/tdModel.ts b/packages/heuristic-table-plugin/src/models/tdModel.ts new file mode 100644 index 0000000..99aaf3a --- /dev/null +++ b/packages/heuristic-table-plugin/src/models/tdModel.ts @@ -0,0 +1,11 @@ +import { + DefaultHTMLElementModels, + defaultHTMLElementModels +} from 'react-native-render-html'; + +/** + * @public + */ +const tdModel: DefaultHTMLElementModels['td'] = defaultHTMLElementModels.td; + +export default tdModel; diff --git a/packages/heuristic-table-plugin/src/models/thModel.ts b/packages/heuristic-table-plugin/src/models/thModel.ts new file mode 100644 index 0000000..1e157de --- /dev/null +++ b/packages/heuristic-table-plugin/src/models/thModel.ts @@ -0,0 +1,11 @@ +import { + DefaultHTMLElementModels, + defaultHTMLElementModels +} from 'react-native-render-html'; + +/** + * @public + */ +const thModel: DefaultHTMLElementModels['th'] = defaultHTMLElementModels.th; + +export default thModel; diff --git a/packages/heuristic-table-plugin/src/shared-types.ts b/packages/heuristic-table-plugin/src/shared-types.ts index 4173b74..60f6e4a 100644 --- a/packages/heuristic-table-plugin/src/shared-types.ts +++ b/packages/heuristic-table-plugin/src/shared-types.ts @@ -1,5 +1,10 @@ import { ViewStyle } from 'react-native'; -import { TNode } from 'react-native-render-html'; +import { + CustomTagRendererProps, + PropsFromParent, + TBlock, + TNode +} from 'react-native-render-html'; /** * @public @@ -28,24 +33,31 @@ export interface DisplayCell extends CellProperties { /** * A container to display items in row. * (think 'flex-direction: row') + * + * @public */ -export interface FlexRowContainer { +export interface TableFlexRowContainer { type: 'row-container'; - children: (FlexColumnContainer | TableCell)[]; + children: (TableFlexColumnContainer | TableCell)[]; } /** * A container to display items in columns * (think 'flex-dierection: column') + * + * @public */ -export interface FlexColumnContainer { +export interface TableFlexColumnContainer { type: 'col-container'; - children: (FlexRowContainer | TableCell)[]; + children: (TableFlexRowContainer | TableCell)[]; } -export interface Root { +/** + * @public + */ +export interface TableRoot { type: 'root'; - children: FlexRowContainer[]; + children: TableFlexRowContainer[]; } /** @@ -69,11 +81,11 @@ export interface TableCell extends DisplayCell { width: number; } -export type RenderNode = +export type TableRenderNode = | TableCell - | FlexColumnContainer - | FlexRowContainer - | Root; + | TableFlexColumnContainer + | TableFlexRowContainer + | TableRoot; export interface Display { maxY: number; @@ -96,3 +108,25 @@ export interface HeuristicTablePluginConfig { */ getStyleForCell?(cell: TableCell): ViewStyle | null; } + +/** + * Props for the {@link HTMLTable} component. + * + * @public + */ +export interface HTMLTableProps extends CustomTagRendererProps { + root: TableRoot; + contentWidth: number; + config: HeuristicTablePluginConfig; +} + +/** + * Props received by td and th custom renderers in `propsFromParent` prop + * field. + * + * @public + */ +export interface TableCellPropsFromParent extends PropsFromParent { + config?: HeuristicTablePluginConfig; + cell: TableCell; +} diff --git a/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts new file mode 100644 index 0000000..e65e191 --- /dev/null +++ b/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts @@ -0,0 +1,39 @@ +import { DefaultTagRendererProps, TBlock } from 'react-native-render-html'; +import { TableCellPropsFromParent } from './shared-types'; + +/** + * Customize `td` and `th` renderers while reusing default cell renderer logic. + * + * @param props - Props from custom renderer. + * + * @public + */ +export default function useHtmlTableCellProps({ + propsFromParent, + ...props +}: DefaultTagRendererProps< + TBlock, + TableCellPropsFromParent +>): DefaultTagRendererProps { + const { config, cell } = propsFromParent; + const styleFromConfig = config?.getStyleForCell?.call(null, cell); + let spanStyles = {}; + if (cell.lenY > 1) { + spanStyles = { justifyContent: 'center' }; + } + if (cell.lenX > 1) { + spanStyles = { alignItems: 'center' }; + } + const style = { + ...props.style, + flexGrow: 1, + flexShrink: 0, + ...spanStyles, + ...styleFromConfig + }; + return { + ...props, + style, + propsFromParent + }; +} diff --git a/packages/heuristic-table-plugin/src/useHtmlTableProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts new file mode 100644 index 0000000..c2ea52c --- /dev/null +++ b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts @@ -0,0 +1,65 @@ +import { useMemo } from 'react'; +import { + CustomTagRendererProps, + TBlock, + TNode +} from 'react-native-render-html'; +import computeColumnWidths from './helpers/computeColumnWidths'; +import createRenderTree from './helpers/createRenderTree'; +import fillTableDisplay, { + createEmptyDisplay +} from './helpers/fillTableDisplay'; +import { HTMLTableProps } from './shared-types'; + +function useRenderTree({ + tnode, + contentWidth +}: { + tnode: TNode; + contentWidth: number; +}) { + return useMemo(() => { + const display = createEmptyDisplay(); + fillTableDisplay(tnode, display); + const columnWidths = computeColumnWidths(display, contentWidth); + return createRenderTree(display, columnWidths); + }, [tnode, contentWidth]); +} + +/** + * Customize the rendering logic of the table renderer via this hook. + * + * @param props - Props from custom renderer props. + * @param options - Customize this hook behavior. + * + * @returns props for the {@link HTMLTable} component. + * + * @public + */ + +export default function useHtmlTableProps( + { sharedProps, tnode, ...props }: CustomTagRendererProps, + options: { + /** + * If present, overrides contentWidth from shared props. + */ + overrideContentWidth?: number; + } = {} +): HTMLTableProps { + const { + renderersProps: { table } + } = sharedProps; + const contentWidth = + typeof options.overrideContentWidth === 'number' + ? options.overrideContentWidth + : sharedProps.contentWidth; + const tree = useRenderTree({ tnode, contentWidth }); + return { + root: tree, + config: table || {}, + contentWidth, + sharedProps, + tnode, + ...props + }; +} From 2ad923e1f2036976d73bc751bf2f01285be19a8a Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 14:52:28 -0300 Subject: [PATCH 13/94] build(deps): bump and require react-native-render-html@6.0.0-alpha.20 --- example/package.json | 2 +- packages/heuristic-table-plugin/package.json | 2 +- packages/iframe-plugin/package.json | 4 ++-- packages/plugins-core/package.json | 4 ++-- packages/table-plugin/package.json | 4 ++-- yarn.lock | 18 +++++++++--------- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/example/package.json b/example/package.json index 3848d7c..b539d55 100644 --- a/example/package.json +++ b/example/package.json @@ -24,7 +24,7 @@ "react-native-gesture-handler": "~1.8.0", "react-native-paper": "^4.7.1", "react-native-reanimated": "~1.13.2", - "react-native-render-html": "6.0.0-alpha.18", + "react-native-render-html": "6.0.0-alpha.20", "react-native-safe-area-context": "3.1.9", "react-native-screens": "~2.15.2", "react-native-web": "~0.13.18", diff --git a/packages/heuristic-table-plugin/package.json b/packages/heuristic-table-plugin/package.json index c11eece..50768fa 100644 --- a/packages/heuristic-table-plugin/package.json +++ b/packages/heuristic-table-plugin/package.json @@ -69,7 +69,7 @@ "peerDependencies": { "react": ">= 16.8.0", "react-native": ">= 0.63.0", - "react-native-render-html": ">= 6.0.0-alpha.12 || 6.x" + "react-native-render-html": ">= 6.0.0-alpha.20 || 6.x" }, "author": "Jules Sam. Randolph (https://github.com/jsamr)", "homepage": "https://github.com/native-html/plugins/tree/master/packages/heuristic-table-plugin#readme", diff --git a/packages/iframe-plugin/package.json b/packages/iframe-plugin/package.json index 33d25cb..31b8702 100644 --- a/packages/iframe-plugin/package.json +++ b/packages/iframe-plugin/package.json @@ -53,7 +53,7 @@ "react": "16.13.1", "react-native": "^0.63.2", "react-native-builder-bob": "^0.17.1", - "react-native-render-html": "6.0.0-alpha.18", + "react-native-render-html": "6.0.0-alpha.20", "react-native-webview": "11.0.0", "react-test-renderer": "16.13.1", "release-it": "^14.3.0", @@ -68,7 +68,7 @@ "peerDependencies": { "react": ">= 16.8.0", "react-native": ">= 0.59.0", - "react-native-render-html": ">= 6.0.0-alpha.17 || 6.x" + "react-native-render-html": ">= 6.0.0-alpha.20 || 6.x" }, "author": "Jules Sam. Randolph (https://github.com/jsamr)", "homepage": "https://github.com/native-html/plugins/tree/master/packages/iframe-plugin#readme", diff --git a/packages/plugins-core/package.json b/packages/plugins-core/package.json index 51ad974..2d2ad52 100644 --- a/packages/plugins-core/package.json +++ b/packages/plugins-core/package.json @@ -46,7 +46,7 @@ "react": "16.13.1", "react-native": "^0.63.2", "react-native-builder-bob": "^0.17.1", - "react-native-render-html": "6.0.0-alpha.18", + "react-native-render-html": "6.0.0-alpha.20", "react-test-renderer": "16.13.1", "release-it": "^14.3.0", "typescript": "~4.1.3" @@ -55,7 +55,7 @@ "@formidable-webview/webshell": "^2.3.0", "react": ">= 16.8.0", "react-native": ">= 0.63.0", - "react-native-render-html": ">= 6.0.0-alpha.17 || 6.x" + "react-native-render-html": ">= 6.0.0-alpha.20 || 6.x" }, "author": "Jules Sam. Randolph (https://github.com/jsamr)", "homepage": "https://github.com/native-html/plugins/tree/master/packages/plugins-core#readme", diff --git a/packages/table-plugin/package.json b/packages/table-plugin/package.json index 5b339c9..84c26ea 100644 --- a/packages/table-plugin/package.json +++ b/packages/table-plugin/package.json @@ -57,7 +57,7 @@ "react": "16.13.1", "react-native": "^0.63.2", "react-native-builder-bob": "^0.17.1", - "react-native-render-html": "6.0.0-alpha.18", + "react-native-render-html": "6.0.0-alpha.20", "react-native-webview": "11.0.0", "react-test-renderer": "16.13.1", "release-it": "^14.3.0", @@ -72,7 +72,7 @@ "peerDependencies": { "react": ">= 16.8.0", "react-native": ">= 0.63.0", - "react-native-render-html": ">= 6.0.0-alpha.17 || 6.x" + "react-native-render-html": ">= 6.0.0-alpha.20 || 6.x" }, "author": "Jules Sam. Randolph (https://github.com/jsamr)", "homepage": "https://github.com/native-html/plugins/tree/master/packages/table-plugin#readme", diff --git a/yarn.lock b/yarn.lock index e1c9a09..ba5ca32 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3897,7 +3897,7 @@ __metadata: react: 16.13.1 react-native: ^0.63.2 react-native-builder-bob: ^0.17.1 - react-native-render-html: 6.0.0-alpha.18 + react-native-render-html: 6.0.0-alpha.20 react-test-renderer: 16.13.1 release-it: ^14.3.0 typescript: ~4.1.3 @@ -3939,7 +3939,7 @@ __metadata: react: 16.13.1 react-native: ^0.63.2 react-native-builder-bob: ^0.17.1 - react-native-render-html: 6.0.0-alpha.18 + react-native-render-html: 6.0.0-alpha.20 react-native-webview: 11.0.0 react-test-renderer: 16.13.1 release-it: ^14.3.0 @@ -3978,7 +3978,7 @@ __metadata: react: 16.13.1 react-native: ^0.63.2 react-native-builder-bob: ^0.17.1 - react-native-render-html: 6.0.0-alpha.18 + react-native-render-html: 6.0.0-alpha.20 react-test-renderer: 16.13.1 release-it: ^14.3.0 typescript: ~4.1.3 @@ -4025,7 +4025,7 @@ __metadata: react: 16.13.1 react-native: ^0.63.2 react-native-builder-bob: ^0.17.1 - react-native-render-html: 6.0.0-alpha.18 + react-native-render-html: 6.0.0-alpha.20 react-native-webview: 11.0.0 react-test-renderer: 16.13.1 release-it: ^14.3.0 @@ -8431,7 +8431,7 @@ __metadata: react-native-gesture-handler: ~1.8.0 react-native-paper: ^4.7.1 react-native-reanimated: ~1.13.2 - react-native-render-html: 6.0.0-alpha.18 + react-native-render-html: 6.0.0-alpha.20 react-native-safe-area-context: 3.1.9 react-native-screens: ~2.15.2 react-native-web: ~0.13.18 @@ -14954,9 +14954,9 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-native-render-html@npm:6.0.0-alpha.18": - version: 6.0.0-alpha.18 - resolution: "react-native-render-html@npm:6.0.0-alpha.18" +"react-native-render-html@npm:6.0.0-alpha.20": + version: 6.0.0-alpha.20 + resolution: "react-native-render-html@npm:6.0.0-alpha.20" dependencies: "@native-html/transient-render-engine": 4.4.1 "@types/ramda": ^0.27.32 @@ -14968,7 +14968,7 @@ fsevents@^1.2.7: peerDependencies: react: "*" react-native: ^0.63.0 - checksum: 5809d51121c672784612c125367970c562f3d7e4413eff0544528daf13857b3617854cf0fe2506f12c20d2106e8c6d0747bf35559abb9ecf517d5a80997b0e5f + checksum: 2228c05ba6f337ffdf2d6f861411977cc5189ef2b9e7212e64d4977543d921e25349b83db329aa3a3ba39357b4f90959aa6ed335459840b4131b2110f576a443 languageName: node linkType: hard From bd77a13349b65554685c41ea314d718a2e088211 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 14:53:10 -0300 Subject: [PATCH 14/94] chore: add screens support in demo --- example/HeuristicTableExample.js | 4 +--- example/index.js | 3 +++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/example/HeuristicTableExample.js b/example/HeuristicTableExample.js index dd1c2a8..fd52be5 100644 --- a/example/HeuristicTableExample.js +++ b/example/HeuristicTableExample.js @@ -217,8 +217,7 @@ const htmlConfig = { borderColor: '#dfdfdf', borderWidth: 0.5 } - }, - defaultWebViewProps: {} + } }; export default function HeuristicTable({ @@ -234,7 +233,6 @@ export default function HeuristicTable({ contentWidth={availableWidth} {...htmlConfig} debug={false} - triggerTREInvalidationPropNames={['tagsStyles']} /> ); } diff --git a/example/index.js b/example/index.js index d5ce57d..3a704bb 100644 --- a/example/index.js +++ b/example/index.js @@ -1,6 +1,9 @@ import 'react-native-gesture-handler'; +import { enableScreens } from 'react-native-screens'; import { AppRegistry } from 'react-native'; import App from './App'; import { name as appName } from './app.json'; +enableScreens(); + AppRegistry.registerComponent(appName, () => App); From 40fe6a4dfc0d24352bdc484f42d713e41c2d4c63 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 15:55:14 -0300 Subject: [PATCH 15/94] chore: release @native-html/heuristic-table-plugin@0.2.0 --- packages/heuristic-table-plugin/CHANGELOG.md | 7 +++++++ packages/heuristic-table-plugin/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/heuristic-table-plugin/CHANGELOG.md b/packages/heuristic-table-plugin/CHANGELOG.md index c8d91c9..fd6f034 100644 --- a/packages/heuristic-table-plugin/CHANGELOG.md +++ b/packages/heuristic-table-plugin/CHANGELOG.md @@ -1,3 +1,10 @@ +# [0.2.0](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.1.0...@native-html/heuristic-table-plugin@0.2.0) (2021-02-20) + + +### Features + +* **heuristic-table:** export hooks to reuse internal rendering logic ([d0f1529](https://github.com/native-html/plugins/commit/d0f15298cd6c17799f87d87ff25bb8b6433193bd)) + # 0.1.0 (2021-02-18) diff --git a/packages/heuristic-table-plugin/package.json b/packages/heuristic-table-plugin/package.json index 50768fa..7b00ac7 100644 --- a/packages/heuristic-table-plugin/package.json +++ b/packages/heuristic-table-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@native-html/heuristic-table-plugin", - "version": "0.1.0", + "version": "0.2.0", "description": "🔠 A 100% native component using heuristics to render tables in react-native-render-html", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", From 4bb0043b0a8a7b8b18c496b1ed308d76be4c0ebf Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 16:02:31 -0300 Subject: [PATCH 16/94] chore: sync yarn.lock --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index ba5ca32..cc42add 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3904,7 +3904,7 @@ __metadata: peerDependencies: react: ">= 16.8.0" react-native: ">= 0.63.0" - react-native-render-html: ">= 6.0.0-alpha.12 || 6.x" + react-native-render-html: ">= 6.0.0-alpha.20 || 6.x" languageName: unknown linkType: soft @@ -3947,7 +3947,7 @@ __metadata: peerDependencies: react: ">= 16.8.0" react-native: ">= 0.59.0" - react-native-render-html: ">= 6.0.0-alpha.17 || 6.x" + react-native-render-html: ">= 6.0.0-alpha.20 || 6.x" languageName: unknown linkType: soft @@ -3986,7 +3986,7 @@ __metadata: "@formidable-webview/webshell": ^2.3.0 react: ">= 16.8.0" react-native: ">= 0.63.0" - react-native-render-html: ">= 6.0.0-alpha.17 || 6.x" + react-native-render-html: ">= 6.0.0-alpha.20 || 6.x" languageName: unknown linkType: soft @@ -4033,7 +4033,7 @@ __metadata: peerDependencies: react: ">= 16.8.0" react-native: ">= 0.63.0" - react-native-render-html: ">= 6.0.0-alpha.17 || 6.x" + react-native-render-html: ">= 6.0.0-alpha.20 || 6.x" languageName: unknown linkType: soft From 84ff166b674b06214c9ddab921931659844160ce Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 16:12:04 -0300 Subject: [PATCH 17/94] chore: fix styling issue --- package.json | 2 +- packages/heuristic-table-plugin/src/TableRenderer.ts | 1 - packages/heuristic-table-plugin/src/TdRenderer.tsx | 4 +++- packages/heuristic-table-plugin/src/ThRenderer.ts | 4 +++- packages/table-plugin/src/__tests__/HTMLTable.test.tsx | 1 - 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5c1524d..9a75774 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build:core": "yarn workspace @native-html/plugins-core build", "test:table": "yarn workspace @native-html/table-plugin test", "test:table:jest": "yarn workspace @native-html/table-plugin test:jest", - "test:heuristic-table": "yarn workspace @native-html/table-plugin test", + "test:heuristic-table": "yarn workspace @native-html/heuristic-table-plugin test", "test:heuristic-table:jest": "yarn workspace @native-html/heuristic-table-plugin test:jest", "test:iframe": "yarn workspace @native-html/iframe-plugin test", "test:iframe:jest": "yarn workspace @native-html/iframe-plugin test:jest", diff --git a/packages/heuristic-table-plugin/src/TableRenderer.ts b/packages/heuristic-table-plugin/src/TableRenderer.ts index 01f4424..2c493e9 100644 --- a/packages/heuristic-table-plugin/src/TableRenderer.ts +++ b/packages/heuristic-table-plugin/src/TableRenderer.ts @@ -6,7 +6,6 @@ import { HeuristicTablePluginConfig } from './shared-types'; import useHtmlTableProps from './useHtmlTableProps'; declare module 'react-native-render-html' { - // eslint-disable-next-line no-shadow interface RenderersPropsBase { table?: HeuristicTablePluginConfig; } diff --git a/packages/heuristic-table-plugin/src/TdRenderer.tsx b/packages/heuristic-table-plugin/src/TdRenderer.tsx index 5dc43b4..02b73c3 100644 --- a/packages/heuristic-table-plugin/src/TdRenderer.tsx +++ b/packages/heuristic-table-plugin/src/TdRenderer.tsx @@ -10,7 +10,9 @@ import useHtmlTableCellProps from './useHtmlTableCellProps'; * @param props - Component props. * @public */ -const TdRenderer: CustomBlockRenderer = function (props) { +const TdRenderer: CustomBlockRenderer = function ( + props +) { return React.createElement( props.TDefaultRenderer, useHtmlTableCellProps(props) diff --git a/packages/heuristic-table-plugin/src/ThRenderer.ts b/packages/heuristic-table-plugin/src/ThRenderer.ts index b20ae5e..d0ca61e 100644 --- a/packages/heuristic-table-plugin/src/ThRenderer.ts +++ b/packages/heuristic-table-plugin/src/ThRenderer.ts @@ -10,7 +10,9 @@ import useHtmlTableCellProps from './useHtmlTableCellProps'; * @param props - Component props. * @public */ -const ThRenderer: CustomBlockRenderer = function (props) { +const ThRenderer: CustomBlockRenderer = function ( + props +) { return React.createElement( props.TDefaultRenderer, useHtmlTableCellProps(props) diff --git a/packages/table-plugin/src/__tests__/HTMLTable.test.tsx b/packages/table-plugin/src/__tests__/HTMLTable.test.tsx index d899bfb..e9aede7 100644 --- a/packages/table-plugin/src/__tests__/HTMLTable.test.tsx +++ b/packages/table-plugin/src/__tests__/HTMLTable.test.tsx @@ -1,4 +1,3 @@ -/* eslint-disable compat/compat */ import React from 'react'; import { StyleSheet } from 'react-native'; import validator from 'html-validator'; From bddd1d6b137d737f56f75c966894f65ec0f7d68d Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Sat, 20 Feb 2021 16:22:13 -0300 Subject: [PATCH 18/94] style: fix eslint rule --- packages/table-plugin/src/__tests__/HTMLTable.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/table-plugin/src/__tests__/HTMLTable.test.tsx b/packages/table-plugin/src/__tests__/HTMLTable.test.tsx index e9aede7..4b96ab8 100644 --- a/packages/table-plugin/src/__tests__/HTMLTable.test.tsx +++ b/packages/table-plugin/src/__tests__/HTMLTable.test.tsx @@ -35,13 +35,13 @@ const dummyStats: HTMLTableStats = { }; function waitForRender(timeMs: number = 1000) { + // eslint-disable-next-line compat/compat return act(() => new Promise((res) => setTimeout(res, timeMs))); } // We have to exclude those tests until an upstream bug in jest // regarding forwarded ref components is fixed. // See https://github.com/callstack/react-native-testing-library/issues/539 -// eslint-disable-next-line jest/no-disabled-tests describe('HTMLTable component', () => { it('should produce w3-compliant HTML code', async () => { const webview = await waitForErsatz( @@ -70,8 +70,6 @@ describe('HTMLTable component', () => { /> ) ); - // eslint-disable-next-line compat/compat - // await act(() => new Promise((res) => setTimeout(res, 10))); expect(computeContainerHeight).toHaveBeenCalledTimes(3); expect(computeContainerHeight).toHaveBeenNthCalledWith( 1, From 05eeb6ed33375284fe9d18c70aec5b4633ded484 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Wed, 3 Mar 2021 18:51:29 -0300 Subject: [PATCH 19/94] feat: advanced layout algorithm --- example/HeuristicTableExample.js | 156 +++++++++++++++- packages/heuristic-table-plugin/README.md | 37 +++- ...able-plugin.cellproperties.constraints.md} | 6 +- .../heuristic-table-plugin.cellproperties.md | 2 +- ...heuristictablepluginconfig.forcestretch.md | 13 ++ ...table-plugin.heuristictablepluginconfig.md | 6 + .../docs/heuristic-table-plugin.htmltable.md | 17 +- ...able-plugin.htmltableprops.contentwidth.md | 11 -- ...tic-table-plugin.htmltableprops.layout.md} | 6 +- .../heuristic-table-plugin.htmltableprops.md | 5 +- .../docs/heuristic-table-plugin.md | 6 +- ...c-table-plugin.tableflexcolumncontainer.md | 2 +- ...euristic-table-plugin.usehtmltableprops.md | 2 +- .../etc/heuristic-table-plugin.api.md | 16 +- .../heuristic-table-plugin/src/HTMLTable.tsx | 56 ++++-- .../heuristic-table-plugin/src/TableLayout.ts | 24 +++ .../src/helpers/TCellConstraintsComputer.ts | 160 ++++++++++++++++ .../__tests__/createRenderTree.test.ts | 6 +- .../__tests__/fillTableDisplay.test.ts | 20 +- .../__tests__/getColumnWeights.test.ts | 58 ------ .../src/helpers/__tests__/makeRows.test.ts | 5 +- .../__tests__/reduceColumnConstraints.test.ts | 103 +++++++++++ .../src/helpers/computeColumnWidths.ts | 95 ++++++---- .../src/helpers/computeTNodeWeight.ts | 87 --------- .../src/helpers/fillTableDisplay.ts | 31 ++-- .../src/helpers/getColumnWeights.ts | 42 ----- .../src/helpers/measure.ts | 50 +++++ .../src/helpers/reduceColumnConstraints.ts | 72 +++++++ .../src/shared-types.ts | 59 +++++- .../src/useHtmlTableCellProps.ts | 7 +- .../src/useHtmlTableProps.ts | 32 ++-- packages/heuristic-table-plugin/test.html | 175 ++++++++++++++++++ 32 files changed, 1033 insertions(+), 334 deletions(-) rename packages/heuristic-table-plugin/docs/{heuristic-table-plugin.cellproperties.weight.md => heuristic-table-plugin.cellproperties.constraints.md} (57%) create mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md delete mode 100644 packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md rename packages/heuristic-table-plugin/docs/{heuristic-table-plugin.htmltableprops.root.md => heuristic-table-plugin.htmltableprops.layout.md} (60%) create mode 100644 packages/heuristic-table-plugin/src/TableLayout.ts create mode 100644 packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts delete mode 100644 packages/heuristic-table-plugin/src/helpers/__tests__/getColumnWeights.test.ts create mode 100644 packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts delete mode 100644 packages/heuristic-table-plugin/src/helpers/computeTNodeWeight.ts delete mode 100644 packages/heuristic-table-plugin/src/helpers/getColumnWeights.ts create mode 100644 packages/heuristic-table-plugin/src/helpers/measure.ts create mode 100644 packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts create mode 100644 packages/heuristic-table-plugin/test.html diff --git a/example/HeuristicTableExample.js b/example/HeuristicTableExample.js index fd52be5..4b5382c 100644 --- a/example/HeuristicTableExample.js +++ b/example/HeuristicTableExample.js @@ -102,6 +102,9 @@ but it should be a good enough approximation for a majority of use cases. Mexico +`; + +const tableSpan = `

Table with colspan cell

@@ -172,23 +175,158 @@ but it should be a good enough approximation for a majority of use cases. $80 - -

-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

`; +const tableTest = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Cinq étapes d'évaluationCritères de gravité
1. Variables physiologiquesGCS < 13
PAS < 90 mmHg
SpO2 < 90%
2. Eléments de cinétique + Éjection d'un véhicule
Autre passager décédé dans le même + véhicule
Chute > 6 m
Victime projetée ou écrasée
Appréciation + globale (déformation du véhicule, vitesse estimée, absence de casque, + absence de ceinture de sécurité)
Blast +
3. Lésions anatomiques + Trauma pénétrant de la tête, du cou, du thorax, de l'abdomen, du bassin, + du bras ou de la cuisse
Volet thoracique
Brûlure sévère, + inhalation de fumée associée
Fracas du bassin
Suspicion + d'atteinte médullaire
Amputation au niveau du poignet, de la + cheville, ou au dessus
Ischémie aiguë de membre +
4. Réanimation préhospitalière + Ventilation assistée
Remplissage > 1000 ml de colloïdes
Catécholamines
Pantalon + antichoc gonflé +
5. Terrain (à évaluer) + Age > 65 ans
Insuffisance cardiaque ou coronarienne
Insuffisance + respiratoire
Grossesse (2ème et + 3èmetrimestres)
Troubles de la crase sanguine +
+ `; + +const htmlTest3 = ` + + + + + + + + + + + + + + + + + + + + + +`; + const htmlConfig = { renderers: tableRenderers, renderersProps: { table: { + forceStretch: false, getStyleForCell(cell) { return cell.tnode.tagName === 'td' ? { backgroundColor: cell.y % 2 > 0 - ? 'rgba(65, 91, 118, .05)' - : 'rgba(65, 91, 118, .30)' + ? 'rgba(65, 91, 118, .02)' + : 'rgba(65, 91, 118, .10)' } : null; } @@ -201,7 +339,8 @@ const htmlConfig = { }, table: { borderColor: '#dfdfdf', - borderWidth: 0.5 + borderWidth: 0.5, + marginVertical: 10 }, th: { textAlign: 'center', @@ -228,9 +367,10 @@ export default function HeuristicTable({ return ( diff --git a/packages/heuristic-table-plugin/README.md b/packages/heuristic-table-plugin/README.md index 3f5f5f4..0c6873a 100644 --- a/packages/heuristic-table-plugin/README.md +++ b/packages/heuristic-table-plugin/README.md @@ -98,7 +98,6 @@ export const Example = () => ( ); ``` - ## Configuration To change the layout of cells and other options, you can pass a config object @@ -174,3 +173,39 @@ const renderers = { // use "renderers" prop in your RenderHTML instance ``` + + +## The heuristic layout algorithm + +Finding the cell sizes which result in the table of the least height given a +fixed width is [a NP complete +problem](https://dl.acm.org/doi/abs/10.1145/304893.304937). + +To resolve this problem, this library uses a dumb and cheap algorithm, which +won't find the *best* solution but instead a visually acceptable layout. + +### 1. Cell constraints extraction + +In the first step, each cell of the table is parsed to extract two metrics: +`minWidth` and `contentDensity`. `minWidth` is an estimation of the width taken +by the longest word in the cell, or the explicit width or min-width of any +block in the cell, or the greatest of the two. `contentDensity` is the width +taken by all the text displayed in one line. + +### 2. Column constraints reduction + +In the second step, cell constraints are reduced per column. Three metrics come out: + +- `minWidth`, the maximum of each cell `minWidth`; +- `contentDensity`, the sum of each cell `contentDensity`; +- `spread`, the maximum of each cell `contentDensity`. + +### 3. Column widths calculation + +Let `minTableWidth` be the sum of all column `minWidth`. If `minTableWidth > +contentWidth`, assign to each column a width corresponding to its `minWidth` +constraint. + +Otherwise, let `spaceToAllocate = contentWidth - minTableWidth`. Allocate to each column a width equal to its `minWidth` constraint + `spaceToAllocate * gamma`, with `gamma = (normalContentDensity) / sum(normalContentDensities)`. The `normalContentDensity` is `contentDensity - min(contentDensities)`. + +Finally, clamp the assign width to the `spread` constraint for this column, unless `forceStretch` parameter is set to `true`. diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.weight.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.constraints.md similarity index 57% rename from packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.weight.md rename to packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.constraints.md index a377016..398400b 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.weight.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.constraints.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [CellProperties](./heuristic-table-plugin.cellproperties.md) > [weight](./heuristic-table-plugin.cellproperties.weight.md) +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [CellProperties](./heuristic-table-plugin.cellproperties.md) > [constraints](./heuristic-table-plugin.cellproperties.constraints.md) -## CellProperties.weight property +## CellProperties.constraints property Signature: ```typescript -weight: number; +constraints: TCellConstraints; ``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.md index 138e1b8..9ad8e07 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.md @@ -16,7 +16,7 @@ export interface CellProperties extends Coordinates | Property | Type | Description | | --- | --- | --- | +| [constraints](./heuristic-table-plugin.cellproperties.constraints.md) | TCellConstraints | | | [lenX](./heuristic-table-plugin.cellproperties.lenx.md) | number | | | [lenY](./heuristic-table-plugin.cellproperties.leny.md) | number | | -| [weight](./heuristic-table-plugin.cellproperties.weight.md) | number | | diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md new file mode 100644 index 0000000..99ad690 --- /dev/null +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) > [forceStretch](./heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md) + +## HeuristicTablePluginConfig.forceStretch property + +When true, force the table to stretch to the available width. + +Signature: + +```typescript +forceStretch?: boolean; +``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md index cf39d6c..230b73d 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md @@ -12,6 +12,12 @@ Options to customize this plugin renderers. export interface HeuristicTablePluginConfig ``` +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| [forceStretch?](./heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md) | boolean | (Optional) When true, force the table to stretch to the available width. | + ## Methods | Method | Description | diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md index 7509ef5..4098a9f 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md @@ -2,23 +2,12 @@ [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTable](./heuristic-table-plugin.htmltable.md) -## HTMLTable() function +## HTMLTable variable -A component layout to render tables. +A component to render tables. Signature: ```typescript -export default function HTMLTable({ root: tree, contentWidth, TDefaultRenderer, config, ...props }: HTMLTableProps): JSX.Element; +HTMLTable: React.NamedExoticComponent ``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| { root: tree, contentWidth, TDefaultRenderer, config, ...props } | [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) | | - -Returns: - -JSX.Element - diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md deleted file mode 100644 index 3124e24..0000000 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.contentwidth.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [contentWidth](./heuristic-table-plugin.htmltableprops.contentwidth.md) - -## HTMLTableProps.contentWidth property - -Signature: - -```typescript -contentWidth: number; -``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.layout.md similarity index 60% rename from packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md rename to packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.layout.md index c142943..9853a59 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.root.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.layout.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [root](./heuristic-table-plugin.htmltableprops.root.md) +[Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [layout](./heuristic-table-plugin.htmltableprops.layout.md) -## HTMLTableProps.root property +## HTMLTableProps.layout property Signature: ```typescript -root: TableRoot; +layout: TableLayout; ``` diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md index 3d9f048..cd0ea9f 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md @@ -4,7 +4,7 @@ ## HTMLTableProps interface -Props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component. +Props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component. Signature: @@ -18,6 +18,5 @@ export interface HTMLTableProps extends CustomTagRendererProps | Property | Type | Description | | --- | --- | --- | | [config](./heuristic-table-plugin.htmltableprops.config.md) | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | | -| [contentWidth](./heuristic-table-plugin.htmltableprops.contentwidth.md) | number | | -| [root](./heuristic-table-plugin.htmltableprops.root.md) | [TableRoot](./heuristic-table-plugin.tableroot.md) | | +| [layout](./heuristic-table-plugin.htmltableprops.layout.md) | TableLayout | | diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md index 83bbec5..38440ba 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md @@ -8,7 +8,6 @@ | Function | Description | | --- | --- | -| [HTMLTable({ root: tree, contentWidth, TDefaultRenderer, config, ...props })](./heuristic-table-plugin.htmltable.md) | A component layout to render tables. | | [useHtmlTableCellProps({ propsFromParent, ...props })](./heuristic-table-plugin.usehtmltablecellprops.md) | Customize td and th renderers while reusing default cell renderer logic. | | [useHtmlTableProps({ sharedProps, tnode, ...props }, options)](./heuristic-table-plugin.usehtmltableprops.md) | Customize the rendering logic of the table renderer via this hook. | @@ -20,10 +19,10 @@ | [Coordinates](./heuristic-table-plugin.coordinates.md) | | | [DisplayCell](./heuristic-table-plugin.displaycell.md) | | | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | Options to customize this plugin renderers. | -| [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) | Props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component. | +| [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) | Props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component. | | [TableCell](./heuristic-table-plugin.tablecell.md) | A cell is a unit of display for one th or td in a table, with coordinates and lengths relative to the matrix (rows, columns) coordinate system.
 0 1 2 → x 1 . . 2 . . ↓ y
| | [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md) | Props received by td and th custom renderers in propsFromParent prop field. | -| [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) | A container to display items in columns (think 'flex-dierection: column') | +| [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) | A container to display items in columns (think 'flex-direction: column') | | [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) | A container to display items in row. (think 'flex-direction: row') | | [TableRoot](./heuristic-table-plugin.tableroot.md) | | @@ -31,6 +30,7 @@ | Variable | Description | | --- | --- | +| [HTMLTable](./heuristic-table-plugin.htmltable.md) | A component to render tables. | | [renderers](./heuristic-table-plugin.renderers.md) | Renderers to be merged in the renderers prop of RenderHTML component. | | [tableModel](./heuristic-table-plugin.tablemodel.md) | | | [TableRenderer](./heuristic-table-plugin.tablerenderer.md) | A 100% native renderer component for table tag. | diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md index fb633f7..0a806dc 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md @@ -4,7 +4,7 @@ ## TableFlexColumnContainer interface -A container to display items in columns (think 'flex-dierection: column') +A container to display items in columns (think 'flex-direction: column') Signature: diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md index 6fd500f..99c816f 100644 --- a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md +++ b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md @@ -25,5 +25,5 @@ export default function useHtmlTableProps({ sharedProps, tnode, ...props }: Cust [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) -props for the [HTMLTable()](./heuristic-table-plugin.htmltable.md) component. +props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component. diff --git a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md index bf0b05a..7bed8ee 100644 --- a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md +++ b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md @@ -9,18 +9,21 @@ import { CustomTagRendererProps } from 'react-native-render-html'; import { DefaultHTMLElementModels } from 'react-native-render-html'; import { DefaultTagRendererProps } from 'react-native-render-html'; import { PropsFromParent } from 'react-native-render-html'; +import { default as React_2 } from 'react'; import { TBlock } from 'react-native-render-html'; import { TNode } from 'react-native-render-html'; import { ViewStyle } from 'react-native'; // @public (undocumented) export interface CellProperties extends Coordinates { + // Warning: (ae-forgotten-export) The symbol "TCellConstraints" needs to be exported by the entry point index.d.ts + // + // (undocumented) + constraints: TCellConstraints; // (undocumented) lenX: number; // (undocumented) lenY: number; - // (undocumented) - weight: number; } // @public (undocumented) @@ -39,20 +42,21 @@ export interface DisplayCell extends CellProperties { // @public export interface HeuristicTablePluginConfig { + forceStretch?: boolean; getStyleForCell?(cell: TableCell): ViewStyle | null; } // @public -export function HTMLTable({ root: tree, contentWidth, TDefaultRenderer, config, ...props }: HTMLTableProps): JSX.Element; +export const HTMLTable: React_2.NamedExoticComponent; // @public export interface HTMLTableProps extends CustomTagRendererProps { // (undocumented) config: HeuristicTablePluginConfig; + // Warning: (ae-forgotten-export) The symbol "TableLayout" needs to be exported by the entry point index.d.ts + // // (undocumented) - contentWidth: number; - // (undocumented) - root: TableRoot; + layout: TableLayout; } // @public diff --git a/packages/heuristic-table-plugin/src/HTMLTable.tsx b/packages/heuristic-table-plugin/src/HTMLTable.tsx index ca67614..e784f2e 100644 --- a/packages/heuristic-table-plugin/src/HTMLTable.tsx +++ b/packages/heuristic-table-plugin/src/HTMLTable.tsx @@ -1,27 +1,61 @@ -import React from 'react'; -import { ScrollView } from 'react-native'; +import React, { memo, PropsWithChildren } from 'react'; +import { ScrollView, View } from 'react-native'; import TreeRenderer from './TreeRenderer'; import { HTMLTableProps } from './shared-types'; +import { getHorizontalSpacing } from './helpers/measure'; + +function Container({ + children, + tableWidth, + availableWidth +}: PropsWithChildren<{ + tableWidth: number; + availableWidth: number; +}>) { + const scroll = tableWidth > availableWidth; + return React.createElement( + scroll ? ScrollView : View, + scroll + ? { + contentContainerStyle: { width: tableWidth }, + style: { width: availableWidth }, + horizontal: true + } + : { style: { width: tableWidth } }, + children + ); +} /** - * A component layout to render tables. + * A component to render tables. * * @param props - Props from {@link useHtmlTableProps} hook. * * @public */ -export default function HTMLTable({ - root: tree, - contentWidth, +const HTMLTable = memo(function HTMLTable({ + layout, TDefaultRenderer, config, ...props }: HTMLTableProps) { + const tableWidth = layout.totalWidth; + const containerWidth = props.sharedProps.contentWidth; return ( - - - {React.createElement(TreeRenderer, { node: tree, config })} - + + + {React.createElement(TreeRenderer, { node: layout.renderTree, config })} + ); -} +}); + +export default HTMLTable; diff --git a/packages/heuristic-table-plugin/src/TableLayout.ts b/packages/heuristic-table-plugin/src/TableLayout.ts new file mode 100644 index 0000000..996f2d3 --- /dev/null +++ b/packages/heuristic-table-plugin/src/TableLayout.ts @@ -0,0 +1,24 @@ +import { sum } from 'ramda'; +import { TNode } from 'react-native-render-html'; +import computeColumnWidths from './helpers/computeColumnWidths'; +import createRenderTree from './helpers/createRenderTree'; +import fillTableDisplay, { + createEmptyDisplay +} from './helpers/fillTableDisplay'; +import TCellConstraintsComputer from './helpers/TCellConstraintsComputer'; +import { Display, Settings, TableRoot } from './shared-types'; + +export default class TableLayout { + public readonly display: Display; + public readonly columnWidths: number[]; + public readonly totalWidth: number; + public readonly renderTree: TableRoot; + constructor(tnode: TNode, config: Settings) { + const computer = new TCellConstraintsComputer({}); + this.display = createEmptyDisplay(config); + fillTableDisplay(tnode, this.display, computer); + this.columnWidths = computeColumnWidths(this.display); + this.totalWidth = sum(this.columnWidths); + this.renderTree = createRenderTree(this.display, this.columnWidths); + } +} diff --git a/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts b/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts new file mode 100644 index 0000000..032e813 --- /dev/null +++ b/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts @@ -0,0 +1,160 @@ +import pipe from 'ramda/src/pipe'; +import sum from 'ramda/src/sum'; +import map from 'ramda/src/map'; +import max from 'ramda/src/max'; +import prop from 'ramda/src/prop'; +import reduce from 'ramda/src/reduce'; +import { TextStyle } from 'react-native'; +import { TNode } from 'react-native-render-html'; +import { TBlock, TText } from '@native-html/transient-render-engine'; +import { TCellConstraints } from '../shared-types'; +import { getHorizontalMargins, getHorizontalSpacing } from './measure'; + +interface TextChunkStats { + fontWeightCoeff: number; + fontFamilyCoeff: number; + fontSize: number; + characters: number; + maxWordLength: number; +} + +/** + * Distinction between two types of content generating constraints. + * + * - Blocks. When blocks such as images have an explicit width, this width is + * used as minimum and prefered width for this tnode cell. + * - TPhrasing. Phrasing content will provide minimum and prefered width up to approx 10 characters. Above that, + * each new character will augment prefered width logarathmically, since text wraps nicely. + */ +interface TCellStats { + /** + * Horizontal spacing for this cell + */ + horizontalSpace: number; + /** + * The maximum of explicit widths or min-widths of block elements in this + * cell, including margins. + */ + blockWidth: number; + /** + * Text stats in this cell. + */ + textStats: TextChunkStats[]; +} + +function getInitCellStatsForTnode(tnode: TNode): TCellStats { + return { + blockWidth: 0, + horizontalSpace: getHorizontalSpacing(tnode.styles.nativeBlockRet), + textStats: [] + }; +} + +const getMaxWordSize = pipe( + map(prop('length')), + reduce(max, 0) +); + +export default class TCellConstraintsComputer { + private baseFontCoeff: number; + private fallbackFontSize: number; + + private fontWeightCoeffs: Record< + Required['fontWeight'], + number + > = { + '100': 0.8, + '200': 0.85, + '300': 0.9, + '400': 1, + '500': 1.1, + '600': 1.2, + '700': 1.3, + '800': 1.4, + '900': 1.5, + bold: 1.3, + normal: 1 + }; + + constructor({ + baseFontCoeff, + fallbackFontSize + }: { + baseFontCoeff?: number; + fallbackFontSize?: number; + }) { + this.baseFontCoeff = baseFontCoeff ?? 0.65; + this.fallbackFontSize = fallbackFontSize ?? 14; + } + + private getContentDensity = pipe( + map((ch) => ch.characters * this.getTextCoeff(ch)), + sum + ); + + private geTextMinWidth = pipe( + map( + (ch) => ch.maxWordLength * this.getTextCoeff(ch) + ), + reduce(max, 0) + ); + + private getTextCoeff(ch: TextChunkStats): number { + return ( + ch.fontFamilyCoeff * ch.fontSize * this.baseFontCoeff * ch.fontWeightCoeff + ); + } + + private assembleCellStats( + tnode: TNode, + stats: TCellStats = getInitCellStatsForTnode(tnode) + ): TCellStats { + if (tnode instanceof TText) { + const fontSize = + tnode.styles.nativeTextFlow.fontSize ?? this.fallbackFontSize; + const fontWeight = tnode.styles.nativeTextFlow.fontWeight ?? 'normal'; + const fontWeightCoeff = this.fontWeightCoeffs[fontWeight] ?? 1; + stats.textStats.push({ + characters: tnode.data.length, + maxWordLength: getMaxWordSize(tnode.data.split(/\s+/)), + fontFamilyCoeff: 1, + fontSize, + fontWeightCoeff + }); + } else { + if (tnode instanceof TBlock) { + const blockStyle = tnode.styles.nativeBlockRet; + const width = + typeof blockStyle.width === 'number' + ? blockStyle.width + : typeof blockStyle.minWidth === 'number' + ? blockStyle.minWidth + : 0; + const margins = getHorizontalMargins(tnode.styles.nativeBlockRet); + stats.blockWidth = Math.max(stats.blockWidth, width + margins); + } + tnode.children.forEach((n) => this.assembleCellStats(n, stats)); + } + return stats; + } + + private computeTextConstraints(chunks: TextChunkStats[]): TCellConstraints { + const minWidth = this.geTextMinWidth(chunks); + const contentDensity = this.getContentDensity(chunks); + return { + minWidth, + contentDensity + }; + } + + computeCellConstraints(tnode: TNode): TCellConstraints { + const stats = this.assembleCellStats(tnode); + const blockWidth = stats.blockWidth; + const textConstrains = this.computeTextConstraints(stats.textStats); + return { + minWidth: + Math.max(blockWidth, textConstrains.minWidth) + stats.horizontalSpace, + contentDensity: textConstrains.contentDensity + }; + } +} diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts index f4ede06..5cb9732 100644 --- a/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts +++ b/packages/heuristic-table-plugin/src/helpers/__tests__/createRenderTree.test.ts @@ -1,11 +1,13 @@ import fillTableDisplay, { createEmptyDisplay } from '../fillTableDisplay'; import { createTableTNode } from './utils'; import createRenderTree from '../createRenderTree'; +import TCellConstraintsComputer from '../TCellConstraintsComputer'; function makeRenderTree(html: string, columnWidths: number[]) { const tnode = createTableTNode(html); - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); + const display = createEmptyDisplay({ contentWidth: 1000 }); + const computer = new TCellConstraintsComputer({}); + fillTableDisplay(tnode, display, computer); return createRenderTree(display, columnWidths); } diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts index 4ebcaed..2a84d96 100644 --- a/packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts +++ b/packages/heuristic-table-plugin/src/helpers/__tests__/fillTableDisplay.test.ts @@ -1,6 +1,14 @@ +import { TNode } from 'react-native-render-html'; import fillTableDisplay, { createEmptyDisplay } from '../fillTableDisplay'; +import TCellConstraintsComputer from '../TCellConstraintsComputer'; import { createTableTNode } from './utils'; +function createDisplay(tnode: TNode) { + const display = createEmptyDisplay({ contentWidth: 1000 }); + fillTableDisplay(tnode, display, new TCellConstraintsComputer({})); + return display; +} + describe('fillTableDisplay', () => { it('should parse cells', () => { const table = ` @@ -16,8 +24,7 @@ describe('fillTableDisplay', () => { `; const tnode = createTableTNode(table); - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); + const display = createDisplay(tnode); expect(display.maxX).toBe(1); expect(display.maxY).toBe(1); expect(display.cells).toMatchObject([ @@ -60,8 +67,7 @@ describe('fillTableDisplay', () => { `; const tnode = createTableTNode(table); - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); + const display = createDisplay(tnode); expect(display.offsetX).toBe(0); expect(display.maxX).toBe(3); expect(display.maxY).toBe(1); @@ -106,8 +112,7 @@ describe('fillTableDisplay', () => { `; const tnode = createTableTNode(table); - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); + const display = createDisplay(tnode); expect(display.maxX).toBe(2); expect(display.maxY).toBe(1); expect(display.offsetX).toBe(0); @@ -163,8 +168,7 @@ describe('fillTableDisplay', () => { `; const tnode = createTableTNode(table); - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); + const display = createDisplay(tnode); expect(display.maxX).toBe(2); expect(display.maxY).toBe(2); expect(display.offsetX).toBe(0); diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/getColumnWeights.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/getColumnWeights.test.ts deleted file mode 100644 index 7eedb6e..0000000 --- a/packages/heuristic-table-plugin/src/helpers/__tests__/getColumnWeights.test.ts +++ /dev/null @@ -1,58 +0,0 @@ -import getColumnWeights from '../getColumnWeights'; - -describe('getColumnWeights', () => { - it('should return a record which keys are column indexes, and which values are the maximum weight for this column', () => { - expect( - getColumnWeights([ - { - lenX: 1, - lenY: 1, - x: 0, - y: 0, - weight: 1 - }, - { - lenX: 1, - lenY: 1, - x: 1, - y: 0, - weight: 2 - }, - { - lenX: 1, - lenY: 1, - x: 0, - y: 1, - weight: 3 - }, - { - lenX: 1, - lenY: 1, - x: 1, - y: 1, - weight: 4 - } - ]) - ).toEqual([3, 4]); - }); - it('should split weight of cells expanding horizontaly by its length when computing max weight', () => { - expect( - getColumnWeights([ - { - lenX: 3, - lenY: 1, - x: 0, - y: 0, - weight: 9 - }, - { - lenX: 1, - lenY: 1, - x: 0, - y: 1, - weight: 4 - } - ]) - ).toEqual([4, 3, 3]); - }); -}); diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts index 1261e57..5083ac2 100644 --- a/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts +++ b/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts @@ -9,7 +9,10 @@ function cell(y: number, x: number = 0): TableCell { lenY: 1, tnode: ({} as unknown) as TNode, type: 'cell', - weight: 1, + constraints: { + contentDensity: 0, + minWidth: 0 + }, width: 10, x, y diff --git a/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts b/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts new file mode 100644 index 0000000..39a426f --- /dev/null +++ b/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts @@ -0,0 +1,103 @@ +import reduceColumnConstraints from '../reduceColumnConstraints'; + +describe('getColumnConstraints', () => { + it('should return a record which keys are column indexes, and which values are the reduced constraints for this column', () => { + expect( + reduceColumnConstraints([ + { + lenX: 1, + lenY: 1, + x: 0, + y: 0, + constraints: { + contentDensity: 3, + minWidth: 2 + } + }, + { + lenX: 1, + lenY: 1, + x: 1, + y: 0, + constraints: { + contentDensity: 4, + minWidth: 3 + } + }, + { + lenX: 1, + lenY: 1, + x: 0, + y: 1, + constraints: { + contentDensity: 3, + minWidth: 1 + } + }, + { + lenX: 1, + lenY: 1, + x: 1, + y: 1, + constraints: { + contentDensity: 2, + minWidth: 1 + } + } + ]) + ).toEqual([ + { + contentDensity: 6, + spread: 3, + minWidth: 2 + }, + { + contentDensity: 6, + spread: 4, + minWidth: 3 + } + ]); + }); + it('should split content density and min width of cells expanding horizontaly by its length when reducing constraints', () => { + expect( + reduceColumnConstraints([ + { + lenX: 3, + lenY: 1, + x: 0, + y: 0, + constraints: { + contentDensity: 9, + minWidth: 3 + } + }, + { + lenX: 1, + lenY: 1, + x: 0, + y: 1, + constraints: { + contentDensity: 4, + minWidth: 2 + } + } + ]) + ).toEqual([ + { + contentDensity: 7, + spread: 4, + minWidth: 2 + }, + { + contentDensity: 3, + spread: 3, + minWidth: 1 + }, + { + contentDensity: 3, + spread: 3, + minWidth: 1 + } + ]); + }); +}); diff --git a/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts b/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts index 235d4f3..297a1c5 100644 --- a/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts +++ b/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts @@ -1,43 +1,70 @@ import pipe from 'ramda/src/pipe'; import map from 'ramda/src/map'; -import max from 'ramda/src/max'; -import clamp from 'ramda/src/clamp'; -import multiply from 'ramda/src/multiply'; +import prop from 'ramda/src/prop'; import sum from 'ramda/src/sum'; +import min from 'ramda/src/min'; +import reduce from 'ramda/src/reduce'; +import converge from 'ramda/src/converge'; +import subtract from 'ramda/src/subtract'; +import partialRight from 'ramda/src/partialRight'; +import divide from 'ramda/src/divide'; +import add from 'ramda/src/add'; +import zip from 'ramda/src/zip'; +import multiply from 'ramda/src/multiply'; +import identity from 'ramda/src/identity'; -import { Display } from '../shared-types'; -import getColumnWeights from './getColumnWeights'; +import { Display, TColumnConstraints } from '../shared-types'; +import reduceColumnConstraints from './reduceColumnConstraints'; -const minWidth = pipe(multiply(5), max(50)); -const prefWidth = pipe(multiply(8), clamp(50, 150)); -const totalMinWidths = pipe(map(minWidth), sum); +const mapMinWidths = map(prop('minWidth')); +const mapspreads = map(prop('spread')); -// TODO: attempt const fn with https://ramdajs.com/docs/#useWith -function getResponsiveWidths( - sumOfWeights: number, - availableWidth: number, - weights: number[] -) { - return map((weight: number) => (weight / sumOfWeights) * availableWidth)( - weights - ); -} +// Compute the normal content density for each column, +// that is content density with the zero reference as +// the shortest column. +const mapNormalContentDensity = converge( + (m: number, list: number[]) => { + return map(partialRight(subtract, [m]))(list); + }, + [reduce(min, Infinity), identity] +); -export default function computeColumnWidths( - display: Display, - availableWidth: number -): number[] { - const columnWeights = getColumnWeights(display.cells); - const sumOfWeights = sum(columnWeights); - const sumOfMinWidths = totalMinWidths(columnWeights); - const responsiveWidths = getResponsiveWidths( - sumOfWeights, - availableWidth, - columnWeights - ); - const sumOfResponsiveWidths = sum(responsiveWidths); - if (sumOfResponsiveWidths < sumOfMinWidths) { - return map(prefWidth, columnWeights); +const weightContentDensity = converge( + (s: number, list: number[]) => { + return map(partialRight(divide, [s]))(list); + }, + [sum, identity] +); + +const mapWeightedColumnCoeffs = pipe( + map(prop('contentDensity')), + mapNormalContentDensity, + weightContentDensity +); + +const totalMinWidths = pipe(mapMinWidths, sum); + +export default function computeColumnWidths(display: Display): number[] { + const contentWidth = display.contentWidth; + let shouldClampWidth = !display.forceStretch; + const columnConstraints = reduceColumnConstraints(display.cells); + const minWidths = mapMinWidths(columnConstraints); + const spreads = mapspreads(columnConstraints); + const sumOfMinWidths = totalMinWidths(columnConstraints); + if (contentWidth < sumOfMinWidths) { + return minWidths; } - return responsiveWidths; + const widthToAssign = contentWidth - sumOfMinWidths; + const clampWidths = pipe( + zip(spreads), + map(reduce(min, Infinity)) + ); + const columns = pipe( + mapWeightedColumnCoeffs, + map(multiply(widthToAssign)), + zip(minWidths), + map(reduce(add, 0)), + shouldClampWidth ? clampWidths : identity + )(columnConstraints); + return columns; } diff --git a/packages/heuristic-table-plugin/src/helpers/computeTNodeWeight.ts b/packages/heuristic-table-plugin/src/helpers/computeTNodeWeight.ts deleted file mode 100644 index b3460dd..0000000 --- a/packages/heuristic-table-plugin/src/helpers/computeTNodeWeight.ts +++ /dev/null @@ -1,87 +0,0 @@ -import pick from 'ramda/src/pick'; -import pipe from 'ramda/src/pipe'; -import sum from 'ramda/src/sum'; -import map from 'ramda/src/map'; -import values from 'ramda/src/values'; -import multiply from 'ramda/src/multiply'; -import { TextStyle } from 'react-native'; -import { TNode } from 'react-native-render-html'; -import { TText } from '@native-html/transient-render-engine'; - -const fontWeightCoeffs: Record['fontWeight'], number> = { - '100': 0.8, - '200': 0.85, - '300': 0.9, - '400': 1, - '500': 1.1, - '600': 1.2, - '700': 1.3, - '800': 1.4, - '900': 1.5, - bold: 1.3, - normal: 1 -}; - -function toNumber(value: string | number | undefined) { - if (typeof value === 'number') { - return value; - } - return 0; -} - -type NativeBlockRetStyle = TNode['styles']['nativeBlockRet']; -type SpacingFields = Extract< - keyof NativeBlockRetStyle, - | 'borderLeftWidth' - | 'borderRightWidth' - | 'marginLeft' - | 'marginRight' - | 'paddingLeft' - | 'paddingRight' ->; - -const hspacingFields: Array = [ - 'borderLeftWidth', - 'borderRightWidth', - 'marginLeft', - 'marginRight', - 'paddingLeft', - 'paddingRight' -]; - -/** - * 14ddp = 1wg - */ -const WEIGHT_U = 14; - -const computeHzWeight = pipe< - NativeBlockRetStyle, - Pick, - Array, - number[], - number, - number ->( - pick(hspacingFields), - values as any, - map(toNumber), - sum, - multiply(1 / WEIGHT_U) -); - -export default function computeTNodeWeight(tnode: TNode): number { - const hspaceWeight = computeHzWeight(tnode.styles.nativeBlockRet); - if (tnode instanceof TText) { - const fontSize = tnode.styles.nativeTextFlow.fontSize ?? WEIGHT_U; - const fontWeight = tnode.styles.nativeTextFlow.fontWeight ?? 'normal'; - const fontWeightCoeff = fontWeightCoeffs[fontWeight] ?? 1; - return ( - (((tnode.data.length + 1) * fontSize) / WEIGHT_U) * fontWeightCoeff + - hspaceWeight - ); - } - return ( - hspaceWeight + - tnode.children.reduce((prev, curr) => computeTNodeWeight(curr) + prev, 0) - ); -} diff --git a/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts b/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts index 2c4ba03..3fa52af 100644 --- a/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts +++ b/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts @@ -1,14 +1,15 @@ import { TNode } from 'react-native-render-html'; -import { Display } from '../shared-types'; -import computeTNodeWeight from './computeTNodeWeight'; +import { Display, DisplayCell, Settings } from '../shared-types'; +import TCellConstraintsComputer from './TCellConstraintsComputer'; -export function createEmptyDisplay(): Display { +export function createEmptyDisplay(config: Settings): Display { return { offsetX: 0, occupiedCoordinates: [], - maxY: 0, - maxX: 0, - cells: [] + maxY: -1, + maxX: -1, + cells: [], + ...config }; } @@ -21,9 +22,13 @@ function computeOffsetX(display: Display, startX: number, startY: number) { }, 0); } -export default function fillTableDisplay(tnode: TNode, display: Display) { +export default function fillTableDisplay( + tnode: TNode, + display: Display, + computer: TCellConstraintsComputer +) { if (tnode.tagName === 'tr') { - display.maxY = tnode.nodeIndex; + display.maxY = display.maxY + 1; display.offsetX = 0; } if (tnode.tagName === 'th' || tnode.tagName === 'td') { @@ -35,14 +40,14 @@ export default function fillTableDisplay(tnode: TNode, display: Display) { const startY = display.maxY; const startX = computeOffsetX(display, initialStartX, display.maxY) + initialStartX; - const weight = computeTNodeWeight(tnode); - const cell = { + const constraints = computer.computeCellConstraints(tnode); + const cell: DisplayCell = { lenX, lenY, x: startX, y: startY, tnode, - weight + constraints }; display.cells.push(cell); display.offsetX += lenX - 1; @@ -53,6 +58,8 @@ export default function fillTableDisplay(tnode: TNode, display: Display) { } display.maxX = Math.max(display.maxX, initialStartX); } else { - tnode.children.forEach((child) => fillTableDisplay(child, display)); + tnode.children.forEach((child) => + fillTableDisplay(child, display, computer) + ); } } diff --git a/packages/heuristic-table-plugin/src/helpers/getColumnWeights.ts b/packages/heuristic-table-plugin/src/helpers/getColumnWeights.ts deleted file mode 100644 index da4e8ae..0000000 --- a/packages/heuristic-table-plugin/src/helpers/getColumnWeights.ts +++ /dev/null @@ -1,42 +0,0 @@ -import groupBy from 'ramda/src/groupBy'; -import prop from 'ramda/src/prop'; -import pipe from 'ramda/src/pipe'; -import reduce from 'ramda/src/reduce'; -import max from 'ramda/src/max'; -import map from 'ramda/src/map'; -import flatten from 'ramda/src/flatten'; -import values from 'ramda/src/values'; -import mapObjIndexed from 'ramda/src/mapObjIndexed'; - -import { CellProperties } from '../shared-types'; - -const getColumnMax = pipe( - map(prop('weight')), - reduce(max, 0) -); - -function splitColspanCells(cell: CellProperties) { - if (cell.lenX > 1) { - const cells: CellProperties[] = []; - for (let i = 0; i < cell.lenX; i++) { - cells[i] = { - lenX: 1, - lenY: cell.lenY, - weight: cell.weight / cell.lenX, - x: cell.x + i, - y: cell.y - }; - } - return cells; - } - return cell; -} - -const getColumnWeights = pipe( - pipe(map(splitColspanCells), flatten), - groupBy(pipe(prop('x'), String)), - mapObjIndexed(getColumnMax), - values -); - -export default getColumnWeights; diff --git a/packages/heuristic-table-plugin/src/helpers/measure.ts b/packages/heuristic-table-plugin/src/helpers/measure.ts new file mode 100644 index 0000000..e41adb8 --- /dev/null +++ b/packages/heuristic-table-plugin/src/helpers/measure.ts @@ -0,0 +1,50 @@ +import pick from 'ramda/src/pick'; +import pipe from 'ramda/src/pipe'; +import sum from 'ramda/src/sum'; +import map from 'ramda/src/map'; +import values from 'ramda/src/values'; +import { TNode } from 'react-native-render-html'; + +type NativeBlockRetStyle = TNode['styles']['nativeBlockRet']; +type SpacingFields = Extract< + keyof NativeBlockRetStyle, + | 'borderLeftWidth' + | 'borderRightWidth' + | 'marginLeft' + | 'marginRight' + | 'paddingLeft' + | 'paddingRight' +>; + +const hmarginFields = ['marginLeft', 'marginRight'] as const; + +const hspacingFields: Array = [ + 'borderLeftWidth', + 'borderRightWidth', + 'paddingLeft', + 'paddingRight', + ...hmarginFields +]; + +function toNumber(value: string | number | undefined) { + if (typeof value === 'number') { + return value; + } + return 0; +} + +export const getHorizontalMargins = pipe< + NativeBlockRetStyle, + Pick, + Array, + number[], + number +>(pick(hmarginFields), values as any, map(toNumber), sum); + +export const getHorizontalSpacing = pipe< + NativeBlockRetStyle, + Pick, + Array, + number[], + number +>(pick(hspacingFields), values as any, map(toNumber), sum); diff --git a/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts b/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts new file mode 100644 index 0000000..bc10e06 --- /dev/null +++ b/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts @@ -0,0 +1,72 @@ +import groupBy from 'ramda/src/groupBy'; +import prop from 'ramda/src/prop'; +import pipe from 'ramda/src/pipe'; +import reduce from 'ramda/src/reduce'; +import map from 'ramda/src/map'; +import flatten from 'ramda/src/flatten'; +import values from 'ramda/src/values'; +import mapObjIndexed from 'ramda/src/mapObjIndexed'; + +import { + CellProperties, + TCellConstraints, + TColumnConstraints +} from '../shared-types'; + +const getColumnMetrics = pipe< + CellProperties[], + TCellConstraints[], + TColumnConstraints +>( + map(prop('constraints')), + reduce( + (columnConstraints, cellConstraints) => { + return { + minWidth: Math.max( + columnConstraints.minWidth, + cellConstraints.minWidth + ), + contentDensity: + columnConstraints.contentDensity + cellConstraints.contentDensity, + spread: Math.max( + columnConstraints.spread, + cellConstraints.contentDensity + ) + }; + }, + { + minWidth: 0, + spread: 0, + contentDensity: 0 + } + ) +); + +function splitColspanCells(cell: CellProperties) { + if (cell.lenX > 1) { + const cells: CellProperties[] = []; + for (let i = 0; i < cell.lenX; i++) { + cells[i] = { + lenX: 1, + lenY: cell.lenY, + constraints: { + minWidth: cell.constraints.minWidth / cell.lenX, + contentDensity: cell.constraints.contentDensity / cell.lenX + }, + x: cell.x + i, + y: cell.y + }; + } + return cells; + } + return cell; +} + +const reduceColumnConstraints = pipe( + pipe(map(splitColspanCells), flatten), + groupBy(pipe(prop('x'), String)), + mapObjIndexed(getColumnMetrics), + values +); + +export default reduceColumnConstraints; diff --git a/packages/heuristic-table-plugin/src/shared-types.ts b/packages/heuristic-table-plugin/src/shared-types.ts index 60f6e4a..0aa16f0 100644 --- a/packages/heuristic-table-plugin/src/shared-types.ts +++ b/packages/heuristic-table-plugin/src/shared-types.ts @@ -5,6 +5,7 @@ import { TBlock, TNode } from 'react-native-render-html'; +import TableLayout from './TableLayout'; /** * @public @@ -14,13 +15,47 @@ export interface Coordinates { y: number; } +/** + * @public + */ +export interface TConstraintsBase { + /** + * The minimum width for this text. + */ + minWidth: number; + /** + * The total textual density for one column (or cell). + */ + contentDensity: number; +} + +/** + * @public + */ +export interface TColumnConstraints extends TConstraintsBase { + /** + * The minimum number for the text in one column to hold in one line. + * + * @remarks spread and contentDensity only differ when applied to a + * whole column. Spread width will be the maximum of cell content densities, + * while the column content density will be the sum of the cell content + * densities. + */ + spread: number; +} + +/** + * @public + */ +export interface TCellConstraints extends TConstraintsBase {} + /** * @public */ export interface CellProperties extends Coordinates { lenX: number; lenY: number; - weight: number; + constraints: TCellConstraints; } /** @@ -43,7 +78,7 @@ export interface TableFlexRowContainer { /** * A container to display items in columns - * (think 'flex-dierection: column') + * (think 'flex-direction: column') * * @public */ @@ -87,7 +122,18 @@ export type TableRenderNode = | TableFlexRowContainer | TableRoot; -export interface Display { +export interface Settings { + /** + * When true, force the table to stretch to the available width. + */ + forceStretch?: boolean; + /** + * Available width prior to scrolling. + */ + contentWidth: number; +} + +export interface Display extends Settings { maxY: number; maxX: number; occupiedCoordinates: Array; @@ -101,6 +147,10 @@ export interface Display { * @public */ export interface HeuristicTablePluginConfig { + /** + * When true, force the table to stretch to the available width. + */ + forceStretch?: boolean; /** * Customize cells appearance with this function. * @@ -115,8 +165,7 @@ export interface HeuristicTablePluginConfig { * @public */ export interface HTMLTableProps extends CustomTagRendererProps { - root: TableRoot; - contentWidth: number; + layout: TableLayout; config: HeuristicTablePluginConfig; } diff --git a/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts index e65e191..e03c099 100644 --- a/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts +++ b/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts @@ -29,7 +29,12 @@ export default function useHtmlTableCellProps({ flexGrow: 1, flexShrink: 0, ...spanStyles, - ...styleFromConfig + ...styleFromConfig, + width: cell.width, + marginLeft: 0, + marginRight: 0, + marginTop: 0, + marginBottom: 0 }; return { ...props, diff --git a/packages/heuristic-table-plugin/src/useHtmlTableProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts index c2ea52c..9bc8022 100644 --- a/packages/heuristic-table-plugin/src/useHtmlTableProps.ts +++ b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts @@ -4,26 +4,19 @@ import { TBlock, TNode } from 'react-native-render-html'; -import computeColumnWidths from './helpers/computeColumnWidths'; -import createRenderTree from './helpers/createRenderTree'; -import fillTableDisplay, { - createEmptyDisplay -} from './helpers/fillTableDisplay'; -import { HTMLTableProps } from './shared-types'; +import { Settings, HTMLTableProps } from './shared-types'; +import TableLayout from './TableLayout'; -function useRenderTree({ +function useTableLayout({ tnode, - contentWidth + settings }: { tnode: TNode; - contentWidth: number; + settings: Settings; }) { return useMemo(() => { - const display = createEmptyDisplay(); - fillTableDisplay(tnode, display); - const columnWidths = computeColumnWidths(display, contentWidth); - return createRenderTree(display, columnWidths); - }, [tnode, contentWidth]); + return new TableLayout(tnode, settings); + }, [tnode, settings]); } /** @@ -36,7 +29,6 @@ function useRenderTree({ * * @public */ - export default function useHtmlTableProps( { sharedProps, tnode, ...props }: CustomTagRendererProps, options: { @@ -49,15 +41,19 @@ export default function useHtmlTableProps( const { renderersProps: { table } } = sharedProps; + const forceStretch = table?.forceStretch ?? false; const contentWidth = typeof options.overrideContentWidth === 'number' ? options.overrideContentWidth : sharedProps.contentWidth; - const tree = useRenderTree({ tnode, contentWidth }); + const settings = useMemo(() => ({ contentWidth, forceStretch }), [ + contentWidth, + forceStretch + ]); + const layout = useTableLayout({ tnode, settings }); return { - root: tree, + layout, config: table || {}, - contentWidth, sharedProps, tnode, ...props diff --git a/packages/heuristic-table-plugin/test.html b/packages/heuristic-table-plugin/test.html new file mode 100644 index 0000000..6064786 --- /dev/null +++ b/packages/heuristic-table-plugin/test.html @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From fcfd4b7be07da5fe22e63574a3695c65c598b035 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 4 Mar 2021 11:14:17 -0300 Subject: [PATCH 20/94] feat: pass markers from table root to cells --- .../heuristic-table-plugin/src/HTMLTable.tsx | 6 ++++- .../src/TreeRenderer.tsx | 25 +++++++++++++------ 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/heuristic-table-plugin/src/HTMLTable.tsx b/packages/heuristic-table-plugin/src/HTMLTable.tsx index e784f2e..03deb06 100644 --- a/packages/heuristic-table-plugin/src/HTMLTable.tsx +++ b/packages/heuristic-table-plugin/src/HTMLTable.tsx @@ -52,7 +52,11 @@ const HTMLTable = memo(function HTMLTable({ ) }}> - {React.createElement(TreeRenderer, { node: layout.renderTree, config })} + {React.createElement(TreeRenderer, { + node: layout.renderTree, + config, + rootMarkers: props.markers + })} ); diff --git a/packages/heuristic-table-plugin/src/TreeRenderer.tsx b/packages/heuristic-table-plugin/src/TreeRenderer.tsx index 30dba8b..2c183d5 100644 --- a/packages/heuristic-table-plugin/src/TreeRenderer.tsx +++ b/packages/heuristic-table-plugin/src/TreeRenderer.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { StyleSheet, View } from 'react-native'; -import { TNodeRenderer } from 'react-native-render-html'; +import { Markers, TNodeRenderer } from 'react-native-render-html'; import { HeuristicTablePluginConfig, TableRenderNode } from './shared-types'; const styles = StyleSheet.create({ @@ -10,19 +10,20 @@ const styles = StyleSheet.create({ export default function TreeRenderer({ node, + rootMarkers, config }: { node: TableRenderNode; config?: HeuristicTablePluginConfig; + + rootMarkers: Markers; }) { if (node.type === 'cell') { - const { width } = node; - const style = { width, flexGrow: 1 }; return ( - + @@ -30,7 +31,12 @@ export default function TreeRenderer({ } if (node.type === 'root' || node.type === 'col-container') { const children = (node.children as TableRenderNode[]).map((v, i) => - React.createElement(TreeRenderer, { node: v, key: i, config }) + React.createElement(TreeRenderer, { + node: v, + key: i, + config, + rootMarkers + }) ); return {children}; } @@ -38,7 +44,12 @@ export default function TreeRenderer({ return ( {node.children.map((v, i) => - React.createElement(TreeRenderer, { node: v, key: i, config }) + React.createElement(TreeRenderer, { + node: v, + key: i, + config, + rootMarkers + }) )} ); From c96277ffeebe476b54dda9b57c583c7755223602 Mon Sep 17 00:00:00 2001 From: "Jules Sam. Randolph" Date: Thu, 4 Mar 2021 11:14:44 -0300 Subject: [PATCH 21/94] chore(demo): add wide table example --- example/HeuristicTableExample.js | 292 +++++++++++++++++-------------- 1 file changed, 158 insertions(+), 134 deletions(-) diff --git a/example/HeuristicTableExample.js b/example/HeuristicTableExample.js index 4b5382c..79d3cb2 100644 --- a/example/HeuristicTableExample.js +++ b/example/HeuristicTableExample.js @@ -105,7 +105,6 @@ but it should be a good enough approximation for a majority of use cases. `; const tableSpan = ` -

Table with colspan cell

@@ -177,143 +176,168 @@ const tableSpan = `
`; -const tableTest = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Cinq étapes d'évaluationCritères de gravité
1. Variables physiologiquesGCS < 13
PAS < 90 mmHg
SpO2 < 90%
2. Eléments de cinétique - Éjection d'un véhicule
Autre passager décédé dans le même - véhicule
Chute > 6 m
Victime projetée ou écrasée
Appréciation - globale (déformation du véhicule, vitesse estimée, absence de casque, - absence de ceinture de sécurité)
Blast -
3. Lésions anatomiques - Trauma pénétrant de la tête, du cou, du thorax, de l'abdomen, du bassin, - du bras ou de la cuisse
Volet thoracique
Brûlure sévère, - inhalation de fumée associée
Fracas du bassin
Suspicion - d'atteinte médullaire
Amputation au niveau du poignet, de la - cheville, ou au dessus
Ischémie aiguë de membre -
4. Réanimation préhospitalière - Ventilation assistée
Remplissage > 1000 ml de colloïdes
Catécholamines
Pantalon - antichoc gonflé -
5. Terrain (à évaluer) - Age > 65 ans
Insuffisance cardiaque ou coronarienne
Insuffisance - respiratoire
Grossesse (2ème et - 3èmetrimestres)
Troubles de la crase sanguine -
- `; - -const htmlTest3 = ` +const wideTable = ` +

Wide table overflowing horizontaly

- - - - - - - - - - - - - - - - - - - - -`; + + + + Name + + + Position + + + Office + + + Age + + + Start date + + + Salary + + + + + + Airi Satou + Accountant + Tokyo + 33 + 2008/11/28 + $162,700 + + + Angelica Ramos + Chief Executive Officer (CEO) + London + 47 + 2009/10/09 + $1,200,000 + + + Ashton Cox + Junior Technical Author + San Francisco + 66 + 2009/01/12 + $86,000 + + + Bradley Greer + Software Engineer + London + 41 + 2012/10/13 + $132,000 + + + Brenden Wagner + Software Engineer + San Francisco + 28 + 2011/06/07 + $206,850 + + + Brielle Williamson + Integration Specialist + New York + 61 + 2012/12/02 + $372,000 + + + Bruno Nash + Software Engineer + London + 38 + 2011/05/03 + $163,500 + + + Caesar Vance + Pre-Sales Support + New York + 21 + 2011/12/12 + $106,450 + + + Cara Stevens + Sales Assistant + New York + 46 + 2011/12/06 + $145,600 + + + Cedric Kelly + Senior Javascript Developer + Edinburgh + 22 + 2012/03/29 + $433,060 + + + +`; const htmlConfig = { renderers: tableRenderers, @@ -367,7 +391,7 @@ export default function HeuristicTable({ return ( Date: Thu, 4 Mar 2021 15:02:15 -0300 Subject: [PATCH 22/94] chore: remove "alpha" mention in demo --- example/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/App.js b/example/App.js index 5bd9ab0..9e68ee2 100644 --- a/example/App.js +++ b/example/App.js @@ -177,7 +177,7 @@ function HomeScreen() {