From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../odiparpack/app/components/Chat/MessageField.js | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 front/odiparpack/app/components/Chat/MessageField.js

(limited to 'front/odiparpack/app/components/Chat/MessageField.js')

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;
-- 
cgit v1.2.3