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

Fixed Bindings Working inside action selectors (#1484)

Browse Source 
* added functions to convert string to JS and JS to string while manipulating property pane values
refactored getters and setters to reuse functions instead of creating multiple functions

* minor fixes

* optimized the js conversion function and fixed an edge case

* minor fix for type setters

* abstracted enum getter

* dummy commit
This commit is contained in:
Nikhil Nandagopal 2020-10-30 18:05:21 +05:30 committed by GitHub
parent 0508bbd115
commit 5c26ef5d07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 85 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -83,7 +83,7 @@ The Appsmith platform is available under the [Apache License 2.0](https://www.ap
## 🧑‍🤝‍🧑 Contributors ## 🧑‍🤝‍🧑 Contributors
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove / modify this section -->
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
<!-- markdownlint-disable --> <!-- markdownlint-disable -->
<table> <table>

234
app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
View File

@ -18,7 +18,7 @@ import { KeyValueComponent } from "components/propertyControls/KeyValueComponent
import { InputText } from "components/propertyControls/InputTextControl"; import { InputText } from "components/propertyControls/InputTextControl";
import { createModalAction } from "actions/widgetActions"; import { createModalAction } from "actions/widgetActions";
import { createNewApiName, createNewQueryName } from "utils/AppsmithUtils"; import { createNewApiName, createNewQueryName } from "utils/AppsmithUtils";
import { isDynamicValue } from "utils/DynamicBindingUtils"; import { getDynamicBindings, isDynamicValue } from "utils/DynamicBindingUtils";
import HightlightedCode from "components/editorComponents/HighlightedCode"; import HightlightedCode from "components/editorComponents/HighlightedCode";
import TreeStructure from "components/utils/TreeStructure"; import TreeStructure from "components/utils/TreeStructure";
import { import {
@ -78,23 +78,40 @@ export const modalGetter = (value: string) => {
return name; return name;
}; };
// const urlSetter = (changeValue: any, currentValue: string): string => { const stringToJS = (string: string): string => {
// return currentValue.replace(ACTION_TRIGGER_REGEX, `{{$1('${changeValue}')}}`); const { stringSegments, jsSnippets } = getDynamicBindings(string);
// }; const js = stringSegments
.map((segment, index) => {
if (jsSnippets[index] && jsSnippets[index].length > 0) {
return jsSnippets[index];
} else {
return `'${segment}'`;
}
})
.join(" + ");
return js;
};
// export const textGetter = (value: string) => { const JSToString = (js: string): string => {
// const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)]; const segments = js.split(" + ");
// if (matches.length) { return segments
// const stringValue = matches[0][2]; .map(segment => {
// return stringValue.substring(1, stringValue.length - 1); if (segment.charAt(0) === "'") {
// } return segment.substring(1, segment.length - 1);
// return ""; } else return "{{" + segment + "}}";
// }; })
.join("");
};
const alertTextSetter = (changeValue: any, currentValue: string): string => { const textSetter = (
changeValue: any,
currentValue: string,
argNum: number,
): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)]; const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(","); const args = matches[0][2].split(",");
args[0] = `'${changeValue}'`; const jsVal = stringToJS(changeValue);
args[argNum] = jsVal;
const result = currentValue.replace( const result = currentValue.replace(
ACTION_TRIGGER_REGEX, ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`, `{{$1(${args.join(",")})}}`,
@ -102,40 +119,25 @@ const alertTextSetter = (changeValue: any, currentValue: string): string => {
return result; return result;
}; };
const alertTextGetter = (value: string) => { const textGetter = (value: string, argNum: number) => {
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)]; const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
if (matches.length) { if (matches.length) {
const funcArgs = matches[0][2]; const funcArgs = matches[0][2];
const arg = funcArgs.split(",")[0]; const arg = funcArgs.split(",")[argNum];
return arg.substring(1, arg.length - 1); const stringFromJS = arg ? JSToString(arg.trim()) : arg;
return stringFromJS;
} }
return ""; return "";
}; };
const alertTypeSetter = (changeValue: any, currentValue: string): string => { const enumTypeSetter = (
changeValue: any,
currentValue: string,
argNum: number,
): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)]; const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(","); const args = matches[0][2].split(",");
args[1] = changeValue as string; args[argNum] = changeValue as string;
return currentValue.replace(
ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`,
);
};
const alertTypeGetter = (value: string) => {
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
if (matches.length) {
const funcArgs = matches[0][2];
const arg = funcArgs.split(",")[1];
return arg ? arg.trim() : "'primary'";
}
return "";
};
const storeKeyTextSetter = (changeValue: any, currentValue: string): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(",");
args[0] = `'${changeValue}'`;
const result = currentValue.replace( const result = currentValue.replace(
ACTION_TRIGGER_REGEX, ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`, `{{$1(${args.join(",")})}}`,
@ -143,104 +145,18 @@ const storeKeyTextSetter = (changeValue: any, currentValue: string): string => {
return result; return result;
}; };
const storeKeyTextGetter = (value: string) => { const enumTypeGetter = (
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)]; value: string,
if (matches.length) { argNum: number,
const funcArgs = matches[0][2]; defaultValue = "",
const arg = funcArgs.split(",")[0];
return arg.substring(1, arg.length - 1);
}
return "";
};
const storeValueTextSetter = (
changeValue: any,
currentValue: string,
): string => { ): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(",");
args[1] = `'${changeValue}'`;
return currentValue.replace(
ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`,
);
};
const storeValueTextGetter = (value: string) => {
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)]; const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
if (matches.length) { if (matches.length) {
const funcArgs = matches[0][2]; const funcArgs = matches[0][2];
const arg = funcArgs.split(",")[1]; const arg = funcArgs.split(",")[argNum];
return arg ? arg.substring(1, arg.length - 1) : ""; return arg ? arg.trim() : defaultValue;
} }
return ""; return defaultValue;
};
const downloadDataSetter = (changeValue: any, currentValue: string): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(",");
args[0] = `'${changeValue}'`;
const result = currentValue.replace(
ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`,
);
return result;
};
const downloadDataGetter = (value: string) => {
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
if (matches.length) {
const funcArgs = matches[0][2];
const arg = funcArgs.split(",")[0];
return arg.substring(1, arg.length - 1);
}
return "";
};
const downloadFileNameSetter = (
changeValue: any,
currentValue: string,
): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(",");
args[1] = `'${changeValue}'`;
return currentValue.replace(
ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`,
);
};
const downloadFileNameGetter = (value: string) => {
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
if (matches.length) {
const funcArgs = matches[0][2];
const arg = funcArgs.split(",")[1];
return arg ? arg.substring(1, arg.length - 1) : "";
}
return "";
};
const downloadFileTypeSetter = (
changeValue: any,
currentValue: string,
): string => {
const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
const args = matches[0][2].split(",");
args[2] = changeValue as string;
return currentValue.replace(
ACTION_TRIGGER_REGEX,
`{{$1(${args.join(",")})}}`,
);
};
const downloadFileTypeGetter = (value: string) => {
const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
if (matches.length) {
const funcArgs = matches[0][2];
const arg = funcArgs.split(",")[2];
return arg ? arg.trim() : "";
}
return "";
}; };
type ActionCreatorProps = { type ActionCreatorProps = {
@ -436,10 +352,10 @@ const fieldConfigs: FieldConfigs = {
}, },
[FieldType.PAGE_SELECTOR_FIELD]: { [FieldType.PAGE_SELECTOR_FIELD]: {
getter: (value: any) => { getter: (value: any) => {
return modalGetter(value); return textGetter(value, 0);
}, },
setter: (option: any, currentValue: string) => { setter: (option: any, currentValue: string) => {
return modalSetter(option.value, currentValue); return textSetter(option, currentValue, 0);
}, },
view: ViewTypes.SELECTOR_VIEW, view: ViewTypes.SELECTOR_VIEW,
}, },
@ -454,55 +370,73 @@ const fieldConfigs: FieldConfigs = {
}, },
[FieldType.URL_FIELD]: { [FieldType.URL_FIELD]: {
getter: (value: string) => { getter: (value: string) => {
return modalGetter(value); return textGetter(value, 0);
}, },
setter: (value: string, currentValue: string) => { setter: (value: string, currentValue: string) => {
return modalSetter(value, currentValue); return textSetter(value, currentValue, 0);
}, },
view: ViewTypes.TEXT_VIEW, view: ViewTypes.TEXT_VIEW,
}, },
[FieldType.ALERT_TEXT_FIELD]: { [FieldType.ALERT_TEXT_FIELD]: {
getter: (value: string) => { getter: (value: string) => {
return alertTextGetter(value); return textGetter(value, 0);
}, },
setter: (value: string, currentValue: string) => { setter: (value: string, currentValue: string) => {
return alertTextSetter(value, currentValue); return textSetter(value, currentValue, 0);
}, },
view: ViewTypes.TEXT_VIEW, view: ViewTypes.TEXT_VIEW,
}, },
[FieldType.ALERT_TYPE_SELECTOR_FIELD]: { [FieldType.ALERT_TYPE_SELECTOR_FIELD]: {
getter: (value: any) => { getter: (value: any) => {
return alertTypeGetter(value); return enumTypeGetter(value, 1, "success");
}, },
setter: (option: any, currentValue: string) => { setter: (option: any, currentValue: string) => {
return alertTypeSetter(option.value, currentValue); return enumTypeSetter(option.value, currentValue, 1);
}, },
view: ViewTypes.SELECTOR_VIEW, view: ViewTypes.SELECTOR_VIEW,
}, },
[FieldType.KEY_TEXT_FIELD]: { [FieldType.KEY_TEXT_FIELD]: {
getter: storeKeyTextGetter, getter: (value: any) => {
setter: storeKeyTextSetter, return textGetter(value, 0);
},
setter: (option: any, currentValue: string) => {
return textSetter(option, currentValue, 0);
},
view: ViewTypes.TEXT_VIEW, view: ViewTypes.TEXT_VIEW,
}, },
[FieldType.VALUE_TEXT_FIELD]: { [FieldType.VALUE_TEXT_FIELD]: {
getter: storeValueTextGetter, getter: (value: any) => {
setter: storeValueTextSetter, return textGetter(value, 1);
},
setter: (option: any, currentValue: string) => {
return textSetter(option, currentValue, 1);
},
view: ViewTypes.TEXT_VIEW, view: ViewTypes.TEXT_VIEW,
}, },
[FieldType.DOWNLOAD_DATA_FIELD]: { [FieldType.DOWNLOAD_DATA_FIELD]: {
getter: downloadDataGetter, getter: (value: any) => {
setter: downloadDataSetter, return textGetter(value, 0);
},
setter: (option: any, currentValue: string) => {
return textSetter(option, currentValue, 0);
},
view: ViewTypes.TEXT_VIEW, view: ViewTypes.TEXT_VIEW,
}, },
[FieldType.DOWNLOAD_FILE_NAME_FIELD]: { [FieldType.DOWNLOAD_FILE_NAME_FIELD]: {
getter: downloadFileNameGetter, getter: (value: any) => {
setter: downloadFileNameSetter, return textGetter(value, 1);
},
setter: (option: any, currentValue: string) => {
return textSetter(option, currentValue, 1);
},
view: ViewTypes.TEXT_VIEW, view: ViewTypes.TEXT_VIEW,
}, },
[FieldType.DOWNLOAD_FILE_TYPE_FIELD]: { [FieldType.DOWNLOAD_FILE_TYPE_FIELD]: {
getter: downloadFileTypeGetter, getter: (value: any) => {
return enumTypeGetter(value, 2);
},
setter: (option: any, currentValue: string) => setter: (option: any, currentValue: string) =>
downloadFileTypeSetter(option.value, currentValue), enumTypeSetter(option.value, currentValue, 2),
view: ViewTypes.SELECTOR_VIEW, view: ViewTypes.SELECTOR_VIEW,
}, },
}; };