added ... and ExpandingTextArea component
This commit is contained in:
parent
e482c5f2f8
commit
d5fdee1d3c
4 changed files with 48 additions and 13 deletions
|
@ -62,6 +62,7 @@
|
|||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"chai": "^4.1.2",
|
||||
"chai-http": "^3.0.0",
|
||||
"eslint": "3.19.0",
|
||||
|
|
41
react/components/ExpandingTextArea.jsx
Normal file
41
react/components/ExpandingTextArea.jsx
Normal file
|
@ -0,0 +1,41 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class ExpandingTextarea extends Component {
|
||||
componentDidMount () {
|
||||
this._adjustTextarea({});
|
||||
}
|
||||
|
||||
render () {
|
||||
const { onChange, maxHeight, ...rest } = this.props;
|
||||
return (
|
||||
<textarea
|
||||
{ ...rest }
|
||||
ref={x => this.el = x}
|
||||
onChange={ this._handleChange.bind(this) }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_handleChange (e) {
|
||||
const { onChange } = this.props;
|
||||
if (onChange) onChange(e);
|
||||
this._adjustTextarea(e);
|
||||
}
|
||||
|
||||
_adjustTextarea ({ target = this.el }) {
|
||||
target.style.height = 0;
|
||||
if (this.props.maxHeight) {
|
||||
target.style.height = `${Math.min(target.scrollHeight, this.props.maxHeight)}px`;
|
||||
} else {
|
||||
target.style.height = `${target.scrollHeight}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ExpandingTextarea.propTypes = {
|
||||
onChange : PropTypes.func,
|
||||
maxHeight: PropTypes.number,
|
||||
};
|
||||
|
||||
export default ExpandingTextarea;
|
|
@ -1,18 +1,16 @@
|
|||
import React from 'react';
|
||||
import ExpandingTextArea from 'components/ExpandingTextArea';
|
||||
|
||||
class PublishMetadataInputs extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showInputs : false,
|
||||
descriptionLimit : 100,
|
||||
descriptionHeight: '',
|
||||
};
|
||||
this.toggleShowInputs = this.toggleShowInputs.bind(this);
|
||||
this.handleDescriptionInput = this.handleDescriptionInput.bind(this);
|
||||
this.handleNsfwCheck = this.handleNsfwCheck.bind(this);
|
||||
this.handleLicenseSelection = this.handleLicenseSelection.bind(this);
|
||||
this.setDescriptionTextBoxHeight = this.setDescriptionTextBoxHeight.bind(this);
|
||||
}
|
||||
toggleShowInputs () {
|
||||
this.setState({'showInputs': !this.state.showInputs});
|
||||
|
@ -22,13 +20,6 @@ class PublishMetadataInputs extends React.Component {
|
|||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
this.props.onMetadataChange(name, value);
|
||||
this.setDescriptionTextBoxHeight(event);
|
||||
}
|
||||
setDescriptionTextBoxHeight (event) {
|
||||
const scrollHeight = event.target.scrollHeight;
|
||||
// console.log('scrollHeight:', scrollHeight);
|
||||
const height = Math.min(scrollHeight, this.state.descriptionLimit) + 'px';
|
||||
this.setState({descriptionHeight: height});
|
||||
}
|
||||
handleNsfwCheck (event) {
|
||||
console.log('handle input', event);
|
||||
|
@ -52,10 +43,12 @@ class PublishMetadataInputs extends React.Component {
|
|||
<div className="column column--3 column--med-10 align-content-top">
|
||||
<label htmlFor="publish-license" className="label">Description:</label>
|
||||
</div><div className="column column--7 column--sml-10">
|
||||
<textarea
|
||||
rows="1"
|
||||
<ExpandingTextArea
|
||||
id="publish-description"
|
||||
className="textarea textarea--primary textarea--full-width"
|
||||
rows={1}
|
||||
maxLength={2000}
|
||||
maxHeight={150}
|
||||
name="description"
|
||||
placeholder="Optional description"
|
||||
value={this.props.description}
|
||||
|
|
|
@ -16,7 +16,7 @@ module.exports = {
|
|||
loader : 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
query : {
|
||||
presets: ['es2015', 'react'],
|
||||
presets: ['es2015', 'react', 'stage-2'],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
Loading…
Reference in a new issue