├── .editorconfig
├── .eslintrc.js
├── .github
├── ISSUE_TEMPLATE
│ ├── bug_report.md
│ ├── config.yml
│ ├── enhancement.md
│ └── feature_request.md
└── workflows
│ ├── codeql-analysis.yml
│ ├── core.yml
│ ├── heuristic-table.yml
│ ├── iframe.yml
│ └── table.yml
├── .gitignore
├── .prettierrc.js
├── .yarn
├── plugins
│ └── @yarnpkg
│ │ └── plugin-interactive-tools.cjs
└── releases
│ └── yarn-3.0.2.cjs
├── .yarnrc.yml
├── LICENSE
├── README.md
├── codecov.yml
├── commitlint.config.js
├── example
├── .expo-shared
│ └── assets.json
├── .gitignore
├── App.js
├── ClickTable.js
├── CustomExample.js
├── HeuristicTableExample.js
├── SimpleExample.js
├── YoutubeExample.js
├── app.config.js
├── assets
│ ├── favicon.png
│ └── icon.png
├── babel.config.js
├── index.js
├── metro.config.js
└── package.json
├── images
├── TableStyleSpecs.png
├── TableStyleSpecs.svg
├── adaptative.jpeg
├── android.gif
├── expo-example.png
└── scalesPageToFit.jpg
├── package.json
├── packages
├── heuristic-table-plugin
│ ├── .gitignore
│ ├── .release-it.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── docs
│ │ ├── heuristic-table-plugin.cellproperties.constraints.md
│ │ ├── heuristic-table-plugin.cellproperties.lenx.md
│ │ ├── heuristic-table-plugin.cellproperties.leny.md
│ │ ├── heuristic-table-plugin.cellproperties.md
│ │ ├── heuristic-table-plugin.coordinates.md
│ │ ├── heuristic-table-plugin.coordinates.x.md
│ │ ├── heuristic-table-plugin.coordinates.y.md
│ │ ├── heuristic-table-plugin.displaycell.md
│ │ ├── heuristic-table-plugin.displaycell.tnode.md
│ │ ├── heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md
│ │ ├── heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md
│ │ ├── heuristic-table-plugin.heuristictablepluginconfig.md
│ │ ├── heuristic-table-plugin.htmltable.md
│ │ ├── heuristic-table-plugin.htmltableprops.config.md
│ │ ├── heuristic-table-plugin.htmltableprops.layout.md
│ │ ├── heuristic-table-plugin.htmltableprops.md
│ │ ├── heuristic-table-plugin.htmltableprops.settings.md
│ │ ├── heuristic-table-plugin.md
│ │ ├── heuristic-table-plugin.renderers.md
│ │ ├── heuristic-table-plugin.tablecell.md
│ │ ├── heuristic-table-plugin.tablecell.type.md
│ │ ├── heuristic-table-plugin.tablecell.width.md
│ │ ├── heuristic-table-plugin.tablecellpropsfromparent.cell.md
│ │ ├── heuristic-table-plugin.tablecellpropsfromparent.config.md
│ │ ├── heuristic-table-plugin.tablecellpropsfromparent.md
│ │ ├── heuristic-table-plugin.tableflexcolumncontainer.children.md
│ │ ├── heuristic-table-plugin.tableflexcolumncontainer.md
│ │ ├── heuristic-table-plugin.tableflexcolumncontainer.type.md
│ │ ├── heuristic-table-plugin.tableflexrowcontainer.children.md
│ │ ├── heuristic-table-plugin.tableflexrowcontainer.md
│ │ ├── heuristic-table-plugin.tableflexrowcontainer.type.md
│ │ ├── heuristic-table-plugin.tablerenderer.md
│ │ ├── heuristic-table-plugin.tableroot.children.md
│ │ ├── heuristic-table-plugin.tableroot.md
│ │ ├── heuristic-table-plugin.tableroot.type.md
│ │ ├── heuristic-table-plugin.tdrenderer.md
│ │ ├── heuristic-table-plugin.threnderer.md
│ │ ├── heuristic-table-plugin.usehtmltablecellprops.md
│ │ ├── heuristic-table-plugin.usehtmltableprops.md
│ │ └── index.md
│ ├── etc
│ │ └── heuristic-table-plugin.api.md
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── HTMLTable.tsx
│ │ ├── TableLayout.ts
│ │ ├── TableRenderer.ts
│ │ ├── TdRenderer.tsx
│ │ ├── ThRenderer.ts
│ │ ├── TreeRenderer.tsx
│ │ ├── helpers
│ │ │ ├── TCellConstraintsComputer.ts
│ │ │ ├── __tests__
│ │ │ │ ├── createRenderTree.test.ts
│ │ │ │ ├── fillTableDisplay.test.ts
│ │ │ │ ├── makeRows.test.ts
│ │ │ │ ├── reduceColumnConstraints.test.ts
│ │ │ │ └── utils.ts
│ │ │ ├── computeColumnWidths.ts
│ │ │ ├── createRenderTree.ts
│ │ │ ├── fillTableDisplay.ts
│ │ │ ├── makeRows.ts
│ │ │ ├── measure.ts
│ │ │ └── reduceColumnConstraints.ts
│ │ ├── index.ts
│ │ ├── shared-types.ts
│ │ ├── useHtmlTableCellProps.ts
│ │ └── useHtmlTableProps.ts
│ ├── test.html
│ ├── tsconfig.build.json
│ └── tsconfig.json
├── iframe-plugin
│ ├── .eslintignore
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .release-it.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── docs
│ │ ├── iframe-plugin.htmliframe.md
│ │ ├── iframe-plugin.htmliframeprops.htmlattribs.md
│ │ ├── iframe-plugin.htmliframeprops.md
│ │ ├── iframe-plugin.htmliframeprops.onlinkpress.md
│ │ ├── iframe-plugin.htmliframeprops.scalefactor.md
│ │ ├── iframe-plugin.htmliframeprops.source.md
│ │ ├── iframe-plugin.htmliframeprops.style.md
│ │ ├── iframe-plugin.htmliframeprops.webview.md
│ │ ├── iframe-plugin.htmliframeprops.webviewprops.md
│ │ ├── iframe-plugin.iframeconfig.injectedcssstyles.md
│ │ ├── iframe-plugin.iframeconfig.md
│ │ ├── iframe-plugin.iframeconfig.removebodyspacing.md
│ │ ├── iframe-plugin.iframeconfig.scalespagetofit.md
│ │ ├── iframe-plugin.iframeconfig.webviewprops.md
│ │ ├── iframe-plugin.iframemodel.md
│ │ ├── iframe-plugin.iframerenderer.md
│ │ ├── iframe-plugin.md
│ │ ├── iframe-plugin.usehtmliframeprops.md
│ │ └── index.md
│ ├── etc
│ │ └── iframe-plugin.api.md
│ ├── jest.config.js
│ ├── package.json
│ ├── src
│ │ ├── HTMLIframe.tsx
│ │ ├── IframeRenderer.ts
│ │ ├── __tests__
│ │ │ ├── IframeRenderer.test.tsx
│ │ │ └── extractPrintDimensions.test.ts
│ │ ├── extractPrintDimensions.ts
│ │ ├── index.ts
│ │ └── useHtmlIframeProps.ts
│ ├── tsconfig.build.json
│ └── tsconfig.json
├── plugins-core
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .release-it.js
│ ├── CHANGELOG.md
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── etc
│ │ └── plugins-core.api.md
│ ├── package.json
│ ├── src
│ │ ├── __tests__
│ │ │ └── linkPressTargetToOnDOMLinkPressArgs.test.ts
│ │ ├── index.ts
│ │ └── linkPressTargetToOnDOMLinkPressArgs.ts
│ ├── tsconfig.build.json
│ └── tsconfig.json
├── release-config
│ ├── index.js
│ └── package.json
└── table-plugin
│ ├── .eslintignore
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── .npmignore
│ ├── .release-it.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── babel.config.js
│ ├── docs
│ ├── index.md
│ ├── table-plugin.cssrulesfromspecs.md
│ ├── table-plugin.defaulttablestylesspecs.md
│ ├── table-plugin.htmltable.md
│ ├── table-plugin.htmltablebaseprops.html.md
│ ├── table-plugin.htmltablebaseprops.htmlattribs.md
│ ├── table-plugin.htmltablebaseprops.md
│ ├── table-plugin.htmltablebaseprops.onlinkpress.md
│ ├── table-plugin.htmltablebaseprops.sourcebaseurl.md
│ ├── table-plugin.htmltablebaseprops.webview.md
│ ├── table-plugin.htmltableprops.md
│ ├── table-plugin.htmltablestats.md
│ ├── table-plugin.htmltablestats.numofchars.md
│ ├── table-plugin.htmltablestats.numofcolumns.md
│ ├── table-plugin.htmltablestats.numofrows.md
│ ├── table-plugin.md
│ ├── table-plugin.tableaccuratecontentheightstate.contentheight.md
│ ├── table-plugin.tableaccuratecontentheightstate.md
│ ├── table-plugin.tableaccuratecontentheightstate.type.md
│ ├── table-plugin.tableconfig.animationduration.md
│ ├── table-plugin.tableconfig.animationtype.md
│ ├── table-plugin.tableconfig.computecontainerheight.md
│ ├── table-plugin.tableconfig.computeheuristiccontentheight.md
│ ├── table-plugin.tableconfig.cssrules.md
│ ├── table-plugin.tableconfig.displaymode.md
│ ├── table-plugin.tableconfig.maxscale.md
│ ├── table-plugin.tableconfig.md
│ ├── table-plugin.tableconfig.style.md
│ ├── table-plugin.tableconfig.tablestylespecs.md
│ ├── table-plugin.tableconfig.webviewprops.md
│ ├── table-plugin.tablecontentheightstate.md
│ ├── table-plugin.tableheuristiccontentheightstate.contentheight.md
│ ├── table-plugin.tableheuristiccontentheightstate.md
│ ├── table-plugin.tableheuristiccontentheightstate.type.md
│ ├── table-plugin.tablemodel.md
│ ├── table-plugin.tablerenderer.md
│ ├── table-plugin.tablestylespecs.cellpaddingem.md
│ ├── table-plugin.tablestylespecs.columnsborderwidthpx.md
│ ├── table-plugin.tablestylespecs.fitcontainerheight.md
│ ├── table-plugin.tablestylespecs.fitcontainerwidth.md
│ ├── table-plugin.tablestylespecs.fontfamily.md
│ ├── table-plugin.tablestylespecs.fontsizepx.md
│ ├── table-plugin.tablestylespecs.linkcolor.md
│ ├── table-plugin.tablestylespecs.md
│ ├── table-plugin.tablestylespecs.outerbordercolor.md
│ ├── table-plugin.tablestylespecs.outerborderwidthpx.md
│ ├── table-plugin.tablestylespecs.rowsborderwidthpx.md
│ ├── table-plugin.tablestylespecs.selectabletext.md
│ ├── table-plugin.tablestylespecs.tdbordercolor.md
│ ├── table-plugin.tablestylespecs.thbordercolor.md
│ ├── table-plugin.tablestylespecs.thevenbackground.md
│ ├── table-plugin.tablestylespecs.thevencolor.md
│ ├── table-plugin.tablestylespecs.thoddbackground.md
│ ├── table-plugin.tablestylespecs.thoddcolor.md
│ ├── table-plugin.tablestylespecs.trevenbackground.md
│ ├── table-plugin.tablestylespecs.trevencolor.md
│ ├── table-plugin.tablestylespecs.troddbackground.md
│ ├── table-plugin.tablestylespecs.troddcolor.md
│ └── table-plugin.usehtmltableprops.md
│ ├── etc
│ └── table-plugin.api.md
│ ├── jest.config.js
│ ├── jest
│ └── setupJest.js
│ ├── package.json
│ ├── src
│ ├── HTMLTable.tsx
│ ├── TableRenderer.ts
│ ├── __tests__
│ │ ├── HTMLTable.test.tsx
│ │ ├── extractHtmlAndStatsFromTableDomNode.test.ts
│ │ └── setup.ts
│ ├── css-rules.ts
│ ├── extractHtmlAndStatsFromTableDomNode.ts
│ ├── index.ts
│ ├── types.ts
│ └── useHtmlTableProps.ts
│ ├── tsconfig.build.json
│ └── tsconfig.json
├── patches
├── @release-it-conventional-changelog.patch
└── release-it.patch
├── tsconfig-base.json
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | indent_style = space
10 | indent_size = 2
11 |
12 | end_of_line = lf
13 | charset = utf-8
14 | trim_trailing_whitespace = true
15 | insert_final_newline = true
16 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: ['@react-native-community', 'plugin:compat/recommended', 'prettier'],
4 | parser: '@typescript-eslint/parser',
5 | plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc'],
6 | rules: {
7 | 'comma-dangle': ['error', 'never'],
8 | '@typescript-eslint/no-unused-vars': [
9 | 'error',
10 | { vars: 'all', args: 'after-used', ignoreRestSiblings: true }
11 | ]
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: true
2 | contact_links:
3 | - name: Getting Help
4 | url: https://discord.gg/3B9twTMEzb
5 | about: Visit our Discord "plugins" channel.
6 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/enhancement.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Enhancement
3 | about: Describe a non-feature change you wish to take place.
4 | title: ''
5 | labels: 'enhancement'
6 | ---
7 |
8 | ### Oath
9 |
10 | I swear that I have completed these tasks before submitting:
11 |
12 | - [ ] I have read the README
13 | - [ ] I have checked that the issue has not been reported yet
14 | - [ ] I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin
15 | ### Decision table
16 |
17 |
25 |
26 | - [ ] The change I am requesting is not a new React prop
27 | - [ ] The change I am requesting is not support for a standard HTML attribute,
28 | CSS rule or anything related to HTML and CSS standards
29 | - [ ] The change I am requesting is not support or compatibility with a React
30 | Native feature
31 |
32 |
33 | ### Enhancement
34 |
35 |
39 |
40 | (Describe the enhancement here.)
41 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature Request
3 | about: Describe a new feature for this library.
4 | title: ''
5 | labels: 'new feature'
6 | ---
7 |
8 | ### Oath
9 |
10 | I swear that I have completed these tasks before submitting:
11 |
12 | - [ ] I have read the README
13 | - [ ] I have checked that the feature request has not been reported yet
14 | - [ ] I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin
15 |
16 | ### Decision table
17 |
18 |
26 |
27 |
28 | - [ ] The change I am requesting is not concerning performance
29 | - [ ] The change I am requesting is not concerning code style, compliance with
30 | official guidelines and recommendations, third-party deprecations,
31 | refactoring or development tooling
32 |
33 | ### Feature
34 |
35 |
40 |
41 | (Describe the feature here.)
42 |
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | name: "CodeQL"
7 |
8 | on:
9 | push:
10 | branches: [master]
11 | pull_request:
12 | # The branches below must be a subset of the branches above
13 | branches: [master]
14 | schedule:
15 | - cron: '0 3 * * 3'
16 |
17 | jobs:
18 | analyze:
19 | name: Analyze
20 | runs-on: ubuntu-latest
21 |
22 | strategy:
23 | fail-fast: false
24 | matrix:
25 | # Override automatic language detection by changing the below list
26 | # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
27 | language: ['javascript']
28 | # Learn more...
29 | # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
30 |
31 | steps:
32 | - name: Checkout repository
33 | uses: actions/checkout@v2
34 | with:
35 | # We must fetch at least the immediate parents so that if this is
36 | # a pull request then we can checkout the head.
37 | fetch-depth: 2
38 |
39 | # If this run was triggered by a pull request event, then checkout
40 | # the head of the pull request instead of the merge commit.
41 | - run: git checkout HEAD^2
42 | if: ${{ github.event_name == 'pull_request' }}
43 |
44 | # Initializes the CodeQL tools for scanning.
45 | - name: Initialize CodeQL
46 | uses: github/codeql-action/init@v1
47 | with:
48 | languages: ${{ matrix.language }}
49 | # If you wish to specify custom queries, you can do so here or in a config file.
50 | # By default, queries listed here will override any specified in a config file.
51 | # Prefix the list here with "+" to use these queries and those in the config file.
52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main
53 |
54 | # ℹ️ Command-line programs to run using the OS shell.
55 | # 📚 https://git.io/JvXDl
56 |
57 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
58 | # and modify them (or add more) to build your code if your project
59 | # uses a compiled language
60 |
61 | #- run: |
62 | # make bootstrap
63 | # make release
64 |
65 | - name: Perform CodeQL Analysis
66 | uses: github/codeql-action/analyze@v1
67 |
--------------------------------------------------------------------------------
/.github/workflows/core.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, run JS and Typescript tests.
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: core
5 |
6 | on: [push, pull_request]
7 |
8 | jobs:
9 | test:
10 | name: Testing
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [14.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v2
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - run: yarn install --immutable
24 | - run: yarn workspace @native-html/plugins-core test:ts
25 | name: Typescript Tests
26 | - run: yarn workspace @native-html/plugins-core test:lint
27 | name: Linting Tests
28 | - run: yarn workspace @native-html/plugins-core test:jest --coverage
29 | name: Behavior Tests
30 | - run: yarn workspace @native-html/plugins-core build
31 | name: Build
32 | - uses: codecov/codecov-action@v1
33 | with:
34 | flags: plugins-core
35 | fail_ci_if_error: true
36 |
--------------------------------------------------------------------------------
/.github/workflows/heuristic-table.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, run JS and Typescript tests.
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: heuristic-table
5 |
6 | on: [push, pull_request]
7 |
8 | jobs:
9 | test:
10 | name: Testing
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [14.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v2
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - run: yarn install --immutable
24 | - run: yarn build:core
25 | name: Build core
26 | - run: yarn workspace @native-html/heuristic-table-plugin test:ts
27 | name: Typescript Tests
28 | - run: yarn workspace @native-html/heuristic-table-plugin test:lint
29 | name: Linting Tests
30 | - run: yarn workspace @native-html/heuristic-table-plugin test:jest --coverage
31 | name: Behavior Tests
32 | - run: yarn workspace @native-html/heuristic-table-plugin build
33 | name: Build
34 | - uses: codecov/codecov-action@v1
35 | with:
36 | flags: heuristic-table-plugin
37 | fail_ci_if_error: true
38 |
--------------------------------------------------------------------------------
/.github/workflows/iframe.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, run JS and Typescript tests.
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: iframe
5 |
6 | on: [push, pull_request]
7 |
8 | jobs:
9 | test:
10 | name: Testing
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [14.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v2
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - run: yarn install --immutable
24 | - run: yarn build:core
25 | name: Build core
26 | - run: yarn workspace @native-html/iframe-plugin test:ts
27 | name: Typescript Tests
28 | - run: yarn workspace @native-html/iframe-plugin test:lint
29 | name: Linting Tests
30 | - run: yarn workspace @native-html/iframe-plugin test:jest --coverage
31 | name: Behavior Tests
32 | - run: yarn workspace @native-html/iframe-plugin build
33 | name: Build
34 | - uses: codecov/codecov-action@v1
35 | with:
36 | flags: iframe-plugin
37 | fail_ci_if_error: true
38 |
--------------------------------------------------------------------------------
/.github/workflows/table.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, run JS and Typescript tests.
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: table
5 |
6 | on: [push, pull_request]
7 |
8 | jobs:
9 | test:
10 | name: Testing
11 | runs-on: ubuntu-latest
12 |
13 | strategy:
14 | matrix:
15 | node-version: [14.x]
16 |
17 | steps:
18 | - uses: actions/checkout@v2
19 | - name: Use Node.js ${{ matrix.node-version }}
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 | - run: yarn install --immutable
24 | - run: yarn build:core
25 | name: Build core
26 | - run: yarn workspace @native-html/table-plugin test:ts
27 | name: Typescript Tests
28 | - run: yarn workspace @native-html/table-plugin test:lint
29 | name: Linting Tests
30 | - run: yarn workspace @native-html/table-plugin test:jest --coverage
31 | name: Behavior Tests
32 | - run: yarn workspace @native-html/table-plugin build
33 | name: Build
34 | - uses: codecov/codecov-action@v1
35 | with:
36 | flags: table-plugin
37 | fail_ci_if_error: true
38 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 |
24 | # Android/IntelliJ
25 | #
26 | build/
27 | .idea
28 | .gradle
29 | local.properties
30 | *.iml
31 |
32 | # Visual Studio Code
33 | #
34 | .vscode/
35 |
36 | # node.js
37 | #
38 | node_modules/
39 | npm-debug.log
40 | yarn-error.log
41 |
42 | # BUCK
43 | buck-out/
44 | \.buckd/
45 | *.keystore
46 | !debug.keystore
47 |
48 | # fastlane
49 | #
50 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
51 | # screenshots whenever they are needed.
52 | # For more information about the recommended setup visit:
53 | # https://docs.fastlane.tools/best-practices/source-control/
54 |
55 | */fastlane/report.xml
56 | */fastlane/Preview.html
57 | */fastlane/screenshots
58 |
59 | # Bundle artifact
60 | *.jsbundle
61 |
62 | *.todos
63 |
64 | # yarn berry
65 | .yarn/*
66 | !.yarn/releases
67 | !.yarn/plugins
68 | !.yarn/sdks
69 | !.yarn/versions
70 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | bracketSpacing: true,
3 | jsxBracketSameLine: true,
4 | singleQuote: true,
5 | trailingComma: 'none',
6 | };
7 |
--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | enableGlobalCache: true
2 |
3 | nodeLinker: node-modules
4 |
5 | plugins:
6 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
7 | spec: "@yarnpkg/plugin-interactive-tools"
8 |
9 | yarnPath: .yarn/releases/yarn-3.0.2.cjs
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | (The MIT License)
2 |
3 | Copyright (c) 2019-2020 Jules Sam. Randolph.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | 'Software'), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/codecov.yml:
--------------------------------------------------------------------------------
1 | coverage:
2 | precision: 2
3 | round: down
4 | range: '80...100'
5 | status:
6 | project:
7 | default:
8 | target: auto
9 | table-plugin:
10 | target: auto
11 | flags:
12 | - table-plugin
13 | iframe-plugin:
14 | target: auto
15 | flags:
16 | - iframe-plugin
17 | heuristic-table-plugin:
18 | target: auto
19 | flags:
20 | - heuristic-table-plugin
21 | plugins-core:
22 | target: auto
23 | flags:
24 | - plugins-core
25 |
26 | flags:
27 | table-plugin:
28 | paths:
29 | - packages/table-plugin/
30 | heuristic-table-plugin:
31 | paths:
32 | - packages/heuristic-table-plugin/
33 | iframe-plugin:
34 | paths:
35 | - packages/iframe-plugin/
36 | plugins-core:
37 | paths:
38 | - packages/plugins-core/
39 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['@commitlint/config-conventional']
3 | };
4 |
--------------------------------------------------------------------------------
/example/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 | *.jks
5 | *.p8
6 | *.p12
7 | *.key
8 | *.mobileprovision
9 | *.orig.*
10 | web-build/
11 |
12 | # macOS
13 | .DS_Store
14 |
--------------------------------------------------------------------------------
/example/ClickTable.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import React, { useState } from 'react';
3 | import { View, Button, Text, StyleSheet } from 'react-native';
4 | import { Modal, Portal } from 'react-native-paper';
5 | import { HTMLTable } from '@native-html/table-plugin';
6 | import WebView from 'react-native-webview';
7 | import { useSafeAreaInsets } from 'react-native-safe-area-context';
8 |
9 | const tableConfig = {
10 | WebView,
11 | animationType: 'animated'
12 | };
13 |
14 | const unconstrainedHeight = () => null;
15 |
16 | export default function ClickTable(props) {
17 | const [isModalVisible, setIsModalVisible] = useState(false);
18 | const { top } = useSafeAreaInsets();
19 | const { numOfRows, numOfColumns, numOfChars } = props;
20 | // If table contains less then 100 chars or has less then 4 columns and 8 rows,
21 | // show table inline
22 | const shouldRenderTableInline =
23 | numOfChars < 400 || (numOfColumns < 4 && numOfRows < 8);
24 | const description = (
25 |
26 | This table has {numOfColumns} columns, {numOfRows} rows and contains{' '}
27 | {numOfChars} readable characters.
28 | {shouldRenderTableInline
29 | ? 'Therefore, it should be rendered inline.'
30 | : 'Therefore, it should be rendered in a modal.'}
31 |
32 | );
33 | if (shouldRenderTableInline) {
34 | return (
35 |
36 | {description}
37 | 1000}
39 | autoheight={true}
40 | {...props}
41 | {...tableConfig}
42 | />
43 |
44 | );
45 | }
46 | // else, show a buton with modal
47 | return (
48 |
49 | {description}
50 | setIsModalVisible(true)} />
51 |
52 | setIsModalVisible(false)}>
61 |
67 | setIsModalVisible(false)} />
68 |
69 |
70 |
71 | );
72 | }
73 |
74 | const styles = StyleSheet.create({
75 | description: {
76 | fontStyle: 'italic',
77 | fontSize: 11,
78 | textAlign: 'center',
79 | marginBottom: 20
80 | },
81 | modalContainer: { flex: 1, position: 'relative', zIndex: 1 }
82 | });
83 |
--------------------------------------------------------------------------------
/example/YoutubeExample.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import RenderHTML from 'react-native-render-html';
3 | import iframe, { iframeModel } from '@native-html/iframe-plugin';
4 | import WebView from 'react-native-webview';
5 |
6 | const htmlConfig = {
7 | renderers: {
8 | iframe
9 | },
10 | tagsStyles: {
11 | iframe: {
12 | alignSelf: 'center'
13 | }
14 | },
15 | customHTMLElementModels: {
16 | iframe: iframeModel
17 | },
18 | WebView
19 | };
20 |
21 | const youtubeIframe = `
22 |
23 | VIDEO
30 |
31 | This is a paragraph.
32 | `;
33 |
34 | export default function YoutubeExample({
35 | instance,
36 | onLinkPress,
37 | availableWidth,
38 | scalesPageToFit = true
39 | }) {
40 | return (
41 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/example/app.config.js:
--------------------------------------------------------------------------------
1 | const pluginVersion = require('@native-html/table-plugin/package.json').version;
2 |
3 | export default {
4 | name: 'RNPluginsExamples',
5 | displayName: '@native-html/plugins Examples',
6 | expo: {
7 | name: 'Plugins Examples',
8 | slug: 'native-html-plugins-examples',
9 | version: pluginVersion,
10 | orientation: 'default',
11 | description:
12 | 'Try out official plugins for react-native-render-html on your device!',
13 | icon: './assets/icon.png',
14 | splash: {
15 | backgroundColor: '#ffffff'
16 | },
17 | updates: {
18 | fallbackToCacheTimeout: 0
19 | },
20 | assetBundlePatterns: ['**/*'],
21 | ios: {
22 | supportsTablet: true
23 | },
24 | web: {
25 | favicon: './assets/favicon.png'
26 | }
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/example/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/example/assets/favicon.png
--------------------------------------------------------------------------------
/example/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/example/assets/icon.png
--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 | api.cache(true);
3 | return {
4 | presets: ['babel-preset-expo'],
5 | };
6 | };
7 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import 'react-native-gesture-handler';
2 | import { enableScreens } from 'react-native-screens';
3 | import { AppRegistry } from 'react-native';
4 | import App from './App';
5 | import { name as appName } from './app.json';
6 |
7 | enableScreens();
8 |
9 | AppRegistry.registerComponent(appName, () => App);
10 |
--------------------------------------------------------------------------------
/example/metro.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | const commonModulePath = path.resolve(__dirname, '../packages');
4 |
5 | module.exports = {
6 | projectRoot: __dirname,
7 | watchFolders: [commonModulePath],
8 | resolver: {
9 | extraNodeModules: new Proxy(
10 | {},
11 | {
12 | get: (target, name) => path.join(__dirname, `node_modules/${name}`)
13 | }
14 | )
15 | },
16 | transformer: {
17 | getTransformOptions: async () => ({
18 | transform: {
19 | experimentalImportSupport: false,
20 | inlineRequires: true
21 | }
22 | })
23 | }
24 | };
25 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "main": "node_modules/expo/AppEntry.js",
4 | "scripts": {
5 | "start": "expo start",
6 | "android": "expo start --android",
7 | "ios": "expo start --ios",
8 | "web": "expo start --web",
9 | "eject": "expo eject"
10 | },
11 | "dependencies": {
12 | "@native-html/heuristic-table-plugin": "workspace:*",
13 | "@native-html/iframe-plugin": "workspace:*",
14 | "@native-html/table-plugin": "workspace:*",
15 | "@react-native-community/masked-view": "0.1.10",
16 | "@react-navigation/native": "^5.9.8",
17 | "@react-navigation/stack": "^5.14.9",
18 | "expo": "^43.0.0",
19 | "expo-status-bar": "~1.1.0",
20 | "expo-web-browser": "~10.0.3",
21 | "react": "17.0.1",
22 | "react-dom": "17.0.1",
23 | "react-native": "0.64.2",
24 | "react-native-gesture-handler": "~1.10.2",
25 | "react-native-paper": "^4.9.2",
26 | "react-native-reanimated": "~2.2.0",
27 | "react-native-render-html": "6.1.0",
28 | "react-native-safe-area-context": "3.3.2",
29 | "react-native-screens": "~3.8.0",
30 | "react-native-web": "0.17.1",
31 | "react-native-webview": "11.13.0"
32 | },
33 | "devDependencies": {
34 | "@babel/core": "^7.12.9"
35 | },
36 | "private": true,
37 | "installConfig": {
38 | "hoistingLimits": "workspaces"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/images/TableStyleSpecs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/images/TableStyleSpecs.png
--------------------------------------------------------------------------------
/images/adaptative.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/images/adaptative.jpeg
--------------------------------------------------------------------------------
/images/android.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/images/android.gif
--------------------------------------------------------------------------------
/images/expo-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/images/expo-example.png
--------------------------------------------------------------------------------
/images/scalesPageToFit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/native-html/plugins/26870f796ad4a3ef5d728c460382dfc981e5b2c5/images/scalesPageToFit.jpg
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "plugins-project",
3 | "private": true,
4 | "scripts": {
5 | "start": "yarn workspace example start",
6 | "android": "yarn workspace example android",
7 | "ios": "yarn workspace example ios",
8 | "build:table": "yarn workspace @native-html/table-plugin build",
9 | "build:heuristic-table": "yarn workspace @native-html/heuristic-table-plugin build",
10 | "build:iframe": "yarn workspace @native-html/iframe-plugin build",
11 | "build:core": "yarn workspace @native-html/plugins-core build",
12 | "test:table": "yarn workspace @native-html/table-plugin test",
13 | "test:table:jest": "yarn workspace @native-html/table-plugin test:jest",
14 | "test:heuristic-table": "yarn workspace @native-html/heuristic-table-plugin test",
15 | "test:heuristic-table:jest": "yarn workspace @native-html/heuristic-table-plugin test:jest",
16 | "test:iframe": "yarn workspace @native-html/iframe-plugin test",
17 | "test:iframe:jest": "yarn workspace @native-html/iframe-plugin test:jest",
18 | "test:core": "yarn workspace @native-html/plugins-core test",
19 | "test:core:jest": "yarn workspace @native-html/plugins-core test:jest",
20 | "release:table": "yarn workspace @native-html/table-plugin release-it",
21 | "release:heuristic-table": "yarn workspace @native-html/heuristic-table-plugin release-it",
22 | "release:iframe": "yarn workspace @native-html/iframe-plugin release-it",
23 | "release:core": "yarn workspace @native-html/plugins-core release-it",
24 | "publish:example": "yarn workspace example expo publish"
25 | },
26 | "devDependencies": {
27 | "@commitlint/cli": "^11.0.0",
28 | "@commitlint/config-conventional": "^11.0.0",
29 | "@formidable-webview/eslint-config-webjs": "^1.0.0",
30 | "@react-native-community/eslint-config": "^3.0.1",
31 | "@typescript-eslint/eslint-plugin": "^4.30.0",
32 | "@typescript-eslint/parser": "^4.30.0",
33 | "eslint": "^7.32.0",
34 | "eslint-config-prettier": "^8.3.0",
35 | "eslint-plugin-compat": "^3.13.0",
36 | "eslint-plugin-tsdoc": "^0.2.14",
37 | "husky": "^4.3.8",
38 | "prettier": "^2.3.2"
39 | },
40 | "resolutions": {
41 | "react": "17.0.1",
42 | "react-dom": "17.0.1",
43 | "react-native": "0.64.2",
44 | "react-test-renderer": "16.13.1",
45 | "react-native-webview": "11.13.0",
46 | "@release-it/conventional-changelog": "patch:@release-it/conventional-changelog@2.0.0#patches/@release-it-conventional-changelog.patch",
47 | "release-it": "patch:release-it@14.3.0#patches/release-it.patch"
48 | },
49 | "author": "Jules Sam. Randolph (https://github.com/jsamr)",
50 | "license": "MIT",
51 | "husky": {
52 | "hooks": {
53 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
54 | }
55 | },
56 | "workspaces": [
57 | "packages/*",
58 | "example"
59 | ]
60 | }
61 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | # CocoaPods
2 | /ios/Pods/
3 |
4 | # Jest code coverage
5 | /coverage
6 |
7 | # This library
8 | /lib/
9 |
10 | # api-extractor
11 | /temp
12 |
13 | # Types must be bundled with api-extractor, not included in the repo
14 | /types
15 |
16 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/.release-it.js:
--------------------------------------------------------------------------------
1 | const name = require('./package.json').name;
2 | const configureRelease = require("release-config");
3 | module.exports = configureRelease(name);
4 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # [0.7.0](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.6.0...@native-html/heuristic-table-plugin@0.7.0) (2021-10-13)
2 |
3 |
4 | ### Features
5 |
6 | * **heuristic-table:** support rnrh@6.1.0 `renderIndex` and `renderLength` props ([961de3d](https://github.com/native-html/plugins/commit/961de3d519c52e4d5fa12e59489003736d11aed2))
7 |
8 | # [0.6.0](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.5.0...@native-html/heuristic-table-plugin@0.6.0) (2021-06-08)
9 |
10 |
11 | ### Features
12 |
13 | * **heuristic-table:** support react-native-render-html@6.0.0-beta.0 ([ffa4f2c](https://github.com/native-html/plugins/commit/ffa4f2c17322e2bb69a58617c2a31b38a246bdb7))
14 |
15 | # [0.5.0](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.4.0...@native-html/heuristic-table-plugin@0.5.0) (2021-05-21)
16 |
17 |
18 | ### Features
19 |
20 | * support react-native-render-html@6.0.0-alpha.25; beware of upstream breaking changes ([53e322c](https://github.com/native-html/plugins/commit/53e322cad64aece27d5c95c1bc9fb4a3095addbd))
21 |
22 | # [0.4.0](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.3.4...@native-html/heuristic-table-plugin@0.4.0) (2021-04-17)
23 |
24 |
25 | ### Features
26 |
27 | * **heuristic-table:** support react-native-render-html@6.0.0-alpha.23 ([0edee7a](https://github.com/native-html/plugins/commit/0edee7ac2bce532a3f11e7aa5f076b8428694ad3))
28 |
29 | ## [0.3.4](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.3.3...@native-html/heuristic-table-plugin@0.3.4) (2021-04-17)
30 |
31 |
32 | ### Bug Fixes
33 |
34 | * restrict to react-native-render-html < 6.0.0-alpha.23 ([3a8d9f8](https://github.com/native-html/plugins/commit/3a8d9f8fada412d5adae663338b4661a20b19be3))
35 |
36 | ## [0.3.3](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.3.2...@native-html/heuristic-table-plugin@0.3.3) (2021-04-17)
37 |
38 |
39 | ### Bug Fixes
40 |
41 | * restrict compatible versions of react-native-render-html ([032c4ed](https://github.com/native-html/plugins/commit/032c4ed035150471c914d6406fe7b2b2237035fe))
42 |
43 | ## [0.3.2](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.3.1...@native-html/heuristic-table-plugin@0.3.2) (2021-03-23)
44 |
45 |
46 | ### Bug Fixes
47 |
48 | * **heuristic-table:** display glich with multiple rowspan in the same column ([bab4daf](https://github.com/native-html/plugins/commit/bab4daf3ec2954c8b9e273db175980f7533b738b))
49 |
50 | ## [0.3.1](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.3.0...@native-html/heuristic-table-plugin@0.3.1) (2021-03-04)
51 |
52 |
53 | ### Bug Fixes
54 |
55 | * **heuristic-table:** ignoring `overrideContentWidth` option ([8d9224a](https://github.com/native-html/plugins/commit/8d9224ac324e816243d680ae35b05cc66a669d45))
56 |
57 | # [0.3.0](https://github.com/native-html/plugins/compare/@native-html/heuristic-table-plugin@0.2.0...@native-html/heuristic-table-plugin@0.3.0) (2021-03-04)
58 |
59 |
60 | ### Features
61 |
62 | * advanced layout algorithm ([05eeb6e](https://github.com/native-html/plugins/commit/05eeb6ed33375284fe9d18c70aec5b4633ded484))
63 | * pass markers from table root to cells ([fcfd4b7](https://github.com/native-html/plugins/commit/fcfd4b7be07da5fe22e63574a3695c65c598b035))
64 |
65 | # [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)
66 |
67 |
68 | ### Features
69 |
70 | * **heuristic-table:** export hooks to reuse internal rendering logic ([d0f1529](https://github.com/native-html/plugins/commit/d0f15298cd6c17799f87d87ff25bb8b6433193bd))
71 |
72 | # 0.1.0 (2021-02-18)
73 |
74 |
75 | ### Features
76 |
77 | * **heuristic-table:** new 100% native table plugin ([b1ea3f6](https://github.com/native-html/plugins/commit/b1ea3f696cb3f65c9f7cbd56036ab34d1ae08a09))
78 |
79 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | 'module:metro-react-native-babel-preset',
4 | '@babel/preset-typescript'
5 | ],
6 | plugins: ['@babel/plugin-transform-react-jsx'],
7 | env: {}
8 | };
9 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.constraints.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## CellProperties.constraints property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | constraints: TCellConstraints;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.lenx.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [CellProperties](./heuristic-table-plugin.cellproperties.md) > [lenX](./heuristic-table-plugin.cellproperties.lenx.md)
4 |
5 | ## CellProperties.lenX property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | lenX: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.leny.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [CellProperties](./heuristic-table-plugin.cellproperties.md) > [lenY](./heuristic-table-plugin.cellproperties.leny.md)
4 |
5 | ## CellProperties.lenY property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | lenY: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.cellproperties.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [CellProperties](./heuristic-table-plugin.cellproperties.md)
4 |
5 | ## CellProperties interface
6 |
7 |
8 | Signature:
9 |
10 | ```typescript
11 | export interface CellProperties extends Coordinates
12 | ```
13 | Extends: [Coordinates](./heuristic-table-plugin.coordinates.md)
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [constraints](./heuristic-table-plugin.cellproperties.constraints.md) | TCellConstraints | |
20 | | [lenX](./heuristic-table-plugin.cellproperties.lenx.md) | number | |
21 | | [lenY](./heuristic-table-plugin.cellproperties.leny.md) | number | |
22 |
23 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.coordinates.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [Coordinates](./heuristic-table-plugin.coordinates.md)
4 |
5 | ## Coordinates interface
6 |
7 |
8 | Signature:
9 |
10 | ```typescript
11 | export interface Coordinates
12 | ```
13 |
14 | ## Properties
15 |
16 | | Property | Type | Description |
17 | | --- | --- | --- |
18 | | [x](./heuristic-table-plugin.coordinates.x.md) | number | |
19 | | [y](./heuristic-table-plugin.coordinates.y.md) | number | |
20 |
21 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.coordinates.x.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [Coordinates](./heuristic-table-plugin.coordinates.md) > [x](./heuristic-table-plugin.coordinates.x.md)
4 |
5 | ## Coordinates.x property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | x: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.coordinates.y.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [Coordinates](./heuristic-table-plugin.coordinates.md) > [y](./heuristic-table-plugin.coordinates.y.md)
4 |
5 | ## Coordinates.y property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | y: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.displaycell.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [DisplayCell](./heuristic-table-plugin.displaycell.md)
4 |
5 | ## DisplayCell interface
6 |
7 |
8 | Signature:
9 |
10 | ```typescript
11 | export interface DisplayCell extends CellProperties
12 | ```
13 | Extends: [CellProperties](./heuristic-table-plugin.cellproperties.md)
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [tnode](./heuristic-table-plugin.displaycell.tnode.md) | TNode | |
20 |
21 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.displaycell.tnode.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [DisplayCell](./heuristic-table-plugin.displaycell.md) > [tnode](./heuristic-table-plugin.displaycell.tnode.md)
4 |
5 | ## DisplayCell.tnode property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | tnode: TNode;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## HeuristicTablePluginConfig.forceStretch property
6 |
7 | When true, force the table to stretch to the available width.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | forceStretch?: boolean;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) > [getStyleForCell](./heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md)
4 |
5 | ## HeuristicTablePluginConfig.getStyleForCell() method
6 |
7 | Customize cells appearance with this function.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | getStyleForCell?(cell: TableCell): ViewStyle | null;
13 | ```
14 |
15 | ## Parameters
16 |
17 | | Parameter | Type | Description |
18 | | --- | --- | --- |
19 | | cell | [TableCell](./heuristic-table-plugin.tablecell.md) | The cell for which styles should be provided. |
20 |
21 | Returns:
22 |
23 | ViewStyle \| null
24 |
25 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.heuristictablepluginconfig.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md)
4 |
5 | ## HeuristicTablePluginConfig interface
6 |
7 | Options to customize this plugin renderers.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface HeuristicTablePluginConfig
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [forceStretch?](./heuristic-table-plugin.heuristictablepluginconfig.forcestretch.md) | boolean | (Optional) When true, force the table to stretch to the available width. |
20 |
21 | ## Methods
22 |
23 | | Method | Description |
24 | | --- | --- |
25 | | [getStyleForCell(cell)?](./heuristic-table-plugin.heuristictablepluginconfig.getstyleforcell.md) | (Optional) Customize cells appearance with this function. |
26 |
27 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltable.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTable](./heuristic-table-plugin.htmltable.md)
4 |
5 | ## HTMLTable variable
6 |
7 | A component to render tables.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | HTMLTable: React.NamedExoticComponent
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.config.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## HTMLTableProps.config property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | config: HeuristicTablePluginConfig;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.layout.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## HTMLTableProps.layout property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | layout: TableLayout;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md)
4 |
5 | ## HTMLTableProps interface
6 |
7 | Props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface HTMLTableProps extends CustomRendererProps
13 | ```
14 | Extends: CustomRendererProps<TBlock>
15 |
16 | ## Properties
17 |
18 | | Property | Type | Description |
19 | | --- | --- | --- |
20 | | [config](./heuristic-table-plugin.htmltableprops.config.md) | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | |
21 | | [layout](./heuristic-table-plugin.htmltableprops.layout.md) | TableLayout | |
22 | | [settings](./heuristic-table-plugin.htmltableprops.settings.md) | Settings | |
23 |
24 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.htmltableprops.settings.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) > [settings](./heuristic-table-plugin.htmltableprops.settings.md)
4 |
5 | ## HTMLTableProps.settings property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | settings: Settings;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md)
4 |
5 | ## heuristic-table-plugin package
6 |
7 | ## Functions
8 |
9 | | Function | Description |
10 | | --- | --- |
11 | | [useHtmlTableCellProps({ propsFromParent, ...props })](./heuristic-table-plugin.usehtmltablecellprops.md) | Customize td
and th
renderers while reusing default cell renderer logic. |
12 | | [useHtmlTableProps({ sharedProps, tnode, ...props }, options)](./heuristic-table-plugin.usehtmltableprops.md) | Customize the rendering logic of the table renderer via this hook. |
13 |
14 | ## Interfaces
15 |
16 | | Interface | Description |
17 | | --- | --- |
18 | | [CellProperties](./heuristic-table-plugin.cellproperties.md) | |
19 | | [Coordinates](./heuristic-table-plugin.coordinates.md) | |
20 | | [DisplayCell](./heuristic-table-plugin.displaycell.md) | |
21 | | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | Options to customize this plugin renderers. |
22 | | [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md) | Props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component. |
23 | | [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 |
24 | | [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md) | Props received by td and th custom renderers in propsFromParent
prop field. |
25 | | [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) | A container to display items in columns (think 'flex-direction: column') |
26 | | [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) | A container to display items in row. (think 'flex-direction: row') |
27 | | [TableRoot](./heuristic-table-plugin.tableroot.md) | |
28 |
29 | ## Variables
30 |
31 | | Variable | Description |
32 | | --- | --- |
33 | | [HTMLTable](./heuristic-table-plugin.htmltable.md) | A component to render tables. |
34 | | [renderers](./heuristic-table-plugin.renderers.md) | Renderers to be merged in the renderers
prop of RenderHTML
component. |
35 | | [TableRenderer](./heuristic-table-plugin.tablerenderer.md) | A 100% native renderer component for table
tag. |
36 | | [TdRenderer](./heuristic-table-plugin.tdrenderer.md) | The renderer component for td
tag. |
37 | | [ThRenderer](./heuristic-table-plugin.threnderer.md) | The renderer component for th
tag. |
38 |
39 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.renderers.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [renderers](./heuristic-table-plugin.renderers.md)
4 |
5 | ## renderers variable
6 |
7 | Renderers to be merged in the `renderers` prop of `RenderHTML` component.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer>
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecell.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCell](./heuristic-table-plugin.tablecell.md)
4 |
5 | ## TableCell interface
6 |
7 | 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.
8 |
9 | 0 1 2 → x 1 . . 2 . . ↓ y
10 |
11 | Signature:
12 |
13 | ```typescript
14 | export interface TableCell extends DisplayCell
15 | ```
16 | Extends: [DisplayCell](./heuristic-table-plugin.displaycell.md)
17 |
18 | ## Remarks
19 |
20 |
21 | ## Properties
22 |
23 | | Property | Type | Description |
24 | | --- | --- | --- |
25 | | [type](./heuristic-table-plugin.tablecell.type.md) | 'cell' | |
26 | | [width](./heuristic-table-plugin.tablecell.width.md) | number | |
27 |
28 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecell.type.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCell](./heuristic-table-plugin.tablecell.md) > [type](./heuristic-table-plugin.tablecell.type.md)
4 |
5 | ## TableCell.type property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | type: 'cell';
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecell.width.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCell](./heuristic-table-plugin.tablecell.md) > [width](./heuristic-table-plugin.tablecell.width.md)
4 |
5 | ## TableCell.width property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | width: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.cell.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableCellPropsFromParent.cell property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | cell: TableCell;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.config.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableCellPropsFromParent.config property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | config?: HeuristicTablePluginConfig;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablecellpropsfromparent.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableCellPropsFromParent](./heuristic-table-plugin.tablecellpropsfromparent.md)
4 |
5 | ## TableCellPropsFromParent interface
6 |
7 | Props received by td and th custom renderers in `propsFromParent` prop field.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface TableCellPropsFromParent extends PropsFromParent
13 | ```
14 | Extends: PropsFromParent
15 |
16 | ## Properties
17 |
18 | | Property | Type | Description |
19 | | --- | --- | --- |
20 | | [cell](./heuristic-table-plugin.tablecellpropsfromparent.cell.md) | [TableCell](./heuristic-table-plugin.tablecell.md) | |
21 | | [config?](./heuristic-table-plugin.tablecellpropsfromparent.config.md) | [HeuristicTablePluginConfig](./heuristic-table-plugin.heuristictablepluginconfig.md) | (Optional) |
22 |
23 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.children.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableFlexColumnContainer.children property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | children: (TableFlexRowContainer | TableCell)[];
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md)
4 |
5 | ## TableFlexColumnContainer interface
6 |
7 | A container to display items in columns (think 'flex-direction: column')
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface TableFlexColumnContainer
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [children](./heuristic-table-plugin.tableflexcolumncontainer.children.md) | ([TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md) \| [TableCell](./heuristic-table-plugin.tablecell.md))\[\] | |
20 | | [type](./heuristic-table-plugin.tableflexcolumncontainer.type.md) | 'col-container' | |
21 |
22 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexcolumncontainer.type.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableFlexColumnContainer.type property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | type: 'col-container';
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.children.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableFlexRowContainer.children property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | children: (TableFlexColumnContainer | TableCell)[];
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md)
4 |
5 | ## TableFlexRowContainer interface
6 |
7 | A container to display items in row. (think 'flex-direction: row')
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface TableFlexRowContainer
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [children](./heuristic-table-plugin.tableflexrowcontainer.children.md) | ([TableFlexColumnContainer](./heuristic-table-plugin.tableflexcolumncontainer.md) \| [TableCell](./heuristic-table-plugin.tablecell.md))\[\] | |
20 | | [type](./heuristic-table-plugin.tableflexrowcontainer.type.md) | 'row-container' | |
21 |
22 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableflexrowcontainer.type.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableFlexRowContainer.type property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | type: 'row-container';
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablerenderer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableRenderer](./heuristic-table-plugin.tablerenderer.md)
4 |
5 | ## TableRenderer variable
6 |
7 | A 100% native renderer component for `table` tag.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | TableRenderer: CustomBlockRenderer
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.children.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableRoot.children property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | children: TableFlexRowContainer[];
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TableRoot](./heuristic-table-plugin.tableroot.md)
4 |
5 | ## TableRoot interface
6 |
7 |
8 | Signature:
9 |
10 | ```typescript
11 | export interface TableRoot
12 | ```
13 |
14 | ## Properties
15 |
16 | | Property | Type | Description |
17 | | --- | --- | --- |
18 | | [children](./heuristic-table-plugin.tableroot.children.md) | [TableFlexRowContainer](./heuristic-table-plugin.tableflexrowcontainer.md)\[\] | |
19 | | [type](./heuristic-table-plugin.tableroot.type.md) | 'root' | |
20 |
21 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tableroot.type.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [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)
4 |
5 | ## TableRoot.type property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | type: 'root';
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdrenderer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [TdRenderer](./heuristic-table-plugin.tdrenderer.md)
4 |
5 | ## TdRenderer variable
6 |
7 | The renderer component for `td` tag.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | TdRenderer: CustomBlockRenderer
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.threnderer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [ThRenderer](./heuristic-table-plugin.threnderer.md)
4 |
5 | ## ThRenderer variable
6 |
7 | The renderer component for `th` tag.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | ThRenderer: CustomBlockRenderer
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltablecellprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [useHtmlTableCellProps](./heuristic-table-plugin.usehtmltablecellprops.md)
4 |
5 | ## useHtmlTableCellProps() function
6 |
7 | Customize `td` and `th` renderers while reusing default cell renderer logic.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export default function useHtmlTableCellProps({ propsFromParent, ...props }: CustomRendererProps): CustomRendererProps;
13 | ```
14 |
15 | ## Parameters
16 |
17 | | Parameter | Type | Description |
18 | | --- | --- | --- |
19 | | { propsFromParent, ...props } | CustomRendererProps<TBlock> | |
20 |
21 | Returns:
22 |
23 | CustomRendererProps<TBlock>
24 |
25 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/heuristic-table-plugin.usehtmltableprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) > [useHtmlTableProps](./heuristic-table-plugin.usehtmltableprops.md)
4 |
5 | ## useHtmlTableProps() function
6 |
7 | Customize the rendering logic of the table renderer via this hook.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export default function useHtmlTableProps({ sharedProps, tnode, ...props }: CustomRendererProps, options?: {
13 | overrideContentWidth?: number;
14 | }): HTMLTableProps;
15 | ```
16 |
17 | ## Parameters
18 |
19 | | Parameter | Type | Description |
20 | | --- | --- | --- |
21 | | { sharedProps, tnode, ...props } | CustomRendererProps<TBlock> | |
22 | | options | { overrideContentWidth?: number; } | Customize this hook behavior. |
23 |
24 | Returns:
25 |
26 | [HTMLTableProps](./heuristic-table-plugin.htmltableprops.md)
27 |
28 | props for the [HTMLTable](./heuristic-table-plugin.htmltable.md) component.
29 |
30 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/docs/index.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md)
4 |
5 | ## API Reference
6 |
7 | ## Packages
8 |
9 | | Package | Description |
10 | | --- | --- |
11 | | [@native-html/heuristic-table-plugin](./heuristic-table-plugin.md) | |
12 |
13 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'react-native',
3 | moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
4 | testRegex: 'src/.*\\.test\\.tsx?$',
5 | coveragePathIgnorePatterns: ['/node_modules/', '__tests__'],
6 | transformIgnorePatterns: [
7 | 'node_modules/(?!(@react-native|react-native|ramda)/)'
8 | ]
9 | };
10 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@native-html/heuristic-table-plugin",
3 | "version": "0.7.0",
4 | "description": "🔠 A 100% native component using heuristics to render tables in react-native-render-html",
5 | "main": "lib/commonjs/index.js",
6 | "module": "lib/module/index.js",
7 | "react-native": "src/",
8 | "types": "types/@native-html/heuristic-table-plugin/index.d.ts",
9 | "files": [
10 | "lib",
11 | "src",
12 | "types",
13 | "docs"
14 | ],
15 | "scripts": {
16 | "test": "yarn test:ts && yarn test:lint && yarn test:jest",
17 | "test:jest": "jest src/",
18 | "test:ts": "tsc --noEmit",
19 | "test:lint": "eslint --ext ts,tsx src/",
20 | "build": "yarn build:source && yarn build:defs && yarn build:doc",
21 | "build:source": "bob build",
22 | "build:defs": "api-extractor run --local --verbose",
23 | "build:doc": "api-documenter markdown --input-folder temp --output-folder ./docs",
24 | "prepack": "yarn run build"
25 | },
26 | "keywords": [
27 | "react-native",
28 | "react-native-render-html",
29 | "html",
30 | "table",
31 | "plugins"
32 | ],
33 | "devDependencies": {
34 | "@babel/cli": "^7.15.4",
35 | "@babel/core": "^7.15.5",
36 | "@babel/plugin-transform-react-jsx": "^7.14.9",
37 | "@babel/preset-typescript": "^7.15.0",
38 | "@babel/runtime": "^7.15.4",
39 | "@microsoft/api-documenter": "^7.12.7",
40 | "@microsoft/api-extractor": "7.13.1",
41 | "@release-it/conventional-changelog": "^2.0.1",
42 | "@testing-library/react-native": "^7.2.0",
43 | "@tsconfig/react-native": "^1.0.3",
44 | "@types/html-validator": "^5.0.1",
45 | "@types/jest": "^26.0.24",
46 | "@types/react": "^16.14.14",
47 | "@types/react-native": "^0.63.53",
48 | "@types/react-test-renderer": "^16.9.5",
49 | "babel-jest": "^26.6.3",
50 | "babel-plugin-inline-import": "^3.0.0",
51 | "eslint": "^7.32.0",
52 | "jest": "^26.6.3",
53 | "metro-react-native-babel-preset": "^0.64.0",
54 | "metro-react-native-babel-transformer": "^0.64.0",
55 | "react": "17.0.1",
56 | "react-native": "0.64.2",
57 | "react-native-builder-bob": "^0.17.1",
58 | "react-native-render-html": "6.1.0",
59 | "react-test-renderer": "17.0.2",
60 | "release-it": "^14.3.0",
61 | "typescript": "~4.4.2"
62 | },
63 | "dependencies": {
64 | "@types/prop-types": "^15.7.4",
65 | "@types/ramda": "^0.27.44",
66 | "prop-types": "^15.7.2",
67 | "ramda": "^0.27.1"
68 | },
69 | "peerDependencies": {
70 | "react": ">= 16.8.0",
71 | "react-native": ">= 0.63.0",
72 | "react-native-render-html": ">= 6.0.0-beta.0 || 6.x"
73 | },
74 | "author": "Jules Sam. Randolph (https://github.com/jsamr)",
75 | "homepage": "https://github.com/native-html/plugins/tree/master/packages/heuristic-table-plugin#readme",
76 | "license": "MIT",
77 | "repository": {
78 | "type": "git",
79 | "directory": "packages/heuristic-table-plugin",
80 | "url": "git+ssh://git@github.com/native-html/plugins.git"
81 | },
82 | "publishConfig": {
83 | "access": "public"
84 | },
85 | "react-native-builder-bob": {
86 | "source": "src",
87 | "output": "lib",
88 | "targets": [
89 | [
90 | "module",
91 | {
92 | "babelrc": false
93 | }
94 | ],
95 | [
96 | "commonjs",
97 | {
98 | "babelrc": false
99 | }
100 | ],
101 | [
102 | "typescript",
103 | {
104 | "project": "tsconfig.build.json"
105 | }
106 | ]
107 | ]
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/HTMLTable.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, PropsWithChildren } from 'react';
2 | import { ScrollView, View } from 'react-native';
3 | import TreeRenderer from './TreeRenderer';
4 | import { HTMLTableProps } from './shared-types';
5 | import { getHorizontalSpacing } from './helpers/measure';
6 |
7 | function Container({
8 | children,
9 | tableWidth,
10 | availableWidth
11 | }: PropsWithChildren<{
12 | tableWidth: number;
13 | availableWidth: number;
14 | }>) {
15 | const scroll = tableWidth > availableWidth;
16 | return React.createElement(
17 | scroll ? ScrollView : View,
18 | scroll
19 | ? {
20 | contentContainerStyle: { width: tableWidth },
21 | style: { width: availableWidth },
22 | horizontal: true
23 | }
24 | : { style: { width: tableWidth } },
25 | children
26 | );
27 | }
28 |
29 | /**
30 | * A component to render tables.
31 | *
32 | * @param props - Props from {@link useHtmlTableProps} hook.
33 | *
34 | * @public
35 | */
36 | const HTMLTable = memo(function HTMLTable({
37 | layout,
38 | TDefaultRenderer,
39 | settings,
40 | config,
41 | ...props
42 | }: HTMLTableProps) {
43 | const tableWidth = layout.totalWidth;
44 | const containerWidth = settings.contentWidth;
45 | return (
46 |
55 |
56 | {React.createElement(TreeRenderer, {
57 | node: layout.renderTree,
58 | config,
59 | renderIndex: props.renderIndex,
60 | renderLength: props.renderLength
61 | })}
62 |
63 |
64 | );
65 | });
66 |
67 | export default HTMLTable;
68 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/TableLayout.ts:
--------------------------------------------------------------------------------
1 | import { sum } from 'ramda';
2 | import { TNode } from 'react-native-render-html';
3 | import computeColumnWidths from './helpers/computeColumnWidths';
4 | import createRenderTree from './helpers/createRenderTree';
5 | import fillTableDisplay, {
6 | createEmptyDisplay
7 | } from './helpers/fillTableDisplay';
8 | import TCellConstraintsComputer from './helpers/TCellConstraintsComputer';
9 | import { Display, Settings, TableRoot } from './shared-types';
10 |
11 | export default class TableLayout {
12 | public readonly display: Display;
13 | public readonly columnWidths: number[];
14 | public readonly totalWidth: number;
15 | public readonly renderTree: TableRoot;
16 | constructor(tnode: TNode, config: Settings) {
17 | const computer = new TCellConstraintsComputer({});
18 | this.display = createEmptyDisplay(config);
19 | fillTableDisplay(tnode, this.display, computer);
20 | this.columnWidths = computeColumnWidths(this.display);
21 | this.totalWidth = sum(this.columnWidths);
22 | this.renderTree = createRenderTree(this.display, this.columnWidths);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/TableRenderer.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CustomBlockRenderer } from 'react-native-render-html';
3 | import HTMLTable from './HTMLTable';
4 | import { HeuristicTablePluginConfig } from './shared-types';
5 | import useHtmlTableProps from './useHtmlTableProps';
6 |
7 | declare module 'react-native-render-html' {
8 | interface RenderersPropsBase {
9 | table?: HeuristicTablePluginConfig;
10 | }
11 | }
12 |
13 | /**
14 | * A 100% native renderer component for `table` tag.
15 | *
16 | * @param props - Component props.
17 | * @public
18 | */
19 | const TableRenderer: CustomBlockRenderer = function (props) {
20 | return React.createElement(HTMLTable, useHtmlTableProps(props));
21 | };
22 |
23 | export default TableRenderer;
24 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/TdRenderer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CustomBlockRenderer } from 'react-native-render-html';
3 | import useHtmlTableCellProps from './useHtmlTableCellProps';
4 |
5 | /**
6 | * The renderer component for `td` tag.
7 | *
8 | * @param props - Component props.
9 | * @public
10 | */
11 | const TdRenderer: CustomBlockRenderer = function TdRenderer(props) {
12 | return React.createElement(
13 | props.TDefaultRenderer,
14 | useHtmlTableCellProps(props)
15 | );
16 | };
17 |
18 | export default TdRenderer;
19 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/ThRenderer.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CustomBlockRenderer } from 'react-native-render-html';
3 | import useHtmlTableCellProps from './useHtmlTableCellProps';
4 |
5 | /**
6 | * The renderer component for `th` tag.
7 | *
8 | * @param props - Component props.
9 | * @public
10 | */
11 | const ThRenderer: CustomBlockRenderer = function ThRenderer(props) {
12 | return React.createElement(
13 | props.TDefaultRenderer,
14 | useHtmlTableCellProps(props)
15 | );
16 | };
17 |
18 | export default ThRenderer;
19 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/TreeRenderer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, View } from 'react-native';
3 | import { TNodeRenderer } from 'react-native-render-html';
4 | import { HeuristicTablePluginConfig, TableRenderNode } from './shared-types';
5 |
6 | const styles = StyleSheet.create({
7 | colContainer: { flexDirection: 'column', flexGrow: 1 },
8 | rowContainer: { flexDirection: 'row', flexGrow: 1 }
9 | });
10 |
11 | export default function TreeRenderer({
12 | node,
13 | config,
14 | renderIndex,
15 | renderLength
16 | }: {
17 | node: TableRenderNode;
18 | renderIndex: number;
19 | renderLength: number;
20 | config?: HeuristicTablePluginConfig;
21 | }) {
22 | if (node.type === 'cell') {
23 | return (
24 |
25 |
33 |
34 | );
35 | }
36 | if (node.type === 'root' || node.type === 'col-container') {
37 | const children = (node.children as TableRenderNode[]).map((v, i) =>
38 | React.createElement(TreeRenderer, {
39 | node: v,
40 | key: i,
41 | config,
42 | renderIndex: i,
43 | renderLength: node.children.length
44 | })
45 | );
46 | return {children} ;
47 | }
48 | if (node.type === 'row-container') {
49 | return (
50 |
51 | {node.children.map((v, i) =>
52 | React.createElement(TreeRenderer, {
53 | node: v,
54 | key: i,
55 | config,
56 | renderIndex: i,
57 | renderLength: node.children.length
58 | })
59 | )}
60 |
61 | );
62 | }
63 | return null;
64 | }
65 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/__tests__/makeRows.test.ts:
--------------------------------------------------------------------------------
1 | import { TNode } from 'react-native-render-html';
2 | import R from 'ramda';
3 | import { TableCell } from '../../shared-types';
4 | import makeRows from '../makeRows';
5 |
6 | function cell(y: number, x: number = 0): TableCell {
7 | return {
8 | lenX: 1,
9 | lenY: 1,
10 | tnode: {} as unknown as TNode,
11 | type: 'cell',
12 | constraints: {
13 | contentDensity: 0,
14 | minWidth: 0
15 | },
16 | width: 10,
17 | x,
18 | y
19 | };
20 | }
21 |
22 | describe('makeRows', () => {
23 | it('should preserve order of rows', () => {
24 | const cells = R.map(cell, R.range(0, 100));
25 | expect(R.flatten(makeRows(cells))).toMatchObject(cells);
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/__tests__/reduceColumnConstraints.test.ts:
--------------------------------------------------------------------------------
1 | import reduceColumnConstraints from '../reduceColumnConstraints';
2 |
3 | describe('getColumnConstraints', () => {
4 | it('should return a record which keys are column indexes, and which values are the reduced constraints for this column', () => {
5 | expect(
6 | reduceColumnConstraints([
7 | {
8 | lenX: 1,
9 | lenY: 1,
10 | x: 0,
11 | y: 0,
12 | constraints: {
13 | contentDensity: 3,
14 | minWidth: 2
15 | }
16 | },
17 | {
18 | lenX: 1,
19 | lenY: 1,
20 | x: 1,
21 | y: 0,
22 | constraints: {
23 | contentDensity: 4,
24 | minWidth: 3
25 | }
26 | },
27 | {
28 | lenX: 1,
29 | lenY: 1,
30 | x: 0,
31 | y: 1,
32 | constraints: {
33 | contentDensity: 3,
34 | minWidth: 1
35 | }
36 | },
37 | {
38 | lenX: 1,
39 | lenY: 1,
40 | x: 1,
41 | y: 1,
42 | constraints: {
43 | contentDensity: 2,
44 | minWidth: 1
45 | }
46 | }
47 | ])
48 | ).toEqual([
49 | {
50 | contentDensity: 6,
51 | spread: 3,
52 | minWidth: 2
53 | },
54 | {
55 | contentDensity: 6,
56 | spread: 4,
57 | minWidth: 3
58 | }
59 | ]);
60 | });
61 | it('should split content density and min width of cells expanding horizontaly by its length when reducing constraints', () => {
62 | expect(
63 | reduceColumnConstraints([
64 | {
65 | lenX: 3,
66 | lenY: 1,
67 | x: 0,
68 | y: 0,
69 | constraints: {
70 | contentDensity: 9,
71 | minWidth: 3
72 | }
73 | },
74 | {
75 | lenX: 1,
76 | lenY: 1,
77 | x: 0,
78 | y: 1,
79 | constraints: {
80 | contentDensity: 4,
81 | minWidth: 2
82 | }
83 | }
84 | ])
85 | ).toEqual([
86 | {
87 | contentDensity: 7,
88 | spread: 4,
89 | minWidth: 2
90 | },
91 | {
92 | contentDensity: 3,
93 | spread: 3,
94 | minWidth: 1
95 | },
96 | {
97 | contentDensity: 3,
98 | spread: 3,
99 | minWidth: 1
100 | }
101 | ]);
102 | });
103 | });
104 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/__tests__/utils.ts:
--------------------------------------------------------------------------------
1 | import { TRenderEngine } from '@native-html/transient-render-engine';
2 | const engine = new TRenderEngine();
3 |
4 | export function createTableTNode(html: string) {
5 | const ttree = engine.buildTTree(html);
6 | const table = ttree.children[0].children[0];
7 | expect(table.tagName).toBe('table');
8 | return table;
9 | }
10 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/computeColumnWidths.ts:
--------------------------------------------------------------------------------
1 | import pipe from 'ramda/src/pipe';
2 | import map from 'ramda/src/map';
3 | import prop from 'ramda/src/prop';
4 | import sum from 'ramda/src/sum';
5 | import min from 'ramda/src/min';
6 | import reduce from 'ramda/src/reduce';
7 | import converge from 'ramda/src/converge';
8 | import subtract from 'ramda/src/subtract';
9 | import partialRight from 'ramda/src/partialRight';
10 | import divide from 'ramda/src/divide';
11 | import add from 'ramda/src/add';
12 | import zip from 'ramda/src/zip';
13 | import multiply from 'ramda/src/multiply';
14 | import identity from 'ramda/src/identity';
15 |
16 | import { Display, TColumnConstraints } from '../shared-types';
17 | import reduceColumnConstraints from './reduceColumnConstraints';
18 |
19 | const mapMinWidths = map(prop('minWidth'));
20 | const mapspreads = map(prop('spread'));
21 |
22 | // Compute the normal content density for each column,
23 | // that is content density with the zero reference as
24 | // the shortest column.
25 | const mapNormalContentDensity = converge(
26 | (m: number, list: number[]) => {
27 | return map(partialRight(subtract, [m]))(list);
28 | },
29 | [reduce(min, Infinity), identity]
30 | );
31 |
32 | const weightContentDensity = converge(
33 | (s: number, list: number[]) => {
34 | return map(partialRight(divide, [s]))(list);
35 | },
36 | [sum, identity]
37 | );
38 |
39 | const mapWeightedColumnCoeffs = pipe(
40 | map(prop('contentDensity')),
41 | mapNormalContentDensity,
42 | weightContentDensity
43 | );
44 |
45 | const totalMinWidths = pipe(mapMinWidths, sum);
46 |
47 | export default function computeColumnWidths(display: Display): number[] {
48 | const contentWidth = display.contentWidth;
49 | let shouldClampWidth = !display.forceStretch;
50 | const columnConstraints = reduceColumnConstraints(display.cells);
51 | const minWidths = mapMinWidths(columnConstraints);
52 | const spreads = mapspreads(columnConstraints);
53 | const sumOfMinWidths = totalMinWidths(columnConstraints);
54 | if (contentWidth < sumOfMinWidths) {
55 | return minWidths;
56 | }
57 | const widthToAssign = contentWidth - sumOfMinWidths;
58 | const clampWidths = pipe(
59 | zip(spreads),
60 | map(reduce(min, Infinity))
61 | );
62 | const columns = pipe(
63 | mapWeightedColumnCoeffs,
64 | map(multiply(widthToAssign)),
65 | zip(minWidths),
66 | map(reduce(add, 0)),
67 | shouldClampWidth ? clampWidths : identity
68 | )(columnConstraints);
69 | return columns;
70 | }
71 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/createRenderTree.ts:
--------------------------------------------------------------------------------
1 | import {
2 | TableCell,
3 | Display,
4 | DisplayCell,
5 | TableFlexColumnContainer,
6 | TableFlexRowContainer,
7 | TableRoot
8 | } from '../shared-types';
9 | import pipe from 'ramda/src/pipe';
10 | import prop from 'ramda/src/prop';
11 | import slice from 'ramda/src/slice';
12 | import sum from 'ramda/src/sum';
13 | import map from 'ramda/src/map';
14 | import max from 'ramda/src/max';
15 | import reduce from 'ramda/src/reduce';
16 | import partial from 'ramda/src/partial';
17 | import flatten from 'ramda/src/flatten';
18 | import sort from 'ramda/src/sort';
19 | import filter from 'ramda/src/filter';
20 | import makeRows from './makeRows';
21 |
22 | const getRowGroupHeight = pipe(
23 | map(prop('lenY')),
24 | reduce(max, 0)
25 | );
26 |
27 | function groupCellsByVGroup(cellsByRow: TableCell[][]) {
28 | const cellsByVGroup: TableCell[][][] = [];
29 | let rowHeight = 1;
30 | for (let i = 0; i < cellsByRow.length; i += Math.max(rowHeight, 1)) {
31 | const row = cellsByRow[i];
32 | rowHeight = getRowGroupHeight(row);
33 | cellsByVGroup.push(slice(i, i + rowHeight)(cellsByRow));
34 | }
35 | return cellsByVGroup;
36 | }
37 |
38 | function makeRowContainer(cells: TableCell[]): TableFlexRowContainer {
39 | return {
40 | type: 'row-container',
41 | children: cells
42 | };
43 | }
44 |
45 | function makeColContainer(cells: TableCell[]): TableFlexColumnContainer {
46 | return {
47 | type: 'col-container',
48 | children: makeRows(cells).map(makeRowContainer)
49 | };
50 | }
51 |
52 | const splitToColumnContainers = pipe<
53 | TableCell[][],
54 | TableCell[],
55 | TableFlexColumnContainer[]
56 | >(flatten, function (cells: TableCell[]): TableFlexColumnContainer[] {
57 | let breakpointsX: number[] = pipe(
58 | filter((cell: TableCell) => cell.lenY > 1),
59 | map(prop('x'))
60 | )(cells);
61 | let breakpointIndex = 0;
62 | const cellsByRow = sort((a: TableCell, b: TableCell) => a.x - b.x)(cells);
63 | let containers: TableCell[][] = [];
64 | let colGroup: TableCell[] = [];
65 | for (const cell of cellsByRow) {
66 | if (cell.x < (breakpointsX[breakpointIndex] ?? Infinity)) {
67 | colGroup.push(cell);
68 | } else {
69 | colGroup.length && containers.push(colGroup);
70 | containers.push([cell]);
71 | colGroup = [];
72 | breakpointIndex += 1;
73 | }
74 | }
75 | colGroup.length && containers.push(colGroup);
76 | return containers.map(makeColContainer);
77 | });
78 |
79 | function translateVGroups(
80 | virtualRowGroups: TableCell[][][]
81 | ): TableFlexRowContainer[] {
82 | const flattenRows: TableFlexRowContainer[] = [];
83 | for (const rowGroup of virtualRowGroups) {
84 | if (rowGroup.length === 1) {
85 | flattenRows.push({
86 | type: 'row-container',
87 | children: rowGroup[0]
88 | });
89 | } else {
90 | const container: TableFlexRowContainer = {
91 | type: 'row-container',
92 | children: splitToColumnContainers(rowGroup)
93 | };
94 | flattenRows.push(container);
95 | }
96 | }
97 | return flattenRows;
98 | }
99 |
100 | function makeCell(columnWidths: number[], cell: DisplayCell): TableCell {
101 | return {
102 | ...cell,
103 | type: 'cell',
104 | width: pipe(slice(cell.x, cell.x + cell.lenX), sum)(columnWidths)
105 | };
106 | }
107 |
108 | export default function createRenderTree(
109 | display: Display,
110 | columnWidths: number[]
111 | ): TableRoot {
112 | const children = pipe(
113 | map(partial(makeCell, [columnWidths])),
114 | makeRows,
115 | groupCellsByVGroup,
116 | translateVGroups
117 | )(display.cells);
118 | return {
119 | type: 'root',
120 | children: children
121 | };
122 | }
123 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/fillTableDisplay.ts:
--------------------------------------------------------------------------------
1 | import { TNode } from 'react-native-render-html';
2 | import { Display, DisplayCell, Settings } from '../shared-types';
3 | import TCellConstraintsComputer from './TCellConstraintsComputer';
4 |
5 | export function createEmptyDisplay(config: Settings): Display {
6 | return {
7 | offsetX: 0,
8 | occupiedCoordinates: [],
9 | maxY: -1,
10 | maxX: -1,
11 | cells: [],
12 | ...config
13 | };
14 | }
15 |
16 | function computeOffsetX(display: Display, startX: number, startY: number) {
17 | return display.occupiedCoordinates.reduce((prev, coordinates) => {
18 | if (coordinates.x <= startX && coordinates.y === startY) {
19 | return prev + 1;
20 | }
21 | return prev;
22 | }, 0);
23 | }
24 |
25 | export default function fillTableDisplay(
26 | tnode: TNode,
27 | display: Display,
28 | computer: TCellConstraintsComputer
29 | ) {
30 | if (tnode.tagName === 'tr') {
31 | display.maxY = display.maxY + 1;
32 | display.offsetX = 0;
33 | }
34 | if (tnode.tagName === 'th' || tnode.tagName === 'td') {
35 | const rowspan = Number(tnode.attributes.rowspan);
36 | const colspan = Number(tnode.attributes.colspan);
37 | const lenX = Number.isFinite(colspan) ? colspan : 1;
38 | const lenY = Number.isFinite(rowspan) ? rowspan : 1;
39 | const initialStartX = display.offsetX + tnode.nodeIndex;
40 | const startY = display.maxY;
41 | const startX =
42 | computeOffsetX(display, initialStartX, display.maxY) + initialStartX;
43 | const constraints = computer.computeCellConstraints(tnode);
44 | const cell: DisplayCell = {
45 | lenX,
46 | lenY,
47 | x: startX,
48 | y: startY,
49 | tnode,
50 | constraints
51 | };
52 | display.cells.push(cell);
53 | display.offsetX += lenX - 1;
54 | if (lenY > 1) {
55 | for (let y = startY + 1; y < lenY + startY; y++) {
56 | display.occupiedCoordinates.push({ x: startX, y });
57 | }
58 | }
59 | display.maxX = Math.max(display.maxX, initialStartX);
60 | } else {
61 | tnode.children.forEach((child) =>
62 | fillTableDisplay(child, display, computer)
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/makeRows.ts:
--------------------------------------------------------------------------------
1 | import groupBy from 'ramda/src/groupBy';
2 | import values from 'ramda/src/values';
3 | import pipe from 'ramda/src/pipe';
4 | import prop from 'ramda/src/prop';
5 | import { TableCell } from '../shared-types';
6 |
7 | const makeRows = pipe(
8 | groupBy(pipe(prop('y'), String)),
9 | values
10 | );
11 |
12 | export default makeRows;
13 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/measure.ts:
--------------------------------------------------------------------------------
1 | import pick from 'ramda/src/pick';
2 | import pipe from 'ramda/src/pipe';
3 | import sum from 'ramda/src/sum';
4 | import map from 'ramda/src/map';
5 | import values from 'ramda/src/values';
6 | import { TNode } from 'react-native-render-html';
7 |
8 | type NativeBlockRetStyle = TNode['styles']['nativeBlockRet'];
9 | type SpacingFields = Extract<
10 | keyof NativeBlockRetStyle,
11 | | 'borderLeftWidth'
12 | | 'borderRightWidth'
13 | | 'marginLeft'
14 | | 'marginRight'
15 | | 'paddingLeft'
16 | | 'paddingRight'
17 | >;
18 |
19 | const hmarginFields = ['marginLeft', 'marginRight'] as const;
20 |
21 | const hspacingFields: Array = [
22 | 'borderLeftWidth',
23 | 'borderRightWidth',
24 | 'paddingLeft',
25 | 'paddingRight',
26 | ...hmarginFields
27 | ];
28 |
29 | function toNumber(value: string | number | undefined) {
30 | if (typeof value === 'number') {
31 | return value;
32 | }
33 | return 0;
34 | }
35 |
36 | export const getHorizontalMargins = pipe<
37 | NativeBlockRetStyle,
38 | Pick,
39 | Array,
40 | number[],
41 | number
42 | >(pick(hmarginFields), values as any, map(toNumber), sum);
43 |
44 | export const getHorizontalSpacing = pipe<
45 | NativeBlockRetStyle,
46 | Pick,
47 | Array,
48 | number[],
49 | number
50 | >(pick(hspacingFields), values as any, map(toNumber), sum);
51 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/helpers/reduceColumnConstraints.ts:
--------------------------------------------------------------------------------
1 | import groupBy from 'ramda/src/groupBy';
2 | import prop from 'ramda/src/prop';
3 | import pipe from 'ramda/src/pipe';
4 | import reduce from 'ramda/src/reduce';
5 | import map from 'ramda/src/map';
6 | import flatten from 'ramda/src/flatten';
7 | import values from 'ramda/src/values';
8 | import mapObjIndexed from 'ramda/src/mapObjIndexed';
9 |
10 | import {
11 | CellProperties,
12 | TCellConstraints,
13 | TColumnConstraints
14 | } from '../shared-types';
15 |
16 | const getColumnMetrics = pipe<
17 | CellProperties[],
18 | TCellConstraints[],
19 | TColumnConstraints
20 | >(
21 | map(prop('constraints')),
22 | reduce(
23 | (columnConstraints, cellConstraints) => {
24 | return {
25 | minWidth: Math.max(
26 | columnConstraints.minWidth,
27 | cellConstraints.minWidth
28 | ),
29 | contentDensity:
30 | columnConstraints.contentDensity + cellConstraints.contentDensity,
31 | spread: Math.max(
32 | columnConstraints.spread,
33 | cellConstraints.contentDensity
34 | )
35 | };
36 | },
37 | {
38 | minWidth: 0,
39 | spread: 0,
40 | contentDensity: 0
41 | }
42 | )
43 | );
44 |
45 | function splitColspanCells(cell: CellProperties) {
46 | if (cell.lenX > 1) {
47 | const cells: CellProperties[] = [];
48 | for (let i = 0; i < cell.lenX; i++) {
49 | cells[i] = {
50 | lenX: 1,
51 | lenY: cell.lenY,
52 | constraints: {
53 | minWidth: cell.constraints.minWidth / cell.lenX,
54 | contentDensity: cell.constraints.contentDensity / cell.lenX
55 | },
56 | x: cell.x + i,
57 | y: cell.y
58 | };
59 | }
60 | return cells;
61 | }
62 | return cell;
63 | }
64 |
65 | const reduceColumnConstraints = pipe(
66 | pipe(map(splitColspanCells), flatten),
67 | groupBy(pipe(prop('x'), String)),
68 | mapObjIndexed(getColumnMetrics),
69 | values
70 | );
71 |
72 | export default reduceColumnConstraints;
73 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/index.ts:
--------------------------------------------------------------------------------
1 | import { CustomBlockRenderer } from 'react-native-render-html';
2 | import { HeuristicTablePluginConfig, Settings } from './shared-types';
3 | import TableRenderer from './TableRenderer';
4 | import TdRenderer from './TdRenderer';
5 | import ThRenderer from './ThRenderer';
6 |
7 | export {
8 | CellProperties,
9 | Coordinates,
10 | DisplayCell,
11 | HeuristicTablePluginConfig,
12 | HTMLTableProps,
13 | TableCell,
14 | TableFlexColumnContainer,
15 | TableFlexRowContainer,
16 | TableCellPropsFromParent,
17 | TableRoot
18 | } from './shared-types';
19 |
20 | export { TableRenderer, ThRenderer, TdRenderer };
21 |
22 | /**
23 | * Renderers to be merged in the `renderers` prop of `RenderHTML` component.
24 | *
25 | * @public
26 | */
27 | const renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer> = {
28 | table: TableRenderer,
29 | th: ThRenderer as any,
30 | td: TdRenderer as any
31 | };
32 |
33 | export { default as useHtmlTableProps } from './useHtmlTableProps';
34 | export { default as useHtmlTableCellProps } from './useHtmlTableCellProps';
35 | export { default as HTMLTable } from './HTMLTable';
36 |
37 | declare module 'react-native-render-html' {
38 | interface RenderersProps {
39 | /**
40 | * Configuration for `@native-html/heuristic-table-plugin` table renderer.
41 | */
42 | table?: Settings & HeuristicTablePluginConfig;
43 | }
44 | }
45 |
46 | export default renderers;
47 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/useHtmlTableCellProps.ts:
--------------------------------------------------------------------------------
1 | import { TBlock, CustomRendererProps } from 'react-native-render-html';
2 | import { TableCellPropsFromParent } from './shared-types';
3 |
4 | /**
5 | * Customize `td` and `th` renderers while reusing default cell renderer logic.
6 | *
7 | * @param props - Props from custom renderer.
8 | *
9 | * @public
10 | */
11 | export default function useHtmlTableCellProps({
12 | propsFromParent,
13 | ...props
14 | }: CustomRendererProps): CustomRendererProps {
15 | const { config, cell } = propsFromParent as TableCellPropsFromParent;
16 | const styleFromConfig = config?.getStyleForCell?.call(null, cell);
17 | let spanStyles = {};
18 | if (cell.lenY > 1) {
19 | spanStyles = { justifyContent: 'center' };
20 | }
21 | if (cell.lenX > 1) {
22 | spanStyles = { alignItems: 'center' };
23 | }
24 | const style = {
25 | ...props.style,
26 | flexGrow: 1,
27 | flexShrink: 0,
28 | ...spanStyles,
29 | ...styleFromConfig,
30 | width: cell.width,
31 | marginLeft: 0,
32 | marginRight: 0,
33 | marginTop: 0,
34 | marginBottom: 0
35 | };
36 | return {
37 | ...props,
38 | style,
39 | propsFromParent
40 | };
41 | }
42 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/src/useHtmlTableProps.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import {
3 | CustomRendererProps,
4 | TBlock,
5 | TNode,
6 | useContentWidth,
7 | useRendererProps
8 | } from 'react-native-render-html';
9 | import { Settings, HTMLTableProps } from './shared-types';
10 | import TableLayout from './TableLayout';
11 |
12 | function useTableLayout({
13 | tnode,
14 | settings
15 | }: {
16 | tnode: TNode;
17 | settings: Settings;
18 | }) {
19 | return useMemo(() => {
20 | return new TableLayout(tnode, settings);
21 | }, [tnode, settings]);
22 | }
23 |
24 | /**
25 | * Customize the rendering logic of the table renderer via this hook.
26 | *
27 | * @param props - Props from custom renderer props.
28 | * @param options - Customize this hook behavior.
29 | *
30 | * @returns props for the {@link HTMLTable} component.
31 | *
32 | * @public
33 | */
34 | export default function useHtmlTableProps(
35 | { sharedProps, tnode, ...props }: CustomRendererProps,
36 | options: {
37 | /**
38 | * If present, overrides contentWidth from shared props.
39 | */
40 | overrideContentWidth?: number;
41 | } = {}
42 | ): HTMLTableProps {
43 | const table = useRendererProps('table');
44 | const forceStretch = table?.forceStretch ?? false;
45 | const sharedContentWidth = useContentWidth();
46 | const contentWidth =
47 | typeof options.overrideContentWidth === 'number'
48 | ? options.overrideContentWidth
49 | : sharedContentWidth;
50 | const settings = useMemo(
51 | () => ({ contentWidth, forceStretch }),
52 | [contentWidth, forceStretch]
53 | );
54 | const layout = useTableLayout({ tnode, settings });
55 | return {
56 | layout,
57 | settings,
58 | config: table || {},
59 | sharedProps,
60 | tnode,
61 | ...props
62 | };
63 | }
64 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src/"],
4 | "exclude": ["**/__tests__"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/heuristic-table-plugin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig-base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib"
5 | },
6 | "exclude": ["node_modules", "integration", "**/__tests__", "lib", "types"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /lib
3 | /types
4 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: false,
3 | extends: ['../../.eslintrc.js']
4 | };
5 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | # CocoaPods
2 | /ios/Pods/
3 |
4 | # Jest code coverage
5 | /coverage
6 |
7 | # This library
8 | /lib/
9 |
10 | # api-extractor
11 | /temp
12 |
13 | # Types must be bundled with api-extractor, not included in the repo
14 | /types
15 |
16 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/.release-it.js:
--------------------------------------------------------------------------------
1 | const name = require('./package.json').name;
2 | const configureRelease = require("release-config");
3 | module.exports = configureRelease(name);
4 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | 'module:metro-react-native-babel-preset',
4 | '@babel/preset-typescript'
5 | ],
6 | plugins: ['@babel/plugin-transform-react-jsx'],
7 | env: {}
8 | };
9 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframe.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframe](./iframe-plugin.htmliframe.md)
4 |
5 | ## HTMLIframe() function
6 |
7 | A component to render iframes in react-native-render-html.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export default function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): JSX.Element;
13 | ```
14 |
15 | ## Parameters
16 |
17 | | Parameter | Type | Description |
18 | | --- | --- | --- |
19 | | { WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit } | [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) | |
20 |
21 | Returns:
22 |
23 | JSX.Element
24 |
25 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.htmlattribs.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [htmlAttribs](./iframe-plugin.htmliframeprops.htmlattribs.md)
4 |
5 | ## HTMLIframeProps.htmlAttribs property
6 |
7 | Html attributes for this iframe node.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | htmlAttribs: Record;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md)
4 |
5 | ## HTMLIframeProps interface
6 |
7 | Props for the HTMLIframe component.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface HTMLIframeProps extends IframeConfig
13 | ```
14 | Extends: [IframeConfig](./iframe-plugin.iframeconfig.md)
15 |
16 | ## Properties
17 |
18 | | Property | Type | Description |
19 | | --- | --- | --- |
20 | | [htmlAttribs](./iframe-plugin.htmliframeprops.htmlattribs.md) | Record<string, string> | Html attributes for this iframe node. |
21 | | [onLinkPress?](./iframe-plugin.htmliframeprops.onlinkpress.md) | RenderersProps\['a'\]\['onPress'\] | (Optional) Handle link press events. |
22 | | [scaleFactor](./iframe-plugin.htmliframeprops.scalefactor.md) | number | When scalesPageToFit is enabled, scales the WebView zoom level to make sure the viewport fits contentWidth. |
23 | | [source](./iframe-plugin.htmliframeprops.source.md) | { uri?: string; html?: string; } | The source for the iframe. |
24 | | [style](./iframe-plugin.htmliframeprops.style.md) | StyleProp<ViewStyle> | Container style. |
25 | | [WebView](./iframe-plugin.htmliframeprops.webview.md) | ComponentType<WebViewProps> | The WebView
Component you wish to use. |
26 | | [webViewProps?](./iframe-plugin.htmliframeprops.webviewprops.md) | WebViewProps | (Optional) Props to be passed to the WebView
component; |
27 |
28 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.onlinkpress.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [onLinkPress](./iframe-plugin.htmliframeprops.onlinkpress.md)
4 |
5 | ## HTMLIframeProps.onLinkPress property
6 |
7 | Handle link press events.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | onLinkPress?: RenderersProps['a']['onPress'];
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.scalefactor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [scaleFactor](./iframe-plugin.htmliframeprops.scalefactor.md)
4 |
5 | ## HTMLIframeProps.scaleFactor property
6 |
7 | When scalesPageToFit is enabled, scales the WebView zoom level to make sure the viewport fits contentWidth.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | scaleFactor: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.source.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [source](./iframe-plugin.htmliframeprops.source.md)
4 |
5 | ## HTMLIframeProps.source property
6 |
7 | The source for the iframe.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | source: {
13 | uri?: string;
14 | html?: string;
15 | };
16 | ```
17 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.style.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [style](./iframe-plugin.htmliframeprops.style.md)
4 |
5 | ## HTMLIframeProps.style property
6 |
7 | Container style.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | style: StyleProp;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webview.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [WebView](./iframe-plugin.htmliframeprops.webview.md)
4 |
5 | ## HTMLIframeProps.WebView property
6 |
7 | The `WebView` Component you wish to use.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | WebView: ComponentType;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.htmliframeprops.webviewprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) > [webViewProps](./iframe-plugin.htmliframeprops.webviewprops.md)
4 |
5 | ## HTMLIframeProps.webViewProps property
6 |
7 | Props to be passed to the `WebView` component;
8 |
9 | Signature:
10 |
11 | ```typescript
12 | webViewProps?: WebViewProps;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.injectedcssstyles.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [injectedCSSStyles](./iframe-plugin.iframeconfig.injectedcssstyles.md)
4 |
5 | ## IframeConfig.injectedCSSStyles property
6 |
7 | When defined, the provided CSS will be injected in a `style` element.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | injectedCSSStyles?: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md)
4 |
5 | ## IframeConfig interface
6 |
7 | Configuration options for the HTMLIframe component. You can pass those options through `renderersProps.iframe` HTML prop.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface IframeConfig
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [injectedCSSStyles?](./iframe-plugin.iframeconfig.injectedcssstyles.md) | string | (Optional) When defined, the provided CSS will be injected in a style
element. |
20 | | [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. |
21 | | [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. |
22 | | [webViewProps?](./iframe-plugin.iframeconfig.webviewprops.md) | any | (Optional) Any props you'd like to pass to the WebView
component. |
23 |
24 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.removebodyspacing.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [removeBodySpacing](./iframe-plugin.iframeconfig.removebodyspacing.md)
4 |
5 | ## IframeConfig.removeBodySpacing property
6 |
7 | When `true`, a stylesheet will be inserted in the `WebView` to remove padding and margins for the `body` element.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | removeBodySpacing?: boolean;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.scalespagetofit.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [scalesPageToFit](./iframe-plugin.iframeconfig.scalespagetofit.md)
4 |
5 | ## IframeConfig.scalesPageToFit property
6 |
7 | When the iframe attribute width is wider than the contentWidth, scales down the viewport so that it doesn't overflows horizontally.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | scalesPageToFit?: boolean;
13 | ```
14 |
15 | ## Remarks
16 |
17 | Although it looks like the eponymous `WebView` prop, it works both on iOS and Android.
18 |
19 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframeconfig.webviewprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeConfig](./iframe-plugin.iframeconfig.md) > [webViewProps](./iframe-plugin.iframeconfig.webviewprops.md)
4 |
5 | ## IframeConfig.webViewProps property
6 |
7 | Any props you'd like to pass to the `WebView` component.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | webViewProps?: any;
13 | ```
14 |
15 | ## Remarks
16 |
17 | `source` and `javascriptEnabled` will be ignored and overriden.
18 |
19 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframemodel.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [iframeModel](./iframe-plugin.iframemodel.md)
4 |
5 | ## iframeModel variable
6 |
7 | The model to attach to custom iframe renderers.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | iframeModel: HTMLElementModel<'iframe', HTMLContentModel.block>
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.iframerenderer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [IframeRenderer](./iframe-plugin.iframerenderer.md)
4 |
5 | ## IframeRenderer variable
6 |
7 | The renderer component for the iframe element. This renderer is fully scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`. It also features `onLinkPress`.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | IframeRenderer: CustomBlockRenderer
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md)
4 |
5 | ## iframe-plugin package
6 |
7 | ## Functions
8 |
9 | | Function | Description |
10 | | --- | --- |
11 | | [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. |
12 | | [useHtmlIframeProps({ 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. |
13 |
14 | ## Interfaces
15 |
16 | | Interface | Description |
17 | | --- | --- |
18 | | [HTMLIframeProps](./iframe-plugin.htmliframeprops.md) | Props for the HTMLIframe component. |
19 | | [IframeConfig](./iframe-plugin.iframeconfig.md) | Configuration options for the HTMLIframe component. You can pass those options through renderersProps.iframe
HTML prop. |
20 |
21 | ## Variables
22 |
23 | | Variable | Description |
24 | | --- | --- |
25 | | [iframeModel](./iframe-plugin.iframemodel.md) | The model to attach to custom iframe renderers. |
26 | | [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
. |
27 |
28 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/iframe-plugin.usehtmliframeprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/iframe-plugin](./iframe-plugin.md) > [useHtmlIframeProps](./iframe-plugin.usehtmliframeprops.md)
4 |
5 | ## useHtmlIframeProps() function
6 |
7 | Extract props for the HTMLIframe component from renderer function arguments. This function is especially usefull for custom iframe renderers.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export default function useHtmlIframeProps({ style, tnode }: CustomRendererProps, iframeConfig?: IframeConfig): HTMLIframeProps;
13 | ```
14 |
15 | ## Parameters
16 |
17 | | Parameter | Type | Description |
18 | | --- | --- | --- |
19 | | { style, tnode } | CustomRendererProps<TBlock> | |
20 | | iframeConfig | [IframeConfig](./iframe-plugin.iframeconfig.md) | Override config options. |
21 |
22 | Returns:
23 |
24 | [HTMLIframeProps](./iframe-plugin.htmliframeprops.md)
25 |
26 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/docs/index.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md)
4 |
5 | ## API Reference
6 |
7 | ## Packages
8 |
9 | | Package | Description |
10 | | --- | --- |
11 | | [@native-html/iframe-plugin](./iframe-plugin.md) | |
12 |
13 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/etc/iframe-plugin.api.md:
--------------------------------------------------------------------------------
1 | ## API Report File for "@native-html/iframe-plugin"
2 |
3 | > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4 |
5 | ```ts
6 |
7 | import { ComponentType } from 'react';
8 | import { CustomBlockRenderer } from 'react-native-render-html';
9 | import { CustomRendererProps } from 'react-native-render-html';
10 | import { HTMLContentModel } from 'react-native-render-html';
11 | import { HTMLElementModel } from '@native-html/transient-render-engine';
12 | import { RenderersProps } from 'react-native-render-html';
13 | import { StyleProp } from 'react-native';
14 | import type { TBlock } from '@native-html/transient-render-engine';
15 | import { ViewStyle } from 'react-native';
16 |
17 | // @public
18 | export function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, scaleFactor, injectedCSSStyles, removeBodySpacing, scalesPageToFit }: HTMLIframeProps): JSX.Element;
19 |
20 | // @public
21 | export interface HTMLIframeProps extends IframeConfig {
22 | htmlAttribs: Record;
23 | onLinkPress?: RenderersProps['a']['onPress'];
24 | scaleFactor: number;
25 | source: {
26 | uri?: string;
27 | html?: string;
28 | };
29 | style: StyleProp;
30 | WebView: ComponentType;
31 | webViewProps?: WebViewProps;
32 | }
33 |
34 | // @public
35 | export interface IframeConfig {
36 | injectedCSSStyles?: string;
37 | removeBodySpacing?: boolean;
38 | scalesPageToFit?: boolean;
39 | webViewProps?: any;
40 | }
41 |
42 | // @public
43 | export const iframeModel: HTMLElementModel<'iframe', HTMLContentModel.block>;
44 |
45 | // @public
46 | const IframeRenderer: CustomBlockRenderer;
47 |
48 | export default IframeRenderer;
49 |
50 | // @public
51 | export function useHtmlIframeProps({ style, tnode }: CustomRendererProps, iframeConfig?: IframeConfig): HTMLIframeProps;
52 |
53 |
54 | // (No @packageDocumentation comment for this package)
55 |
56 | ```
57 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'react-native',
3 | moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
4 | testRegex: 'src/.*\\.test\\.tsx?$',
5 | coveragePathIgnorePatterns: ['/node_modules/', '__tests__'],
6 | transformIgnorePatterns: [
7 | 'node_modules/(?!(@react-native|react-native|react-native-webview|ramda|react-native-render-html)/)'
8 | ]
9 | };
10 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@native-html/iframe-plugin",
3 | "version": "2.6.1",
4 | "description": "🌐 A WebView-based plugin to render iframes in react-native-render-html",
5 | "main": "lib/commonjs/index.js",
6 | "module": "lib/module/index.js",
7 | "react-native": "src/",
8 | "types": "types/@native-html/iframe-plugin/index.d.ts",
9 | "files": [
10 | "lib",
11 | "src",
12 | "types",
13 | "docs"
14 | ],
15 | "scripts": {
16 | "test": "yarn test:ts && yarn test:lint && yarn test:jest",
17 | "test:jest": "jest src/",
18 | "test:ts": "tsc --noEmit",
19 | "test:lint": "eslint --ext ts,tsx src/",
20 | "build": "yarn build:source && yarn build:defs && yarn build:doc",
21 | "build:source": "bob build",
22 | "build:defs": "api-extractor run --local --verbose",
23 | "build:doc": "api-documenter markdown --input-folder temp --output-folder ./docs",
24 | "prepack": "yarn run build"
25 | },
26 | "keywords": [
27 | "react-native",
28 | "react-native-render-html",
29 | "html",
30 | "iframe",
31 | "plugins"
32 | ],
33 | "devDependencies": {
34 | "@babel/cli": "^7.15.4",
35 | "@babel/core": "^7.15.5",
36 | "@babel/plugin-transform-react-jsx": "^7.14.9",
37 | "@babel/preset-typescript": "^7.15.0",
38 | "@babel/runtime": "^7.15.4",
39 | "@formidable-webview/ersatz": "^2.1.2",
40 | "@formidable-webview/ersatz-testing": "^2.0.5",
41 | "@microsoft/api-documenter": "^7.12.7",
42 | "@microsoft/api-extractor": "7.13.1",
43 | "@release-it/conventional-changelog": "^2.0.1",
44 | "@testing-library/react-native": "^7.2.0",
45 | "@types/jest": "^26.0.24",
46 | "@types/react": "^16.14.14",
47 | "@types/react-native": "^0.63.53",
48 | "@types/react-test-renderer": "^16.9.5",
49 | "babel-jest": "^26.6.3",
50 | "eslint": "^7.32.0",
51 | "jest": "^26.6.3",
52 | "metro-react-native-babel-preset": "^0.64.0",
53 | "metro-react-native-babel-transformer": "^0.64.0",
54 | "react": "17.0.1",
55 | "react-native": "0.64.2",
56 | "react-native-builder-bob": "^0.17.1",
57 | "react-native-render-html": "6.1.0",
58 | "react-native-webview": "11.0.0",
59 | "react-test-renderer": "17.0.2",
60 | "release-it": "^14.3.0",
61 | "typescript": "~4.4.2"
62 | },
63 | "dependencies": {
64 | "@formidable-webview/webshell": "^2.6.0",
65 | "@native-html/plugins-core": "workspace:*",
66 | "@types/prop-types": "^15.7.4",
67 | "prop-types": "^15.7.2"
68 | },
69 | "peerDependencies": {
70 | "react": ">= 16.8.0",
71 | "react-native": ">= 0.59.0",
72 | "react-native-render-html": ">= 6.1.0 < 7"
73 | },
74 | "author": "Jules Sam. Randolph (https://github.com/jsamr)",
75 | "homepage": "https://github.com/native-html/plugins/tree/master/packages/iframe-plugin#readme",
76 | "license": "MIT",
77 | "repository": {
78 | "type": "git",
79 | "directory": "packages/iframe-plugin",
80 | "url": "git+ssh://git@github.com/native-html/plugins.git"
81 | },
82 | "publishConfig": {
83 | "access": "public"
84 | },
85 | "react-native-builder-bob": {
86 | "source": "src",
87 | "output": "lib",
88 | "targets": [
89 | [
90 | "module",
91 | {
92 | "babelrc": false
93 | }
94 | ],
95 | [
96 | "commonjs",
97 | {
98 | "babelrc": false
99 | }
100 | ],
101 | [
102 | "typescript",
103 | {
104 | "project": "tsconfig.build.json"
105 | }
106 | ]
107 | ]
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/src/IframeRenderer.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | CustomBlockRenderer,
4 | defaultHTMLElementModels,
5 | HTMLContentModel
6 | } from 'react-native-render-html';
7 | import { HTMLElementModel } from '@native-html/transient-render-engine';
8 | import useHtmlIframeProps from './useHtmlIframeProps';
9 | import HTMLIframe from './HTMLIframe';
10 |
11 | /**
12 | * The renderer component for the iframe element. This renderer is fully
13 | * scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`.
14 | * It also features `onLinkPress`.
15 | *
16 | * @public
17 | */
18 | const IframeRenderer: CustomBlockRenderer = function IframeRenderer(props) {
19 | const iframeProps = useHtmlIframeProps(props);
20 | return React.createElement(HTMLIframe, iframeProps);
21 | };
22 |
23 | /**
24 | * The model to attach to custom iframe renderers.
25 | *
26 | * @public
27 | */
28 | export const iframeModel: HTMLElementModel<'iframe', HTMLContentModel.block> =
29 | defaultHTMLElementModels.iframe.extend({
30 | contentModel: HTMLContentModel.block,
31 | isOpaque: true
32 | });
33 |
34 | export default IframeRenderer;
35 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/src/__tests__/IframeRenderer.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HTML, { RenderHTMLProps } from 'react-native-render-html';
3 | import renderer from 'react-test-renderer';
4 | import WebView from 'react-native-webview';
5 | import IframeRenderer, { iframeModel } from '../IframeRenderer';
6 |
7 | describe('iframe renderer', () => {
8 | const defaultConfig: Partial = {
9 | WebView,
10 | renderers: {
11 | iframe: IframeRenderer
12 | },
13 | customHTMLElementModels: {
14 | iframe: iframeModel
15 | },
16 | contentWidth: 10
17 | };
18 | it('should render without errors', () => {
19 | expect(() => {
20 | renderer.create(
21 | '
25 | }}
26 | />
27 | );
28 | }).not.toThrow();
29 | });
30 | it('should support provideEmbeddedHeaders prop', () => {
31 | const props: RenderHTMLProps = {
32 | source: {
33 | html: ''
34 | },
35 | provideEmbeddedHeaders: (uri, tagName, params) => {
36 | //@ts-ignore
37 | if (tagName === 'iframe') {
38 | params;
39 | return {
40 | 'X-Frame-Options': 'ALLOW-FROM https://google.com'
41 | };
42 | }
43 | }
44 | };
45 | const rendered = renderer.create( );
46 |
47 | expect(rendered.root.findByType(WebView).props.source).toMatchObject({
48 | headers: {
49 | 'X-Frame-Options': 'ALLOW-FROM https://google.com'
50 | }
51 | });
52 | });
53 | });
54 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/src/__tests__/extractPrintDimensions.test.ts:
--------------------------------------------------------------------------------
1 | import extractPrintDimensions from '../extractPrintDimensions';
2 |
3 | describe('extractPrintWidth', () => {
4 | it('should fallback to content width with a 16 / 9 default aspect ratio when no styles are available', () => {
5 | expect(
6 | extractPrintDimensions({
7 | attrHeight: null,
8 | attrWidth: null,
9 | styleHeight: null,
10 | styleWidth: null,
11 | contentWidth: 300
12 | })
13 | ).toEqual({
14 | printWidth: 300,
15 | printHeight: (300 / 16) * 9
16 | });
17 | });
18 | it('should pick attributes aspect ratio and scale to the min(contentWidth, physicalWidth)', () => {
19 | expect(
20 | extractPrintDimensions({
21 | attrHeight: 400,
22 | attrWidth: 300,
23 | styleHeight: null,
24 | styleWidth: null,
25 | contentWidth: 300
26 | })
27 | ).toEqual({
28 | printWidth: 300,
29 | printHeight: (300 / 3) * 4
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/src/extractPrintDimensions.ts:
--------------------------------------------------------------------------------
1 | export interface ExtractPrintDimensionsParams {
2 | attrWidth?: number | null;
3 | attrHeight?: number | null;
4 | styleWidth?: number | null;
5 | styleHeight?: number | null;
6 | contentWidth: number;
7 | }
8 |
9 | export default function extractPrintDimensions({
10 | attrWidth,
11 | attrHeight,
12 | styleWidth,
13 | styleHeight,
14 | contentWidth
15 | }: ExtractPrintDimensionsParams) {
16 | let printWidth: number, printHeight: number;
17 | let ratio: number;
18 | if (typeof attrWidth === 'number' && typeof attrHeight === 'number') {
19 | ratio = attrWidth / attrHeight;
20 | } else if (
21 | typeof styleWidth === 'number' &&
22 | typeof styleHeight === 'number'
23 | ) {
24 | ratio = styleWidth / styleHeight;
25 | } else {
26 | ratio = 16 / 9;
27 | }
28 | printWidth = Math.min(
29 | contentWidth,
30 | typeof attrWidth === 'number'
31 | ? attrWidth
32 | : typeof styleWidth === 'number'
33 | ? styleWidth
34 | : contentWidth
35 | );
36 | printHeight = printWidth / ratio;
37 | return {
38 | printWidth,
39 | printHeight
40 | };
41 | }
42 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/src/index.ts:
--------------------------------------------------------------------------------
1 | import { IframeConfig } from './HTMLIframe';
2 | export { default, iframeModel } from './IframeRenderer';
3 | export { default as useHtmlIframeProps } from './useHtmlIframeProps';
4 | export { default as HTMLIframe } from './HTMLIframe';
5 | export type { HTMLIframeProps, IframeConfig } from './HTMLIframe';
6 |
7 | declare module 'react-native-render-html' {
8 | interface RenderersProps {
9 | /**
10 | * Configuration for `@native-html/iframe-plugin` iframe renderer.
11 | */
12 | iframe?: IframeConfig;
13 | }
14 |
15 | interface EmbeddedWithHeadersParamsMap {
16 | iframe: {
17 | /**
18 | * The print height of the iframe in DPI.
19 | */
20 | printHeight: number;
21 | /**
22 | * The print width of the iframe in DPI.
23 | */
24 | printWidth: number;
25 | };
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/src/useHtmlIframeProps.ts:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 | import {
3 | CustomRendererProps,
4 | useDocumentMetadata,
5 | useSharedProps,
6 | useNormalizedUrl,
7 | useRendererProps,
8 | useContentWidth
9 | } from 'react-native-render-html';
10 | import extractPrintDimensions, {
11 | ExtractPrintDimensionsParams
12 | } from './extractPrintDimensions';
13 | import { IframeConfig, HTMLIframeProps } from './HTMLIframe';
14 | import type { TBlock } from '@native-html/transient-render-engine';
15 |
16 | const defaultIframeConfig: IframeConfig = {
17 | webViewProps: {
18 | allowsFullscreenVideo: true
19 | }
20 | };
21 |
22 | /**
23 | * Extract props for the HTMLIframe component from renderer function arguments.
24 | * This function is especially usefull for custom iframe renderers.
25 | *
26 | * @param props - The props of a custom block renderer.
27 | * @param iframeConfig - Override config options.
28 | *
29 | * @public
30 | */
31 | export default function useHtmlIframeProps(
32 | { style, tnode }: CustomRendererProps,
33 | iframeConfig?: IframeConfig
34 | ): HTMLIframeProps {
35 | const {
36 | WebView,
37 | defaultWebViewProps,
38 | computeEmbeddedMaxWidth,
39 | provideEmbeddedHeaders
40 | } = useSharedProps();
41 | const contentWidth = useContentWidth();
42 | const globalIframeConfig = useRendererProps('iframe');
43 | const { onPress: onLinkPress } = useRendererProps('a');
44 | const resolvedConfig = {
45 | ...defaultIframeConfig,
46 | ...globalIframeConfig,
47 | ...iframeConfig,
48 | webViewProps: {
49 | ...defaultWebViewProps,
50 | ...defaultIframeConfig.webViewProps,
51 | ...globalIframeConfig?.webViewProps,
52 | ...iframeConfig?.webViewProps
53 | }
54 | };
55 | const resolvedContentWidth =
56 | typeof contentWidth === 'number'
57 | ? contentWidth
58 | : Dimensions.get('window').width;
59 | const documentBaseUrl = useDocumentMetadata().baseUrl;
60 | const availableWidth =
61 | computeEmbeddedMaxWidth?.call(null, resolvedContentWidth, 'iframe') ||
62 | resolvedContentWidth;
63 | const htmlAttribs = tnode.attributes;
64 | const normalizedUrl = useNormalizedUrl(htmlAttribs.src);
65 | const { width, height, ...restStyle } = style;
66 | const attrWidth = Number(htmlAttribs.width);
67 | const attrHeight = Number(htmlAttribs.height);
68 | const printConfig: ExtractPrintDimensionsParams = {
69 | attrWidth: Number.isNaN(attrWidth) ? null : attrWidth,
70 | attrHeight: Number.isNaN(attrHeight) ? null : attrHeight,
71 | styleWidth: typeof width === 'string' ? null : width,
72 | styleHeight: typeof height === 'string' ? null : height,
73 | contentWidth: availableWidth
74 | };
75 | const { printWidth, printHeight } = extractPrintDimensions(printConfig);
76 | const scaleFactor =
77 | typeof printConfig.attrWidth === 'number' &&
78 | printConfig.attrWidth > printWidth
79 | ? printWidth / attrWidth
80 | : 1;
81 |
82 | const source = htmlAttribs.srcdoc
83 | ? { html: htmlAttribs.srcdoc as string, baseUrl: documentBaseUrl }
84 | : {
85 | uri: normalizedUrl,
86 | headers: provideEmbeddedHeaders?.(normalizedUrl, 'iframe', {
87 | printHeight,
88 | printWidth
89 | })
90 | };
91 |
92 | return {
93 | ...resolvedConfig,
94 | source,
95 | onLinkPress,
96 | htmlAttribs,
97 | scaleFactor,
98 | style: [restStyle, { width: printWidth, height: printHeight }],
99 | WebView
100 | };
101 | }
102 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src/"],
4 | "exclude": ["**/__tests__"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/iframe-plugin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig-base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib"
5 | },
6 | "exclude": ["node_modules", "**/__tests__", "lib", "types"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/plugins-core/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: false,
3 | extends: ['../../.eslintrc.js']
4 | };
5 |
--------------------------------------------------------------------------------
/packages/plugins-core/.gitignore:
--------------------------------------------------------------------------------
1 | # CocoaPods
2 | /ios/Pods/
3 |
4 | # Jest code coverage
5 | /coverage
6 |
7 | # This library
8 | /lib/
9 |
10 | # api-extractor
11 | /temp
12 |
13 | # Types must be bundled with api-extractor, not included in the repo
14 | /types
15 |
16 |
--------------------------------------------------------------------------------
/packages/plugins-core/.release-it.js:
--------------------------------------------------------------------------------
1 | const name = require('./package.json').name;
2 | const configureRelease = require("release-config");
3 | module.exports = configureRelease(name);
4 |
--------------------------------------------------------------------------------
/packages/plugins-core/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # [1.3.0](https://github.com/native-html/plugins/compare/@native-html/plugins-core@1.1.0...@native-html/plugins-core@1.3.0) (2021-06-08)
2 |
3 |
4 | ### Features
5 |
6 | * **core:** support react-native-render-html@6.0.0-beta.0 ([d8a2c95](https://github.com/native-html/plugins/commit/d8a2c95b7f918206bcc12a8ce542d77d992a6c6e))
7 | * support react-native-render-html@6.0.0-alpha.25; beware of upstream breaking changes ([53e322c](https://github.com/native-html/plugins/commit/53e322cad64aece27d5c95c1bc9fb4a3095addbd))
8 |
9 | # [1.2.0](https://github.com/native-html/plugins/compare/@native-html/plugins-core@1.1.0...@native-html/plugins-core@1.2.0) (2021-05-21)
10 |
11 |
12 | ### Features
13 |
14 | * support react-native-render-html@6.0.0-alpha.25; beware of upstream breaking changes ([55b2014](https://github.com/native-html/plugins/commit/55b201483ce27a49811727db16624f36e06fc9e4))
15 |
16 | # [1.1.0](https://github.com/native-html/plugins/compare/@native-html/plugins-core@1.0.1...@native-html/plugins-core@1.1.0) (2021-04-17)
17 |
18 |
19 | ### Features
20 |
21 | * **plugin-core:** support react-native-render-html@6.0.0-alpha.23 ([5b2794c](https://github.com/native-html/plugins/commit/5b2794c23b3aa20136793e2c0dc72efcea654976))
22 |
23 | ## [1.0.1](https://github.com/native-html/plugins/compare/@native-html/plugins-core@1.0.0...@native-html/plugins-core@1.0.1) (2021-02-18)
24 |
25 |
26 | ### Bug Fixes
27 |
28 | * replace outdated type import `RenderHTMLPassedProps` ([872bc96](https://github.com/native-html/plugins/commit/872bc965d8b5c5e8e37430060a2edc343549623f))
29 |
30 | # 1.0.0 (2021-02-07)
31 |
32 |
33 | ### Features
34 |
35 | * **plugins-core:** new linkPressTargetToOnDOMLinkPressArgs utility ([100384d](https://github.com/native-html/plugins/commit/100384debed5b88ccb1a067712c8e3f340a5659a))
36 |
37 |
--------------------------------------------------------------------------------
/packages/plugins-core/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | 'module:metro-react-native-babel-preset',
4 | '@babel/preset-typescript'
5 | ],
6 | plugins: ['@babel/plugin-transform-react-jsx'],
7 | env: {}
8 | };
9 |
--------------------------------------------------------------------------------
/packages/plugins-core/etc/plugins-core.api.md:
--------------------------------------------------------------------------------
1 | ## API Report File for "@native-html/plugins-core"
2 |
3 | > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4 |
5 | ```ts
6 |
7 | import { LinkPressTarget } from '@formidable-webview/webshell';
8 | import { RenderersProps } from 'react-native-render-html';
9 |
10 | // @public
11 | export function linkPressTargetToOnDOMLinkPressArgs({ uri, classAttribute, downloadAttribute, hrefAttribute, hreflangAttribute, targetAttribute, idAttribute, nameAttribute, referrerpolicyAttribute, relAttribute, typeAttribute }: LinkPressTarget): Parameters['onPress']>;
12 |
13 |
14 | // (No @packageDocumentation comment for this package)
15 |
16 | ```
17 |
--------------------------------------------------------------------------------
/packages/plugins-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@native-html/plugins-core",
3 | "version": "1.3.0",
4 | "description": "A set of shared utilities for plugins",
5 | "main": "lib/commonjs/index.js",
6 | "module": "lib/module/index.js",
7 | "react-native": "src/",
8 | "types": "types/@native-html/plugins-core/index.d.ts",
9 | "files": [
10 | "lib",
11 | "src",
12 | "types",
13 | "docs"
14 | ],
15 | "scripts": {
16 | "test": "yarn test:ts && yarn test:lint && yarn test:jest",
17 | "test:jest": "jest src/",
18 | "test:ts": "tsc --noEmit",
19 | "test:lint": "eslint --ext ts,tsx src/",
20 | "build": "yarn build:source && yarn build:defs",
21 | "build:source": "bob build",
22 | "build:defs": "api-extractor run --local --verbose",
23 | "prepack": "yarn run build"
24 | },
25 | "keywords": [],
26 | "devDependencies": {
27 | "@babel/cli": "^7.15.4",
28 | "@babel/core": "^7.15.5",
29 | "@babel/plugin-transform-react-jsx": "^7.14.9",
30 | "@babel/preset-typescript": "^7.15.0",
31 | "@babel/runtime": "^7.15.4",
32 | "@formidable-webview/webshell": "^2.6.0",
33 | "@microsoft/api-extractor": "7.13.1",
34 | "@release-it/conventional-changelog": "^2.0.1",
35 | "@testing-library/react-native": "^7.2.0",
36 | "@tsconfig/react-native": "^1.0.3",
37 | "@types/html-validator": "^5.0.1",
38 | "@types/jest": "^26.0.24",
39 | "@types/react": "^16.14.14",
40 | "@types/react-native": "^0.63.53",
41 | "@types/react-test-renderer": "^16.9.5",
42 | "babel-jest": "^26.6.3",
43 | "eslint": "^7.32.0",
44 | "jest": "^26.6.3",
45 | "metro-react-native-babel-preset": "^0.64.0",
46 | "metro-react-native-babel-transformer": "^0.64.0",
47 | "react": "17.0.1",
48 | "react-native": "0.64.2",
49 | "react-native-builder-bob": "^0.17.1",
50 | "react-native-render-html": "6.1.0",
51 | "react-test-renderer": "17.0.2",
52 | "release-it": "^14.3.0",
53 | "typescript": "~4.4.2"
54 | },
55 | "peerDependencies": {
56 | "@formidable-webview/webshell": "^2.3.0",
57 | "react": ">= 16.8.0",
58 | "react-native": ">= 0.63.0",
59 | "react-native-render-html": ">= 6.0.0-beta.0 || 6.x"
60 | },
61 | "author": "Jules Sam. Randolph (https://github.com/jsamr)",
62 | "homepage": "https://github.com/native-html/plugins/tree/master/packages/plugins-core#readme",
63 | "license": "MIT",
64 | "repository": {
65 | "type": "git",
66 | "directory": "packages/plugins-core",
67 | "url": "git+ssh://git@github.com/native-html/plugins.git"
68 | },
69 | "publishConfig": {
70 | "access": "public"
71 | },
72 | "react-native-builder-bob": {
73 | "source": "src",
74 | "output": "lib",
75 | "targets": [
76 | [
77 | "module",
78 | {
79 | "babelrc": false
80 | }
81 | ],
82 | [
83 | "commonjs",
84 | {
85 | "babelrc": false
86 | }
87 | ],
88 | [
89 | "typescript",
90 | {
91 | "project": "tsconfig.build.json"
92 | }
93 | ]
94 | ]
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/packages/plugins-core/src/__tests__/linkPressTargetToOnDOMLinkPressArgs.test.ts:
--------------------------------------------------------------------------------
1 | import linkPressTargetToOnDOMLinkPressArgs from '../linkPressTargetToOnDOMLinkPressArgs';
2 |
3 | describe('linkPressTargetToOnDOMLinkPressArgs', () => {
4 | it('should transform all attributes', () => {
5 | const expectedOutput: ReturnType<
6 | typeof linkPressTargetToOnDOMLinkPressArgs
7 | > = [
8 | { nativeEvent: {} } as any,
9 | 'https://google.com/',
10 | {
11 | class: 'link',
12 | href: 'https://google.com/',
13 | hreflang: 'en',
14 | id: 'anchor03',
15 | target: '_blank',
16 | data: { custom: 'data' }
17 | },
18 | '_blank'
19 | ];
20 | expect(
21 | linkPressTargetToOnDOMLinkPressArgs({
22 | classAttribute: 'link',
23 | clickedAnchorBoundingRect: {} as any,
24 | downloadAttribute: null,
25 | hrefAttribute: 'https://google.com/',
26 | hreflangAttribute: 'en',
27 | idAttribute: 'anchor03',
28 | scheme: 'https',
29 | page: {} as any,
30 | nameAttribute: null,
31 | referrerpolicyAttribute: null,
32 | relAttribute: null,
33 | targetAttribute: '_blank',
34 | typeAttribute: null,
35 | uri: 'https://google.com/',
36 | dataAttributes: { custom: 'data' }
37 | })
38 | ).toEqual(expectedOutput);
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/packages/plugins-core/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as linkPressTargetToOnDOMLinkPressArgs } from './linkPressTargetToOnDOMLinkPressArgs';
2 |
--------------------------------------------------------------------------------
/packages/plugins-core/src/linkPressTargetToOnDOMLinkPressArgs.ts:
--------------------------------------------------------------------------------
1 | import { RenderersProps } from 'react-native-render-html';
2 | import { LinkPressTarget } from '@formidable-webview/webshell';
3 |
4 | /**
5 | * This function converts an "click event" from webshell to an array of
6 | * arguments for `onLinkPress` callback from react-native-render-html.
7 | *
8 | * @param param0 - The event from webshell
9 | * @public
10 | */
11 | export default function linkPressTargetToOnDOMLinkPressArgs({
12 | uri,
13 | classAttribute,
14 | downloadAttribute,
15 | hrefAttribute,
16 | hreflangAttribute,
17 | targetAttribute,
18 | idAttribute,
19 | nameAttribute,
20 | referrerpolicyAttribute,
21 | relAttribute,
22 | typeAttribute,
23 | dataAttributes
24 | }: LinkPressTarget): Parameters['onPress']> {
25 | const attributes = {
26 | class: classAttribute,
27 | download: downloadAttribute,
28 | href: hrefAttribute,
29 | hreflang: hreflangAttribute,
30 | id: idAttribute,
31 | name: nameAttribute,
32 | referrerpolicy: referrerpolicyAttribute,
33 | rel: relAttribute,
34 | type: typeAttribute,
35 | target: targetAttribute,
36 | data: dataAttributes
37 | };
38 | for (const name in attributes) {
39 | if (attributes[name] == null) {
40 | delete attributes[name];
41 | }
42 | }
43 | return [
44 | { nativeEvent: {} } as any,
45 | uri,
46 | attributes as any,
47 | (targetAttribute as any) || '_self'
48 | ];
49 | }
50 |
--------------------------------------------------------------------------------
/packages/plugins-core/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src/"],
4 | "exclude": ["**/__tests__"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/plugins-core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig-base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib"
5 | },
6 | "exclude": ["node_modules", "integration", "**/__tests__", "lib", "types"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/release-config/index.js:
--------------------------------------------------------------------------------
1 | module.exports = function (name) {
2 | const template = name + '@${version}';
3 | return {
4 | git: {
5 | commitMessage: 'chore: release ' + template,
6 | tagName: template
7 | },
8 | npm: {
9 | publish: true
10 | },
11 | github: {
12 | release: true,
13 | releaseName: template
14 | },
15 | plugins: {
16 | '@release-it/conventional-changelog': {
17 | preset: 'angular',
18 | infile: 'CHANGELOG.md'
19 | }
20 | }
21 | };
22 | };
23 |
--------------------------------------------------------------------------------
/packages/release-config/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "release-config",
3 | "version": "1.0.0",
4 | "private": true,
5 | "main": "index.js"
6 | }
7 |
--------------------------------------------------------------------------------
/packages/table-plugin/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /lib
3 | /types
4 |
--------------------------------------------------------------------------------
/packages/table-plugin/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: false,
3 | extends: ['../../.eslintrc.js'],
4 | overrides: [
5 | {
6 | files: ['*.webjs'],
7 | extends: '@formidable-webview/eslint-config-webjs'
8 | }
9 | ]
10 | };
11 |
--------------------------------------------------------------------------------
/packages/table-plugin/.gitignore:
--------------------------------------------------------------------------------
1 | # CocoaPods
2 | /ios/Pods/
3 |
4 | # Jest code coverage
5 | /coverage
6 |
7 | # This library
8 | /lib/
9 |
10 | # api-extractor
11 | /temp
12 |
13 | # Types must be bundled with api-extractor, not included in the repo
14 | /types
15 |
16 |
--------------------------------------------------------------------------------
/packages/table-plugin/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | examples/
3 | tsconfig.json
4 | tslint.json
5 |
6 |
7 |
--------------------------------------------------------------------------------
/packages/table-plugin/.release-it.js:
--------------------------------------------------------------------------------
1 | const name = require('./package.json').name;
2 | const configureRelease = require("release-config");
3 | module.exports = configureRelease(name);
4 |
--------------------------------------------------------------------------------
/packages/table-plugin/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | 'module:metro-react-native-babel-preset',
4 | '@babel/preset-typescript'
5 | ],
6 | plugins: ['@babel/plugin-transform-react-jsx'],
7 | env: {}
8 | };
9 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/index.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md)
4 |
5 | ## API Reference
6 |
7 | ## Packages
8 |
9 | | Package | Description |
10 | | --- | --- |
11 | | [@native-html/table-plugin](./table-plugin.md) | |
12 |
13 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.cssrulesfromspecs.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [cssRulesFromSpecs](./table-plugin.cssrulesfromspecs.md)
4 |
5 | ## cssRulesFromSpecs() function
6 |
7 | Create css rules from a specification object.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export declare function cssRulesFromSpecs(specs?: TableStyleSpecs): string;
13 | ```
14 |
15 | ## Parameters
16 |
17 | | Parameter | Type | Description |
18 | | --- | --- | --- |
19 | | specs | [TableStyleSpecs](./table-plugin.tablestylespecs.md) | The specifications object. |
20 |
21 | Returns:
22 |
23 | string
24 |
25 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.defaulttablestylesspecs.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [defaultTableStylesSpecs](./table-plugin.defaulttablestylesspecs.md)
4 |
5 | ## defaultTableStylesSpecs variable
6 |
7 | Default styles attributes.
8 |
9 |
10 |
11 | Signature:
12 |
13 | ```typescript
14 | defaultTableStylesSpecs: TableStyleSpecs
15 | ```
16 |
17 | ## Remarks
18 |
19 | Custom attributes will be shallow-merged.
20 |
21 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltable.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTable](./table-plugin.htmltable.md)
4 |
5 | ## HTMLTable variable
6 |
7 | A component capable of rendering a html string which root tag is a table tag. This component should not be used directly, except with custom renderers.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | HTMLTable: ({ WebView, tableStyleSpecs, cssRules, html, sourceBaseUrl, animationType, computeHeuristicContentHeight, computeContainerHeight, webViewProps: userWebViewProps, style, onLinkPress, animationDuration, htmlAttribs, maxScale, ...stats }: HTMLTableProps) => JSX.Element
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablebaseprops.html.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md) > [html](./table-plugin.htmltablebaseprops.html.md)
4 |
5 | ## HTMLTableBaseProps.html property
6 |
7 | The outerHtml of tag.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | html: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablebaseprops.htmlattribs.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md) > [htmlAttribs](./table-plugin.htmltablebaseprops.htmlattribs.md)
4 |
5 | ## HTMLTableBaseProps.htmlAttribs property
6 |
7 | Html attributes for this table node.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | htmlAttribs?: Record;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablebaseprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md)
4 |
5 | ## HTMLTableBaseProps interface
6 |
7 | Base props for HTMLTable original and custom components.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface HTMLTableBaseProps extends HTMLTableStats
13 | ```
14 | Extends: [HTMLTableStats](./table-plugin.htmltablestats.md)
15 |
16 | ## Properties
17 |
18 | | Property | Type | Description |
19 | | --- | --- | --- |
20 | | [html](./table-plugin.htmltablebaseprops.html.md) | string | The outerHtml of tag. |
21 | | [htmlAttribs?](./table-plugin.htmltablebaseprops.htmlattribs.md) | Record<string, string> | (Optional) Html attributes for this table node. |
22 | | [onLinkPress?](./table-plugin.htmltablebaseprops.onlinkpress.md) | RenderersProps\['a'\]\['onPress'\] | (Optional) Intercept links press. |
23 | | [sourceBaseUrl?](./table-plugin.htmltablebaseprops.sourcebaseurl.md) | string | (Optional) The base to resolve relative URLs. |
24 | | [WebView](./table-plugin.htmltablebaseprops.webview.md) | ComponentType<any> | The WebView
Component you wish to use. |
25 |
26 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablebaseprops.onlinkpress.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md) > [onLinkPress](./table-plugin.htmltablebaseprops.onlinkpress.md)
4 |
5 | ## HTMLTableBaseProps.onLinkPress property
6 |
7 | Intercept links press.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | onLinkPress?: RenderersProps['a']['onPress'];
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablebaseprops.sourcebaseurl.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md) > [sourceBaseUrl](./table-plugin.htmltablebaseprops.sourcebaseurl.md)
4 |
5 | ## HTMLTableBaseProps.sourceBaseUrl property
6 |
7 | The base to resolve relative URLs.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | sourceBaseUrl?: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablebaseprops.webview.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md) > [WebView](./table-plugin.htmltablebaseprops.webview.md)
4 |
5 | ## HTMLTableBaseProps.WebView property
6 |
7 | The `WebView` Component you wish to use.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | WebView: ComponentType;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltableprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableProps](./table-plugin.htmltableprops.md)
4 |
5 | ## HTMLTableProps interface
6 |
7 | Props for HTMLTable component.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface HTMLTableProps extends TableConfig, HTMLTableBaseProps
13 | ```
14 | Extends: [TableConfig](./table-plugin.tableconfig.md), [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md)
15 |
16 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablestats.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableStats](./table-plugin.htmltablestats.md)
4 |
5 | ## HTMLTableStats interface
6 |
7 | An object holding information on the table shape.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface HTMLTableStats
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [numOfChars](./table-plugin.htmltablestats.numofchars.md) | number | Number of text characters. |
20 | | [numOfColumns](./table-plugin.htmltablestats.numofcolumns.md) | number | Number of columns. |
21 | | [numOfRows](./table-plugin.htmltablestats.numofrows.md) | number | Number of rows, header included |
22 |
23 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablestats.numofchars.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableStats](./table-plugin.htmltablestats.md) > [numOfChars](./table-plugin.htmltablestats.numofchars.md)
4 |
5 | ## HTMLTableStats.numOfChars property
6 |
7 | Number of text characters.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | numOfChars: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablestats.numofcolumns.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableStats](./table-plugin.htmltablestats.md) > [numOfColumns](./table-plugin.htmltablestats.numofcolumns.md)
4 |
5 | ## HTMLTableStats.numOfColumns property
6 |
7 | Number of columns.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | numOfColumns: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.htmltablestats.numofrows.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [HTMLTableStats](./table-plugin.htmltablestats.md) > [numOfRows](./table-plugin.htmltablestats.numofrows.md)
4 |
5 | ## HTMLTableStats.numOfRows property
6 |
7 | Number of rows, header included
8 |
9 | Signature:
10 |
11 | ```typescript
12 | numOfRows: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md)
4 |
5 | ## table-plugin package
6 |
7 | ## Functions
8 |
9 | | Function | Description |
10 | | --- | --- |
11 | | [cssRulesFromSpecs(specs)](./table-plugin.cssrulesfromspecs.md) | Create css rules from a specification object. |
12 | | [useHtmlTableProps({ style, tnode }, tableConfig)](./table-plugin.usehtmltableprops.md) | Extract props for the HTMLTable component from renderer function arguments. This function is especially usefull for custom table renderers. |
13 |
14 | ## Interfaces
15 |
16 | | Interface | Description |
17 | | --- | --- |
18 | | [HTMLTableBaseProps](./table-plugin.htmltablebaseprops.md) | Base props for HTMLTable original and custom components. |
19 | | [HTMLTableProps](./table-plugin.htmltableprops.md) | Props for HTMLTable component. |
20 | | [HTMLTableStats](./table-plugin.htmltablestats.md) | An object holding information on the table shape. |
21 | | [TableAccurateContentHeightState](./table-plugin.tableaccuratecontentheightstate.md) | This content height state appears when the real table height is available, after the DOM has been mounted in the WebView
. |
22 | | [TableConfig](./table-plugin.tableconfig.md) | This object defines how the table component can be customized. |
23 | | [TableHeuristicContentHeightState](./table-plugin.tableheuristiccontentheightstate.md) | This content height state is available on mount, before the real height is known from the DOM. |
24 | | [TableStyleSpecs](./table-plugin.tablestylespecs.md) | An object describing how to generate styles. See [cssRulesFromSpecs()](./table-plugin.cssrulesfromspecs.md). |
25 |
26 | ## Variables
27 |
28 | | Variable | Description |
29 | | --- | --- |
30 | | [defaultTableStylesSpecs](./table-plugin.defaulttablestylesspecs.md) | Default styles attributes. |
31 | | [HTMLTable](./table-plugin.htmltable.md) | A component capable of rendering a html string which root tag is a table tag. This component should not be used directly, except with custom renderers. |
32 | | [tableModel](./table-plugin.tablemodel.md) | The model to attach to custom table renderers. |
33 | | [TableRenderer](./table-plugin.tablerenderer.md) | The renderer component for the table element. This renderer is fully scalable, and will adjust to contentWidth
and computeEmbeddedMaxWidth
. It also features onLinkPress
. |
34 |
35 | ## Type Aliases
36 |
37 | | Type Alias | Description |
38 | | --- | --- |
39 | | [TableContentHeightState](./table-plugin.tablecontentheightstate.md) | An object describing the present knowledge of content height. |
40 |
41 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableaccuratecontentheightstate.contentheight.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableAccurateContentHeightState](./table-plugin.tableaccuratecontentheightstate.md) > [contentHeight](./table-plugin.tableaccuratecontentheightstate.contentheight.md)
4 |
5 | ## TableAccurateContentHeightState.contentHeight property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | contentHeight: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableaccuratecontentheightstate.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableAccurateContentHeightState](./table-plugin.tableaccuratecontentheightstate.md)
4 |
5 | ## TableAccurateContentHeightState interface
6 |
7 | This content height state appears when the real table height is available, after the DOM has been mounted in the `WebView`.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface TableAccurateContentHeightState
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [contentHeight](./table-plugin.tableaccuratecontentheightstate.contentheight.md) | number | |
20 | | [type](./table-plugin.tableaccuratecontentheightstate.type.md) | 'accurate' | |
21 |
22 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableaccuratecontentheightstate.type.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableAccurateContentHeightState](./table-plugin.tableaccuratecontentheightstate.md) > [type](./table-plugin.tableaccuratecontentheightstate.type.md)
4 |
5 | ## TableAccurateContentHeightState.type property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | type: 'accurate';
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.animationduration.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [animationDuration](./table-plugin.tableconfig.animationduration.md)
4 |
5 | ## TableConfig.animationDuration property
6 |
7 | The animation duration in milliseconds when infered height value changes. See [TableConfig.computeContainerHeight](./table-plugin.tableconfig.computecontainerheight.md).
8 |
9 | Signature:
10 |
11 | ```typescript
12 | animationDuration?: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.animationtype.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [animationType](./table-plugin.tableconfig.animationtype.md)
4 |
5 | ## TableConfig.animationType property
6 |
7 | What kind of animation should be used when height is changed? layout : use native `LayoutAnimation`. This is the best option performance-wise, but requires some setup. See https://facebook.github.io/react-native/docs/layoutanimation. animated : use `Animated` module from react-native. none : no animations are performed.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | animationType?: 'none' | 'layout' | 'animated';
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.computecontainerheight.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [computeContainerHeight](./table-plugin.tableconfig.computecontainerheight.md)
4 |
5 | ## TableConfig.computeContainerHeight property
6 |
7 | A function which will compute container's height given the table content height.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | computeContainerHeight?: (state: TableContentHeightState) => number | null;
13 | ```
14 |
15 | ## Remarks
16 |
17 | For each instance, this function will be called twice. First time on container mount, and second time when the DOM has been mounted inside of `WebView`. At that moment, the state will hold the real content height. See [TableContentHeightState](./table-plugin.tablecontentheightstate.md).
18 |
19 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.computeheuristiccontentheight.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [computeHeuristicContentHeight](./table-plugin.tableconfig.computeheuristiccontentheight.md)
4 |
5 | ## TableConfig.computeHeuristicContentHeight property
6 |
7 | A function to compute approximate content height before the real content height has been fetched on DOM mount.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | computeHeuristicContentHeight?: (state: HTMLTableStats) => number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.cssrules.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [cssRules](./table-plugin.tableconfig.cssrules.md)
4 |
5 | ## TableConfig.cssRules property
6 |
7 | Override default CSS rules with this prop.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | cssRules?: string;
13 | ```
14 |
15 | ## Remarks
16 |
17 | You should at least set a rule which adds a 0-margin to `body` and `html`, otherwise the table will look truncated. When set, `tableStyleSpecs` is ignored. If you want to extend default instead of override CSS styles, look at example bellow.
18 |
19 | ## Example
20 |
21 |
22 | ```
23 | const cssRules = cssRulesFromSpecs(defaultTableStylesSpecs) + `
24 | a {
25 | text-transform: uppercase;
26 | }
27 | `;
28 |
29 | const config = {
30 | cssRules,
31 | // Other config options
32 | };
33 |
34 | ```
35 |
36 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.displaymode.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [displayMode](./table-plugin.tableconfig.displaymode.md)
4 |
5 | ## TableConfig.displayMode property
6 |
7 | Determine how the width of the table is constrained (or not).
8 |
9 | normal : the table will have no peculiar constrain on width
or maxWidth
. embedded : the table acts like a width-constrained embedded (React Native Render HTML RFC001), with maxWidth
determined by contentWidth
and computeEmbeddedMaxWidth
. expand : like embedded , but with width
set to maxWidth
. This can be useful to have a center-aligned table on wide screens.
10 |
11 | Signature:
12 |
13 | ```typescript
14 | displayMode?: 'normal' | 'embedded' | 'expand';
15 | ```
16 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.maxscale.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [maxScale](./table-plugin.tableconfig.maxscale.md)
4 |
5 | ## TableConfig.maxScale property
6 |
7 | Max zoom scale (must be greater than 1).
8 |
9 | Signature:
10 |
11 | ```typescript
12 | maxScale?: boolean;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md)
4 |
5 | ## TableConfig interface
6 |
7 | This object defines how the table component can be customized.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface TableConfig
13 | ```
14 |
15 | ## Properties
16 |
17 | | Property | Type | Description |
18 | | --- | --- | --- |
19 | | [animationDuration?](./table-plugin.tableconfig.animationduration.md) | number | (Optional) The animation duration in milliseconds when infered height value changes. See [TableConfig.computeContainerHeight](./table-plugin.tableconfig.computecontainerheight.md). |
20 | | [animationType?](./table-plugin.tableconfig.animationtype.md) | 'none' \| 'layout' \| 'animated' | (Optional) What kind of animation should be used when height is changed? layout : use native LayoutAnimation
. This is the best option performance-wise, but requires some setup. See https://facebook.github.io/react-native/docs/layoutanimation. animated : use Animated
module from react-native. none : no animations are performed. |
21 | | [computeContainerHeight?](./table-plugin.tableconfig.computecontainerheight.md) | (state: [TableContentHeightState](./table-plugin.tablecontentheightstate.md)) => number \| null | (Optional) A function which will compute container's height given the table content height. |
22 | | [computeHeuristicContentHeight?](./table-plugin.tableconfig.computeheuristiccontentheight.md) | (state: [HTMLTableStats](./table-plugin.htmltablestats.md)) => number | (Optional) A function to compute approximate content height before the real content height has been fetched on DOM mount. |
23 | | [cssRules?](./table-plugin.tableconfig.cssrules.md) | string | (Optional) Override default CSS rules with this prop. |
24 | | [displayMode?](./table-plugin.tableconfig.displaymode.md) | 'normal' \| 'embedded' \| 'expand' | (Optional) Determine how the width of the table is constrained (or not). normal : the table will have no peculiar constrain on width
or maxWidth
. embedded : the table acts like a width-constrained embedded (React Native Render HTML RFC001), with maxWidth
determined by contentWidth
and computeEmbeddedMaxWidth
. expand : like embedded , but with width
set to maxWidth
. This can be useful to have a center-aligned table on wide screens. |
25 | | [maxScale?](./table-plugin.tableconfig.maxscale.md) | boolean | (Optional) Max zoom scale (must be greater than 1). |
26 | | [style?](./table-plugin.tableconfig.style.md) | StyleProp<ViewStyle> | (Optional) Container style. |
27 | | [tableStyleSpecs?](./table-plugin.tableconfig.tablestylespecs.md) | [TableStyleSpecs](./table-plugin.tablestylespecs.md) | (Optional) Specs to generate css rules. |
28 | | [webViewProps?](./table-plugin.tableconfig.webviewprops.md) | any | (Optional) Any props you'd like to pass to the WebView
component. |
29 |
30 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.style.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [style](./table-plugin.tableconfig.style.md)
4 |
5 | ## TableConfig.style property
6 |
7 | Container style.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | style?: StyleProp;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.tablestylespecs.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [tableStyleSpecs](./table-plugin.tableconfig.tablestylespecs.md)
4 |
5 | ## TableConfig.tableStyleSpecs property
6 |
7 | Specs to generate css rules.
8 |
9 |
10 |
11 | Signature:
12 |
13 | ```typescript
14 | tableStyleSpecs?: TableStyleSpecs;
15 | ```
16 |
17 | ## Remarks
18 |
19 | This prop will be ignored when `cssRules` are provided.
20 |
21 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableconfig.webviewprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableConfig](./table-plugin.tableconfig.md) > [webViewProps](./table-plugin.tableconfig.webviewprops.md)
4 |
5 | ## TableConfig.webViewProps property
6 |
7 | Any props you'd like to pass to the `WebView` component.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | webViewProps?: any;
13 | ```
14 |
15 | ## Remarks
16 |
17 | `source` and `javascriptEnabled` will be ignored and overriden.
18 |
19 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablecontentheightstate.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableContentHeightState](./table-plugin.tablecontentheightstate.md)
4 |
5 | ## TableContentHeightState type
6 |
7 | An object describing the present knowledge of content height.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export declare type TableContentHeightState = TableHeuristicContentHeightState | TableAccurateContentHeightState;
13 | ```
14 | References: [TableHeuristicContentHeightState](./table-plugin.tableheuristiccontentheightstate.md), [TableAccurateContentHeightState](./table-plugin.tableaccuratecontentheightstate.md)
15 |
16 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableheuristiccontentheightstate.contentheight.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableHeuristicContentHeightState](./table-plugin.tableheuristiccontentheightstate.md) > [contentHeight](./table-plugin.tableheuristiccontentheightstate.contentheight.md)
4 |
5 | ## TableHeuristicContentHeightState.contentHeight property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | contentHeight: number;
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableheuristiccontentheightstate.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableHeuristicContentHeightState](./table-plugin.tableheuristiccontentheightstate.md)
4 |
5 | ## TableHeuristicContentHeightState interface
6 |
7 | This content height state is available on mount, before the real height is known from the DOM.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export interface TableHeuristicContentHeightState
13 | ```
14 |
15 | ## Remarks
16 |
17 | `heuristicHeight` is an approximated height used to minimize the “flash” effect of height transitions, see [TableConfig.computeHeuristicContentHeight](./table-plugin.tableconfig.computeheuristiccontentheight.md).
18 |
19 | ## Properties
20 |
21 | | Property | Type | Description |
22 | | --- | --- | --- |
23 | | [contentHeight](./table-plugin.tableheuristiccontentheightstate.contentheight.md) | number | |
24 | | [type](./table-plugin.tableheuristiccontentheightstate.type.md) | 'heuristic' | |
25 |
26 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tableheuristiccontentheightstate.type.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableHeuristicContentHeightState](./table-plugin.tableheuristiccontentheightstate.md) > [type](./table-plugin.tableheuristiccontentheightstate.type.md)
4 |
5 | ## TableHeuristicContentHeightState.type property
6 |
7 | Signature:
8 |
9 | ```typescript
10 | type: 'heuristic';
11 | ```
12 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablemodel.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [tableModel](./table-plugin.tablemodel.md)
4 |
5 | ## tableModel variable
6 |
7 | The model to attach to custom table renderers.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | tableModel: HTMLElementModel<'table', HTMLContentModel.block>
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablerenderer.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableRenderer](./table-plugin.tablerenderer.md)
4 |
5 | ## TableRenderer variable
6 |
7 | The renderer component for the table element. This renderer is fully scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`. It also features `onLinkPress`.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | TableRenderer: CustomBlockRenderer
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.cellpaddingem.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [cellPaddingEm](./table-plugin.tablestylespecs.cellpaddingem.md)
4 |
5 | ## TableStyleSpecs.cellPaddingEm property
6 |
7 | Spacing between cells, in em.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | cellPaddingEm: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.columnsborderwidthpx.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [columnsBorderWidthPx](./table-plugin.tablestylespecs.columnsborderwidthpx.md)
4 |
5 | ## TableStyleSpecs.columnsBorderWidthPx property
6 |
7 | The width of the border between columns.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | columnsBorderWidthPx: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.fitcontainerheight.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [fitContainerHeight](./table-plugin.tablestylespecs.fitcontainerheight.md)
4 |
5 | ## TableStyleSpecs.fitContainerHeight property
6 |
7 | Expand table to HTML height. \*\*You must une unconstrained height for this to work!\*\* See [TableConfig.computeContainerHeight](./table-plugin.tableconfig.computecontainerheight.md).
8 |
9 | Signature:
10 |
11 | ```typescript
12 | fitContainerHeight: boolean;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.fitcontainerwidth.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [fitContainerWidth](./table-plugin.tablestylespecs.fitcontainerwidth.md)
4 |
5 | ## TableStyleSpecs.fitContainerWidth property
6 |
7 | Expand table to HTML width.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | fitContainerWidth: boolean;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.fontfamily.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [fontFamily](./table-plugin.tablestylespecs.fontfamily.md)
4 |
5 | ## TableStyleSpecs.fontFamily property
6 |
7 | Font family.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | fontFamily: string;
13 | ```
14 |
15 | ## Remarks
16 |
17 | You will need to do additional work to support non-native fonts.
18 |
19 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.fontsizepx.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [fontSizePx](./table-plugin.tablestylespecs.fontsizepx.md)
4 |
5 | ## TableStyleSpecs.fontSizePx property
6 |
7 | Font size, in pixels.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | fontSizePx: number | null;
13 | ```
14 |
15 | ## Remarks
16 |
17 | This value being applied to root, it will affect rem and em.
18 |
19 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.linkcolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [linkColor](./table-plugin.tablestylespecs.linkcolor.md)
4 |
5 | ## TableStyleSpecs.linkColor property
6 |
7 | Link of anchors.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | linkColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md)
4 |
5 | ## TableStyleSpecs interface
6 |
7 | An object describing how to generate styles. See [cssRulesFromSpecs()](./table-plugin.cssrulesfromspecs.md).
8 |
9 |
10 |
11 | Signature:
12 |
13 | ```typescript
14 | export interface TableStyleSpecs
15 | ```
16 |
17 | ## Properties
18 |
19 | | Property | Type | Description |
20 | | --- | --- | --- |
21 | | [cellPaddingEm](./table-plugin.tablestylespecs.cellpaddingem.md) | number | Spacing between cells, in em. |
22 | | [columnsBorderWidthPx](./table-plugin.tablestylespecs.columnsborderwidthpx.md) | number | The width of the border between columns. |
23 | | [fitContainerHeight](./table-plugin.tablestylespecs.fitcontainerheight.md) | boolean | Expand table to HTML height. \*\*You must une unconstrained height for this to work!\*\* See [TableConfig.computeContainerHeight](./table-plugin.tableconfig.computecontainerheight.md). |
24 | | [fitContainerWidth](./table-plugin.tablestylespecs.fitcontainerwidth.md) | boolean | Expand table to HTML width. |
25 | | [fontFamily](./table-plugin.tablestylespecs.fontfamily.md) | string | Font family. |
26 | | [fontSizePx](./table-plugin.tablestylespecs.fontsizepx.md) | number \| null | Font size, in pixels. |
27 | | [linkColor](./table-plugin.tablestylespecs.linkcolor.md) | string | Link of anchors. |
28 | | [outerBorderColor](./table-plugin.tablestylespecs.outerbordercolor.md) | string | The border color of the table frame. |
29 | | [outerBorderWidthPx](./table-plugin.tablestylespecs.outerborderwidthpx.md) | number | The border width for the table frame. |
30 | | [rowsBorderWidthPx](./table-plugin.tablestylespecs.rowsborderwidthpx.md) | number | The width of the border between rows. |
31 | | [selectableText](./table-plugin.tablestylespecs.selectabletext.md) | boolean | Will text be selectable. |
32 | | [tdBorderColor](./table-plugin.tablestylespecs.tdbordercolor.md) | string | Table cell border color. |
33 | | [thBorderColor](./table-plugin.tablestylespecs.thbordercolor.md) | string | Table header cell border color. |
34 | | [thEvenBackground](./table-plugin.tablestylespecs.thevenbackground.md) | string | Table even header cell background color. |
35 | | [thEvenColor](./table-plugin.tablestylespecs.thevencolor.md) | string | Table even header cell text color. |
36 | | [thOddBackground](./table-plugin.tablestylespecs.thoddbackground.md) | string | Table even header cell background color. |
37 | | [thOddColor](./table-plugin.tablestylespecs.thoddcolor.md) | string | Table odd header cell text color. |
38 | | [trEvenBackground](./table-plugin.tablestylespecs.trevenbackground.md) | string | Table even row background color. |
39 | | [trEvenColor](./table-plugin.tablestylespecs.trevencolor.md) | string | Table even row text color. |
40 | | [trOddBackground](./table-plugin.tablestylespecs.troddbackground.md) | string | Table odd row background color. |
41 | | [trOddColor](./table-plugin.tablestylespecs.troddcolor.md) | string | Table odd row text color. |
42 |
43 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.outerbordercolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [outerBorderColor](./table-plugin.tablestylespecs.outerbordercolor.md)
4 |
5 | ## TableStyleSpecs.outerBorderColor property
6 |
7 | The border color of the table frame.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | outerBorderColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.outerborderwidthpx.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [outerBorderWidthPx](./table-plugin.tablestylespecs.outerborderwidthpx.md)
4 |
5 | ## TableStyleSpecs.outerBorderWidthPx property
6 |
7 | The border width for the table frame.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | outerBorderWidthPx: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.rowsborderwidthpx.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [rowsBorderWidthPx](./table-plugin.tablestylespecs.rowsborderwidthpx.md)
4 |
5 | ## TableStyleSpecs.rowsBorderWidthPx property
6 |
7 | The width of the border between rows.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | rowsBorderWidthPx: number;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.selectabletext.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [selectableText](./table-plugin.tablestylespecs.selectabletext.md)
4 |
5 | ## TableStyleSpecs.selectableText property
6 |
7 | Will text be selectable.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | selectableText: boolean;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.tdbordercolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [tdBorderColor](./table-plugin.tablestylespecs.tdbordercolor.md)
4 |
5 | ## TableStyleSpecs.tdBorderColor property
6 |
7 | Table cell border color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | tdBorderColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.thbordercolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [thBorderColor](./table-plugin.tablestylespecs.thbordercolor.md)
4 |
5 | ## TableStyleSpecs.thBorderColor property
6 |
7 | Table header cell border color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | thBorderColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.thevenbackground.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [thEvenBackground](./table-plugin.tablestylespecs.thevenbackground.md)
4 |
5 | ## TableStyleSpecs.thEvenBackground property
6 |
7 | Table even header cell background color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | thEvenBackground: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.thevencolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [thEvenColor](./table-plugin.tablestylespecs.thevencolor.md)
4 |
5 | ## TableStyleSpecs.thEvenColor property
6 |
7 | Table even header cell text color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | thEvenColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.thoddbackground.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [thOddBackground](./table-plugin.tablestylespecs.thoddbackground.md)
4 |
5 | ## TableStyleSpecs.thOddBackground property
6 |
7 | Table even header cell background color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | thOddBackground: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.thoddcolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [thOddColor](./table-plugin.tablestylespecs.thoddcolor.md)
4 |
5 | ## TableStyleSpecs.thOddColor property
6 |
7 | Table odd header cell text color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | thOddColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.trevenbackground.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [trEvenBackground](./table-plugin.tablestylespecs.trevenbackground.md)
4 |
5 | ## TableStyleSpecs.trEvenBackground property
6 |
7 | Table even row background color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | trEvenBackground: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.trevencolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [trEvenColor](./table-plugin.tablestylespecs.trevencolor.md)
4 |
5 | ## TableStyleSpecs.trEvenColor property
6 |
7 | Table even row text color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | trEvenColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.troddbackground.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [trOddBackground](./table-plugin.tablestylespecs.troddbackground.md)
4 |
5 | ## TableStyleSpecs.trOddBackground property
6 |
7 | Table odd row background color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | trOddBackground: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.tablestylespecs.troddcolor.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [TableStyleSpecs](./table-plugin.tablestylespecs.md) > [trOddColor](./table-plugin.tablestylespecs.troddcolor.md)
4 |
5 | ## TableStyleSpecs.trOddColor property
6 |
7 | Table odd row text color.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | trOddColor: string;
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/table-plugin/docs/table-plugin.usehtmltableprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@native-html/table-plugin](./table-plugin.md) > [useHtmlTableProps](./table-plugin.usehtmltableprops.md)
4 |
5 | ## useHtmlTableProps() function
6 |
7 | Extract props for the HTMLTable component from renderer function arguments. This function is especially usefull for custom table renderers.
8 |
9 | Signature:
10 |
11 | ```typescript
12 | export default function useHtmlTableProps({ style, tnode }: CustomRendererProps, tableConfig?: TableConfig): HTMLTableProps;
13 | ```
14 |
15 | ## Parameters
16 |
17 | | Parameter | Type | Description |
18 | | --- | --- | --- |
19 | | { style, tnode } | CustomRendererProps<TBlock> | |
20 | | tableConfig | [TableConfig](./table-plugin.tableconfig.md) | Override config options. |
21 |
22 | Returns:
23 |
24 | [HTMLTableProps](./table-plugin.htmltableprops.md)
25 |
26 |
--------------------------------------------------------------------------------
/packages/table-plugin/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'react-native',
3 | moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
4 | testRegex: 'src/.*\\.test\\.tsx?$',
5 | coveragePathIgnorePatterns: ['/node_modules/', '__tests__'],
6 | transformIgnorePatterns: [
7 | 'node_modules/(?!(@react-native|react-native|react-native-webview|ramda|react-native-render-html)/)'
8 | ],
9 | setupFilesAfterEnv: ['./jest/setupJest.js']
10 | };
11 |
--------------------------------------------------------------------------------
/packages/table-plugin/jest/setupJest.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-undef
2 | expect.extend({
3 | toBeValidHTML(validation, strict) {
4 | if (!Array.isArray(validation.messages)) {
5 | throw new Error(
6 | 'You must provide the object returned by validate-html exported function'
7 | );
8 | }
9 | const errors = validation.messages.filter(
10 | (m) => m.type === 'error' || (strict && m.subType === 'warning')
11 | );
12 | const pass = errors.length === 0;
13 | const feedbacks = errors.reduce(
14 | (prev, message) => `${prev}\nL${message.lastLine}: ${message.message}`,
15 | ''
16 | );
17 | return {
18 | pass,
19 | message: () =>
20 | pass
21 | ? 'HTML should not be W3C compliant'
22 | : 'HTML should be W3C compliant' + feedbacks
23 | };
24 | }
25 | });
26 |
--------------------------------------------------------------------------------
/packages/table-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@native-html/table-plugin",
3 | "version": "5.3.1",
4 | "description": "🔠 A WebView-based plugin to render tables in react-native-render-html",
5 | "main": "lib/commonjs/index.js",
6 | "module": "lib/module/index.js",
7 | "react-native": "src/",
8 | "types": "types/@native-html/table-plugin/index.d.ts",
9 | "files": [
10 | "lib",
11 | "src",
12 | "types",
13 | "docs"
14 | ],
15 | "scripts": {
16 | "test": "yarn test:ts && yarn test:lint && yarn test:jest",
17 | "test:jest": "jest src/",
18 | "test:ts": "tsc --noEmit",
19 | "test:lint": "eslint --ext ts,tsx src/",
20 | "build": "yarn build:source && yarn build:defs && yarn build:doc",
21 | "build:source": "bob build",
22 | "build:defs": "api-extractor run --local --verbose",
23 | "build:doc": "api-documenter markdown --input-folder temp --output-folder ./docs",
24 | "prepack": "yarn run build"
25 | },
26 | "keywords": [
27 | "react-native",
28 | "react-native-render-html",
29 | "html",
30 | "table",
31 | "plugins"
32 | ],
33 | "devDependencies": {
34 | "@babel/cli": "^7.15.4",
35 | "@babel/core": "^7.15.5",
36 | "@babel/plugin-transform-react-jsx": "^7.14.9",
37 | "@babel/preset-typescript": "^7.15.0",
38 | "@babel/runtime": "^7.15.4",
39 | "@formidable-webview/ersatz": "^2.1.2",
40 | "@formidable-webview/ersatz-testing": "^2.0.5",
41 | "@microsoft/api-documenter": "^7.12.7",
42 | "@microsoft/api-extractor": "7.13.1",
43 | "@release-it/conventional-changelog": "^2.0.1",
44 | "@testing-library/react-native": "^7.2.0",
45 | "@tsconfig/react-native": "^1.0.3",
46 | "@types/html-validator": "^5.0.1",
47 | "@types/jest": "^26.0.24",
48 | "@types/react": "^16.14.14",
49 | "@types/react-native": "^0.63.53",
50 | "@types/react-test-renderer": "^16.9.5",
51 | "babel-jest": "^26.6.3",
52 | "babel-plugin-inline-import": "^3.0.0",
53 | "eslint": "^7.32.0",
54 | "html-validator": "^5.1.17",
55 | "jest": "^26.6.3",
56 | "metro-react-native-babel-preset": "^0.64.0",
57 | "metro-react-native-babel-transformer": "^0.64.0",
58 | "react": "17.0.1",
59 | "react-native": "0.64.2",
60 | "react-native-builder-bob": "^0.17.1",
61 | "react-native-render-html": "6.1.0",
62 | "react-native-webview": "11.0.0",
63 | "react-test-renderer": "17.0.2",
64 | "release-it": "^14.3.0",
65 | "typescript": "~4.4.2"
66 | },
67 | "dependencies": {
68 | "@formidable-webview/webshell": "2.6.0",
69 | "@native-html/plugins-core": "workspace:*",
70 | "@types/prop-types": "^15.7.4",
71 | "prop-types": "^15.7.2"
72 | },
73 | "peerDependencies": {
74 | "react": ">= 16.8.0",
75 | "react-native": ">= 0.63.0",
76 | "react-native-render-html": ">= 6.0.0-beta.0 || 6.x"
77 | },
78 | "author": "Jules Sam. Randolph (https://github.com/jsamr)",
79 | "homepage": "https://github.com/native-html/plugins/tree/master/packages/table-plugin#readme",
80 | "license": "MIT",
81 | "repository": {
82 | "type": "git",
83 | "directory": "packages/table-plugin",
84 | "url": "git+ssh://git@github.com/native-html/plugins.git"
85 | },
86 | "publishConfig": {
87 | "access": "public"
88 | },
89 | "react-native-builder-bob": {
90 | "source": "src",
91 | "output": "lib",
92 | "targets": [
93 | [
94 | "module",
95 | {
96 | "babelrc": false
97 | }
98 | ],
99 | [
100 | "commonjs",
101 | {
102 | "babelrc": false
103 | }
104 | ],
105 | [
106 | "typescript",
107 | {
108 | "project": "tsconfig.build.json"
109 | }
110 | ]
111 | ]
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/packages/table-plugin/src/TableRenderer.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | CustomBlockRenderer,
4 | defaultHTMLElementModels,
5 | HTMLContentModel
6 | } from 'react-native-render-html';
7 | import { HTMLElementModel } from '@native-html/transient-render-engine';
8 | import useHtmlTableProps from './useHtmlTableProps';
9 | import { HTMLTable } from './HTMLTable';
10 |
11 | /**
12 | * The renderer component for the table element. This renderer is fully
13 | * scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`.
14 | * It also features `onLinkPress`.
15 | *
16 | * @public
17 | */
18 | const TableRenderer: CustomBlockRenderer = function TableRenderer(props) {
19 | const tableProps = useHtmlTableProps(props);
20 | return React.createElement(HTMLTable, tableProps);
21 | };
22 |
23 | /**
24 | * The model to attach to custom table renderers.
25 | *
26 | * @public
27 | */
28 | export const tableModel: HTMLElementModel<'table', HTMLContentModel.block> =
29 | defaultHTMLElementModels.table.extend({
30 | contentModel: HTMLContentModel.block,
31 | isOpaque: true
32 | });
33 |
34 | export default TableRenderer;
35 |
--------------------------------------------------------------------------------
/packages/table-plugin/src/__tests__/extractHtmlAndStatsFromTableDomNode.test.ts:
--------------------------------------------------------------------------------
1 | import { parseDOM } from 'htmlparser2';
2 | import extractHtmlAndStatsFromTableDomNode from '../extractHtmlAndStatsFromTableDomNode';
3 |
4 | const simpleHTML =
5 | 'Entry Header 1 Entry Header 2 Entry Header 3
';
6 |
7 | describe('extractHtmlAndStatsFromTableDomNode', () => {
8 | it('should preserve HTML', () => {
9 | const domRoot = parseDOM(simpleHTML)[0];
10 | expect(domRoot).toMatchObject({
11 | type: 'tag',
12 | tagName: 'table'
13 | });
14 | expect(extractHtmlAndStatsFromTableDomNode(domRoot as any)).toMatchObject({
15 | html: simpleHTML,
16 | stats: {
17 | numOfRows: 1,
18 | numOfColumns: 3,
19 | numOfChars: expect.any(Number)
20 | }
21 | });
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/packages/table-plugin/src/__tests__/setup.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | namespace jest {
3 | interface Matchers {
4 | toBeValidHTML(strict?: boolean): R;
5 | }
6 | }
7 | }
8 |
9 | export {};
10 |
--------------------------------------------------------------------------------
/packages/table-plugin/src/extractHtmlAndStatsFromTableDomNode.ts:
--------------------------------------------------------------------------------
1 | import { domNodeToHTMLString } from 'react-native-render-html';
2 | import { isDomElement, isDomText } from '@native-html/transient-render-engine';
3 | import { HTMLTableStats } from './types';
4 | import type { Node } from 'domhandler';
5 |
6 | export default function extractHtmlAndStatsFromTableDomNode(
7 | domNode: Node | null
8 | ) {
9 | let stats: HTMLTableStats = {
10 | numOfChars: 0,
11 | numOfColumns: 0,
12 | numOfRows: 0
13 | };
14 | const innerHTML = domNodeToHTMLString(domNode, (node, _depth, html) => {
15 | if (isDomElement(node)) {
16 | if (node.tagName === 'tr') {
17 | stats.numOfRows += 1;
18 | } else if (
19 | (node.tagName === 'td' || node.tagName === 'th') &&
20 | stats.numOfRows === 0
21 | ) {
22 | stats.numOfColumns += 1;
23 | }
24 | } else if (isDomText(node)) {
25 | stats.numOfChars += html.length;
26 | }
27 | });
28 | return {
29 | html: innerHTML,
30 | stats
31 | };
32 | }
33 |
--------------------------------------------------------------------------------
/packages/table-plugin/src/index.ts:
--------------------------------------------------------------------------------
1 | import type { TableConfig } from './types';
2 | export type {
3 | HTMLTableBaseProps,
4 | HTMLTableProps,
5 | HTMLTableStats,
6 | TableStyleSpecs,
7 | TableConfig,
8 | TableContentHeightState,
9 | TableAccurateContentHeightState,
10 | TableHeuristicContentHeightState
11 | } from './types';
12 | export { defaultTableStylesSpecs, cssRulesFromSpecs } from './css-rules';
13 | export { HTMLTable } from './HTMLTable';
14 | export { default as useHtmlTableProps } from './useHtmlTableProps';
15 | export { default, tableModel } from './TableRenderer';
16 |
17 | declare module 'react-native-render-html' {
18 | interface RenderersProps {
19 | /**
20 | * Configuration for `@native-html/table-plugin` table renderer.
21 | */
22 | table?: TableConfig;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/table-plugin/src/useHtmlTableProps.ts:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 | import {
3 | CustomRendererProps,
4 | useSharedProps,
5 | useDocumentMetadata,
6 | useRendererProps,
7 | useContentWidth
8 | } from 'react-native-render-html';
9 | import extractHtmlAndStatsFromTableDomNode from './extractHtmlAndStatsFromTableDomNode';
10 | import { HTMLTableProps, TableConfig } from './types';
11 | import type { TBlock } from '@native-html/transient-render-engine';
12 |
13 | /**
14 | * Extract props for the HTMLTable component from renderer function arguments.
15 | * This function is especially usefull for custom table renderers.
16 | *
17 | * @param props - The props of a custom block renderer.
18 | * @param tableConfig - Override config options.
19 | *
20 | * @public
21 | */
22 | export default function useHtmlTableProps(
23 | { style, tnode }: CustomRendererProps,
24 | tableConfig?: TableConfig
25 | ): HTMLTableProps {
26 | const { WebView, defaultWebViewProps, computeEmbeddedMaxWidth } =
27 | useSharedProps();
28 | const contentWidth = useContentWidth();
29 | const globalTableConfig = useRendererProps('table');
30 | const { onPress: onLinkPress } = useRendererProps('a');
31 | const resolvedConfig: TableConfig = {
32 | ...globalTableConfig,
33 | ...tableConfig,
34 | webViewProps: {
35 | ...defaultWebViewProps,
36 | ...globalTableConfig?.webViewProps,
37 | ...tableConfig?.webViewProps
38 | }
39 | };
40 | const resolvedContentWidth =
41 | typeof contentWidth === 'number'
42 | ? contentWidth
43 | : Dimensions.get('window').width;
44 | const documentBaseUrl = useDocumentMetadata().baseUrl;
45 | const availableWidth =
46 | computeEmbeddedMaxWidth?.call(null, resolvedContentWidth, 'table') ||
47 | resolvedContentWidth;
48 | const { html, stats } = extractHtmlAndStatsFromTableDomNode(tnode.domNode);
49 | const displayMode = resolvedConfig.displayMode || 'normal';
50 | const composedStyles = [
51 | style,
52 | displayMode === 'expand'
53 | ? { width: availableWidth }
54 | : displayMode === 'embedded'
55 | ? { maxWidth: availableWidth }
56 | : null
57 | ];
58 |
59 | return {
60 | ...resolvedConfig,
61 | ...stats,
62 | html,
63 | sourceBaseUrl: documentBaseUrl,
64 | style: composedStyles,
65 | onLinkPress,
66 | WebView
67 | };
68 | }
69 |
--------------------------------------------------------------------------------
/packages/table-plugin/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["src/"],
4 | "exclude": ["**/__tests__"]
5 | }
6 |
--------------------------------------------------------------------------------
/packages/table-plugin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig-base.json",
3 | "compilerOptions": {
4 | "outDir": "./lib"
5 | },
6 | "exclude": ["node_modules", "integration", "**/__tests__", "lib", "types"]
7 | }
8 |
--------------------------------------------------------------------------------
/patches/@release-it-conventional-changelog.patch:
--------------------------------------------------------------------------------
1 | diff --git a/index.js b/index.js
2 | index abbce1815895b044bac47588a327f1b049304b8d..e31f4ee93c6896fefb30552e8bf89f6c182610a4 100644
3 | --- a/index.js
4 | +++ b/index.js
5 | @@ -1,6 +1,7 @@
6 | const { EOL } = require('os');
7 | const fs = require('fs');
8 | const { Plugin } = require('release-it');
9 | +const { format } = require('release-it/lib/util');
10 | const conventionalRecommendedBump = require('conventional-recommended-bump');
11 | const conventionalChangelog = require('conventional-changelog');
12 | const semver = require('semver');
13 | @@ -14,7 +15,8 @@ class ConventionalChangelog extends Plugin {
14 |
15 | getInitialOptions(options, namespace) {
16 | options[namespace].tagName = options.git.tagName;
17 | - return options[namespace];
18 | + const tagPrefix = format(options.git.tagName || '${version}', { version: '' });
19 | + return {...options[namespace], path: './', tagPrefix};
20 | }
21 |
22 | async getChangelog(latestVersion) {
23 | @@ -68,7 +70,8 @@ class ConventionalChangelog extends Plugin {
24 | Object.assign(options, this.options),
25 | { version, previousTag, currentTag },
26 | {
27 | - debug: this.config.isDebug ? this.debug : null
28 | + debug: this.config.isDebug ? this.debug : null,
29 | + path: this.options.path
30 | }
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/patches/release-it.patch:
--------------------------------------------------------------------------------
1 | diff --git a/lib/plugin/npm/npm.js b/lib/plugin/npm/npm.js
2 | index 12a28d26db8d78fa7ce011d8d201668fb21b8f97..65be3f3bd7fb370cf95cee794c288ded15149558 100644
3 | --- a/lib/plugin/npm/npm.js
4 | +++ b/lib/plugin/npm/npm.js
5 | @@ -229,7 +229,7 @@ class npm extends Plugin {
6 | this.log.warn('Skip publish: package is private.');
7 | return false;
8 | }
9 | - return this.exec(`npm publish ${publishPath} --tag ${tag} ${otpArg} ${dryRunArg}`, { options })
10 | + return (this.config.isDryRun ? this.exec(`npm publish ${publishPath} --tag ${tag} ${otpArg} ${dryRunArg}`, { options }) : this.exec(`yarn npm publish --tag ${tag}`, { options }))
11 | .then(() => {
12 | this.setContext({ isReleased: true });
13 | })
14 |
--------------------------------------------------------------------------------
/tsconfig-base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/tsconfig",
3 | "extends": "@tsconfig/react-native/tsconfig.json",
4 | "compilerOptions": {
5 | "lib": ["ESNext"],
6 | "allowJs": false,
7 | "composite": false,
8 | "noEmit": false,
9 | "declaration": true,
10 | "noImplicitAny": false,
11 | "isolatedModules": false,
12 | "skipLibCheck": true
13 | }
14 | }
15 |
--------------------------------------------------------------------------------