diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx index 687c46d1b..849399d38 100644 --- a/src/blocks/Form/Form.tsx +++ b/src/blocks/Form/Form.tsx @@ -3,6 +3,7 @@ import React, {useCallback, useContext, useState} from 'react'; import {BackgroundImage, Title} from '../../components'; import InnerForm from '../../components/InnerForm/InnerForm'; import {MobileContext} from '../../context/mobileContext'; +import {useTheme} from '../../context/theme'; import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid'; import type {FormBlockProps} from '../../models'; import { @@ -12,7 +13,7 @@ import { isYandexDataForm, } from '../../models'; import {Content} from '../../sub-blocks'; -import {block} from '../../utils'; +import {block, getThemedValue} from '../../utils'; import './Form.scss'; @@ -24,9 +25,15 @@ const FormBlock: React.FC = (props) => { const {formData, title, textContent, direction = FormBlockDirection.Center, background} = props; const [contentLoaded, setContentLoaded] = useState(false); const isMobile = useContext(MobileContext); + const theme = useTheme(); + + const themedBackground = getThemedValue(background, theme) || undefined; const withBackground = Boolean( - background && (background.src || background.desktop || background.style?.backgroundColor), + themedBackground && + (themedBackground.src || + themedBackground.desktop || + themedBackground.style?.backgroundColor), ); const onContentLoad = useCallback(() => { setContentLoaded(true); @@ -51,9 +58,9 @@ const FormBlock: React.FC = (props) => { 'form-type': formType, })} > - {background && ( + {themedBackground && ( diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx index 07fa0db46..cad4e4e2f 100644 --- a/src/blocks/Form/__stories__/Form.stories.tsx +++ b/src/blocks/Form/__stories__/Form.stories.tsx @@ -38,10 +38,10 @@ export default { }, } as Meta; -const __getFormData = (formData: FormBlockModel['formData']) => { +const __getFormData = (formData: FormBlockModel['formData']): FormBlockModel['formData'] => { const id = uuidv4(); return isHubspotDataForm(formData) - ? {hubspot: {...formData.hubspot, formInstanceId: id}} + ? ({hubspot: {...formData.hubspot, formInstanceId: id}} as FormBlockModel['formData']) : {yandex: formData.yandex}; }; diff --git a/src/blocks/Form/schema.ts b/src/blocks/Form/schema.ts index 140bb9849..9e47fa553 100644 --- a/src/blocks/Form/schema.ts +++ b/src/blocks/Form/schema.ts @@ -2,7 +2,7 @@ import omit from 'lodash/omit'; import {ImageProps} from '../../components/Image/schema'; import {YandexFormProps} from '../../components/YandexForm/schema'; -import {BlockBaseProps} from '../../schema/validators/common'; +import {BlockBaseProps, withTheme} from '../../schema/validators/common'; import {ContentBase} from '../../sub-blocks/Content/schema'; import {HubspotFormProps} from '../../sub-blocks/HubspotForm/schema'; @@ -23,14 +23,14 @@ export const FormBlock = { type: 'object', optionName: 'yandex', properties: { - yandex: YandexFormProps, + yandex: withTheme(YandexFormProps), }, }, { type: 'object', optionName: 'hubspot', properties: { - hubspot: HubspotFormProps, + hubspot: withTheme(HubspotFormProps), }, }, ], diff --git a/src/components/InnerForm/InnerForm.tsx b/src/components/InnerForm/InnerForm.tsx index d1b7c3188..ff8171360 100644 --- a/src/components/InnerForm/InnerForm.tsx +++ b/src/components/InnerForm/InnerForm.tsx @@ -6,8 +6,10 @@ import { HubspotFormsContextProps, YandexFormsContextProps, } from '../../context/formsContext/FormsContext'; +import {useTheme} from '../../context/theme'; import {FormBlockData, isHubspotDataForm, isYandexDataForm} from '../../models'; import {HubspotForm} from '../../sub-blocks'; +import {getThemedValue} from '../../utils'; interface InnerFormProps { formData: FormBlockData; @@ -18,6 +20,7 @@ interface InnerFormProps { const InnerForm: React.FC = (props) => { const {formData, onContentLoad, className} = props; const formsConfig = useContext(FormsContext); + const theme = useTheme(); useEffect(() => { if (isHubspotDataForm(formData)) { @@ -26,7 +29,7 @@ const InnerForm: React.FC = (props) => { }, [onContentLoad, formData]); if (isYandexDataForm(formData)) { - const {onLoad, ...rest} = formData.yandex; + const {onLoad, ...rest} = getThemedValue(formData.yandex, theme); return (
@@ -43,11 +46,13 @@ const InnerForm: React.FC = (props) => { } if (isHubspotDataForm(formData)) { + const themedFormData = getThemedValue(formData.hubspot, theme); + return ( ); } diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 72cbbf1fa..2bc29b6d8 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -415,11 +415,11 @@ export enum FormBlockDirection { } export interface FormBlockYandexData { - yandex: YandexFormProps; + yandex: ThemeSupporting; } export interface FormBlockHubspotData { - hubspot: HubspotFormProps; + hubspot: ThemeSupporting; } export type FormBlockData = FormBlockYandexData | FormBlockHubspotData; @@ -429,7 +429,7 @@ export interface FormBlockProps { title?: string; textContent?: Omit; direction?: FormBlockDirection; - background?: BackgroundImageProps; + background?: ThemeSupporting; } //block models