From 1c0001dee55709e5135b277068e031cadf3a80eb Mon Sep 17 00:00:00 2001 From: saiprabhu-dandanayak Date: Fri, 30 Aug 2024 10:20:53 +0530 Subject: [PATCH 1/6] fix:icon align when datatype is of image --- app/client/src/widgets/BaseInputWidget/component/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index 8847bd2e59b6..ad35d1b1d646 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -523,6 +523,12 @@ class BaseInputComponent extends React.Component< const locale = this.props.shouldUseLocale ? getLocale() : undefined; const leftIcon = this.getLeftIcon(); const conditionalProps: Record = {}; + const ICON_ALIGN_RIGHT = 'right'; + const rightElement = ( + this.props.iconAlign === ICON_ALIGN_RIGHT && this.props.iconName + ? + : undefined + ); if (!isNil(this.props.maxNum)) { conditionalProps.max = this.props.maxNum; @@ -558,6 +564,7 @@ class BaseInputComponent extends React.Component< onKeyUp={this.onKeyUp} onValueChange={this.onNumberChange} placeholder={this.props.placeholder} + rightElement={rightElement} stepSize={this.props.stepSize} value={this.props.value} {...conditionalProps} From 4022d4d98021902b9170260a7961873f65b400d5 Mon Sep 17 00:00:00 2001 From: saiprabhu-dandanayak Date: Mon, 23 Sep 2024 12:04:36 +0530 Subject: [PATCH 2/6] fix:linting errors --- .../src/widgets/BaseInputWidget/component/index.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index ad35d1b1d646..3835b5a00494 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -523,12 +523,11 @@ class BaseInputComponent extends React.Component< const locale = this.props.shouldUseLocale ? getLocale() : undefined; const leftIcon = this.getLeftIcon(); const conditionalProps: Record = {}; - const ICON_ALIGN_RIGHT = 'right'; - const rightElement = ( - this.props.iconAlign === ICON_ALIGN_RIGHT && this.props.iconName - ? - : undefined - ); + const ICON_ALIGN_RIGHT = "right"; + const rightElement = + this.props.iconAlign === ICON_ALIGN_RIGHT && this.props.iconName ? ( + + ) : undefined; if (!isNil(this.props.maxNum)) { conditionalProps.max = this.props.maxNum; From 4dbd69bfa4b6e752675cb4268fce2ce65c12c8e4 Mon Sep 17 00:00:00 2001 From: saiprabhu-dandanayak Date: Mon, 23 Sep 2024 12:50:04 +0530 Subject: [PATCH 3/6] fix:removed explict rightElement variable --- .../src/widgets/BaseInputWidget/component/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index 3835b5a00494..3f6c4f70770d 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -523,12 +523,6 @@ class BaseInputComponent extends React.Component< const locale = this.props.shouldUseLocale ? getLocale() : undefined; const leftIcon = this.getLeftIcon(); const conditionalProps: Record = {}; - const ICON_ALIGN_RIGHT = "right"; - const rightElement = - this.props.iconAlign === ICON_ALIGN_RIGHT && this.props.iconName ? ( - - ) : undefined; - if (!isNil(this.props.maxNum)) { conditionalProps.max = this.props.maxNum; } @@ -563,7 +557,7 @@ class BaseInputComponent extends React.Component< onKeyUp={this.onKeyUp} onValueChange={this.onNumberChange} placeholder={this.props.placeholder} - rightElement={rightElement} + rightElement={this.getRightIcon()} stepSize={this.props.stepSize} value={this.props.value} {...conditionalProps} From caa89b18cfc0e517951702e75efa82018f39ba45 Mon Sep 17 00:00:00 2001 From: saiprabhu-dandanayak Date: Tue, 24 Sep 2024 14:26:39 +0530 Subject: [PATCH 4/6] feat : added unit testcases --- .../BaseInputWidget/component/index.test.tsx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 app/client/src/widgets/BaseInputWidget/component/index.test.tsx diff --git a/app/client/src/widgets/BaseInputWidget/component/index.test.tsx b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx new file mode 100644 index 000000000000..22e1ed359119 --- /dev/null +++ b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import "@testing-library/jest-dom/extend-expect"; +import BaseInputComponent, { type BaseInputComponentProps } from "./index"; +import { ThemeProvider } from "styled-components"; +import { lightTheme } from "selectors/themeSelectors"; + +const renderBaseInputComponent = ( + props: Partial = {}, +) => { + const defaultProps: BaseInputComponentProps = { + value: "", + inputType: "TEXT", + inputHTMLType: "TEXT", + disabled: false, + isLoading: false, + compactMode: false, + isInvalid: false, + label: "Salary", + showError: false, + onValueChange: jest.fn(), + onFocusChange: jest.fn(), + widgetId: "test-widget", + rtl: true, + }; + + return render( + + + , + ); +}; + +describe("BaseInputComponent TestCases", () => { + test("1. Icon should be visible and aligned to the right when the input type is a number", () => { + const { container } = renderBaseInputComponent({ + inputType: "NUMBER", + inputHTMLType: "NUMBER", + value: "123", + onStep: jest.fn(), + rtl: false, + shouldUseLocale: true, + iconName: "add", + iconAlign: "right", + }); + + const numericInputIcon = container.getElementsByClassName( + "bp3-icon bp3-icon-add", + )[0]; + expect(numericInputIcon).toBeInTheDocument(); + }); +}); From 1c27c1679a373888168c57e6c5386bb7ee569104 Mon Sep 17 00:00:00 2001 From: saiprabhu-dandanayak Date: Thu, 26 Sep 2024 09:40:19 +0530 Subject: [PATCH 5/6] fix:linting issues --- app/client/src/widgets/BaseInputWidget/component/index.test.tsx | 1 + app/client/src/widgets/BaseInputWidget/component/index.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/app/client/src/widgets/BaseInputWidget/component/index.test.tsx b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx index 22e1ed359119..f8b0c50b6aa8 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.test.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx @@ -47,6 +47,7 @@ describe("BaseInputComponent TestCases", () => { const numericInputIcon = container.getElementsByClassName( "bp3-icon bp3-icon-add", )[0]; + expect(numericInputIcon).toBeInTheDocument(); }); }); diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index 3f6c4f70770d..55ef168b56dd 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -523,6 +523,7 @@ class BaseInputComponent extends React.Component< const locale = this.props.shouldUseLocale ? getLocale() : undefined; const leftIcon = this.getLeftIcon(); const conditionalProps: Record = {}; + if (!isNil(this.props.maxNum)) { conditionalProps.max = this.props.maxNum; } From 8f08342cf50892ecc239469655e44ecfd6d657b4 Mon Sep 17 00:00:00 2001 From: saiprabhu-dandanayak Date: Thu, 26 Sep 2024 11:01:43 +0530 Subject: [PATCH 6/6] fix:pretteir check --- app/client/src/widgets/BaseInputWidget/component/index.test.tsx | 2 +- app/client/src/widgets/BaseInputWidget/component/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/src/widgets/BaseInputWidget/component/index.test.tsx b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx index f8b0c50b6aa8..cde15763baea 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.test.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.test.tsx @@ -47,7 +47,7 @@ describe("BaseInputComponent TestCases", () => { const numericInputIcon = container.getElementsByClassName( "bp3-icon bp3-icon-add", )[0]; - + expect(numericInputIcon).toBeInTheDocument(); }); }); diff --git a/app/client/src/widgets/BaseInputWidget/component/index.tsx b/app/client/src/widgets/BaseInputWidget/component/index.tsx index 55ef168b56dd..95f4c2e14255 100644 --- a/app/client/src/widgets/BaseInputWidget/component/index.tsx +++ b/app/client/src/widgets/BaseInputWidget/component/index.tsx @@ -523,7 +523,7 @@ class BaseInputComponent extends React.Component< const locale = this.props.shouldUseLocale ? getLocale() : undefined; const leftIcon = this.getLeftIcon(); const conditionalProps: Record = {}; - + if (!isNil(this.props.maxNum)) { conditionalProps.max = this.props.maxNum; }