@joelbarron/react-web-dev-kit 0.1.8 → 0.1.9
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 +65 -160
- package/package.json +9 -2
- package/dist/auth/client.d.ts +0 -46
- package/dist/auth/client.d.ts.map +0 -1
- package/dist/auth/client.js +0 -379
- package/dist/auth/constants/countryCallingCodes.d.ts +0 -9
- package/dist/auth/constants/countryCallingCodes.d.ts.map +0 -1
- package/dist/auth/constants/countryCallingCodes.js +0 -209
- package/dist/auth/constants/gender.d.ts +0 -9
- package/dist/auth/constants/gender.d.ts.map +0 -1
- package/dist/auth/constants/gender.js +0 -12
- package/dist/auth/constants/index.d.ts +0 -3
- package/dist/auth/constants/index.d.ts.map +0 -1
- package/dist/auth/constants/index.js +0 -2
- package/dist/auth/forms/account/AuthAccountConfirmationForm.d.ts +0 -18
- package/dist/auth/forms/account/AuthAccountConfirmationForm.d.ts.map +0 -1
- package/dist/auth/forms/account/AuthAccountConfirmationForm.js +0 -167
- package/dist/auth/forms/account/index.d.ts +0 -2
- package/dist/auth/forms/account/index.d.ts.map +0 -1
- package/dist/auth/forms/account/index.js +0 -1
- package/dist/auth/forms/errorParser.d.ts +0 -7
- package/dist/auth/forms/errorParser.d.ts.map +0 -1
- package/dist/auth/forms/errorParser.js +0 -65
- package/dist/auth/forms/index.d.ts +0 -6
- package/dist/auth/forms/index.d.ts.map +0 -1
- package/dist/auth/forms/index.js +0 -5
- package/dist/auth/forms/password/AuthForgotPasswordForm.d.ts +0 -16
- package/dist/auth/forms/password/AuthForgotPasswordForm.d.ts.map +0 -1
- package/dist/auth/forms/password/AuthForgotPasswordForm.js +0 -109
- package/dist/auth/forms/password/AuthPasswordResetConfirmForm.d.ts +0 -17
- package/dist/auth/forms/password/AuthPasswordResetConfirmForm.d.ts.map +0 -1
- package/dist/auth/forms/password/AuthPasswordResetConfirmForm.js +0 -163
- package/dist/auth/forms/password/AuthResetPasswordForm.d.ts +0 -12
- package/dist/auth/forms/password/AuthResetPasswordForm.d.ts.map +0 -1
- package/dist/auth/forms/password/AuthResetPasswordForm.js +0 -22
- package/dist/auth/forms/password/index.d.ts +0 -4
- package/dist/auth/forms/password/index.d.ts.map +0 -1
- package/dist/auth/forms/password/index.js +0 -3
- package/dist/auth/forms/password/passwordValidation.d.ts +0 -3
- package/dist/auth/forms/password/passwordValidation.d.ts.map +0 -1
- package/dist/auth/forms/password/passwordValidation.js +0 -45
- package/dist/auth/forms/sign-in/AuthOtpSignInForm.d.ts +0 -24
- package/dist/auth/forms/sign-in/AuthOtpSignInForm.d.ts.map +0 -1
- package/dist/auth/forms/sign-in/AuthOtpSignInForm.js +0 -227
- package/dist/auth/forms/sign-in/AuthPasswordSignInForm.d.ts +0 -22
- package/dist/auth/forms/sign-in/AuthPasswordSignInForm.d.ts.map +0 -1
- package/dist/auth/forms/sign-in/AuthPasswordSignInForm.js +0 -148
- package/dist/auth/forms/sign-in/index.d.ts +0 -3
- package/dist/auth/forms/sign-in/index.d.ts.map +0 -1
- package/dist/auth/forms/sign-in/index.js +0 -2
- package/dist/auth/forms/sign-up/AuthSignUpForm.d.ts +0 -37
- package/dist/auth/forms/sign-up/AuthSignUpForm.d.ts.map +0 -1
- package/dist/auth/forms/sign-up/AuthSignUpForm.js +0 -193
- package/dist/auth/forms/sign-up/index.d.ts +0 -2
- package/dist/auth/forms/sign-up/index.d.ts.map +0 -1
- package/dist/auth/forms/sign-up/index.js +0 -1
- package/dist/auth/fuse/createFuseAuthViews.d.ts +0 -25
- package/dist/auth/fuse/createFuseAuthViews.d.ts.map +0 -1
- package/dist/auth/fuse/createFuseAuthViews.js +0 -510
- package/dist/auth/fuse/fuseAdapter.d.ts +0 -42
- package/dist/auth/fuse/fuseAdapter.d.ts.map +0 -1
- package/dist/auth/fuse/fuseAdapter.js +0 -291
- package/dist/auth/fuse/fuseIntegration.d.ts +0 -61
- package/dist/auth/fuse/fuseIntegration.d.ts.map +0 -1
- package/dist/auth/fuse/fuseIntegration.js +0 -103
- package/dist/auth/fuse/index.d.ts +0 -4
- package/dist/auth/fuse/index.d.ts.map +0 -1
- package/dist/auth/fuse/index.js +0 -3
- package/dist/auth/index.d.ts +0 -11
- package/dist/auth/index.d.ts.map +0 -1
- package/dist/auth/index.js +0 -10
- package/dist/auth/provider.d.ts +0 -35
- package/dist/auth/provider.d.ts.map +0 -1
- package/dist/auth/provider.js +0 -133
- package/dist/auth/query.d.ts +0 -23
- package/dist/auth/query.d.ts.map +0 -1
- package/dist/auth/query.js +0 -103
- package/dist/auth/routes.d.ts +0 -37
- package/dist/auth/routes.d.ts.map +0 -1
- package/dist/auth/routes.js +0 -75
- package/dist/auth/social/providerAuth.d.ts +0 -101
- package/dist/auth/social/providerAuth.d.ts.map +0 -1
- package/dist/auth/social/providerAuth.js +0 -207
- package/dist/auth/storage.d.ts +0 -3
- package/dist/auth/storage.d.ts.map +0 -1
- package/dist/auth/storage.js +0 -20
- package/dist/auth/types.d.ts +0 -238
- package/dist/auth/types.d.ts.map +0 -1
- package/dist/auth/types.js +0 -1
- package/dist/auth/ui/AuthPageTitle.d.ts +0 -7
- package/dist/auth/ui/AuthPageTitle.d.ts.map +0 -1
- package/dist/auth/ui/AuthPageTitle.js +0 -7
- package/dist/auth/ui/AuthPagesMessageSection.d.ts +0 -3
- package/dist/auth/ui/AuthPagesMessageSection.d.ts.map +0 -1
- package/dist/auth/ui/AuthPagesMessageSection.js +0 -39
- package/dist/auth/ui/AuthPrimaryButton.d.ts +0 -9
- package/dist/auth/ui/AuthPrimaryButton.d.ts.map +0 -1
- package/dist/auth/ui/AuthPrimaryButton.js +0 -19
- package/dist/auth/ui/AuthRoleSelectionDialog.d.ts +0 -14
- package/dist/auth/ui/AuthRoleSelectionDialog.d.ts.map +0 -1
- package/dist/auth/ui/AuthRoleSelectionDialog.js +0 -39
- package/dist/auth/ui/AuthRoutePageWrapper.d.ts +0 -12
- package/dist/auth/ui/AuthRoutePageWrapper.d.ts.map +0 -1
- package/dist/auth/ui/AuthRoutePageWrapper.js +0 -61
- package/dist/auth/ui/AuthSecondaryButton.d.ts +0 -7
- package/dist/auth/ui/AuthSecondaryButton.d.ts.map +0 -1
- package/dist/auth/ui/AuthSecondaryButton.js +0 -18
- package/dist/auth/ui/AuthSocialProviderButton.d.ts +0 -11
- package/dist/auth/ui/AuthSocialProviderButton.d.ts.map +0 -1
- package/dist/auth/ui/AuthSocialProviderButton.js +0 -33
- package/dist/auth/ui/index.d.ts +0 -9
- package/dist/auth/ui/index.d.ts.map +0 -1
- package/dist/auth/ui/index.js +0 -8
- package/dist/auth/ui/types.d.ts +0 -15
- package/dist/auth/ui/types.d.ts.map +0 -1
- package/dist/auth/ui/types.js +0 -1
- package/dist/config/createConfig.d.ts +0 -14
- package/dist/config/createConfig.d.ts.map +0 -1
- package/dist/config/createConfig.js +0 -179
- package/dist/config/defaults.d.ts +0 -3
- package/dist/config/defaults.d.ts.map +0 -1
- package/dist/config/defaults.js +0 -39
- package/dist/config/index.d.ts +0 -5
- package/dist/config/index.d.ts.map +0 -1
- package/dist/config/index.js +0 -4
- package/dist/config/merge.d.ts +0 -2
- package/dist/config/merge.d.ts.map +0 -1
- package/dist/config/merge.js +0 -18
- package/dist/config/types.d.ts +0 -53
- package/dist/config/types.d.ts.map +0 -1
- package/dist/config/types.js +0 -1
- package/dist/core/buttons/JBButton.d.ts +0 -8
- package/dist/core/buttons/JBButton.d.ts.map +0 -1
- package/dist/core/buttons/JBButton.js +0 -55
- package/dist/core/buttons/index.d.ts +0 -2
- package/dist/core/buttons/index.d.ts.map +0 -1
- package/dist/core/buttons/index.js +0 -1
- package/dist/core/dialogs/JBConfirmDialog.d.ts +0 -15
- package/dist/core/dialogs/JBConfirmDialog.d.ts.map +0 -1
- package/dist/core/dialogs/JBConfirmDialog.js +0 -6
- package/dist/core/dialogs/index.d.ts +0 -2
- package/dist/core/dialogs/index.d.ts.map +0 -1
- package/dist/core/dialogs/index.js +0 -1
- package/dist/core/index.d.ts +0 -5
- package/dist/core/index.d.ts.map +0 -1
- package/dist/core/index.js +0 -4
- package/dist/core/layout/JBContentContainer.d.ts +0 -31
- package/dist/core/layout/JBContentContainer.d.ts.map +0 -1
- package/dist/core/layout/JBContentContainer.js +0 -50
- package/dist/core/layout/JBFormHeader.d.ts +0 -3
- package/dist/core/layout/JBFormHeader.d.ts.map +0 -1
- package/dist/core/layout/JBFormHeader.js +0 -131
- package/dist/core/layout/index.d.ts +0 -3
- package/dist/core/layout/index.d.ts.map +0 -1
- package/dist/core/layout/index.js +0 -2
- package/dist/core/skeletons/JBFormContentSkeleton.d.ts +0 -5
- package/dist/core/skeletons/JBFormContentSkeleton.d.ts.map +0 -1
- package/dist/core/skeletons/JBFormContentSkeleton.js +0 -12
- package/dist/core/skeletons/JBFormHeaderSkeleton.d.ts +0 -6
- package/dist/core/skeletons/JBFormHeaderSkeleton.d.ts.map +0 -1
- package/dist/core/skeletons/JBFormHeaderSkeleton.js +0 -19
- package/dist/core/skeletons/index.d.ts +0 -3
- package/dist/core/skeletons/index.d.ts.map +0 -1
- package/dist/core/skeletons/index.js +0 -2
- package/dist/forms/JBAutocompleteField.d.ts +0 -12
- package/dist/forms/JBAutocompleteField.d.ts.map +0 -1
- package/dist/forms/JBAutocompleteField.js +0 -20
- package/dist/forms/JBCheckboxField.d.ts +0 -12
- package/dist/forms/JBCheckboxField.d.ts.map +0 -1
- package/dist/forms/JBCheckboxField.js +0 -36
- package/dist/forms/JBDatePickerField.d.ts +0 -13
- package/dist/forms/JBDatePickerField.d.ts.map +0 -1
- package/dist/forms/JBDatePickerField.js +0 -49
- package/dist/forms/JBRadioGroupField.d.ts +0 -10
- package/dist/forms/JBRadioGroupField.d.ts.map +0 -1
- package/dist/forms/JBRadioGroupField.js +0 -8
- package/dist/forms/JBSelectField.d.ts +0 -9
- package/dist/forms/JBSelectField.d.ts.map +0 -1
- package/dist/forms/JBSelectField.js +0 -8
- package/dist/forms/JBSwitchField.d.ts +0 -11
- package/dist/forms/JBSwitchField.d.ts.map +0 -1
- package/dist/forms/JBSwitchField.js +0 -10
- package/dist/forms/JBTextField.d.ts +0 -6
- package/dist/forms/JBTextField.d.ts.map +0 -1
- package/dist/forms/JBTextField.js +0 -8
- package/dist/forms/JBTimePickerField.d.ts +0 -12
- package/dist/forms/JBTimePickerField.d.ts.map +0 -1
- package/dist/forms/JBTimePickerField.js +0 -17
- package/dist/forms/index.d.ts +0 -13
- package/dist/forms/index.d.ts.map +0 -1
- package/dist/forms/index.js +0 -12
- package/dist/forms/rules.d.ts +0 -16
- package/dist/forms/rules.d.ts.map +0 -1
- package/dist/forms/rules.js +0 -21
- package/dist/forms/types.d.ts +0 -12
- package/dist/forms/types.d.ts.map +0 -1
- package/dist/forms/types.js +0 -1
- package/dist/forms/utils.d.ts +0 -5
- package/dist/forms/utils.d.ts.map +0 -1
- package/dist/forms/utils.js +0 -7
- package/dist/forms/zod.d.ts +0 -4
- package/dist/forms/zod.d.ts.map +0 -1
- package/dist/forms/zod.js +0 -9
- package/dist/grid/JBGrid.d.ts +0 -3
- package/dist/grid/JBGrid.d.ts.map +0 -1
- package/dist/grid/JBGrid.js +0 -338
- package/dist/grid/JBGridHeader.d.ts +0 -3
- package/dist/grid/JBGridHeader.d.ts.map +0 -1
- package/dist/grid/JBGridHeader.js +0 -93
- package/dist/grid/JBGridLoading.d.ts +0 -9
- package/dist/grid/JBGridLoading.d.ts.map +0 -1
- package/dist/grid/JBGridLoading.js +0 -14
- package/dist/grid/JBGridProviders.d.ts +0 -13
- package/dist/grid/JBGridProviders.d.ts.map +0 -1
- package/dist/grid/JBGridProviders.js +0 -54
- package/dist/grid/JBGridSkeleton.d.ts +0 -7
- package/dist/grid/JBGridSkeleton.d.ts.map +0 -1
- package/dist/grid/JBGridSkeleton.js +0 -6
- package/dist/grid/defaults.d.ts +0 -4
- package/dist/grid/defaults.d.ts.map +0 -1
- package/dist/grid/defaults.js +0 -29
- package/dist/grid/index.d.ts +0 -8
- package/dist/grid/index.d.ts.map +0 -1
- package/dist/grid/index.js +0 -7
- package/dist/grid/types.d.ts +0 -197
- package/dist/grid/types.d.ts.map +0 -1
- package/dist/grid/types.js +0 -1
- package/dist/hooks/index.d.ts +0 -4
- package/dist/hooks/index.d.ts.map +0 -1
- package/dist/hooks/index.js +0 -3
- package/dist/hooks/useJBDebouncedValue.d.ts +0 -2
- package/dist/hooks/useJBDebouncedValue.d.ts.map +0 -1
- package/dist/hooks/useJBDebouncedValue.js +0 -11
- package/dist/hooks/useJBEntityFormController.d.ts +0 -54
- package/dist/hooks/useJBEntityFormController.d.ts.map +0 -1
- package/dist/hooks/useJBEntityFormController.js +0 -156
- package/dist/hooks/useJBRedirect.d.ts +0 -10
- package/dist/hooks/useJBRedirect.d.ts.map +0 -1
- package/dist/hooks/useJBRedirect.js +0 -11
- package/dist/index.d.ts +0 -9
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -8
- package/dist/query/createQueryClient.d.ts +0 -8
- package/dist/query/createQueryClient.d.ts.map +0 -1
- package/dist/query/createQueryClient.js +0 -25
- package/dist/query/http.d.ts +0 -3
- package/dist/query/http.d.ts.map +0 -1
- package/dist/query/http.js +0 -12
- package/dist/query/index.d.ts +0 -4
- package/dist/query/index.d.ts.map +0 -1
- package/dist/query/index.js +0 -3
- package/dist/query/types.d.ts +0 -7
- package/dist/query/types.d.ts.map +0 -1
- package/dist/query/types.js +0 -1
- package/dist/utils/errors.d.ts +0 -10
- package/dist/utils/errors.d.ts.map +0 -1
- package/dist/utils/errors.js +0 -55
- package/dist/utils/format.d.ts +0 -4
- package/dist/utils/format.d.ts.map +0 -1
- package/dist/utils/format.js +0 -28
- package/dist/utils/geo.d.ts +0 -9
- package/dist/utils/geo.d.ts.map +0 -1
- package/dist/utils/geo.js +0 -186
- package/dist/utils/index.d.ts +0 -6
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/index.js +0 -5
- package/dist/utils/query.d.ts +0 -2
- package/dist/utils/query.d.ts.map +0 -1
- package/dist/utils/query.js +0 -4
- package/dist/utils/regex.d.ts +0 -7
- package/dist/utils/regex.d.ts.map +0 -1
- package/dist/utils/regex.js +0 -6
package/dist/forms/types.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Control, FieldValues, Path, RegisterOptions } from 'react-hook-form';
|
|
2
|
-
export type JBFieldControlProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = {
|
|
3
|
-
control: Control<TFieldValues>;
|
|
4
|
-
name: TName;
|
|
5
|
-
rules?: RegisterOptions<TFieldValues, TName>;
|
|
6
|
-
};
|
|
7
|
-
export type SelectOption<TValue = string> = {
|
|
8
|
-
label: string;
|
|
9
|
-
value: TValue;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9E,MAAM,MAAM,mBAAmB,CAC7B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B;IACF,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,MAAM,GAAG,MAAM,IAAI;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
|
package/dist/forms/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/forms/utils.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
|
|
2
|
-
type FormFieldError = FieldError | Merge<FieldError, FieldErrorsImpl<Record<string, unknown>>> | undefined;
|
|
3
|
-
export declare const getJBFieldErrorMessage: (error: FormFieldError) => string | undefined;
|
|
4
|
-
export {};
|
|
5
|
-
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/forms/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErE,KAAK,cAAc,GACf,UAAU,GACV,KAAK,CAAC,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAC3D,SAAS,CAAC;AAEd,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc,KAAG,MAAM,GAAG,SAIvE,CAAC"}
|
package/dist/forms/utils.js
DELETED
package/dist/forms/zod.d.ts
DELETED
package/dist/forms/zod.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"zod.d.ts","sourceRoot":"","sources":["../../src/forms/zod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MAA2C,CAAC;AAE/F,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,EAAE,sBAAiB,KAAG,CAAC,CAAC,SAQ5E,CAAC"}
|
package/dist/forms/zod.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
export const normalizeTextInput = (value) => value.trim().replace(/\s+/g, ' ');
|
|
3
|
-
export const buildRequiredTextSchema = (label, minimumLength = 1) => {
|
|
4
|
-
const field = z.string().trim().min(1, `${label} es obligatorio`);
|
|
5
|
-
if (minimumLength <= 1) {
|
|
6
|
-
return field;
|
|
7
|
-
}
|
|
8
|
-
return field.min(minimumLength, `${label} debe tener al menos ${minimumLength} caracteres`);
|
|
9
|
-
};
|
package/dist/grid/JBGrid.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"JBGrid.d.ts","sourceRoot":"","sources":["../../src/grid/JBGrid.tsx"],"names":[],"mappings":"AA0CA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,MAAM,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,2CAokBtF"}
|
package/dist/grid/JBGrid.js
DELETED
|
@@ -1,338 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CustomPaging, FilteringState, GroupingState, IntegratedFiltering, IntegratedGrouping, IntegratedSelection, IntegratedSorting, IntegratedSummary, PagingState, SearchState, SelectionState, SortingState, SummaryState } from '@devexpress/dx-react-grid';
|
|
3
|
-
import { DragDropProvider, Grid, GroupingPanel, PagingPanel, Table, TableColumnReordering, TableColumnResizing, TableFilterRow, TableGroupRow, TableHeaderRow, TableSelection, TableSummaryRow, Toolbar, VirtualTable, } from '@devexpress/dx-react-grid-material-ui';
|
|
4
|
-
import { Box, CircularProgress, TablePagination, Typography } from '@mui/material';
|
|
5
|
-
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
6
|
-
import { resolveGridDefaults } from './defaults';
|
|
7
|
-
import { JBGridLoading } from './JBGridLoading';
|
|
8
|
-
import { JBBooleanTypeProvider, JBCurrencyTypeProvider, JBDateTypeProvider, JBImageTypeProvider } from './JBGridProviders';
|
|
9
|
-
export function JBGrid(props) {
|
|
10
|
-
let error = props.error;
|
|
11
|
-
error = error ? 'No se pudo cargar el listado.' : undefined;
|
|
12
|
-
const { gridConfig, service, rows: controlledRows, totalCount: controlledTotalCount, loading: controlledLoading, isFetching = false, fetchingLabel = 'Actualizando...', currentPage: controlledCurrentPage, onCurrentPageChange, pageSize: controlledPageSize, onPageSizeChange, searchText, onSearchTextChange, onRowSelected, loadData, loadingComponent, getRowId, paginationPosition = 'top', stickyPagination = true, height = '100%', stickyHeader = true, infiniteScroll = false, hasMore = false, isLoadingMore = false, loadMoreThreshold = 200, onLoadMore } = props;
|
|
13
|
-
const defaults = resolveGridDefaults(gridConfig.defaults);
|
|
14
|
-
const pageSizes = defaults.pageSizes;
|
|
15
|
-
const virtualScrolling = defaults.virtualScrolling;
|
|
16
|
-
const rootRef = useRef(null);
|
|
17
|
-
const [containerHeight, setContainerHeight] = useState(defaults.virtualTableHeight);
|
|
18
|
-
const resolvedVirtualTableHeight = defaults.virtualTableHeightMode === 'fill'
|
|
19
|
-
? Math.max(240, Math.floor(containerHeight * defaults.virtualTableHeightRatio))
|
|
20
|
-
: defaults.virtualTableHeight;
|
|
21
|
-
const isControlledPaging = controlledCurrentPage !== undefined && controlledPageSize !== undefined;
|
|
22
|
-
const [rows, setRows] = useState(controlledRows ?? []);
|
|
23
|
-
const [totalCount, setTotalCount] = useState(0);
|
|
24
|
-
const [internalPageSize, setInternalPageSize] = useState(defaults.pageSize);
|
|
25
|
-
const [internalCurrentPage, setInternalCurrentPage] = useState(0);
|
|
26
|
-
const [internalLoading, setInternalLoading] = useState(false);
|
|
27
|
-
const [lastQuery, setLastQuery] = useState('');
|
|
28
|
-
const [selection, setSelection] = useState([]);
|
|
29
|
-
const [expandedGroups, setExpandedGroups] = useState(defaults.expandedGroups);
|
|
30
|
-
const [columnOrder, setColumnOrder] = useState(gridConfig.columns.map((column) => column.name));
|
|
31
|
-
const currentPage = isControlledPaging ? controlledCurrentPage : internalCurrentPage;
|
|
32
|
-
const pageSize = isControlledPaging ? controlledPageSize : internalPageSize;
|
|
33
|
-
const loading = controlledLoading ?? internalLoading;
|
|
34
|
-
const groupingColumnNames = useMemo(() => (defaults.grouping ?? [])
|
|
35
|
-
.map((grouping) => grouping?.columnName)
|
|
36
|
-
.filter((name) => typeof name === 'string' && name.length > 0), [defaults.grouping]);
|
|
37
|
-
const expandedGroupsFromRows = useMemo(() => {
|
|
38
|
-
if (!defaults.expandGroupedRowsByDefault || groupingColumnNames.length === 0 || rows.length === 0) {
|
|
39
|
-
return [];
|
|
40
|
-
}
|
|
41
|
-
const columnsByName = new Map(gridConfig.columns.map((column) => [column.name, column]));
|
|
42
|
-
const allGroupKeys = new Set();
|
|
43
|
-
rows.forEach((row) => {
|
|
44
|
-
let currentPath = '';
|
|
45
|
-
groupingColumnNames.forEach((columnName) => {
|
|
46
|
-
const column = columnsByName.get(columnName);
|
|
47
|
-
const valueFromGetter = typeof column?.getCellValue === 'function' ? column.getCellValue(row) : row[columnName];
|
|
48
|
-
const value = valueFromGetter === undefined || valueFromGetter === null || valueFromGetter === ''
|
|
49
|
-
? '-'
|
|
50
|
-
: String(valueFromGetter);
|
|
51
|
-
currentPath = currentPath ? `${currentPath}|${value}` : value;
|
|
52
|
-
allGroupKeys.add(currentPath);
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
return Array.from(allGroupKeys);
|
|
56
|
-
}, [defaults.expandGroupedRowsByDefault, gridConfig.columns, groupingColumnNames, rows]);
|
|
57
|
-
useEffect(() => {
|
|
58
|
-
if (controlledRows) {
|
|
59
|
-
setRows(controlledRows);
|
|
60
|
-
}
|
|
61
|
-
}, [controlledRows]);
|
|
62
|
-
useEffect(() => {
|
|
63
|
-
if (defaults.allowGrouping === false) {
|
|
64
|
-
setExpandedGroups([]);
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
const nextExpandedGroups = defaults.expandGroupedRowsByDefault
|
|
68
|
-
? expandedGroupsFromRows
|
|
69
|
-
: defaults.expandedGroups;
|
|
70
|
-
setExpandedGroups((previous) => {
|
|
71
|
-
if (previous.length === nextExpandedGroups.length &&
|
|
72
|
-
previous.every((value, index) => value === nextExpandedGroups[index])) {
|
|
73
|
-
return previous;
|
|
74
|
-
}
|
|
75
|
-
return nextExpandedGroups;
|
|
76
|
-
});
|
|
77
|
-
}, [
|
|
78
|
-
defaults.allowGrouping,
|
|
79
|
-
defaults.expandGroupedRowsByDefault,
|
|
80
|
-
defaults.expandedGroups,
|
|
81
|
-
expandedGroupsFromRows
|
|
82
|
-
]);
|
|
83
|
-
useEffect(() => {
|
|
84
|
-
const defaultOrder = gridConfig.columns.map((column) => column.name);
|
|
85
|
-
setColumnOrder(defaultOrder);
|
|
86
|
-
}, [gridConfig.columns]);
|
|
87
|
-
useEffect(() => {
|
|
88
|
-
if (controlledTotalCount !== undefined) {
|
|
89
|
-
setTotalCount(controlledTotalCount);
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (controlledRows) {
|
|
93
|
-
setTotalCount(controlledRows.length);
|
|
94
|
-
}
|
|
95
|
-
}, [controlledRows, controlledTotalCount]);
|
|
96
|
-
const computeQueryString = useMemo(() => () => `pageSize=${pageSize}&skip=${pageSize * currentPage}&terms=${searchText || ''}`, [currentPage, pageSize, searchText]);
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
if (controlledRows)
|
|
99
|
-
return;
|
|
100
|
-
const execute = async () => {
|
|
101
|
-
if (loadData) {
|
|
102
|
-
await loadData({
|
|
103
|
-
lastQuery,
|
|
104
|
-
loading,
|
|
105
|
-
setRows,
|
|
106
|
-
setTotalCount,
|
|
107
|
-
setLastQuery,
|
|
108
|
-
setLoading: setInternalLoading,
|
|
109
|
-
getQueryString: computeQueryString,
|
|
110
|
-
currentPage,
|
|
111
|
-
pageSize,
|
|
112
|
-
searchText
|
|
113
|
-
});
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
if (!service)
|
|
117
|
-
return;
|
|
118
|
-
const queryString = computeQueryString();
|
|
119
|
-
if (queryString === lastQuery || loading)
|
|
120
|
-
return;
|
|
121
|
-
try {
|
|
122
|
-
setInternalLoading(true);
|
|
123
|
-
const response = await service.list(currentPage, pageSize, searchText);
|
|
124
|
-
setRows(response?.data?.results ?? []);
|
|
125
|
-
setTotalCount(response?.data?.count ?? 0);
|
|
126
|
-
setLastQuery(queryString);
|
|
127
|
-
}
|
|
128
|
-
finally {
|
|
129
|
-
setInternalLoading(false);
|
|
130
|
-
}
|
|
131
|
-
};
|
|
132
|
-
void execute();
|
|
133
|
-
}, [
|
|
134
|
-
computeQueryString,
|
|
135
|
-
controlledRows,
|
|
136
|
-
currentPage,
|
|
137
|
-
lastQuery,
|
|
138
|
-
loadData,
|
|
139
|
-
loading,
|
|
140
|
-
pageSize,
|
|
141
|
-
searchText,
|
|
142
|
-
service
|
|
143
|
-
]);
|
|
144
|
-
const handleCurrentPageChange = (nextPage) => {
|
|
145
|
-
if (isControlledPaging) {
|
|
146
|
-
onCurrentPageChange?.(nextPage);
|
|
147
|
-
return;
|
|
148
|
-
}
|
|
149
|
-
setInternalCurrentPage(nextPage);
|
|
150
|
-
};
|
|
151
|
-
const handlePageSizeChange = (nextPageSize) => {
|
|
152
|
-
if (isControlledPaging) {
|
|
153
|
-
onPageSizeChange?.(nextPageSize);
|
|
154
|
-
return;
|
|
155
|
-
}
|
|
156
|
-
setInternalPageSize(nextPageSize);
|
|
157
|
-
};
|
|
158
|
-
const handleSelection = (nextSelection) => {
|
|
159
|
-
const lastSelected = nextSelection.find((selected) => selection.indexOf(selected) === -1);
|
|
160
|
-
if (lastSelected === undefined) {
|
|
161
|
-
setSelection([]);
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
setSelection([lastSelected]);
|
|
165
|
-
const selectedRow = rows.find((row) => rowIdGetter(row) === lastSelected);
|
|
166
|
-
if (selectedRow && onRowSelected) {
|
|
167
|
-
onRowSelected(selectedRow);
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
const rowIdGetter = getRowId
|
|
171
|
-
? (row) => getRowId(row)
|
|
172
|
-
: (row) => row.id;
|
|
173
|
-
const showTopPagination = paginationPosition === 'top' || paginationPosition === 'both';
|
|
174
|
-
const showBottomPagination = paginationPosition === 'bottom' || paginationPosition === 'both';
|
|
175
|
-
const showPaging = paginationPosition !== 'none';
|
|
176
|
-
const showFetchingIndicator = isFetching && !loading;
|
|
177
|
-
const handleRowsPerPageChange = (event) => {
|
|
178
|
-
const nextPageSize = Number.parseInt(event.target.value, 10);
|
|
179
|
-
handlePageSizeChange(nextPageSize);
|
|
180
|
-
handleCurrentPageChange(0);
|
|
181
|
-
};
|
|
182
|
-
useEffect(() => {
|
|
183
|
-
if (!virtualScrolling || defaults.virtualTableHeightMode !== 'fill' || !rootRef.current)
|
|
184
|
-
return;
|
|
185
|
-
const node = rootRef.current;
|
|
186
|
-
const observer = new ResizeObserver((entries) => {
|
|
187
|
-
const entry = entries[0];
|
|
188
|
-
if (!entry)
|
|
189
|
-
return;
|
|
190
|
-
setContainerHeight(entry.contentRect.height);
|
|
191
|
-
});
|
|
192
|
-
observer.observe(node);
|
|
193
|
-
return () => observer.disconnect();
|
|
194
|
-
}, [defaults.virtualTableHeightMode, virtualScrolling]);
|
|
195
|
-
useEffect(() => {
|
|
196
|
-
if (!virtualScrolling || !infiniteScroll || !onLoadMore || !rootRef.current)
|
|
197
|
-
return;
|
|
198
|
-
const tableContainer = rootRef.current.querySelector('.MuiTableContainer-root');
|
|
199
|
-
if (!tableContainer)
|
|
200
|
-
return;
|
|
201
|
-
const handleScroll = () => {
|
|
202
|
-
const target = tableContainer;
|
|
203
|
-
const distanceToBottom = target.scrollHeight - (target.scrollTop + target.clientHeight);
|
|
204
|
-
if (distanceToBottom <= loadMoreThreshold && hasMore && !isLoadingMore) {
|
|
205
|
-
onLoadMore();
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
tableContainer.addEventListener('scroll', handleScroll, { passive: true });
|
|
209
|
-
return () => tableContainer.removeEventListener('scroll', handleScroll);
|
|
210
|
-
}, [hasMore, infiniteScroll, isLoadingMore, loadMoreThreshold, onLoadMore, rows.length, virtualScrolling]);
|
|
211
|
-
useEffect(() => {
|
|
212
|
-
if (!rootRef.current)
|
|
213
|
-
return;
|
|
214
|
-
const contentWrapper = rootRef.current.closest('.FusePageCarded-contentWrapper');
|
|
215
|
-
const contentNode = rootRef.current.closest('.FusePageCarded-content');
|
|
216
|
-
if (!contentWrapper)
|
|
217
|
-
return;
|
|
218
|
-
const lockCount = Number.parseInt(contentWrapper.dataset.jbGridLockCount ?? '0', 10) || 0;
|
|
219
|
-
contentWrapper.dataset.jbGridLockCount = String(lockCount + 1);
|
|
220
|
-
if (lockCount === 0) {
|
|
221
|
-
const prevWrapperOverflow = contentWrapper.style.overflow;
|
|
222
|
-
const prevWrapperScrollbarWidth = contentWrapper.style.scrollbarWidth;
|
|
223
|
-
const prevContentOverflow = contentNode?.style.overflow ?? '';
|
|
224
|
-
const prevContentHeight = contentNode?.style.height ?? '';
|
|
225
|
-
const prevContentMinHeight = contentNode?.style.minHeight ?? '';
|
|
226
|
-
contentWrapper.dataset.jbGridPrevOverflow = prevWrapperOverflow;
|
|
227
|
-
contentWrapper.dataset.jbGridPrevScrollbarWidth = prevWrapperScrollbarWidth ?? '';
|
|
228
|
-
contentWrapper.dataset.jbGridPrevContentOverflow = prevContentOverflow;
|
|
229
|
-
contentWrapper.dataset.jbGridPrevContentHeight = prevContentHeight;
|
|
230
|
-
contentWrapper.dataset.jbGridPrevContentMinHeight = prevContentMinHeight;
|
|
231
|
-
contentWrapper.style.overflow = 'hidden';
|
|
232
|
-
contentWrapper.style.scrollbarWidth = 'none';
|
|
233
|
-
// Hide perfect-scrollbar rails when present in Fuse wrappers.
|
|
234
|
-
const rails = contentWrapper.querySelectorAll('.ps__rail-x, .ps__rail-y');
|
|
235
|
-
rails.forEach((rail) => {
|
|
236
|
-
rail.dataset.jbGridPrevDisplay = rail.style.display ?? '';
|
|
237
|
-
rail.style.display = 'none';
|
|
238
|
-
});
|
|
239
|
-
if (contentNode) {
|
|
240
|
-
contentNode.style.overflow = 'hidden';
|
|
241
|
-
contentNode.style.height = '100%';
|
|
242
|
-
contentNode.style.minHeight = '0';
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
return () => {
|
|
246
|
-
const currentCount = Number.parseInt(contentWrapper.dataset.jbGridLockCount ?? '1', 10) || 1;
|
|
247
|
-
const nextCount = Math.max(0, currentCount - 1);
|
|
248
|
-
contentWrapper.dataset.jbGridLockCount = String(nextCount);
|
|
249
|
-
if (nextCount > 0)
|
|
250
|
-
return;
|
|
251
|
-
contentWrapper.style.overflow = contentWrapper.dataset.jbGridPrevOverflow ?? '';
|
|
252
|
-
contentWrapper.style.scrollbarWidth =
|
|
253
|
-
contentWrapper.dataset.jbGridPrevScrollbarWidth ?? '';
|
|
254
|
-
const rails = contentWrapper.querySelectorAll('.ps__rail-x, .ps__rail-y');
|
|
255
|
-
rails.forEach((rail) => {
|
|
256
|
-
rail.style.display = rail.dataset.jbGridPrevDisplay ?? '';
|
|
257
|
-
delete rail.dataset.jbGridPrevDisplay;
|
|
258
|
-
});
|
|
259
|
-
if (contentNode) {
|
|
260
|
-
contentNode.style.overflow = contentWrapper.dataset.jbGridPrevContentOverflow ?? '';
|
|
261
|
-
contentNode.style.height = contentWrapper.dataset.jbGridPrevContentHeight ?? '';
|
|
262
|
-
contentNode.style.minHeight = contentWrapper.dataset.jbGridPrevContentMinHeight ?? '';
|
|
263
|
-
}
|
|
264
|
-
delete contentWrapper.dataset.jbGridPrevOverflow;
|
|
265
|
-
delete contentWrapper.dataset.jbGridPrevScrollbarWidth;
|
|
266
|
-
delete contentWrapper.dataset.jbGridPrevContentOverflow;
|
|
267
|
-
delete contentWrapper.dataset.jbGridPrevContentHeight;
|
|
268
|
-
delete contentWrapper.dataset.jbGridPrevContentMinHeight;
|
|
269
|
-
};
|
|
270
|
-
}, []);
|
|
271
|
-
return (_jsx(Box, { className: "jb-grid-root", ref: rootRef, sx: {
|
|
272
|
-
width: '100%',
|
|
273
|
-
height,
|
|
274
|
-
minHeight: 0,
|
|
275
|
-
overflow: virtualScrolling ? 'hidden !important' : 'auto',
|
|
276
|
-
...(!virtualScrolling && stickyHeader
|
|
277
|
-
? {
|
|
278
|
-
'& .MuiTableCell-head': {
|
|
279
|
-
position: 'sticky',
|
|
280
|
-
top: 0,
|
|
281
|
-
zIndex: 2,
|
|
282
|
-
backgroundColor: 'background.paper'
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
: undefined),
|
|
286
|
-
...(virtualScrolling
|
|
287
|
-
? {
|
|
288
|
-
'& .dx-rg-grid': {
|
|
289
|
-
height: '100%',
|
|
290
|
-
minHeight: 0
|
|
291
|
-
},
|
|
292
|
-
'& .MuiTableContainer-root': {
|
|
293
|
-
overflowY: 'auto !important',
|
|
294
|
-
overflowX: 'auto',
|
|
295
|
-
overscrollBehavior: 'contain',
|
|
296
|
-
maxHeight: `${resolvedVirtualTableHeight}px`
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
: undefined)
|
|
300
|
-
}, children: error ? (_jsx(Box, { sx: { p: 2 }, children: typeof error === 'string' ? _jsx(Typography, { color: "error.main", children: error }) : error })) : loading ? (_jsx("div", { children: loadingComponent ?? _jsx(JBGridLoading, { message: "" }) })) : rows.length === 0 ? (_jsx(Box, { sx: {
|
|
301
|
-
width: '100%',
|
|
302
|
-
minHeight: 280,
|
|
303
|
-
display: 'flex',
|
|
304
|
-
alignItems: 'center',
|
|
305
|
-
justifyContent: 'center',
|
|
306
|
-
textAlign: 'center',
|
|
307
|
-
p: 3
|
|
308
|
-
}, children: props.emptyComponent ?? (_jsx(Typography, { variant: "h5", sx: { fontWeight: 600 }, color: "text.secondary", children: "No hay resultados." })) })) : (_jsxs(_Fragment, { children: [showTopPagination ? (_jsxs(Box, { sx: {
|
|
309
|
-
display: 'flex',
|
|
310
|
-
alignItems: 'center',
|
|
311
|
-
justifyContent: 'space-between',
|
|
312
|
-
px: 1,
|
|
313
|
-
...(stickyPagination
|
|
314
|
-
? {
|
|
315
|
-
position: 'sticky',
|
|
316
|
-
top: 0,
|
|
317
|
-
zIndex: 3,
|
|
318
|
-
backgroundColor: 'background.paper',
|
|
319
|
-
borderBottom: '1px solid',
|
|
320
|
-
borderColor: 'divider'
|
|
321
|
-
}
|
|
322
|
-
: undefined)
|
|
323
|
-
}, children: [_jsx(Box, { sx: {
|
|
324
|
-
display: 'flex',
|
|
325
|
-
alignItems: 'center',
|
|
326
|
-
gap: 1,
|
|
327
|
-
minHeight: 40
|
|
328
|
-
}, children: showFetchingIndicator ? (_jsxs(_Fragment, { children: [_jsx(CircularProgress, { size: 16, color: "secondary" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: fetchingLabel })] })) : null }), _jsx(TablePagination, { component: "div", count: totalCount, page: currentPage, onPageChange: (_, nextPage) => handleCurrentPageChange(nextPage), rowsPerPage: pageSize, onRowsPerPageChange: handleRowsPerPageChange, rowsPerPageOptions: pageSizes })] })) : null, _jsxs(Grid, { rows: rows, columns: gridConfig.columns, getRowId: rowIdGetter, children: [_jsx(SortingState, { defaultSorting: defaults.sorting }), showPaging ? (_jsx(PagingState, { currentPage: currentPage, onCurrentPageChange: handleCurrentPageChange, pageSize: pageSize, onPageSizeChange: handlePageSizeChange })) : null, _jsx(GroupingState, { defaultGrouping: defaults.grouping, expandedGroups: expandedGroups, onExpandedGroupsChange: (nextExpandedGroups) => setExpandedGroups(nextExpandedGroups ?? []) }), _jsx(SummaryState, { totalItems: gridConfig.totalSummaryItems, groupItems: gridConfig.groupSummaryItems }), _jsx(FilteringState, { defaultFilters: defaults.filters }), _jsx(SearchState, { value: searchText, onValueChange: onSearchTextChange }), _jsx(SelectionState, { selection: selection, onSelectionChange: handleSelection }), defaults.allowGrouping !== false ? _jsx(IntegratedGrouping, {}) : null, _jsx(IntegratedFiltering, {}), _jsx(IntegratedSorting, {}), _jsx(IntegratedSelection, {}), _jsx(IntegratedSummary, {}), _jsx(DragDropProvider, {}), gridConfig.booleanColumns?.length ? (_jsx(JBBooleanTypeProvider, { for: gridConfig.booleanColumns })) : null, gridConfig.imageColumns?.length ? _jsx(JBImageTypeProvider, { for: gridConfig.imageColumns }) : null, gridConfig.currencyColumns?.length ? (_jsx(JBCurrencyTypeProvider, { for: gridConfig.currencyColumns })) : null, gridConfig.dateColumns?.length ? _jsx(JBDateTypeProvider, { for: gridConfig.dateColumns }) : null, virtualScrolling ? (_jsx(VirtualTable, { columnExtensions: gridConfig.tableColumnExtensions, estimatedRowHeight: defaults.estimatedRowHeight, height: resolvedVirtualTableHeight })) : (_jsx(Table, { columnExtensions: gridConfig.tableColumnExtensions })), defaults.allowColumnReordering ? (_jsx(TableColumnReordering, { order: columnOrder, onOrderChange: (nextOrder) => setColumnOrder(Array.isArray(nextOrder) ? nextOrder : []) })) : null, defaults.allowColumnResizing !== false ? (_jsx(TableColumnResizing, { defaultColumnWidths: gridConfig.columnsWidths })) : null, defaults.allowSelection !== false ? (_jsx(TableSelection, { showSelectAll: defaults.allowSelectAll, showSelectionColumn: defaults.showSelectionColumn, selectByRowClick: true, highlightRow: true })) : null, _jsx(TableHeaderRow, { showSortingControls: defaults.allowSorting !== false }), defaults.allowFiltering ? (_jsx(TableFilterRow, { showFilterSelector: defaults.advancedFiltering })) : null, showBottomPagination ? (_jsx(Box, { sx: stickyPagination
|
|
329
|
-
? {
|
|
330
|
-
position: 'sticky',
|
|
331
|
-
bottom: 0,
|
|
332
|
-
zIndex: 3,
|
|
333
|
-
backgroundColor: 'background.paper',
|
|
334
|
-
borderTop: '1px solid',
|
|
335
|
-
borderColor: 'divider'
|
|
336
|
-
}
|
|
337
|
-
: undefined, children: _jsx(PagingPanel, { pageSizes: pageSizes }) })) : null, defaults.allowGrouping !== false ? (_jsx(TableGroupRow, { showColumnsWhenGrouped: false })) : null, _jsx(Toolbar, {}), defaults.allowGrouping !== false ? _jsx(GroupingPanel, { showSortingControls: true }) : null, _jsx(TableSummaryRow, {}), showPaging ? _jsx(CustomPaging, { totalCount: totalCount }) : null] }), virtualScrolling && infiniteScroll && isLoadingMore ? (_jsx(Box, { sx: { py: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 20 }) })) : null] })) }));
|
|
338
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"JBGridHeader.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAsKpD"}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Button, InputBase, Paper, Typography } from '@mui/material';
|
|
3
|
-
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
|
|
4
|
-
import AddRoundedIcon from '@mui/icons-material/AddRounded';
|
|
5
|
-
export function JBGridHeader(props) {
|
|
6
|
-
const { moduleConfig, iconNameRenderer, animated = true, animationDurationMs = 240, animationStaggerMs = 60, animationPreset = 'vertical', breadcrumb, title, subtitle, icon, searchText, onSearchTextChange, searchPlaceholder, allowCreate = true, createButtonLabel, onCreateClick, rightContent } = props;
|
|
7
|
-
const resolvedTitle = title ?? moduleConfig?.texts?.moduleName ?? '';
|
|
8
|
-
const resolvedSubtitle = subtitle ?? moduleConfig?.texts?.formHeaderSubtitle ?? '';
|
|
9
|
-
const resolvedSearchPlaceholder = searchPlaceholder ?? moduleConfig?.texts?.searchPlaceholder ?? 'Search...';
|
|
10
|
-
const resolvedCreateLabel = createButtonLabel ?? moduleConfig?.texts?.newText ?? 'Create';
|
|
11
|
-
const resolvedIcon = icon ?? (moduleConfig?.texts?.iconName && iconNameRenderer
|
|
12
|
-
? iconNameRenderer(moduleConfig.texts.iconName)
|
|
13
|
-
: null);
|
|
14
|
-
const animateSx = (delayMs) => animated
|
|
15
|
-
? {
|
|
16
|
-
animation: `jbGridHeaderFadeIn ${animationDurationMs}ms ease-out ${delayMs}ms both`
|
|
17
|
-
}
|
|
18
|
-
: undefined;
|
|
19
|
-
const animateFromLeftSx = (delayMs) => animated && animationPreset === 'sides'
|
|
20
|
-
? {
|
|
21
|
-
animation: `jbGridHeaderFadeInLeft ${animationDurationMs}ms ease-out ${delayMs}ms both`
|
|
22
|
-
}
|
|
23
|
-
: animateSx(delayMs);
|
|
24
|
-
const animateFromRightSx = (delayMs) => animated && animationPreset === 'sides'
|
|
25
|
-
? {
|
|
26
|
-
animation: `jbGridHeaderFadeInRight ${animationDurationMs}ms ease-out ${delayMs}ms both`
|
|
27
|
-
}
|
|
28
|
-
: animateSx(delayMs);
|
|
29
|
-
return (_jsxs(Box, { sx: {
|
|
30
|
-
width: '100%',
|
|
31
|
-
display: 'flex',
|
|
32
|
-
flexDirection: 'column',
|
|
33
|
-
gap: 2,
|
|
34
|
-
p: { xs: 2, md: 3 },
|
|
35
|
-
'@keyframes jbGridHeaderFadeIn': {
|
|
36
|
-
from: { opacity: 0, transform: 'translateY(8px)' },
|
|
37
|
-
to: { opacity: 1, transform: 'translateY(0)' }
|
|
38
|
-
},
|
|
39
|
-
'@keyframes jbGridHeaderFadeInLeft': {
|
|
40
|
-
from: { opacity: 0, transform: 'translateX(-14px)' },
|
|
41
|
-
to: { opacity: 1, transform: 'translateX(0)' }
|
|
42
|
-
},
|
|
43
|
-
'@keyframes jbGridHeaderFadeInRight': {
|
|
44
|
-
from: { opacity: 0, transform: 'translateX(14px)' },
|
|
45
|
-
to: { opacity: 1, transform: 'translateX(0)' }
|
|
46
|
-
}
|
|
47
|
-
}, children: [breadcrumb ? _jsx(Box, { sx: animateSx(0), children: breadcrumb }) : null, _jsxs(Box, { sx: {
|
|
48
|
-
display: { xs: 'flex', md: 'grid' },
|
|
49
|
-
flexDirection: { xs: 'column', md: 'row' },
|
|
50
|
-
gridTemplateColumns: { md: 'minmax(0, 1fr) auto' },
|
|
51
|
-
alignItems: { xs: 'center', md: 'center' },
|
|
52
|
-
gap: 2,
|
|
53
|
-
width: '100%'
|
|
54
|
-
}, children: [_jsxs(Box, { sx: {
|
|
55
|
-
display: 'flex',
|
|
56
|
-
alignItems: 'center',
|
|
57
|
-
justifyContent: { xs: 'center', md: 'flex-start' },
|
|
58
|
-
gap: 1,
|
|
59
|
-
minWidth: 0,
|
|
60
|
-
width: '100%',
|
|
61
|
-
...animateFromLeftSx(animationStaggerMs)
|
|
62
|
-
}, children: [resolvedIcon ? _jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center' }, children: resolvedIcon }) : null, _jsxs(Box, { sx: { minWidth: 0, textAlign: { xs: 'center', md: 'left' } }, children: [_jsx(Typography, { variant: "h4", sx: { fontWeight: 700, lineHeight: 1.15 }, children: resolvedTitle }), resolvedSubtitle ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: resolvedSubtitle })) : null] })] }), _jsxs(Box, { sx: {
|
|
63
|
-
width: { xs: '100%', md: 'auto' },
|
|
64
|
-
display: 'flex',
|
|
65
|
-
alignItems: { xs: 'center', md: 'center' },
|
|
66
|
-
justifySelf: { md: 'end' },
|
|
67
|
-
justifyContent: { xs: 'center', md: 'flex-end' },
|
|
68
|
-
flexWrap: 'wrap',
|
|
69
|
-
gap: 1,
|
|
70
|
-
minWidth: 0,
|
|
71
|
-
...animateFromRightSx(animationStaggerMs * 2)
|
|
72
|
-
}, children: [_jsxs(Paper, { sx: {
|
|
73
|
-
px: 1.5,
|
|
74
|
-
py: 0.5,
|
|
75
|
-
width: { xs: '100%', md: 320 },
|
|
76
|
-
display: 'flex',
|
|
77
|
-
alignItems: 'center',
|
|
78
|
-
gap: 1,
|
|
79
|
-
borderRadius: 1.5
|
|
80
|
-
}, children: [_jsx(SearchRoundedIcon, { sx: { color: 'text.secondary', fontSize: 20 } }), _jsx(InputBase, { fullWidth: true, placeholder: resolvedSearchPlaceholder, value: searchText, onChange: (event) => onSearchTextChange(event.target.value) })] }), rightContent, allowCreate && onCreateClick ? (_jsx(Button, { variant: "contained", startIcon: _jsx(AddRoundedIcon, { fontSize: "small" }), sx: (theme) => ({
|
|
81
|
-
borderRadius: 1.5,
|
|
82
|
-
minHeight: 42,
|
|
83
|
-
px: 2.25,
|
|
84
|
-
fontWeight: 700,
|
|
85
|
-
boxShadow: 'none',
|
|
86
|
-
backgroundImage: 'none',
|
|
87
|
-
'&:hover': {
|
|
88
|
-
boxShadow: 'none',
|
|
89
|
-
backgroundImage: 'none',
|
|
90
|
-
backgroundColor: theme.palette.primary.dark
|
|
91
|
-
}
|
|
92
|
-
}), onClick: onCreateClick, children: resolvedCreateLabel })) : null] })] })] }));
|
|
93
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
type JBGridLoadingProps = {
|
|
2
|
-
minHeight?: number;
|
|
3
|
-
size?: number;
|
|
4
|
-
message?: string;
|
|
5
|
-
color?: 'primary' | 'secondary' | 'inherit';
|
|
6
|
-
};
|
|
7
|
-
export declare function JBGridLoading(props: JBGridLoadingProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
-
export {};
|
|
9
|
-
//# sourceMappingURL=JBGridLoading.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"JBGridLoading.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridLoading.tsx"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA2BtD"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box, CircularProgress, Typography } from '@mui/material';
|
|
3
|
-
export function JBGridLoading(props) {
|
|
4
|
-
const { minHeight = 320, size = 40, message, color = 'primary' } = props;
|
|
5
|
-
return (_jsxs(Box, { sx: {
|
|
6
|
-
width: '100%',
|
|
7
|
-
minHeight,
|
|
8
|
-
display: 'flex',
|
|
9
|
-
flexDirection: 'column',
|
|
10
|
-
alignItems: 'center',
|
|
11
|
-
justifyContent: 'center',
|
|
12
|
-
gap: 1.25
|
|
13
|
-
}, children: [_jsx(CircularProgress, { size: size, color: color }), message ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: message })) : null] }));
|
|
14
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export declare const JBBooleanTypeProvider: (props: {
|
|
2
|
-
for: string[];
|
|
3
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export declare const JBCurrencyTypeProvider: (props: {
|
|
5
|
-
for: string[];
|
|
6
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export declare const JBDateTypeProvider: (props: {
|
|
8
|
-
for: string[];
|
|
9
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export declare const JBImageTypeProvider: (props: {
|
|
11
|
-
for: string[];
|
|
12
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
//# sourceMappingURL=JBGridProviders.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"JBGridProviders.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridProviders.tsx"],"names":[],"mappings":"AA2FA,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK7D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK9D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK1D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK3D,CAAC"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { DataTypeProvider } from '@devexpress/dx-react-grid';
|
|
3
|
-
import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
|
|
4
|
-
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
|
|
5
|
-
import { Avatar, Box, Chip } from '@mui/material';
|
|
6
|
-
const formatCurrency = (value, currency = 'USD') => {
|
|
7
|
-
const amount = typeof value === 'number' ? value : Number(value ?? 0);
|
|
8
|
-
if (Number.isNaN(amount))
|
|
9
|
-
return '';
|
|
10
|
-
return new Intl.NumberFormat('en-US', {
|
|
11
|
-
style: 'currency',
|
|
12
|
-
currency
|
|
13
|
-
}).format(amount);
|
|
14
|
-
};
|
|
15
|
-
const formatDate = (value) => {
|
|
16
|
-
if (!value)
|
|
17
|
-
return '';
|
|
18
|
-
const date = value instanceof Date ? value : new Date(String(value));
|
|
19
|
-
if (Number.isNaN(date.getTime()))
|
|
20
|
-
return String(value);
|
|
21
|
-
return new Intl.DateTimeFormat('es-MX', {
|
|
22
|
-
year: 'numeric',
|
|
23
|
-
month: '2-digit',
|
|
24
|
-
day: '2-digit'
|
|
25
|
-
}).format(date);
|
|
26
|
-
};
|
|
27
|
-
const BooleanFormatter = ({ value }) => {
|
|
28
|
-
const normalized = String(value ?? '').trim().toLowerCase();
|
|
29
|
-
const isTrue = value === true ||
|
|
30
|
-
value === 1 ||
|
|
31
|
-
value === '1' ||
|
|
32
|
-
normalized === 'true';
|
|
33
|
-
return (_jsx(Chip, { size: "small", variant: "outlined", color: isTrue ? 'success' : 'error', icon: isTrue ? _jsx(CheckCircleRoundedIcon, { fontSize: "small" }) : _jsx(CancelRoundedIcon, { fontSize: "small" }), label: isTrue ? 'Sí' : 'No' }));
|
|
34
|
-
};
|
|
35
|
-
const CurrencyFormatter = ({ value, column }) => {
|
|
36
|
-
const currency = column?.currency ?? 'USD';
|
|
37
|
-
return _jsx("span", { children: formatCurrency(value, currency) });
|
|
38
|
-
};
|
|
39
|
-
const DateFormatter = ({ value }) => {
|
|
40
|
-
return _jsx("span", { children: formatDate(value) });
|
|
41
|
-
};
|
|
42
|
-
const ImageFormatter = ({ value, column }) => {
|
|
43
|
-
const src = typeof value === 'string' ? value : '';
|
|
44
|
-
const type = column?.type ?? 'square';
|
|
45
|
-
const className = column?.className ?? 'h-16 w-16';
|
|
46
|
-
if (type === 'rounded') {
|
|
47
|
-
return (_jsx(Avatar, { className: className, alt: "image", src: src }));
|
|
48
|
-
}
|
|
49
|
-
return (_jsx(Box, { className: className, children: src ? (_jsx("img", { className: "h-full w-full object-cover rounded", alt: "image", src: src })) : null }));
|
|
50
|
-
};
|
|
51
|
-
export const JBBooleanTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: BooleanFormatter, ...props }));
|
|
52
|
-
export const JBCurrencyTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: CurrencyFormatter, ...props }));
|
|
53
|
-
export const JBDateTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: DateFormatter, ...props }));
|
|
54
|
-
export const JBImageTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: ImageFormatter, ...props }));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"JBGridSkeleton.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridSkeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA0BxD"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Skeleton } from '@mui/material';
|
|
3
|
-
export function JBGridSkeleton(props) {
|
|
4
|
-
const { rows = 8, showToolbar = true } = props;
|
|
5
|
-
return (_jsxs(Box, { sx: { width: '100%', p: 1.5 }, children: [showToolbar ? (_jsxs(Box, { sx: { mb: 1.5, display: 'flex', justifyContent: 'space-between', gap: 1.5 }, children: [_jsx(Skeleton, { variant: "rounded", width: 240, height: 36 }), _jsx(Skeleton, { variant: "rounded", width: 160, height: 36 })] })) : null, _jsx(Skeleton, { variant: "rounded", width: "100%", height: 44 }), _jsx(Box, { sx: { mt: 1, display: 'grid', gap: 1 }, children: Array.from({ length: rows }).map((_, index) => (_jsx(Skeleton, { variant: "rounded", width: "100%", height: 40 }, index))) })] }));
|
|
6
|
-
}
|