From 7d90b7140bb10fae3da2cc9350fd280570a0811d Mon Sep 17 00:00:00 2001 From: BjoernRave Date: Wed, 15 Jan 2025 10:52:16 +0100 Subject: [PATCH] add new inputs --- package.json | 2 +- src/FormItems/Basic/DateTimeProvider.tsx | 6 +- src/FormItems/Basic/MonthInput.tsx | 58 ++++++++++++++++ src/FormItems/Basic/YearInput.tsx | 55 +++++++++++++++ src/FormItems/MultiCreate.tsx | 88 +++++++++++++----------- src/Table.tsx | 25 ++++--- src/index.ts | 4 +- 7 files changed, 181 insertions(+), 57 deletions(-) create mode 100644 src/FormItems/Basic/MonthInput.tsx create mode 100644 src/FormItems/Basic/YearInput.tsx diff --git a/package.json b/package.json index 75c6c20..da7f794 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rave-ui", - "version": "0.17.0", + "version": "0.19.3", "license": "MIT", "author": "BjoernRave", "main": "dist/src/index.js", diff --git a/src/FormItems/Basic/DateTimeProvider.tsx b/src/FormItems/Basic/DateTimeProvider.tsx index 39b06a0..40fb641 100755 --- a/src/FormItems/Basic/DateTimeProvider.tsx +++ b/src/FormItems/Basic/DateTimeProvider.tsx @@ -4,10 +4,10 @@ import deLocale from "date-fns/locale/de" import enLocale from "date-fns/locale/en-US" import esLocale from "date-fns/locale/es" import ptLocale from "date-fns/locale/pt" -import { FC, PropsWithChildren } from "react" -import { Language } from "../../lib/types" +import type { FC, PropsWithChildren } from "react" +import type { Language } from "../../lib/types" -const localeMap = { +export const localeMap = { en: enLocale, es: esLocale, pt: ptLocale, diff --git a/src/FormItems/Basic/MonthInput.tsx b/src/FormItems/Basic/MonthInput.tsx new file mode 100644 index 0000000..7d69d42 --- /dev/null +++ b/src/FormItems/Basic/MonthInput.tsx @@ -0,0 +1,58 @@ +import { FormControl, FormHelperText } from "@mui/material" +import { DatePicker } from "@mui/x-date-pickers-pro" +import { format } from "date-fns" +import { useController } from "react-hook-form" +import { useLocale } from "../../lib/theme" +import type { InputProps, Language } from "../../lib/types" +import DateTimeProvider, { localeMap } from "./DateTimeProvider" + +export default function YearInput({ + label, + name, + index, + subName, + helperText, +}: Props) { + const { lang } = useLocale() + const formName = + typeof index === "number" && subName ? `${name}[${index}].${subName}` : name + + const { field, fieldState } = useController({ name: formName }) + + return ( + + + field.onChange({ target: { value: month } })} + slotProps={{ + textField: { + size: "small", + InputProps: { + value: + field.value === null + ? "" + : format(new Date(field.value), "MMMM yyyy", { + locale: localeMap[lang], + }), + }, + FormHelperTextProps: { style: { display: "none" } }, + }, + }} + /> + + + {fieldState.error ? fieldState.error.message : helperText} + + + ) +} + +interface Props extends InputProps {} diff --git a/src/FormItems/Basic/YearInput.tsx b/src/FormItems/Basic/YearInput.tsx new file mode 100644 index 0000000..5f047e9 --- /dev/null +++ b/src/FormItems/Basic/YearInput.tsx @@ -0,0 +1,55 @@ +import { FormControl, FormHelperText } from "@mui/material" +import { DatePicker } from "@mui/x-date-pickers-pro" +import { useController } from "react-hook-form" +import { useLocale } from "../../lib/theme" +import type { InputProps, Language } from "../../lib/types" +import DateTimeProvider from "./DateTimeProvider" + +export default function YearInput({ + label, + name, + index, + subName, + helperText, +}: Props) { + const { lang } = useLocale() + const formName = + typeof index === "number" && subName ? `${name}[${index}].${subName}` : name + + const { field, fieldState } = useController({ name: formName }) + + return ( + + + field.onChange({ target: { value: year } })} + slotProps={{ + textField: { + size: "small", + InputProps: { + value: + field.value === null + ? "" + : new Date(field.value)?.getFullYear?.(), + }, + FormHelperTextProps: { style: { display: "none" } }, + }, + }} + /> + + + {fieldState.error ? fieldState.error.message : helperText} + + + ) +} + +interface Props extends InputProps {} diff --git a/src/FormItems/MultiCreate.tsx b/src/FormItems/MultiCreate.tsx index 66e7977..2d52aa4 100755 --- a/src/FormItems/MultiCreate.tsx +++ b/src/FormItems/MultiCreate.tsx @@ -12,12 +12,17 @@ import { FormHelperText, FormLabel, } from "@mui/material" -import { FC, PropsWithChildren, useId, useMemo, useState } from "react" +import { + type FC, + type PropsWithChildren, + useId, + useMemo, + useState, +} from "react" import { useController, useFormContext, useWatch } from "react-hook-form" import Table from "../Table" import { generateSlug, getErrorMessage } from "../lib/misc" import { useLocale } from "../lib/theme" - import SubmitButton from "./Basic/SubmitButton" const StyledDialogContent = styled(DialogContent)` @@ -164,52 +169,51 @@ const MultiCreate: FC> = ({ > {label} {tableData?.length > 0 && ( - <> - ({ - ...(field.getOptionLabel - ? { - id: field.name, - accessorFn: (row) => field.getOptionLabel(row), - } - : { - accessorKey: field.name, - }), - header: field.label, - enableSorting: false, - }))} - data={formatFunction ? formatFunction(tableData) : tableData} - rowActions={[ - { - label: locales.edit, - onClick: (row) => { - const newArray = Array.from(tableData) +
Boolean(er))} + hideSearch + columns={fields.map((field) => ({ + ...(field.getOptionLabel + ? { + id: field.name, + accessorFn: (row) => field.getOptionLabel(row), + } + : { + accessorKey: field.name, + }), + header: field.label, + enableSorting: false, + }))} + data={formatFunction ? formatFunction(tableData) : tableData} + rowActions={[ + { + label: locales.edit, + onClick: (row) => { + const newArray = Array.from(tableData) - const item = newArray.splice(row.index, 1) + const item = newArray.splice(row.index, 1) - newArray.push(item[0]) + newArray.push(item[0]) - field.onChange({ target: { value: newArray } }) + field.onChange({ target: { value: newArray } }) - setIsUpdating(row.index) - }, - icon: , + setIsUpdating(row.index) }, - { - label: locales.delete, - onClick: (row) => { - const updatedData = Array.from(tableData) - updatedData.splice(row.index, 1) - field.onChange({ - target: { value: updatedData }, - }) - }, - icon: , + icon: , + }, + { + label: locales.delete, + onClick: (row) => { + const updatedData = Array.from(tableData) + updatedData.splice(row.index, 1) + field.onChange({ + target: { value: updatedData }, + }) }, - ]} - /> - + icon: , + }, + ]} + /> )} = ({ maxHeight, style, labelledBy, + error, }) => { const { locales } = useLocale() const [sorting, setSorting] = useState([]) @@ -192,7 +193,7 @@ const Table: FC = ({ ))} - {!Boolean(data) ? ( + {!data ? ( {array.map((row, ind) => ( @@ -209,18 +210,21 @@ const Table: FC = ({ ) : rows.length > 0 ? ( - {rows.map((row) => { + {rows.map((row, ind) => { return ( onRowClick && onRowClick(row)} + } `} + onClick={() => onRowClick?.(row)} > {row.getVisibleCells().map((cell) => { return ( - + {flexRender( cell.column.columnDef.cell, cell.getContext(), @@ -263,4 +267,5 @@ export interface Props { maxHeight?: number style?: CSSProperties labelledBy?: string + error?: number } diff --git a/src/index.ts b/src/index.ts index 784ae8c..d2f9317 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,6 +26,7 @@ export { default as DateTimeInput } from "./FormItems/Basic/DateTimeInput" export { default as DateTimeProvider } from "./FormItems/Basic/DateTimeProvider" export { default as EmailInput } from "./FormItems/Basic/EmailInput" export { default as Form } from "./FormItems/Basic/Form" +export { default as MonthInput } from "./FormItems/Basic/MonthInput" export { default as MultiCombobox } from "./FormItems/Basic/MultiCombobox" export { default as NumberInput } from "./FormItems/Basic/NumberInput" export { default as PasswordInput } from "./FormItems/Basic/PasswordInput" @@ -36,6 +37,7 @@ export { default as TextAreaInput } from "./FormItems/Basic/TextAreaInput" export { default as TextInput } from "./FormItems/Basic/TextInput" export { default as TextListInput } from "./FormItems/Basic/TextListInput" export { default as TimeInput } from "./FormItems/Basic/TimeInput" +export { default as YearInput } from "./FormItems/Basic/YearInput" export { default as ZipInput } from "./FormItems/Basic/ZipInput" export { default as EntitySelect } from "./FormItems/EntitySelect" export { default as FileInput } from "./FormItems/FileInput" @@ -50,10 +52,10 @@ export { default as FormModal } from "./FormModal" export { default as FormPage } from "./FormPage" export { default as ImageViewer } from "./ImageViewer" export { default as Infos } from "./Infos" -export { default as Table } from "./Table" export * from "./lib/colors" export * from "./lib/date" export * from "./lib/misc" export * from "./lib/styles" export { defaultTheme, useLocale } from "./lib/theme" export * from "./lib/types" +export { default as Table } from "./Table"