@bsol-oss/react-datatable5 12.0.0-beta.27 → 12.0.0-beta.29

package/dist/index.d.ts

@@ -470,6 +470,7 @@ interface CustomJSONSchema7 extends JSONSchema7 {
         formContext: UseFormReturn;
     }) => ReactNode;
     dateFormat?: string;
+    displayDateFormat?: string;
 }
 
 interface FormRootProps<TData extends FieldValues> {

package/dist/index.js

@@ -30,6 +30,7 @@ var reactI18next = require('react-i18next');
 var axios = require('axios');
 var reactHookForm = require('react-hook-form');
 var dayjs = require('dayjs');
+var utc = require('dayjs/plugin/utc');
 var ti = require('react-icons/ti');
 
 function _interopNamespaceDefault(e) {
@@ -3790,14 +3791,16 @@ const PopoverRoot = react.Popover.Root;
 const PopoverBody = react.Popover.Body;
 const PopoverTrigger = react.Popover.Trigger;
 
+dayjs.extend(utc);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow, dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
+    const { required, gridColumn = "span 4", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = React.useState(false);
     const selectedDate = watch(colLabel);
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     React.useEffect(() => {
         try {
             if (selectedDate) {
@@ -3808,7 +3811,6 @@ const DatePicker = ({ column, schema, prefix }) => {
                 // const parsedDate = dayjs.tz(selectedDate, dayjs.tz.guess());
                 if (!parsedDate.isValid())
                     return;
-                console.log(selectedDate, parsedDate, parsedDate.format(dateFormat), "dkosfp");
                 // Format according to dateFormat from schema
                 const formatted = parsedDate.format(dateFormat);
                 // Update the form value only if different to avoid loops
@@ -3827,7 +3829,7 @@ const DatePicker = ({ column, schema, prefix }) => {
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, justifyContent: "start", children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${selectedDate}` : ""] }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
+                            }, justifyContent: "start", children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ""] }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
                                 // @ts-expect-error TODO: find appropriate types
                                 , { 
                                     // @ts-expect-error TODO: find appropriate types
@@ -4868,12 +4870,13 @@ const CustomViewer = ({ column, schema, prefix }) => {
 const DateViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn, gridRow, displayDateFormat = "YYYY-MM-DD", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
 };
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {

package/dist/index.mjs

@@ -29,6 +29,7 @@ import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 import { FormProvider, useFormContext, useForm as useForm$1 } from 'react-hook-form';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { TiDeleteOutline } from 'react-icons/ti';
 
 const DataTableContext = createContext({
@@ -3770,14 +3771,16 @@ const PopoverRoot = Popover.Root;
 const PopoverBody = Popover.Body;
 const PopoverTrigger = Popover.Trigger;
 
+dayjs.extend(utc);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow, dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
+    const { required, gridColumn = "span 4", gridRow = "span 1", displayDateFormat = "YYYY-MM-DD", dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const [open, setOpen] = useState(false);
     const selectedDate = watch(colLabel);
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     useEffect(() => {
         try {
             if (selectedDate) {
@@ -3788,7 +3791,6 @@ const DatePicker = ({ column, schema, prefix }) => {
                 // const parsedDate = dayjs.tz(selectedDate, dayjs.tz.guess());
                 if (!parsedDate.isValid())
                     return;
-                console.log(selectedDate, parsedDate, parsedDate.format(dateFormat), "dkosfp");
                 // Format according to dateFormat from schema
                 const formatted = parsedDate.format(dateFormat);
                 // Update the form value only if different to avoid loops
@@ -3807,7 +3809,7 @@ const DatePicker = ({ column, schema, prefix }) => {
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${selectedDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
+                            }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
                                 // @ts-expect-error TODO: find appropriate types
                                 , { 
                                     // @ts-expect-error TODO: find appropriate types
@@ -4848,12 +4850,13 @@ const CustomViewer = ({ column, schema, prefix }) => {
 const DateViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required, gridColumn, gridRow } = schema;
+    const { required, gridColumn, gridRow, displayDateFormat = "YYYY-MM-DD", } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const selectedDate = watch(colLabel);
+    const displayDate = dayjs.utc(selectedDate).format(displayDateFormat);
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
+        gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
 };
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {

package/dist/types/components/Form/components/fields/DatePicker.d.ts

@@ -1,7 +1,2 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
-export interface DatePickerProps {
-    column: string;
-    schema: CustomJSONSchema7;
-    prefix: string;
-}
-export declare const DatePicker: ({ column, schema, prefix }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+import { InputDefaultProps } from "./types";
+export declare const DatePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/FilePicker.d.ts

@@ -1,5 +1,2 @@
-export declare const FilePicker: ({ column, schema, prefix }: {
-    column: any;
-    schema: any;
-    prefix: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { InputDefaultProps } from "./types";
+export declare const FilePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/StringInputField.d.ts

@@ -1,8 +1,5 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
-export interface StringInputFieldProps {
-    column: string;
-    schema: CustomJSONSchema7;
-    prefix: string;
+import { InputDefaultProps } from "./types";
+export interface StringInputFieldProps extends InputDefaultProps {
 }
 export interface ForeignKeyProps {
     column: string;

package/dist/types/components/Form/components/fields/types.d.ts

@@ -0,0 +1,6 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export type InputDefaultProps = {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+};

package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts

@@ -21,6 +21,7 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
         formContext: UseFormReturn;
     }) => ReactNode;
     dateFormat?: string;
+    displayDateFormat?: string;
 }
 export interface TagPickerProps {
     column: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.27",
+  "version": "12.0.0-beta.29",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",