Merge branch 'master' of https://git.nejcraft.cz/Nejcraft/nej-react-utils

Form/FormikForm.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { Form, Formik, FormikConfig, FormikErrors, FormikProps } from "formik";
-import { Divider } from "@shared/nej-react-components/Parts/Text";
-import Button from "@shared/nej-react-components/Parts/Button";
+import { Button, Divider } from "@mantine/core";
 
 //formik is defined as 
 //export declare function Formik<Values extends FormikValues = FormikValues, ExtraProps = {}>(props: FormikConfig<Values> & ExtraProps): React.JSX.Element;
@@ -37,9 +36,9 @@ export function FormikForm<Values extends object>({
       <Form>
         {createForm && createForm(values, handleChange, errors, touched)}
         {children}
-        <Divider />
+        <Divider my="md" />
         <div tw="flex justify-center items-center">
-          {onDelete && <Button onClick={onDelete} type="error">{t("Delete")}</Button>}
+          {onDelete && <Button onClick={onDelete} color="red">{t("Delete")}</Button>}
           {closeModal && <Button onClick={() => closeModal()}>{t("Close")}</Button>}
           <Button type="submit">{submitText}</Button>
         </div>

Form/withForm.tsx

@@ -1,18 +1,19 @@
 import { FormikForm } from "@shared/nej-react-utils/Form/FormikForm";
-import { NejAccountingApiClient, CompanyResponse, CancelablePromise } from "@services/accounting-api";
-import { useApiClient, useCompany } from "@utils/NejManager/NejProvider";
+import { useApiClient, useProject } from "@utils/NejManager/NejProvider";
 import useMethod from "../macros/useMethod.macro";
 import useQuery from "../macros/useQuery.macro";
+import { CancelablePromise, PortalApiClient, ProjectResponse } from "@services/portal-api";
 
 type FormProps<T> = {
     refresh: () => void;
+    afterSubmit?: (values: T) => void;
     initialData?: T;
 };
 export type WithFormProps<T, P> = P & FormProps<T>;
-export function withForm<T extends object, P extends FormProps<T>>(WrappedForm: React.ComponentType, method: (client: NejAccountingApiClient, company: CompanyResponse, props: P) => (body: T) => CancelablePromise<any>, submitText: string) {
-    return function GameFormWrapper({ refresh, initialData, ...props }: P) {
+export function withForm<T extends object, P extends FormProps<T>>(WrappedForm: React.ComponentType, method: (client: PortalApiClient, project: ProjectResponse, props: P) => (body: T) => CancelablePromise<any>, submitText: string) {
+    return function GameFormWrapper({ refresh, afterSubmit, initialData, ...props }: P) {
         const client = useApiClient();
-        const company = useCompany();
+        const company = useProject();
 
         const fnc = method(client, company, { ...props, initialData } as P);
         console.log(fnc);
@@ -25,7 +26,7 @@ export function withForm<T extends object, P extends FormProps<T>>(WrappedForm:
         return (
             <FormikForm
                 data={initialData || {} as T}
-                onSubmit={(values) => submit(values)}
+                onSubmit={(values) => {submit(values); afterSubmit && afterSubmit(values)}}
                 submitText={submitText}
             >
                 <WrappedForm />

Table/NejReactTable.tsx

@@ -1,13 +1,18 @@
-import { MantineReactTable, MRT_RowData, MRT_TableInstance, MRT_TableOptions, useMantineReactTable, Xor } from "mantine-react-table";
+import { MantineReactTable, MRT_Cell, MRT_Column, MRT_Row, MRT_RowData, MRT_TableInstance, MRT_TableOptions, useMantineReactTable, Xor } from "mantine-react-table";
 import { useNejReactTable } from "./useNejReactTable";
+import { LoadingOverlay } from "@mantine/core";
+import { ReactNode, RefObject } from "react";
 
+export type TableInstance<TData extends MRT_RowData> = MRT_TableInstance<TData> & { loading: boolean }
 type TableInstanceProp<TData extends MRT_RowData> = {
-    table: MRT_TableInstance<TData>;
+    table: TableInstance<TData>;
 };
 
+export type NejReactTableOptions<TData extends MRT_RowData> = Omit<MRT_TableOptions<TData>, "data"> & { data?: TData[] };
+
 type Props<TData extends MRT_RowData> = Xor<
     TableInstanceProp<TData>,
-    MRT_TableOptions<TData>
+    NejReactTableOptions<TData>
 >;
 
 const isTableInstanceProp = <TData extends MRT_RowData>(
@@ -15,10 +20,21 @@ const isTableInstanceProp = <TData extends MRT_RowData>(
 ): props is TableInstanceProp<TData> =>
     (props as TableInstanceProp<TData>).table !== undefined;
 
+export type RenderActionType<TData extends MRT_RowData, TValue = unknown> = (data: {
+    cell: MRT_Cell<TData, TValue>;
+    column: MRT_Column<TData, TValue>;
+    renderedCellValue: ReactNode | number | string;
+    renderedColumnIndex?: number;
+    renderedRowIndex?: number;
+    row: MRT_Row<TData>;
+    rowRef?: RefObject<HTMLTableRowElement>;
+    table: MRT_TableInstance<TData>;
+}) => React.ReactNode
+
 export const NejReactTable = <TData extends MRT_RowData>(
     props: Props<TData>,
 ) => {
-    let table: MRT_TableInstance<TData>;
+    let table: TableInstance<TData>;
 
     if (isTableInstanceProp(props)) {
         table = props.table;
@@ -26,5 +42,8 @@ export const NejReactTable = <TData extends MRT_RowData>(
         table = useNejReactTable(props);
     }
 
-    return <MantineReactTable {...props} />;
+    return <div tw="relative">
+        <LoadingOverlay visible={table.loading} />
+        <MantineReactTable table={table} />
+    </div>;
 };

misc/format.ts

@@ -1,11 +1,12 @@
+import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 export function useNumberFormat() {
   const { i18n } = useTranslation();
 
-  return (number, digits=2, currency=null) => {
+  return (number: number, digits = 2, currency = null) => {
     if (currency) {
-      if((Math.round(number * (10**digits))/(10**digits)) === 0)
+      if ((Math.round(number * (10 ** digits)) / (10 ** digits)) === 0)
         return "---";
       return new Intl.NumberFormat(i18n.language, {
         style: "currency",
@@ -25,9 +26,9 @@ export function useNumberFormat() {
 export function useDateFormat() {
   const { i18n } = useTranslation();
 
-  return (date) => {
-    if(typeof date === "undefined") return "---";
-    if(typeof date === "string") date = new Date(date);
+  return (date: Date | string) => {
+    if (typeof date === "undefined") return "---";
+    if (typeof date === "string") date = new Date(date);
 
     return new Intl.DateTimeFormat(i18n.language, {
       year: "numeric",
@@ -39,9 +40,9 @@ export function useDateFormat() {
 export function useDateTimeFormat() {
   const { i18n } = useTranslation();
 
-  return (date) => {
-    if(typeof date === "undefined") return "---";
-    if(typeof date === "string") date = new Date(date);
+  return (date: Date | string) => {
+    if (typeof date === "undefined") return "---";
+    if (typeof date === "string") date = new Date(date);
 
     return new Intl.DateTimeFormat(i18n.language, {
       year: "numeric",
@@ -53,4 +54,26 @@ export function useDateTimeFormat() {
       second: "numeric",
     }).format(date);
   }
+}
+
+export function useLanguageFormat(){  
+  const { i18n } = useTranslation();
+
+  return useCallback((language: string) => {
+    return new Intl.DisplayNames(i18n.language, {
+      type: "language",
+      style: "short",
+    }).of(language);
+  }, [i18n.language]);
+}
+export function useCountryFormat(){  
+  const { i18n } = useTranslation();
+
+  return (region: string) => {
+    return new Intl.DisplayNames(i18n.language, {
+      type: "region",
+      style: "short",
+
+    }).of(region);
+  }
 }

useModal.tsx

@@ -8,7 +8,7 @@ export default function useModal<T>(
       const openModal = useCallback((params: T) => {
           modals.open({
               title,
-              children: <Component {...params} />,
+              children: <Component afterSubmit={() => modals.closeAll()} {...params} />,
           });
       }, [Component, title]);