Skip to content

chore: add code for paragraph-text morphing #36065

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsartisan merged 8 commits into from
Sep 6, 2024
Merged

chore: add code for paragraph-text morphing #36065

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
260bfc9
add code for paragraph-text morphing
Sep 3, 2024
572f5ae
remove cyclic import
Sep 3, 2024
67e8211
incorporate feedback
Sep 3, 2024
68ce8f2
fix hydration of font style in paragraph widget
Sep 3, 2024
1b1d2ab
fix hydration of font style in paragraph widget
Sep 3, 2024
e1b3c9f
update types
Sep 4, 2024
c8be2f8
add unit test for the hook
Sep 4, 2024
395574a
add unit test for the isReadOnlyUpdateHook
Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/client/src/widgets/wds/WDSBaseInputWidget/config/contentConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ValidationTypes } from "constants/WidgetValidation";

import { isReadOnlyUpdateHook } from "../helpers";
import type { BaseInputWidgetProps } from "../widget/types";

export const propertyPaneContentConfig = [
Expand Down Expand Up @@ -121,6 +122,8 @@ export const propertyPaneContentConfig = [
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
dependencies: ["type", "inputType"],
updateHook: isReadOnlyUpdateHook,
validation: { type: ValidationTypes.BOOLEAN },
},
{
Expand Down
40 changes: 40 additions & 0 deletions app/client/src/widgets/wds/WDSBaseInputWidget/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import type { WidgetProps } from "widgets/BaseWidget";
import type { PropertyUpdates } from "WidgetProvider/constants";
import type { InputType } from "../WDSInputWidget/component/types";
import { INPUT_TYPE_TO_WIDGET_TYPE_MAP } from "../WDSInputWidget/constants";

export function isReadOnlyUpdateHook(
Comment thread
jsartisan marked this conversation as resolved.
props: WidgetProps,
propertyName: string,
propertyValue: boolean,
) {
const updates: PropertyUpdates[] = [
{
propertyPath: propertyName,
propertyValue: propertyValue,
},
];

// if user is marking readOnly as true and if the input type is not INPUT_CURRENCY_WIDGET or INPUT_PHONE_WIDGET,
// then we need to update the type to WDS_KEY_VALUE_WIDGET
if (
!["WDS_CURRENCY_INPUT_WIDGET", "WDS_PHONE_INPUT_WIDGET"].includes(
props.type,
)
) {
if (propertyValue) {
updates.push({
propertyPath: "type",
propertyValue: "WDS_KEY_VALUE_WIDGET",
});
} else {
updates.push({
propertyPath: "type",
propertyValue:
INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType],
});
}
}
Comment on lines +20 to +32

@coderabbitai coderabbitai Bot Sep 3, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simplify the logic by using a ternary operator.

The if-else block can be simplified by using a ternary operator. This will make the code more concise and readable.

Apply this diff to simplify the logic:

-  if (propertyValue) {
-    updates.push({
-      propertyPath: "type",
-      propertyValue: "WDS_KEY_VALUE_WIDGET",
-    });
-  } else {
-    updates.push({
-      propertyPath: "type",
-      propertyValue:
-        INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType],
-    });
-  }
+  updates.push({
+    propertyPath: "type",
+    propertyValue: propertyValue
+      ? "WDS_KEY_VALUE_WIDGET"
+      : INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType],
+  });
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (
!["WDS_CURRENCY_INPUT_WIDGET", "WDS_PHONE_INPUT_WIDGET"].includes(
props.type,
)
) {
if (propertyValue) {
updates.push({
propertyPath: "type",
propertyValue: "WDS_KEY_VALUE_WIDGET",
});
} else {
updates.push({
propertyPath: "type",
propertyValue:
INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType],
});
}
}
if (
!["WDS_CURRENCY_INPUT_WIDGET", "WDS_PHONE_INPUT_WIDGET"].includes(
props.type,
)
) {
updates.push({
propertyPath: "type",
propertyValue: propertyValue
? "WDS_KEY_VALUE_WIDGET"
: INPUT_TYPE_TO_WIDGET_TYPE_MAP[props.inputType as InputType],
});
}


return updates;
}
3 changes: 3 additions & 0 deletions app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { TYPOGRAPHY_VARIANTS } from "@appsmith/wds-theming";
import { ValidationTypes } from "constants/WidgetValidation";

import { fontSizeUpdateHook } from "../../helpers";

export const propertyPaneStyleConfig = [
{
sectionName: "General",
Expand Down Expand Up @@ -33,6 +35,7 @@ export const propertyPaneStyleConfig = [
isBindProperty: true,
isTriggerProperty: false,
isReusable: true,

@jsartisan jsartisan Sep 3, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isReusable is not required for fontSize as discussed with taras.

updateHook: fontSizeUpdateHook,
validation: {
type: ValidationTypes.TEXT,
params: {
Expand Down
6 changes: 6 additions & 0 deletions app/client/src/widgets/wds/WDSParagraphWidget/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const FONT_SIZE_TO_WIDGET_TYPE_MAP = {
body: "WDS_PARAGRAPH_WIDGET",
subtitle: "WDS_PARAGRAPH_WIDGET",
title: "WDS_PARAGRAPH_WIDGET",
heading: "WDS_HEADING_WIDGET",
};
Comment thread
jsartisan marked this conversation as resolved.
Outdated
27 changes: 27 additions & 0 deletions app/client/src/widgets/wds/WDSParagraphWidget/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { PropertyUpdates } from "WidgetProvider/constants";
import type { WidgetProps } from "widgets/BaseWidget";

import { FONT_SIZE_TO_WIDGET_TYPE_MAP } from "./constants";

export function fontSizeUpdateHook(
props: WidgetProps,
propertyName: string,
propertyValue: string,
) {
const updates: PropertyUpdates[] = [
{
propertyPath: propertyName,
propertyValue: propertyValue,
},
];

updates.push({
propertyPath: "type",
propertyValue:
FONT_SIZE_TO_WIDGET_TYPE_MAP[
propertyValue as keyof typeof FONT_SIZE_TO_WIDGET_TYPE_MAP
Comment thread
jsartisan marked this conversation as resolved.
Outdated
],
});

return updates;
}