@gisce/react-ooui 1.2.0-rc.79 → 1.2.0-rc.81

package/src/widgets/base/one2many/One2manyTopBar.tsx

@@ -11,6 +11,8 @@ import {
   ApiOutlined,
 } from "@ant-design/icons";
 import { ViewType } from "@/types";
+import { theme } from "antd";
+const { useToken } = theme;
 
 type One2manyTopBarProps = {
   title: string;
@@ -49,6 +51,7 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
     showCreateButton,
     showToggleButton,
   } = props;
+  const { token } = useToken();
 
   function separator() {
     return <div className="inline-block w-3" />;
@@ -56,7 +59,13 @@ export const One2manyTopBar = (props: One2manyTopBarProps) => {
 
   function title() {
     return (
-      <div className="flex flex-grow h-8 text-gray-200 bg-gray-700">
+      <div
+        className="flex flex-grow h-8 text-white"
+        style={{
+          borderRadius: token.borderRadius,
+          backgroundColor: token.colorPrimaryActive,
+        }}
+      >
         <div className="flex flex-col items-center justify-center h-full">
           <span className="pl-2 font-bold">{titleString}</span>
         </div>

package/src/widgets/custom/FiberGrid.tsx

@@ -2,14 +2,11 @@ import React from "react";
 import Field from "@/common/Field";
 import { Char as CharOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { GridUi } from "fiber-diagram";
 
 export const FiberGrid = (props: WidgetProps) => {
   const { ooui } = props;
-  const { id, readOnly, required } = ooui as CharOoui;
-  // const requiredClass =
-  //   required && !readOnly ? Config.requiredClass : undefined;
+  const { required } = ooui as CharOoui;
 
   return (
     <Field required={required} {...props}>

package/src/widgets/custom/Indicator.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { Tooltip } from "antd";
+import { Tooltip, theme } from "antd";
 import { Statistic, Card } from "antd";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
 import Field from "@/common/Field";
-import {QuestionCircleOutlined} from "@ant-design/icons";
+import { QuestionCircleOutlined } from "@ant-design/icons";
 import iconMapper from "@/helpers/iconMapper";
+const { useToken } = theme;
 
 type IndicatorProps = WidgetProps & {
-  ooui: IndicatorOoui
+  ooui: IndicatorOoui;
   value?: number;
 };
 
@@ -25,18 +26,22 @@ export const Indicator = (props: IndicatorProps) => {
 type IndicatorInputProps = {
   ooui: IndicatorOoui;
   value?: any;
-}
+};
 
 const IndicatorInput = (props: IndicatorInputProps) => {
+  const { token } = useToken();
   const { ooui, value } = props;
   const title = (
     <>
       <span>{ooui.label} </span>
-      {ooui.tooltip &&
+      {ooui.tooltip && (
         <Tooltip title={ooui.tooltip}>
-          <QuestionCircleOutlined className="pr-1 text-xs text-blue-400"/>
+          <QuestionCircleOutlined
+            className="pr-1 text-xs"
+            style={{ color: token.colorPrimaryBg }}
+          />
         </Tooltip>
-      }
+      )}
     </>
   );
   const Icon: React.ElementType = iconMapper(ooui.icon) as any;
@@ -49,18 +54,14 @@ const IndicatorInput = (props: IndicatorInputProps) => {
   const field = (
     <Statistic
       title={title}
-      prefix={Icon && <Icon/>}
+      prefix={Icon && <Icon />}
       suffix={ooui.suffix}
       value={formattedValue}
     />
-  )
+  );
   if (ooui.card) {
-    return (
-      <Card>
-        {field}
-      </Card>
-    );
+    return <Card>{field}</Card>;
   } else {
     return field;
   }
-}
+};

package/src/widgets/modals/FormModal.tsx

@@ -96,12 +96,12 @@ export const FormModal = (props: FormModalProps) => {
   }
 
   return (
-    <FormModalProvider setTitle={setFormTitle}>
+    (<FormModalProvider setTitle={setFormTitle}>
       <Modal
         title={isMenuAction ? header() : formTitle}
         centered
         width={modalWidth}
-        visible={visible}
+        open={visible}
         footer={null}
         destroyOnClose
         onCancel={onCancel}
@@ -115,6 +115,6 @@ export const FormModal = (props: FormModalProps) => {
           {...rest}
         />
       </Modal>
-    </FormModalProvider>
+    </FormModalProvider>)
   );
 };

package/src/widgets/modals/SearchModal.tsx

@@ -98,35 +98,33 @@ export const SearchModal = (props: SearchSelectionProps) => {
     );
   };
 
-  return (
-    <>
-      <Modal
-        title={t("search")}
-        centered
-        width={modalWidth}
-        visible={visible && !showCreateModal}
-        closable={true}
-        onCancel={onCloseModal}
-        footer={null}
-        destroyOnClose
-        maskClosable={false}
-      >
-        {content()}
-      </Modal>
-      <FormModal
-        model={model}
-        visible={showCreateModal}
-        parentContext={context}
-        onSubmitSucceed={(id?: number) => {
-          setShowCreateModal(false);
-          onCloseModal();
-          onSelectValues([id!]);
-        }}
-        onCancel={() => {
-          setShowCreateModal(false);
-          onCloseModal();
-        }}
-      />
-    </>
-  );
+  return (<>
+    <Modal
+      title={t("search")}
+      centered
+      width={modalWidth}
+      open={visible && !showCreateModal}
+      closable={true}
+      onCancel={onCloseModal}
+      footer={null}
+      destroyOnClose
+      maskClosable={false}
+    >
+      {content()}
+    </Modal>
+    <FormModal
+      model={model}
+      visible={showCreateModal}
+      parentContext={context}
+      onSubmitSucceed={(id?: number) => {
+        setShowCreateModal(false);
+        onCloseModal();
+        onSelectValues([id!]);
+      }}
+      onCancel={() => {
+        setShowCreateModal(false);
+        onCloseModal();
+      }}
+    />
+  </>);
 };

package/src/widgets/modals/TranslationModal.tsx

@@ -185,11 +185,11 @@ export const TranslationModal = (props: TranslationModalProps) => {
   }
 
   return (
-    <Modal
+    (<Modal
       title={t("translate")}
       centered
       width={modalWidth}
-      visible={visible}
+      open={visible}
       closable={true}
       onCancel={onCloseModal}
       footer={null}
@@ -197,6 +197,6 @@ export const TranslationModal = (props: TranslationModalProps) => {
       maskClosable={false}
     >
       {content()}
-    </Modal>
+    </Modal>)
   );
 };

package/src/widgets/views/DashboardGrid/DashboardGridItem.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import { DashboardGridItemProps } from "./DashboardGridItem.types";
 import { ExportOutlined } from "@ant-design/icons";
-import { Row, Col } from "antd";
-import { Typography } from "antd";
+import { Row, Col, Typography, theme } from "antd";
+const { useToken } = theme;
 
 const { Text } = Typography;
 
 export const DashboardGridItem = (props: DashboardGridItemProps) => {
-  const { id, title, children, action, openAction } = props;
+  const { title, children, action, openAction } = props;
+  const { token } = useToken();
 
   return (
     <div
-      className={"shadow-md rounded"}
+      className={"shadow-md"}
       style={{
         height: "100%",
         display: "flex",
@@ -19,12 +20,15 @@ export const DashboardGridItem = (props: DashboardGridItemProps) => {
         overflow: "hidden",
         border: "1px solid #eee",
         backgroundColor: "white",
+        borderRadius: token.borderRadius,
       }}
     >
       <Row
-        className="bg-blueGray-100"
         align="middle"
-        style={{ borderBottom: "1px solid #ddd" }}
+        style={{
+          borderBottom: "1px solid #ddd",
+          backgroundColor: token.colorPrimaryBg,
+        }}
         wrap={false}
       >
         <Col

package/src/widgets/views/Graph/GraphDefaults.ts

@@ -1,4 +1,4 @@
-import moment from "moment";
+import dayjs from "dayjs";
 
 const formatter = (graphType: "pie" | "default" | "barGrouped") => {
   return (object: any) => {
@@ -24,7 +24,7 @@ const axisFormatter = (value: any) => {
     if (dateType === null) {
       return value;
     }
-    return moment(value, (dateFormats.input as any)[dateType]).format(
+    return dayjs(value, (dateFormats.input as any)[dateType]).format(
       (dateFormats.output as any)[dateType]
     );
   } else {
@@ -154,7 +154,7 @@ const dateFormats = {
 
 function getDateType(dateString: string): string | null {
   for (const format in dateFormats.input) {
-    const isValidFormat = moment(
+    const isValidFormat = dayjs(
       dateString,
       (dateFormats.input as any)[format],
       true

package/src/widgets/views/Tree.tsx

@@ -22,7 +22,7 @@ import {
 } from "@/context/ActionViewContext";
 import { Many2oneTree } from "../base/many2one/Many2oneTree";
 import { ReferenceTree } from "../base/ReferenceTree";
-import moment from "moment";
+import dayjs from "dayjs";
 import { DatePickerConfig } from "@/common/DatePicker";
 
 type Props = {
@@ -71,7 +71,7 @@ const textComponentFn = (value: any): React.ReactElement => {
 const dateComponentFn = (value: any): React.ReactElement => {
   if (!value || (value && value.length === 0)) return <></>;
 
-  const formattedValue = moment(
+  const formattedValue = dayjs(
     value,
     DatePickerConfig.date.dateInternalFormat
   ).format(DatePickerConfig.date.dateDisplayFormat);
@@ -80,7 +80,7 @@ const dateComponentFn = (value: any): React.ReactElement => {
 
 const dateTimeComponentFn = (value: any): React.ReactElement => {
   if (!value || (value && value.length === 0)) return <></>;
-  const formattedValue = moment(
+  const formattedValue = dayjs(
     value,
     DatePickerConfig.time.dateInternalFormat
   ).format(DatePickerConfig.time.dateDisplayFormat);
@@ -302,7 +302,7 @@ function Tree(props: Props): React.ReactElement {
     });
 
     return (
-      <div className="p-1 pb-0 pl-2 mt-2 bg-gray-50">{summary.join(", ")}</div>
+      <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>
     );
   }
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Form, Row, Col, Alert } from "antd";
+import { Form, Row, Col, Alert, theme } from "antd";
 import useDeepCompareEffect from "use-deep-compare-effect";
 
 import {
@@ -15,6 +15,7 @@ import { SearchParams } from "./SearchParams";
 
 import { getParamsForFields } from "@/helpers/searchHelper";
 import Measure from "react-measure";
+const { useToken } = theme;
 
 type Props = {
   fields: any;
@@ -55,6 +56,7 @@ function SearchFilter(props: Props) {
   const [advancedSearchFields, setAdvancedSearchFields] = useState<Container>();
   const [advancedFilter, setAdvancedFilter] = useState(false);
   const sfo = useRef<SearchFilterOoui>();
+  const { token } = useToken();
 
   const [form] = Form.useForm();
 
@@ -118,7 +120,8 @@ function SearchFilter(props: Props) {
         <div ref={measureRef}>
           <div style={{ display: searchVisible ? "block" : "none" }}>
             <Form
-              className="p-3 rounded shadow-md bg-gray-50"
+              className="p-3 shadow-md"
+              style={{ borderRadius: token.borderRadius }}
               form={form}
               onFinish={onFinish}
               initialValues={{ offset, limit }}

package/dist/Config.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    requiredClass: string;
-    requiredColor: string;
-};
-export default _default;
-//# sourceMappingURL=Config.d.ts.map

package/dist/Config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.ts"],"names":[],"mappings":";;;;AAAA,wBAGE"}

package/src/Config.ts

@@ -1,4 +0,0 @@
-export default {
-  requiredClass: "bg-blue-100",
-  requiredColor: "#DBEAFE",
-};