From e7133a9ede28ce726ed6df0e7e22115d98c49385 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Mon, 15 Jul 2024 16:18:15 -0600 Subject: [PATCH 01/15] datetime input control based on text field has been added --- .../jv-input-controls/src/InputControls.tsx | 5 +- .../controls/DateTimePickerInputControl.tsx | 2 +- .../DateTimePickerTextFieldInputControl.tsx | 49 +++++++++++++++++++ .../src/panels/BasePanel.tsx | 31 ++++++++++-- .../DateTimeTextField/DateTimeTextField.tsx | 36 ++++++++++++++ .../jv-ui-components/material-ui/index.ts | 1 + packages/test-app/src/App.tsx | 5 ++ 7 files changed, 121 insertions(+), 8 deletions(-) create mode 100644 packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx create mode 100644 packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx diff --git a/packages/jv-input-controls/src/InputControls.tsx b/packages/jv-input-controls/src/InputControls.tsx index 8bc89a1b..6ec1141a 100644 --- a/packages/jv-input-controls/src/InputControls.tsx +++ b/packages/jv-input-controls/src/InputControls.tsx @@ -2,7 +2,8 @@ import * as React from "react"; import { BoolICType } from "./controls/BooleanInputControl"; import { createRoot } from "react-dom/client"; import { DateICType } from "./controls/DatePickerInputControl"; -import { DateTimeICType } from "./controls/DateTimePickerInputControl"; +import { DateTimePickerICType } from "./controls/DateTimePickerInputControl"; +import { DateTimeICType } from "./controls/DateTimePickerTextFieldInputControl"; import { TextFieldICType } from "./controls/SingleValueTextInputControl"; import { TimeICType } from "./controls/TimePickerInputControl"; import BasePanel from "./panels/BasePanel"; @@ -29,7 +30,7 @@ export interface InputControlUserConfig { type: DateICType; }; singleValueDatetime?: { - type: DateTimeICType; + type: DateTimeICType | DateTimePickerICType; }; singleValueTime?: { type: TimeICType; diff --git a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx index 32d51537..15abcb2b 100644 --- a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx @@ -6,7 +6,7 @@ import { import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; -export type DateTimeICType = "datetime"; +export type DateTimePickerICType = "datetime_picker"; export interface DateTimeICProps extends BaseInputControlProps { value?: string; diff --git a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx new file mode 100644 index 00000000..3b5319a1 --- /dev/null +++ b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx @@ -0,0 +1,49 @@ +/* + * Copyright © 2005-2024. Cloud Software Group, Inc. All rights reserved. Confidential & Proprietary. + * Licensed pursuant to commercial Cloud Software Group, Inc End User License Agreement. + */ + +import { DateTimeTextField as JVDateTimeTextField } from "@jaspersoft/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField"; +import { BaseInputControlProps } from "./BaseInputControl"; +import { useControlClasses } from "./hooks/useControlClasses"; +import { useLiveState } from "./hooks/useLiveState"; + +export type DateTimeICType = "datetime"; + +export interface DateTimeTextFieldICProps extends BaseInputControlProps { + defaultValue?: string; + value?: string; + variant?: "standard" | "filled" | "outlined" | undefined; + className?: string; + disabled?: boolean; +} + +export const DateTimePickerTextFieldInputControl = ( + props: DateTimeTextFieldICProps, +) => { + const { + value, + defaultValue, + readOnly, + mandatory, + visible, + ...remainingProps + } = props; + const liveState = useLiveState( + props.state?.value || value || defaultValue || "", + ); + const controlClasses = useControlClasses([], props); + const inputProps: any = {}; + if (readOnly) { + inputProps.readOnly = true; + } + const theInputProps = { ...inputProps, ...liveState }; + return ( + + ); +}; diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index 32b8d662..148674cc 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -2,7 +2,11 @@ import { DatePickerProvider as JVDatePickerProvider } from "@jaspersoft/jv-ui-co import * as React from "react"; import BooleanInputControl from "../controls/BooleanInputControl"; import { DatePickerInputControl } from "../controls/DatePickerInputControl"; -import { DateTimePickerInputControl } from "../controls/DateTimePickerInputControl"; +import { + DateTimePickerICType, + DateTimePickerInputControl, +} from "../controls/DateTimePickerInputControl"; +import { DateTimePickerTextFieldInputControl } from "../controls/DateTimePickerTextFieldInputControl"; import { SingleValueTextInputControl } from "../controls/SingleValueTextInputControl"; import { TimePickerInputControl } from "../controls/TimePickerInputControl"; import { InputControlUserConfig } from "../InputControls"; @@ -63,8 +67,23 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { ); } if (control.type === "singleValueDatetime") { + if (props.config?.singleValueDatetime?.type === "datetime_picker") { + return ( + + ); + } return ( - ); } @@ -95,11 +113,14 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { }; const buildControls = (controlMap: any) => { - if (controlMap.data) return controlMap.data.map(buildControl); - if (controlMap) + if (controlMap.data) { + return controlMap.data.map(buildControl); + } + if (controlMap) { return ( {JSON.stringify(controlMap)} ); + } return <>; }; diff --git a/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx b/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx new file mode 100644 index 00000000..5705652f --- /dev/null +++ b/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx @@ -0,0 +1,36 @@ +/* + * Copyright © 2005-2024. Cloud Software Group, Inc. All rights reserved. Confidential & Proprietary. + * Licensed pursuant to commercial Cloud Software Group, Inc End User License Agreement. + */ + +import { forwardRef } from "react"; +import { + TextField as JVTextField, + TextFieldProps, +} from "../TextField/TextField"; + +export const DateTimeTextField = forwardRef( + (props, ref) => { + const mergedInputLabelProps = { + ...props.InputLabelProps, + classes: { root: "jv-mInput-label mui" }, + disableAnimation: true, + }; + const mergeInputProps = { + classes: { input: "jv-mInput-text mui" }, + ...props.InputProps, + }; + return ( +
+ +
+ ); + }, +); diff --git a/packages/jv-ui-components/material-ui/index.ts b/packages/jv-ui-components/material-ui/index.ts index b0282b0d..ca597a9b 100644 --- a/packages/jv-ui-components/material-ui/index.ts +++ b/packages/jv-ui-components/material-ui/index.ts @@ -107,6 +107,7 @@ export { } from "./Dialog/ConfirmationDialog"; export { DatePicker as JVDatePicker } from "./Date/DatePicker"; export { DateTimePicker as JVDateTimePicker } from "./DateTime/DateTimePicker"; +export { DateTimeTextField as JVDateTimeTextField } from "./DateTimeTextField/DateTimeTextField"; export { DatePickerProvider as JVDatePickerProvider } from "./Date/DatePickerProvider"; export { Divider as JVDivider } from "./Divider/Divider"; export { Drawer as JVDrawer } from "./Drawer/Drawer"; diff --git a/packages/test-app/src/App.tsx b/packages/test-app/src/App.tsx index 4ee2d7c4..a4393ecf 100644 --- a/packages/test-app/src/App.tsx +++ b/packages/test-app/src/App.tsx @@ -82,6 +82,11 @@ export default function App(props: AppConfig) { error: (error) => { console.log("Error: ", error); }, + config: { + singleValueDatetime: { + type: "datetime", + }, + }, }, ); }, [plugin]); From 7b79de2f601d051e7a7b4708080266a4a1b0ee20 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Tue, 16 Jul 2024 11:16:20 -0600 Subject: [PATCH 02/15] package name updated for the styles command --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 94dcaaf5..2aabf81c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "build": "yarn workspaces run build", "clean": "yarn workspaces run clean", "start": "yarn workspace test-app run start", - "start:styles:dev": "yarn workspace jv-ui-components run start:dev", + "start:styles:dev": "yarn workspace @jaspersoft/jv-ui-components run start:dev", "prepare": "husky" }, "repository": { From ae40d748f4ea0ca549694efb93ec1bd530cdea4b Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Tue, 16 Jul 2024 16:50:11 -0600 Subject: [PATCH 03/15] started to check the issue with the ordering of the CSS styles --- packages/test-app/public/index.html | 24 ++++++++++-------------- packages/test-app/src/entrypoint.tsx | 9 +++------ 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/packages/test-app/public/index.html b/packages/test-app/public/index.html index 2032ea9e..6e577009 100644 --- a/packages/test-app/public/index.html +++ b/packages/test-app/public/index.html @@ -1,4 +1,4 @@ - + @@ -17,25 +17,21 @@ href="https://fonts.googleapis.com/icon?family=Material+Icons" /> - - - + + +
+ -
- - + + diff --git a/packages/test-app/src/entrypoint.tsx b/packages/test-app/src/entrypoint.tsx index 8d2d8035..f9fdf4ff 100644 --- a/packages/test-app/src/entrypoint.tsx +++ b/packages/test-app/src/entrypoint.tsx @@ -1,12 +1,9 @@ +import { JVStylesProvider } from "@jaspersoft/jv-ui-components"; import * as React from "react"; -import * as ReactDOM from "react-dom/client"; +import { createRoot } from "react-dom/client"; import App from "./App.js"; -import { - JVDatePickerProvider, - JVStylesProvider, -} from "@jaspersoft/jv-ui-components"; -ReactDOM.createRoot(document.getElementById("root")!).render( +createRoot(document.getElementById("root")!).render( , From bb233ca329ed394b2809cbea7aaed5341f4bb541 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 10:24:16 -0600 Subject: [PATCH 04/15] import fixed --- packages/jv-input-controls/src/InputControls.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jv-input-controls/src/InputControls.tsx b/packages/jv-input-controls/src/InputControls.tsx index 26ef0620..a8032d39 100644 --- a/packages/jv-input-controls/src/InputControls.tsx +++ b/packages/jv-input-controls/src/InputControls.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { BoolICType } from "./controls/BooleanInputControl"; import { createRoot } from "react-dom/client"; import { DateICType } from "./controls/DatePickerInputControl"; -import { DateTimeICType } from "./controls/DateTimePickerInputControl"; +import { DateTimeICType } from "./controls/DateTimePickerTextFieldInputControl"; import { NumberICType } from "./controls/SingleValueNumberInputControl"; import { DateTimePickerICType } from "./controls/DateTimePickerInputControl"; import { TextFieldICType } from "./controls/SingleValueTextInputControl"; From 991fcfdb4b2735e4de02aa8b046f63dc0095a72d Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 10:46:05 -0600 Subject: [PATCH 05/15] tests and className prop fixed for DateTimePickerTextFieldInputControl component --- ...teTimePickerTextFieldInputControl.test.tsx | 138 ++++++++++++++++++ .../DateTimeTextField/DateTimeTextField.tsx | 2 +- 2 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx diff --git a/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx new file mode 100644 index 00000000..3a449f86 --- /dev/null +++ b/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx @@ -0,0 +1,138 @@ +import { SizeToClass } from "@jaspersoft/jv-ui-components/material-ui/types/InputTypes"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { JSX } from "react"; +import { DateTimePickerTextFieldInputControl } from "../src/controls/DateTimePickerTextFieldInputControl"; +import "@testing-library/jest-dom"; + +const LARGE_CSS_CLASS = SizeToClass.large; +const requiredProps = { + id: "column_timestamp_1", + label: "column_timestamp", + mandatory: false, + readOnly: false, + visible: true, + type: "singleValueDatetime", +}; + +const getDateTimePicketTextFieldIC = (options?: object): JSX.Element => { + return ( + + ); +}; + +describe("DateTimePickerTextFieldInputControl tests", () => { + test("DateTimePickerTextFieldInputControl is rendered correctly", () => { + const { container } = render(getDateTimePicketTextFieldIC()); + const buttonElement = container.querySelector("input"); + expect(buttonElement).toBeInTheDocument(); + }); + + // Test for label prop + test("displays the label when provided", () => { + const testLabel = "Test Label"; + render(getDateTimePicketTextFieldIC({ label: testLabel })); + const labelElement = screen.queryByLabelText(testLabel); + expect(labelElement).toBeInTheDocument(); + }); + + // Test for value prop + test("uses value as the initial input value", () => { + const defaultValue = "2014-09-12T15:46:18.000"; + const { container } = render( + getDateTimePicketTextFieldIC({ defaultValue }), + ); + + const inputElement = container.querySelector("input") as HTMLInputElement; + expect(inputElement.value).toBe(defaultValue); + }); + + // Test for onChange event + test("updates value on change", () => { + const { container } = render(getDateTimePicketTextFieldIC({})); + const inputElement = container.querySelector("input") as HTMLInputElement; + const newValue = "2024-07-15T15:46:18.000"; + fireEvent.change(inputElement, { target: { value: newValue } }); + expect(inputElement.value).toBe(newValue); + }); + + // Test for variant prop + test("changes style based on variant prop", () => { + const { container } = render( + getDateTimePicketTextFieldIC({ variant: "outlined" }), + ); + let inputElement = container.querySelector("input") as HTMLInputElement; + expect(inputElement).toHaveClass("MuiOutlinedInput-input"); + }); + + // test for default size. + test("check the default size is large if it is not provided", () => { + // Render the component + const { container } = render(getDateTimePicketTextFieldIC({})); + + // Use querySelector to get the first div with the class "jv-mInputLarge" + const divElement = container.querySelector(`div.${LARGE_CSS_CLASS}`); + + // Assert that the element is found and has the expected class + expect(divElement).toBeInTheDocument(); + expect(divElement).toHaveClass(LARGE_CSS_CLASS); + }); + + // test className prop + test("check wrapping CSS class", () => { + const cssClass = "jv-mInput"; + // Render the component + const { container } = render( + getDateTimePicketTextFieldIC({ className: cssClass }), + ); + + // Use querySelector to get the first div with the class "jv-mInputLarge" + const inputElement = container.querySelector( + `.${cssClass}`, + ) as HTMLInputElement; + // Assert that the element is found and has the expected class + expect(inputElement).toBeInTheDocument(); + expect(inputElement).toHaveClass(cssClass); + }); + + // test readOnly prop + test("check the component is read-only", () => { + // Render the component + const { container } = render( + getDateTimePicketTextFieldIC({ readOnly: true }), + ); + let inputElement = container.querySelector("input") as HTMLInputElement; + + // Assert that the element is found and has the expected attribute + expect(inputElement).toBeInTheDocument(); + expect(inputElement).toHaveAttribute("readonly"); + }); + + // test visible prop + test("check the component is visible or not", () => { + const HIDDEN_CLASS_NAME = "jv-uVisibility-hide"; + // Render the component + const { container } = render( + getDateTimePicketTextFieldIC({ visible: false }), + ); + // Use querySelector to get the first div with the class "jv-mInputLarge" + const divElement = container.querySelector(`div.${HIDDEN_CLASS_NAME}`); + + // Assert that the element is found and has the expected class + expect(divElement).toBeInTheDocument(); + expect(divElement).toHaveClass(HIDDEN_CLASS_NAME); + }); + + // Test for mandatory field + test("verify the field shows error when mandatory prop is set", () => { + const CSS_ERROR_CLASS = "jv-uMandatory"; + const { container } = render( + getDateTimePicketTextFieldIC({ mandatory: true }), + ); + let wrapperDiv = container.querySelector( + `div.${CSS_ERROR_CLASS}`, + ) as HTMLInputElement; + expect(wrapperDiv).toBeInTheDocument(); + }); +}); diff --git a/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx b/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx index 5705652f..d72a3b1a 100644 --- a/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx +++ b/packages/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField.tsx @@ -24,7 +24,7 @@ export const DateTimeTextField = forwardRef(
Date: Wed, 17 Jul 2024 11:08:39 -0600 Subject: [PATCH 06/15] TimePickerTextFieldInputControl added --- .../jv-input-controls/src/InputControls.tsx | 5 +- .../DateTimePickerTextFieldInputControl.tsx | 4 +- .../src/controls/TimePickerInputControl.tsx | 2 +- .../TimePickerTextFieldInputControl.tsx | 51 +++++++++++++++++++ .../src/panels/BasePanel.tsx | 25 ++++++--- .../DateTimeTextField/DateTimeTextField.tsx | 17 +++---- packages/test-app/src/App.tsx | 5 +- 7 files changed, 88 insertions(+), 21 deletions(-) create mode 100644 packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx diff --git a/packages/jv-input-controls/src/InputControls.tsx b/packages/jv-input-controls/src/InputControls.tsx index a8032d39..1489f559 100644 --- a/packages/jv-input-controls/src/InputControls.tsx +++ b/packages/jv-input-controls/src/InputControls.tsx @@ -6,7 +6,8 @@ import { DateTimeICType } from "./controls/DateTimePickerTextFieldInputControl"; import { NumberICType } from "./controls/SingleValueNumberInputControl"; import { DateTimePickerICType } from "./controls/DateTimePickerInputControl"; import { TextFieldICType } from "./controls/SingleValueTextInputControl"; -import { TimeICType } from "./controls/TimePickerInputControl"; +import { TimePickerICType } from "./controls/TimePickerInputControl"; +import { TimeICType } from "./controls/TimePickerTextFieldInputControl"; import BasePanel from "./panels/BasePanel"; import { InputControlCollection } from "./controls/BaseInputControl"; @@ -34,7 +35,7 @@ export interface InputControlUserConfig { type: DateTimeICType | DateTimePickerICType; }; singleValueTime?: { - type: TimeICType; + type: TimeICType | TimePickerICType; }; } diff --git a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx index 3b5319a1..425dd4f8 100644 --- a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx @@ -27,6 +27,7 @@ export const DateTimePickerTextFieldInputControl = ( readOnly, mandatory, visible, + validationRules, ...remainingProps } = props; const liveState = useLiveState( @@ -41,8 +42,9 @@ export const DateTimePickerTextFieldInputControl = ( return ( ); diff --git a/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx index 5c92bf7b..ff997bad 100644 --- a/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx @@ -6,7 +6,7 @@ import { import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; -export type TimeICType = "time"; +export type TimePickerICType = "time_picker"; export interface TimeICProps extends BaseInputControlProps { value?: string; diff --git a/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx new file mode 100644 index 00000000..16c349a6 --- /dev/null +++ b/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx @@ -0,0 +1,51 @@ +/* + * Copyright © 2005-2024. Cloud Software Group, Inc. All rights reserved. Confidential & Proprietary. + * Licensed pursuant to commercial Cloud Software Group, Inc End User License Agreement. + */ + +import { DateTimeTextField as JVDateTimeTextField } from "@jaspersoft/jv-ui-components/material-ui/DateTimeTextField/DateTimeTextField"; +import { BaseInputControlProps } from "./BaseInputControl"; +import { useControlClasses } from "./hooks/useControlClasses"; +import { useLiveState } from "./hooks/useLiveState"; + +export type TimeICType = "time"; + +export interface TimeTextFieldICProps extends BaseInputControlProps { + defaultValue?: string; + value?: string; + variant?: "standard" | "filled" | "outlined" | undefined; + className?: string; + disabled?: boolean; +} + +export const TimePickerTextFieldInputControl = ( + props: TimeTextFieldICProps, +) => { + const { + value, + defaultValue, + readOnly, + mandatory, + visible, + validationRules, + ...remainingProps + } = props; + const liveState = useLiveState( + props.state?.value || value || defaultValue || "", + ); + const controlClasses = useControlClasses([], props); + const inputProps: any = {}; + if (readOnly) { + inputProps.readOnly = true; + } + const theInputProps = { ...inputProps, ...liveState }; + return ( + + ); +}; diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index 0c642907..5bf86e05 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -2,14 +2,12 @@ import { DatePickerProvider as JVDatePickerProvider } from "@jaspersoft/jv-ui-co import * as React from "react"; import BooleanInputControl from "../controls/BooleanInputControl"; import { DatePickerInputControl } from "../controls/DatePickerInputControl"; -import { - DateTimePickerICType, - DateTimePickerInputControl, -} from "../controls/DateTimePickerInputControl"; -import { SingleValueNumberInputControl } from "../controls/SingleValueNumberInputControl"; +import { DateTimePickerInputControl } from "../controls/DateTimePickerInputControl"; import { DateTimePickerTextFieldInputControl } from "../controls/DateTimePickerTextFieldInputControl"; +import { SingleValueNumberInputControl } from "../controls/SingleValueNumberInputControl"; import { SingleValueTextInputControl } from "../controls/SingleValueTextInputControl"; import { TimePickerInputControl } from "../controls/TimePickerInputControl"; +import { TimePickerTextFieldInputControl } from "../controls/TimePickerTextFieldInputControl"; import { InputControlUserConfig } from "../InputControls"; export interface BasePanelProps { @@ -112,8 +110,23 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { ); } if (control.type === "singleValueTime") { + if (props.config?.singleValueTime?.type === "time_picker") { + return ( + + ); + } return ( - ( ...props.InputProps, }; return ( -
- -
+ ); }, ); diff --git a/packages/test-app/src/App.tsx b/packages/test-app/src/App.tsx index a4393ecf..ba237cd4 100644 --- a/packages/test-app/src/App.tsx +++ b/packages/test-app/src/App.tsx @@ -84,7 +84,10 @@ export default function App(props: AppConfig) { }, config: { singleValueDatetime: { - type: "datetime", + type: "datetime", // even if it isn't provided, this will be the default component + }, + singleValueTime: { + type: "time", // even if it isn't provided, this will be the default component }, }, }, From aa40dcf2a507ae5eda7005ac9b9208ac5d806425 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 11:23:03 -0600 Subject: [PATCH 07/15] TimePickerTextFieldInputControl tests, added --- .../TimePickerTextFieldInputControl.test.tsx | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx diff --git a/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx new file mode 100644 index 00000000..8ab5503a --- /dev/null +++ b/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx @@ -0,0 +1,128 @@ +import { SizeToClass } from "@jaspersoft/jv-ui-components/material-ui/types/InputTypes"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { JSX } from "react"; +import "@testing-library/jest-dom"; +import { TimePickerTextFieldInputControl } from "../src/controls/TimePickerTextFieldInputControl"; + +const LARGE_CSS_CLASS = SizeToClass.large; +const requiredProps = { + id: "column_time_1", + label: "column_time", + mandatory: false, + readOnly: false, + visible: true, + type: "singleValueTime", +}; + +const getTimePicketTextFieldIC = (options?: object): JSX.Element => { + return ( + + ); +}; + +describe("TimePickerTextFieldInputControl tests", () => { + test("TimePickerTextFieldInputControl is rendered correctly", () => { + const { container } = render(getTimePicketTextFieldIC()); + const buttonElement = container.querySelector("input"); + expect(buttonElement).toBeInTheDocument(); + }); + + // Test for label prop + test("displays the label when provided", () => { + const testLabel = "Test Label"; + render(getTimePicketTextFieldIC({ label: testLabel })); + const labelElement = screen.queryByLabelText(testLabel); + expect(labelElement).toBeInTheDocument(); + }); + + // Test for value prop + test("uses value as the initial input value", () => { + const defaultValue = "23:44:21"; + const { container } = render(getTimePicketTextFieldIC({ defaultValue })); + + const inputElement = container.querySelector("input") as HTMLInputElement; + expect(inputElement.value).toBe(defaultValue); + }); + + // Test for onChange event + test("updates value on change", () => { + const { container } = render(getTimePicketTextFieldIC({})); + const inputElement = container.querySelector("input") as HTMLInputElement; + const newValue = "11:22:16"; + fireEvent.change(inputElement, { target: { value: newValue } }); + expect(inputElement.value).toBe(newValue); + }); + + // Test for variant prop + test("changes style based on variant prop", () => { + const { container } = render( + getTimePicketTextFieldIC({ variant: "outlined" }), + ); + let inputElement = container.querySelector("input") as HTMLInputElement; + expect(inputElement).toHaveClass("MuiOutlinedInput-input"); + }); + + // test for default size. + test("check the default size is large if it is not provided", () => { + // Render the component + const { container } = render(getTimePicketTextFieldIC({})); + + // Use querySelector to get the first div with the class "jv-mInputLarge" + const divElement = container.querySelector(`div.${LARGE_CSS_CLASS}`); + + // Assert that the element is found and has the expected class + expect(divElement).toBeInTheDocument(); + expect(divElement).toHaveClass(LARGE_CSS_CLASS); + }); + + // test className prop + test("check wrapping CSS class", () => { + const cssClass = "jv-mInput"; + // Render the component + const { container } = render( + getTimePicketTextFieldIC({ className: cssClass }), + ); + + // Use querySelector to get the first div with the class "jv-mInputLarge" + const inputElement = container.querySelector( + `.${cssClass}`, + ) as HTMLInputElement; + // Assert that the element is found and has the expected class + expect(inputElement).toBeInTheDocument(); + expect(inputElement).toHaveClass(cssClass); + }); + + // test readOnly prop + test("check the component is read-only", () => { + // Render the component + const { container } = render(getTimePicketTextFieldIC({ readOnly: true })); + let inputElement = container.querySelector("input") as HTMLInputElement; + + // Assert that the element is found and has the expected attribute + expect(inputElement).toBeInTheDocument(); + expect(inputElement).toHaveAttribute("readonly"); + }); + + // test visible prop + test("check the component is visible or not", () => { + const HIDDEN_CLASS_NAME = "jv-uVisibility-hide"; + // Render the component + const { container } = render(getTimePicketTextFieldIC({ visible: false })); + // Use querySelector to get the first div with the class "jv-mInputLarge" + const divElement = container.querySelector(`div.${HIDDEN_CLASS_NAME}`); + + // Assert that the element is found and has the expected class + expect(divElement).toBeInTheDocument(); + expect(divElement).toHaveClass(HIDDEN_CLASS_NAME); + }); + + // Test for mandatory field + test("verify the field shows error when mandatory prop is set", () => { + const CSS_ERROR_CLASS = "jv-uMandatory"; + const { container } = render(getTimePicketTextFieldIC({ mandatory: true })); + let wrapperDiv = container.querySelector( + `div.${CSS_ERROR_CLASS}`, + ) as HTMLInputElement; + expect(wrapperDiv).toBeInTheDocument(); + }); +}); From c19f11434531774ce843d8193a3c0c2491c490de Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 11:43:26 -0600 Subject: [PATCH 08/15] DatePickerTextFieldInputControl component, added --- .../jv-input-controls/src/InputControls.tsx | 5 +++-- .../src/controls/DatePickerInputControl.tsx | 2 +- .../jv-input-controls/src/panels/BasePanel.tsx | 18 +++++++++++++++++- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/jv-input-controls/src/InputControls.tsx b/packages/jv-input-controls/src/InputControls.tsx index 1489f559..f8ee57e3 100644 --- a/packages/jv-input-controls/src/InputControls.tsx +++ b/packages/jv-input-controls/src/InputControls.tsx @@ -1,7 +1,8 @@ import * as React from "react"; import { BoolICType } from "./controls/BooleanInputControl"; import { createRoot } from "react-dom/client"; -import { DateICType } from "./controls/DatePickerInputControl"; +import { DatePickerICType } from "./controls/DatePickerInputControl"; +import { DateICType } from "./controls/DatePickerTextFieldInputControl"; import { DateTimeICType } from "./controls/DateTimePickerTextFieldInputControl"; import { NumberICType } from "./controls/SingleValueNumberInputControl"; import { DateTimePickerICType } from "./controls/DateTimePickerInputControl"; @@ -29,7 +30,7 @@ export interface InputControlUserConfig { type: NumberICType; }; singleValueDate?: { - type: DateICType; + type: DateICType | DatePickerICType; }; singleValueDatetime?: { type: DateTimeICType | DateTimePickerICType; diff --git a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx index bd7855d4..d023fa18 100644 --- a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx @@ -6,7 +6,7 @@ import { import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; -export type DateICType = "Date"; +export type DatePickerICType = "date_picker"; export interface DateICProps extends BaseInputControlProps { value?: string; diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index 5bf86e05..5fd46f14 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -2,6 +2,7 @@ import { DatePickerProvider as JVDatePickerProvider } from "@jaspersoft/jv-ui-co import * as React from "react"; import BooleanInputControl from "../controls/BooleanInputControl"; import { DatePickerInputControl } from "../controls/DatePickerInputControl"; +import { DatePickerTextFieldInputControl } from "../controls/DatePickerTextFieldInputControl"; import { DateTimePickerInputControl } from "../controls/DateTimePickerInputControl"; import { DateTimePickerTextFieldInputControl } from "../controls/DateTimePickerTextFieldInputControl"; import { SingleValueNumberInputControl } from "../controls/SingleValueNumberInputControl"; @@ -66,8 +67,23 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { } if (control.type === "singleValueDate") { + if (props?.config?.singleValueDate?.type === "date_picker") { + return ( + + ); + } return ( - Date: Wed, 17 Jul 2024 11:46:07 -0600 Subject: [PATCH 09/15] DatePickerTextFieldInputControl tests, added --- .../DatePickerTextFieldInputControl.test.tsx | 128 ++++++++++++++++++ .../TimePickerTextFieldInputControl.test.tsx | 22 +-- 2 files changed, 139 insertions(+), 11 deletions(-) create mode 100644 packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx diff --git a/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx new file mode 100644 index 00000000..c441af74 --- /dev/null +++ b/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx @@ -0,0 +1,128 @@ +import { SizeToClass } from "@jaspersoft/jv-ui-components/material-ui/types/InputTypes"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { JSX } from "react"; +import "@testing-library/jest-dom"; +import { DatePickerTextFieldInputControl } from "../src/controls/DatePickerTextFieldInputControl"; + +const LARGE_CSS_CLASS = SizeToClass.large; +const requiredProps = { + id: "column_date_1", + label: "column_date", + mandatory: false, + readOnly: false, + visible: true, + type: "singleValueDate", +}; + +const getDatePickerTextFieldIC = (options?: object): JSX.Element => { + return ( + + ); +}; + +describe("DatePickerTextFieldInputControl tests", () => { + test("DatePickerTextFieldInputControl is rendered correctly", () => { + const { container } = render(getDatePickerTextFieldIC()); + const buttonElement = container.querySelector("input"); + expect(buttonElement).toBeInTheDocument(); + }); + + // Test for label prop + test("displays the label when provided", () => { + const testLabel = "Test Label"; + render(getDatePickerTextFieldIC({ label: testLabel })); + const labelElement = screen.queryByLabelText(testLabel); + expect(labelElement).toBeInTheDocument(); + }); + + // Test for value prop + test("uses value as the initial input value", () => { + const defaultValue = "2009-09-12"; + const { container } = render(getDatePickerTextFieldIC({ defaultValue })); + + const inputElement = container.querySelector("input") as HTMLInputElement; + expect(inputElement.value).toBe(defaultValue); + }); + + // Test for onChange event + test("updates value on change", () => { + const { container } = render(getDatePickerTextFieldIC({})); + const inputElement = container.querySelector("input") as HTMLInputElement; + const newValue = "2024-07-17"; + fireEvent.change(inputElement, { target: { value: newValue } }); + expect(inputElement.value).toBe(newValue); + }); + + // Test for variant prop + test("changes style based on variant prop", () => { + const { container } = render( + getDatePickerTextFieldIC({ variant: "outlined" }), + ); + let inputElement = container.querySelector("input") as HTMLInputElement; + expect(inputElement).toHaveClass("MuiOutlinedInput-input"); + }); + + // test for default size. + test("check the default size is large if it is not provided", () => { + // Render the component + const { container } = render(getDatePickerTextFieldIC({})); + + // Use querySelector to get the first div with the class "jv-mInputLarge" + const divElement = container.querySelector(`div.${LARGE_CSS_CLASS}`); + + // Assert that the element is found and has the expected class + expect(divElement).toBeInTheDocument(); + expect(divElement).toHaveClass(LARGE_CSS_CLASS); + }); + + // test className prop + test("check wrapping CSS class", () => { + const cssClass = "jv-mInput"; + // Render the component + const { container } = render( + getDatePickerTextFieldIC({ className: cssClass }), + ); + + // Use querySelector to get the first div with the class "jv-mInputLarge" + const inputElement = container.querySelector( + `.${cssClass}`, + ) as HTMLInputElement; + // Assert that the element is found and has the expected class + expect(inputElement).toBeInTheDocument(); + expect(inputElement).toHaveClass(cssClass); + }); + + // test readOnly prop + test("check the component is read-only", () => { + // Render the component + const { container } = render(getDatePickerTextFieldIC({ readOnly: true })); + let inputElement = container.querySelector("input") as HTMLInputElement; + + // Assert that the element is found and has the expected attribute + expect(inputElement).toBeInTheDocument(); + expect(inputElement).toHaveAttribute("readonly"); + }); + + // test visible prop + test("check the component is visible or not", () => { + const HIDDEN_CLASS_NAME = "jv-uVisibility-hide"; + // Render the component + const { container } = render(getDatePickerTextFieldIC({ visible: false })); + // Use querySelector to get the first div with the class "jv-mInputLarge" + const divElement = container.querySelector(`div.${HIDDEN_CLASS_NAME}`); + + // Assert that the element is found and has the expected class + expect(divElement).toBeInTheDocument(); + expect(divElement).toHaveClass(HIDDEN_CLASS_NAME); + }); + + // Test for mandatory field + test("verify the field shows error when mandatory prop is set", () => { + const CSS_ERROR_CLASS = "jv-uMandatory"; + const { container } = render(getDatePickerTextFieldIC({ mandatory: true })); + let wrapperDiv = container.querySelector( + `div.${CSS_ERROR_CLASS}`, + ) as HTMLInputElement; + expect(wrapperDiv).toBeInTheDocument(); + }); +}); diff --git a/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx index 8ab5503a..b21778c9 100644 --- a/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx +++ b/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx @@ -14,7 +14,7 @@ const requiredProps = { type: "singleValueTime", }; -const getTimePicketTextFieldIC = (options?: object): JSX.Element => { +const getTimePickerTextFieldIC = (options?: object): JSX.Element => { return ( ); @@ -22,7 +22,7 @@ const getTimePicketTextFieldIC = (options?: object): JSX.Element => { describe("TimePickerTextFieldInputControl tests", () => { test("TimePickerTextFieldInputControl is rendered correctly", () => { - const { container } = render(getTimePicketTextFieldIC()); + const { container } = render(getTimePickerTextFieldIC()); const buttonElement = container.querySelector("input"); expect(buttonElement).toBeInTheDocument(); }); @@ -30,7 +30,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // Test for label prop test("displays the label when provided", () => { const testLabel = "Test Label"; - render(getTimePicketTextFieldIC({ label: testLabel })); + render(getTimePickerTextFieldIC({ label: testLabel })); const labelElement = screen.queryByLabelText(testLabel); expect(labelElement).toBeInTheDocument(); }); @@ -38,7 +38,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // Test for value prop test("uses value as the initial input value", () => { const defaultValue = "23:44:21"; - const { container } = render(getTimePicketTextFieldIC({ defaultValue })); + const { container } = render(getTimePickerTextFieldIC({ defaultValue })); const inputElement = container.querySelector("input") as HTMLInputElement; expect(inputElement.value).toBe(defaultValue); @@ -46,7 +46,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // Test for onChange event test("updates value on change", () => { - const { container } = render(getTimePicketTextFieldIC({})); + const { container } = render(getTimePickerTextFieldIC({})); const inputElement = container.querySelector("input") as HTMLInputElement; const newValue = "11:22:16"; fireEvent.change(inputElement, { target: { value: newValue } }); @@ -56,7 +56,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // Test for variant prop test("changes style based on variant prop", () => { const { container } = render( - getTimePicketTextFieldIC({ variant: "outlined" }), + getTimePickerTextFieldIC({ variant: "outlined" }), ); let inputElement = container.querySelector("input") as HTMLInputElement; expect(inputElement).toHaveClass("MuiOutlinedInput-input"); @@ -65,7 +65,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // test for default size. test("check the default size is large if it is not provided", () => { // Render the component - const { container } = render(getTimePicketTextFieldIC({})); + const { container } = render(getTimePickerTextFieldIC({})); // Use querySelector to get the first div with the class "jv-mInputLarge" const divElement = container.querySelector(`div.${LARGE_CSS_CLASS}`); @@ -80,7 +80,7 @@ describe("TimePickerTextFieldInputControl tests", () => { const cssClass = "jv-mInput"; // Render the component const { container } = render( - getTimePicketTextFieldIC({ className: cssClass }), + getTimePickerTextFieldIC({ className: cssClass }), ); // Use querySelector to get the first div with the class "jv-mInputLarge" @@ -95,7 +95,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // test readOnly prop test("check the component is read-only", () => { // Render the component - const { container } = render(getTimePicketTextFieldIC({ readOnly: true })); + const { container } = render(getTimePickerTextFieldIC({ readOnly: true })); let inputElement = container.querySelector("input") as HTMLInputElement; // Assert that the element is found and has the expected attribute @@ -107,7 +107,7 @@ describe("TimePickerTextFieldInputControl tests", () => { test("check the component is visible or not", () => { const HIDDEN_CLASS_NAME = "jv-uVisibility-hide"; // Render the component - const { container } = render(getTimePicketTextFieldIC({ visible: false })); + const { container } = render(getTimePickerTextFieldIC({ visible: false })); // Use querySelector to get the first div with the class "jv-mInputLarge" const divElement = container.querySelector(`div.${HIDDEN_CLASS_NAME}`); @@ -119,7 +119,7 @@ describe("TimePickerTextFieldInputControl tests", () => { // Test for mandatory field test("verify the field shows error when mandatory prop is set", () => { const CSS_ERROR_CLASS = "jv-uMandatory"; - const { container } = render(getTimePicketTextFieldIC({ mandatory: true })); + const { container } = render(getTimePickerTextFieldIC({ mandatory: true })); let wrapperDiv = container.querySelector( `div.${CSS_ERROR_CLASS}`, ) as HTMLInputElement; From 07b6cc049e90b926db86cd7ceacf124ac7cc73bc Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 11:46:43 -0600 Subject: [PATCH 10/15] typo fixed --- ...teTimePickerTextFieldInputControl.test.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx index 3a449f86..d828cc83 100644 --- a/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx +++ b/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx @@ -14,7 +14,7 @@ const requiredProps = { type: "singleValueDatetime", }; -const getDateTimePicketTextFieldIC = (options?: object): JSX.Element => { +const getDateTimePickerTextFieldIC = (options?: object): JSX.Element => { return ( { describe("DateTimePickerTextFieldInputControl tests", () => { test("DateTimePickerTextFieldInputControl is rendered correctly", () => { - const { container } = render(getDateTimePicketTextFieldIC()); + const { container } = render(getDateTimePickerTextFieldIC()); const buttonElement = container.querySelector("input"); expect(buttonElement).toBeInTheDocument(); }); @@ -32,7 +32,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { // Test for label prop test("displays the label when provided", () => { const testLabel = "Test Label"; - render(getDateTimePicketTextFieldIC({ label: testLabel })); + render(getDateTimePickerTextFieldIC({ label: testLabel })); const labelElement = screen.queryByLabelText(testLabel); expect(labelElement).toBeInTheDocument(); }); @@ -41,7 +41,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { test("uses value as the initial input value", () => { const defaultValue = "2014-09-12T15:46:18.000"; const { container } = render( - getDateTimePicketTextFieldIC({ defaultValue }), + getDateTimePickerTextFieldIC({ defaultValue }), ); const inputElement = container.querySelector("input") as HTMLInputElement; @@ -50,7 +50,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { // Test for onChange event test("updates value on change", () => { - const { container } = render(getDateTimePicketTextFieldIC({})); + const { container } = render(getDateTimePickerTextFieldIC({})); const inputElement = container.querySelector("input") as HTMLInputElement; const newValue = "2024-07-15T15:46:18.000"; fireEvent.change(inputElement, { target: { value: newValue } }); @@ -60,7 +60,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { // Test for variant prop test("changes style based on variant prop", () => { const { container } = render( - getDateTimePicketTextFieldIC({ variant: "outlined" }), + getDateTimePickerTextFieldIC({ variant: "outlined" }), ); let inputElement = container.querySelector("input") as HTMLInputElement; expect(inputElement).toHaveClass("MuiOutlinedInput-input"); @@ -69,7 +69,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { // test for default size. test("check the default size is large if it is not provided", () => { // Render the component - const { container } = render(getDateTimePicketTextFieldIC({})); + const { container } = render(getDateTimePickerTextFieldIC({})); // Use querySelector to get the first div with the class "jv-mInputLarge" const divElement = container.querySelector(`div.${LARGE_CSS_CLASS}`); @@ -84,7 +84,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { const cssClass = "jv-mInput"; // Render the component const { container } = render( - getDateTimePicketTextFieldIC({ className: cssClass }), + getDateTimePickerTextFieldIC({ className: cssClass }), ); // Use querySelector to get the first div with the class "jv-mInputLarge" @@ -100,7 +100,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { test("check the component is read-only", () => { // Render the component const { container } = render( - getDateTimePicketTextFieldIC({ readOnly: true }), + getDateTimePickerTextFieldIC({ readOnly: true }), ); let inputElement = container.querySelector("input") as HTMLInputElement; @@ -114,7 +114,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { const HIDDEN_CLASS_NAME = "jv-uVisibility-hide"; // Render the component const { container } = render( - getDateTimePicketTextFieldIC({ visible: false }), + getDateTimePickerTextFieldIC({ visible: false }), ); // Use querySelector to get the first div with the class "jv-mInputLarge" const divElement = container.querySelector(`div.${HIDDEN_CLASS_NAME}`); @@ -128,7 +128,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { test("verify the field shows error when mandatory prop is set", () => { const CSS_ERROR_CLASS = "jv-uMandatory"; const { container } = render( - getDateTimePicketTextFieldIC({ mandatory: true }), + getDateTimePickerTextFieldIC({ mandatory: true }), ); let wrapperDiv = container.querySelector( `div.${CSS_ERROR_CLASS}`, From e6bdefa0f6689d3d8e32bcfe387fc595abe79223 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 12:01:10 -0600 Subject: [PATCH 11/15] refactored code to have a central place for creating the props to pass to the input controls --- .../src/panels/BasePanel.tsx | 88 +++++-------------- 1 file changed, 22 insertions(+), 66 deletions(-) diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index 5fd46f14..135f33bd 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -17,18 +17,25 @@ export interface BasePanelProps { } export default function BasePanel(props: BasePanelProps): React.JSX.Element { + const getControlProps = (control: any) => { + return { + id: control.id, + label: control.label, + value: control.state.value, + type: control.type, + readOnly: control.readOnly, + visible: control.visible, + mandatory: control.mandatory, + uri: control.uri, + }; + }; const buildControl = (control: any) => { + const theProps = getControlProps(control); if (control.type === "bool") { return ( ); @@ -40,58 +47,30 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { } return ( ); } if (control.type === "singleValueNumber") { - return ( - - ); + return ; } if (control.type === "singleValueDate") { if (props?.config?.singleValueDate?.type === "date_picker") { return ( ); } return ( ); @@ -100,27 +79,16 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { if (props.config?.singleValueDatetime?.type === "datetime_picker") { return ( ); } return ( ); @@ -129,28 +97,16 @@ export default function BasePanel(props: BasePanelProps): React.JSX.Element { if (props.config?.singleValueTime?.type === "time_picker") { return ( ); } return ( ); From 6ae9585e892ead5465c692054ee1a0977ac2de60 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 13:14:40 -0600 Subject: [PATCH 12/15] fixed tests after factoring code for the base panel --- .../src/controls/DatePickerInputControl.tsx | 3 +- .../controls/DateTimePickerInputControl.tsx | 3 +- .../DateTimePickerTextFieldInputControl.tsx | 17 ++------- .../SingleValueNumberInputControl.tsx | 16 ++------- .../controls/SingleValueTextInputControl.tsx | 16 ++------- .../src/controls/TimePickerInputControl.tsx | 3 +- .../TimePickerTextFieldInputControl.tsx | 17 ++------- .../src/panels/BasePanel.tsx | 5 ++- .../test/DatePickerInputControl.test.tsx | 35 +++++++++++++++---- .../DatePickerTextFieldInputControl.test.tsx | 13 ++++++- .../test/DateTimePickerInputControl.test.tsx | 11 ++++-- ...teTimePickerTextFieldInputControl.test.tsx | 7 +++- .../SingleValueNumberInputControl.test.tsx | 29 +++++++++++++-- .../test/SingleValueTextInputControl.test.tsx | 17 +++++++-- .../test/TimePickerInputControl.test.tsx | 11 ++++-- .../TimePickerTextFieldInputControl.test.tsx | 9 ++++- 16 files changed, 128 insertions(+), 84 deletions(-) diff --git a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx index d023fa18..b096e03c 100644 --- a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx @@ -9,7 +9,6 @@ import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; export type DatePickerICType = "date_picker"; export interface DateICProps extends BaseInputControlProps { - value?: string; className?: string; views?: Array<"year" | "month" | "day">; disabled?: boolean; @@ -23,7 +22,7 @@ export const DatePickerInputControl = (props: DateICProps) => { } const liveState = useLiveDateFormattedState({ - initialValue: props.state?.value || props.value || "", + initialValue: props.state?.value || "", format: dateFormat, }); const controlClasses = useControlClasses([], props); diff --git a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx index 15abcb2b..4232e78d 100644 --- a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx @@ -9,7 +9,6 @@ import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; export type DateTimePickerICType = "datetime_picker"; export interface DateTimeICProps extends BaseInputControlProps { - value?: string; className?: string; views?: Array<"year" | "month" | "day" | "hours" | "minutes" | "seconds">; disabled?: boolean; @@ -34,7 +33,7 @@ export const DateTimePickerInputControl = (props: DateTimeICProps) => { ? props.views : ["year", "month", "day", "hours", "minutes", "seconds"]; const liveState = useLiveDateFormattedState({ - initialValue: props.state?.value || props.value || "", + initialValue: props.state?.value || "", format: dateFormat, }); const controlClasses = useControlClasses([], props); diff --git a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx index 425dd4f8..824ba8b6 100644 --- a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx @@ -11,8 +11,6 @@ import { useLiveState } from "./hooks/useLiveState"; export type DateTimeICType = "datetime"; export interface DateTimeTextFieldICProps extends BaseInputControlProps { - defaultValue?: string; - value?: string; variant?: "standard" | "filled" | "outlined" | undefined; className?: string; disabled?: boolean; @@ -21,18 +19,9 @@ export interface DateTimeTextFieldICProps extends BaseInputControlProps { export const DateTimePickerTextFieldInputControl = ( props: DateTimeTextFieldICProps, ) => { - const { - value, - defaultValue, - readOnly, - mandatory, - visible, - validationRules, - ...remainingProps - } = props; - const liveState = useLiveState( - props.state?.value || value || defaultValue || "", - ); + const { readOnly, mandatory, visible, validationRules, ...remainingProps } = + props; + const liveState = useLiveState(props.state?.value || ""); const controlClasses = useControlClasses([], props); const inputProps: any = {}; if (readOnly) { diff --git a/packages/jv-input-controls/src/controls/SingleValueNumberInputControl.tsx b/packages/jv-input-controls/src/controls/SingleValueNumberInputControl.tsx index 99c1e1b8..b97bda82 100644 --- a/packages/jv-input-controls/src/controls/SingleValueNumberInputControl.tsx +++ b/packages/jv-input-controls/src/controls/SingleValueNumberInputControl.tsx @@ -7,8 +7,6 @@ import { useLiveState } from "./hooks/useLiveState"; export type NumberICType = "number"; export interface NumberICProps extends BaseInputControlProps { - defaultValue?: string; - value?: string; variant?: "standard" | "filled" | "outlined" | undefined; className?: string; } @@ -26,18 +24,8 @@ const checkIfNumber = (value: string) => { * @constructor */ export const SingleValueNumberInputControl = (props: NumberICProps) => { - const { - value: theValue, - className, - defaultValue, - mandatory, - readOnly, - visible, - ...remainingProps - } = props; - const liveState = useLiveState( - props.state?.value || theValue || defaultValue || "0", - ); + const { className, mandatory, readOnly, visible, ...remainingProps } = props; + const liveState = useLiveState(props.state?.value || "0"); const controlClasses = useControlClasses([], props); // inputProps is needed to handle readOnly by TextField from MUI natively: const inputProps: any = {}; diff --git a/packages/jv-input-controls/src/controls/SingleValueTextInputControl.tsx b/packages/jv-input-controls/src/controls/SingleValueTextInputControl.tsx index aae5d850..416f44ab 100644 --- a/packages/jv-input-controls/src/controls/SingleValueTextInputControl.tsx +++ b/packages/jv-input-controls/src/controls/SingleValueTextInputControl.tsx @@ -6,8 +6,6 @@ import { useLiveState } from "./hooks/useLiveState"; export type TextFieldICType = "textField"; export interface TextFieldICProps extends BaseInputControlProps { - defaultValue?: string; - value?: string; variant?: "standard" | "filled" | "outlined" | undefined; className?: string; } @@ -20,18 +18,8 @@ export interface TextFieldICProps extends BaseInputControlProps { * @constructor */ export const SingleValueTextInputControl = (props: TextFieldICProps) => { - const { - value: theValue, - className, - defaultValue, - mandatory, - readOnly, - visible, - ...remainingProps - } = props; - const liveState = useLiveState( - props.state?.value || theValue || defaultValue || "", - ); + const { className, mandatory, readOnly, visible, ...remainingProps } = props; + const liveState = useLiveState(props.state?.value || ""); const controlClasses = useControlClasses([], props); // inputProps is needed to handle readOnly by TextField from MUI natively: const inputProps: any = {}; diff --git a/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx index ff997bad..afe2fe5c 100644 --- a/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx @@ -9,7 +9,6 @@ import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; export type TimePickerICType = "time_picker"; export interface TimeICProps extends BaseInputControlProps { - value?: string; className?: string; views?: Array<"hours" | "minutes" | "seconds">; disabled?: boolean; @@ -22,7 +21,7 @@ export const TimePickerInputControl = (props: TimeICProps) => { dateFormat = rule.dateTimeFormatValidationRule.format; } const liveState = useLiveDateFormattedState({ - initialValue: props.state?.value || props.value || "", + initialValue: props.state?.value || "", format: dateFormat, }); const controlClasses = useControlClasses([], props); diff --git a/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx index 16c349a6..87490d79 100644 --- a/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx +++ b/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx @@ -11,8 +11,6 @@ import { useLiveState } from "./hooks/useLiveState"; export type TimeICType = "time"; export interface TimeTextFieldICProps extends BaseInputControlProps { - defaultValue?: string; - value?: string; variant?: "standard" | "filled" | "outlined" | undefined; className?: string; disabled?: boolean; @@ -21,18 +19,9 @@ export interface TimeTextFieldICProps extends BaseInputControlProps { export const TimePickerTextFieldInputControl = ( props: TimeTextFieldICProps, ) => { - const { - value, - defaultValue, - readOnly, - mandatory, - visible, - validationRules, - ...remainingProps - } = props; - const liveState = useLiveState( - props.state?.value || value || defaultValue || "", - ); + const { readOnly, mandatory, visible, validationRules, ...remainingProps } = + props; + const liveState = useLiveState(props.state?.value || ""); const controlClasses = useControlClasses([], props); const inputProps: any = {}; if (readOnly) { diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index 135f33bd..0c001a48 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -1,5 +1,5 @@ import { DatePickerProvider as JVDatePickerProvider } from "@jaspersoft/jv-ui-components/material-ui/Date/DatePickerProvider"; -import * as React from "react"; +import { JSX } from "react"; import BooleanInputControl from "../controls/BooleanInputControl"; import { DatePickerInputControl } from "../controls/DatePickerInputControl"; import { DatePickerTextFieldInputControl } from "../controls/DatePickerTextFieldInputControl"; @@ -16,12 +16,11 @@ export interface BasePanelProps { config?: InputControlUserConfig; } -export default function BasePanel(props: BasePanelProps): React.JSX.Element { +export default function BasePanel(props: BasePanelProps): JSX.Element { const getControlProps = (control: any) => { return { id: control.id, label: control.label, - value: control.state.value, type: control.type, readOnly: control.readOnly, visible: control.visible, diff --git a/packages/jv-input-controls/test/DatePickerInputControl.test.tsx b/packages/jv-input-controls/test/DatePickerInputControl.test.tsx index 6d97b432..221a2ac8 100644 --- a/packages/jv-input-controls/test/DatePickerInputControl.test.tsx +++ b/packages/jv-input-controls/test/DatePickerInputControl.test.tsx @@ -6,12 +6,17 @@ import * as React from "react"; import { DatePickerInputControl } from "../src/controls/DatePickerInputControl"; const requiredProps = { - id: "date-picker-id", - label: "testDatePicker", + id: "column_date_1", + label: "column_date", mandatory: false, readOnly: false, visible: true, type: "singleValueDate", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_date_1", + id: "column_date_1", + value: "2009-09-12", + }, }; const getDatePickerIC = (options?: any): React.JSX.Element => { @@ -25,7 +30,13 @@ const getDatePickerIC = (options?: any): React.JSX.Element => { describe("DatePickerInputControl tests", () => { test("DatePickerInputControl is rendered correctly", () => { - render(getDatePickerIC({ value: "2022-04-17" })); + render( + getDatePickerIC({ + state: { + value: "2022-04-17", + }, + }), + ); const datePickerElement = screen.getByRole("textbox"); expect(datePickerElement).toBeInTheDocument(); }); @@ -41,16 +52,28 @@ describe("DatePickerInputControl tests", () => { // Test for value prop test("uses value as the initial input value", () => { const defaultValue = "04/17/2022"; - render(getDatePickerIC({ value: defaultValue })); + render( + getDatePickerIC({ + state: { + value: defaultValue, + }, + }), + ); const inputElement = screen.getByRole("textbox") as HTMLInputElement; expect(inputElement.value).toBe(defaultValue); }); // Test for onChange event test("updates value on change", () => { - render(getDatePickerIC({ value: "04/17/2022" })); + render( + getDatePickerIC({ + state: { + value: "04/17/2022", + }, + }), + ); const datePicker = screen.queryByLabelText( - "testDatePicker", + requiredProps.label, ) as HTMLInputElement; const newValue = "04/18/2022"; fireEvent.change(datePicker, { target: { value: newValue } }); diff --git a/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx index c441af74..05fb39d0 100644 --- a/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx +++ b/packages/jv-input-controls/test/DatePickerTextFieldInputControl.test.tsx @@ -12,6 +12,11 @@ const requiredProps = { readOnly: false, visible: true, type: "singleValueDate", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_date_1", + id: "column_date_1", + value: "2009-09-12", + }, }; const getDatePickerTextFieldIC = (options?: object): JSX.Element => { @@ -38,7 +43,13 @@ describe("DatePickerTextFieldInputControl tests", () => { // Test for value prop test("uses value as the initial input value", () => { const defaultValue = "2009-09-12"; - const { container } = render(getDatePickerTextFieldIC({ defaultValue })); + const { container } = render( + getDatePickerTextFieldIC({ + state: { + value: defaultValue, + }, + }), + ); const inputElement = container.querySelector("input") as HTMLInputElement; expect(inputElement.value).toBe(defaultValue); diff --git a/packages/jv-input-controls/test/DateTimePickerInputControl.test.tsx b/packages/jv-input-controls/test/DateTimePickerInputControl.test.tsx index 9b026ab1..82b30cb8 100644 --- a/packages/jv-input-controls/test/DateTimePickerInputControl.test.tsx +++ b/packages/jv-input-controls/test/DateTimePickerInputControl.test.tsx @@ -11,6 +11,11 @@ const requiredProps = { readOnly: false, visible: true, type: "singleValueDatetime", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_timestamp_1", + id: "column_timestamp_1", + value: "2014-09-12T15:46:18", + }, }; const getDateTimePickerIC = (options?: any): React.JSX.Element => { @@ -24,7 +29,7 @@ const getDateTimePickerIC = (options?: any): React.JSX.Element => { describe("DateTimePickerInputControl tests", () => { test("DateTimePickerInputControl is rendered correctly", () => { - render(getDateTimePickerIC({ value: "2014-09-12T15:46:18" })); + render(getDateTimePickerIC({ state: { value: "2014-09-12T15:46:18" } })); const datePickerElement = screen.getByRole("textbox"); expect(datePickerElement).toBeInTheDocument(); }); @@ -39,7 +44,9 @@ describe("DateTimePickerInputControl tests", () => { test("value is converted to AM/PM format", () => { render( getDateTimePickerIC({ - value: "2014-09-14T15:46:18", + state: { + value: "2014-09-14T15:46:18", + }, validationRules: [ { dateTimeFormatValidationRule: { diff --git a/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx index d828cc83..8f24e561 100644 --- a/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx +++ b/packages/jv-input-controls/test/DateTimePickerTextFieldInputControl.test.tsx @@ -12,6 +12,11 @@ const requiredProps = { readOnly: false, visible: true, type: "singleValueDatetime", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_timestamp_1", + id: "column_timestamp_1", + value: "2014-09-12T15:46:18", + }, }; const getDateTimePickerTextFieldIC = (options?: object): JSX.Element => { @@ -41,7 +46,7 @@ describe("DateTimePickerTextFieldInputControl tests", () => { test("uses value as the initial input value", () => { const defaultValue = "2014-09-12T15:46:18.000"; const { container } = render( - getDateTimePickerTextFieldIC({ defaultValue }), + getDateTimePickerTextFieldIC({ state: { value: defaultValue } }), ); const inputElement = container.querySelector("input") as HTMLInputElement; diff --git a/packages/jv-input-controls/test/SingleValueNumberInputControl.test.tsx b/packages/jv-input-controls/test/SingleValueNumberInputControl.test.tsx index c1b88461..e297ae6e 100644 --- a/packages/jv-input-controls/test/SingleValueNumberInputControl.test.tsx +++ b/packages/jv-input-controls/test/SingleValueNumberInputControl.test.tsx @@ -12,6 +12,11 @@ const requiredProps = { readOnly: false, visible: true, type: "singleValueNumber", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_float_1", + id: "column_float_1", + value: "0.33", + }, }; const getNumberIC = (options?: object): JSX.Element => { @@ -38,21 +43,39 @@ describe("SingleValueNumberInputControls tests", () => { // Test for value prop test("uses value as the initial input value", () => { const defaultValue = "1,786"; - render(getNumberIC({ defaultValue })); + render( + getNumberIC({ + state: { + value: defaultValue, + }, + }), + ); const inputElement = screen.getByRole("textbox") as HTMLInputElement; expect(inputElement.value).toBe(defaultValue); }); test("a string is an invalid value for this input", () => { const defaultValue = "this is a string"; - render(getNumberIC({ defaultValue })); + render( + getNumberIC({ + state: { + value: defaultValue, + }, + }), + ); const element = screen.getByText("Specify a valid value for type number."); expect(element).toBeVisible(); }); test("a combination of numbers and strings is an invalid value", () => { const defaultValue = "1.23e-10"; - render(getNumberIC({ defaultValue })); + render( + getNumberIC({ + state: { + value: defaultValue, + }, + }), + ); const element = screen.getByText("Specify a valid value for type number."); expect(element).toBeVisible(); }); diff --git a/packages/jv-input-controls/test/SingleValueTextInputControl.test.tsx b/packages/jv-input-controls/test/SingleValueTextInputControl.test.tsx index 324f0983..105db58b 100644 --- a/packages/jv-input-controls/test/SingleValueTextInputControl.test.tsx +++ b/packages/jv-input-controls/test/SingleValueTextInputControl.test.tsx @@ -6,12 +6,17 @@ import * as React from "react"; const LARGE_CSS_CLASS = SizeToClass.large; const requiredProps = { - id: "0", - label: "test", + id: "column_string_1", + label: "column_string_1", mandatory: false, readOnly: false, visible: true, type: "singleValueText", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_string_1", + id: "column_string_1", + value: "ddd", + }, }; const getTextIC = (options?: object): React.JSX.Element => { @@ -36,7 +41,13 @@ describe("SingleValueTextInputControls tests", () => { // Test for value prop test("uses value as the initial input value", () => { const defaultValue = "Default Value"; - render(getTextIC({ defaultValue })); + render( + getTextIC({ + state: { + value: defaultValue, + }, + }), + ); const inputElement = screen.getByRole("textbox") as HTMLInputElement; expect(inputElement.value).toBe(defaultValue); }); diff --git a/packages/jv-input-controls/test/TimePickerInputControl.test.tsx b/packages/jv-input-controls/test/TimePickerInputControl.test.tsx index 39408e23..1d374c0d 100644 --- a/packages/jv-input-controls/test/TimePickerInputControl.test.tsx +++ b/packages/jv-input-controls/test/TimePickerInputControl.test.tsx @@ -11,6 +11,11 @@ const requiredProps = { readOnly: false, visible: true, type: "singleValueTime", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_time_1", + id: "column_time_1", + value: "23:44:21", + }, }; const getTimePickerIC = (options?: any): JSX.Element => { @@ -24,7 +29,7 @@ const getTimePickerIC = (options?: any): JSX.Element => { describe("TimePickerInputControl tests", () => { test("TimePickerInputControl is rendered correctly", () => { - render(getTimePickerIC({ value: "15:46:18" })); + render(getTimePickerIC({ state: { value: "15:46:18" } })); const datePickerElement = screen.getByRole("textbox"); expect(datePickerElement).toBeInTheDocument(); }); @@ -39,7 +44,9 @@ describe("TimePickerInputControl tests", () => { test("value is converted to AM/PM format", () => { render( getTimePickerIC({ - value: "15:46:18", + state: { + value: "15:46:18", + }, validationRules: [ { dateTimeFormatValidationRule: { diff --git a/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx b/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx index b21778c9..b94664ea 100644 --- a/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx +++ b/packages/jv-input-controls/test/TimePickerTextFieldInputControl.test.tsx @@ -12,6 +12,11 @@ const requiredProps = { readOnly: false, visible: true, type: "singleValueTime", + state: { + uri: "/public/Visualize/Adhoc/Ad_Hoc_View_All_filters_files/column_time_1", + id: "column_time_1", + value: "23:44:21", + }, }; const getTimePickerTextFieldIC = (options?: object): JSX.Element => { @@ -38,7 +43,9 @@ describe("TimePickerTextFieldInputControl tests", () => { // Test for value prop test("uses value as the initial input value", () => { const defaultValue = "23:44:21"; - const { container } = render(getTimePickerTextFieldIC({ defaultValue })); + const { container } = render( + getTimePickerTextFieldIC({ state: { value: defaultValue } }), + ); const inputElement = container.querySelector("input") as HTMLInputElement; expect(inputElement.value).toBe(defaultValue); From d92a3829255b53662d39bcb96aae5bd0d3af4244 Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 13:26:47 -0600 Subject: [PATCH 13/15] added explicit types to not forget the definition --- packages/test-app/src/App.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/test-app/src/App.tsx b/packages/test-app/src/App.tsx index ba237cd4..f0315707 100644 --- a/packages/test-app/src/App.tsx +++ b/packages/test-app/src/App.tsx @@ -89,6 +89,9 @@ export default function App(props: AppConfig) { singleValueTime: { type: "time", // even if it isn't provided, this will be the default component }, + singleValueDate: { + type: "date", // even if it isn't provided, this will be the default component + }, }, }, ); From a88e08aebc5435b8935b1b45d84551f366aa3a7d Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Wed, 17 Jul 2024 15:33:18 -0600 Subject: [PATCH 14/15] state prop added to default props --- packages/jv-input-controls/src/panels/BasePanel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index 0c001a48..af0301ee 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -26,6 +26,7 @@ export default function BasePanel(props: BasePanelProps): JSX.Element { visible: control.visible, mandatory: control.mandatory, uri: control.uri, + state: control.state, }; }; const buildControl = (control: any) => { From cdd5b83743c42dce63e92db31251e1db4cd6ce7f Mon Sep 17 00:00:00 2001 From: Eduardo Canche Vazquez Date: Mon, 22 Jul 2024 10:58:02 -0600 Subject: [PATCH 15/15] Names for the default and material date selectors updated as discussed in our meeting. --- .../src/controls/DatePickerInputControl.tsx | 2 +- .../src/controls/DateTimePickerInputControl.tsx | 2 +- .../src/controls/DateTimePickerTextFieldInputControl.tsx | 2 +- .../src/controls/TimePickerInputControl.tsx | 2 +- .../src/controls/TimePickerTextFieldInputControl.tsx | 2 +- packages/jv-input-controls/src/panels/BasePanel.tsx | 6 +++--- packages/test-app/src/App.tsx | 6 +++--- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx index b096e03c..d829b909 100644 --- a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx @@ -6,7 +6,7 @@ import { import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; -export type DatePickerICType = "date_picker"; +export type DatePickerICType = "material"; export interface DateICProps extends BaseInputControlProps { className?: string; diff --git a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx index 4232e78d..121b800e 100644 --- a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx @@ -6,7 +6,7 @@ import { import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; -export type DateTimePickerICType = "datetime_picker"; +export type DateTimePickerICType = "material"; export interface DateTimeICProps extends BaseInputControlProps { className?: string; diff --git a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx index 824ba8b6..f75221f9 100644 --- a/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx +++ b/packages/jv-input-controls/src/controls/DateTimePickerTextFieldInputControl.tsx @@ -8,7 +8,7 @@ import { BaseInputControlProps } from "./BaseInputControl"; import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveState } from "./hooks/useLiveState"; -export type DateTimeICType = "datetime"; +export type DateTimeICType = "default"; export interface DateTimeTextFieldICProps extends BaseInputControlProps { variant?: "standard" | "filled" | "outlined" | undefined; diff --git a/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx index afe2fe5c..298f7680 100644 --- a/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx +++ b/packages/jv-input-controls/src/controls/TimePickerInputControl.tsx @@ -6,7 +6,7 @@ import { import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState"; -export type TimePickerICType = "time_picker"; +export type TimePickerICType = "material"; export interface TimeICProps extends BaseInputControlProps { className?: string; diff --git a/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx index 87490d79..ec66f7c8 100644 --- a/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx +++ b/packages/jv-input-controls/src/controls/TimePickerTextFieldInputControl.tsx @@ -8,7 +8,7 @@ import { BaseInputControlProps } from "./BaseInputControl"; import { useControlClasses } from "./hooks/useControlClasses"; import { useLiveState } from "./hooks/useLiveState"; -export type TimeICType = "time"; +export type TimeICType = "default"; export interface TimeTextFieldICProps extends BaseInputControlProps { variant?: "standard" | "filled" | "outlined" | undefined; diff --git a/packages/jv-input-controls/src/panels/BasePanel.tsx b/packages/jv-input-controls/src/panels/BasePanel.tsx index af0301ee..2ac1305d 100644 --- a/packages/jv-input-controls/src/panels/BasePanel.tsx +++ b/packages/jv-input-controls/src/panels/BasePanel.tsx @@ -58,7 +58,7 @@ export default function BasePanel(props: BasePanelProps): JSX.Element { } if (control.type === "singleValueDate") { - if (props?.config?.singleValueDate?.type === "date_picker") { + if (props?.config?.singleValueDate?.type === "material") { return (