20200606 2345

WIP Screenshot from 202006062345

In theory, this should be counting the number of lines in the <code> object. But I need to further research types of components because hooks seem to be the new thing and it's not clear if I should be using them over classes. This could be why it's not working 🤷🏻‍♂️ . I think this is a problem for tomorrow.

export class CodeBlock extends React.Component {
onLayout = e => {
const { height } = e.nativeEvent.layout;
this.count = Math.floor(height / styles.text.lineHeight)
console.log(this.count );
// for (var i = 1; i < lines; i++) {

// const lineNumber = document.createElement("p");
// lineNumber.classList.add("numbers");
// lineNumber.innerText = i + ".";

// const lineNumbersDiv = document.getElementById("linenumbers");
// lineNumbersDiv.insertAdjacentElement("beforeend", lineNumber);
// }
}
render() {
return (
<div css={STYLE_CODE_BLOCK}>
<pre css={STYLE_PRE}></pre>
{/* FIX:(Will) Need to pass Props back in here */}
<code onLayout={this.onLayout} css={STYLE_CODE_BLOCK} >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hoc enim constituto in philosophia constituta sunt omnia.
</code>
<button onClick={this.onLayout}>
test
</button>
{/* <div onPress={() => alert(`text lines count is ${this.count}`)}>
<p >touch me!</p>
</div> */
}
</div>
);
}
}```

Webmentions (WIP)

No mentions yet.

Get: daily updates on twitter, weekly updates over RSS and monthly newsletter.