input width (#1719)

resolves #453 Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>
Avaiga · Aug 28, 2024 · 1bc8828 · 1bc8828
1 parent 7a44f5c
commit 1bc8828
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 3 deletions.
diff --git a/frontend/taipy-gui/src/components/Taipy/Input.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Input.spec.tsx
@@ -39,6 +39,20 @@ describe("Input Component", () => {
         );
         getByDisplayValue("titi");
     });
+    it("displays with width=70%", async () => {
+        const { getByDisplayValue, getByTestId } = render(
+            <Input value="toto" type="text" defaultValue="titi" width="70%"/>
+        );
+        const element = getByDisplayValue("toto");
+        expect(element.parentElement?.parentElement).toHaveStyle('max-width: 70%');
+    });
+    it("displays with width=500", async () => {
+        const { getByDisplayValue, getByTestId } = render(
+            <Input value="toto" type="text" defaultValue="titi" width={500}/>
+        );
+        const element = getByDisplayValue("toto");
+        expect(element.parentElement?.parentElement).toHaveStyle('max-width: 500px');
+    });
     it("is disabled", async () => {
         const { getByDisplayValue } = render(<Input value="val" type="text" active={false} />);
         const elt = getByDisplayValue("val");

diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -21,7 +21,7 @@ import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
 import { createSendActionNameAction, createSendUpdateAction } from "../../context/taipyReducers";
-import { TaipyInputProps } from "./utils";
+import { getCssSize, TaipyInputProps } from "./utils";
 import { useClassNames, useDispatch, useDynamicProperty, useModule } from "../../utils/hooks";
 
 const AUTHORIZED_KEYS = ["Enter", "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"];
@@ -80,6 +80,8 @@ const Input = (props: TaipyInputProps) => {
     const min = useDynamicProperty(props.min, props.defaultMin, undefined);
     const max = useDynamicProperty(props.max, props.defaultMax, undefined);
 
+    const textSx = useMemo(() => props.width ? {...numberSx, maxWidth: getCssSize(props.width)} : numberSx, [props.width]);
+
     const handleInput = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
             const val = e.target.value;
@@ -282,7 +284,7 @@ const Input = (props: TaipyInputProps) => {
     return (
         <Tooltip title={hover || ""}>
             <TextField
-                sx={numberSx}
+                sx={textSx}
                 margin="dense"
                 hiddenLabel
                 value={value ?? ""}

diff --git a/frontend/taipy-gui/src/components/Taipy/utils.ts b/frontend/taipy-gui/src/components/Taipy/utils.ts
@@ -61,6 +61,7 @@ export interface TaipyInputProps extends TaipyActiveProps, TaipyChangeProps, Tai
     actionKeys?: string;
     multiline?: boolean;
     linesShown?: number;
+    width?: string | number;
 }
 
 export interface TaipyLabelProps {

diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py
@@ -296,6 +296,7 @@ class _Factory:
                 ("change_delay", PropertyType.number, gui._get_config("change_delay", None)),
                 ("multiline", PropertyType.boolean, False),
                 ("lines_shown", PropertyType.number, 5),
+                ("width", PropertyType.string_or_number),
             ]
         ),
         "layout": lambda gui, control_type, attrs: _Builder(

diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json
@@ -110,6 +110,12 @@
                         "default_value": "5",
                         "doc": "The number of lines shown in the input control, when multiline is True."
                     },
+                    {
+                        "name": "width",
+                        "type": "Union[str,int]",
+                        "default_value": "None",
+                        "doc": "The width of the input element."
+                    },
                     {
                         "name": "type",
                         "type": "str",

diff --git a/tests/gui/control/test_input.py b/tests/gui/control/test_input.py
@@ -28,6 +28,21 @@ def test_input_md(gui: Gui, helpers):
     helpers.test_control_md(gui, md_string, expected_list)
 
 
+def test_input_md_width(gui: Gui, helpers):
+    x = "Hello World!"  # noqa: F841
+    gui._set_frame(inspect.currentframe())
+    md_string = "<|{x}|input|width=70%|>"
+    expected_list = [
+        "<Input",
+        'updateVarName="tpec_TpExPr_x_TPMDL_0"',
+        'defaultValue="Hello World!"',
+        'type="text"',
+        'width="70%"',
+        "value={tpec_TpExPr_x_TPMDL_0}",
+    ]
+    helpers.test_control_md(gui, md_string, expected_list)
+
+
 def test_password_md(gui: Gui, helpers):
     x = "Hello World!"  # noqa: F841
     gui._set_frame(inspect.currentframe())
@@ -59,12 +74,13 @@ def test_input_html_1(gui: Gui, helpers):
 def test_password_html(gui: Gui, helpers):
     x = "Hello World!"  # noqa: F841
     gui._set_frame(inspect.currentframe())
-    html_string = '<taipy:input value="{x}" password="True" />'
+    html_string = '<taipy:input value="{x}" password="True" width="{100}" />'
     expected_list = [
         "<Input",
         'updateVarName="tpec_TpExPr_x_TPMDL_0"',
         'defaultValue="Hello World!"',
         'type="password"',
+        'width={100}',
         "value={tpec_TpExPr_x_TPMDL_0}",
     ]
     helpers.test_control_html(gui, html_string, expected_list)