Merge pull request #21 from Jaspersoft/date-textfield-input-control

Date/DateTime/Time based on text field input controls
Jaspersoft · Jul 22, 2024 · 30a06ca · 30a06ca
2 parents e8befb4 + ea59d30
commit 30a06ca
Show file tree

Hide file tree

Showing 24 changed files with 761 additions and 133 deletions.
diff --git 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": {

diff --git a/packages/jv-input-controls/src/InputControls.tsx b/packages/jv-input-controls/src/InputControls.tsx
@@ -1,11 +1,14 @@
 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 { DatePickerICType } from "./controls/DatePickerInputControl";
+import { DateICType } from "./controls/DatePickerTextFieldInputControl";
+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";
 
@@ -27,13 +30,13 @@ export interface InputControlUserConfig {
     type: NumberICType;
   };
   singleValueDate?: {
-    type: DateICType;
+    type: DateICType | DatePickerICType;
   };
   singleValueDatetime?: {
-    type: DateTimeICType;
+    type: DateTimeICType | DateTimePickerICType;
   };
   singleValueTime?: {
-    type: TimeICType;
+    type: TimeICType | TimePickerICType;
   };
 }
 

diff --git a/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DatePickerInputControl.tsx
@@ -6,10 +6,9 @@ import {
 import { useControlClasses } from "./hooks/useControlClasses";
 import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState";
 
-export type DateICType = "Date";
+export type DatePickerICType = "material";
 
 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/DatePickerTextFieldInputControl.tsx b/packages/jv-input-controls/src/controls/DatePickerTextFieldInputControl.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 DateICType = "default";
+
+export interface DateTextFieldICProps extends BaseInputControlProps {
+  variant?: "standard" | "filled" | "outlined" | undefined;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DatePickerTextFieldInputControl = (
+  props: DateTextFieldICProps,
+) => {
+  const { readOnly, mandatory, visible, validationRules, ...remainingProps } =
+    props;
+  const liveState = useLiveState(props.state?.value || "");
+  const controlClasses = useControlClasses([], props);
+  const inputProps: any = {};
+  if (readOnly) {
+    inputProps.readOnly = true;
+  }
+  const theInputProps = { ...inputProps, ...liveState };
+  return (
+    <JVDateTimeTextField
+      {...remainingProps}
+      type="date"
+      variant={props.variant || "outlined"}
+      className={`jv-mInputDate ${controlClasses.join(" ")} ${props.className || ""}`}
+      InputProps={theInputProps}
+    />
+  );
+};
diff --git a/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx b/packages/jv-input-controls/src/controls/DateTimePickerInputControl.tsx
@@ -6,10 +6,9 @@ import {
 import { useControlClasses } from "./hooks/useControlClasses";
 import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState";
 
-export type DateTimeICType = "datetime";
+export type DateTimePickerICType = "material";
 
 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
@@ -0,0 +1,40 @@
+/*
+ * 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 = "default";
+
+export interface DateTimeTextFieldICProps extends BaseInputControlProps {
+  variant?: "standard" | "filled" | "outlined" | undefined;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DateTimePickerTextFieldInputControl = (
+  props: DateTimeTextFieldICProps,
+) => {
+  const { readOnly, mandatory, visible, validationRules, ...remainingProps } =
+    props;
+  const liveState = useLiveState(props.state?.value || "");
+  const controlClasses = useControlClasses([], props);
+  const inputProps: any = {};
+  if (readOnly) {
+    inputProps.readOnly = true;
+  }
+  const theInputProps = { ...inputProps, ...liveState };
+  return (
+    <JVDateTimeTextField
+      {...remainingProps}
+      type="datetime-local"
+      variant={props.variant || "outlined"}
+      className={`jv-mInputDatetime ${controlClasses.join(" ")} ${props.className || ""}`}
+      InputProps={theInputProps}
+    />
+  );
+};
diff --git 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
@@ -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
@@ -6,10 +6,9 @@ import {
 import { useControlClasses } from "./hooks/useControlClasses";
 import { useLiveDateFormattedState } from "./hooks/useLiveDateFormattedState";
 
-export type TimeICType = "time";
+export type TimePickerICType = "material";
 
 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
@@ -0,0 +1,40 @@
+/*
+ * 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 = "default";
+
+export interface TimeTextFieldICProps extends BaseInputControlProps {
+  variant?: "standard" | "filled" | "outlined" | undefined;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const TimePickerTextFieldInputControl = (
+  props: TimeTextFieldICProps,
+) => {
+  const { readOnly, mandatory, visible, validationRules, ...remainingProps } =
+    props;
+  const liveState = useLiveState(props.state?.value || "");
+  const controlClasses = useControlClasses([], props);
+  const inputProps: any = {};
+  if (readOnly) {
+    inputProps.readOnly = true;
+  }
+  const theInputProps = { ...inputProps, ...liveState };
+  return (
+    <JVDateTimeTextField
+      {...remainingProps}
+      type="time"
+      variant={props.variant || "outlined"}
+      className={`jv-mInputTime ${controlClasses.join(" ")} ${props.className || ""}`}
+      InputProps={theInputProps}
+    />
+  );
+};