@bsol-oss/react-datatable5 12.0.0-beta.7 → 12.0.0-beta.70
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/README.md +192 -0
- package/dist/index.d.ts +277 -83
- package/dist/index.js +1577 -469
- package/dist/index.mjs +1585 -477
- package/dist/types/components/DataTable/DataTable.d.ts +3 -1
- package/dist/types/components/DataTable/DataTableServer.d.ts +6 -4
- package/dist/types/components/DataTable/DefaultTable.d.ts +6 -9
- package/dist/types/components/DataTable/context/DataTableContext.d.ts +21 -3
- package/dist/types/components/DataTable/context/useDataTableContext.d.ts +2 -2
- package/dist/types/components/DataTable/controls/ReloadButton.d.ts +1 -2
- package/dist/types/components/DataTable/controls/ResetFilteringButton.d.ts +1 -4
- package/dist/types/components/DataTable/controls/ResetSelectionButton.d.ts +1 -4
- package/dist/types/components/DataTable/controls/ResetSortingButton.d.ts +1 -4
- package/dist/types/components/DataTable/controls/TableControls.d.ts +10 -2
- package/dist/types/components/DataTable/display/TableBody.d.ts +1 -2
- package/dist/types/components/DataTable/display/TableCardContainer.d.ts +6 -3
- package/dist/types/components/DataTable/display/TableDataDisplay.d.ts +6 -1
- package/dist/types/components/DataTable/display/TableFooter.d.ts +1 -5
- package/dist/types/components/DataTable/display/TableHeader.d.ts +46 -8
- package/dist/types/components/DataTable/useDataTableServer.d.ts +55 -3
- package/dist/types/components/DatePicker/DatePicker.d.ts +23 -0
- package/dist/types/components/DatePicker/DateTimePicker.d.ts +11 -0
- package/dist/types/components/DatePicker/DurationPicker.d.ts +12 -0
- package/dist/types/components/DatePicker/IsoTimePicker.d.ts +16 -0
- package/dist/types/components/DatePicker/PickerDemo.d.ts +1 -0
- package/dist/types/components/DatePicker/UniversalPicker.d.ts +9 -0
- package/dist/types/components/DatePicker/index.d.ts +7 -0
- package/dist/types/components/Filter/TagFilter.d.ts +5 -1
- package/dist/types/components/Form/SchemaFormContext.d.ts +8 -1
- package/dist/types/components/Form/components/core/DefaultForm.d.ts +1 -0
- package/dist/types/components/Form/components/core/FormRoot.d.ts +9 -2
- package/dist/types/components/Form/components/fields/CustomInput.d.ts +8 -0
- package/dist/types/components/Form/components/fields/DatePicker.d.ts +2 -7
- package/dist/types/components/Form/components/fields/DateTimePicker.d.ts +2 -0
- package/dist/types/components/Form/components/fields/EnumPicker.d.ts +2 -1
- package/dist/types/components/Form/components/fields/FilePicker.d.ts +2 -5
- package/dist/types/components/Form/components/fields/StringInputField.d.ts +19 -5
- package/dist/types/components/Form/components/fields/TextAreaInput.d.ts +12 -0
- package/dist/types/components/Form/components/fields/TimePicker.d.ts +7 -0
- package/dist/types/components/Form/components/fields/types.d.ts +6 -0
- package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +19 -1
- package/dist/types/components/Form/components/viewers/CustomViewer.d.ts +8 -0
- package/dist/types/components/Form/components/viewers/DateTimeViewer.d.ts +7 -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/dist/types/components/Form/utils/translateWrapper.d.ts +6 -0
- package/dist/types/components/Form/utils/validateData.d.ts +9 -0
- package/dist/types/components/Form/utils/validation.d.ts +104 -0
- package/dist/types/components/TextArea/TextArea.d.ts +22 -0
- package/dist/types/components/TimePicker/TimePicker.d.ts +21 -0
- package/dist/types/index.d.ts +17 -2
- package/package.json +9 -2
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
import { JSONSchema7 } from "json-schema";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
import { ForeignKeyProps } from "../fields/StringInputField";
|
|
4
|
+
import { UseFormReturn } from "react-hook-form";
|
|
4
5
|
export interface CustomJSONSchema7 extends JSONSchema7 {
|
|
5
6
|
gridColumn?: string;
|
|
6
7
|
gridRow?: string;
|
|
7
8
|
foreign_key?: ForeignKeyProps;
|
|
8
9
|
variant?: string;
|
|
9
|
-
renderDisplay
|
|
10
|
+
renderDisplay?: (item: unknown) => ReactNode;
|
|
11
|
+
inputRender?: (props: {
|
|
12
|
+
column: string;
|
|
13
|
+
schema: CustomJSONSchema7;
|
|
14
|
+
prefix: string;
|
|
15
|
+
formContext: UseFormReturn;
|
|
16
|
+
}) => ReactNode;
|
|
17
|
+
inputViewerRender?: (props: {
|
|
18
|
+
column: string;
|
|
19
|
+
schema: CustomJSONSchema7;
|
|
20
|
+
prefix: string;
|
|
21
|
+
formContext: UseFormReturn;
|
|
22
|
+
}) => ReactNode;
|
|
23
|
+
dateFormat?: string;
|
|
24
|
+
displayDateFormat?: string;
|
|
25
|
+
timeFormat?: string;
|
|
26
|
+
displayTimeFormat?: string;
|
|
27
|
+
showLabel?: boolean;
|
|
10
28
|
}
|
|
11
29
|
export interface TagPickerProps {
|
|
12
30
|
column: string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
|
|
3
|
+
export interface DatePickerProps {
|
|
4
|
+
column: string;
|
|
5
|
+
schema: CustomJSONSchema7;
|
|
6
|
+
prefix: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const CustomViewer: ({ column, schema, prefix }: DatePickerProps) => import("react").ReactNode;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
|
|
2
|
+
export interface DateViewerProps {
|
|
3
|
+
column: string;
|
|
4
|
+
schema: CustomJSONSchema7;
|
|
5
|
+
prefix: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const DateTimeViewer: ({ column, schema, prefix }: DateViewerProps) => 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;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ErrorObject, ValidateFunction } from "ajv";
|
|
2
|
+
import { JSONSchema7 } from "json-schema";
|
|
3
|
+
type ValidateDataResult = {
|
|
4
|
+
isValid: boolean;
|
|
5
|
+
validate: ValidateFunction;
|
|
6
|
+
errors: ErrorObject<string, Record<string, any>, unknown>[] | null | undefined;
|
|
7
|
+
};
|
|
8
|
+
export declare const validateData: (data: unknown, schema: JSONSchema7) => ValidateDataResult;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { JSONSchema7 } from "json-schema";
|
|
2
|
+
declare const errorMessages: {
|
|
3
|
+
en: {
|
|
4
|
+
required: (field: string) => string;
|
|
5
|
+
format: (format: string) => string;
|
|
6
|
+
type: (expectedType: string, actualType: string) => string;
|
|
7
|
+
minLength: (limit: number) => string;
|
|
8
|
+
maxLength: (limit: number) => string;
|
|
9
|
+
minimum: (limit: number) => string;
|
|
10
|
+
maximum: (limit: number) => string;
|
|
11
|
+
pattern: () => string;
|
|
12
|
+
enum: (allowedValues: string[]) => string;
|
|
13
|
+
default: () => string;
|
|
14
|
+
};
|
|
15
|
+
'zh-HK': {
|
|
16
|
+
required: (field: string) => string;
|
|
17
|
+
format: (format: string) => string;
|
|
18
|
+
type: (expectedType: string, actualType: string) => string;
|
|
19
|
+
minLength: (limit: number) => string;
|
|
20
|
+
maxLength: (limit: number) => string;
|
|
21
|
+
minimum: (limit: number) => string;
|
|
22
|
+
maximum: (limit: number) => string;
|
|
23
|
+
pattern: () => string;
|
|
24
|
+
enum: (allowedValues: string[]) => string;
|
|
25
|
+
default: () => string;
|
|
26
|
+
};
|
|
27
|
+
'zh-TW': {
|
|
28
|
+
required: (field: string) => string;
|
|
29
|
+
format: (format: string) => string;
|
|
30
|
+
type: (expectedType: string, actualType: string) => string;
|
|
31
|
+
minLength: (limit: number) => string;
|
|
32
|
+
maxLength: (limit: number) => string;
|
|
33
|
+
minimum: (limit: number) => string;
|
|
34
|
+
maximum: (limit: number) => string;
|
|
35
|
+
pattern: () => string;
|
|
36
|
+
enum: (allowedValues: string[]) => string;
|
|
37
|
+
default: () => string;
|
|
38
|
+
};
|
|
39
|
+
'zh-CN': {
|
|
40
|
+
required: (field: string) => string;
|
|
41
|
+
format: (format: string) => string;
|
|
42
|
+
type: (expectedType: string, actualType: string) => string;
|
|
43
|
+
minLength: (limit: number) => string;
|
|
44
|
+
maxLength: (limit: number) => string;
|
|
45
|
+
minimum: (limit: number) => string;
|
|
46
|
+
maximum: (limit: number) => string;
|
|
47
|
+
pattern: () => string;
|
|
48
|
+
enum: (allowedValues: string[]) => string;
|
|
49
|
+
default: () => string;
|
|
50
|
+
};
|
|
51
|
+
zh: {
|
|
52
|
+
required: (field: string) => string;
|
|
53
|
+
format: (format: string) => string;
|
|
54
|
+
type: (expectedType: string, actualType: string) => string;
|
|
55
|
+
minLength: (limit: number) => string;
|
|
56
|
+
maxLength: (limit: number) => string;
|
|
57
|
+
minimum: (limit: number) => string;
|
|
58
|
+
maximum: (limit: number) => string;
|
|
59
|
+
pattern: () => string;
|
|
60
|
+
enum: (allowedValues: string[]) => string;
|
|
61
|
+
default: () => string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
export type SupportedLocale = keyof typeof errorMessages;
|
|
65
|
+
export interface ValidationError {
|
|
66
|
+
field: string;
|
|
67
|
+
message: string;
|
|
68
|
+
value?: unknown;
|
|
69
|
+
schemaPath?: string;
|
|
70
|
+
}
|
|
71
|
+
export interface ValidationResult {
|
|
72
|
+
isValid: boolean;
|
|
73
|
+
errors: ValidationError[];
|
|
74
|
+
}
|
|
75
|
+
export interface ValidationOptions {
|
|
76
|
+
locale?: SupportedLocale;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Validates data against a JSON Schema using AJV with i18n support
|
|
80
|
+
* @param data - The data to validate
|
|
81
|
+
* @param schema - The JSON Schema to validate against
|
|
82
|
+
* @param options - Validation options including locale
|
|
83
|
+
* @returns ValidationResult containing validation status and errors
|
|
84
|
+
*/
|
|
85
|
+
export declare const validateData: (data: unknown, schema: JSONSchema7, options?: ValidationOptions) => ValidationResult;
|
|
86
|
+
/**
|
|
87
|
+
* Creates a reusable validator function for a specific schema with i18n support
|
|
88
|
+
* @param schema - The JSON Schema to create validator for
|
|
89
|
+
* @param locale - The locale to use for error messages
|
|
90
|
+
* @returns A function that validates data against the schema
|
|
91
|
+
*/
|
|
92
|
+
export declare const createSchemaValidator: (schema: JSONSchema7, locale?: SupportedLocale) => (data: unknown) => ValidationResult;
|
|
93
|
+
/**
|
|
94
|
+
* Get available locales for validation error messages
|
|
95
|
+
* @returns Array of supported locale codes
|
|
96
|
+
*/
|
|
97
|
+
export declare const getSupportedLocales: () => SupportedLocale[];
|
|
98
|
+
/**
|
|
99
|
+
* Check if a locale is supported
|
|
100
|
+
* @param locale - The locale to check
|
|
101
|
+
* @returns Boolean indicating if the locale is supported
|
|
102
|
+
*/
|
|
103
|
+
export declare const isLocaleSupported: (locale: string) => locale is "en" | "zh-HK" | "zh-TW" | "zh-CN" | "zh";
|
|
104
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
interface CustomTextareaProps {
|
|
3
|
+
value?: string;
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
onFocus?: () => void;
|
|
8
|
+
onBlur?: () => void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
readOnly?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
rows?: number;
|
|
13
|
+
maxLength?: number;
|
|
14
|
+
autoFocus?: boolean;
|
|
15
|
+
invalid?: boolean;
|
|
16
|
+
required?: boolean;
|
|
17
|
+
label?: string;
|
|
18
|
+
helperText?: string;
|
|
19
|
+
errorText?: string;
|
|
20
|
+
}
|
|
21
|
+
declare const Textarea: React.ForwardRefExoticComponent<CustomTextareaProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
export { Textarea };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from "react";
|
|
2
|
+
interface TimePickerProps {
|
|
3
|
+
hour: number | null;
|
|
4
|
+
setHour: Dispatch<SetStateAction<number | null>>;
|
|
5
|
+
minute: number | null;
|
|
6
|
+
setMinute: Dispatch<SetStateAction<number | null>>;
|
|
7
|
+
meridiem: "am" | "pm" | null;
|
|
8
|
+
setMeridiem: Dispatch<SetStateAction<"am" | "pm" | null>>;
|
|
9
|
+
onChange?: (newValue: {
|
|
10
|
+
hour: number | null;
|
|
11
|
+
minute: number | null;
|
|
12
|
+
meridiem: "am" | "pm" | null;
|
|
13
|
+
}) => void;
|
|
14
|
+
meridiemLabel?: {
|
|
15
|
+
am: string;
|
|
16
|
+
pm: string;
|
|
17
|
+
};
|
|
18
|
+
timezone?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare function TimePicker({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel, onChange, timezone, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -12,6 +12,17 @@ declare module "@tanstack/react-table" {
|
|
|
12
12
|
* The display name of the column, used for rendering headers.
|
|
13
13
|
*/
|
|
14
14
|
displayName?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Text configuration for the column header menu items.
|
|
17
|
+
* These strings can be customized per column.
|
|
18
|
+
*/
|
|
19
|
+
headerTexts?: {
|
|
20
|
+
pinColumn?: string;
|
|
21
|
+
cancelPin?: string;
|
|
22
|
+
sortAscending?: string;
|
|
23
|
+
sortDescending?: string;
|
|
24
|
+
clearSorting?: string;
|
|
25
|
+
};
|
|
15
26
|
/**
|
|
16
27
|
* Specifies the type of filter to be used for the column.
|
|
17
28
|
*
|
|
@@ -32,7 +43,10 @@ declare module "@tanstack/react-table" {
|
|
|
32
43
|
/**
|
|
33
44
|
* Options for the select filter variant, if applicable.
|
|
34
45
|
*/
|
|
35
|
-
filterOptions?:
|
|
46
|
+
filterOptions?: {
|
|
47
|
+
label: string;
|
|
48
|
+
value: string;
|
|
49
|
+
}[];
|
|
36
50
|
/**
|
|
37
51
|
* Configuration for the range filter variant, if applicable.
|
|
38
52
|
*
|
|
@@ -86,6 +100,7 @@ export * from "./components/DataTable/controls/TableFilters";
|
|
|
86
100
|
export * from "./components/DataTable/controls/TableFilterTags";
|
|
87
101
|
export * from "./components/DataTable/display/TableFooter";
|
|
88
102
|
export * from "./components/DataTable/display/TableHeader";
|
|
103
|
+
export type { TableHeaderTexts } from "./components/DataTable/display/TableHeader";
|
|
89
104
|
export * from "./components/DataTable/display/TableLoadingComponent";
|
|
90
105
|
export * from "./components/DataTable/controls/TableSelector";
|
|
91
106
|
export * from "./components/DataTable/controls/TableSorter";
|
|
@@ -94,7 +109,7 @@ export * from "./components/DataTable/display/TextCell";
|
|
|
94
109
|
export * from "./components/DataTable/useDataTable";
|
|
95
110
|
export * from "./components/DataTable/useDataTableServer";
|
|
96
111
|
export * from "./components/DataTable/utils/getColumns";
|
|
97
|
-
export * from "./components/
|
|
112
|
+
export * from "./components/DataTable/display/TableDataDisplay";
|
|
98
113
|
export * from "./components/Filter/GlobalFilter";
|
|
99
114
|
export * from "./components/Form/components/core/DefaultForm";
|
|
100
115
|
export * from "./components/Form/components/core/FormRoot";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bsol-oss/react-datatable5",
|
|
3
|
-
"version": "12.0.0-beta.
|
|
3
|
+
"version": "12.0.0-beta.70",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -37,12 +37,15 @@
|
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
|
|
39
39
|
"@bsol-oss/dayzed-react19": "^0.0.4",
|
|
40
|
-
"@chakra-ui/react": "^3.
|
|
40
|
+
"@chakra-ui/react": "^3.19.1",
|
|
41
41
|
"@emotion/react": "^11.13.5",
|
|
42
42
|
"@tanstack/match-sorter-utils": "^8.15.1",
|
|
43
43
|
"@tanstack/react-query": "^5.66.9",
|
|
44
44
|
"@tanstack/react-table": "^8.21.2",
|
|
45
45
|
"@uidotdev/usehooks": "^2.4.1",
|
|
46
|
+
"ajv": "^8.12.0",
|
|
47
|
+
"ajv-errors": "^3.0.0",
|
|
48
|
+
"ajv-formats": "^3.0.1",
|
|
46
49
|
"axios": "^1.7.9",
|
|
47
50
|
"dayjs": "^1.11.13",
|
|
48
51
|
"next-themes": "^0.4.4",
|
|
@@ -63,6 +66,7 @@
|
|
|
63
66
|
"@storybook/react": "^8.4.7",
|
|
64
67
|
"@storybook/react-vite": "^8.4.7",
|
|
65
68
|
"@storybook/test": "^8.4.7",
|
|
69
|
+
"@types/ajv-errors": "^2.0.0",
|
|
66
70
|
"@types/json-schema": "^7.0.15",
|
|
67
71
|
"@types/react": "19.0.2",
|
|
68
72
|
"@types/react-beautiful-dnd": "^13.1.8",
|
|
@@ -70,6 +74,9 @@
|
|
|
70
74
|
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
|
71
75
|
"@typescript-eslint/parser": "^7.2.0",
|
|
72
76
|
"@vitejs/plugin-react": "^4.2.1",
|
|
77
|
+
"ajv": "^8.12.0",
|
|
78
|
+
"ajv-errors": "^3.0.0",
|
|
79
|
+
"ajv-formats": "^3.0.1",
|
|
73
80
|
"eslint": "^8.57.0",
|
|
74
81
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
75
82
|
"eslint-plugin-react-refresh": "^0.4.6",
|