@gisce/react-ooui 2.0.0-alpha.57 → 2.0.0-alpha.59

package/dist/ui/TitleHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleHeader.d.ts","sourceRoot":"","sources":["../../src/ui/TitleHeader.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,2CAkGhC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TitleHeader.d.ts","sourceRoot":"","sources":["../../src/ui/TitleHeader.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,2CAgGhC;AAED,eAAe,WAAW,CAAC"}

package/dist/widgets/base/Time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["../../../src/widgets/base/Time.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,QAAA,MAAM,IAAI,UAAW,WAAW,4CAQ/B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,4CAa9C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["../../../src/widgets/base/Time.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKtC,QAAA,MAAM,IAAI,UAAW,WAAW,4CAQ/B,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,SAAS,UAAW,cAAc,4CAc9C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/widgets/views/searchFilter/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/searchFilter/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,mBAAmB,UAAW,WAAW,4CAoDrD,CAAC"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/searchFilter/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,eAAO,MAAM,mBAAmB,UAAW,WAAW,4CAgDrD,CAAC"}

package/dist/widgets/views/searchFilter/SearchBottomBar.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
+import { ReactElement } from "react";
 type Props = {
     advancedFilter: boolean;
     isSearching: boolean;
     onAdvancedFilterToggle: () => void;
     onClear: () => void;
 };
-export declare function SearchBottomBar(props: Props): React.ReactElement;
+export declare function SearchBottomBar(props: Props): ReactElement;
 export {};
 //# sourceMappingURL=SearchBottomBar.d.ts.map

package/dist/widgets/views/searchFilter/SearchBottomBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBottomBar.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/searchFilter/SearchBottomBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAY1C,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,YAAY,CAkChE"}
+{"version":3,"file":"SearchBottomBar.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/searchFilter/SearchBottomBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAc,MAAM,OAAO,CAAC;AAYjD,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,CAkC1D"}

package/dist/widgets/views/searchFilter/SearchFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/searchFilter/SearchFilter.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAOvC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,YAAY,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,2CAyHjC;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchFilter.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/searchFilter/SearchFilter.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAOvC,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,YAAY,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,iBAAS,YAAY,CAAC,KAAK,EAAE,KAAK,2CA0HjC;AAED,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.0.0-alpha.57",
+  "version": "2.0.0-alpha.59",
   "engines": {
     "node": "20.5.0"
   },

package/src/common/DatePicker.tsx

@@ -88,6 +88,9 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
       format={DatePickerConfig[mode].dateDisplayFormat}
       value={dateValue}
       onChange={onValueStringChange}
+      showNow={false}
+      showToday={false}
+      changeOnBlur={true}
     />
   );
 };

package/src/common/TimePicker.tsx

@@ -0,0 +1,38 @@
+import { TimePicker as AntTimePicker } from "antd";
+import { useRef } from "react";
+import { Dayjs } from "dayjs";
+
+interface TimePickerProps {
+  value?: Dayjs | null;
+  onChange: (newValue: Dayjs | null, timestring?: string) => void;
+  numberOfSelectsToHide?: number;
+  [key: string]: any; // Accept any additional props
+}
+
+export const TimePicker = ({
+  value,
+  onChange,
+  numberOfSelectsToHide = 2,
+  ...rest
+}: TimePickerProps) => {
+  const picker = useRef<any>();
+  const pickerSelectedTimes = useRef(0);
+  return (
+    <AntTimePicker
+      {...rest}
+      ref={picker}
+      value={value}
+      onChange={onChange}
+      showNow={false}
+      changeOnBlur={true}
+      onSelect={(newValue) => {
+        onChange?.(newValue);
+        pickerSelectedTimes.current += 1;
+        if (pickerSelectedTimes.current === numberOfSelectsToHide) {
+          picker.current?.blur();
+          pickerSelectedTimes.current = 0;
+        }
+      }}
+    />
+  );
+};

package/src/ui/TitleHeader.tsx

