Añadir plantilla

Base para front

1 files changed, 69 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Chat/MessageField.js b/front/odiparpack/app/components/Chat/MessageField.js
new file mode 100644
index 0000000..947bed4
--- /dev/null
+++ b/front/odiparpack/app/components/Chat/MessageField.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import 'ba-styles/vendors/emoji-picker-react/emoji-picker-react.css';
+
+class MessageField extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || '',
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(e) {
+    const { val } = this.state;
+    const { onChange } = this.props;
+    const value = e ? e.target.value : val;
+
+    this.setState({ value }, () => {
+      if (typeof onChange === 'function') {
+        onChange(e, value);
+      }
+    });
+  }
+
+  onPickerkeypress(e) {
+    if (e.keyCode === 27 || e.which === 27 || e.key === 'Escape' || e.code === 'Escape') {
+      this.closePicker();
+    }
+  }
+
+  render() {
+    const {
+      onChange,
+      fieldType,
+      ...rest
+    } = this.props;
+
+    const className = `emoji-text-field emoji-${fieldType}`;
+    const { value } = this.state;
+    const isInput = fieldType === 'input';
+    const ref = (_field) => {
+      this._field = _field;
+      return this._field;
+    };
+
+    return (
+      <div className={className}>
+        { (isInput) && (<input {...rest} onChange={this.onChange} type="text" ref={ref} value={value} />) }
+        { (!isInput) && (<textarea {...rest} onChange={this.onChange} ref={ref} value={value} />) }
+      </div>
+    );
+  }
+}
+
+MessageField.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  fieldType: PropTypes.string.isRequired
+};
+
+MessageField.defaultProps = {
+  value: '',
+  onChange: () => {},
+};
+
+export default MessageField;