fix(global): 🐛 fix CoreDatePicker not working

fix CoreDatePicker not working Ref: #344
wrappid · Oct 14, 2024 · d74472b · d74472b
1 parent a75bac6
commit d74472b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 47 deletions.
diff --git a/package/components/dataDisplay/dataTable/CoreDataTableDetailsPane.js b/package/components/dataDisplay/dataTable/CoreDataTableDetailsPane.js
@@ -8,7 +8,7 @@ import { WrappidDataContext } from "@wrappid/styles";
 import CoreDataTableDetailsPaneContainer from "./CoreDataTableDetailsPaneContainer";
 import CoreTableAction from "./CoreTableAction";
 import TableRowAuditData from "./TableRowAuditData";
-import { ENV_DEV_MODE, MEDIUM_WINDOW_WIDTH } from "../../../config/constants";
+import { ENV_DEV_MODE, SMALL_WINDOW_WIDTH } from "../../../config/constants";
 import CoreClasses from "../../../styles/CoreClasses";
 import { getLabel } from "../../../utils/stringUtils";
 import { APP_PLATFORM } from "../../../utils/themeUtil";
@@ -122,7 +122,7 @@ export default function CoreDataTableDetailsPane(props) {
                 rowActions.length > 0 && (
                   <CoreTableAction
                     gridProps={
-                      window.windowWidth < MEDIUM_WINDOW_WIDTH ||
+                      window.innerWidth < SMALL_WINDOW_WIDTH ||
                       config?.wrappid?.platform === APP_PLATFORM
                         ? { gridSize: 10 }
                         : { gridSize: 12 }
@@ -139,7 +139,7 @@ export default function CoreDataTableDetailsPane(props) {
                   />
                 )}
 
-                {(window.windowWidth < MEDIUM_WINDOW_WIDTH ||
+                {(window.innerWidth < SMALL_WINDOW_WIDTH ||
                 config?.wrappid?.platform === APP_PLATFORM) && (
                   <CoreIconButton
                     gridProps={detailedRowData ? { gridSize: 2 } : { gridSize: 12 }}
@@ -161,7 +161,7 @@ export default function CoreDataTableDetailsPane(props) {
                 rowActions.length > 0 && (
                   <CoreTableAction
                     gridProps={
-                      window.windowWidth < MEDIUM_WINDOW_WIDTH ||
+                      window.innerWidth < SMALL_WINDOW_WIDTH ||
                       config?.wrappid?.platform === APP_PLATFORM
                         ? { gridSize: 10 }
                         : { gridSize: 12 }
@@ -178,7 +178,7 @@ export default function CoreDataTableDetailsPane(props) {
                   />
                 )}
 
-                {(window.windowWidth < MEDIUM_WINDOW_WIDTH ||
+                {(window.innerWidth < SMALL_WINDOW_WIDTH ||
                 config?.wrappid?.platform === APP_PLATFORM) && (
                   <CoreIconButton
                     gridProps={detailedRowData ? { gridSize: 2 } : { gridSize: 12 }}

diff --git a/package/components/inputs/CoreDatepicker.js b/package/components/inputs/CoreDatepicker.js
@@ -7,11 +7,13 @@ import { NativeDatepicker } from "@wrappid/native";
 import CoreFormErrorText from "./CoreFormErrorText";
 import CoreFormHelperText from "./CoreFormHelperText";
 import CoreClasses from "../../styles/CoreClasses";
-import { sanitizeComponentProps } from "../../utils/componentUtil";
+// eslint-disable-next-line etc/no-commented-out-code
+// import { sanitizeComponentProps } from "../../utils/componentUtil";
 import CoreBox from "../layouts/CoreBox";
 
 export default function CoreDatePicker(props) {
-  props = sanitizeComponentProps(CoreDatePicker, props);
+  // eslint-disable-next-line etc/no-commented-out-code
+  // props = sanitizeComponentProps(CoreDatePicker, props);
 
   const { error, helperText } = props;
 
@@ -99,7 +101,7 @@ CoreDatePicker.validProps = [
   },
   {
     name : "view",
-    types: [{ type: "day" }, { type: "month" }, { type: "year" }],
+    types: [{ type: "number" }],
   },
   {
     name : "closeOnSelect",

diff --git a/package/components/inputs/CoreMultiTimeRangePicker.js b/package/components/inputs/CoreMultiTimeRangePicker.js
@@ -14,28 +14,10 @@ import CoreBox from "../layouts/CoreBox";
 import CoreGrid from "../layouts/CoreGrid";
 
 export default function CoreMultiTimeRangePicker(props) {
-  const { id, label, value, formik } = props;
-  const [startTime, setStartTime] = React.useState(props?.value || "");
-  const [endTime, setEndTime] = React.useState(props?.value || "");
-  const onChangeStartTime = (value) => {
-    if(formik){
-      formik?.setFieldValue(id, value);
-    }
-    if(props?.onChange){
-      props?.onChange(value);
-    }
-    setStartTime(value);
-  };
-  const onChangeEndTime = (value) => {
-    if(formik){
-      formik?.setFieldValue(id, value);
-    }
-    if(props?.onChange){
-      props?.onChange(value);
-    }
-    setEndTime(value);
-  };
-
+  const {
+    // eslint-disable-next-line no-unused-vars
+    id, label, onChange, value, formik, ampm 
+  } = props;
   const [timeRanges, setTimeRanges] = React.useState([
     {
       endTime  : null,
@@ -68,12 +50,12 @@ export default function CoreMultiTimeRangePicker(props) {
     setTimeRanges(y);
   };
 
-  // const _handleChange = (i, v, type) => {
-  //   let x = [...timeRanges];
+  const _handleChange = (i, v, type) => {
+    let x = [...timeRanges];
 
-  //   x[i][type] = v?.format("LLL");
-  //   formik.setFieldValue(props.id, x);
-  // };
+    x[i][type] = v?.format("LLL");
+    formik.setFieldValue(props.id, x);
+  };
 
   // -- console.log("END VALUE", id, spValue, value);
 
@@ -89,8 +71,10 @@ export default function CoreMultiTimeRangePicker(props) {
             label={props.startTimeLabel ? props.startTimeLabel : "Start Time"}
             inputFormat={props.ampm ? "hh:mm" : "HH:MM"}
             ampm={props.ampm ? true : false}
-            value={timeRange.startTime ? moment(timeRange.startTime) : startTime}
-            onChange={onChangeStartTime}
+            value={timeRange.startTime ? moment(timeRange.startTime) : null}
+            onChange={(v) => {
+              _handleChange(index, v, "startTime");
+            }}
             touched={props.touched}
             error={props.error}
           />
@@ -101,8 +85,10 @@ export default function CoreMultiTimeRangePicker(props) {
             label={props.endTimeLabel ? props.endTimeLabel : "End Time"}
             inputFormat={props.ampm ? "hh:mm" : "HH:MM"}
             ampm={props.ampm ? true : false}
-            value={timeRange.endTime ? moment(timeRange.endTime) : endTime}
-            onChange={onChangeEndTime}
+            value={timeRange.endTime ? moment(timeRange.endTime) : null}
+            onChange={(v) => {
+              _handleChange(index, v, "endTime");
+            }}
             touched={props.touched}
             error={props.error}
           />
@@ -132,11 +118,4 @@ export default function CoreMultiTimeRangePicker(props) {
       </CoreFormHelperText>
     </CoreBox>
   );
-}
-CoreMultiTimeRangePicker.validProps = [
-  {
-    name : "formik",
-    types: [{ type: "object" }]
-  }
-];
-CoreMultiTimeRangePicker.invalidProps = [];
+}