From d60ea07e656740d3e2992197bff30d9845d5f3f7 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 30 Jun 2022 15:52:20 +0530 Subject: [PATCH] The reset button on properties behaves incorrect for JSONForm fields and Table primary columns (#14768) Reset value in primary columns in table widget and fields in JSONFOrm was not working as expected. This commit fixes that. --- app/client/src/entities/AppTheming/utils.ts | 18 +- .../src/widgets/JSONFormWidget/helper.ts | 36 +++- .../widgets/JSONFormWidget/schemaParser.ts | 1 + .../widgets/JSONFormWidget/schemaTestData.ts | 195 ++++++++++++------ .../widget/propertyConfig/helper.test.ts | 9 +- .../widget/propertyConfig/helper.ts | 1 + .../src/widgets/TableWidget/widget/helpers.ts | 34 +++ .../TableWidget/widget/propertyConfig.ts | 6 +- 8 files changed, 210 insertions(+), 90 deletions(-) diff --git a/app/client/src/entities/AppTheming/utils.ts b/app/client/src/entities/AppTheming/utils.ts index 4b74173b06..aaeb426377 100644 --- a/app/client/src/entities/AppTheming/utils.ts +++ b/app/client/src/entities/AppTheming/utils.ts @@ -5,10 +5,7 @@ import { isDynamicValue, THEME_BINDING_REGEX, } from "utils/DynamicBindingUtils"; -import { - getBindingTemplate, - ROOT_SCHEMA_KEY, -} from "widgets/JSONFormWidget/constants"; +import { ROOT_SCHEMA_KEY } from "widgets/JSONFormWidget/constants"; import { parseSchemaItem } from "widgets/WidgetUtils"; import { getFieldStylesheet } from "widgets/JSONFormWidget/helper"; import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer"; @@ -107,28 +104,21 @@ export const getPropertiesToUpdateForReset = ( `schema.${ROOT_SCHEMA_KEY}`, (schemaItem, propertyPath) => { const fieldStylesheet = getFieldStylesheet( + widget.widgetName, schemaItem.fieldType, themeStylesheet[widget.type].childStylesheet as any, ); Object.keys(fieldStylesheet).map((fieldPropertyKey) => { const fieldStylesheetValue = fieldStylesheet[fieldPropertyKey]; - const { jsSnippets, stringSegments } = getDynamicBindings( - fieldStylesheet[fieldPropertyKey], - ); - const js = combineDynamicBindings(jsSnippets, stringSegments); - const { prefixTemplate, suffixTemplate } = getBindingTemplate( - widget.widgetName, - ); - const computedValue = `${prefixTemplate}${js}${suffixTemplate}`; if ( isDynamicValue(fieldStylesheetValue) && - computedValue !== get(schemaItem, fieldPropertyKey) + fieldStylesheetValue !== get(schemaItem, fieldPropertyKey) ) { modifications[ `${[propertyPath]}.${fieldPropertyKey}` - ] = computedValue; + ] = fieldStylesheetValue; } }); }, diff --git a/app/client/src/widgets/JSONFormWidget/helper.ts b/app/client/src/widgets/JSONFormWidget/helper.ts index c0bf82be35..b0d4ea8c9c 100644 --- a/app/client/src/widgets/JSONFormWidget/helper.ts +++ b/app/client/src/widgets/JSONFormWidget/helper.ts @@ -1,6 +1,11 @@ import { isNil, isPlainObject, merge } from "lodash"; import { LabelValueType } from "rc-select/lib/interface/generator"; +import { + isDynamicValue, + getDynamicBindings, + combineDynamicBindings, +} from "utils/DynamicBindingUtils"; import { ARRAY_ITEM_KEY, FieldThemeStylesheet, @@ -8,6 +13,7 @@ import { inverseFieldType, Schema, SchemaItem, + getBindingTemplate, } from "./constants"; type ConvertFormDataOptions = { @@ -42,13 +48,37 @@ const valueLookup = ( }; export const getFieldStylesheet = ( + widgetName: string, fieldType: FieldType, fieldThemeStylesheets?: FieldThemeStylesheet, ) => { + const computedFieldStylesheet: { [key: string]: string } = {}; const fieldTypeKey = inverseFieldType[fieldType]; - return fieldThemeStylesheets && fieldTypeKey in fieldThemeStylesheets - ? fieldThemeStylesheets[fieldTypeKey] - : {}; + + if (fieldThemeStylesheets && fieldTypeKey in fieldThemeStylesheets) { + const fieldStylesheet = fieldThemeStylesheets[fieldTypeKey]; + + Object.keys(fieldStylesheet).map((fieldPropertyKey) => { + const fieldStylesheetValue = fieldStylesheet[fieldPropertyKey]; + + if (isDynamicValue(fieldStylesheetValue)) { + const { jsSnippets, stringSegments } = getDynamicBindings( + fieldStylesheet[fieldPropertyKey], + ); + const js = combineDynamicBindings(jsSnippets, stringSegments); + const { prefixTemplate, suffixTemplate } = getBindingTemplate( + widgetName, + ); + const computedValue = `${prefixTemplate}${js}${suffixTemplate}`; + + computedFieldStylesheet[fieldPropertyKey] = computedValue; + } else { + computedFieldStylesheet[fieldPropertyKey] = fieldStylesheetValue; + } + }); + } + + return computedFieldStylesheet; }; const convertObjectTypeToFormData = ( diff --git a/app/client/src/widgets/JSONFormWidget/schemaParser.ts b/app/client/src/widgets/JSONFormWidget/schemaParser.ts index 55164564af..1865c33809 100644 --- a/app/client/src/widgets/JSONFormWidget/schemaParser.ts +++ b/app/client/src/widgets/JSONFormWidget/schemaParser.ts @@ -492,6 +492,7 @@ class SchemaParser { const FieldComponent = FIELD_MAP[fieldType]; const bindingTemplate = getBindingTemplate(widgetName); const fieldStylesheet = getFieldStylesheet( + widgetName, fieldType, fieldThemeStylesheets, ); diff --git a/app/client/src/widgets/JSONFormWidget/schemaTestData.ts b/app/client/src/widgets/JSONFormWidget/schemaTestData.ts index 372c369e7d..9a8e51786e 100644 --- a/app/client/src/widgets/JSONFormWidget/schemaTestData.ts +++ b/app/client/src/widgets/JSONFormWidget/schemaTestData.ts @@ -56,8 +56,10 @@ const initialDataset = { identifier: "name", originalIdentifier: "name", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, age: { @@ -79,8 +81,10 @@ const initialDataset = { identifier: "age", originalIdentifier: "age", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, dob: { @@ -107,8 +111,10 @@ const initialDataset = { identifier: "dob", originalIdentifier: "dob", position: 2, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, boolean: { @@ -129,7 +135,8 @@ const initialDataset = { identifier: "boolean", originalIdentifier: "boolean", position: 3, - backgroundColor: "{{appsmith.theme.colors.primaryColor}}", + backgroundColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, hobbies: { @@ -155,8 +162,10 @@ const initialDataset = { identifier: "hobbies", originalIdentifier: "hobbies", position: 4, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, __: { @@ -178,8 +187,10 @@ const initialDataset = { identifier: "__", originalIdentifier: "%%", position: 5, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, xn__j2bd4cyac6f: { @@ -201,8 +212,10 @@ const initialDataset = { identifier: "xn__j2bd4cyac6f", originalIdentifier: "हिन्दि", position: 6, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, education: { @@ -239,9 +252,10 @@ const initialDataset = { identifier: "college", originalIdentifier: "college", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, number: { @@ -262,9 +276,10 @@ const initialDataset = { identifier: "number", originalIdentifier: "number", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, graduationDate: { @@ -290,9 +305,10 @@ const initialDataset = { identifier: "graduationDate", originalIdentifier: "graduationDate", position: 2, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, boolean: { @@ -312,7 +328,8 @@ const initialDataset = { identifier: "boolean", originalIdentifier: "boolean", position: 3, - backgroundColor: "{{appsmith.theme.colors.primaryColor}}", + backgroundColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, @@ -376,8 +393,10 @@ const initialDataset = { identifier: "Line1", originalIdentifier: "Line1", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, city: { @@ -399,8 +418,10 @@ const initialDataset = { identifier: "city", originalIdentifier: "city", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, @@ -498,8 +519,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "name", originalIdentifier: "name", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, age: { @@ -521,8 +544,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "age", originalIdentifier: "age", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, dob: { @@ -549,8 +574,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "dob", originalIdentifier: "dob", position: 2, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, hobbies: { @@ -577,8 +604,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "hobbies", originalIdentifier: "hobbies", position: 4, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, xn__j2bd4cyac6f: { @@ -600,8 +629,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "xn__j2bd4cyac6f", originalIdentifier: "हिन्दि", position: 6, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, education: { @@ -638,9 +669,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "college", originalIdentifier: "college", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, number: { @@ -661,9 +693,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "number", originalIdentifier: "number", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, graduationDate: { @@ -689,9 +722,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "graduationDate", originalIdentifier: "graduationDate", position: 2, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, boolean: { @@ -711,7 +745,8 @@ const withRemovedKeyFromInitialDataset = { identifier: "boolean", originalIdentifier: "boolean", position: 3, - backgroundColor: "{{appsmith.theme.colors.primaryColor}}", + backgroundColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, @@ -775,8 +810,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "Line1", originalIdentifier: "Line1", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, city: { @@ -798,8 +835,10 @@ const withRemovedKeyFromInitialDataset = { identifier: "city", originalIdentifier: "city", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, @@ -896,8 +935,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "name", originalIdentifier: "name", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, age: { @@ -919,8 +960,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "age", originalIdentifier: "age", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, dob: { @@ -947,8 +990,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "dob", originalIdentifier: "dob", position: 2, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, hobbies: { @@ -975,8 +1020,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "hobbies", originalIdentifier: "hobbies", position: 3, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, xn__j2bd4cyac6f: { @@ -998,8 +1045,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "xn__j2bd4cyac6f", originalIdentifier: "हिन्दि", position: 4, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, education: { @@ -1036,9 +1085,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "college", originalIdentifier: "college", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, number: { @@ -1059,9 +1109,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "number", originalIdentifier: "number", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, graduationDate: { @@ -1087,9 +1138,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "graduationDate", originalIdentifier: "graduationDate", position: 2, - accentColor: "{{appsmith.theme.colors.primaryColor}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", borderRadius: - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, boolean: { @@ -1109,7 +1161,8 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "boolean", originalIdentifier: "boolean", position: 3, - backgroundColor: "{{appsmith.theme.colors.primaryColor}}", + backgroundColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, @@ -1173,8 +1226,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "Line1", originalIdentifier: "Line1", position: 0, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, city: { @@ -1196,8 +1251,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "city", originalIdentifier: "city", position: 1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, @@ -1231,8 +1288,10 @@ const withRemovedAddedKeyToInitialDataset = { identifier: "gender", originalIdentifier: "gender", position: 7, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", }, }, diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.test.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.test.ts index ce0d6200b3..4549724c87 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.test.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.test.ts @@ -55,8 +55,10 @@ describe(".fieldTypeUpdateHook", () => { originalIdentifier: ARRAY_ITEM_KEY, isSpellCheck: false, position: -1, - accentColor: "{{appsmith.theme.colors.primaryColor}}", - borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}", + accentColor: + "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", + borderRadius: + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}", boxShadow: "none", labelTextSize: "0.875rem", }, @@ -366,6 +368,7 @@ describe(".updateChildrenDisabledStateHook", () => { describe(".getStylesheetValue", () => { it("returns valid stylesheet value", () => { const props = ({ + widgetName: "Form1", schema: schemaTestData.initialDataset.schemaOutput, } as unknown) as JSONFormWidgetProps; @@ -374,7 +377,7 @@ describe(".getStylesheetValue", () => { ["schema.__root_schema__.children.education.isDisabled", ""], [ "schema.__root_schema__.children.name.borderRadius", - "{{appsmith.theme.borderRadius.appBorderRadius}}", + "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(Form1.sourceData, Form1.formData, Form1.fieldState)}}", ], ["schema", ""], ]; diff --git a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.ts b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.ts index e478b7f898..aebc8ce6db 100644 --- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.ts +++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.ts @@ -108,6 +108,7 @@ export const getStylesheetValue = ( return getSchemaItem(props, propertyPath).compute( (schemaItem, propertyName) => { const fieldStylesheet = getFieldStylesheet( + props.widgetName, schemaItem.fieldType, widgetStylesheet?.childStylesheet as FieldThemeStylesheet, ); diff --git a/app/client/src/widgets/TableWidget/widget/helpers.ts b/app/client/src/widgets/TableWidget/widget/helpers.ts index 885c8de940..180a70d12f 100644 --- a/app/client/src/widgets/TableWidget/widget/helpers.ts +++ b/app/client/src/widgets/TableWidget/widget/helpers.ts @@ -1,6 +1,10 @@ import { AppTheme } from "entities/AppTheming"; import { TableWidgetProps } from "../constants"; import { get } from "lodash"; +import { + combineDynamicBindings, + getDynamicBindings, +} from "utils/DynamicBindingUtils"; /** * this is a getter function to get stylesheet value of the property from the config @@ -21,3 +25,33 @@ export const getStylesheetValue = ( return get(widgetStylesheet, `childStylesheet.${columnType}.${propertyName}`); }; + +/** + * this is a getter function to get stylesheet value of the property from the config + * + * @param props + * @param propertyPath + * @param widgetStylesheet + * @returns + */ +export const getPrimaryColumnStylesheetValue = ( + props: TableWidgetProps, + propertyPath: string, + widgetStylesheet?: AppTheme["stylesheet"][string], +) => { + const propertyName = propertyPath.split(".").slice(-1)[0]; + const columnName = propertyPath.split(".").slice(-2)[0]; + const columnType = get(props, `primaryColumns.${columnName}.columnType`); + const themeStylesheetValue: any = get( + widgetStylesheet, + `childStylesheet.${columnType}.${propertyName}`, + ); + + const { jsSnippets, stringSegments } = getDynamicBindings( + themeStylesheetValue, + ); + + const js = combineDynamicBindings(jsSnippets, stringSegments); + + return `{{${props.widgetName}.sanitizedTableData.map((currentRow) => ( ${js}))}}`; +}; diff --git a/app/client/src/widgets/TableWidget/widget/propertyConfig.ts b/app/client/src/widgets/TableWidget/widget/propertyConfig.ts index 9677ddb894..5e0f74b977 100644 --- a/app/client/src/widgets/TableWidget/widget/propertyConfig.ts +++ b/app/client/src/widgets/TableWidget/widget/propertyConfig.ts @@ -23,7 +23,7 @@ import { TABLE_WIDGET_TOTAL_RECORD_TOOLTIP, } from "@appsmith/constants/messages"; import { IconNames } from "@blueprintjs/icons"; -import { getStylesheetValue } from "./helpers"; +import { getPrimaryColumnStylesheetValue } from "./helpers"; const ICON_NAMES = Object.keys(IconNames).map( (name: string) => IconNames[name as keyof typeof IconNames], @@ -904,7 +904,7 @@ export default [ }, { propertyName: "buttonColor", - getStylesheetValue, + getStylesheetValue: getPrimaryColumnStylesheetValue, label: "Button Color", controlType: "PRIMARY_COLUMNS_COLOR_PICKER", helpText: "Changes the color of the button", @@ -989,6 +989,7 @@ export default [ label: "Border Radius", customJSControl: "COMPUTE_VALUE", isJSConvertible: true, + getStylesheetValue: getPrimaryColumnStylesheetValue, helpText: "Rounds the corners of the icon button's outer border edge", controlType: "BORDER_RADIUS_OPTIONS", @@ -1052,6 +1053,7 @@ export default [ customJSControl: "COMPUTE_VALUE", isJSConvertible: true, isBindProperty: true, + getStylesheetValue: getPrimaryColumnStylesheetValue, isTriggerProperty: false, placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)", validation: {