Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Unable to toggle JS button for table column (#14843)

Browse Source
This commit is contained in:
Aswath K 2022-06-28 17:53:03 +05:30 committed by GitHub
parent 1509d4b0ab
commit 2393790170
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/src/components/propertyControls/BaseControl.tsx
View File

@ -30,6 +30,12 @@ class BaseControl<P extends ControlProps, S = {}> extends Component<P, S> {
static canDisplayValueInUI(config: ControlData, value: any): boolean {
return false;
}
// Only applicable for JSONFormComputeControl & ComputeTablePropertyControl
// eslint-disable-next-line @typescript-eslint/no-unused-vars
static getInputComputedValue(value: string, widgetName: string): string {
return "";
}
}
export interface ControlBuilder<T extends ControlProps> {

7
app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
View File

@ -95,7 +95,10 @@ class ComputeTablePropertyControl extends BaseControl<
const tableId = this.props.widgetProperties.widgetName;
const value =
propertyValue && isDynamicValue(propertyValue)
? this.getInputComputedValue(propertyValue, tableId)
? ComputeTablePropertyControl.getInputComputedValue(
propertyValue,
tableId,
)
: propertyValue
? propertyValue
: defaultValue;
@ -126,7 +129,7 @@ class ComputeTablePropertyControl extends BaseControl<
);
}
getInputComputedValue = (propertyValue: string, tableId: string) => {
static getInputComputedValue = (propertyValue: string, tableId: string) => {
const value = `${propertyValue.substring(
`{{${tableId}.sanitizedTableData.map((currentRow) => ( `.length,
propertyValue.length - 4,

12
app/client/src/components/propertyControls/JSONFormComputeControl.tsx
View File

@ -178,8 +178,10 @@ export const JSToString = (js: string): string => {
};
class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
getInputComputedValue = (propertyValue: string) => {
const { widgetName } = this.props.widgetProperties;
static getInputComputedValue = (
propertyValue: string,
widgetName: string,
) => {
const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);
const value = propertyValue.substring(
@ -236,7 +238,11 @@ class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
const value = (() => {
if (propertyValue && isDynamicValue(propertyValue)) {
return this.getInputComputedValue(propertyValue);
const { widgetName } = this.props.widgetProperties;
return JSONFormComputeControl.getInputComputedValue(
propertyValue,
widgetName,
);
}
return propertyValue || defaultValue;

43
app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
View File

@ -480,22 +480,39 @@ const PropertyControl = memo((props: Props) => {
config.controlType,
);
const customJSControl = getCustomJSControl();
let isToggleDisabled = false;
if (
isDynamic && // JS mode is enabled
propertyValue !== "" && // value is not empty
!canDisplayValueInUI?.(config, propertyValue) // value can't be represented in UI mode
isDynamic // JS toggle button is ON
) {
isToggleDisabled = true;
}
if (
// Check if value is not empty
propertyValue !== undefined &&
propertyValue !== ""
) {
let value = propertyValue;
// extract out the value from binding, if there is custom JS control (Table & JSONForm widget)
if (customJSControl && isDynamicValue(value)) {
const extractValue = PropertyControlFactory.inputComputedValueMap.get(
customJSControl,
);
if (extractValue)
value = extractValue(value, widgetProperties.widgetName);
}
// Checks if the value is same as the one defined in theme stylesheet.
if (
typeof propertyStylesheetValue === "string" &&
THEME_BINDING_REGEX.test(propertyStylesheetValue) &&
propertyStylesheetValue === propertyValue
) {
isToggleDisabled = false;
// disable button if value can't be represented in UI mode
if (!canDisplayValueInUI?.(config, value)) isToggleDisabled = true;
}
// Enable button if the value is same as the one defined in theme stylesheet.
if (
typeof propertyStylesheetValue === "string" &&
THEME_BINDING_REGEX.test(propertyStylesheetValue) &&
propertyStylesheetValue === propertyValue
) {
isToggleDisabled = false;
}
}
try {
@ -571,7 +588,7 @@ const PropertyControl = memo((props: Props) => {
theme: props.theme,
},
isDynamic,
getCustomJSControl(),
customJSControl,
additionAutocomplete,
hideEvaluatedValue(),
)}

6
app/client/src/utils/PropertyControlFactory.tsx
View File

@ -12,14 +12,20 @@ class PropertyControlFactory {
ControlType,
typeof BaseControl.canDisplayValueInUI
> = new Map();
static inputComputedValueMap: Map<
ControlType,
typeof BaseControl.getInputComputedValue
> = new Map();
static registerControlBuilder(
controlType: ControlType,
controlBuilder: ControlBuilder<ControlProps>,
validationFn: typeof BaseControl.canDisplayValueInUI,
inputComputedValueFn: typeof BaseControl.getInputComputedValue,
) {
this.controlMap.set(controlType, controlBuilder);
this.controlUIToggleValidation.set(controlType, validationFn);
this.inputComputedValueMap.set(controlType, inputComputedValueFn);
}
static createControl(

1
app/client/src/utils/PropertyControlRegistry.tsx
View File

@ -20,6 +20,7 @@ class PropertyControlRegistry {
},
},
Control.canDisplayValueInUI,
Control.getInputComputedValue,
);
},
);