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

package/src/views/tabs/Tab.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { CloseOutlined } from "@ant-design/icons";
+import { theme } from "antd";
+const { useToken } = theme;
 
 type TabProps = {
   tabKey: string;
@@ -11,8 +13,8 @@ type TabProps = {
 
 function Tab(props: TabProps) {
   const { label, onClose, tabKey, isActive, onSelected } = props;
-
-  const bgColor = isActive ? "#ffffff" : "#F1F5F9";
+  const { token } = useToken();
+  const bgColor = isActive ? token.colorBgContainer : token.colorPrimaryBg;
 
   return (
     <div
@@ -32,14 +34,14 @@ function Tab(props: TabProps) {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        borderTopLeftRadius: 8,
-        borderTopRightRadius: 8,
+        borderTopLeftRadius: token.borderRadius,
+        borderTopRightRadius: token.borderRadius,
         marginLeft: 2,
       }}
     >
       <div
         style={{
-          color: isActive ? "#001529" : "#ADB0B3",
+          color: isActive ? token.colorPrimaryActive : token.colorPrimaryBorder,
           userSelect: "none",
           height: 40,
           display: "flex",
@@ -63,7 +65,11 @@ function Tab(props: TabProps) {
         }}
       >
         <CloseOutlined
-          style={{ color: isActive ? "#001529" : "#ADB0B3" }}
+          style={{
+            color: isActive
+              ? token.colorPrimaryActive
+              : token.colorPrimaryBorder,
+          }}
           onClick={(e) => {
             e.stopPropagation();
             onClose(tabKey);

package/src/widgets/base/Binary.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useContext } from "react";
-import { Row, Col, Button, Input, Space } from "antd";
+import { Row, Col, Button, Input, Space, theme } from "antd";
 import Field from "@/common/Field";
 import { Binary as BinaryOoui } from "@gisce/ooui";
-import Config from "@/Config";
+const { useToken } = theme;
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import {
   FolderOpenOutlined,
@@ -44,8 +44,11 @@ interface BinaryInputProps {
 export const BinaryInput = (props: BinaryInputProps) => {
   const { ooui, value, onChange } = props;
   const { readOnly, required, filenameField } = ooui as BinaryOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const inputFile = useRef(null);
   const { setFieldValue, getFieldValue } =
     (useContext(FormContext) as FormContextType) || {};
@@ -104,7 +107,7 @@ export const BinaryInput = (props: BinaryInputProps) => {
         <Input
           type="text"
           disabled={true}
-          className={requiredClass}
+          style={requiredStyle}
           value={filesize}
         />
       </Col>

package/src/widgets/base/Boolean.tsx

@@ -4,17 +4,18 @@ import styled from "styled-components";
 
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 export const Boolean = (props: WidgetProps) => {
   const { ooui } = props;
   const { id, readOnly, required } = ooui;
 
   return (
-    <Field
-      {...props}
-      valuePropName="checked"
-    >
+    <Field {...props} valuePropName="checked">
       <BooleanInput id={id} readOnly={readOnly} required={required} />
     </Field>
   );
@@ -35,10 +36,10 @@ const BooleanInput = (props: any) => {
 
 const RequiredCheckbox = styled(AntCheckbox)`
   .ant-checkbox-inner {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 
   .ant-checkbox-checked .ant-checkbox-inner {
-    background-color: #089cff;
+    background-color: ${mapToken.colorPrimary};
   }
 `;

package/src/widgets/base/Char.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useState } from "react";
-import { Col, Input, Row } from "antd";
+import React, { CSSProperties, useContext, useState } from "react";
+import { Col, Input, Row, theme } from "antd";
 import Field from "@/common/Field";
 import { Char as CharOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { TranslationModal } from "../modals/TranslationModal";
 import { FormContext, FormContextType } from "@/context/FormContext";
 import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import { TranslationOutlined } from "@ant-design/icons";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import showInfo from "@/ui/InfoDialog";
+const { useToken } = theme;
 
 type CharProps = WidgetProps & {
   isSearchField?: boolean;
@@ -18,8 +18,11 @@ type CharProps = WidgetProps & {
 export const Char = (props: CharProps) => {
   const { ooui, isSearchField = false } = props;
   const { id, readOnly, isPassword, required, translatable } = ooui as CharOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -27,7 +30,7 @@ export const Char = (props: CharProps) => {
     <Input
       disabled={readOnly || (translatable && !isSearchField)}
       id={id}
-      className={requiredClass}
+      style={requiredStyle}
       maxLength={(ooui as CharOoui).size}
       onBlur={elementHasLostFocus}
     />
@@ -44,7 +47,7 @@ export const Char = (props: CharProps) => {
   }
 
   if (translatable && !readOnly && !isSearchField) {
-    input = <TranslatableChar field={id} requiredClass={requiredClass} />;
+    input = <TranslatableChar field={id} requiredStyle={requiredStyle} />;
   }
 
   return (
@@ -57,12 +60,12 @@ export const Char = (props: CharProps) => {
 const TranslatableChar = ({
   value,
   field,
-  requiredClass,
+  requiredStyle,
   onChange,
 }: {
   value?: string;
   field: string;
-  requiredClass: string | undefined;
+  requiredStyle: CSSProperties | undefined;
   onChange?: (value: string) => void;
 }) => {
   const formContext = useContext(FormContext) as FormContextType;
@@ -84,7 +87,7 @@ const TranslatableChar = ({
             <Input
               value={value}
               id={field}
-              className={requiredClass}
+              style={requiredStyle}
               onChange={(event: any) => {
                 onChange?.(event.target.value);
               }}
@@ -129,12 +132,11 @@ const TranslatableChar = ({
           value={value}
           disabled={true}
           id={field}
-          className={requiredClass}
           onChange={(event: any) => {
             onChange?.(event.target.value);
           }}
           onBlur={elementHasLostFocus}
-          style={{ cursor: "pointer" }}
+          style={{ cursor: "pointer", ...requiredStyle }}
         />
       </div>
       <TranslationModal

package/src/widgets/base/Float.tsx

@@ -1,16 +1,21 @@
 import React, { useContext } from "react";
-import { InputNumber } from "antd";
+import { InputNumber, theme } from "antd";
 import Field from "@/common/Field";
 import { Float as FloatOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+const { useToken } = theme;
+
 import { FormContext, FormContextType } from "@/context/FormContext";
 
 export const Float = (props: WidgetProps) => {
   const { ooui } = props;
   const { id, decimalDigits, readOnly, required } = ooui as FloatOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -18,7 +23,8 @@ export const Float = (props: WidgetProps) => {
     <Field required={required} type={"number"} {...props}>
       <InputNumber
         disabled={readOnly}
-        className={"w-full " + requiredClass}
+        className={"w-full"}
+        style={requiredStyle}
         id={id}
         precision={decimalDigits}
         formatter={(value) => {

package/src/widgets/base/FloatTime.tsx

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Input } from "antd";
+import { Input, theme } from "antd";
 import Field from "@/common/Field";
 import { Float as FloatOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { parseFloatToString, parseStringToFloat } from "@/helpers/timeHelper";
 import { FormContext, FormContextType } from "@/context/FormContext";
+const { useToken } = theme;
 
 export const FloatTime = (props: WidgetProps) => {
   const { ooui } = props;
@@ -29,8 +29,11 @@ export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
 ) => {
   const { ooui, value, onChange } = props;
   const { id, readOnly, required } = ooui as FloatOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const inputTextRef = useRef<string>();
   const [inputText, setInputText] = useState<string>();
   const formContext = useContext(FormContext) as FormContextType;
@@ -59,7 +62,8 @@ export const FloatTimeInput: React.FC<FloatTimeInputProps> = (
     <Input
       value={inputText}
       disabled={readOnly}
-      className={"w-full " + requiredClass}
+      className={"w-full"}
+      style={requiredStyle}
       id={id}
       placeholder={"00:00"}
       onChange={onValueStringChange}

package/src/widgets/base/Integer.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
-import { InputNumber } from "antd";
+import { InputNumber, theme } from "antd";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
 import { FormContext, FormContextType } from "@/context/FormContext";
+const { useToken } = theme;
 
 type IntegerProps = WidgetProps & {
   onChange?: (newValue: number) => void;
@@ -12,8 +12,11 @@ type IntegerProps = WidgetProps & {
 export const Integer = (props: IntegerProps) => {
   const { ooui, onChange } = props;
   const { id, readOnly, required } = ooui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -21,7 +24,7 @@ export const Integer = (props: IntegerProps) => {
     <Field required={required} type={"number"} {...props}>
       <InputNumber
         id={id}
-        className={"w-full " + requiredClass}
+        className={"w-full "}
         disabled={readOnly}
         formatter={(value) => {
           return `${value}`.replace(/[^0-9\-]+/g, "");
@@ -33,6 +36,7 @@ export const Integer = (props: IntegerProps) => {
         defaultValue={0}
         onBlur={elementHasLostFocus}
         precision={0}
+        style={requiredStyle}
       />
     </Field>
   );

package/src/widgets/base/Label.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { Tooltip, Typography } from "antd";
+import { Tooltip, Typography, theme } from "antd";
 import { WidgetProps } from "@/types";
 import { QuestionCircleOutlined } from "@ant-design/icons";
 import { Label as LabelOoui } from "@gisce/ooui";
 import { Interweave } from "interweave";
 const { Text, Title } = Typography;
+const { useToken } = theme;
 
 type Props = WidgetProps & {
   align?: "left" | "center" | "right";
@@ -25,6 +26,7 @@ const Label = (props: Props) => {
   const labelText = addColon && label.length > 1 ? label + " :" : label;
   const responsiveAlign = responsiveBehaviour ? "left" : "right";
   const labelAlgin = align ? align : fieldForLabel ? responsiveAlign : "left";
+  const { token } = useToken();
 
   const TextType = labelSize === undefined ? Text : Title;
 
@@ -34,7 +36,9 @@ const Label = (props: Props) => {
     >
       {tooltip && (
         <Tooltip title={tooltip}>
-          <QuestionCircleOutlined className="pr-1 text-xs text-blue-400" />
+          <QuestionCircleOutlined className="pr-1 text-xs" style={{
+            color: token.colorPrimary
+          }} />
         </Tooltip>
       )}
       <span className="pr-2">

package/src/widgets/base/LinkInput.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Input, Button, Row, Col } from "antd";
+import { Input, Button, Row, Col, theme } from "antd";
 import { Char as CharOoui } from "@gisce/ooui";
-import Config from "@/Config";
 import { EditOutlined, CheckOutlined } from "@ant-design/icons";
 import { FormContext, FormContextType } from "@/context/FormContext";
+const { useToken } = theme;
 
 interface LinkInputProps {
   ooui: CharOoui;
@@ -16,8 +16,11 @@ interface LinkInputProps {
 export const LinkInput = (props: LinkInputProps) => {
   const { ooui, value, onChange, valueValidator, linkPrefix = "" } = props;
   const { id, readOnly, required } = ooui as CharOoui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -52,6 +55,7 @@ export const LinkInput = (props: LinkInputProps) => {
                   setShowInput(false);
                 }
               }}
+              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
               tabIndex={-1}
             />
           ) : (
@@ -61,6 +65,7 @@ export const LinkInput = (props: LinkInputProps) => {
                 setEditMode(true);
                 setShowInput(true);
               }}
+              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
               tabIndex={-1}
             />
           )}
@@ -69,9 +74,9 @@ export const LinkInput = (props: LinkInputProps) => {
       <Col flex="auto">
         {showInput ? (
           <Input
+            style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, ...requiredStyle }}
             id={id}
             onChange={onValueStringChange}
-            className={requiredClass}
             value={value}
             onBlur={() => {
               if (valueValidator(value)) {
@@ -84,7 +89,7 @@ export const LinkInput = (props: LinkInputProps) => {
         ) : (
           <a
             href={`${linkPrefix}${value}`}
-            style={{ color: "#1890ff", paddingRight: 15 }}
+            style={{ color: token.colorPrimary, paddingRight: 15 }}
             target="_blank"
           >
             {value}

package/src/widgets/base/MultiSelection.tsx

@@ -5,7 +5,11 @@ import styled from "styled-components";
 import Field from "@/common/Field";
 import { Selection as SelectionOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 const { Option } = Select;
 
@@ -82,6 +86,6 @@ export const MultiSelectionInput = (props: SelectionInputProps) => {
 
 const RequiredSelect = styled(Select)`
   &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;

package/src/widgets/base/Selection.tsx

@@ -5,7 +5,11 @@ import styled from "styled-components";
 import Field from "@/common/Field";
 import { Selection as SelectionOoui } from "@gisce/ooui";
 import { WidgetProps } from "@/types";
-import Config from "@/Config";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 const { Option } = Select;
 
@@ -56,6 +60,6 @@ export const SelectionInput = (props: SelectionInputProps) => {
 
 const RequiredSelect = styled(Select)`
   &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;

package/src/widgets/base/Text.tsx

@@ -1,7 +1,6 @@
-import React, { useContext, useState } from "react";
-import { Input, Row } from "antd";
+import React, { CSSProperties, useContext, useState } from "react";
+import { Input, Row, theme } from "antd";
 import Field from "@/common/Field";
-import Config from "@/Config";
 import { Text as TextOoui } from "@gisce/ooui";
 import { TranslationModal } from "../modals/TranslationModal";
 import { FormContext, FormContextType } from "@/context/FormContext";
@@ -9,6 +8,7 @@ import ButtonWithTooltip from "@/common/ButtonWithTooltip";
 import { TranslationOutlined } from "@ant-design/icons";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import showInfo from "@/ui/InfoDialog";
+const { useToken } = theme;
 
 const { TextArea } = Input;
 
@@ -19,8 +19,11 @@ type Props = {
 const Text = (props: Props) => {
   const { ooui } = props;
   const { id, readOnly, required, height, translatable } = ooui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const { token } = useToken();
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: token.colorPrimaryBg }
+      : undefined;
   const formContext = useContext(FormContext) as FormContextType;
   const { elementHasLostFocus } = formContext || {};
 
@@ -29,14 +32,13 @@ const Text = (props: Props) => {
       {translatable ? (
         <TranslatableText
           field={id}
-          requiredClass={requiredClass}
           height={height}
+          requiredStyle={requiredStyle}
         />
       ) : (
         <TextArea
           disabled={readOnly || translatable}
-          className={requiredClass}
-          style={{ height: height ? height + "px" : "100%" }}
+          style={{ height: height ? height + "px" : "100%", ...requiredStyle }}
           rows={4}
           onBlur={elementHasLostFocus}
         />
@@ -48,13 +50,13 @@ const Text = (props: Props) => {
 const TranslatableText = ({
   value,
   field,
-  requiredClass,
+  requiredStyle,
   onChange,
   height,
 }: {
   value?: string;
   field: string;
-  requiredClass: string | undefined;
+  requiredStyle: CSSProperties | undefined;
   height: number | undefined;
   onChange?: (value: string) => void;
 }) => {
@@ -80,9 +82,9 @@ const TranslatableText = ({
             }}
             style={{
               height: height ? height + "px" : "100%",
+              ...requiredStyle
             }}
             id={field}
-            className={requiredClass}
             rows={4}
             onBlur={elementHasLostFocus}
           />
@@ -128,10 +130,10 @@ const TranslatableText = ({
           style={{
             height: height ? height + "px" : "100%",
             cursor: "pointer",
+            ...requiredStyle
           }}
           id={field}
           disabled={true}
-          className={requiredClass}
           rows={4}
           onBlur={elementHasLostFocus}
         />

package/src/widgets/base/many2one/Many2one.tsx

@@ -6,13 +6,17 @@ import {
   LoadingOutlined,
 } from "@ant-design/icons";
 import styled from "styled-components";
+import { theme } from "antd";
+
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
 
 import {
   Many2one as Many2oneOoui,
   transformDomainForChildWidget,
 } from "@gisce/ooui";
 import Field from "@/common/Field";
-import Config from "@/Config";
 import { SearchModal } from "@/widgets/modals/SearchModal";
 import { FormModal } from "@/widgets/modals/FormModal";
 import ConnectionProvider from "@/ConnectionProvider";
@@ -65,8 +69,10 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
     id: fieldName,
     domain: widgetDomain,
   } = ooui;
-  const requiredClass =
-    required && !readOnly ? Config.requiredClass : undefined;
+  const requiredStyle =
+    required && !readOnly
+      ? { backgroundColor: mapToken.colorPrimaryBg }
+      : undefined;
   const [showSearchModal, setShowSearchModal] = useState<boolean>(false);
   const [showFormModal, setShowFormModal] = useState<boolean>(false);
   const [searching, setSearching] = useState<boolean>(false);
@@ -75,13 +81,8 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
   const [inputText, setInputText] = useState<string>("");
   const inputTextRef = useRef<string>();
   const formContext = useContext(FormContext) as FormContextType;
-  const {
-    domain,
-    getValues,
-    getFields,
-    getContext,
-    elementHasLostFocus,
-  } = formContext || {};
+  const { domain, getValues, getFields, getContext, elementHasLostFocus } =
+    formContext || {};
   const transformedDomain = useRef<any[]>([]);
   const [searchDomain, setSearchDomain] = useState<any>([]);
 
@@ -244,7 +245,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           value={inputText}
           disabled={readOnly}
           onChange={onValueStringChange}
-          className={requiredClass}
+          style={requiredStyle}
           onBlur={onElementLostFocus}
           onKeyDown={onKeyDown}
           suffix={
@@ -263,6 +264,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
           onClick={() => {
             setShowFormModal(true);
           }}
+          style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
           tabIndex={-1}
         />
       </Col>
@@ -274,6 +276,7 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
             searchButtonTappedRef.current = true;
             tryFetchFirstResultOrShowSearch(text);
           }}
+          style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
           tabIndex={-1}
         />
       </Col>
@@ -315,6 +318,6 @@ export const Many2oneInput: React.FC<Many2oneInputProps> = (
 
 const RequiredInput = styled(Input)`
   .ant-input {
-    background-color: ${Config.requiredColor};
+    background-color: ${mapToken.colorPrimaryBg};
   }
 `;

package/src/widgets/base/many2one/Many2oneSuffixModal.tsx

@@ -14,10 +14,10 @@ export const Many2oneSuffixModal = (props: Props) => {
   const { t } = useContext(LocaleContext) as LocaleContextType;
 
   return (
-    <Modal
+    (<Modal
       title={t("selectAction")}
       centered
-      visible={visible}
+      open={visible}
       footer={null}
       destroyOnClose
       onCancel={onCancel}
@@ -37,6 +37,6 @@ export const Many2oneSuffixModal = (props: Props) => {
           );
         })}
       </Space>
-    </Modal>
+    </Modal>)
   );
 };