From 13a7341494ced69c5d8c957992c64af21aa9dfb9 Mon Sep 17 00:00:00 2001 From: honzapatCZ Date: Tue, 12 Nov 2024 23:15:28 +0100 Subject: [PATCH] table changes --- Form/FormikForm.tsx | 7 +++---- Form/withForm.tsx | 13 +++++++------ Table/NejReactTable.tsx | 29 ++++++++++++++++++++++----- format.js => misc/format.ts | 39 +++++++++++++++++++++++++++++-------- useModal.tsx | 2 +- 5 files changed, 66 insertions(+), 24 deletions(-) rename format.js => misc/format.ts (53%) diff --git a/Form/FormikForm.tsx b/Form/FormikForm.tsx index 9a19506..b1d4eba 100644 --- a/Form/FormikForm.tsx +++ b/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(props: FormikConfig & ExtraProps): React.JSX.Element; @@ -37,9 +36,9 @@ export function FormikForm({
{createForm && createForm(values, handleChange, errors, touched)} {children} - +
- {onDelete && } + {onDelete && } {closeModal && }
diff --git a/Form/withForm.tsx b/Form/withForm.tsx index fd49d0d..38f10cb 100644 --- a/Form/withForm.tsx +++ b/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 = { refresh: () => void; + afterSubmit?: (values: T) => void; initialData?: T; }; export type WithFormProps = P & FormProps; -export function withForm>(WrappedForm: React.ComponentType, method: (client: NejAccountingApiClient, company: CompanyResponse, props: P) => (body: T) => CancelablePromise, submitText: string) { - return function GameFormWrapper({ refresh, initialData, ...props }: P) { +export function withForm>(WrappedForm: React.ComponentType, method: (client: PortalApiClient, project: ProjectResponse, props: P) => (body: T) => CancelablePromise, 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>(WrappedForm: return ( submit(values)} + onSubmit={(values) => {submit(values); afterSubmit && afterSubmit(values)}} submitText={submitText} > diff --git a/Table/NejReactTable.tsx b/Table/NejReactTable.tsx index 621dbc8..efde574 100644 --- a/Table/NejReactTable.tsx +++ b/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 = MRT_TableInstance & { loading: boolean } type TableInstanceProp = { - table: MRT_TableInstance; + table: TableInstance; }; +export type NejReactTableOptions = Omit, "data"> & { data?: TData[] }; + type Props = Xor< TableInstanceProp, - MRT_TableOptions + NejReactTableOptions >; const isTableInstanceProp = ( @@ -15,10 +20,21 @@ const isTableInstanceProp = ( ): props is TableInstanceProp => (props as TableInstanceProp).table !== undefined; +export type RenderActionType = (data: { + cell: MRT_Cell; + column: MRT_Column; + renderedCellValue: ReactNode | number | string; + renderedColumnIndex?: number; + renderedRowIndex?: number; + row: MRT_Row; + rowRef?: RefObject; + table: MRT_TableInstance; +}) => React.ReactNode + export const NejReactTable = ( props: Props, ) => { - let table: MRT_TableInstance; + let table: TableInstance; if (isTableInstanceProp(props)) { table = props.table; @@ -26,5 +42,8 @@ export const NejReactTable = ( table = useNejReactTable(props); } - return ; + return
+ + +
; }; diff --git a/format.js b/misc/format.ts similarity index 53% rename from format.js rename to misc/format.ts index f88ba4e..ca3a8cc 100644 --- a/format.js +++ b/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); + } } \ No newline at end of file diff --git a/useModal.tsx b/useModal.tsx index a970221..31d193c 100644 --- a/useModal.tsx +++ b/useModal.tsx @@ -8,7 +8,7 @@ export default function useModal( const openModal = useCallback((params: T) => { modals.open({ title, - children: , + children: modals.closeAll()} {...params} />, }); }, [Component, title]);