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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.2.0-rc.79",
+  "version": "1.2.0-rc.81",
   "files": [
     "dist",
     "src",
@@ -13,10 +13,6 @@
     ".": {
       "import": "./dist/react-ooui.es.js",
       "require": "./dist/react-ooui.umd.js"
-    },
-    "./dist/main.css": {
-      "import": "./dist/main.css",
-      "require": "./dist/main.css"
     }
   },
   "publishConfig": {
@@ -37,11 +33,11 @@
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
     "@gisce/ooui": "^0.19.4",
-    "@gisce/react-formiga-components": "^1.0.9-rc.20",
+    "@gisce/react-formiga-components": "^1.0.9-rc.21",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
-    "antd": "^4.24.3",
+    "antd": "^5.5.2",
     "buffer": "^6.0.3",
     "fiber-diagram": "github:gisce/fiber-diagram",
     "file-type": "^16.5.0",
@@ -69,8 +65,8 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.170",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.1",
+    "@types/react-dom": "^17.0.1",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-measure": "^2.0.7",
     "@types/react-responsive": "^8.0.2",

package/src/__tests__/searchFilterHelper.spec.ts

@@ -3,7 +3,7 @@ import {
   groupDateTimeValuesIfNeeded,
   getParamsForFields,
 } from "../helpers/searchFilterHelper";
-import moment from "moment";
+import dayjs from "dayjs";
 
 describe("A SearchFilterHelper instance", () => {
   describe("removeUndefinedFields method", () => {
@@ -73,10 +73,10 @@ describe("A SearchFilterHelper instance", () => {
       const object = {
         charValue: "test",
         floatValue: 0.5,
-        "dateField#date": [moment("2021-01-01"), moment("2021-01-02")],
+        "dateField#date": [dayjs("2021-01-01"), dayjs("2021-01-02")],
         "dateField#time": [
-          moment("1970-01-01 00:00"),
-          moment("1970-01-01 04:00"),
+          dayjs("1970-01-01 00:00"),
+          dayjs("1970-01-01 04:00"),
         ],
       };
 
@@ -338,7 +338,7 @@ describe("A SearchFilterHelper instance", () => {
         },
       };
       const values = {
-        field: [moment("2021-01-01"), moment("2021-01-02")],
+        field: [dayjs("2021-01-01"), dayjs("2021-01-02")],
       };
       const params = getParamsForFields(values, fields);
       expect(Array.isArray(params)).toBeTruthy();
@@ -363,8 +363,8 @@ describe("A SearchFilterHelper instance", () => {
         },
       };
       const values = {
-        "field#date": [moment("2021-01-01"), moment("2021-01-02")],
-        "field#time": [moment("1970-01-01 03:31"), moment("1970-01-01 03:32")],
+        "field#date": [dayjs("2021-01-01"), dayjs("2021-01-02")],
+        "field#time": [dayjs("1970-01-01 03:31"), dayjs("1970-01-01 03:32")],
       };
       const params = getParamsForFields(values, fields);
       expect(Array.isArray(params)).toBeTruthy();

package/src/actionbar/AttachmentsButton.tsx

@@ -103,30 +103,28 @@ function AttachmentsButton(props: AttachmentsButtonProps) {
     preloadAttachments();
   }, [preloadAttachments]);
 
-  return (
-    <>
-      <AttachmentsButtonWrapper
-        numberOfAttachments={attachments.length}
-        attachments={preloadedAttachments}
-        disabled={disabled}
-        loading={preloading}
-        onAddNewAttachment={onAddNewAttachment}
-        onListAllAttachments={onListAllAttachments}
-        onopenAttachmentLink={openAttachmentLink}
-        onOpenAttachmentDetail={openAttachmentDetail}
-      />
-      <Modal
-        title={t("downloadingAttachment")}
-        visible={downloading}
-        footer={null}
-        closable={false}
-        centered
-        maskClosable={false}
-      >
-        <Spin />
-      </Modal>
-    </>
-  );
+  return (<>
+    <AttachmentsButtonWrapper
+      numberOfAttachments={attachments.length}
+      attachments={preloadedAttachments}
+      disabled={disabled}
+      loading={preloading}
+      onAddNewAttachment={onAddNewAttachment}
+      onListAllAttachments={onListAllAttachments}
+      onopenAttachmentLink={openAttachmentLink}
+      onOpenAttachmentDetail={openAttachmentDetail}
+    />
+    <Modal
+      title={t("downloadingAttachment")}
+      open={downloading}
+      footer={null}
+      closable={false}
+      centered
+      maskClosable={false}
+    >
+      <Spin />
+    </Modal>
+  </>);
 }
 
 export default AttachmentsButton;

package/src/actionbar/ButtonWithBadge.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import ButtonWithTooltip, {Props as ButtonWithTooltipProps } from "@/common/ButtonWithTooltip";
+import { theme } from 'antd';
+const { useToken } = theme;
 
 type Props = ButtonWithTooltipProps & {
   badgeNumber?: number;
@@ -7,6 +9,7 @@ type Props = ButtonWithTooltipProps & {
 
 function ButtonWithBadge(props: Props) {
   const { badgeNumber = 0, ...restProps } = props;
+  const { token } = useToken();
 
   return (
     <div style={{ position: "relative" }}>
@@ -20,8 +23,8 @@ function ButtonWithBadge(props: Props) {
               borderRadius: "50%",
               fontSize: "12px",
               textAlign: "center",
-              background: "#1890FF",
-              color: "#fefefe",
+              background: token.colorPrimaryBg,
+              color: token.colorPrimaryHover,
             }}
           >
             {badgeNumber}

package/src/actionbar/ChangeViewButton.tsx

@@ -106,7 +106,11 @@ function ChangeViewButton(props: Props) {
       <ButtonWithTooltip
         tooltip={previousView ? t("viewAs") + " " + t(previousView.type) : ""}
         icon={getIconForView(previousView)}
-        style={{ width: 50 }}
+        style={{
+          width: 50,
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+        }}
         onClick={() => {
           handleMenuClick({ key: previousView?.view_id });
         }}
@@ -117,7 +121,11 @@ function ChangeViewButton(props: Props) {
         disabled={disabled || availableViews.length === 1}
       >
         <Button
-          style={{ width: 25 }}
+          style={{
+            width: 25,
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          }}
           icon={<DownOutlined style={{ fontSize: "0.5em" }} />}
           onClick={(e) => e.preventDefault()}
         ></Button>

package/src/actionbar/TreeActionBar.tsx

@@ -30,6 +30,7 @@ import { showLogInfo } from "@/helpers/logInfoHelper";
 import SearchBar from "./SearchBar";
 import { ExportModal } from "..";
 import { mergeParams } from "@/helpers/searchHelper";
+import { ConfigContext } from "@/context/ConfigContext";
 
 type Props = {
   parentContext?: any;
@@ -65,7 +66,7 @@ function TreeActionBar(props: Props) {
   } = useContext(ActionViewContext) as ActionViewContextType;
 
   const { parentContext = {}, treeExpandable, toolbar } = props;
-
+  const { previewFeatures } = useContext(ConfigContext);
   const { t, lang } = useContext(LocaleContext) as LocaleContextType;
   const contentRootContext = useContext(
     ContentRootContext
@@ -278,84 +279,90 @@ function TreeActionBar(props: Props) {
           });
         }}
       />
-      {separator()}
-      <DropdownButton
-        icon={
-          <Icon
-            component={() => (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="icon icon-tabler icon-tabler-database-export"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-                strokeWidth="1.5"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <ellipse cx="12" cy="6" rx="8" ry="3" />
-                <path d="M4 6v6c0 1.657 3.582 3 8 3a19.84 19.84 0 0 0 3.302 -.267m4.698 -2.733v-6" />
-                <path d="M4 12v6c0 1.599 3.335 2.905 7.538 2.995m8.462 -6.995v-2m-6 7h7m-3 -3l3 3l-3 3" />
-              </svg>
-            )}
-          />
-        }
-        tooltip={t("export")}
-        items={[
-          {
-            id: "print_screen",
-            name: t("printScreen"),
-          },
-          {
-            id: "export",
-            name: t("advancedExport"),
-          },
-        ]}
-        onItemClick={(itemClicked: any) => {
-          if (itemClicked.id === "print_screen") {
-            let idsToExport = selectedRowItems?.map((item) => item.id) || [];
 
-            if (idsToExport.length === 0) {
-              idsToExport = results?.map((item) => item.id) || [];
+      {previewFeatures && (
+        <>
+          {separator()}
+          <DropdownButton
+            icon={
+              <Icon
+                component={() => (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="icon icon-tabler icon-tabler-database-export"
+                    width="1em"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    strokeWidth="1.5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <ellipse cx="12" cy="6" rx="8" ry="3" />
+                    <path d="M4 6v6c0 1.657 3.582 3 8 3a19.84 19.84 0 0 0 3.302 -.267m4.698 -2.733v-6" />
+                    <path d="M4 12v6c0 1.599 3.335 2.905 7.538 2.995m8.462 -6.995v-2m-6 7h7m-3 -3l3 3l-3 3" />
+                  </svg>
+                )}
+              />
             }
-
-            runAction({
-              id: -1,
-              model: currentModel,
-              report_name: "printscreen.list",
-              type: "ir.actions.report.xml",
-              datas: {
-                model: currentModel,
-                ids: idsToExport,
+            tooltip={t("export")}
+            items={[
+              {
+                id: "print_screen",
+                name: t("printScreen"),
               },
-            });
-            return;
-          }
+              {
+                id: "export",
+                name: t("advancedExport"),
+              },
+            ]}
+            onItemClick={(itemClicked: any) => {
+              if (itemClicked.id === "print_screen") {
+                let idsToExport =
+                  selectedRowItems?.map((item) => item.id) || [];
 
-          setExportModalVisible(true);
-        }}
-        disabled={
-          duplicatingItem || removingItem || treeIsLoading || hasNameSearch
-        }
-      />
-      <ExportModal
-        visible={exportModalVisible}
-        locale={lang}
-        onClose={() => setExportModalVisible(false)}
-        model={currentModel!}
-        domain={mergeParams(
-          searchTreeRef?.current?.getDomain() || [],
-          searchParams || []
-        )}
-        limit={limit}
-        totalRegisters={totalItems || 0}
-        selectedRegistersToExport={selectedRowItems}
-        visibleRegisters={results?.length || 0}
-        context={parentContext}
-      />
+                if (idsToExport.length === 0) {
+                  idsToExport = results?.map((item) => item.id) || [];
+                }
+
+                runAction({
+                  id: -1,
+                  model: currentModel,
+                  report_name: "printscreen.list",
+                  type: "ir.actions.report.xml",
+                  datas: {
+                    model: currentModel,
+                    ids: idsToExport,
+                  },
+                });
+                return;
+              }
+
+              setExportModalVisible(true);
+            }}
+            disabled={
+              duplicatingItem || removingItem || treeIsLoading || hasNameSearch
+            }
+          />
+          <ExportModal
+            visible={exportModalVisible}
+            locale={lang}
+            onClose={() => setExportModalVisible(false)}
+            model={currentModel!}
+            domain={mergeParams(
+              searchTreeRef?.current?.getDomain() || [],
+              searchParams || []
+            )}
+            limit={limit}
+            totalRegisters={totalItems || 0}
+            selectedRegistersToExport={selectedRowItems}
+            visibleRegisters={results?.length || 0}
+            context={parentContext}
+          />
+        </>
+      )}
     </Space>
   );
 }

package/src/common/DatePicker.tsx

@@ -1,11 +1,11 @@
-import { DatePicker as AntDatePicker } from "antd";
+import { DatePicker as AntDatePicker, theme } from "antd";
 
 import React from "react";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { Date as DateOoui } from "@gisce/ooui";
-import moment from "moment";
+import dayjs from "dayjs";
+const { useToken } = theme;
 
 type DatePickerProps = WidgetProps & {
   showTime?: boolean;
@@ -47,8 +47,12 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
 ) => {
   const { value, onChange, ooui, showTime } = props;
   const { id, readOnly, required } = ooui as DateOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
 
   const mode = showTime ? "time" : "date";
 
@@ -66,15 +70,15 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
   };
 
   const showTimeParms = showTime
-    ? { defaultValue: moment("00:00:00", "HH:mm:ss") }
+    ? { defaultValue: dayjs("00:00:00", "HH:mm:ss") }
     : undefined;
   const dateValue = value
-    ? moment(value, DatePickerConfig[mode].dateInternalFormat)
+    ? dayjs(value, DatePickerConfig[mode].dateInternalFormat)
     : undefined;
 
   return (
     <AntDatePicker
-      style={{ width: "100%" }}
+      style={{ width: "100%", ...requiredStyle }}
       placeholder={
         showTime
           ? DatePickerConfig.time.placeholder
@@ -82,12 +86,12 @@ const DatePickerInput: React.FC<DatePickerInputProps> = (
       }
       disabled={readOnly}
       id={id}
+      picker={showTime ? "time" : "date"}
       showTime={showTimeParms}
-      className={requiredClass}
       format={DatePickerConfig[mode].dateDisplayFormat}
       value={dateValue}
       onChange={onValueStringChange}
-    ></AntDatePicker>
+    />
   );
 };
 

package/src/context/ConfigContext.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+interface ConfigContextProps {
+  previewFeatures: boolean;
+}
+
+export const ConfigContext = React.createContext<ConfigContextProps>({
+  previewFeatures: false,
+});

package/src/context/ContentRootContext.tsx

@@ -344,54 +344,52 @@ const ContentRootProvider = (
     });
   }
 
-  return (
-    <>
-      <ContentRootContext.Provider
-        value={{
-          processAction,
-          globalValues,
-        }}
-      >
-        <>
-          {children}
-          <Modal
-            title={t("generatingReport")}
-            visible={reportGenerating}
-            footer={null}
-            closable={false}
-            centered
-            maskClosable={false}
-          >
-            <Spin />
-          </Modal>
-          <FormModal
-            buttonModal
-            parentContext={actionModalOptions.context}
-            model={actionModalOptions.model!}
-            formView={actionModalOptions.formView}
-            visible={actionModalVisible}
-            onSubmitSucceed={onFormModalSucceed}
-            onCancel={() => {
-              callRefreshValues(onRefreshParentValues.current);
-              onRefreshParentValues.current = [];
-              setActionModalVisible(false);
-              setActionModalOptions({
-                domain: undefined,
-                model: undefined,
-                context: {},
-                formView: undefined,
-                actionData: undefined,
-              });
-            }}
-            showFooter={false}
-            actionDomain={actionModalOptions.domain}
-            isMenuAction={actionModalOptions?.actionData !== undefined}
-            actionData={actionModalOptions?.actionData}
-          />
-        </>
-      </ContentRootContext.Provider>
-    </>
-  );
+  return (<>
+    <ContentRootContext.Provider
+      value={{
+        processAction,
+        globalValues,
+      }}
+    >
+      <>
+        {children}
+        <Modal
+          title={t("generatingReport")}
+          open={reportGenerating}
+          footer={null}
+          closable={false}
+          centered
+          maskClosable={false}
+        >
+          <Spin />
+        </Modal>
+        <FormModal
+          buttonModal
+          parentContext={actionModalOptions.context}
+          model={actionModalOptions.model!}
+          formView={actionModalOptions.formView}
+          visible={actionModalVisible}
+          onSubmitSucceed={onFormModalSucceed}
+          onCancel={() => {
+            callRefreshValues(onRefreshParentValues.current);
+            onRefreshParentValues.current = [];
+            setActionModalVisible(false);
+            setActionModalOptions({
+              domain: undefined,
+              model: undefined,
+              context: {},
+              formView: undefined,
+              actionData: undefined,
+            });
+          }}
+          showFooter={false}
+          actionDomain={actionModalOptions.domain}
+          isMenuAction={actionModalOptions?.actionData !== undefined}
+          actionData={actionModalOptions?.actionData}
+        />
+      </>
+    </ContentRootContext.Provider>
+  </>);
 };
 
 async function getViewsAndInitialView({

package/src/helpers/iconMapper.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import * as AntIcons from "@ant-design/icons";
 import * as TablerIcons from "@tabler/icons-react";
 import Icon from "@ant-design/icons";
@@ -100,17 +100,20 @@ const iconMapping: { [key: string]: string } = {
   STOCK_PREFERENCES: "Setting",
 };
 
-export default (key: string, className?: any) => {
+export default (
+  key: string,
+  props?: { className?: any; style: CSSProperties }
+) => {
   if (key.indexOf("gtk-") !== -1) {
     const rootIcon = key.replace("gtk-", "").replace(/\-/g, "_");
     key = `STOCK_${rootIcon.toUpperCase()}`;
   }
 
   if (iconMapping.hasOwnProperty(key)) {
-    return getIconForKey(iconMapping[key], className);
+    return getIconForKey(iconMapping[key], props);
   }
 
-  return getIconForKey(key, className);
+  return getIconForKey(key, props);
 };
 
 function toCamelCase(key: string): string {
@@ -125,7 +128,10 @@ function toCamelCase(key: string): string {
     .join("")}`;
 }
 
-function getIconForKey(key: string, className?: any) {
+function getIconForKey(
+  key: string,
+  props?: { className?: any; style: CSSProperties }
+) {
   let IconCamelCase = key.charAt(0).toUpperCase() + key.slice(1); // Capitalize first letter
   if (IconCamelCase.indexOf("-") !== -1) {
     IconCamelCase = toCamelCase(IconCamelCase);
@@ -135,7 +141,7 @@ function getIconForKey(key: string, className?: any) {
   if (AntIcons[antKey]) {
     return () =>
       React.createElement(AntIcons[antKey] as any, {
-        className,
+        ...props,
       });
   }
 
@@ -150,7 +156,7 @@ function getIconForKey(key: string, className?: any) {
     const CustomIcon = () =>
       React.createElement(Icon, {
         component: TablerIcon,
-        className,
+        ...props,
       });
     return CustomIcon;
   }

package/src/index.ts

@@ -79,6 +79,7 @@ import TabSelector from "./views/TabSelector";
 import CurrentTabContent from "./views/CurrentTabContent";
 import ContentRootProvider from "./context/ContentRootContext";
 import FavouriteButton from "./ui/FavouriteButton";
+import { ConfigContext } from "./context/ConfigContext";
 
 export {
   Button,
@@ -155,4 +156,5 @@ export {
   Steps,
   CodeEditor,
   ExportModal,
+  ConfigContext,
 };

package/src/stories/Binary.stories.tsx

@@ -2,7 +2,10 @@ import React, { useState } from "react";
 
 import { BinaryInput } from "../widgets/base/Binary";
 import { Binary as BinaryOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Boolean.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Boolean } from "..";
 import { Boolean as BooleanOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Button.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Button } from "..";
 import { Button as ButtonOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {