Skip to content

Add ability to pass custom isTextOnly function #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ggustilo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add ability to pass custom isTextOnly function #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ render() {
| `renderBlockText` | Custom renderer for Block Text | function | none |
| `renderBlock` | Custom renderer for Block | function | none |
| `renderText` | Custom renderer for various types of text | function | none |
| `isTextOnly` | Utility function to determine if block contains only text (supports styled compenents) | function | none |

If you need more control over how some of the components are rendered, you may provide the custom renderers outlined above like so.

Expand Down Expand Up @@ -134,6 +135,9 @@ renderBlock(children, key)

// Responsible for any block that will only contain text elements below
renderBlockText(children, key)

// Responsible for determining if a block contains only text nodes
isTextOnly(children)
```

Notice the `children` parameter passed to `renderLink`, which contains whatever children would otherwise be rendered within the link. In the default implementation, those children will be rendered within a `<TouchableOpacity/>` but this gives you the possibility to provide your own touchable component.
Expand Down
27 changes: 22 additions & 5 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,16 +119,20 @@ class Markdown extends Component {
renderListItem(node, key, index, extras) {

const { styles } = this.state;

let SafeWrapper;
let children = this.renderNodes(node.props.children, key, extras);

if (this.props.renderListItem) {
const { ordered } = extras;
return this.props.renderListItem(index, ordered, children, key);
}

const SafeWrapper = Utils.isTextOnly(children) ? Text : View;

if (this.props.isTextOnly) {
SafeWrapper = this.props.isTextOnly(children) ? Text : View;
} else {
SafeWrapper = Utils.isTextOnly(children) ? Text : View;
}

return (
<View style={styles.listItem} key={'listItem_' + key}>
{this.props.renderListBullet ? this.props.renderListBullet(extras.ordered, index) : this.renderListBullet(extras.ordered, index)}
Expand Down Expand Up @@ -179,12 +183,17 @@ class Markdown extends Component {
const { styles } = this.state;
let extras = Utils.concatStyles(null, styles.link);
let children = this.renderNodes(node.props.children, key, extras);
let SafeWrapper;

if (this.props.renderLink) {
return this.props.renderLink(node.props.href, node.props.title, children, key);
}

const SafeWrapper = Utils.isTextOnly(children) ? Text : TouchableOpacity;
if (this.props.isTextOnly) {
SafeWrapper = this.props.isTextOnly(children) ? Text : TouchableOpacity;
} else {
SafeWrapper = Utils.isTextOnly(children) ? Text : TouchableOpacity;
}

return (
<SafeWrapper style={styles.linkWrapper} key={'linkWrapper_' + key} onPress={() => Linking.openURL(node.props.href).catch(() => { })}>
Expand All @@ -202,7 +211,15 @@ class Markdown extends Component {
const { styles } = this.state;

let style = [styles.block];
let isTextOnly;
let isBlockQuote;

if (this.props.isTextOnly) {
isTextOnly = this.props.isTextOnly(children);
} else {
isTextOnly = Utils.isTextOnly(children);
}

if (extras && extras.blockQuote) {
isBlockQuote = true;

Expand All @@ -223,7 +240,7 @@ class Markdown extends Component {
</View>
);
}
else if (Utils.isTextOnly(children)) {
else if (isTextOnly) {
if (this.props.renderBlockText) {
return this.props.renderBlockText(children, key)
}
Expand Down