Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Update to use getDerivedStateFromProps #29

Merged
merged 3 commits into from
Dec 10, 2019
Merged

Update to use getDerivedStateFromProps #29

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92862a7
getDerivedStateFromProps
Apr 26, 2018
4ecc446
Merge branch 'master' into master
chrismllr Nov 29, 2019
781f7cf
update babel and its plugins from v6 to v7 (#1)
ShotSkydiver Dec 5, 2019
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
31 changes: 19 additions & 12 deletions src/Hyperlink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,22 @@ const textPropTypes = Text.propTypes || {}
const { OS } = Platform

class Hyperlink extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.linkify !== prevState.linkifyIt) {
Copy link
Contributor Author

@chrismllr chrismllr Apr 26, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure if this will require using a lodash.isEqual, or something of the sort, but will help as right now every time the component receives props a new instance of linkifyIt is being created

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testing this locally now, it seems this change has a problem if you do not pass in the linkify prop from outside. That will trigger a getDerivedStateFromProps where nextProps.linkify is undefined, and prevState.linkifyIt is the default value from the constructor (require('linkify-it')()), and thereby unset the state variable.

return {
linkifyIt: nextProps.linkify
};
}

return null;
}

constructor(props){
super(props)
this.linkify = this.linkify.bind(this)
this.parse = this.parse.bind(this)
this.linkifyIt = props.linkify || require('linkify-it')()
}

componentWillReceiveProps ({ linkify = require('linkify-it')() } = {}) {
this.linkifyIt = linkify
this.state = {
linkifyIt: props.linkify || require('linkify-it')()
};
}

render() {
Expand Down Expand Up @@ -52,10 +59,10 @@ class Hyperlink extends Component {
return typeof component.props.children !== 'string'
}

linkify(component){
linkify = (component) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The babel build script failed due to this change; transforming this new class property syntax requires the babel plugin proposal-class-properties, which requires Babel 7

if (
!this.linkifyIt.pretest(component.props.children)
|| !this.linkifyIt.test(component.props.children)
!this.state.linkifyIt.pretest(component.props.children)
|| !this.state.linkifyIt.test(component.props.children)
)
return component

Expand All @@ -69,7 +76,7 @@ class Hyperlink extends Component {
}

try {
this.linkifyIt.match(component.props.children).forEach(({ index, lastIndex, text, url }) => {
this.state.linkifyIt.match(component.props.children).forEach(({ index, lastIndex, text, url }) => {
let nonLinkedText = component.props.children.substring(_lastIndex, index)
nonLinkedText && elements.push(nonLinkedText)
_lastIndex = lastIndex
Expand Down Expand Up @@ -106,7 +113,7 @@ class Hyperlink extends Component {
}
}

parse (component) {
parse = (component) => {
let { props: { children} = {}, type: { displayName } = {} } = component
if (!children)
return component
Expand All @@ -119,7 +126,7 @@ class Hyperlink extends Component {

return React.cloneElement(component, componentProps, React.Children.map(children, child => {
let { type : { displayName } = {} } = child
if (typeof child === 'string' && this.linkifyIt.pretest(child))
if (typeof child === 'string' && this.state.linkifyIt.pretest(child))
return this.linkify(<Text { ...componentProps } style={ component.props.style }>{ child }</Text>)
if (displayName === 'Text' && !this.isTextNested(child))
return this.linkify(child)
Expand Down