Commit c92dc894 authored by Peter East's avatar Peter East

feat: use a ref and add PropTypes

parent 17702337
Pipeline #12685 failed with stages
in 8 minutes and 48 seconds
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { th, override, validationColor } from '@pubsweet/ui-toolkit'
const Root = styled.div`
......@@ -41,6 +42,7 @@ const TextArea = styled.textarea`
class ExpandingTextField extends React.Component {
constructor(props) {
super(props)
this.textAreaRef = React.createRef()
this.state = {}
}
......@@ -58,11 +60,9 @@ class ExpandingTextField extends React.Component {
// maxRows?: number;
// }
const { lineHeight } = window.getComputedStyle(
document.getElementById(this.inputId),
)
const { lineHeight } = window.getComputedStyle(this.textAreaRef.current)
const intLineHeight = parseInt(lineHeight, 10)
const { scrollHeight, value } = document.getElementById(this.inputId)
const { scrollHeight, value } = this.textAreaRef.current
const lines = Math.round(scrollHeight / intLineHeight - 1)
const constrainedLines = Math.min(lines, this.props.maxRows || lines)
......@@ -82,7 +82,6 @@ class ExpandingTextField extends React.Component {
render() {
const {
innerRefProp,
className,
label,
type = 'text',
......@@ -99,7 +98,7 @@ class ExpandingTextField extends React.Component {
<TextArea
id={this.inputId}
readOnly={readonly}
ref={innerRefProp}
ref={this.textAreaRef}
rows={this.state.lines || minRows}
type={type}
value={value}
......@@ -110,4 +109,12 @@ class ExpandingTextField extends React.Component {
}
}
ExpandingTextField.propTypes = {
label: PropTypes.string,
type: PropTypes.string,
value: PropTypes.string,
minRows: PropTypes.number,
maxRows: PropTypes.number,
}
export default ExpandingTextField
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment