feat: support theme at Form and InnerForm component (#868)

gravity-ui · Mar 28, 2024 · 5b16440 · 5b16440
1 parent d4cf0f6
commit 5b16440
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 14 deletions.
diff --git 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<FormBlockProps> = (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<FormBlockProps> = (props) => {
                 'form-type': formType,
             })}
         >
-            {background && (
+            {themedBackground && (
                 <BackgroundImage
-                    {...background}
+                    {...themedBackground}
                     className={b('media')}
                     imageClassName={b('image')}
                 />

diff --git 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
@@ -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
@@ -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<InnerFormProps> = (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<InnerFormProps> = (props) => {
     }, [onContentLoad, formData]);
 
     if (isYandexDataForm(formData)) {
-        const {onLoad, ...rest} = formData.yandex;
+        const {onLoad, ...rest} = getThemedValue(formData.yandex, theme);
 
         return (
             <div className={className}>
@@ -43,11 +46,13 @@ const InnerForm: React.FC<InnerFormProps> = (props) => {
     }
 
     if (isHubspotDataForm(formData)) {
+        const themedFormData = getThemedValue(formData.hubspot, theme);
+
         return (
             <HubspotForm
                 createDOMElement={true}
                 {...(formsConfig.hubspot as HubspotFormsContextProps | undefined)}
-                {...formData.hubspot}
+                {...themedFormData}
             />
         );
     }

diff --git 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<YandexFormProps>;
 }
 
 export interface FormBlockHubspotData {
-    hubspot: HubspotFormProps;
+    hubspot: ThemeSupporting<HubspotFormProps>;
 }
 
 export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
@@ -429,7 +429,7 @@ export interface FormBlockProps {
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    background?: BackgroundImageProps;
+    background?: ThemeSupporting<BackgroundImageProps>;
 }
 
 //block models