@gravity-ui/page-constructor 4.33.0 → 4.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/blocks/Form/Form.css +136 -0
- package/build/cjs/blocks/Form/Form.d.ts +4 -0
- package/build/cjs/blocks/Form/Form.js +59 -0
- package/build/cjs/blocks/Form/InnerForm/InnerForm.d.ts +9 -0
- package/build/cjs/blocks/Form/InnerForm/InnerForm.js +28 -0
- package/build/cjs/blocks/Form/schema.d.ts +202 -0
- package/build/cjs/blocks/Form/schema.js +44 -0
- package/build/cjs/blocks/index.d.ts +1 -0
- package/build/cjs/blocks/index.js +3 -1
- package/build/cjs/components/YandexForm/YandexForm.d.ts +2 -17
- package/build/cjs/components/YandexForm/YandexForm.js +6 -4
- package/build/cjs/components/YandexForm/schema.d.ts +16 -0
- package/build/cjs/components/YandexForm/schema.js +13 -0
- package/build/cjs/constructor-items.d.ts +1 -0
- package/build/cjs/constructor-items.js +1 -0
- package/build/cjs/editor/data/templates/form-block.json +20 -0
- package/build/cjs/models/constructor-items/blocks.d.ts +31 -4
- package/build/cjs/models/constructor-items/blocks.js +13 -1
- package/build/cjs/models/constructor-items/common.d.ts +17 -1
- package/build/cjs/models/guards.d.ts +3 -1
- package/build/cjs/models/guards.js +9 -1
- package/build/cjs/schema/constants.js +2 -1
- package/build/cjs/schema/validators/blocks.d.ts +1 -0
- package/build/cjs/schema/validators/blocks.js +1 -0
- package/build/cjs/sub-blocks/HubspotForm/schema.d.ts +22 -0
- package/build/cjs/sub-blocks/HubspotForm/schema.js +17 -0
- package/build/esm/blocks/Form/Form.css +136 -0
- package/build/esm/blocks/Form/Form.d.ts +5 -0
- package/build/esm/blocks/Form/Form.js +57 -0
- package/build/esm/blocks/Form/InnerForm/InnerForm.d.ts +9 -0
- package/build/esm/blocks/Form/InnerForm/InnerForm.js +26 -0
- package/build/esm/blocks/Form/schema.d.ts +202 -0
- package/build/esm/blocks/Form/schema.js +40 -0
- package/build/esm/blocks/index.d.ts +1 -0
- package/build/esm/blocks/index.js +1 -0
- package/build/esm/components/YandexForm/YandexForm.d.ts +2 -17
- package/build/esm/components/YandexForm/YandexForm.js +5 -3
- package/build/esm/components/YandexForm/schema.d.ts +16 -0
- package/build/esm/components/YandexForm/schema.js +10 -0
- package/build/esm/constructor-items.d.ts +1 -0
- package/build/esm/constructor-items.js +2 -1
- package/build/esm/editor/data/templates/form-block.json +20 -0
- package/build/esm/models/constructor-items/blocks.d.ts +31 -4
- package/build/esm/models/constructor-items/blocks.js +12 -0
- package/build/esm/models/constructor-items/common.d.ts +17 -1
- package/build/esm/models/guards.d.ts +3 -1
- package/build/esm/models/guards.js +7 -1
- package/build/esm/schema/constants.js +3 -2
- package/build/esm/schema/validators/blocks.d.ts +1 -0
- package/build/esm/schema/validators/blocks.js +1 -0
- package/build/esm/sub-blocks/HubspotForm/schema.d.ts +22 -0
- package/build/esm/sub-blocks/HubspotForm/schema.js +14 -0
- package/package.json +1 -1
- package/server/models/constructor-items/blocks.d.ts +31 -4
- package/server/models/constructor-items/blocks.js +13 -1
- package/server/models/constructor-items/common.d.ts +17 -1
- package/server/models/guards.d.ts +3 -1
- package/server/models/guards.js +9 -1
- package/widget/index.js +1 -1
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
/* use this for style redefinitions to awoid problems with
|
|
2
|
+
unpredictable css rules order in build */
|
|
3
|
+
.pc-form-block {
|
|
4
|
+
border-radius: 32px;
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
.pc-form-block__title {
|
|
8
|
+
margin: 0 0 24px 10px;
|
|
9
|
+
}
|
|
10
|
+
.pc-form-block__title_mobile {
|
|
11
|
+
margin-left: 4px;
|
|
12
|
+
}
|
|
13
|
+
.pc-form-block__full-form {
|
|
14
|
+
background-color: var(--g-color-base-background);
|
|
15
|
+
padding: 48px 64px 48px calc(64px - 10px);
|
|
16
|
+
border-radius: var(--pc-border-radius);
|
|
17
|
+
}
|
|
18
|
+
.pc-form-block__media {
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: 0;
|
|
21
|
+
left: 0;
|
|
22
|
+
bottom: 0;
|
|
23
|
+
right: 0;
|
|
24
|
+
border-radius: 32px;
|
|
25
|
+
}
|
|
26
|
+
.pc-form-block__image {
|
|
27
|
+
height: 100%;
|
|
28
|
+
width: 100%;
|
|
29
|
+
object-fit: cover;
|
|
30
|
+
}
|
|
31
|
+
.pc-form-block__row_direction_form-content {
|
|
32
|
+
flex-direction: row-reverse;
|
|
33
|
+
}
|
|
34
|
+
.pc-form-block__row_direction_center {
|
|
35
|
+
padding-top: 64px;
|
|
36
|
+
padding-bottom: 48px;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
}
|
|
39
|
+
.pc-form-block__row_direction_center .pc-form-block__content-wrapper {
|
|
40
|
+
margin-bottom: 32px;
|
|
41
|
+
}
|
|
42
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__full-form {
|
|
43
|
+
box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
|
|
44
|
+
}
|
|
45
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper {
|
|
46
|
+
padding: 48px 0 64px 64px;
|
|
47
|
+
}
|
|
48
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper {
|
|
49
|
+
padding: 48px 64px 64px 0;
|
|
50
|
+
}
|
|
51
|
+
.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__form-wrapper {
|
|
52
|
+
padding: 16px 0 24px 16px;
|
|
53
|
+
}
|
|
54
|
+
.pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__form-wrapper {
|
|
55
|
+
padding: 16px 16px 24px 0;
|
|
56
|
+
}
|
|
57
|
+
.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper {
|
|
58
|
+
padding: 64px;
|
|
59
|
+
}
|
|
60
|
+
@media (min-width: 1081px) {
|
|
61
|
+
.pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__content-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__content-col {
|
|
62
|
+
flex: 1 0 0;
|
|
63
|
+
}
|
|
64
|
+
.pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__form, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__form, .pc-form-block_form-type_yandex .pc-form-block__row_direction_center .pc-form-block__form {
|
|
65
|
+
min-width: 475px;
|
|
66
|
+
}
|
|
67
|
+
.pc-form-block_form-type_yandex .pc-form-block__row_direction_form-content .pc-form-block__form-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_content-form .pc-form-block__form-col, .pc-form-block_form-type_yandex .pc-form-block__row_direction_center .pc-form-block__form-col {
|
|
68
|
+
max-width: initial;
|
|
69
|
+
width: fit-content;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
@media (max-width: 1081px) and (min-width: 769px) {
|
|
73
|
+
.pc-form-block__row {
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
}
|
|
76
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
|
|
77
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
|
|
78
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
79
|
+
max-width: 609px;
|
|
80
|
+
}
|
|
81
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__center,
|
|
82
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
|
|
83
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__center,
|
|
84
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
|
|
85
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
86
|
+
margin: 0 auto;
|
|
87
|
+
padding-right: 0;
|
|
88
|
+
padding-left: 0;
|
|
89
|
+
}
|
|
90
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper {
|
|
91
|
+
padding-top: 0;
|
|
92
|
+
}
|
|
93
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
94
|
+
text-align: center;
|
|
95
|
+
padding-bottom: 32px;
|
|
96
|
+
}
|
|
97
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
98
|
+
padding: 0 0 32px 0;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
@media (max-width: 769px) {
|
|
102
|
+
.pc-form-block__full-form {
|
|
103
|
+
padding: 32px;
|
|
104
|
+
}
|
|
105
|
+
.pc-form-block_with-background .pc-form-block__row, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row {
|
|
106
|
+
padding: 0;
|
|
107
|
+
}
|
|
108
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__form-wrapper,
|
|
109
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__form-wrapper,
|
|
110
|
+
.pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
111
|
+
padding: 0;
|
|
112
|
+
}
|
|
113
|
+
.pc-form-block_with-background .pc-form-block__row .pc-form-block__content-wrapper, .pc-form-block:not(.pc-form-block_with-background) .pc-form-block__row .pc-form-block__content-wrapper {
|
|
114
|
+
padding-bottom: 32px;
|
|
115
|
+
margin-bottom: 0;
|
|
116
|
+
}
|
|
117
|
+
.pc-form-block_with-background {
|
|
118
|
+
padding: 0 8px;
|
|
119
|
+
}
|
|
120
|
+
.pc-form-block_with-background .pc-form-block__row {
|
|
121
|
+
padding-top: 48px;
|
|
122
|
+
}
|
|
123
|
+
.pc-form-block_with-background .pc-form-block__row_padding-bottom_m {
|
|
124
|
+
padding-bottom: 32px;
|
|
125
|
+
}
|
|
126
|
+
.pc-form-block_with-background .pc-form-block__row_padding-bottom_l {
|
|
127
|
+
padding-bottom: 48px;
|
|
128
|
+
}
|
|
129
|
+
.pc-form-block_with-background .pc-form-block__row_direction_form-content .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_content-form .pc-form-block__content-wrapper, .pc-form-block_with-background .pc-form-block__row_direction_center .pc-form-block__content-wrapper {
|
|
130
|
+
padding-right: 16px;
|
|
131
|
+
padding-left: 16px;
|
|
132
|
+
}
|
|
133
|
+
.pc-form-block_with-background .pc-form-block__row_direction_form-content, .pc-form-block_with-background .pc-form-block__row_direction_content-form {
|
|
134
|
+
padding-top: 32px;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
const components_1 = require("../../components");
|
|
6
|
+
const mobileContext_1 = require("../../context/mobileContext");
|
|
7
|
+
const grid_1 = require("../../grid");
|
|
8
|
+
const models_1 = require("../../models");
|
|
9
|
+
const sub_blocks_1 = require("../../sub-blocks");
|
|
10
|
+
const utils_1 = require("../../utils");
|
|
11
|
+
const InnerForm_1 = tslib_1.__importDefault(require("./InnerForm/InnerForm"));
|
|
12
|
+
const b = (0, utils_1.block)('form-block');
|
|
13
|
+
const colSizes = { [grid_1.GridColumnSize.Lg]: 6, [grid_1.GridColumnSize.All]: 12 };
|
|
14
|
+
const FormBlock = (props) => {
|
|
15
|
+
var _a;
|
|
16
|
+
const { formData, title, textContent, direction = models_1.FormBlockDirection.Center, background } = props;
|
|
17
|
+
const [contentLoaded, setContentLoaded] = (0, react_1.useState)(false);
|
|
18
|
+
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
19
|
+
const hasImage = background && (background.src || background.desktop);
|
|
20
|
+
const paddingBottom = background && ((_a = background.style) === null || _a === void 0 ? void 0 : _a.backgroundColor) && !hasImage ? 'l' : 'm'; // bigger padding for case with background color and no image
|
|
21
|
+
const onContentLoad = (0, react_1.useCallback)(() => {
|
|
22
|
+
setContentLoaded(true);
|
|
23
|
+
}, []);
|
|
24
|
+
if (!formData) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
let formType;
|
|
28
|
+
if ((0, models_1.isYandexDataForm)(formData)) {
|
|
29
|
+
formType = models_1.FormBlockDataTypes.YANDEX;
|
|
30
|
+
}
|
|
31
|
+
else if ((0, models_1.isHubspotDataForm)(formData)) {
|
|
32
|
+
formType = models_1.FormBlockDataTypes.HUBSPOT;
|
|
33
|
+
}
|
|
34
|
+
return (react_1.default.createElement("div", { className: b({
|
|
35
|
+
'with-background': Boolean(background),
|
|
36
|
+
'form-type': formType,
|
|
37
|
+
}) },
|
|
38
|
+
background && (react_1.default.createElement(components_1.BackgroundImage, Object.assign({}, background, { className: b('media'), imageClassName: b('image') }))),
|
|
39
|
+
react_1.default.createElement(grid_1.Grid, null,
|
|
40
|
+
react_1.default.createElement(grid_1.Row, { alignItems: direction === models_1.FormBlockDirection.Center
|
|
41
|
+
? grid_1.GridAlignItems.Center
|
|
42
|
+
: grid_1.GridAlignItems.Start, className: b('row', {
|
|
43
|
+
direction,
|
|
44
|
+
'padding-bottom': paddingBottom,
|
|
45
|
+
}) },
|
|
46
|
+
react_1.default.createElement(grid_1.Col, { sizes: colSizes, className: b('content-col') }, textContent && (react_1.default.createElement("div", { className: b('content-wrapper') },
|
|
47
|
+
react_1.default.createElement(sub_blocks_1.Content, Object.assign({ theme: "default" }, textContent, { centered: direction === models_1.FormBlockDirection.Center, colSizes: { all: 12 }, className: b('content') }))))),
|
|
48
|
+
react_1.default.createElement(grid_1.Col, { sizes: colSizes, className: b('form-col') },
|
|
49
|
+
react_1.default.createElement("div", { className: b('form-wrapper') },
|
|
50
|
+
react_1.default.createElement("div", { className: b('full-form', {
|
|
51
|
+
hidden: !contentLoaded,
|
|
52
|
+
}) },
|
|
53
|
+
title && (react_1.default.createElement(components_1.Title, { title: {
|
|
54
|
+
text: title,
|
|
55
|
+
textSize: 's',
|
|
56
|
+
}, className: b('title', { mobile: isMobile }), colSizes: { all: 12 } })),
|
|
57
|
+
react_1.default.createElement(InnerForm_1.default, { className: b('form'), formData: formData, onContentLoad: onContentLoad }))))))));
|
|
58
|
+
};
|
|
59
|
+
exports.default = FormBlock;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FormBlockData } from '../../../models';
|
|
3
|
+
interface InnerFormProps {
|
|
4
|
+
formData: FormBlockData;
|
|
5
|
+
onContentLoad: () => void;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const InnerForm: React.FC<InnerFormProps>;
|
|
9
|
+
export default InnerForm;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
const components_1 = require("../../../components");
|
|
6
|
+
const models_1 = require("../../../models");
|
|
7
|
+
const sub_blocks_1 = require("../../../sub-blocks");
|
|
8
|
+
const InnerForm = (props) => {
|
|
9
|
+
const { formData, onContentLoad, className } = props;
|
|
10
|
+
(0, react_1.useEffect)(() => {
|
|
11
|
+
if ((0, models_1.isHubspotDataForm)(formData)) {
|
|
12
|
+
onContentLoad();
|
|
13
|
+
}
|
|
14
|
+
}, [onContentLoad, formData]);
|
|
15
|
+
if ((0, models_1.isYandexDataForm)(formData)) {
|
|
16
|
+
const _a = formData.yandex, { onLoad } = _a, rest = tslib_1.__rest(_a, ["onLoad"]);
|
|
17
|
+
return (react_1.default.createElement("div", { className: className },
|
|
18
|
+
react_1.default.createElement(components_1.YandexForm, Object.assign({}, rest, { onLoad: () => {
|
|
19
|
+
onContentLoad();
|
|
20
|
+
onLoad === null || onLoad === void 0 ? void 0 : onLoad();
|
|
21
|
+
} }))));
|
|
22
|
+
}
|
|
23
|
+
if ((0, models_1.isHubspotDataForm)(formData)) {
|
|
24
|
+
return react_1.default.createElement(sub_blocks_1.HubspotForm, Object.assign({ createDOMElement: true }, formData.hubspot));
|
|
25
|
+
}
|
|
26
|
+
return null;
|
|
27
|
+
};
|
|
28
|
+
exports.default = InnerForm;
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
export declare const FormBlock: {
|
|
2
|
+
'form-block': {
|
|
3
|
+
additionalProperties: boolean;
|
|
4
|
+
required: string[];
|
|
5
|
+
properties: {
|
|
6
|
+
title: {
|
|
7
|
+
type: string;
|
|
8
|
+
};
|
|
9
|
+
formData: {
|
|
10
|
+
oneOf: ({
|
|
11
|
+
type: string;
|
|
12
|
+
optionName: string;
|
|
13
|
+
properties: {
|
|
14
|
+
yandex: {
|
|
15
|
+
type: string;
|
|
16
|
+
required: string[];
|
|
17
|
+
properties: {
|
|
18
|
+
id: {
|
|
19
|
+
type: string;
|
|
20
|
+
};
|
|
21
|
+
containerId: {
|
|
22
|
+
type: string;
|
|
23
|
+
};
|
|
24
|
+
type: {};
|
|
25
|
+
when: {
|
|
26
|
+
type: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
hubspot?: undefined;
|
|
31
|
+
};
|
|
32
|
+
} | {
|
|
33
|
+
type: string;
|
|
34
|
+
optionName: string;
|
|
35
|
+
properties: {
|
|
36
|
+
hubspot: {
|
|
37
|
+
type: string;
|
|
38
|
+
required: string[];
|
|
39
|
+
properties: {
|
|
40
|
+
region: {
|
|
41
|
+
type: string;
|
|
42
|
+
};
|
|
43
|
+
portalId: {
|
|
44
|
+
type: string;
|
|
45
|
+
};
|
|
46
|
+
formId: {
|
|
47
|
+
type: string;
|
|
48
|
+
};
|
|
49
|
+
formInstanceId: {
|
|
50
|
+
type: string;
|
|
51
|
+
};
|
|
52
|
+
type: {};
|
|
53
|
+
when: {
|
|
54
|
+
type: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
yandex?: undefined;
|
|
59
|
+
};
|
|
60
|
+
})[];
|
|
61
|
+
};
|
|
62
|
+
textContent: {
|
|
63
|
+
additionalProperties: boolean;
|
|
64
|
+
properties: Partial<{
|
|
65
|
+
title: {
|
|
66
|
+
oneOf: ({
|
|
67
|
+
type: string;
|
|
68
|
+
contentType: string;
|
|
69
|
+
optionName: string;
|
|
70
|
+
} | {
|
|
71
|
+
optionName: string;
|
|
72
|
+
type: string;
|
|
73
|
+
additionalProperties: boolean;
|
|
74
|
+
required: string[];
|
|
75
|
+
properties: {
|
|
76
|
+
text: {
|
|
77
|
+
type: string;
|
|
78
|
+
contentType: string;
|
|
79
|
+
};
|
|
80
|
+
textSize: {
|
|
81
|
+
type: string;
|
|
82
|
+
enum: string[];
|
|
83
|
+
};
|
|
84
|
+
url: {
|
|
85
|
+
type: string;
|
|
86
|
+
};
|
|
87
|
+
urlTitle: {
|
|
88
|
+
type: string;
|
|
89
|
+
};
|
|
90
|
+
resetMargin: {
|
|
91
|
+
type: string;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
contentType?: undefined;
|
|
95
|
+
})[];
|
|
96
|
+
};
|
|
97
|
+
text: {
|
|
98
|
+
type: string;
|
|
99
|
+
contentType: string;
|
|
100
|
+
inputType: string;
|
|
101
|
+
};
|
|
102
|
+
additionalInfo: {
|
|
103
|
+
type: string;
|
|
104
|
+
contentType: string;
|
|
105
|
+
};
|
|
106
|
+
size: {
|
|
107
|
+
type: string;
|
|
108
|
+
enum: string[];
|
|
109
|
+
};
|
|
110
|
+
links: {
|
|
111
|
+
type: string;
|
|
112
|
+
items: {
|
|
113
|
+
type: string;
|
|
114
|
+
properties: {
|
|
115
|
+
when: {
|
|
116
|
+
type: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
buttons: {
|
|
122
|
+
type: string;
|
|
123
|
+
items: {
|
|
124
|
+
type: string;
|
|
125
|
+
properties: {
|
|
126
|
+
when: {
|
|
127
|
+
type: string;
|
|
128
|
+
};
|
|
129
|
+
};
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
theme: {
|
|
133
|
+
type: string;
|
|
134
|
+
enum: string[];
|
|
135
|
+
};
|
|
136
|
+
list: {
|
|
137
|
+
type: string;
|
|
138
|
+
items: {
|
|
139
|
+
type: string;
|
|
140
|
+
properties: {
|
|
141
|
+
when: {
|
|
142
|
+
type: string;
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
};
|
|
147
|
+
}>;
|
|
148
|
+
};
|
|
149
|
+
direction: {
|
|
150
|
+
enum: string[];
|
|
151
|
+
};
|
|
152
|
+
image: {
|
|
153
|
+
oneOf: ({
|
|
154
|
+
type: string;
|
|
155
|
+
properties: {
|
|
156
|
+
when: {
|
|
157
|
+
type: string;
|
|
158
|
+
};
|
|
159
|
+
};
|
|
160
|
+
} | {
|
|
161
|
+
type: string;
|
|
162
|
+
pattern: string;
|
|
163
|
+
optionName: string;
|
|
164
|
+
})[];
|
|
165
|
+
};
|
|
166
|
+
backgroundColor: {
|
|
167
|
+
type: string;
|
|
168
|
+
};
|
|
169
|
+
anchor: {
|
|
170
|
+
type: string;
|
|
171
|
+
additionalProperties: boolean;
|
|
172
|
+
required: string[];
|
|
173
|
+
properties: {
|
|
174
|
+
text: {
|
|
175
|
+
type: string;
|
|
176
|
+
contentType: string;
|
|
177
|
+
};
|
|
178
|
+
url: {
|
|
179
|
+
type: string;
|
|
180
|
+
};
|
|
181
|
+
urlTitle: {
|
|
182
|
+
type: string;
|
|
183
|
+
};
|
|
184
|
+
};
|
|
185
|
+
};
|
|
186
|
+
visible: {
|
|
187
|
+
type: string;
|
|
188
|
+
enum: string[];
|
|
189
|
+
};
|
|
190
|
+
resetPaddings: {
|
|
191
|
+
type: string;
|
|
192
|
+
};
|
|
193
|
+
context: {
|
|
194
|
+
type: string;
|
|
195
|
+
};
|
|
196
|
+
type: {};
|
|
197
|
+
when: {
|
|
198
|
+
type: string;
|
|
199
|
+
};
|
|
200
|
+
};
|
|
201
|
+
};
|
|
202
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.FormBlock = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
|
|
6
|
+
const schema_1 = require("../../components/Image/schema");
|
|
7
|
+
const schema_2 = require("../../components/YandexForm/schema");
|
|
8
|
+
const common_1 = require("../../schema/validators/common");
|
|
9
|
+
const schema_3 = require("../../sub-blocks/Content/schema");
|
|
10
|
+
const schema_4 = require("../../sub-blocks/HubspotForm/schema");
|
|
11
|
+
const FormBlockContentProps = (0, omit_1.default)(schema_3.ContentBase, ['size', 'centered', 'colSizes']);
|
|
12
|
+
exports.FormBlock = {
|
|
13
|
+
'form-block': {
|
|
14
|
+
additionalProperties: false,
|
|
15
|
+
required: ['formData'],
|
|
16
|
+
properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), { title: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
}, formData: {
|
|
19
|
+
oneOf: [
|
|
20
|
+
{
|
|
21
|
+
type: 'object',
|
|
22
|
+
optionName: 'yandex',
|
|
23
|
+
properties: {
|
|
24
|
+
yandex: schema_2.YandexFormProps,
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
type: 'object',
|
|
29
|
+
optionName: 'hubspot',
|
|
30
|
+
properties: {
|
|
31
|
+
hubspot: schema_4.HubspotFormProps,
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
}, textContent: {
|
|
36
|
+
additionalProperties: false,
|
|
37
|
+
properties: FormBlockContentProps,
|
|
38
|
+
}, direction: {
|
|
39
|
+
enum: ['content-form', 'form-content', 'center'],
|
|
40
|
+
}, image: schema_1.ImageProps, backgroundColor: {
|
|
41
|
+
type: 'string',
|
|
42
|
+
} }),
|
|
43
|
+
},
|
|
44
|
+
};
|
|
@@ -16,3 +16,4 @@ export { default as CardLayoutBlock } from './CardLayout/CardLayout';
|
|
|
16
16
|
export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
|
|
17
17
|
export { default as ShareBlock } from './Share/Share';
|
|
18
18
|
export { default as FilterBlock } from './FilterBlock/FilterBlock';
|
|
19
|
+
export { default as FormBlock } from './Form/Form';
|
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
|
|
6
|
+
exports.FormBlock = exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
|
|
7
7
|
var Banner_1 = require("./Banner/Banner");
|
|
8
8
|
Object.defineProperty(exports, "BannerBlock", { enumerable: true, get: function () { return __importDefault(Banner_1).default; } });
|
|
9
9
|
var Companies_1 = require("./Companies/Companies");
|
|
@@ -40,3 +40,5 @@ var Share_1 = require("./Share/Share");
|
|
|
40
40
|
Object.defineProperty(exports, "ShareBlock", { enumerable: true, get: function () { return __importDefault(Share_1).default; } });
|
|
41
41
|
var FilterBlock_1 = require("./FilterBlock/FilterBlock");
|
|
42
42
|
Object.defineProperty(exports, "FilterBlock", { enumerable: true, get: function () { return __importDefault(FilterBlock_1).default; } });
|
|
43
|
+
var Form_1 = require("./Form/Form");
|
|
44
|
+
Object.defineProperty(exports, "FormBlock", { enumerable: true, get: function () { return __importDefault(Form_1).default; } });
|
|
@@ -1,20 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { AnalyticsEventsBase } from '../../models/common';
|
|
1
|
+
import { YandexFormProps } from '../../models';
|
|
3
2
|
export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
|
|
4
|
-
export
|
|
5
|
-
id: number | string;
|
|
6
|
-
containerId?: string;
|
|
7
|
-
theme?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
headerHeight?: number;
|
|
10
|
-
customFormOrigin?: string;
|
|
11
|
-
params?: {
|
|
12
|
-
[key: string]: string;
|
|
13
|
-
};
|
|
14
|
-
onSubmit?: () => void;
|
|
15
|
-
onLoad?: () => void;
|
|
16
|
-
metrikaGoals?: string | string[];
|
|
17
|
-
pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
|
|
18
|
-
}
|
|
3
|
+
export declare const YANDEX_FORM_SECTION = "surveys";
|
|
19
4
|
declare const YandexForm: (props: YandexFormProps) => JSX.Element;
|
|
20
5
|
export default YandexForm;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.YANDEX_FORM_ORIGIN = void 0;
|
|
3
|
+
exports.YANDEX_FORM_SECTION = exports.YANDEX_FORM_ORIGIN = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const localeContext_1 = require("../../context/localeContext");
|
|
@@ -11,13 +11,15 @@ const common_1 = require("../../models/common");
|
|
|
11
11
|
const utils_1 = require("../../utils");
|
|
12
12
|
const constants_1 = require("../constants");
|
|
13
13
|
exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
|
|
14
|
+
exports.YANDEX_FORM_SECTION = 'surveys';
|
|
14
15
|
const CONTAINER_ID = 'pc-yandex-form-container';
|
|
15
16
|
const b = (0, utils_1.block)('yandex-form');
|
|
16
17
|
const YandexForm = (props) => {
|
|
17
|
-
const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
|
|
18
|
+
const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, customFormSection, } = props;
|
|
18
19
|
const formContainerRef = (0, react_1.useRef)(null);
|
|
19
20
|
const iframeRef = (0, react_1.useRef)();
|
|
20
21
|
const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
|
|
22
|
+
const yaFormSection = customFormSection || exports.YANDEX_FORM_SECTION;
|
|
21
23
|
const handleMetrika = (0, useMetrika_1.useMetrika)();
|
|
22
24
|
const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.YandexFormSubmit);
|
|
23
25
|
const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
|
|
@@ -39,7 +41,7 @@ const YandexForm = (props) => {
|
|
|
39
41
|
queryParams.set(param, params[param]);
|
|
40
42
|
});
|
|
41
43
|
}
|
|
42
|
-
const src = `${yaFormOrigin}
|
|
44
|
+
const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;
|
|
43
45
|
if (iframeRef.current) {
|
|
44
46
|
iframeRef.current.src = src;
|
|
45
47
|
}
|
|
@@ -54,7 +56,7 @@ const YandexForm = (props) => {
|
|
|
54
56
|
iframeRef.current.width = '100%';
|
|
55
57
|
container.appendChild(iframeRef.current);
|
|
56
58
|
}
|
|
57
|
-
}, [locale.lang, theme, isMobile, yaFormOrigin, id, containerId, params]);
|
|
59
|
+
}, [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params]);
|
|
58
60
|
const handleSubmit = (0, react_1.useCallback)(() => {
|
|
59
61
|
if (formContainerRef && formContainerRef.current) {
|
|
60
62
|
const { top } = formContainerRef.current.getBoundingClientRect();
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.YandexFormProps = void 0;
|
|
4
|
+
const common_1 = require("../../schema/validators/common");
|
|
5
|
+
exports.YandexFormProps = {
|
|
6
|
+
type: 'object',
|
|
7
|
+
required: ['id'],
|
|
8
|
+
properties: Object.assign(Object.assign({}, common_1.BaseProps), { id: {
|
|
9
|
+
type: 'string',
|
|
10
|
+
}, containerId: {
|
|
11
|
+
type: 'string',
|
|
12
|
+
} }),
|
|
13
|
+
};
|
|
@@ -17,6 +17,7 @@ export declare const blockMap: {
|
|
|
17
17
|
"share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
|
|
18
18
|
"map-block": ({ map, ...props }: import("./models").MapBlockProps) => JSX.Element;
|
|
19
19
|
"filter-block": import("react").FC<import("./models").FilterBlockProps>;
|
|
20
|
+
"form-block": import("react").FC<import("./models").FormBlockProps>;
|
|
20
21
|
};
|
|
21
22
|
export declare const subBlockMap: {
|
|
22
23
|
divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
|
|
@@ -26,6 +26,7 @@ exports.blockMap = {
|
|
|
26
26
|
[models_1.BlockType.ShareBlock]: blocks_1.ShareBlock,
|
|
27
27
|
[models_1.BlockType.MapBlock]: blocks_1.MapBlock,
|
|
28
28
|
[models_1.BlockType.FilterBlock]: blocks_1.FilterBlock,
|
|
29
|
+
[models_1.BlockType.FormBlock]: blocks_1.FormBlock,
|
|
29
30
|
};
|
|
30
31
|
exports.subBlockMap = {
|
|
31
32
|
[models_1.SubBlockType.Divider]: sub_blocks_1.Divider,
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"template": {
|
|
3
|
+
"type": "form-block",
|
|
4
|
+
"formData": {
|
|
5
|
+
"yandex": {
|
|
6
|
+
"hash": "hashString",
|
|
7
|
+
"title": ""
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
"direction": "center",
|
|
11
|
+
"textContent": {
|
|
12
|
+
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
|
|
13
|
+
"text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
|
14
|
+
},
|
|
15
|
+
"image": {
|
|
16
|
+
"src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
|
|
17
|
+
},
|
|
18
|
+
"backgroundColor": "#262626"
|
|
19
|
+
}
|
|
20
|
+
}
|