From 5a18ff98508855149daabbb8eded5db36f641476 Mon Sep 17 00:00:00 2001
From: vimal1083 <vimal1083@gmail.com>
Date: Wed, 14 Oct 2020 17:31:46 +0530
Subject: [PATCH] add-page-down-widget
---
.../common/components/PageDownWidget/index.js | 41 +++++++++++++++++++
.../components/PageDownWidget/index.scss | 5 +++
.../src/common/components/TinyMCE/index.js | 2 +-
.../components/FormField/index.js | 13 ++++++
4 files changed, 60 insertions(+), 1 deletion(-)
create mode 100644 hypha/static_src/src/app/src/common/components/PageDownWidget/index.js
create mode 100644 hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss
diff --git a/hypha/static_src/src/app/src/common/components/PageDownWidget/index.js b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.js
new file mode 100644
index 000000000..915b56293
--- /dev/null
+++ b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.js
@@ -0,0 +1,41 @@
+import * as React from "react";
+import PropTypes from 'prop-types';
+import TinyMCE from '../TinyMCE';
+import "./index.scss";
+
+const PageDownWidget = props => {
+ let tmp = document.createElement("DIV");
+ tmp.innerHTML = props.value;
+ return <div >
+ <TinyMCE
+ label={props.label}
+ name={props.name}
+ onChange={props.onChange}
+ value={props.value}
+ id={props.id}
+ init={props.init}
+ required={props.required}
+ helperProps={props.helperProps}
+ />
+
+ { tmp.textContent.length !== 0 &&
+ <div className="preview" dangerouslySetInnerHTML={{__html: props.value}}>
+
+ </div>}
+ </div>
+
+}
+PageDownWidget.propTypes = {
+ id: PropTypes.string,
+ init: PropTypes.object,
+ label: PropTypes.string,
+ required: PropTypes.bool,
+ onChange: PropTypes.func,
+ value: PropTypes.node,
+ helperProps: PropTypes.object,
+ name: PropTypes.string,
+
+}
+
+PageDownWidget.displayName = 'PageDownWidget';
+export default PageDownWidget;
diff --git a/hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss
new file mode 100644
index 000000000..8e3bf6cbd
--- /dev/null
+++ b/hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss
@@ -0,0 +1,5 @@
+.preview{
+ width : '100%';
+ background-color : #e7f2f6;
+ padding-left: 3px;
+}
\ No newline at end of file
diff --git a/hypha/static_src/src/app/src/common/components/TinyMCE/index.js b/hypha/static_src/src/app/src/common/components/TinyMCE/index.js
index 8456d29a3..b92a65b6d 100644
--- a/hypha/static_src/src/app/src/common/components/TinyMCE/index.js
+++ b/hypha/static_src/src/app/src/common/components/TinyMCE/index.js
@@ -18,8 +18,8 @@ const TinyMCE = props => {
...(props.init),
menubar: false
}}
- onChange={e => props.onChange(props.name, e.level.content)}
id={props.name}
+ onEditorChange = {content => props.onChange(props.name, content)}
/>
</div>
}
diff --git a/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js b/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js
index 4443421ac..7bb7cd152 100644
--- a/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js
+++ b/hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js
@@ -8,6 +8,7 @@ import ScoredAnswerWidget from "@common/components/ScoredAnswerWidget";
import LoadHTML from "@common/components/LoadHTML";
import Textarea from "@common/components/Textarea";
import CheckBox from "@common/components/CheckBox";
+import PageDownWidget from "@common/components/PageDownWidget";
import PropTypes from 'prop-types';
@@ -139,6 +140,18 @@ class FormField extends React.Component {
return <LoadHTML
text={kwargs.text}
/>;
+
+ case "PagedownWidget":
+ return <PageDownWidget
+ label={kwargs.label}
+ name={fieldProps.name}
+ onChange={this.onChange}
+ value={value}
+ id={fieldProps.name}
+ init={widget.mce_attrs}
+ required={kwargs.required}
+ helperProps={this.getHelperprops()}
+ />
default:
return <div>Unknown field type {this.getType()}</div>
--
GitLab