${e.content}`;
86 | }
87 | });
88 | }
89 | }}
90 | tinymceScriptSrc={tinymceScriptSrc}
91 | />
92 | }
93 |
94 | ;
95 | }
96 | }
97 |
98 | export default withFieldWrapper(MceEditor);
99 |
--------------------------------------------------------------------------------
/src/components/editFields/Multiple.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Form, Button } from 'antd';
3 | import { Field } from 'react-final-form';
4 | import uniqid from 'uniqid';
5 | import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
6 | import cx from 'classnames';
7 | import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
8 |
9 | import ImageUploader from './ImageUploader';
10 | import styles from '../../css/multipleField.scss';
11 | import MceEditor from './MceEditor';
12 | import Input from './Input';
13 |
14 | export default class Multiple extends Component {
15 | static defaultProps = {
16 | editor: true
17 | };
18 |
19 | addItem = () => {
20 | const { fields, variantPlaceholder } = this.props;
21 |
22 | fields.push({
23 | label: `${variantPlaceholder} ${fields.length}`,
24 | id: uniqid('radio_option_')
25 | });
26 | }
27 |
28 | onDragEnd = result => {
29 | if (!result.destination) {
30 | return;
31 | }
32 |
33 | this.props.fields.move(result.source.index, result.destination.index);
34 | }
35 |
36 | render() {
37 | const { label, fields, editor, description } = this.props;
38 |
39 | return
40 |
41 |
42 | { provided =>
43 |
46 | { fields.map((name, index) =>
47 |
48 | { dragProvided =>
49 |
50 |
51 |
52 |
53 |
54 |
55 |
59 | { editor &&
60 |
63 | }
64 | { fields.length > 1 &&
65 | } onClick={() => fields.remove(index)} />
66 | }
67 |
68 |
69 | { description && (
70 |
71 |
75 |
76 | )}
77 |
80 | )}
81 | { provided.placeholder }
82 |
Не удалось загрузить файл
}
75 | ;
76 | }
77 | }
78 |
79 | export default withFieldWrapper(withFileUrlContext(Uploader));
80 |
--------------------------------------------------------------------------------
/src/components/formElements/Checkboxes.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Checkbox, Button } from 'antd';
4 | import { append, remove, contains, memoizeWith, identity, without, path, find, propEq, any } from 'ramda';
5 | import uniqid from 'uniqid';
6 | import cx from 'classnames';
7 | import { Droppable, Draggable } from 'react-beautiful-dnd';
8 | import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
9 |
10 | import { withElementWrapper } from '../../hocs/withElementWrapper';
11 | import withFieldWrapper from '../../hocs/withFieldWrapper';
12 | import styles from '../../css/options.scss';
13 | import { shuffle } from '../../utils/methods';
14 | import Editor from './Editor';
15 |
16 | class Checkboxes extends Component {
17 | static propTypes = {
18 | options: PropTypes.array,
19 | input: PropTypes.object,
20 | isEditor: PropTypes.bool,
21 | onChange: PropTypes.func
22 | };
23 |
24 | static defaultProps = {
25 | input: {},
26 | options: [],
27 | correct: []
28 | };
29 |
30 | onChange = option => {
31 | const { onChange, isEditor } = this.props;
32 |
33 | isEditor ?
34 | onChange('correct', option.length ? option : null) :
35 | onChange(option.length ? option : null);
36 | }
37 |
38 | removeItem = index => {
39 | const { options, onChange } = this.props;
40 |
41 | onChange('options', remove(index, 1, options));
42 | }
43 |
44 | addItem = () => {
45 | const { options, onChange, placeholder } = this.props;
46 | const option = {
47 | label: `${placeholder} ${options.length}`,
48 | id: uniqid('checkboxes_option_')
49 | };
50 |
51 | onChange('options', append(option, options));
52 | }
53 |
54 | renderCheckbox = (option, index) => {
55 | const { isEditor, correct, allowCorrect, input: { value = [] }, disabled, options, downloadUrl } = this.props;
56 | const selected = contains(option.id, value);
57 | const isCorrect = contains(option.id, correct);
58 | const hasImages = any(o => o.image, options);
59 |
60 | return
61 | { provided =>
62 |
63 |
64 | { isEditor &&
65 |
66 |
67 |
68 | }
69 |
70 | { option.image &&
71 |
77 | }
78 |
84 | { !isEditor && }
85 |
86 | { isEditor &&
87 |
88 | }
92 | size='small'
93 | danger
94 | shape='circle'
95 | onClick={() => this.removeItem(index)} />
96 |
100 |
101 | }
102 |
103 |
104 |
123 |
128 |
129 | { provided =>
130 |
131 | { this.renderCheckboxes() }
132 | { provided.placeholder }
133 |
134 | }
135 |
136 |
137 | { isEditor &&
138 |
139 | }
145 | size='small'
146 | onClick={this.addItem} />
147 |
148 | }
149 | { !!(disabled && incorrect.length) &&
150 |
151 | Правильные ответы:
152 | { correct.map((id, index) =>
153 |
156 | )}
157 |
158 | }
159 |
this.container = node} className={cx(styles.editorContainer, 'editor-container', { [styles.block]: staticContent })}>
135 |
144 |
this.editor.focus()}>
145 | this.editor = node}
147 | editorState={this.state.editorState}
148 | onChange={this.onChange}
149 | placeholder='Введите ваш текст...'
150 | handleKeyCommand={this.handleKeyCommand}
151 | blockStyleFn={this.blockStyleFn} />
152 |
153 |
this.container = node}
65 | >
66 | { repeat ? (
67 |
77 | ) : (
78 |
79 | 
86 |
87 | )}
88 |
this.toolbar = node}
64 | className={cx(styles.toolbar, 'toolbar', { [styles.showToolbar]: show })}
65 | style={positionData.coords}>
66 |
67 | { linkToolbar ?
:
68 |
69 | { LIST.map(type =>
70 | this.onMouseDown(e, type)}>
77 | { type.label }
78 |
79 | )}
80 |
85 |
86 |
87 |
88 | }
89 |
90 |
91 |
16 |
17 |
;
18 |
19 | class PdfField extends Component {
20 | state = {
21 | numPages: null,
22 | pageNumber: 1,
23 | fullScreen: false,
24 | loaded: false
25 | };
26 |
27 | componentDidUpdate(prev) {
28 | if (this.props.file && !prev.file) {
29 | this.setState({ loaded: false });
30 | }
31 | }
32 |
33 | onLoadSuccess = ({ numPages }) => this.setState({ numPages, pageNumber: 1, loaded: true });
34 |
35 | back = () => this.setState(prev => ({ pageNumber: prev.pageNumber - 1 }));
36 |
37 | next = () => this.setState(prev => ({ pageNumber: prev.pageNumber + 1 }));
38 |
39 | getWidth = () => {
40 | const clientWidth = pathOr(450, ['clientWidth'], this.container);
41 |
42 | return this.props.width || (this.pageRef ? (
43 | pathOr(clientWidth, ['ref', 'clientWidth'], this.pageRef)
44 | ) : clientWidth);
45 | }
46 |
47 | openFullPdf = () => {
48 | this.setState({ fullScreen: true });
49 | }
50 |
51 | closeFullPdf = () => {
52 | this.setState({ fullScreen: false });
53 | }
54 |
55 | getPages = () => {
56 | const { pageNumber, numPages } = this.state;
57 | const pages = range(pageNumber - 2, pageNumber + 3);
58 |
59 | return this.props.allPages ? range(1, numPages + 1) : filter(num => num > 0 && num < numPages + 1, pages);
60 | }
61 |
62 | renderPdf = () => {
63 | const { file, downloadUrl, allPages } = this.props;
64 | const fileUrl = file.id ? downloadUrl(file.id) : file.body;
65 | const { pageNumber, numPages, loaded } = this.state;
66 | const pages = this.getPages();
67 |
68 | return this.container = node}>
69 |
70 |
71 | { !allPages &&
72 |
73 | } onClick={this.back} disabled={pageNumber < 2} />
74 | } onClick={this.next} disabled={pageNumber >= numPages} />
75 |
76 | }
77 | } onClick={this.openFullPdf} />
78 |
79 |
80 |
81 |
this.pdf = node}
83 | file={fileUrl}
84 | onLoadSuccess={this.onLoadSuccess}
85 | loading={}>
86 | { pages.map(p =>
87 |
88 |
this.pageRef = node) : null}
90 | pageNumber={p}
91 | width={this.getWidth()}
92 | loading={} />
93 |
96 |
Закрыть}
101 | width='100%'
102 | destroyOnClose>
103 |
104 |
105 |
106 | { !allPages && loaded &&
107 |
108 | { pageNumber } / { numPages }
109 |
110 | }
111 |
63 |
64 | { isEditor &&
65 |
66 |
67 |
68 | }
69 |
70 | { option.image &&
71 |
77 | }
78 |
84 | { !isEditor && }
85 |
86 | { isEditor &&
87 |
88 | }
92 | size='small'
93 | danger
94 | shape='circle'
95 | onClick={() => this.removeItem(index)} />
96 |
100 |
101 | }
102 |
103 |
104 |
122 |
127 |
128 | { provided =>
129 |
130 | { this.renderRadioButtons() }
131 | { provided.placeholder }
132 |
133 | }
134 |
135 |
136 | { !!(disabled && correct && correct !== value) &&
137 |
138 | Правильный ответ:
139 |
140 |
141 | }
142 |
41 |
: minLabel
49 | },
50 | [maxValue]: {
51 | label: isEditor ?
: maxLabel
52 | }
53 | }}
54 | disabled={disabled}
55 | onChange={this.onChange}
56 | />
57 | { isEditor &&
58 |
59 | onChange('minValue', v)} />
60 | Шаг: onChange('step', v)} />
61 | onChange('maxValue', v)} />
62 |
63 | }
64 |
this.container = node}>
42 |
43 |
66 | { isEditor &&
67 |
71 | }
72 | { src ? (
73 |
80 | ) : null}
81 |
;
82 | }
83 | }
84 |
85 | export default withElementWrapper(Video);
86 |
--------------------------------------------------------------------------------
/src/constants/componentsDefaults.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import uniqid from 'uniqid';
3 | import range from 'ramda/src/range';
4 | import length from 'ramda/src/length';
5 | import symmetricDifference from 'ramda/src/symmetricDifference';
6 |
7 | import Checkboxes, { CheckboxesField } from '../components/formElements/Checkboxes';
8 | import RadioButtons, { RadioButtonsField } from '../components/formElements/RadioButtons';
9 | import Range, { RangeField } from '../components/formElements/Range';
10 | import Editor from '../components/formElements/Editor';
11 | import EditorComponent from '../components/formElements/EditorComponent';
12 | import Video, { Video as VideoComponent } from '../components/formElements/Video';
13 | import File, { FileField } from '../components/formElements/File';
14 | import DownloadFile, { DownloadFile as DownloadFileComponent } from '../components/formElements/DownloadFile';
15 | import Pdf, { PdfComponent } from '../components/formElements/Pdf';
16 | import Image, { ImageComponent } from '../components/formElements/Image';
17 |
18 | const arrayIncorrect = (value, correct) => length(symmetricDifference(value || [], correct || [])) ? 'Неправильный ответ' : undefined;
19 |
20 | const renderInfo = (prop = 'label') => props => ;
21 |
22 | const COMPONENTS_DEFAULTS = placeholder => ([
23 | {
24 | type: 'Editor',
25 | name: 'Текст',
26 | icon: 'font',
27 | renderInfo: renderInfo('content'),
28 | component: Editor,
29 | formComponent: EditorComponent,
30 | props: {
31 | content: '
'
32 | },
33 | staticContent: true,
34 | hidePreview: true,
35 | fields: [
36 | { type: 'editor', prop: 'content' }
37 | ]
38 | },
39 | {
40 | type: 'Checkboxes',
41 | name: 'Множественный выбор',
42 | icon: 'check-square-o',
43 | renderInfo: renderInfo(),
44 | component: Checkboxes,
45 | formComponent: CheckboxesField,
46 | fieldType: 'checkbox',
47 | props: {
48 | label: 'Множественный выбор',
49 | options: range(0, 3).map(i => ({
50 | label: `${placeholder || 'выбор'} ${i}`,
51 | id: uniqid('checkboxes_option_')
52 | }))
53 | },
54 | ableCorrect: true,
55 | correctValidator: arrayIncorrect,
56 | fields: [
57 | { type: 'editor', label: 'Название поля', prop: 'label', props: { short: true }},
58 | { type: 'multiple', label: 'Ответы', prop: 'options', fieldArray: true },
59 | { type: 'input', label: 'Вес вопроса', prop: 'questionWeight', props: { number: true }},
60 | { type: 'switch', label: 'Обязательное поле', prop: 'required' },
61 | { type: 'switch', label: 'Выводить варианты в случайном порядке', prop: 'allowShuffle' },
62 | { type: 'switch', label: 'Отображать варианты по горизонтали', prop: 'inline' }
63 | ]
64 | },
65 | {
66 | type: 'Radio',
67 | name: 'Выбор',
68 | icon: 'dot-circle-o',
69 | renderInfo: renderInfo(),
70 | component: RadioButtons,
71 | formComponent: RadioButtonsField,
72 | fieldType: 'radio',
73 | props: {
74 | label: 'Выбор',
75 | options: range(0, 3).map(i => ({
76 | label: `${placeholder || 'выбор'} ${i}`,
77 | id: uniqid('radiobuttons_option_')
78 | }))
79 | },
80 | ableCorrect: true,
81 | fields: [
82 | { type: 'editor', label: 'Название поля', prop: 'label', props: { short: true }},
83 | { type: 'multiple', label: 'Ответы', prop: 'options', fieldArray: true },
84 | { type: 'input', label: 'Вес вопроса', prop: 'questionWeight', props: { number: true }},
85 | { type: 'switch', label: 'Обязательное поле', prop: 'required' },
86 | { type: 'switch', label: 'Выводить варианты в случайном порядке', prop: 'allowShuffle' },
87 | { type: 'switch', label: 'Отображать варианты по горизонтали', prop: 'inline' }
88 | ]
89 | },
90 | {
91 | type: 'Range',
92 | name: 'Слайдер',
93 | icon: 'sliders',
94 | renderInfo: renderInfo(),
95 | component: Range,
96 | formComponent: RangeField,
97 | fieldType: 'range',
98 | props: {
99 | label: 'Слайдер',
100 | step: 1,
101 | defaultValue: 3,
102 | minValue: 1,
103 | maxValue: 5,
104 | minLabel: 'Минимум',
105 | maxLabel: 'Максимум'
106 | },
107 | fields: [
108 | { type: 'editor', label: 'Название поля', prop: 'label', props: { short: true }},
109 | { type: 'input', label: 'Значение по-умолчанию', prop: 'defaultValue', props: { number: true }},
110 | { type: 'input', label: 'Шаг', prop: 'step', props: { number: true, min: 1 }},
111 | { type: 'input', label: 'Минимальное значение', prop: 'minValue', props: { number: true }},
112 | { type: 'input', label: 'Название минимального значения', prop: 'minLabel'},
113 | { type: 'input', label: 'Максимальное значение', prop: 'maxValue', props: { number: true }},
114 | { type: 'input', label: 'Название максимального значения', prop: 'maxLabel'},
115 | { type: 'switch', label: 'Обязательное поле', prop: 'required' },
116 | { type: 'input', label: 'Вес вопроса', prop: 'questionWeight', props: { number: true }}
117 | ]
118 | },
119 | {
120 | type: 'Video',
121 | name: 'Видео',
122 | icon: 'video-camera',
123 | component: Video,
124 | formComponent: VideoComponent,
125 | staticContent: true,
126 | props: {
127 | responsive: true,
128 | width: 560,
129 | height: 350
130 | },
131 | fields: [
132 | { type: 'input', label: 'Ссылка на видео', prop: 'src' },
133 | { type: 'input', label: 'Высота', prop: 'height', props: { number: true }},
134 | { type: 'input', label: 'Ширина', prop: 'width', props: { number: true }},
135 | { type: 'switch', label: 'Адаптивный размер', prop: 'responsive' },
136 | ]
137 | },
138 | {
139 | type: 'File',
140 | name: 'Файл',
141 | icon: 'file-o',
142 | renderInfo: renderInfo(),
143 | component: File,
144 | formComponent: FileField,
145 | props: {
146 | label: 'Файл'
147 | },
148 | fields: [
149 | { type: 'editor', label: 'Название поля', prop: 'label', props: { short: true }}
150 | ]
151 | },
152 | {
153 | type: 'DownloadFile',
154 | name: 'Скачивание файла',
155 | icon: 'download',
156 | component: DownloadFile,
157 | formComponent: DownloadFileComponent,
158 | staticContent: true,
159 | props: {
160 | label: 'Файл'
161 | },
162 | fields: [
163 | { type: 'editor', label: 'Название поля', prop: 'label', props: { short: true }},
164 | { type: 'uploader', label: 'Файл', prop: 'file' }
165 | ]
166 | },
167 | {
168 | type: 'Pdf',
169 | name: 'PDF-презентация',
170 | icon: 'file-pdf-o',
171 | component: Pdf,
172 | formComponent: PdfComponent,
173 | staticContent: true,
174 | props: {
175 | label: 'PDF-презентация'
176 | },
177 | fields: [
178 | { type: 'editor', label: 'Название поля', prop: 'label', props: { short: true }},
179 | { type: 'uploader', label: 'Файл', prop: 'file', props: { accept: '.pdf' }},
180 | { type: 'input', label: 'Ширина', prop: 'width', props: { number: true }},
181 | { type: 'switch', label: 'Выводить все страницы', prop: 'allPages' }
182 | ]
183 | },
184 | {
185 | type: 'Image',
186 | name: 'Изображение',
187 | icon: 'picture-o',
188 | component: Image,
189 | formComponent: ImageComponent,
190 | staticContent: true,
191 | fields: [
192 | { type: 'uploader', label: 'Изображение', prop: 'url', props: { withoutUrl: true, accept: 'image/*' }},
193 | { type: 'radiobuttons', label: 'Выравнивание текста', prop: 'float', props: { options: ['left', null, 'right']} },
194 | { type: 'input', label: 'Ширина (%)', prop: 'width', props: { number: true, min: 0, max: 100 } },
195 | { type: 'switch', label: 'Растянуть на всю ширину', prop: 'cover' },
196 | { type: 'switch', label: 'Повторять по горизонтали', prop: 'repeat' }
197 | ]
198 | }
199 | ]);
200 |
201 | export default COMPONENTS_DEFAULTS;
202 |
--------------------------------------------------------------------------------
/src/contexts/ComponentsContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const ComponentsContext = createContext([]);
4 |
5 | export default ComponentsContext;
6 |
--------------------------------------------------------------------------------
/src/contexts/EditModalContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const EditModalContext = createContext();
4 |
5 | export default EditModalContext;
6 |
--------------------------------------------------------------------------------
/src/contexts/FileUrlContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const FileUrlContext = createContext({});
4 |
5 | export default FileUrlContext;
6 |
--------------------------------------------------------------------------------
/src/contexts/MceLanguageUrl.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const MceLanguageUrl = createContext();
4 |
5 | export default MceLanguageUrl;
6 |
--------------------------------------------------------------------------------
/src/css/colorPicker.scss:
--------------------------------------------------------------------------------
1 | .swatch {
2 | padding: 5px;
3 | background: #fff;
4 | border-radius: 1px;
5 | box-shadow: 0 0 0 1px rgba(0,0,0,.1);
6 | display: inline-block;
7 | cursor: pointer;
8 | margin-left: 1px;
9 | margin-top: 4px;
10 | }
11 |
12 | .color {
13 | width: 36px;
14 | height: 22px;
15 | border-radius: 2px;
16 | }
17 |
18 | .cover {
19 | position: fixed;
20 | top: 0;
21 | right: 0;
22 | bottom: 0;
23 | left: 0;
24 | z-index: 999;
25 | }
26 |
27 | .popover {
28 | position: absolute;
29 | z-index: 1000;
30 | top: 4px;
31 | left: 48px;
32 | :global {
33 | .chrome-picker {
34 | box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 8px !important;
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/css/editor.scss:
--------------------------------------------------------------------------------
1 | .editor {
2 | display: flex;
3 | flex-direction: row;
4 | }
5 |
6 | .editorCol {
7 | width: 50%;
8 | border-right: 1px solid #e8e8e8;
9 | :global {
10 | .ant-form {
11 | height: 100%;
12 | }
13 | }
14 | }
15 |
16 | .editorPreviewCol {
17 | width: 50%;
18 | padding: 15px;
19 | max-height: calc(100vh - 154px);
20 | overflow-y: auto;
21 | }
22 |
23 | .editorCol p,
24 | .editorPreviewCol p {
25 | margin-bottom: 0 !important
26 | }
27 |
28 | .editorField {
29 | padding: 10px;
30 | border: 1px solid #e8e8e8;
31 | }
32 |
33 | .editorModal {
34 | top: 50px !important;
35 | :global {
36 | .ant-modal-body {
37 | max-height: calc(100vh - 154px);
38 | overflow: hidden;
39 | padding: 0;
40 | }
41 | }
42 | }
43 |
44 | .editorFooter {
45 | border-top: 1px solid #e8e8e8;
46 | padding: 15px;
47 | width: 100%;
48 | background: #fff;
49 | }
50 |
51 | .editorFields {
52 | padding: 15px;
53 | max-height: calc(100vh - 216px);
54 | overflow-y: auto;
55 | height: calc(100% - 62px);
56 | }
57 |
58 | .editorColHidePreview {
59 | width: 100%;
60 | border: none;
61 | }
62 |
63 | .editor-view {
64 | overflow: hidden;
65 | }
66 |
--------------------------------------------------------------------------------
/src/css/editorInput.scss:
--------------------------------------------------------------------------------
1 | .editorInput {
2 | border: 1px solid #d9d9d9;
3 | border-radius: 6px;
4 | padding: 7px 10px;
5 | min-height: 80px;
6 | :global {
7 | .mce-content-body {
8 | min-height: 70px;
9 | * {
10 | line-height: 20px;
11 | }
12 | }
13 | .mce-edit-focus {
14 | outline: none;
15 | }
16 | }
17 | }
18 |
19 | .editorInputShort {
20 | min-height: auto;
21 | :global {
22 | .mce-content-body {
23 | min-height: auto;
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/css/editorToolbar.scss:
--------------------------------------------------------------------------------
1 | .toolbar {
2 | position: absolute;
3 | z-index: 9999;
4 | height: 35px;
5 | cursor: default;
6 | visibility: hidden;
7 | }
8 |
9 | .showToolbar {
10 | visibility: visible;
11 | }
12 |
13 | .showToolbar .toolbarItems,
14 | .showToolbar .toolbarItem {
15 | opacity: 1;
16 | }
17 |
18 | .toolbarItems {
19 | opacity: 0;
20 | position: absolute;
21 | z-index: 1;
22 | display: flex;
23 | align-items: center;
24 | justify-content: space-between;
25 | list-style: none;
26 | height: 100%;
27 | margin: 0;
28 | padding: 0;
29 | background: linear-gradient(to bottom, #f5f5f5 0%, #ededed 100%);
30 | border: 1px solid rgba(0, 0, 0, 0.05);
31 | box-shadow: 0 0 25px -4px rgba(0, 0, 0, 0.25);
32 | }
33 |
34 | .toolbarItemsArrow {
35 | position: absolute;
36 | bottom: -5px;
37 | margin-left: -5px;
38 | border-top: 5px solid #444;
39 | border-right: 5px solid transparent;
40 | border-left: 5px solid transparent;
41 | }
42 |
43 | .toolbarItem {
44 | display: flex;
45 | opacity: 0;
46 | align-items: center;
47 | justify-content: center;
48 | height: 100%;
49 | width: 35px;
50 | max-width: 35px;
51 | color: #444;
52 | border-bottom: 3px solid #444;
53 | transition: all 0.15s linear;
54 | cursor: pointer;
55 | }
56 |
57 | .toolbarItem:hover svg path {
58 | fill: #1890ff;
59 | }
60 |
61 | .toolbarItem:hover,
62 | .active {
63 | color: #1890ff;
64 | border-color: #1890ff;
65 | }
66 |
67 | .bold {
68 | font-weight: bold;
69 | }
70 |
71 | .italic {
72 | font-style: italic;
73 | }
74 |
75 | .underline {
76 | text-decoration: underline;
77 | }
78 |
79 | .toolbarLinkContainer {
80 | color: #444;
81 | border-bottom: 3px solid #444;
82 | display: flex;
83 | padding: 3px;
84 | }
85 |
86 | .toolbarLinkContainer:after {
87 | content: '';
88 | position: absolute;
89 | bottom: -5px;
90 | margin-left: -5px;
91 | border-top: 5px solid #444;
92 | border-right: 5px solid transparent;
93 | border-left: 5px solid transparent;
94 | }
95 |
96 | .toolbarLinkContainer input {
97 | border: none;
98 | background: none;
99 | border-bottom: 1px solid #ccc;
100 | }
101 |
102 | .toolbarLinkContainer input:focus {
103 | outline: none;
104 | }
105 |
106 | .toolbarLinkContainer button {
107 | background: none;
108 | border: none;
109 | transition: color .3s;
110 | cursor: pointer;
111 | }
112 |
113 | .toolbarLinkContainer button:hover {
114 | color: #1890ff;
115 | }
116 |
117 | .toolbarLinkContainer button:focus {
118 | outline: none;
119 | }
120 |
--------------------------------------------------------------------------------
/src/css/formBuilder.scss:
--------------------------------------------------------------------------------
1 | .reactFormBuilder {
2 | padding: 15px;
3 | }
4 |
5 | .reactFormBuilder input[type=checkbox],
6 | .reactFormBuilder input[type=radio] {
7 | margin-right: 5px;
8 | }
9 |
10 | .reactFormBuilderPreview {
11 | position: relative;
12 | width: calc(100% - 270px);
13 | border: 1px solid #ddd;
14 | background: #fafafa;
15 | padding: 10px;
16 | box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
17 | min-height: 200px;
18 | }
19 |
20 | .reactFormBuilderPreview label {
21 | font-weight: normal;
22 | }
23 |
24 | .reactFormBuilderPreview {
25 | :global {
26 | .form-label {
27 | display: block !important;
28 | }
29 | }
30 | }
31 |
32 | .reactFormBuilderPreviewBtn {
33 | padding-bottom: 20px;
34 | padding-right: 270px;
35 | }
36 |
37 | .droppableContainer > div {
38 | width: 100%;
39 | min-height: 200px;
40 | }
41 |
42 | .droppableContainer > div > li {
43 | list-style-type: none;
44 | }
45 |
46 | .reactFormBuilderPreviewModal {
47 | :global {
48 | .ant-modal-body {
49 | padding: 0;
50 | }
51 | }
52 | }
53 |
54 | .experiumPlayerBuilder {
55 | :global {
56 | .ant-checkbox-disabled + span,
57 | .ant-radio-disabled + span {
58 | color: rgba(0, 0, 0, 0.65) !important;
59 | cursor: default !important;
60 | }
61 |
62 | .ant-checkbox-disabled input,
63 | .ant-radio-disabled input {
64 | cursor: default !important;
65 | }
66 |
67 | .ant-checkbox-disabled .ant-checkbox-inner,
68 | .ant-radio-disabled .ant-radio-inner {
69 | background: #fff;
70 | }
71 |
72 | .DraftEditor-root {
73 | cursor: initial;
74 | }
75 |
76 | .public-DraftEditorPlaceholder-inner {
77 | white-space: nowrap !important;
78 | }
79 |
80 | .ant-checkbox-group,
81 | .ant-radio-group {
82 | line-height: 1.5 !important;
83 | }
84 |
85 | .ant-checkbox-group .ant-checkbox-wrapper,
86 | .ant-radio-group .ant-radio-wrapper {
87 | display: inline-block;
88 | margin-left: 0 !important;
89 | }
90 |
91 | .ant-checkbox-group .ant-checkbox-wrapper p,
92 | .ant-radio-group .ant-radio-wrapper p {
93 | display: inline-block;
94 | margin-bottom: 0 !important;
95 | }
96 |
97 | .ant-form-item-label {
98 | width: 100%;
99 | overflow: visible !important;
100 | text-align: left !important;
101 | }
102 |
103 | .ant-form-item-label p {
104 | margin-bottom: 0;
105 | display: inline;
106 | }
107 |
108 | .ant-form-item-control.has-error .ant-radio-inner,
109 | .ant-form-item-control.has-error .ant-checkbox-inner {
110 | border-color: #f5222d;
111 | }
112 |
113 | .ant-slider-mark .ant-slider-mark-text:first-child {
114 | width: 50% !important;
115 | margin-left: -6px !important;
116 | text-align: left;
117 | }
118 |
119 | .ant-slider-mark .ant-slider-mark-text:last-child {
120 | width: 50% !important;
121 | right: 0;
122 | left: auto !important;
123 | margin-left: 0 !important;
124 | margin-right: -6px;
125 | text-align: right;
126 | }
127 |
128 | .ant-slider-mark .ant-slider-mark-text:last-child .public-DraftEditorPlaceholder-root {
129 | right: 0;
130 | }
131 |
132 | .ant-slider-disabled {
133 | cursor: default !important;
134 | }
135 |
136 | .ant-slider-disabled .ant-slider-mark-text,
137 | .ant-slider-disabled .ant-slider-step .ant-slider-dot,
138 | .ant-slider-disabled .ant-slider-handle {
139 | cursor: default !important;
140 | }
141 |
142 | .ant-slider-disabled .ant-slider:hover .ant-slider-rail {
143 | background: #f5f5f5;
144 | }
145 |
146 | .ant-form-item {
147 | margin-bottom: 10px !important;
148 | }
149 |
150 | .public-DraftStyleDefault-block,
151 | .public-DraftEditorPlaceholder-inner,
152 | .public-DraftStyleDefault-orderedListItem,
153 | .public-DraftStyleDefault-unorderedListItem {
154 | line-height: normal !important;
155 | }
156 |
157 | .alignment--left .public-DraftStyleDefault-block {
158 | text-align: left;
159 | }
160 |
161 | .alignment--center .public-DraftStyleDefault-block {
162 | text-align: center;
163 | }
164 |
165 | .alignment--right .public-DraftStyleDefault-block {
166 | text-align: right;
167 | }
168 |
169 | .ant-checkbox-wrapper.required {
170 | color: #f5222d;
171 | }
172 |
173 | .ant-checkbox-wrapper.required:after {
174 | margin: 0 !important;
175 | }
176 |
177 | .ant-checkbox-wrapper.correct .ant-checkbox,
178 | .ant-checkbox-wrapper.incorrect .ant-checkbox,
179 | .ant-radio-wrapper.correct .ant-radio,
180 | .ant-radio-wrapper.incorrect .ant-radio {
181 | cursor: default !important;
182 | }
183 |
184 | .ant-checkbox-wrapper.correct .ant-checkbox-inner,
185 | .ant-checkbox-wrapper.incorrect .ant-checkbox-inner,
186 | .ant-radio-wrapper.correct .ant-radio-inner,
187 | .ant-radio-wrapper.incorrect .ant-radio-inner {
188 | border: none;
189 | position: relative;
190 | }
191 |
192 | .ant-checkbox-wrapper.correct .ant-checkbox-inner:before,
193 | .ant-checkbox-wrapper.incorrect .ant-checkbox-inner:before,
194 | .ant-radio-wrapper.correct .ant-radio-inner:before,
195 | .ant-radio-wrapper.incorrect .ant-radio-inner:before {
196 | font: normal normal normal 14px/1 FontAwesome;
197 | position: absolute;
198 | left: 2px;
199 | }
200 |
201 | .ant-checkbox-wrapper.correct .ant-checkbox-inner:after,
202 | .ant-checkbox-wrapper.incorrect .ant-checkbox-inner:after,
203 | .ant-radio-wrapper.correct .ant-radio-inner:after,
204 | .ant-radio-wrapper.incorrect .ant-radio-inner:after {
205 | opacity: 0;
206 | }
207 |
208 | .ant-checkbox-wrapper.correct .ant-checkbox-inner:before,
209 | .ant-radio-wrapper.correct .ant-radio-inner:before {
210 | content: '\f00c';
211 | color: #41b567;
212 | }
213 |
214 | .ant-checkbox-wrapper.incorrect .ant-checkbox-inner:before,
215 | .ant-radio-wrapper.incorrect .ant-radio-inner:before {
216 | content: '\f00d';
217 | color: #f5222d;
218 | }
219 |
220 | .ant-form-item-has-error .option-item-correct,
221 | .option-item-correct .ant-checkbox-wrapper-disabled,
222 | .option-item-correct .ant-radio-wrapper-disabled {
223 | .ant-checkbox .ant-checkbox-inner {
224 | border-color: #A6B622 !important;
225 | }
226 | .ant-radio .ant-radio-inner {
227 | border-color: #A6B622 !important;
228 | }
229 | }
230 | }
231 | }
232 |
--------------------------------------------------------------------------------
/src/css/image.scss:
--------------------------------------------------------------------------------
1 | .imageFull {
2 | div[data-rmiz-wrap="visible"] {
3 | display: flex;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/css/imageUploader.scss:
--------------------------------------------------------------------------------
1 | .image {
2 | background-position: center;
3 | width: 15px;
4 | height: 15px;
5 | background-size: cover;
6 | margin-right: 10px;
7 | }
8 |
9 | .imageInfo {
10 | position: absolute;
11 | display: flex;
12 | align-items: center;
13 | width: 100%;
14 | bottom: -30px;
15 | }
16 |
17 | .imageRemoveBtn {
18 | margin-left: 15px;
19 | cursor: pointer;
20 | transition: all .3s;
21 | &:hover {
22 | color: #000;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/css/multipleField.scss:
--------------------------------------------------------------------------------
1 | .item {
2 | display: flex;
3 | padding-bottom: 10px;
4 | background: #fff;
5 | :global {
6 | .ant-row.ant-form-item {
7 | width: 100%;
8 | margin-bottom: 0;
9 | }
10 | .ant-btn.ant-btn-icon-only {
11 | height: 39px;
12 | }
13 | .ant-btn-danger {
14 | width: 40px;
15 | }
16 | .ant-btn {
17 | border: none;
18 | box-shadow: none;
19 | }
20 | .ant-upload-select {
21 | margin-left: 5px;
22 | }
23 | .ant-form-item-label {
24 | display: none;
25 | }
26 | }
27 | }
28 |
29 | .itemHasImage {
30 | padding-bottom: 32px;
31 | }
32 |
33 | .itemContent {
34 | display: flex;
35 | position: relative;
36 | width: 100%;
37 | }
38 |
39 | .itemDescription {
40 | display: flex;
41 | position: relative;
42 | width: 100%;
43 | flex: 1;
44 |
45 | :global {
46 | .ant-row {
47 | width: 100%;
48 | padding-bottom: 10px;
49 | }
50 | }
51 | }
52 |
53 | .dragHandler {
54 | display: flex;
55 | align-items: center;
56 | padding: 0 10px;
57 | }
58 |
--------------------------------------------------------------------------------
/src/css/options.scss:
--------------------------------------------------------------------------------
1 | .optionItem:hover .optionRemoveBtn {
2 | display: inline-block;
3 | }
4 |
5 | .optionReorder {
6 | display: inline-block;
7 | padding: 5px 10px 5px 5px;
8 | cursor: grab;
9 | }
10 |
11 | .optionAddBtn,
12 | .optionRemoveBtn {
13 | border: none !important;
14 | font-weight: 700 !important;
15 | float: right;
16 | line-height: 60px;
17 | }
18 |
19 | .optionRemoveBtn {
20 | display: none;
21 | }
22 |
23 | .optionLabel p {
24 | display: inline;
25 | }
26 |
27 | .correctAnswers p {
28 | display: inline-block;
29 | margin-bottom: 0 !important;
30 | }
31 |
32 | .correctAnswers em {
33 | font-style: normal !important;
34 | }
35 |
36 | .correctAnswers u {
37 | text-decoration: none !important;
38 | }
39 |
40 | .correctAnswers strong {
41 | font-weight: normal !important;
42 | }
43 |
44 | .image {
45 | width: 100px;
46 | height: 100px;
47 | background-size: cover;
48 | background-position: center;
49 | margin-bottom: 10px;
50 | }
51 |
52 | .contentWithImage {
53 | padding: 10px;
54 | display: flex;
55 | align-items: center;
56 | flex-direction: column;
57 | box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
58 | margin-bottom: 10px;
59 | }
60 |
61 | .inlineOptions div[data-react-beautiful-dnd-draggable] {
62 | display: inline-flex;
63 | margin-right: 10px;
64 | vertical-align: bottom;
65 | }
66 |
--------------------------------------------------------------------------------
/src/css/pdf.scss:
--------------------------------------------------------------------------------
1 | .pdfFooter {
2 | text-align: center;
3 | margin-top: 15px;
4 | }
5 |
6 | .pdfPageButtons {
7 | text-align: center;
8 | margin-bottom: 15px;
9 | }
10 |
11 | .pdf {
12 | :global {
13 | .react-pdf__Page {
14 | text-align: center;
15 | }
16 | .react-pdf__Page__canvas {
17 | display: inline-block !important;
18 | }
19 | }
20 | }
21 |
22 | .pdfSpin {
23 | text-align: center;
24 | }
25 |
26 | .pdfFullView {
27 | top: 0 !important;
28 | padding-bottom: 0 !important;
29 | :global {
30 | .ant-modal-content {
31 | height: 100vh;
32 | border-radius: 0;
33 | }
34 | .ant-modal-body {
35 | padding: 0;
36 | height: calc(100% - 53px);
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/css/range.scss:
--------------------------------------------------------------------------------
1 | .rangeSettings {
2 | position: relative;
3 | }
4 |
5 | .maxValueInput {
6 | float: right;
7 | }
8 | .minValueInput {
9 | float: left;
10 | }
11 |
12 | .stepInput {
13 | position: absolute;
14 | left: calc(50% - 66px);
15 | top: -4px;
16 | }
17 |
--------------------------------------------------------------------------------
/src/css/sortableRow.scss:
--------------------------------------------------------------------------------
1 | .sortableRowWrapper {
2 | padding-bottom: 10px;
3 | }
4 |
5 | .sortableRow {
6 | border: 1px dashed #ddd;
7 | background: #fafafa;
8 | display: inline-block;
9 | width: 100%;
10 | position: relative;
11 | display: table;
12 | :global {
13 | .ant-form-item-control {
14 | .ant-checkbox-group,
15 | .ant-radio-group {
16 | width: 100%;
17 | }
18 | .ant-radio-group .ant-radio-wrapper {
19 | margin-right: 0 !important;
20 | }
21 | .ant-checkbox-group .ant-checkbox + span,
22 | .ant-radio-group .ant-radio + span {
23 | padding-left: 0 !important;
24 | }
25 | }
26 | }
27 | }
28 |
29 | .sortableRowContent {
30 | display: table-cell;
31 | width: calc(100% - 50px);
32 | padding: 15px 15px 15px 0;
33 | }
34 |
35 | .sortableRowDragHandle {
36 | display: table-cell;
37 | width: 40px;
38 | text-align: center;
39 | font-size: 15px;
40 | vertical-align: middle;
41 | }
42 |
43 | .sortableRow:hover .toolbarRemoveBtn,
44 | .sortableRow:hover .toolbarCopyBtn,
45 | .sortableRow:hover .toolbarEditBtn {
46 | opacity: 1;
47 | }
48 |
49 | .toolbarEditBtn,
50 | .toolbarCopyBtn,
51 | .toolbarRemoveBtn {
52 | position: absolute;
53 | opacity: 0;
54 | top: -15px;
55 | right: -15px;
56 | height: 30px;
57 | width: 30px;
58 | background: #fff;
59 | border-radius: 50%;
60 | box-shadow: 0 0 8px rgba(0, 0, 0, .2);
61 | border: none;
62 | cursor: pointer;
63 | z-index: 1;
64 | }
65 |
66 | .toolbarEditBtn:focus,
67 | .toolbarCopyBtn:focus,
68 | .toolbarRemoveBtn:focus {
69 | outline: none;
70 | }
71 |
72 | .toolbarEditBtn {
73 | right: 20px;
74 | }
75 |
76 | .toolbarCopyBtn {
77 | right: 55px;
78 | }
79 |
80 | .sortableRowInfo {
81 | max-height: 23px;
82 | overflow: hidden;
83 | * {
84 | margin: 0;
85 | padding: 0;
86 | display: inline;
87 | font-size: 14px !important;
88 | font-family: inherit !important;
89 | color: rgba(0, 0, 0, .65) !important;
90 | background-color: transparent !important;
91 | text-decoration: none !important;
92 | font-weight: 400 !important;
93 | font-style: normal !important;
94 | padding: 0 !important;
95 | pointer-events: none;
96 | }
97 | img, table, br {
98 | display: none;
99 | }
100 | }
101 |
102 | .sortableRowContentInfo {
103 | color: #aaa;
104 | i {
105 | margin-right: 8px;
106 | }
107 | }
108 |
109 | .elementEditor {
110 | :global {
111 | .ant-radio-wrapper, .ant-checkbox-wrapper {
112 | float: left;
113 | line-height: 60px;
114 | }
115 |
116 | .sortable-row-wrapper {
117 | margin-left: 30px;
118 | margin-right: 50px;
119 |
120 | .sortable-row-content {
121 | padding-left: 15px;
122 | }
123 | }
124 |
125 | .option-item {
126 | clear: both;
127 |
128 | .option-reorder {
129 | display: none;
130 | }
131 | }
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/src/css/toolbar.scss:
--------------------------------------------------------------------------------
1 | .draggableToolbarItemWrapper {
2 | padding: 5px;
3 | list-style: none;
4 | }
5 |
6 | .draggingToolbarItemWrapper {
7 | transform: none !important;
8 | }
9 |
10 | .draggableToolbarItem {
11 | padding: 10px;
12 | border: 1px dashed #ddd;
13 | background: #fff;
14 | position: relative;
15 | }
16 |
17 | .draggableToolbarItem i {
18 | margin-right: 10px;
19 | }
20 |
21 | .toolbar {
22 | float: right;
23 | width: 250px;
24 | background: #fff;
25 | margin-top: -28px;
26 | }
27 |
28 | .toolbar h4 {
29 | margin-top: 0;
30 | text-align: center;
31 | }
32 |
33 | .toolbar ul {
34 | padding: 0;
35 | }
36 |
--------------------------------------------------------------------------------
/src/css/video.scss:
--------------------------------------------------------------------------------
1 | .video input {
2 | margin-top: 5px;
3 | }
4 |
5 | .videoWrapper {
6 | position: relative;
7 | padding-bottom: 56.25%;
8 | padding-top: 25px;
9 | height: 0;
10 | margin-top: 10px;
11 | }
12 |
13 | .videoWrapper.dragging-over:before {
14 | content: '';
15 | width: 100%;
16 | height: 100%;
17 | position: absolute;
18 | top: 0;
19 | left: 0;
20 | }
21 |
--------------------------------------------------------------------------------
/src/hocs/withComponentsContext.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ComponentsContext from '../contexts/ComponentsContext';
3 |
4 | export default WrappedComponent =>
5 | class ComponentsContextWrapper extends Component {
6 | render() {
7 | return
8 | { components => }
9 | ;
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/src/hocs/withData.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { assocPath, without, dissoc, insert, pathOr, identical, equals, isNil, propEq, find, concat } from 'ramda';
4 | import uniqid from 'uniqid';
5 |
6 | import { reorder } from '../utils/dnd';
7 | import EditModalContext from '../contexts/EditModalContext';
8 | import COMPONENTS_DEFAULTS from '../constants/componentsDefaults';
9 | import ComponentsContext from '../contexts/ComponentsContext';
10 |
11 | export default WrappedComponent =>
12 | class extends Component {
13 | static propTypes = {
14 | data: PropTypes.object
15 | };
16 |
17 | static defaultProps = {
18 | placeholder: 'вариант',
19 | components: []
20 | };
21 |
22 | constructor(props) {
23 | super(props);
24 |
25 | const { items = [], elements = {}, common = {} } = props.data || {};
26 |
27 | this.state = {
28 | items,
29 | elements,
30 | common
31 | };
32 | }
33 |
34 | getSnapshotBeforeUpdate(prevProps, prevState) {
35 | return !equals(prevState, this.state);
36 | }
37 |
38 | componentDidUpdate(prevProps, prevState, snapshot) {
39 | if (snapshot) {
40 | const { onChange } = this.props;
41 | onChange && onChange(this.state.items.length ? this.state : null);
42 | }
43 | }
44 |
45 | reorder = (startIndex, endIndex) => {
46 | this.setState(prev => ({
47 | items: reorder(prev.items, startIndex, endIndex)
48 | }));
49 | }
50 |
51 | add = (type, index) => {
52 | const id = uniqid();
53 | const defaultProps = pathOr({}, ['props'], find(propEq('type', type), this.getComponents()));
54 |
55 | this.setState(prev => ({
56 | items: insert(isNil(index) ? prev.items.length : index, id, prev.items),
57 | elements: assocPath([id], { type, ...defaultProps }, prev.elements),
58 | openedEditModal: id
59 | }));
60 | }
61 |
62 | addCopy = item => {
63 | const id = uniqid();
64 |
65 | this.setState(prev => ({
66 | items: insert(prev.items.length, id, prev.items),
67 | elements: assocPath([id], item, prev.elements)
68 | }));
69 | }
70 |
71 | edit = (id, prop, content) => {
72 | this.setState(prev => ({
73 | elements: assocPath([id, ...prop.split('.').map(i => identical(NaN, +i) ? i : +i)], content, prev.elements)
74 | }));
75 | }
76 |
77 | editAllItem = (id, props) => {
78 | this.setState(prev => ({
79 | elements: assocPath([id], {...prev.elements[id], ...props}, prev.elements)
80 | }));
81 | }
82 |
83 | remove = id => {
84 | this.setState(prev => ({
85 | items: without([id], prev.items),
86 | elements: dissoc(id, prev.elements)
87 | }));
88 | }
89 |
90 | copy = id => {
91 | this.props.onCopy(this.state.elements[id]);
92 | }
93 |
94 | setOpenedEditModal = openedEditModal => this.setState({ openedEditModal });
95 |
96 | getComponents = () => {
97 | const { placeholder, components, getComponents } = this.props;
98 |
99 | const items = concat(COMPONENTS_DEFAULTS(placeholder), components);
100 |
101 | return getComponents ? getComponents(items) : items;
102 | }
103 |
104 | editCommon = common => this.setState({ common });
105 |
106 | render() {
107 | const props = {
108 | items: this.state.items,
109 | elements: this.state.elements,
110 | commonSettings: this.state.common,
111 | reorderItems: this.reorder,
112 | editItem: this.edit,
113 | editAllItem: this.editAllItem,
114 | removeItem: this.remove,
115 | copyItem: this.props.onCopy ? this.copy : undefined,
116 | addItem: this.add,
117 | addCopy: this.addCopy,
118 | editCommonSettings: this.editCommon
119 | };
120 |
121 | return
125 |
126 |
127 |
128 | ;
129 | }
130 | };
131 |
--------------------------------------------------------------------------------
/src/hocs/withElementWrapper.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Fragment } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Form, Modal } from 'antd';
4 | import { find, propEq } from 'ramda';
5 | import cx from 'classnames';
6 |
7 | import EditorComponent from '../components/formElements/EditorComponent';
8 | import EditElement from '../components/EditElement';
9 | import styles from '../css/sortableRow.scss';
10 | import editorStyles from '../css/editor.scss';
11 | import EditModalContext from '../contexts/EditModalContext';
12 | import withComponentsContext from './withComponentsContext';
13 |
14 | export const withElementWrapper = WrappedComponent => {
15 | class ElementWrapper extends Component {
16 | static propTypes = {
17 | removeItem: PropTypes.func,
18 | copyItem: PropTypes.func,
19 | editItem: PropTypes.func,
20 | id: PropTypes.oneOfType([
21 | PropTypes.number,
22 | PropTypes.string
23 | ]),
24 | simpleView: PropTypes.bool
25 | };
26 |
27 | static defaultProps = {
28 | simpleView: true
29 | };
30 |
31 | renderComponent = (staticContent, ableCorrect) => {
32 | const { editItem, id } = this.props;
33 |
34 | return editItem(id, prop, content)}
37 | isEditor
38 | disabled={!ableCorrect}
39 | staticContent={staticContent} />;
40 | }
41 |
42 | renderLabel = () => {
43 | const { id, editItem } = this.props;
44 |
45 | return editItem(id, prop, content)}
50 | isEditor />;
51 | }
52 |
53 | onSubmit = values => {
54 | this.props.editAllItem(this.props.id, values);
55 | }
56 |
57 | render() {
58 | const { removeItem, copyItem, id, type, dragHandleProps, placeholder, simpleView, item, components, isEditor } = this.props;
59 | const { staticContent, ableCorrect, renderInfo, name, icon } = find(propEq('type', type), components) || {};
60 |
61 | return
62 |
63 | { !isEditor &&
64 |
65 | { ({ setOpened }) => !!name &&
66 |
69 | }
70 |
71 | { !!copyItem && }
74 |
77 |
78 |
79 |
80 | }
81 |
82 | { simpleView || staticContent ?
83 |
84 |
{ renderInfo &&
{ renderInfo(item) }
}
85 |
{ name }
86 |
: (
87 |
91 | { this.renderComponent(staticContent, ableCorrect) }
92 |
93 | )
94 | }
95 |
96 |
97 |
98 | { ({ opened, setOpened }) =>
99 | setOpened(null)}
104 | style={{ minWidth: 1000 }}
105 | destroyOnClose
106 | footer={null}>
107 | setOpened(null)}
111 | onSubmit={values => {
112 | this.onSubmit(values);
113 | setOpened(null);
114 | }} />
115 |
116 | }
117 |
118 |