@gravity-ui/page-constructor 7.0.0-alpha.3 → 7.0.0-alpha.5
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/Tabs/TabContent/TabContent.css +3 -2
- package/build/cjs/components/Title/TitleItem.css +1 -0
- package/build/cjs/components/YandexForm/YandexForm.js +17 -2
- package/build/cjs/components/YandexForm/YandexForm.js.map +1 -1
- package/build/cjs/context/projectSettingsContext/ProjectSettingsContext.d.ts +1 -0
- package/build/cjs/context/projectSettingsContext/ProjectSettingsContext.js.map +1 -1
- package/build/esm/blocks/Tabs/TabContent/TabContent.css +3 -2
- package/build/esm/components/Title/TitleItem.css +1 -0
- package/build/esm/components/YandexForm/YandexForm.js +17 -2
- package/build/esm/components/YandexForm/YandexForm.js.map +1 -1
- package/build/esm/context/projectSettingsContext/ProjectSettingsContext.d.ts +1 -0
- package/build/esm/context/projectSettingsContext/ProjectSettingsContext.js.map +1 -1
- package/package.json +1 -1
|
@@ -38,12 +38,13 @@ unpredictable css rules order in build */
|
|
|
38
38
|
color: var(--g-color-text-primary);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.pc-tab-content__row_hidden {
|
|
41
|
+
.pc-tab-content__row.pc-tab-content__row_hidden {
|
|
42
42
|
display: none;
|
|
43
43
|
}
|
|
44
|
-
.pc-tab-content__row_reverse {
|
|
44
|
+
.pc-tab-content__row.pc-tab-content__row_reverse {
|
|
45
45
|
flex-direction: row-reverse;
|
|
46
46
|
}
|
|
47
|
+
|
|
47
48
|
@media (max-width: 769px) {
|
|
48
49
|
.pc-tab-content__row_reverse {
|
|
49
50
|
flex-direction: column-reverse;
|
|
@@ -10,6 +10,7 @@ const hooks_1 = require("../../hooks/index.js");
|
|
|
10
10
|
const common_1 = require("../../models/common.js");
|
|
11
11
|
const utils_1 = require("../../utils/index.js");
|
|
12
12
|
const constants_1 = require("../constants.js");
|
|
13
|
+
const projectSettingsContext_1 = require("../../context/projectSettingsContext/index.js");
|
|
13
14
|
exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
|
|
14
15
|
exports.YANDEX_FORM_SECTION = 'surveys';
|
|
15
16
|
const CONTAINER_ID = 'pc-yandex-form-container';
|
|
@@ -23,15 +24,19 @@ const YandexForm = (props) => {
|
|
|
23
24
|
const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.YandexFormSubmit);
|
|
24
25
|
const isMobile = React.useContext(mobileContext_1.MobileContext);
|
|
25
26
|
const locale = React.useContext(localeContext_1.LocaleContext);
|
|
27
|
+
const { defaultYandexFormTheme } = React.useContext(projectSettingsContext_1.ProjectSettingsContext);
|
|
26
28
|
const updateFormIframe = React.useCallback((container) => {
|
|
27
29
|
const queryParams = new URLSearchParams(location.search);
|
|
28
30
|
const url = location.origin + location.pathname;
|
|
31
|
+
const formTheme = theme || defaultYandexFormTheme;
|
|
29
32
|
queryParams.set('url', url);
|
|
30
33
|
queryParams.set('iframe', '1');
|
|
31
34
|
if (locale?.lang) {
|
|
32
35
|
queryParams.set('lang', locale.lang);
|
|
33
36
|
}
|
|
34
|
-
|
|
37
|
+
if (formTheme) {
|
|
38
|
+
queryParams.set('theme', formTheme);
|
|
39
|
+
}
|
|
35
40
|
if (isMobile) {
|
|
36
41
|
queryParams.set('media-type', 'mobile');
|
|
37
42
|
}
|
|
@@ -55,7 +60,17 @@ const YandexForm = (props) => {
|
|
|
55
60
|
iframeRef.current.width = '100%';
|
|
56
61
|
container.appendChild(iframeRef.current);
|
|
57
62
|
}
|
|
58
|
-
}, [
|
|
63
|
+
}, [
|
|
64
|
+
theme,
|
|
65
|
+
defaultYandexFormTheme,
|
|
66
|
+
locale.lang,
|
|
67
|
+
isMobile,
|
|
68
|
+
params,
|
|
69
|
+
yaFormOrigin,
|
|
70
|
+
yaFormSection,
|
|
71
|
+
id,
|
|
72
|
+
containerId,
|
|
73
|
+
]);
|
|
59
74
|
const handleSubmit = React.useCallback(() => {
|
|
60
75
|
if (formContainerRef && formContainerRef.current) {
|
|
61
76
|
const { top } = formContainerRef.current.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YandexForm.js","sourceRoot":"../../../../src","sources":["components/YandexForm/YandexForm.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,wEAA0D;AAC1D,wEAA0D;AAC1D,gDAAyC;AAEzC,mDAAsD;AACtD,gDAAkC;AAClC,+CAA2C;AAE9B,QAAA,kBAAkB,GAAG,yBAAyB,CAAC;AAC/C,QAAA,mBAAmB,GAAG,SAAS,CAAC;AAC7C,MAAM,YAAY,GAAG,0BAA0B,CAAC;AAEhD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1C,MAAM,EACF,MAAM,EACN,EAAE,EACF,MAAM,EACN,SAAS,EACT,KAAK,EACL,WAAW,GAAG,YAAY,EAC1B,YAAY,GAAG,yBAAa,EAC5B,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,iBAAiB,GACpB,GAAG,KAAK,CAAC;IACV,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,EAAqB,CAAC;IACpD,MAAM,YAAY,GAAG,gBAAgB,IAAI,0BAAkB,CAAC;IAC5D,MAAM,aAAa,GAAG,iBAAiB,IAAI,2BAAmB,CAAC;IAE/D,MAAM,eAAe,GAAG,IAAA,oBAAY,EAAC,0BAAiB,CAAC,gBAAgB,CAAC,CAAC;IACzE,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,6BAAa,CAAC,CAAC;IAE/C,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,SAAyB,EAAE,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACzD,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,QAAQ,CAAC;QAEhD,WAAW,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC5B,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAE/B,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC;YACf,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QACzC,CAAC;QAED,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,IAAI,WAAW,CAAC,CAAC;QAE/C,IAAI,QAAQ,EAAE,CAAC;YACX,WAAW,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACT,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAClC,WAAW,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC1C,CAAC,CAAC,CAAC;QACP,CAAC;QAED,MAAM,GAAG,GAAG,GAAG,YAAY,IAAI,aAAa,IAAI,EAAE,KAAK,WAAW,EAAE,CAAC;QAErE,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACpB,SAAS,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;QAChC,CAAC;aAAM,CAAC;YACJ,SAAS,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACrD,SAAS,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC;YAC5B,SAAS,CAAC,OAAO,CAAC,EAAE,GAAG,WAAW,CAAC;YACnC,SAAS,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,EAAE,EAAE,CAAC;YACrC,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;YAClD,SAAS,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;YACpC,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;YACnC,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC;YACjC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,EACD,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,CAAC,CACvF,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,EAAE,CAAC;YAC/C,MAAM,EAAC,GAAG,EAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAC/D,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,GAAG,YAAY,CAAC,CAAC;QAC3C,CAAC;QAED,eAAe,CAAC,eAAe,CAAC,CAAC;QAEjC,IAAI,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,CAAC;QACf,CAAC;IACL,CAAC,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/D,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,EAAC,MAAM,EAAE,IAAI,EAAe,EAAE,EAAE;QAC7B,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;YAC1B,OAAO;QACX,CAAC;QAED,IAAI,CAAC;YACD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAChC,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;YACvC,MAAM,EAAC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAC,GAAG,MAAM,CAAC;YAC5C,IAAI,IAAI,KAAK,OAAO,EAAE,EAAE,EAAE,CAAC;gBACvB,OAAO;YACX,CAAC;YAED,IAAI,SAAS,CAAC,OAAO,IAAI,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;gBAC1C,SAAS,CAAC,OAAO,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;gBACzC,MAAM,EAAE,EAAE,CAAC;YACf,CAAC;YAED,IAAI,OAAO,KAAK,MAAM,IAAI,WAAW,EAAE,CAAC;gBACpC,oEAAoE;gBACpE,kEAAkE;gBAClE,6EAA6E;gBAC7E,YAAY,EAAE,CAAC;YACnB,CAAC;QACL,CAAC;QAAC,MAAM,CAAC;YACL,OAAO;QACX,CAAC;IACL,CAAC,EACD,CAAC,YAAY,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,CAC3C,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAE3C,IAAI,SAAS,EAAE,CAAC;YACZ,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QACvE,CAAC;IACL,CAAC,EAAE,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC;IAEtC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,SAAS,EAAE,CAAC;QACZ,wCAAwC;QACxC,qFAAqF;QACrF,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;QAEnC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3C,OAAO,gCAAK,GAAG,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {LocaleContext} from '../../context/localeContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {YandexFormProps} from '../../models';\nimport {DefaultEventNames} from '../../models/common';\nimport {block} from '../../utils';\nimport {HEADER_HEIGHT} from '../constants';\n\nexport const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';\nexport const YANDEX_FORM_SECTION = 'surveys';\nconst CONTAINER_ID = 'pc-yandex-form-container';\n\nconst b = block('yandex-form');\n\nconst YandexForm = (props: YandexFormProps) => {\n const {\n onLoad,\n id,\n params,\n className,\n theme,\n containerId = CONTAINER_ID,\n headerHeight = HEADER_HEIGHT,\n onSubmit,\n analyticsEvents,\n customFormOrigin,\n customFormSection,\n } = props;\n const formContainerRef = React.useRef<HTMLDivElement>(null);\n const iframeRef = React.useRef<HTMLIFrameElement>();\n const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;\n const yaFormSection = customFormSection || YANDEX_FORM_SECTION;\n\n const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);\n const isMobile = React.useContext(MobileContext);\n const locale = React.useContext(LocaleContext);\n\n const updateFormIframe = React.useCallback(\n (container: HTMLDivElement) => {\n const queryParams = new URLSearchParams(location.search);\n const url = location.origin + location.pathname;\n\n queryParams.set('url', url);\n queryParams.set('iframe', '1');\n\n if (locale?.lang) {\n queryParams.set('lang', locale.lang);\n }\n\n queryParams.set('theme', theme || 'cloud-www');\n\n if (isMobile) {\n queryParams.set('media-type', 'mobile');\n }\n\n if (params) {\n Object.keys(params).forEach((param) => {\n queryParams.set(param, params[param]);\n });\n }\n\n const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;\n\n if (iframeRef.current) {\n iframeRef.current.src = src;\n } else {\n iframeRef.current = document.createElement('iframe');\n iframeRef.current.src = src;\n iframeRef.current.id = containerId;\n iframeRef.current.name = `form${id}`;\n iframeRef.current.setAttribute('loading', 'lazy');\n iframeRef.current.frameBorder = '0';\n iframeRef.current.scrolling = 'no';\n iframeRef.current.width = '100%';\n container.appendChild(iframeRef.current);\n }\n },\n [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params],\n );\n\n const handleSubmit = React.useCallback(() => {\n if (formContainerRef && formContainerRef.current) {\n const {top} = formContainerRef.current.getBoundingClientRect();\n window.scrollBy(0, top - headerHeight);\n }\n\n handleAnalytics(analyticsEvents);\n\n if (onSubmit) {\n onSubmit();\n }\n }, [handleAnalytics, analyticsEvents, onSubmit, headerHeight]);\n\n const handleMessage = React.useCallback(\n ({origin, data}: MessageEvent) => {\n if (origin !== yaFormOrigin) {\n return;\n }\n\n try {\n const parsed = JSON.parse(data);\n const height = parsed['iframe-height'];\n const {message, name, redirectUrl} = parsed;\n if (name !== `form${id}`) {\n return;\n }\n\n if (iframeRef.current && height && !message) {\n iframeRef.current.height = `${height}px`;\n onLoad?.();\n }\n\n if (message === 'sent' || redirectUrl) {\n // event with redirectUrl is comming when form with redirect is used\n // otherwise, message: 'sent' is not comming on such sort of forms\n // to catch this event and handle analytics redirectUrl is added to condition\n handleSubmit();\n }\n } catch {\n return;\n }\n },\n [yaFormOrigin, id, onLoad, handleSubmit],\n );\n\n const addIframe = React.useCallback(() => {\n const container = formContainerRef.current;\n\n if (container) {\n updateFormIframe(container);\n window.addEventListener('message', handleMessage, {passive: true});\n }\n }, [updateFormIframe, handleMessage]);\n\n React.useEffect(() => {\n addIframe();\n // Crunch for mobile chrome in lite mode\n // https://support.google.com/chrome/answer/2392284?co=GENIE.Platform%3DAndroid&oco=1\n setTimeout(() => onLoad?.(), 1000);\n\n return () => window.removeEventListener('message', handleMessage);\n }, [id, addIframe, handleMessage, onLoad]);\n\n return <div ref={formContainerRef} className={b(null, className)} />;\n};\n\nexport default YandexForm;\n"]}
|
|
1
|
+
{"version":3,"file":"YandexForm.js","sourceRoot":"../../../../src","sources":["components/YandexForm/YandexForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {LocaleContext} from '../../context/localeContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {YandexFormProps} from '../../models';\nimport {DefaultEventNames} from '../../models/common';\nimport {block} from '../../utils';\nimport {HEADER_HEIGHT} from '../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\n\nexport const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';\nexport const YANDEX_FORM_SECTION = 'surveys';\nconst CONTAINER_ID = 'pc-yandex-form-container';\n\nconst b = block('yandex-form');\n\nconst YandexForm = (props: YandexFormProps) => {\n const {\n onLoad,\n id,\n params,\n className,\n theme,\n containerId = CONTAINER_ID,\n headerHeight = HEADER_HEIGHT,\n onSubmit,\n analyticsEvents,\n customFormOrigin,\n customFormSection,\n } = props;\n const formContainerRef = React.useRef<HTMLDivElement>(null);\n const iframeRef = React.useRef<HTMLIFrameElement>();\n const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;\n const yaFormSection = customFormSection || YANDEX_FORM_SECTION;\n\n const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);\n const isMobile = React.useContext(MobileContext);\n const locale = React.useContext(LocaleContext);\n const {defaultYandexFormTheme} = React.useContext(ProjectSettingsContext);\n\n const updateFormIframe = React.useCallback(\n (container: HTMLDivElement) => {\n const queryParams = new URLSearchParams(location.search);\n const url = location.origin + location.pathname;\n const formTheme = theme || defaultYandexFormTheme;\n\n queryParams.set('url', url);\n queryParams.set('iframe', '1');\n\n if (locale?.lang) {\n queryParams.set('lang', locale.lang);\n }\n\n if (formTheme) {\n queryParams.set('theme', formTheme);\n }\n\n if (isMobile) {\n queryParams.set('media-type', 'mobile');\n }\n\n if (params) {\n Object.keys(params).forEach((param) => {\n queryParams.set(param, params[param]);\n });\n }\n\n const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;\n\n if (iframeRef.current) {\n iframeRef.current.src = src;\n } else {\n iframeRef.current = document.createElement('iframe');\n iframeRef.current.src = src;\n iframeRef.current.id = containerId;\n iframeRef.current.name = `form${id}`;\n iframeRef.current.setAttribute('loading', 'lazy');\n iframeRef.current.frameBorder = '0';\n iframeRef.current.scrolling = 'no';\n iframeRef.current.width = '100%';\n container.appendChild(iframeRef.current);\n }\n },\n [\n theme,\n defaultYandexFormTheme,\n locale.lang,\n isMobile,\n params,\n yaFormOrigin,\n yaFormSection,\n id,\n containerId,\n ],\n );\n\n const handleSubmit = React.useCallback(() => {\n if (formContainerRef && formContainerRef.current) {\n const {top} = formContainerRef.current.getBoundingClientRect();\n window.scrollBy(0, top - headerHeight);\n }\n\n handleAnalytics(analyticsEvents);\n\n if (onSubmit) {\n onSubmit();\n }\n }, [handleAnalytics, analyticsEvents, onSubmit, headerHeight]);\n\n const handleMessage = React.useCallback(\n ({origin, data}: MessageEvent) => {\n if (origin !== yaFormOrigin) {\n return;\n }\n\n try {\n const parsed = JSON.parse(data);\n const height = parsed['iframe-height'];\n const {message, name, redirectUrl} = parsed;\n if (name !== `form${id}`) {\n return;\n }\n\n if (iframeRef.current && height && !message) {\n iframeRef.current.height = `${height}px`;\n onLoad?.();\n }\n\n if (message === 'sent' || redirectUrl) {\n // event with redirectUrl is comming when form with redirect is used\n // otherwise, message: 'sent' is not comming on such sort of forms\n // to catch this event and handle analytics redirectUrl is added to condition\n handleSubmit();\n }\n } catch {\n return;\n }\n },\n [yaFormOrigin, id, onLoad, handleSubmit],\n );\n\n const addIframe = React.useCallback(() => {\n const container = formContainerRef.current;\n\n if (container) {\n updateFormIframe(container);\n window.addEventListener('message', handleMessage, {passive: true});\n }\n }, [updateFormIframe, handleMessage]);\n\n React.useEffect(() => {\n addIframe();\n // Crunch for mobile chrome in lite mode\n // https://support.google.com/chrome/answer/2392284?co=GENIE.Platform%3DAndroid&oco=1\n setTimeout(() => onLoad?.(), 1000);\n\n return () => window.removeEventListener('message', handleMessage);\n }, [id, addIframe, handleMessage, onLoad]);\n\n return <div ref={formContainerRef} className={b(null, className)} />;\n};\n\nexport default YandexForm;\n"]}
|
|
@@ -3,5 +3,6 @@ export interface ProjectSettingsContextProps {
|
|
|
3
3
|
disableCompress?: boolean;
|
|
4
4
|
isAnimationEnabled?: boolean;
|
|
5
5
|
renderInvisibleBlocks?: boolean;
|
|
6
|
+
defaultYandexFormTheme?: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;
|
|
1
|
+
{"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAQlB,QAAA,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nexport interface ProjectSettingsContextProps {\n disableCompress?: boolean;\n isAnimationEnabled?: boolean;\n renderInvisibleBlocks?: boolean;\n defaultYandexFormTheme?: string;\n}\n\nexport const ProjectSettingsContext = React.createContext<ProjectSettingsContextProps>({});\n"]}
|
|
@@ -38,12 +38,13 @@ unpredictable css rules order in build */
|
|
|
38
38
|
color: var(--g-color-text-primary);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.pc-tab-content__row_hidden {
|
|
41
|
+
.pc-tab-content__row.pc-tab-content__row_hidden {
|
|
42
42
|
display: none;
|
|
43
43
|
}
|
|
44
|
-
.pc-tab-content__row_reverse {
|
|
44
|
+
.pc-tab-content__row.pc-tab-content__row_reverse {
|
|
45
45
|
flex-direction: row-reverse;
|
|
46
46
|
}
|
|
47
|
+
|
|
47
48
|
@media (max-width: 769px) {
|
|
48
49
|
.pc-tab-content__row_reverse {
|
|
49
50
|
flex-direction: column-reverse;
|
|
@@ -6,6 +6,7 @@ import { useAnalytics } from "../../hooks/index.js";
|
|
|
6
6
|
import { DefaultEventNames } from "../../models/common.js";
|
|
7
7
|
import { block } from "../../utils/index.js";
|
|
8
8
|
import { HEADER_HEIGHT } from "../constants.js";
|
|
9
|
+
import { ProjectSettingsContext } from "../../context/projectSettingsContext/index.js";
|
|
9
10
|
export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
|
|
10
11
|
export const YANDEX_FORM_SECTION = 'surveys';
|
|
11
12
|
const CONTAINER_ID = 'pc-yandex-form-container';
|
|
@@ -19,15 +20,19 @@ const YandexForm = (props) => {
|
|
|
19
20
|
const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);
|
|
20
21
|
const isMobile = React.useContext(MobileContext);
|
|
21
22
|
const locale = React.useContext(LocaleContext);
|
|
23
|
+
const { defaultYandexFormTheme } = React.useContext(ProjectSettingsContext);
|
|
22
24
|
const updateFormIframe = React.useCallback((container) => {
|
|
23
25
|
const queryParams = new URLSearchParams(location.search);
|
|
24
26
|
const url = location.origin + location.pathname;
|
|
27
|
+
const formTheme = theme || defaultYandexFormTheme;
|
|
25
28
|
queryParams.set('url', url);
|
|
26
29
|
queryParams.set('iframe', '1');
|
|
27
30
|
if (locale?.lang) {
|
|
28
31
|
queryParams.set('lang', locale.lang);
|
|
29
32
|
}
|
|
30
|
-
|
|
33
|
+
if (formTheme) {
|
|
34
|
+
queryParams.set('theme', formTheme);
|
|
35
|
+
}
|
|
31
36
|
if (isMobile) {
|
|
32
37
|
queryParams.set('media-type', 'mobile');
|
|
33
38
|
}
|
|
@@ -51,7 +56,17 @@ const YandexForm = (props) => {
|
|
|
51
56
|
iframeRef.current.width = '100%';
|
|
52
57
|
container.appendChild(iframeRef.current);
|
|
53
58
|
}
|
|
54
|
-
}, [
|
|
59
|
+
}, [
|
|
60
|
+
theme,
|
|
61
|
+
defaultYandexFormTheme,
|
|
62
|
+
locale.lang,
|
|
63
|
+
isMobile,
|
|
64
|
+
params,
|
|
65
|
+
yaFormOrigin,
|
|
66
|
+
yaFormSection,
|
|
67
|
+
id,
|
|
68
|
+
containerId,
|
|
69
|
+
]);
|
|
55
70
|
const handleSubmit = React.useCallback(() => {
|
|
56
71
|
if (formContainerRef && formContainerRef.current) {
|
|
57
72
|
const { top } = formContainerRef.current.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YandexForm.js","sourceRoot":"../../../../src","sources":["components/YandexForm/YandexForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {LocaleContext} from '../../context/localeContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {YandexFormProps} from '../../models';\nimport {DefaultEventNames} from '../../models/common';\nimport {block} from '../../utils';\nimport {HEADER_HEIGHT} from '../constants';\n\nexport const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';\nexport const YANDEX_FORM_SECTION = 'surveys';\nconst CONTAINER_ID = 'pc-yandex-form-container';\n\nconst b = block('yandex-form');\n\nconst YandexForm = (props: YandexFormProps) => {\n const {\n onLoad,\n id,\n params,\n className,\n theme,\n containerId = CONTAINER_ID,\n headerHeight = HEADER_HEIGHT,\n onSubmit,\n analyticsEvents,\n customFormOrigin,\n customFormSection,\n } = props;\n const formContainerRef = React.useRef<HTMLDivElement>(null);\n const iframeRef = React.useRef<HTMLIFrameElement>();\n const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;\n const yaFormSection = customFormSection || YANDEX_FORM_SECTION;\n\n const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);\n const isMobile = React.useContext(MobileContext);\n const locale = React.useContext(LocaleContext);\n\n const updateFormIframe = React.useCallback(\n (container: HTMLDivElement) => {\n const queryParams = new URLSearchParams(location.search);\n const url = location.origin + location.pathname;\n\n queryParams.set('url', url);\n queryParams.set('iframe', '1');\n\n if (locale?.lang) {\n queryParams.set('lang', locale.lang);\n }\n\n queryParams.set('theme', theme || 'cloud-www');\n\n if (isMobile) {\n queryParams.set('media-type', 'mobile');\n }\n\n if (params) {\n Object.keys(params).forEach((param) => {\n queryParams.set(param, params[param]);\n });\n }\n\n const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;\n\n if (iframeRef.current) {\n iframeRef.current.src = src;\n } else {\n iframeRef.current = document.createElement('iframe');\n iframeRef.current.src = src;\n iframeRef.current.id = containerId;\n iframeRef.current.name = `form${id}`;\n iframeRef.current.setAttribute('loading', 'lazy');\n iframeRef.current.frameBorder = '0';\n iframeRef.current.scrolling = 'no';\n iframeRef.current.width = '100%';\n container.appendChild(iframeRef.current);\n }\n },\n [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params],\n );\n\n const handleSubmit = React.useCallback(() => {\n if (formContainerRef && formContainerRef.current) {\n const {top} = formContainerRef.current.getBoundingClientRect();\n window.scrollBy(0, top - headerHeight);\n }\n\n handleAnalytics(analyticsEvents);\n\n if (onSubmit) {\n onSubmit();\n }\n }, [handleAnalytics, analyticsEvents, onSubmit, headerHeight]);\n\n const handleMessage = React.useCallback(\n ({origin, data}: MessageEvent) => {\n if (origin !== yaFormOrigin) {\n return;\n }\n\n try {\n const parsed = JSON.parse(data);\n const height = parsed['iframe-height'];\n const {message, name, redirectUrl} = parsed;\n if (name !== `form${id}`) {\n return;\n }\n\n if (iframeRef.current && height && !message) {\n iframeRef.current.height = `${height}px`;\n onLoad?.();\n }\n\n if (message === 'sent' || redirectUrl) {\n // event with redirectUrl is comming when form with redirect is used\n // otherwise, message: 'sent' is not comming on such sort of forms\n // to catch this event and handle analytics redirectUrl is added to condition\n handleSubmit();\n }\n } catch {\n return;\n }\n },\n [yaFormOrigin, id, onLoad, handleSubmit],\n );\n\n const addIframe = React.useCallback(() => {\n const container = formContainerRef.current;\n\n if (container) {\n updateFormIframe(container);\n window.addEventListener('message', handleMessage, {passive: true});\n }\n }, [updateFormIframe, handleMessage]);\n\n React.useEffect(() => {\n addIframe();\n // Crunch for mobile chrome in lite mode\n // https://support.google.com/chrome/answer/2392284?co=GENIE.Platform%3DAndroid&oco=1\n setTimeout(() => onLoad?.(), 1000);\n\n return () => window.removeEventListener('message', handleMessage);\n }, [id, addIframe, handleMessage, onLoad]);\n\n return <div ref={formContainerRef} className={b(null, className)} />;\n};\n\nexport default YandexForm;\n"]}
|
|
1
|
+
{"version":3,"file":"YandexForm.js","sourceRoot":"../../../../src","sources":["components/YandexForm/YandexForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {LocaleContext} from '../../context/localeContext';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useAnalytics} from '../../hooks';\nimport {YandexFormProps} from '../../models';\nimport {DefaultEventNames} from '../../models/common';\nimport {block} from '../../utils';\nimport {HEADER_HEIGHT} from '../constants';\nimport {ProjectSettingsContext} from '../../context/projectSettingsContext';\n\nexport const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';\nexport const YANDEX_FORM_SECTION = 'surveys';\nconst CONTAINER_ID = 'pc-yandex-form-container';\n\nconst b = block('yandex-form');\n\nconst YandexForm = (props: YandexFormProps) => {\n const {\n onLoad,\n id,\n params,\n className,\n theme,\n containerId = CONTAINER_ID,\n headerHeight = HEADER_HEIGHT,\n onSubmit,\n analyticsEvents,\n customFormOrigin,\n customFormSection,\n } = props;\n const formContainerRef = React.useRef<HTMLDivElement>(null);\n const iframeRef = React.useRef<HTMLIFrameElement>();\n const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;\n const yaFormSection = customFormSection || YANDEX_FORM_SECTION;\n\n const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);\n const isMobile = React.useContext(MobileContext);\n const locale = React.useContext(LocaleContext);\n const {defaultYandexFormTheme} = React.useContext(ProjectSettingsContext);\n\n const updateFormIframe = React.useCallback(\n (container: HTMLDivElement) => {\n const queryParams = new URLSearchParams(location.search);\n const url = location.origin + location.pathname;\n const formTheme = theme || defaultYandexFormTheme;\n\n queryParams.set('url', url);\n queryParams.set('iframe', '1');\n\n if (locale?.lang) {\n queryParams.set('lang', locale.lang);\n }\n\n if (formTheme) {\n queryParams.set('theme', formTheme);\n }\n\n if (isMobile) {\n queryParams.set('media-type', 'mobile');\n }\n\n if (params) {\n Object.keys(params).forEach((param) => {\n queryParams.set(param, params[param]);\n });\n }\n\n const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;\n\n if (iframeRef.current) {\n iframeRef.current.src = src;\n } else {\n iframeRef.current = document.createElement('iframe');\n iframeRef.current.src = src;\n iframeRef.current.id = containerId;\n iframeRef.current.name = `form${id}`;\n iframeRef.current.setAttribute('loading', 'lazy');\n iframeRef.current.frameBorder = '0';\n iframeRef.current.scrolling = 'no';\n iframeRef.current.width = '100%';\n container.appendChild(iframeRef.current);\n }\n },\n [\n theme,\n defaultYandexFormTheme,\n locale.lang,\n isMobile,\n params,\n yaFormOrigin,\n yaFormSection,\n id,\n containerId,\n ],\n );\n\n const handleSubmit = React.useCallback(() => {\n if (formContainerRef && formContainerRef.current) {\n const {top} = formContainerRef.current.getBoundingClientRect();\n window.scrollBy(0, top - headerHeight);\n }\n\n handleAnalytics(analyticsEvents);\n\n if (onSubmit) {\n onSubmit();\n }\n }, [handleAnalytics, analyticsEvents, onSubmit, headerHeight]);\n\n const handleMessage = React.useCallback(\n ({origin, data}: MessageEvent) => {\n if (origin !== yaFormOrigin) {\n return;\n }\n\n try {\n const parsed = JSON.parse(data);\n const height = parsed['iframe-height'];\n const {message, name, redirectUrl} = parsed;\n if (name !== `form${id}`) {\n return;\n }\n\n if (iframeRef.current && height && !message) {\n iframeRef.current.height = `${height}px`;\n onLoad?.();\n }\n\n if (message === 'sent' || redirectUrl) {\n // event with redirectUrl is comming when form with redirect is used\n // otherwise, message: 'sent' is not comming on such sort of forms\n // to catch this event and handle analytics redirectUrl is added to condition\n handleSubmit();\n }\n } catch {\n return;\n }\n },\n [yaFormOrigin, id, onLoad, handleSubmit],\n );\n\n const addIframe = React.useCallback(() => {\n const container = formContainerRef.current;\n\n if (container) {\n updateFormIframe(container);\n window.addEventListener('message', handleMessage, {passive: true});\n }\n }, [updateFormIframe, handleMessage]);\n\n React.useEffect(() => {\n addIframe();\n // Crunch for mobile chrome in lite mode\n // https://support.google.com/chrome/answer/2392284?co=GENIE.Platform%3DAndroid&oco=1\n setTimeout(() => onLoad?.(), 1000);\n\n return () => window.removeEventListener('message', handleMessage);\n }, [id, addIframe, handleMessage, onLoad]);\n\n return <div ref={formContainerRef} className={b(null, className)} />;\n};\n\nexport default YandexForm;\n"]}
|
|
@@ -3,5 +3,6 @@ export interface ProjectSettingsContextProps {
|
|
|
3
3
|
disableCompress?: boolean;
|
|
4
4
|
isAnimationEnabled?: boolean;
|
|
5
5
|
renderInvisibleBlocks?: boolean;
|
|
6
|
+
defaultYandexFormTheme?: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProjectSettingsContext.js","sourceRoot":"../../../../src","sources":["context/projectSettingsContext/ProjectSettingsContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAA8B,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nexport interface ProjectSettingsContextProps {\n disableCompress?: boolean;\n isAnimationEnabled?: boolean;\n renderInvisibleBlocks?: boolean;\n defaultYandexFormTheme?: string;\n}\n\nexport const ProjectSettingsContext = React.createContext<ProjectSettingsContextProps>({});\n"]}
|