@@ -95,9 +95,7 @@ function TitleHeader(props: Props) {
           padding: "1em",
           borderRadius: token.borderRadius,
           backgroundColor: token.colorPrimaryBg,
-          height: "82px",
           minHeight: "82px",
-          maxHeight: "82px",
         }}
         align="middle"
       >

package/src/widgets/base/Time.tsx

@@ -1,9 +1,9 @@
-import { TimePicker } from "antd";
 import Field from "@/common/Field";
 import { Time as TimeOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import dayjs from "@/helpers/dayjs";
 import { Dayjs } from "dayjs";
+import { TimePicker } from "../../common/TimePicker";
 
 const Time = (props: WidgetProps) => {
   const { ooui } = props;
@@ -22,7 +22,7 @@ type TimeInputProps = {
 };
 
 export const TimeInput = (props: TimeInputProps) => {
-  const onChange = (time: Dayjs | null, timestring: string) => {
+  const onChange = (time: Dayjs | null, timestring?: string) => {
     if (props.onChange) {
       props.onChange(timestring);
     }
@@ -31,6 +31,7 @@ export const TimeInput = (props: TimeInputProps) => {
   return (
     <TimePicker
       onChange={onChange}
+      numberOfSelectsToHide={3} // Since it has hours, minutes, and seconds
       value={props.value ? dayjs(props.value, "HH:mm:ss") : undefined}
     />
   );

package/src/widgets/views/searchFilter/DateTimeRangePicker.tsx

@@ -1,10 +1,9 @@
-import { DatePicker, TimePicker, Row, Col } from "antd";
-
-import React from "react";
+import { DatePicker, Row, Col } from "antd";
 import Field from "@/common/Field";
 import { Field as FieldOoui, Label as LabelOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Label from "@/widgets/base/Label";
+import { TimePicker } from "../../../common/TimePicker";
 
 export const DateTimeRangePicker = (props: WidgetProps) => {
   const { ooui, showLabel = false } = props;
@@ -48,14 +47,41 @@ export const DateTimeRangePicker = (props: WidgetProps) => {
         </Col>
         <Col>
           <Field {...props} ooui={fields[1]} showLabel={false}>
-            <TimePicker.RangePicker
-              className="w-60"
-              allowEmpty={[true, true]}
-              format={"HH:mm"}
-            ></TimePicker.RangePicker>
+            <TimeRangePicker />
           </Field>
         </Col>
       </Row>
     </>
   );
 };
+
+const TimeRangePicker = ({
+  value,
+  onChange,
+}: {
+  value?: any;
+  onChange?: (newValue: any) => void;
+}) => {
+  return (
+    <div style={{ marginTop: 5 }}>
+      <TimePicker
+        placeholder="Start time"
+        format={"HH:mm"}
+        style={{ width: 115, marginRight: 10 }}
+        value={value?.[0]}
+        onChange={(newValue) => {
+          onChange?.([newValue, value?.[1]]);
+        }}
+      />
+      <TimePicker
+        placeholder="End time"
+        style={{ width: 115 }}
+        format={"HH:mm"}
+        value={value?.[1]}
+        onChange={(newValue) => {
+          onChange?.([value?.[0], newValue]);
+        }}
+      />
+    </div>
+  );
+};

package/src/widgets/views/searchFilter/SearchBottomBar.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { ReactElement, useContext } from "react";
 
 import { Row, Col, Button } from "antd";
 import {
@@ -17,7 +17,7 @@ type Props = {
   onClear: () => void;
 };
 
-export function SearchBottomBar(props: Props): React.ReactElement {
+export function SearchBottomBar(props: Props): ReactElement {
   const { onAdvancedFilterToggle, advancedFilter, onClear, isSearching } =
     props;
 

package/src/widgets/views/searchFilter/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Form, Row, Col, Alert, theme } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 
@@ -60,6 +60,7 @@ function SearchFilter(props: Props) {
 
   useEffect(() => {
     form.setFieldsValue(searchValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchValues]);
 
   const getRowsAndCols = () => {