@gisce/react-ooui 1.2.6-rc.3 → 1.2.7-rc.0

package/dist/widgets/WidgetFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0H1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6H1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Time as TimeOoui } from "@gisce/ooui";
+import { WidgetProps } from '../../types';
+declare const Time: (props: WidgetProps) => React.JSX.Element;
+declare type TimeInputProps = {
+    ooui: TimeOoui;
+    value?: string;
+    onChange?: (value?: string) => void;
+};
+export declare const TimeInput: (props: TimeInputProps) => React.JSX.Element;
+export default Time;
+//# sourceMappingURL=Time.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["Time.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQtC,QAAA,MAAM,IAAI,UAAW,WAAW,sBAQ/B,CAAC;AAEF,aAAK,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,CAAA;AAED,eAAO,MAAM,SAAS,UAAW,cAAc,sBAU9C,CAAA;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.2.6-rc.3",
+  "version": "1.2.7-rc.0",
   "files": [
     "dist",
     "src",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/fiber-diagram": "^1.1.0-rc.3",
-    "@gisce/ooui": "^0.20.0",
+    "@gisce/ooui": "^0.21.0",
     "@gisce/react-formiga-components": "^1.0.9-rc.21",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",

package/src/index.ts

@@ -23,6 +23,7 @@ import { ExportModal } from "@/widgets/modals/ExportModal";
 import { SearchModal } from "@/widgets/modals/SearchModal";
 import Date from "@/widgets/base/Date";
 import DateTime from "@/widgets/base/DateTime";
+import Time from "@/widgets/base/Time";
 import type {
   One2manyValue,
   One2manyItem,
@@ -122,6 +123,7 @@ export {
   One2manyValue,
   Date,
   DateTime,
+  Time,
   Reference,
   Binary,
   iconMapper,

package/src/stories/Time.stories.tsx

@@ -0,0 +1,32 @@
+// @ts-ignore
+import React, { useState } from "react";
+
+import { TimeInput } from "../widgets/base/Time";
+import { Time as TimeOoui } from "@gisce/ooui";
+
+
+import LocaleProvider from "../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Base/Time",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TimeOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+
+  const [value, setValue] = useState<string>('23:12:34');
+
+  const onChange = (value: string) => {
+    console.log(value);
+    setValue(value);
+  }
+
+  return (
+    <LocaleProvider lang="en_US">
+      <TimeInput ooui={ooui} onChange={onChange} value={value} />
+    </LocaleProvider>
+  );
+};

package/src/widgets/WidgetFactory.tsx

@@ -15,6 +15,7 @@ import {
   Float,
   Date,
   DateTime,
+  Time,
   One2many,
   Separator,
   Form,
@@ -75,6 +76,8 @@ const getWidgetType = (type: string) => {
       return Date;
     case "datetime":
       return DateTime;
+    case "time":
+      return Time;
     case "one2many":
     case "one2many_list":
     case "many2many":

package/src/widgets/base/Time.tsx

@@ -0,0 +1,41 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { TimePicker, theme } from "antd";
+import Field from "@/common/Field";
+import { Time as TimeOoui } from "@gisce/ooui";
+import { WidgetProps } from "@/types";
+import dayjs from "dayjs";
+import { Dayjs } from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+
+dayjs.extend(customParseFormat)
+
+const Time = (props: WidgetProps) => {
+  const { ooui } = props;
+
+  return (
+    <Field {...props}>
+      <TimeInput ooui={ooui as TimeOoui} />
+    </Field>
+  );
+};
+
+type TimeInputProps = {
+  ooui: TimeOoui;
+  value?: string;
+  onChange?: (value?: string) => void;
+}
+
+export const TimeInput = (props: TimeInputProps) => {
+
+  const onChange = (time: Dayjs | null, timestring: string) => {
+    if (props.onChange) {
+      props.onChange(timestring)
+    }
+  }
+
+  return <TimePicker onChange={onChange} value={props.value ? dayjs(props.value, 'HH:mm:ss') : undefined} />
+
+}
+
+export default Time;