Created
March 8, 2019 15:01
-
-
Save jsamr/991cc4d6ae544af24da0ad0f01534ee3 to your computer and use it in GitHub Desktop.
React native table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { forEachObjIndexed } from 'ramda' | |
| import strigifyEntities from 'stringify-entities' | |
| function renderOpeningTag(tag: string, attributes: HtmlAttributesDictionary) { | |
| const strAttributes: string[] = [] | |
| forEachObjIndexed((attrVal: string, attrKey: string) => { | |
| strAttributes.push(`${attrKey}="${strigifyEntities(attrVal)}"`) | |
| })(attributes) | |
| return `<${tag}${strAttributes.length ? ' ' : ''}${strAttributes.join(' ')}>` | |
| } | |
| function domToHTML(root) { | |
| if (root.type === 'tag') { | |
| const strChildren = root.children.reduce((prev, curr) => `${prev}${domToHTML(curr)}`, '') | |
| return `${renderOpeningTag(root.name, root.attribs)}${strChildren}</${root.name}>` | |
| } | |
| if (root.type === 'text') { | |
| return strigifyEntities(root.data) | |
| } | |
| return '' | |
| } | |
| // Use this function in HTML props | |
| export function alterNode(node) { | |
| if (node.type === 'tag' && node.name === 'table') { | |
| node.attribs.rawHtml = domToHTML(node) | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import { Table } from './Table' | |
| // Use this object in HTML props | |
| export const renderers = { | |
| // Your renderers | |
| table: (attribs, children, css, { key }) => { | |
| return <Table key={key} rawHtml={attribs.rawHtml} /> | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { PureComponent } from 'react' | |
| import { WebView } from 'react-native-webview' | |
| const htmlStyle = ` | |
| :root { | |
| color: #333333; | |
| background-color: transparent; | |
| } | |
| body, html { | |
| margin: 0; | |
| background-color: 'black'; | |
| } | |
| table { | |
| min-height: 100vh; | |
| min-width: 100vw; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #FFFFFF; | |
| } | |
| th, td { | |
| padding: 0.25em; | |
| text-align: center; | |
| } | |
| table, th, td { | |
| margin: 0; | |
| }, | |
| table { | |
| margin: 'auto'; | |
| } | |
| th { | |
| border-bottom: 0.25px solid #2a3c4f; | |
| border-right: 0.25px solid #2a3c4f; | |
| } | |
| td { | |
| border-bottom: 0.25px solid #b5b5b5; | |
| border-right: 0.25px solid #b5b5b5; | |
| } | |
| thead { | |
| background-color: #253546; | |
| } | |
| th { | |
| background-color: #253546; | |
| color: #FFFFFF; | |
| } | |
| tr:nth-child(odd) { | |
| background-color: #e2e2e2; | |
| } | |
| tr:nth-child(even), tr:nth-child(1) { | |
| background-color: #FFFFFF; | |
| } | |
| ` | |
| export class Table extends PureComponent { | |
| render() { | |
| const html = ` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=false"> | |
| </head> | |
| <body> | |
| <style> | |
| ${htmlStyle} | |
| </style> | |
| ${this.props.rawHtml} | |
| </body> | |
| </html> | |
| ` | |
| return ( | |
| <WebView scalesPageToFit={false} | |
| automaticallyAdjustContentInsets={false} | |
| javaScriptEnabled={false} | |
| scrollEnabled={true} | |
| style={this.props.style} | |
| contentInset={{ top: 0, bottom: 0, left: 0, right: 0 }} | |
| source={{ html }} /> | |
| ) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment