@bsol-oss/react-datatable5 12.0.0-beta.72 → 12.0.0-beta.73
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 +67 -40
- package/dist/index.d.ts +13 -2
- package/dist/index.js +95 -51
- package/dist/index.mjs +95 -51
- package/dist/types/components/Form/SchemaFormContext.d.ts +2 -1
- package/dist/types/components/Form/components/core/FormRoot.d.ts +3 -2
- package/dist/types/components/Form/components/fields/DatePicker.d.ts +1 -1
- package/dist/types/components/Form/components/fields/EnumPicker.d.ts +1 -1
- package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ The `DataTable` and `DataTableServer` utilize hook to add props.
|
|
|
22
22
|
|
|
23
23
|
```tsx
|
|
24
24
|
const datatable = useDataTable();
|
|
25
|
-
const datatableServer = useDataTableServer({ url:
|
|
25
|
+
const datatableServer = useDataTableServer({ url: '<some-url>' });
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
### DataTable
|
|
@@ -66,9 +66,9 @@ GET http://localhost:8081/api/g/core_people?offset=0&limit=10&sorting[0][id]=id&
|
|
|
66
66
|
<DefaultCard
|
|
67
67
|
{...{
|
|
68
68
|
row: row,
|
|
69
|
-
imageColumnId:
|
|
70
|
-
titleColumnId:
|
|
71
|
-
tagColumnId:
|
|
69
|
+
imageColumnId: 'thumbnail',
|
|
70
|
+
titleColumnId: 'title',
|
|
71
|
+
tagColumnId: 'rating',
|
|
72
72
|
tagIcon: MdStarRate,
|
|
73
73
|
}}
|
|
74
74
|
/>
|
|
@@ -111,45 +111,51 @@ The package now includes built-in JSON Schema validation using AJV (Another JSON
|
|
|
111
111
|
#### Basic Usage with Internationalization
|
|
112
112
|
|
|
113
113
|
```tsx
|
|
114
|
-
import {
|
|
114
|
+
import {
|
|
115
|
+
FormRoot,
|
|
116
|
+
FormBody,
|
|
117
|
+
validateData,
|
|
118
|
+
SupportedLocale,
|
|
119
|
+
} from '@bsol-oss/react-datatable5';
|
|
115
120
|
|
|
116
121
|
const schema = {
|
|
117
|
-
type:
|
|
118
|
-
required: [
|
|
122
|
+
type: 'object',
|
|
123
|
+
required: ['email', 'age'],
|
|
119
124
|
properties: {
|
|
120
125
|
email: {
|
|
121
|
-
type:
|
|
122
|
-
format:
|
|
126
|
+
type: 'string',
|
|
127
|
+
format: 'email',
|
|
123
128
|
},
|
|
124
129
|
age: {
|
|
125
|
-
type:
|
|
130
|
+
type: 'integer',
|
|
126
131
|
minimum: 18,
|
|
127
|
-
maximum: 120
|
|
132
|
+
maximum: 120,
|
|
128
133
|
},
|
|
129
134
|
name: {
|
|
130
|
-
type:
|
|
135
|
+
type: 'string',
|
|
131
136
|
minLength: 2,
|
|
132
|
-
maxLength: 50
|
|
133
|
-
}
|
|
134
|
-
}
|
|
137
|
+
maxLength: 50,
|
|
138
|
+
},
|
|
139
|
+
},
|
|
135
140
|
};
|
|
136
141
|
|
|
137
142
|
// Use Traditional Chinese (Hong Kong) for validation errors
|
|
138
|
-
<FormRoot
|
|
139
|
-
schema={schema}
|
|
143
|
+
<FormRoot
|
|
144
|
+
schema={schema}
|
|
140
145
|
validationLocale="zh-HK"
|
|
141
146
|
/* other props */
|
|
142
147
|
>
|
|
143
148
|
<FormBody />
|
|
144
|
-
</FormRoot
|
|
149
|
+
</FormRoot>;
|
|
145
150
|
```
|
|
146
151
|
|
|
147
152
|
#### Language-specific Examples
|
|
148
153
|
|
|
149
154
|
**Traditional Chinese (Hong Kong):**
|
|
155
|
+
|
|
150
156
|
```tsx
|
|
151
|
-
<FormRoot
|
|
152
|
-
schema={schema}
|
|
157
|
+
<FormRoot
|
|
158
|
+
schema={schema}
|
|
153
159
|
validationLocale="zh-HK"
|
|
154
160
|
/* other props */
|
|
155
161
|
>
|
|
@@ -158,9 +164,10 @@ const schema = {
|
|
|
158
164
|
```
|
|
159
165
|
|
|
160
166
|
**Traditional Chinese (Taiwan):**
|
|
167
|
+
|
|
161
168
|
```tsx
|
|
162
|
-
<FormRoot
|
|
163
|
-
schema={schema}
|
|
169
|
+
<FormRoot
|
|
170
|
+
schema={schema}
|
|
164
171
|
validationLocale="zh-TW"
|
|
165
172
|
/* other props */
|
|
166
173
|
>
|
|
@@ -169,9 +176,10 @@ const schema = {
|
|
|
169
176
|
```
|
|
170
177
|
|
|
171
178
|
**Simplified Chinese:**
|
|
179
|
+
|
|
172
180
|
```tsx
|
|
173
|
-
<FormRoot
|
|
174
|
-
schema={schema}
|
|
181
|
+
<FormRoot
|
|
182
|
+
schema={schema}
|
|
175
183
|
validationLocale="zh-CN"
|
|
176
184
|
/* other props */
|
|
177
185
|
>
|
|
@@ -184,20 +192,27 @@ const schema = {
|
|
|
184
192
|
You can also use the validation utilities directly with language support:
|
|
185
193
|
|
|
186
194
|
```tsx
|
|
187
|
-
import {
|
|
195
|
+
import {
|
|
196
|
+
validateData,
|
|
197
|
+
ValidationResult,
|
|
198
|
+
SupportedLocale,
|
|
199
|
+
} from '@bsol-oss/react-datatable5';
|
|
188
200
|
|
|
189
201
|
// Validate with Traditional Chinese (Hong Kong) error messages
|
|
190
|
-
const result: ValidationResult = validateData(formData, schema, {
|
|
191
|
-
locale: 'zh-HK'
|
|
202
|
+
const result: ValidationResult = validateData(formData, schema, {
|
|
203
|
+
locale: 'zh-HK',
|
|
192
204
|
});
|
|
193
205
|
|
|
194
206
|
if (!result.isValid) {
|
|
195
|
-
console.log(
|
|
207
|
+
console.log('驗證錯誤:', result.errors);
|
|
196
208
|
// Error messages will be in Traditional Chinese
|
|
197
209
|
}
|
|
198
210
|
|
|
199
211
|
// Check supported locales
|
|
200
|
-
import {
|
|
212
|
+
import {
|
|
213
|
+
getSupportedLocales,
|
|
214
|
+
isLocaleSupported,
|
|
215
|
+
} from '@bsol-oss/react-datatable5';
|
|
201
216
|
|
|
202
217
|
const supportedLocales = getSupportedLocales(); // ['en', 'zh-HK', 'zh-TW', 'zh-CN', 'zh']
|
|
203
218
|
const isSupported = isLocaleSupported('zh-HK'); // true
|
|
@@ -207,34 +222,37 @@ const isSupported = isLocaleSupported('zh-HK'); // true
|
|
|
207
222
|
|
|
208
223
|
```tsx
|
|
209
224
|
interface ValidationError {
|
|
210
|
-
field: string;
|
|
211
|
-
message: string;
|
|
212
|
-
value?: unknown;
|
|
213
|
-
schemaPath?: string;
|
|
225
|
+
field: string; // The field that failed validation
|
|
226
|
+
message: string; // User-friendly error message (localized)
|
|
227
|
+
value?: unknown; // The current value that failed
|
|
228
|
+
schemaPath?: string; // JSON Schema path for debugging
|
|
214
229
|
}
|
|
215
230
|
```
|
|
216
231
|
|
|
217
232
|
#### Dynamic Language Switching
|
|
218
233
|
|
|
219
234
|
```tsx
|
|
220
|
-
import { SupportedLocale } from
|
|
235
|
+
import { SupportedLocale } from '@bsol-oss/react-datatable5';
|
|
221
236
|
|
|
222
237
|
const MyForm = () => {
|
|
223
238
|
const [locale, setLocale] = useState<SupportedLocale>('zh-HK');
|
|
224
|
-
|
|
239
|
+
|
|
225
240
|
return (
|
|
226
241
|
<div>
|
|
227
242
|
{/* Language selector */}
|
|
228
|
-
<select
|
|
243
|
+
<select
|
|
244
|
+
value={locale}
|
|
245
|
+
onChange={(e) => setLocale(e.target.value as SupportedLocale)}
|
|
246
|
+
>
|
|
229
247
|
<option value="en">English</option>
|
|
230
248
|
<option value="zh-HK">繁體中文（香港）</option>
|
|
231
249
|
<option value="zh-TW">繁體中文（台灣）</option>
|
|
232
250
|
<option value="zh-CN">简体中文</option>
|
|
233
251
|
</select>
|
|
234
|
-
|
|
252
|
+
|
|
235
253
|
{/* Form with dynamic locale */}
|
|
236
|
-
<FormRoot
|
|
237
|
-
schema={schema}
|
|
254
|
+
<FormRoot
|
|
255
|
+
schema={schema}
|
|
238
256
|
validationLocale={locale}
|
|
239
257
|
/* other props */
|
|
240
258
|
>
|
|
@@ -248,16 +266,19 @@ const MyForm = () => {
|
|
|
248
266
|
#### Example Validation Messages
|
|
249
267
|
|
|
250
268
|
**English:**
|
|
269
|
+
|
|
251
270
|
- "email is required"
|
|
252
271
|
- "Invalid email format"
|
|
253
272
|
- "Must be at least 18"
|
|
254
273
|
|
|
255
274
|
**Traditional Chinese (Hong Kong/Taiwan):**
|
|
275
|
+
|
|
256
276
|
- "email 為必填"
|
|
257
277
|
- "無效的 email 格式"
|
|
258
278
|
- "必須至少為 18"
|
|
259
279
|
|
|
260
280
|
**Simplified Chinese:**
|
|
281
|
+
|
|
261
282
|
- "email 为必填"
|
|
262
283
|
- "无效的 email 格式"
|
|
263
284
|
- "必须至少为 18"
|
|
@@ -281,4 +302,10 @@ For more details of props and examples, please review the stories in storybook p
|
|
|
281
302
|
```
|
|
282
303
|
npm install
|
|
283
304
|
npm run storybook
|
|
284
|
-
```
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
## deployment
|
|
308
|
+
|
|
309
|
+
```
|
|
310
|
+
npm version prerelease --preid=beta
|
|
311
|
+
```
|
package/dist/index.d.ts
CHANGED
|
@@ -589,6 +589,16 @@ interface IdPickerLabels {
|
|
|
589
589
|
emptySearchResult?: string;
|
|
590
590
|
initialResults?: string;
|
|
591
591
|
}
|
|
592
|
+
interface EnumPickerLabels {
|
|
593
|
+
undefined?: string;
|
|
594
|
+
addMore?: string;
|
|
595
|
+
typeToSearch?: string;
|
|
596
|
+
total?: string;
|
|
597
|
+
showing?: string;
|
|
598
|
+
perPage?: string;
|
|
599
|
+
emptySearchResult?: string;
|
|
600
|
+
initialResults?: string;
|
|
601
|
+
}
|
|
592
602
|
interface CustomJSONSchema7 extends JSONSchema7 {
|
|
593
603
|
gridColumn?: string;
|
|
594
604
|
gridRow?: string;
|
|
@@ -644,6 +654,7 @@ interface FormRootProps<TData extends FieldValues> {
|
|
|
644
654
|
};
|
|
645
655
|
dateTimePickerLabels?: DateTimePickerLabels;
|
|
646
656
|
idPickerLabels?: IdPickerLabels;
|
|
657
|
+
enumPickerLabels?: EnumPickerLabels;
|
|
647
658
|
}
|
|
648
659
|
interface CustomJSONSchema7Definition extends JSONSchema7 {
|
|
649
660
|
variant: string;
|
|
@@ -660,7 +671,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
|
|
|
660
671
|
column?: string | undefined;
|
|
661
672
|
display_column?: string | undefined;
|
|
662
673
|
} | undefined) => void;
|
|
663
|
-
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
674
|
+
declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
664
675
|
|
|
665
676
|
interface DefaultFormProps<TData extends FieldValues> {
|
|
666
677
|
formConfig: Omit<FormRootProps<TData>, "children">;
|
|
@@ -1051,4 +1062,4 @@ declare module "@tanstack/react-table" {
|
|
|
1051
1062
|
}
|
|
1052
1063
|
}
|
|
1053
1064
|
|
|
1054
|
-
export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
|
|
1065
|
+
export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
|
package/dist/index.js
CHANGED
|
@@ -3738,7 +3738,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3738
3738
|
showSubmitButton: true,
|
|
3739
3739
|
showResetButton: true,
|
|
3740
3740
|
showTitle: true,
|
|
3741
|
-
}, dateTimePickerLabels, idPickerLabels, }) => {
|
|
3741
|
+
}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
|
|
3742
3742
|
const [isSuccess, setIsSuccess] = React.useState(false);
|
|
3743
3743
|
const [isError, setIsError] = React.useState(false);
|
|
3744
3744
|
const [isSubmiting, setIsSubmiting] = React.useState(false);
|
|
@@ -3776,6 +3776,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3776
3776
|
displayConfig,
|
|
3777
3777
|
dateTimePickerLabels,
|
|
3778
3778
|
idPickerLabels,
|
|
3779
|
+
enumPickerLabels,
|
|
3779
3780
|
}, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: children }) }));
|
|
3780
3781
|
};
|
|
3781
3782
|
|
|
@@ -4034,14 +4035,16 @@ dayjs.extend(utc);
|
|
|
4034
4035
|
dayjs.extend(timezone);
|
|
4035
4036
|
const DatePicker = ({ column, schema, prefix }) => {
|
|
4036
4037
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4037
|
-
const { timezone } = useSchemaContext();
|
|
4038
|
+
const { timezone, dateTimePickerLabels } = useSchemaContext();
|
|
4038
4039
|
const formI18n = useFormI18n(column, prefix);
|
|
4039
|
-
const { required, gridColumn =
|
|
4040
|
+
const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
|
|
4040
4041
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4041
4042
|
const colLabel = formI18n.colLabel;
|
|
4042
4043
|
const [open, setOpen] = React.useState(false);
|
|
4043
4044
|
const selectedDate = watch(colLabel);
|
|
4044
|
-
const displayDate = dayjs(selectedDate)
|
|
4045
|
+
const displayDate = dayjs(selectedDate)
|
|
4046
|
+
.tz(timezone)
|
|
4047
|
+
.format(displayDateFormat);
|
|
4045
4048
|
React.useEffect(() => {
|
|
4046
4049
|
try {
|
|
4047
4050
|
if (selectedDate) {
|
|
@@ -4065,45 +4068,83 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
4065
4068
|
console.error(e);
|
|
4066
4069
|
}
|
|
4067
4070
|
}, [selectedDate, dateFormat, colLabel, setValue]);
|
|
4068
|
-
return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems:
|
|
4071
|
+
return (jsxRuntime.jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4069
4072
|
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: () => {
|
|
4070
4073
|
setOpen(true);
|
|
4071
|
-
}, justifyContent:
|
|
4074
|
+
}, 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, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
|
|
4072
4075
|
setValue(colLabel, dayjs(date).format(dateFormat));
|
|
4073
4076
|
setOpen(false);
|
|
4074
4077
|
}, labels: {
|
|
4075
|
-
monthNamesShort: [
|
|
4076
|
-
formI18n.translate.t(`common.month_1`, {
|
|
4077
|
-
|
|
4078
|
-
|
|
4079
|
-
formI18n.translate.t(`common.
|
|
4080
|
-
|
|
4081
|
-
|
|
4082
|
-
formI18n.translate.t(`common.
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
formI18n.translate.t(`common.
|
|
4086
|
-
|
|
4087
|
-
|
|
4078
|
+
monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
|
|
4079
|
+
formI18n.translate.t(`common.month_1`, {
|
|
4080
|
+
defaultValue: 'January',
|
|
4081
|
+
}),
|
|
4082
|
+
formI18n.translate.t(`common.month_2`, {
|
|
4083
|
+
defaultValue: 'February',
|
|
4084
|
+
}),
|
|
4085
|
+
formI18n.translate.t(`common.month_3`, {
|
|
4086
|
+
defaultValue: 'March',
|
|
4087
|
+
}),
|
|
4088
|
+
formI18n.translate.t(`common.month_4`, {
|
|
4089
|
+
defaultValue: 'April',
|
|
4090
|
+
}),
|
|
4091
|
+
formI18n.translate.t(`common.month_5`, {
|
|
4092
|
+
defaultValue: 'May',
|
|
4093
|
+
}),
|
|
4094
|
+
formI18n.translate.t(`common.month_6`, {
|
|
4095
|
+
defaultValue: 'June',
|
|
4096
|
+
}),
|
|
4097
|
+
formI18n.translate.t(`common.month_7`, {
|
|
4098
|
+
defaultValue: 'July',
|
|
4099
|
+
}),
|
|
4100
|
+
formI18n.translate.t(`common.month_8`, {
|
|
4101
|
+
defaultValue: 'August',
|
|
4102
|
+
}),
|
|
4103
|
+
formI18n.translate.t(`common.month_9`, {
|
|
4104
|
+
defaultValue: 'September',
|
|
4105
|
+
}),
|
|
4106
|
+
formI18n.translate.t(`common.month_10`, {
|
|
4107
|
+
defaultValue: 'October',
|
|
4108
|
+
}),
|
|
4109
|
+
formI18n.translate.t(`common.month_11`, {
|
|
4110
|
+
defaultValue: 'November',
|
|
4111
|
+
}),
|
|
4112
|
+
formI18n.translate.t(`common.month_12`, {
|
|
4113
|
+
defaultValue: 'December',
|
|
4114
|
+
}),
|
|
4088
4115
|
],
|
|
4089
|
-
weekdayNamesShort: [
|
|
4090
|
-
formI18n.translate.t(`common.weekday_1`, {
|
|
4091
|
-
|
|
4092
|
-
|
|
4116
|
+
weekdayNamesShort: dateTimePickerLabels?.weekdayNamesShort ?? [
|
|
4117
|
+
formI18n.translate.t(`common.weekday_1`, {
|
|
4118
|
+
defaultValue: 'Sun',
|
|
4119
|
+
}),
|
|
4120
|
+
formI18n.translate.t(`common.weekday_2`, {
|
|
4121
|
+
defaultValue: 'Mon',
|
|
4122
|
+
}),
|
|
4123
|
+
formI18n.translate.t(`common.weekday_3`, {
|
|
4124
|
+
defaultValue: 'Tue',
|
|
4125
|
+
}),
|
|
4093
4126
|
formI18n.translate.t(`common.weekday_4`, {
|
|
4094
|
-
defaultValue:
|
|
4127
|
+
defaultValue: 'Wed',
|
|
4128
|
+
}),
|
|
4129
|
+
formI18n.translate.t(`common.weekday_5`, {
|
|
4130
|
+
defaultValue: 'Thu',
|
|
4131
|
+
}),
|
|
4132
|
+
formI18n.translate.t(`common.weekday_6`, {
|
|
4133
|
+
defaultValue: 'Fri',
|
|
4134
|
+
}),
|
|
4135
|
+
formI18n.translate.t(`common.weekday_7`, {
|
|
4136
|
+
defaultValue: 'Sat',
|
|
4095
4137
|
}),
|
|
4096
|
-
formI18n.translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
|
|
4097
|
-
formI18n.translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
|
|
4098
|
-
formI18n.translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
|
|
4099
4138
|
],
|
|
4100
|
-
backButtonLabel:
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4139
|
+
backButtonLabel: dateTimePickerLabels?.backButtonLabel ??
|
|
4140
|
+
formI18n.translate.t(`common.back_button`, {
|
|
4141
|
+
defaultValue: 'Back',
|
|
4142
|
+
}),
|
|
4143
|
+
forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ??
|
|
4144
|
+
formI18n.translate.t(`common.forward_button`, {
|
|
4145
|
+
defaultValue: 'Forward',
|
|
4146
|
+
}),
|
|
4147
|
+
} })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: formI18n.required() }))] }));
|
|
4107
4148
|
};
|
|
4108
4149
|
|
|
4109
4150
|
function filterArray(array, searchTerm) {
|
|
@@ -4118,10 +4159,10 @@ function filterArray(array, searchTerm) {
|
|
|
4118
4159
|
|
|
4119
4160
|
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
4120
4161
|
const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
|
|
4121
|
-
const { translate } = useSchemaContext();
|
|
4162
|
+
const { translate, enumPickerLabels } = useSchemaContext();
|
|
4122
4163
|
const { required, variant } = schema;
|
|
4123
4164
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4124
|
-
const { gridColumn =
|
|
4165
|
+
const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
|
|
4125
4166
|
const [searchText, setSearchText] = React.useState();
|
|
4126
4167
|
const [limit, setLimit] = React.useState(10);
|
|
4127
4168
|
const [openSearchResult, setOpenSearchResult] = React.useState();
|
|
@@ -4136,9 +4177,9 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4136
4177
|
setSearchText(event.target.value);
|
|
4137
4178
|
setLimit(10);
|
|
4138
4179
|
};
|
|
4139
|
-
if (variant ===
|
|
4140
|
-
return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems:
|
|
4141
|
-
gridRow, children: jsxRuntime.jsx(react.RadioGroup.Root, { defaultValue: "1", children: jsxRuntime.jsx(react.HStack, { gap: "6", children: filterArray(dataList, searchText ??
|
|
4180
|
+
if (variant === 'radio') {
|
|
4181
|
+
return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4182
|
+
gridRow, children: jsxRuntime.jsx(react.RadioGroup.Root, { defaultValue: "1", children: jsxRuntime.jsx(react.HStack, { gap: "6", children: filterArray(dataList, searchText ?? '').map((item) => {
|
|
4142
4183
|
return (jsxRuntime.jsxs(react.RadioGroup.Item, { onClick: () => {
|
|
4143
4184
|
if (!isMultiple) {
|
|
4144
4185
|
setOpenSearchResult(false);
|
|
@@ -4152,8 +4193,8 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4152
4193
|
: translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
|
|
4153
4194
|
}) }) }) }));
|
|
4154
4195
|
}
|
|
4155
|
-
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems:
|
|
4156
|
-
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow:
|
|
4196
|
+
return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4197
|
+
gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: 'wrap', gap: 1, children: [watchEnums.map((enumValue) => {
|
|
4157
4198
|
const item = enumValue;
|
|
4158
4199
|
if (!!item === false) {
|
|
4159
4200
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
@@ -4163,18 +4204,20 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4163
4204
|
}, children: !!renderDisplay === true
|
|
4164
4205
|
? renderDisplay(item)
|
|
4165
4206
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, item));
|
|
4166
|
-
}), jsxRuntime.jsx(Tag, { size: "lg", cursor:
|
|
4207
|
+
}), jsxRuntime.jsx(Tag, { size: "lg", cursor: 'pointer', onClick: () => {
|
|
4167
4208
|
setOpenSearchResult(true);
|
|
4168
|
-
}, children:
|
|
4209
|
+
}, children: enumPickerLabels?.addMore ??
|
|
4210
|
+
translate.t(removeIndex(`${colLabel}.add_more`)) }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: 'outline', onClick: () => {
|
|
4169
4211
|
setOpenSearchResult(true);
|
|
4170
|
-
}, justifyContent:
|
|
4171
|
-
?
|
|
4172
|
-
: translate.t(removeIndex(`${colLabel}.${watchEnum ??
|
|
4212
|
+
}, justifyContent: 'start', children: !!watchEnum === false
|
|
4213
|
+
? ''
|
|
4214
|
+
: translate.t(removeIndex(`${colLabel}.${watchEnum ?? 'null'}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start' }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { portalled: false, children: jsxRuntime.jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: enumPickerLabels?.typeToSearch ??
|
|
4215
|
+
translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
|
|
4173
4216
|
onSearchChange(event);
|
|
4174
4217
|
setOpenSearchResult(true);
|
|
4175
|
-
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), showTotalAndLimit && (jsxRuntime.jsx(react.Text, { children: `${translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxRuntime.jsxs(react.Grid, { overflow:
|
|
4218
|
+
}, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), showTotalAndLimit && (jsxRuntime.jsx(react.Text, { children: `${enumPickerLabels?.total ?? translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${enumPickerLabels?.showing ?? translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxRuntime.jsxs(react.Grid, { overflow: 'auto', maxHeight: '20rem', children: [jsxRuntime.jsx(react.Flex, { flexFlow: 'column wrap', children: dataList
|
|
4176
4219
|
.filter((item) => {
|
|
4177
|
-
const searchTerm = (searchText ||
|
|
4220
|
+
const searchTerm = (searchText || '').toLowerCase();
|
|
4178
4221
|
if (!searchTerm)
|
|
4179
4222
|
return true;
|
|
4180
4223
|
// Check if the original enum value contains the search text
|
|
@@ -4194,7 +4237,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4194
4237
|
const selected = isMultiple
|
|
4195
4238
|
? watchEnums.some((enumValue) => item === enumValue)
|
|
4196
4239
|
: watchEnum == item;
|
|
4197
|
-
return (jsxRuntime.jsx(react.Box, { cursor:
|
|
4240
|
+
return (jsxRuntime.jsx(react.Box, { cursor: 'pointer', onClick: () => {
|
|
4198
4241
|
if (!isMultiple) {
|
|
4199
4242
|
setOpenSearchResult(false);
|
|
4200
4243
|
setValue(colLabel, item);
|
|
@@ -4202,10 +4245,11 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4202
4245
|
}
|
|
4203
4246
|
const newSet = new Set([...(watchEnums ?? []), item]);
|
|
4204
4247
|
setValue(colLabel, [...newSet]);
|
|
4205
|
-
}, ...(selected ? { color:
|
|
4248
|
+
}, ...(selected ? { color: 'colorPalette.400/50' } : {}), children: !!renderDisplay === true
|
|
4206
4249
|
? renderDisplay(item)
|
|
4207
4250
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
4208
|
-
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children:
|
|
4251
|
+
}) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: enumPickerLabels?.emptySearchResult ??
|
|
4252
|
+
translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4209
4253
|
};
|
|
4210
4254
|
|
|
4211
4255
|
function isEnteringWindow(_ref) {
|
package/dist/index.mjs
CHANGED
|
@@ -3718,7 +3718,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3718
3718
|
showSubmitButton: true,
|
|
3719
3719
|
showResetButton: true,
|
|
3720
3720
|
showTitle: true,
|
|
3721
|
-
}, dateTimePickerLabels, idPickerLabels, }) => {
|
|
3721
|
+
}, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }) => {
|
|
3722
3722
|
const [isSuccess, setIsSuccess] = useState(false);
|
|
3723
3723
|
const [isError, setIsError] = useState(false);
|
|
3724
3724
|
const [isSubmiting, setIsSubmiting] = useState(false);
|
|
@@ -3756,6 +3756,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
|
|
|
3756
3756
|
displayConfig,
|
|
3757
3757
|
dateTimePickerLabels,
|
|
3758
3758
|
idPickerLabels,
|
|
3759
|
+
enumPickerLabels,
|
|
3759
3760
|
}, children: jsx(FormProvider, { ...form, children: children }) }));
|
|
3760
3761
|
};
|
|
3761
3762
|
|
|
@@ -4014,14 +4015,16 @@ dayjs.extend(utc);
|
|
|
4014
4015
|
dayjs.extend(timezone);
|
|
4015
4016
|
const DatePicker = ({ column, schema, prefix }) => {
|
|
4016
4017
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4017
|
-
const { timezone } = useSchemaContext();
|
|
4018
|
+
const { timezone, dateTimePickerLabels } = useSchemaContext();
|
|
4018
4019
|
const formI18n = useFormI18n(column, prefix);
|
|
4019
|
-
const { required, gridColumn =
|
|
4020
|
+
const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
|
|
4020
4021
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4021
4022
|
const colLabel = formI18n.colLabel;
|
|
4022
4023
|
const [open, setOpen] = useState(false);
|
|
4023
4024
|
const selectedDate = watch(colLabel);
|
|
4024
|
-
const displayDate = dayjs(selectedDate)
|
|
4025
|
+
const displayDate = dayjs(selectedDate)
|
|
4026
|
+
.tz(timezone)
|
|
4027
|
+
.format(displayDateFormat);
|
|
4025
4028
|
useEffect(() => {
|
|
4026
4029
|
try {
|
|
4027
4030
|
if (selectedDate) {
|
|
@@ -4045,45 +4048,83 @@ const DatePicker = ({ column, schema, prefix }) => {
|
|
|
4045
4048
|
console.error(e);
|
|
4046
4049
|
}
|
|
4047
4050
|
}, [selectedDate, dateFormat, colLabel, setValue]);
|
|
4048
|
-
return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems:
|
|
4051
|
+
return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4049
4052
|
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: () => {
|
|
4050
4053
|
setOpen(true);
|
|
4051
|
-
}, justifyContent:
|
|
4054
|
+
}, justifyContent: 'start', children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
|
|
4052
4055
|
setValue(colLabel, dayjs(date).format(dateFormat));
|
|
4053
4056
|
setOpen(false);
|
|
4054
4057
|
}, labels: {
|
|
4055
|
-
monthNamesShort: [
|
|
4056
|
-
formI18n.translate.t(`common.month_1`, {
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
formI18n.translate.t(`common.
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
formI18n.translate.t(`common.
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
formI18n.translate.t(`common.
|
|
4066
|
-
|
|
4067
|
-
|
|
4058
|
+
monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
|
|
4059
|
+
formI18n.translate.t(`common.month_1`, {
|
|
4060
|
+
defaultValue: 'January',
|
|
4061
|
+
}),
|
|
4062
|
+
formI18n.translate.t(`common.month_2`, {
|
|
4063
|
+
defaultValue: 'February',
|
|
4064
|
+
}),
|
|
4065
|
+
formI18n.translate.t(`common.month_3`, {
|
|
4066
|
+
defaultValue: 'March',
|
|
4067
|
+
}),
|
|
4068
|
+
formI18n.translate.t(`common.month_4`, {
|
|
4069
|
+
defaultValue: 'April',
|
|
4070
|
+
}),
|
|
4071
|
+
formI18n.translate.t(`common.month_5`, {
|
|
4072
|
+
defaultValue: 'May',
|
|
4073
|
+
}),
|
|
4074
|
+
formI18n.translate.t(`common.month_6`, {
|
|
4075
|
+
defaultValue: 'June',
|
|
4076
|
+
}),
|
|
4077
|
+
formI18n.translate.t(`common.month_7`, {
|
|
4078
|
+
defaultValue: 'July',
|
|
4079
|
+
}),
|
|
4080
|
+
formI18n.translate.t(`common.month_8`, {
|
|
4081
|
+
defaultValue: 'August',
|
|
4082
|
+
}),
|
|
4083
|
+
formI18n.translate.t(`common.month_9`, {
|
|
4084
|
+
defaultValue: 'September',
|
|
4085
|
+
}),
|
|
4086
|
+
formI18n.translate.t(`common.month_10`, {
|
|
4087
|
+
defaultValue: 'October',
|
|
4088
|
+
}),
|
|
4089
|
+
formI18n.translate.t(`common.month_11`, {
|
|
4090
|
+
defaultValue: 'November',
|
|
4091
|
+
}),
|
|
4092
|
+
formI18n.translate.t(`common.month_12`, {
|
|
4093
|
+
defaultValue: 'December',
|
|
4094
|
+
}),
|
|
4068
4095
|
],
|
|
4069
|
-
weekdayNamesShort: [
|
|
4070
|
-
formI18n.translate.t(`common.weekday_1`, {
|
|
4071
|
-
|
|
4072
|
-
|
|
4096
|
+
weekdayNamesShort: dateTimePickerLabels?.weekdayNamesShort ?? [
|
|
4097
|
+
formI18n.translate.t(`common.weekday_1`, {
|
|
4098
|
+
defaultValue: 'Sun',
|
|
4099
|
+
}),
|
|
4100
|
+
formI18n.translate.t(`common.weekday_2`, {
|
|
4101
|
+
defaultValue: 'Mon',
|
|
4102
|
+
}),
|
|
4103
|
+
formI18n.translate.t(`common.weekday_3`, {
|
|
4104
|
+
defaultValue: 'Tue',
|
|
4105
|
+
}),
|
|
4073
4106
|
formI18n.translate.t(`common.weekday_4`, {
|
|
4074
|
-
defaultValue:
|
|
4107
|
+
defaultValue: 'Wed',
|
|
4108
|
+
}),
|
|
4109
|
+
formI18n.translate.t(`common.weekday_5`, {
|
|
4110
|
+
defaultValue: 'Thu',
|
|
4111
|
+
}),
|
|
4112
|
+
formI18n.translate.t(`common.weekday_6`, {
|
|
4113
|
+
defaultValue: 'Fri',
|
|
4114
|
+
}),
|
|
4115
|
+
formI18n.translate.t(`common.weekday_7`, {
|
|
4116
|
+
defaultValue: 'Sat',
|
|
4075
4117
|
}),
|
|
4076
|
-
formI18n.translate.t(`common.weekday_5`, { defaultValue: "Thu" }),
|
|
4077
|
-
formI18n.translate.t(`common.weekday_6`, { defaultValue: "Fri" }),
|
|
4078
|
-
formI18n.translate.t(`common.weekday_7`, { defaultValue: "Sat" }),
|
|
4079
4118
|
],
|
|
4080
|
-
backButtonLabel:
|
|
4081
|
-
|
|
4082
|
-
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
|
|
4119
|
+
backButtonLabel: dateTimePickerLabels?.backButtonLabel ??
|
|
4120
|
+
formI18n.translate.t(`common.back_button`, {
|
|
4121
|
+
defaultValue: 'Back',
|
|
4122
|
+
}),
|
|
4123
|
+
forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ??
|
|
4124
|
+
formI18n.translate.t(`common.forward_button`, {
|
|
4125
|
+
defaultValue: 'Forward',
|
|
4126
|
+
}),
|
|
4127
|
+
} })] }) })] }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
|
|
4087
4128
|
};
|
|
4088
4129
|
|
|
4089
4130
|
function filterArray(array, searchTerm) {
|
|
@@ -4098,10 +4139,10 @@ function filterArray(array, searchTerm) {
|
|
|
4098
4139
|
|
|
4099
4140
|
const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLimit = false, }) => {
|
|
4100
4141
|
const { watch, formState: { errors }, setValue, } = useFormContext();
|
|
4101
|
-
const { translate } = useSchemaContext();
|
|
4142
|
+
const { translate, enumPickerLabels } = useSchemaContext();
|
|
4102
4143
|
const { required, variant } = schema;
|
|
4103
4144
|
const isRequired = required?.some((columnId) => columnId === column);
|
|
4104
|
-
const { gridColumn =
|
|
4145
|
+
const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
|
|
4105
4146
|
const [searchText, setSearchText] = useState();
|
|
4106
4147
|
const [limit, setLimit] = useState(10);
|
|
4107
4148
|
const [openSearchResult, setOpenSearchResult] = useState();
|
|
@@ -4116,9 +4157,9 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4116
4157
|
setSearchText(event.target.value);
|
|
4117
4158
|
setLimit(10);
|
|
4118
4159
|
};
|
|
4119
|
-
if (variant ===
|
|
4120
|
-
return (jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems:
|
|
4121
|
-
gridRow, children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ??
|
|
4160
|
+
if (variant === 'radio') {
|
|
4161
|
+
return (jsx(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4162
|
+
gridRow, children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ?? '').map((item) => {
|
|
4122
4163
|
return (jsxs(RadioGroup$1.Item, { onClick: () => {
|
|
4123
4164
|
if (!isMultiple) {
|
|
4124
4165
|
setOpenSearchResult(false);
|
|
@@ -4132,8 +4173,8 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4132
4173
|
: translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
|
|
4133
4174
|
}) }) }) }));
|
|
4134
4175
|
}
|
|
4135
|
-
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems:
|
|
4136
|
-
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow:
|
|
4176
|
+
return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: 'stretch', gridColumn,
|
|
4177
|
+
gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: 'wrap', gap: 1, children: [watchEnums.map((enumValue) => {
|
|
4137
4178
|
const item = enumValue;
|
|
4138
4179
|
if (!!item === false) {
|
|
4139
4180
|
return jsx(Fragment, {});
|
|
@@ -4143,18 +4184,20 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4143
4184
|
}, children: !!renderDisplay === true
|
|
4144
4185
|
? renderDisplay(item)
|
|
4145
4186
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, item));
|
|
4146
|
-
}), jsx(Tag, { size: "lg", cursor:
|
|
4187
|
+
}), jsx(Tag, { size: "lg", cursor: 'pointer', onClick: () => {
|
|
4147
4188
|
setOpenSearchResult(true);
|
|
4148
|
-
}, children:
|
|
4189
|
+
}, children: enumPickerLabels?.addMore ??
|
|
4190
|
+
translate.t(removeIndex(`${colLabel}.add_more`)) }, `${colLabel}-add-more-tag`)] })), !isMultiple && (jsx(Button, { variant: 'outline', onClick: () => {
|
|
4149
4191
|
setOpenSearchResult(true);
|
|
4150
|
-
}, justifyContent:
|
|
4151
|
-
?
|
|
4152
|
-
: translate.t(removeIndex(`${colLabel}.${watchEnum ??
|
|
4192
|
+
}, justifyContent: 'start', children: !!watchEnum === false
|
|
4193
|
+
? ''
|
|
4194
|
+
: translate.t(removeIndex(`${colLabel}.${watchEnum ?? 'null'}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: 'bottom-start' }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { portalled: false, children: jsxs(PopoverBody, { display: 'grid', gap: 1, children: [jsx(Input, { placeholder: enumPickerLabels?.typeToSearch ??
|
|
4195
|
+
translate.t(`${colLabel}.type_to_search`), onChange: (event) => {
|
|
4153
4196
|
onSearchChange(event);
|
|
4154
4197
|
setOpenSearchResult(true);
|
|
4155
|
-
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxs(Grid, { overflow:
|
|
4198
|
+
}, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), showTotalAndLimit && (jsx(Text, { children: `${enumPickerLabels?.total ?? translate.t(removeIndex(`${colLabel}.total`))}: ${count}, ${enumPickerLabels?.showing ?? translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` })), jsxs(Grid, { overflow: 'auto', maxHeight: '20rem', children: [jsx(Flex, { flexFlow: 'column wrap', children: dataList
|
|
4156
4199
|
.filter((item) => {
|
|
4157
|
-
const searchTerm = (searchText ||
|
|
4200
|
+
const searchTerm = (searchText || '').toLowerCase();
|
|
4158
4201
|
if (!searchTerm)
|
|
4159
4202
|
return true;
|
|
4160
4203
|
// Check if the original enum value contains the search text
|
|
@@ -4174,7 +4217,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4174
4217
|
const selected = isMultiple
|
|
4175
4218
|
? watchEnums.some((enumValue) => item === enumValue)
|
|
4176
4219
|
: watchEnum == item;
|
|
4177
|
-
return (jsx(Box, { cursor:
|
|
4220
|
+
return (jsx(Box, { cursor: 'pointer', onClick: () => {
|
|
4178
4221
|
if (!isMultiple) {
|
|
4179
4222
|
setOpenSearchResult(false);
|
|
4180
4223
|
setValue(colLabel, item);
|
|
@@ -4182,10 +4225,11 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
|
|
|
4182
4225
|
}
|
|
4183
4226
|
const newSet = new Set([...(watchEnums ?? []), item]);
|
|
4184
4227
|
setValue(colLabel, [...newSet]);
|
|
4185
|
-
}, ...(selected ? { color:
|
|
4228
|
+
}, ...(selected ? { color: 'colorPalette.400/50' } : {}), children: !!renderDisplay === true
|
|
4186
4229
|
? renderDisplay(item)
|
|
4187
4230
|
: translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
|
|
4188
|
-
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children:
|
|
4231
|
+
}) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: enumPickerLabels?.emptySearchResult ??
|
|
4232
|
+
translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: 'red.400', children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
|
|
4189
4233
|
};
|
|
4190
4234
|
|
|
4191
4235
|
function isEnteringWindow(_ref) {
|
|
@@ -3,7 +3,7 @@ import { JSONSchema7 } from 'json-schema';
|
|
|
3
3
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
4
4
|
import { FieldValues } from 'react-hook-form';
|
|
5
5
|
import { UseTranslationResponse } from 'react-i18next';
|
|
6
|
-
import { DateTimePickerLabels, IdPickerLabels } from './components/types/CustomJSONSchema7';
|
|
6
|
+
import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from './components/types/CustomJSONSchema7';
|
|
7
7
|
export interface SchemaFormContext<TData extends FieldValues> {
|
|
8
8
|
schema: JSONSchema7;
|
|
9
9
|
serverUrl: string;
|
|
@@ -40,5 +40,6 @@ export interface SchemaFormContext<TData extends FieldValues> {
|
|
|
40
40
|
};
|
|
41
41
|
dateTimePickerLabels?: DateTimePickerLabels;
|
|
42
42
|
idPickerLabels?: IdPickerLabels;
|
|
43
|
+
enumPickerLabels?: EnumPickerLabels;
|
|
43
44
|
}
|
|
44
45
|
export declare const SchemaFormContext: import("react").Context<SchemaFormContext<unknown>>;
|
|
@@ -4,7 +4,7 @@ import { JSONSchema7 } from 'json-schema';
|
|
|
4
4
|
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
5
5
|
import { FieldValues, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
|
6
6
|
import { UseTranslationResponse } from 'react-i18next';
|
|
7
|
-
import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels } from '../types/CustomJSONSchema7';
|
|
7
|
+
import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels } from '../types/CustomJSONSchema7';
|
|
8
8
|
export interface FormRootProps<TData extends FieldValues> {
|
|
9
9
|
schema: CustomJSONSchema7;
|
|
10
10
|
serverUrl: string;
|
|
@@ -30,6 +30,7 @@ export interface FormRootProps<TData extends FieldValues> {
|
|
|
30
30
|
};
|
|
31
31
|
dateTimePickerLabels?: DateTimePickerLabels;
|
|
32
32
|
idPickerLabels?: IdPickerLabels;
|
|
33
|
+
enumPickerLabels?: EnumPickerLabels;
|
|
33
34
|
}
|
|
34
35
|
export interface CustomJSONSchema7Definition extends JSONSchema7 {
|
|
35
36
|
variant: string;
|
|
@@ -46,4 +47,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
|
|
|
46
47
|
column?: string | undefined;
|
|
47
48
|
display_column?: string | undefined;
|
|
48
49
|
} | undefined) => void;
|
|
49
|
-
export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, dateTimePickerLabels, idPickerLabels, enumPickerLabels, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { InputDefaultProps } from
|
|
1
|
+
import { InputDefaultProps } from './types';
|
|
2
2
|
export declare const DatePicker: ({ column, schema, prefix }: InputDefaultProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -18,6 +18,16 @@ export interface IdPickerLabels {
|
|
|
18
18
|
emptySearchResult?: string;
|
|
19
19
|
initialResults?: string;
|
|
20
20
|
}
|
|
21
|
+
export interface EnumPickerLabels {
|
|
22
|
+
undefined?: string;
|
|
23
|
+
addMore?: string;
|
|
24
|
+
typeToSearch?: string;
|
|
25
|
+
total?: string;
|
|
26
|
+
showing?: string;
|
|
27
|
+
perPage?: string;
|
|
28
|
+
emptySearchResult?: string;
|
|
29
|
+
initialResults?: string;
|
|
30
|
+
}
|
|
21
31
|
export interface CustomJSONSchema7 extends JSONSchema7 {
|
|
22
32
|
gridColumn?: string;
|
|
23
33
|
gridRow?: string;
|