Merge pull request #1 from JelteMX/feature/string_manipulation

Feature/string manipulation

Author: JelteMX

.gitignore

@@ -1,3 +1,5 @@
 dist/
 node_modules/
 *.log
+.env
+.vscode

README.md

@@ -1,9 +1,11 @@
+[![Apache License](https://img.shields.io/badge/license-Apache%202.0-orange.svg?style=flat-square)](http://www.apache.org/licenses/LICENSE-2.0)
 [![Dependencies](https://david-dm.org/JelteMX/mendix-attribute-helper-widget.svg)]([https://david-dm.org/JelteMX/mendix-attribute-helper-widget](https://david-dm.org/JelteMX/mendix-attribute-helper-widget))
 [![DevDependencies](https://david-dm.org/JelteMX/mendix-attribute-helper-widget/dev-status.svg)]([https://david-dm.org/JelteMX/mendix-attribute-helper-widget?type=dev](https://david-dm.org/JelteMX/mendix-attribute-helper-widget?type=dev))
 [![Support](https://img.shields.io/badge/Support-Community%20(no%20active%20support)-orange.svg)](https://docs.mendix.com/developerportal/app-store/app-store-content-support)
 [![Studio](https://img.shields.io/badge/Studio%20version-8.0%2B-blue.svg)](https://appstore.home.mendix.com/link/modeler/)
-![GitHub release](https://img.shields.io/github/release/JelteMX/mendix-attribute-helper-widget)
-![GitHub issues](https://img.shields.io/github/issues/JelteMX/mendix-attribute-helper-widget)
+[![GitHub release](https://img.shields.io/github/release/JelteMX/mendix-attribute-helper-widget)](https://github.com/JelteMX/mendix-attribute-helper-widget/releases/latest)
+[![GitHub issues](https://img.shields.io/github/issues/JelteMX/mendix-attribute-helper-widget)](https://github.com/JelteMX/mendix-attribute-helper-widget/issues)
+[![DeepScan grade](https://deepscan.io/api/teams/7221/projects/9848/branches/130760/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=7221&pid=9848&bid=130760)
 
 # Attribute Helper Widget
 
@@ -21,6 +23,7 @@ A widget that sets attributes on elements, based on your attribute values in you
     - Select a (custom) HTML-attribute like `data-custom-attribute`
     - Select a text-value for this attribute, where you can use attribute values from you context object. For example `{1}`, where the first argument will be the String value `Name` in your Mendix object
     - The widget will set the following attribute on the selected element(s): `data-custom-attribute="Value"`. This can then be used in styling your application.
+    - You can manipulate the value before you set it: Remove spaces, make it Uppercase/Lowercase
 
 ## Alternatives
 

assets/settings3.png

@@ -1,17 +1,14 @@
 {
   "name": "attributehelper",
   "widgetName": "AttributeHelper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Set attributes on elements based on your context",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk <[email protected]>",
   "config": {
-    "widgetPath": "/Volumes/[C] Windows 10.hidden/Projects/MendixProjects/AttributeHelperWidget-main/widgets",
-    "projectPath": "/Volumes/[C] Windows 10.hidden/Projects/MendixProjects/AttributeHelperWidget-main/",
-    "mendixHost": "http://10.211.55.3:8080",
-    "_widgetPath": "./dist/MxTestProject/widgets",
-    "_projectPath": "./dist/MxTestProject/",
-    "_mendixHost": "http://localhost:8080",
+    "widgetPath": "./dist/MxTestProject/widgets",
+    "projectPath": "./dist/MxTestProject/",
+    "mendixHost": "http://windows:8080",
     "developmentPort": "3000"
   },
   "packagePath": "mendix",
@@ -26,7 +23,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@mendix/pluggable-widgets-tools": "^8.2.0",
+    "@mendix/pluggable-widgets-tools": "^8.6.0",
     "@types/big.js": "^4.0.5",
     "@types/classnames": "^2.2.4",
     "@types/jest": "^24.0.0",

assets/settings4.png

@@ -45,7 +45,9 @@ class AttributeHelper extends Component<AttributeHelperContainerProps> {
                 transformSiblingFilter,
                 transformTextTemplate,
                 transformSiblingSubFilter,
-                transformParentsSelector
+                transformParentsSelector,
+                transformRemoveSpaces,
+                transformTextTransform
             } = transformation;
             if (transformTextTemplate.status !== "available") {
                 return;
@@ -54,17 +56,30 @@ class AttributeHelper extends Component<AttributeHelperContainerProps> {
                 console.warn(`Widget tries to change ${transformAttribute} attribute, this is prohibited`);
                 return;
             }
+
+            let value = transformTextTemplate.value;
+
+            if (transformRemoveSpaces) {
+                value = value.replace(/\s/g, "");
+            }
+
+            if (transformTextTransform === "lowercase") {
+                value = value.toLowerCase();
+            } else if (transformTextTransform === "uppercase") {
+                value = value.toUpperCase();
+            }
+
             if ((transformElement === "general" && selectorSelection === "parent") || transformElement === "parent") {
                 const selector = transformElement === "general" ? selectorParentsSelector : transformParentsSelector;
-                this.handleParent($el, transformAttribute, transformTextTemplate.value, selector);
+                this.handleParent($el, transformAttribute, value, selector);
             } else if (
                 (transformElement === "general" && selectorSelection === "sibling") ||
                 transformElement === "sibling"
             ) {
                 this.handleSiblings(
                     $el,
                     transformAttribute,
-                    transformTextTemplate.value,
+                    value,
                     transformElement === "general" ? selectorSiblingFilter : transformSiblingFilter,
                     transformElement === "general" ? selectorSiblingSubFilter : transformSiblingSubFilter
                 );

package-lock.json

@@ -23,6 +23,21 @@
                         <category>Data</category>
                         <description>Template for the value. In this you can use a text-template where you have access to values of attributes in the context object.</description>
                     </property>
+                    <property key="transformRemoveSpaces" type="boolean" defaultValue="false">
+                        <caption>Remove spaces</caption>
+                        <category>Data</category>
+                        <description>Remove any spaces from the value.</description>
+                    </property>
+                    <property key="transformTextTransform" type="enumeration" defaultValue="none">
+                        <caption>Transform</caption>
+                        <category>Data</category>
+                        <description>Text transformation can be used when you need to make the text Uppercase/Lowercase</description>
+                        <enumerationValues>
+                             <enumerationValue key="none">None</enumerationValue>
+                             <enumerationValue key="uppercase">Uppercase</enumerationValue>
+                             <enumerationValue key="lowercase">Lowercase</enumerationValue>
+                        </enumerationValues>
+                    </property>
                     <!-- Elements -->
                     <property key="transformElement" type="enumeration" defaultValue="general">
                         <caption>Element</caption>

package.json

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="AttributeHelper" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="AttributeHelper" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="AttributeHelper.xml"/>
         </widgetFiles>

src/AttributeHelper.tsx

@@ -14,11 +14,15 @@ interface CommonProps {
     tabIndex: number;
 }
 
+export type TransformTextTransformEnum = "none" | "uppercase" | "lowercase";
+
 export type TransformElementEnum = "general" | "parent" | "sibling";
 
 export interface TransformationsType {
     transformAttribute: string;
     transformTextTemplate: DynamicValue<string>;
+    transformRemoveSpaces: boolean;
+    transformTextTransform: TransformTextTransformEnum;
     transformElement: TransformElementEnum;
     transformSiblingFilter?: string;
     transformSiblingSubFilter?: string;
@@ -30,6 +34,8 @@ export type SelectorSelectionEnum = "parent" | "sibling";
 export interface TransformationsPreviewType {
     transformAttribute: string;
     transformTextTemplate: string;
+    transformRemoveSpaces: boolean;
+    transformTextTransform: TransformTextTransformEnum;
     transformElement: TransformElementEnum;
     transformSiblingFilter?: string;
     transformSiblingSubFilter?: string;
@@ -39,6 +45,8 @@ export interface TransformationsPreviewType {
 export interface TransformationsVisibilityType {
     transformAttribute: boolean;
     transformTextTemplate: boolean;
+    transformRemoveSpaces: boolean;
+    transformTextTransform: boolean;
     transformElement: boolean;
     transformSiblingFilter: boolean;
     transformSiblingSubFilter: boolean;
@@ -53,7 +61,10 @@ export interface AttributeHelperContainerProps extends CommonProps {
     selectorParentsSelector?: string;
 }
 
-export interface AttributeHelperPreviewProps extends CommonProps {
+export interface AttributeHelperPreviewProps {
+    class: string;
+    style: string;
+    styleObject: CSSProperties;
     transformations: TransformationsPreviewType[];
     selectorSelection: SelectorSelectionEnum;
     selectorSiblingFilter?: string;