@bsol-oss/react-datatable5 12.0.0-beta.22 → 12.0.0-beta.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -1
- package/dist/index.js +90 -16
- package/dist/index.mjs +91 -17
- package/dist/types/components/DataTable/context/DataTableContext.d.ts +1 -1
- package/dist/types/components/Form/components/fields/TextAreaInput.d.ts +12 -0
- package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +1 -0
- package/dist/types/components/Form/components/viewers/TextAreaViewer.d.ts +12 -0
- package/dist/types/components/Form/components/viewers/TimeViewer.d.ts +7 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -171,7 +171,7 @@ interface DataTableContext<TData = unknown> extends DataTableProps {
|
|
|
171
171
|
globalFilter: string;
|
|
172
172
|
setGlobalFilter: OnChangeFn<string>;
|
|
173
173
|
type: "client" | "server";
|
|
174
|
-
translate: UseTranslationResponse<any,
|
|
174
|
+
translate: UseTranslationResponse<any, unknown>;
|
|
175
175
|
}
|
|
176
176
|
declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
|
|
177
177
|
|
|
@@ -469,6 +469,7 @@ interface CustomJSONSchema7 extends JSONSchema7 {
|
|
|
469
469
|
prefix: string;
|
|
470
470
|
formContext: UseFormReturn;
|
|
471
471
|
}) => ReactNode;
|
|
472
|
+
dateFormat?: string;
|
|
472
473
|
}
|
|
473
474
|
|
|
474
475
|
interface FormRootProps<TData extends FieldValues> {
|
package/dist/index.js
CHANGED
|
@@ -57,6 +57,39 @@ const DataTableContext = React.createContext({
|
|
|
57
57
|
setGlobalFilter: () => { },
|
|
58
58
|
type: "client",
|
|
59
59
|
translate: {},
|
|
60
|
+
data: [],
|
|
61
|
+
columns: [],
|
|
62
|
+
columnOrder: [],
|
|
63
|
+
columnFilters: [],
|
|
64
|
+
density: "sm",
|
|
65
|
+
sorting: [],
|
|
66
|
+
setPagination: function () {
|
|
67
|
+
throw new Error("Function not implemented.");
|
|
68
|
+
},
|
|
69
|
+
setSorting: function () {
|
|
70
|
+
throw new Error("Function not implemented.");
|
|
71
|
+
},
|
|
72
|
+
setColumnFilters: function () {
|
|
73
|
+
throw new Error("Function not implemented.");
|
|
74
|
+
},
|
|
75
|
+
setRowSelection: function () {
|
|
76
|
+
throw new Error("Function not implemented.");
|
|
77
|
+
},
|
|
78
|
+
setColumnOrder: function () {
|
|
79
|
+
throw new Error("Function not implemented.");
|
|
80
|
+
},
|
|
81
|
+
setDensity: function () {
|
|
82
|
+
throw new Error("Function not implemented.");
|
|
83
|
+
},
|
|
84
|
+
setColumnVisibility: function () {
|
|
85
|
+
throw new Error("Function not implemented.");
|
|
86
|
+
},
|
|
87
|
+
pagination: {
|
|
88
|
+
pageIndex: 0,
|
|
89
|
+
pageSize: 10,
|
|
90
|
+
},
|
|
91
|
+
rowSelection: {},
|
|
92
|
+
columnVisibility: {},
|
|
60
93
|
});
|
|
61
94
|
|
|
62
95
|
const useDataTableContext = () => {
|
|
@@ -2441,8 +2474,8 @@ react.CheckboxCard.Indicator;
|
|
|
2441
2474
|
function ColumnCard({ columnId }) {
|
|
2442
2475
|
const ref = React.useRef(null);
|
|
2443
2476
|
const [dragging, setDragging] = React.useState(false); // NEW
|
|
2444
|
-
const { table } = useDataTableContext();
|
|
2445
|
-
const displayName = columnId;
|
|
2477
|
+
const { table, translate } = useDataTableContext();
|
|
2478
|
+
const displayName = translate.t(columnId);
|
|
2446
2479
|
const column = table.getColumn(columnId);
|
|
2447
2480
|
invariant(column);
|
|
2448
2481
|
React.useEffect(() => {
|
|
@@ -3760,7 +3793,7 @@ const PopoverTrigger = react.Popover.Trigger;
|
|
|
3760
3793
|
const DatePicker = ({ column, schema, prefix }) => {
|
|
3761
3794
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
3762
3795
|
const { translate } = useSchemaContext();
|
|
3763
|
-
const { required, gridColumn, gridRow } = schema;
|
|
3796
|
+
const { required, gridColumn, gridRow, dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
|
|
3764
3797
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3765
3798
|
const colLabel = `${prefix}${column}`;
|
|
3766
3799
|
const [open, setOpen] = React.useState(false);
|
|
@@ -3776,7 +3809,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3776
3809
|
selected: new Date(selectedDate),
|
|
3777
3810
|
// @ts-expect-error TODO: find appropriate types
|
|
3778
3811
|
onDateSelected: ({ date }) => {
|
|
3779
|
-
setValue(colLabel, dayjs(date).format(
|
|
3812
|
+
setValue(colLabel, dayjs(date).format(dateFormat));
|
|
3780
3813
|
setOpen(false);
|
|
3781
3814
|
} })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3782
3815
|
};
|
|
@@ -4587,6 +4620,15 @@ const TagPicker = ({ column, schema, prefix }) => {
|
|
|
4587
4620
|
}), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
|
|
4588
4621
|
};
|
|
4589
4622
|
|
|
4623
|
+
const TextAreaInput = ({ column, schema, prefix, }) => {
|
|
4624
|
+
const { register, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4625
|
+
const { translate } = useSchemaContext();
|
|
4626
|
+
const { required, gridColumn, gridRow } = schema;
|
|
4627
|
+
const isRequired = required?.some((columnId) => columnId === column);
|
|
4628
|
+
const colLabel = `${prefix}${column}`;
|
|
4629
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Textarea, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4630
|
+
};
|
|
4631
|
+
|
|
4590
4632
|
function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
|
|
4591
4633
|
am: "am",
|
|
4592
4634
|
pm: "pm",
|
|
@@ -4710,6 +4752,9 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
|
|
|
4710
4752
|
if (variant === "time-picker") {
|
|
4711
4753
|
return jsxRuntime.jsx(TimePicker, { schema: colSchema, prefix, column });
|
|
4712
4754
|
}
|
|
4755
|
+
if (variant === "text-area") {
|
|
4756
|
+
return jsxRuntime.jsx(TextAreaInput, { schema: colSchema, prefix, column });
|
|
4757
|
+
}
|
|
4713
4758
|
return jsxRuntime.jsx(StringInputField, { schema: colSchema, prefix, column });
|
|
4714
4759
|
}
|
|
4715
4760
|
if (type === "number" || type === "integer") {
|
|
@@ -4780,6 +4825,18 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
|
4780
4825
|
: translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4781
4826
|
};
|
|
4782
4827
|
|
|
4828
|
+
const CustomViewer = ({ column, schema, prefix }) => {
|
|
4829
|
+
const formContext = reactHookForm.useFormContext();
|
|
4830
|
+
const { inputViewerRender } = schema;
|
|
4831
|
+
return (inputViewerRender &&
|
|
4832
|
+
inputViewerRender({
|
|
4833
|
+
column,
|
|
4834
|
+
schema,
|
|
4835
|
+
prefix,
|
|
4836
|
+
formContext,
|
|
4837
|
+
}));
|
|
4838
|
+
};
|
|
4839
|
+
|
|
4783
4840
|
const DateViewer = ({ column, schema, prefix }) => {
|
|
4784
4841
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4785
4842
|
const { translate } = useSchemaContext();
|
|
@@ -4935,6 +4992,16 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4935
4992
|
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4936
4993
|
};
|
|
4937
4994
|
|
|
4995
|
+
const StringViewer = ({ column, schema, prefix, }) => {
|
|
4996
|
+
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
4997
|
+
const { translate } = useSchemaContext();
|
|
4998
|
+
const { required, gridColumn, gridRow } = schema;
|
|
4999
|
+
const isRequired = required?.some((columnId) => columnId === column);
|
|
5000
|
+
const colLabel = `${prefix}${column}`;
|
|
5001
|
+
const value = watch(colLabel);
|
|
5002
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5003
|
+
};
|
|
5004
|
+
|
|
4938
5005
|
const TagViewer = ({ column, schema, prefix }) => {
|
|
4939
5006
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4940
5007
|
const { serverUrl } = useSchemaContext();
|
|
@@ -5020,26 +5087,27 @@ const TagViewer = ({ column, schema, prefix }) => {
|
|
|
5020
5087
|
}), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
|
|
5021
5088
|
};
|
|
5022
5089
|
|
|
5023
|
-
const
|
|
5090
|
+
const TextAreaViewer = ({ column, schema, prefix, }) => {
|
|
5024
5091
|
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
5025
5092
|
const { translate } = useSchemaContext();
|
|
5026
5093
|
const { required, gridColumn, gridRow } = schema;
|
|
5027
5094
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5028
5095
|
const colLabel = `${prefix}${column}`;
|
|
5029
5096
|
const value = watch(colLabel);
|
|
5030
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5097
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { whiteSpace: "pre-wrap", children: value }), " ", errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5031
5098
|
};
|
|
5032
5099
|
|
|
5033
|
-
const
|
|
5034
|
-
const
|
|
5035
|
-
const {
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
|
|
5039
|
-
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
|
|
5100
|
+
const TimeViewer = ({ column, schema, prefix }) => {
|
|
5101
|
+
const { watch, formState: { errors }, } = reactHookForm.useFormContext();
|
|
5102
|
+
const { translate } = useSchemaContext();
|
|
5103
|
+
const { required, gridColumn, gridRow } = schema;
|
|
5104
|
+
const isRequired = required?.some((columnId) => columnId === column);
|
|
5105
|
+
const colLabel = `${prefix}${column}`;
|
|
5106
|
+
const selectedDate = watch(colLabel);
|
|
5107
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
5108
|
+
gridRow, children: [jsxRuntime.jsx(react.Text, { children: selectedDate !== undefined
|
|
5109
|
+
? dayjs(selectedDate).format("hh:mm A")
|
|
5110
|
+
: "" }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
5043
5111
|
};
|
|
5044
5112
|
|
|
5045
5113
|
const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
@@ -5059,6 +5127,12 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
|
5059
5127
|
if (variant === "date-picker") {
|
|
5060
5128
|
return jsxRuntime.jsx(DateViewer, { schema: colSchema, prefix, column });
|
|
5061
5129
|
}
|
|
5130
|
+
if (variant === "time-picker") {
|
|
5131
|
+
return jsxRuntime.jsx(TimeViewer, { schema: colSchema, prefix, column });
|
|
5132
|
+
}
|
|
5133
|
+
if (variant === "text-area") {
|
|
5134
|
+
return jsxRuntime.jsx(TextAreaViewer, { schema: colSchema, prefix, column });
|
|
5135
|
+
}
|
|
5062
5136
|
return jsxRuntime.jsx(StringViewer, { schema: colSchema, prefix, column });
|
|
5063
5137
|
}
|
|
5064
5138
|
if (type === "number" || type === "integer") {
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Image, EmptyState as EmptyState$2, VStack, Alert, Card, Tooltip as Tooltip$1, Group, InputElement, Icon, List, Table as Table$1, Checkbox as Checkbox$1, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, createListCollection, Select, Center, Heading } from '@chakra-ui/react';
|
|
2
|
+
import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Image, EmptyState as EmptyState$2, VStack, Alert, Card, Tooltip as Tooltip$1, Group, InputElement, Icon, List, Table as Table$1, Checkbox as Checkbox$1, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, Textarea, createListCollection, Select, Center, Heading } from '@chakra-ui/react';
|
|
3
3
|
import { AiOutlineColumnWidth } from 'react-icons/ai';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import React__default, { createContext, useContext, useState, useEffect, useRef } from 'react';
|
|
@@ -37,6 +37,39 @@ const DataTableContext = createContext({
|
|
|
37
37
|
setGlobalFilter: () => { },
|
|
38
38
|
type: "client",
|
|
39
39
|
translate: {},
|
|
40
|
+
data: [],
|
|
41
|
+
columns: [],
|
|
42
|
+
columnOrder: [],
|
|
43
|
+
columnFilters: [],
|
|
44
|
+
density: "sm",
|
|
45
|
+
sorting: [],
|
|
46
|
+
setPagination: function () {
|
|
47
|
+
throw new Error("Function not implemented.");
|
|
48
|
+
},
|
|
49
|
+
setSorting: function () {
|
|
50
|
+
throw new Error("Function not implemented.");
|
|
51
|
+
},
|
|
52
|
+
setColumnFilters: function () {
|
|
53
|
+
throw new Error("Function not implemented.");
|
|
54
|
+
},
|
|
55
|
+
setRowSelection: function () {
|
|
56
|
+
throw new Error("Function not implemented.");
|
|
57
|
+
},
|
|
58
|
+
setColumnOrder: function () {
|
|
59
|
+
throw new Error("Function not implemented.");
|
|
60
|
+
},
|
|
61
|
+
setDensity: function () {
|
|
62
|
+
throw new Error("Function not implemented.");
|
|
63
|
+
},
|
|
64
|
+
setColumnVisibility: function () {
|
|
65
|
+
throw new Error("Function not implemented.");
|
|
66
|
+
},
|
|
67
|
+
pagination: {
|
|
68
|
+
pageIndex: 0,
|
|
69
|
+
pageSize: 10,
|
|
70
|
+
},
|
|
71
|
+
rowSelection: {},
|
|
72
|
+
columnVisibility: {},
|
|
40
73
|
});
|
|
41
74
|
|
|
42
75
|
const useDataTableContext = () => {
|
|
@@ -2421,8 +2454,8 @@ CheckboxCard$1.Indicator;
|
|
|
2421
2454
|
function ColumnCard({ columnId }) {
|
|
2422
2455
|
const ref = useRef(null);
|
|
2423
2456
|
const [dragging, setDragging] = useState(false); // NEW
|
|
2424
|
-
const { table } = useDataTableContext();
|
|
2425
|
-
const displayName = columnId;
|
|
2457
|
+
const { table, translate } = useDataTableContext();
|
|
2458
|
+
const displayName = translate.t(columnId);
|
|
2426
2459
|
const column = table.getColumn(columnId);
|
|
2427
2460
|
invariant(column);
|
|
2428
2461
|
useEffect(() => {
|
|
@@ -3740,7 +3773,7 @@ const PopoverTrigger = Popover.Trigger;
|
|
|
3740
3773
|
const DatePicker = ({ column, schema, prefix }) => {
|
|
3741
3774
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
3742
3775
|
const { translate } = useSchemaContext();
|
|
3743
|
-
const { required, gridColumn, gridRow } = schema;
|
|
3776
|
+
const { required, gridColumn, gridRow, dateFormat = "YYYY-MM-DD[T]HH:mm:ss[Z]", } = schema;
|
|
3744
3777
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
3745
3778
|
const colLabel = `${prefix}${column}`;
|
|
3746
3779
|
const [open, setOpen] = useState(false);
|
|
@@ -3756,7 +3789,7 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
3756
3789
|
selected: new Date(selectedDate),
|
|
3757
3790
|
// @ts-expect-error TODO: find appropriate types
|
|
3758
3791
|
onDateSelected: ({ date }) => {
|
|
3759
|
-
setValue(colLabel, dayjs(date).format(
|
|
3792
|
+
setValue(colLabel, dayjs(date).format(dateFormat));
|
|
3760
3793
|
setOpen(false);
|
|
3761
3794
|
} })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
3762
3795
|
};
|
|
@@ -4567,6 +4600,15 @@ const TagPicker = ({ column, schema, prefix }) => {
|
|
|
4567
4600
|
}), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
|
|
4568
4601
|
};
|
|
4569
4602
|
|
|
4603
|
+
const TextAreaInput = ({ column, schema, prefix, }) => {
|
|
4604
|
+
const { register, formState: { errors }, } = useFormContext();
|
|
4605
|
+
const { translate } = useSchemaContext();
|
|
4606
|
+
const { required, gridColumn, gridRow } = schema;
|
|
4607
|
+
const isRequired = required?.some((columnId) => columnId === column);
|
|
4608
|
+
const colLabel = `${prefix}${column}`;
|
|
4609
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Textarea, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4610
|
+
};
|
|
4611
|
+
|
|
4570
4612
|
function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
|
|
4571
4613
|
am: "am",
|
|
4572
4614
|
pm: "pm",
|
|
@@ -4690,6 +4732,9 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
|
|
|
4690
4732
|
if (variant === "time-picker") {
|
|
4691
4733
|
return jsx(TimePicker, { schema: colSchema, prefix, column });
|
|
4692
4734
|
}
|
|
4735
|
+
if (variant === "text-area") {
|
|
4736
|
+
return jsx(TextAreaInput, { schema: colSchema, prefix, column });
|
|
4737
|
+
}
|
|
4693
4738
|
return jsx(StringInputField, { schema: colSchema, prefix, column });
|
|
4694
4739
|
}
|
|
4695
4740
|
if (type === "number" || type === "integer") {
|
|
@@ -4760,6 +4805,18 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
|
|
|
4760
4805
|
: translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4761
4806
|
};
|
|
4762
4807
|
|
|
4808
|
+
const CustomViewer = ({ column, schema, prefix }) => {
|
|
4809
|
+
const formContext = useFormContext();
|
|
4810
|
+
const { inputViewerRender } = schema;
|
|
4811
|
+
return (inputViewerRender &&
|
|
4812
|
+
inputViewerRender({
|
|
4813
|
+
column,
|
|
4814
|
+
schema,
|
|
4815
|
+
prefix,
|
|
4816
|
+
formContext,
|
|
4817
|
+
}));
|
|
4818
|
+
};
|
|
4819
|
+
|
|
4763
4820
|
const DateViewer = ({ column, schema, prefix }) => {
|
|
4764
4821
|
const { watch, formState: { errors }, } = useFormContext();
|
|
4765
4822
|
const { translate } = useSchemaContext();
|
|
@@ -4915,6 +4972,16 @@ const RecordInput = ({ column, schema, prefix }) => {
|
|
|
4915
4972
|
}, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
4916
4973
|
};
|
|
4917
4974
|
|
|
4975
|
+
const StringViewer = ({ column, schema, prefix, }) => {
|
|
4976
|
+
const { watch, formState: { errors }, } = useFormContext();
|
|
4977
|
+
const { translate } = useSchemaContext();
|
|
4978
|
+
const { required, gridColumn, gridRow } = schema;
|
|
4979
|
+
const isRequired = required?.some((columnId) => columnId === column);
|
|
4980
|
+
const colLabel = `${prefix}${column}`;
|
|
4981
|
+
const value = watch(colLabel);
|
|
4982
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: value }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
4983
|
+
};
|
|
4984
|
+
|
|
4918
4985
|
const TagViewer = ({ column, schema, prefix }) => {
|
|
4919
4986
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4920
4987
|
const { serverUrl } = useSchemaContext();
|
|
@@ -5000,26 +5067,27 @@ const TagViewer = ({ column, schema, prefix }) => {
|
|
|
5000
5067
|
}), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
|
|
5001
5068
|
};
|
|
5002
5069
|
|
|
5003
|
-
const
|
|
5070
|
+
const TextAreaViewer = ({ column, schema, prefix, }) => {
|
|
5004
5071
|
const { watch, formState: { errors }, } = useFormContext();
|
|
5005
5072
|
const { translate } = useSchemaContext();
|
|
5006
5073
|
const { required, gridColumn, gridRow } = schema;
|
|
5007
5074
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
5008
5075
|
const colLabel = `${prefix}${column}`;
|
|
5009
5076
|
const value = watch(colLabel);
|
|
5010
|
-
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: value }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5077
|
+
return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { whiteSpace: "pre-wrap", children: value }), " ", errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
|
|
5011
5078
|
};
|
|
5012
5079
|
|
|
5013
|
-
const
|
|
5014
|
-
const
|
|
5015
|
-
const {
|
|
5016
|
-
|
|
5017
|
-
|
|
5018
|
-
|
|
5019
|
-
|
|
5020
|
-
|
|
5021
|
-
|
|
5022
|
-
|
|
5080
|
+
const TimeViewer = ({ column, schema, prefix }) => {
|
|
5081
|
+
const { watch, formState: { errors }, } = useFormContext();
|
|
5082
|
+
const { translate } = useSchemaContext();
|
|
5083
|
+
const { required, gridColumn, gridRow } = schema;
|
|
5084
|
+
const isRequired = required?.some((columnId) => columnId === column);
|
|
5085
|
+
const colLabel = `${prefix}${column}`;
|
|
5086
|
+
const selectedDate = watch(colLabel);
|
|
5087
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
|
|
5088
|
+
gridRow, children: [jsx(Text, { children: selectedDate !== undefined
|
|
5089
|
+
? dayjs(selectedDate).format("hh:mm A")
|
|
5090
|
+
: "" }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
|
|
5023
5091
|
};
|
|
5024
5092
|
|
|
5025
5093
|
const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
@@ -5039,6 +5107,12 @@ const SchemaViewer = ({ schema, prefix, column, }) => {
|
|
|
5039
5107
|
if (variant === "date-picker") {
|
|
5040
5108
|
return jsx(DateViewer, { schema: colSchema, prefix, column });
|
|
5041
5109
|
}
|
|
5110
|
+
if (variant === "time-picker") {
|
|
5111
|
+
return jsx(TimeViewer, { schema: colSchema, prefix, column });
|
|
5112
|
+
}
|
|
5113
|
+
if (variant === "text-area") {
|
|
5114
|
+
return jsx(TextAreaViewer, { schema: colSchema, prefix, column });
|
|
5115
|
+
}
|
|
5042
5116
|
return jsx(StringViewer, { schema: colSchema, prefix, column });
|
|
5043
5117
|
}
|
|
5044
5118
|
if (type === "number" || type === "integer") {
|
|
@@ -7,6 +7,6 @@ export interface DataTableContext<TData = unknown> extends DataTableProps {
|
|
|
7
7
|
globalFilter: string;
|
|
8
8
|
setGlobalFilter: OnChangeFn<string>;
|
|
9
9
|
type: "client" | "server";
|
|
10
|
-
translate: UseTranslationResponse<any,
|
|
10
|
+
translate: UseTranslationResponse<any, unknown>;
|
|
11
11
|
}
|
|
12
12
|
export declare const DataTableContext: import("react").Context<DataTableContext<unknown>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
|
|
2
|
+
export interface TextAreaInputProps {
|
|
3
|
+
column: string;
|
|
4
|
+
schema: CustomJSONSchema7;
|
|
5
|
+
prefix: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ForeignKeyProps {
|
|
8
|
+
column: string;
|
|
9
|
+
table: string;
|
|
10
|
+
display_column: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const TextAreaInput: ({ column, schema, prefix, }: TextAreaInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
|
|
2
|
+
export interface TextAreaViewerProps {
|
|
3
|
+
column: string;
|
|
4
|
+
schema: CustomJSONSchema7;
|
|
5
|
+
prefix: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ForeignKeyProps {
|
|
8
|
+
column: string;
|
|
9
|
+
table: string;
|
|
10
|
+
display_column: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const TextAreaViewer: ({ column, schema, prefix, }: TextAreaViewerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
|
|
2
|
+
export interface TimeViewerProps {
|
|
3
|
+
column: string;
|
|
4
|
+
schema: CustomJSONSchema7;
|
|
5
|
+
prefix: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const TimeViewer: ({ column, schema, prefix }: TimeViewerProps) => import("react/jsx-runtime").JSX.Element;
|