lkd-web-kit 0.7.10 → 0.7.12

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.
Files changed (10) hide show
  1. package/dist/components/InfinityLoadMoreButton/index.cjs +36 -0
  2. package/dist/components/InfinityLoadMoreButton/index.js +34 -0
  3. package/dist/components/InfinityLoader/index.cjs +21 -4
  4. package/dist/components/InfinityLoader/index.js +21 -4
  5. package/dist/components/SelectInfinity/index.cjs +7 -10
  6. package/dist/components/SelectInfinity/index.js +8 -11
  7. package/dist/index.cjs +28 -28
  8. package/dist/index.d.ts +13 -1
  9. package/dist/index.js +1 -1
  10. package/package.json +1 -1
package/dist/components/InfinityLoadMoreButton/index.cjs ADDED
@@ -0,0 +1,36 @@
1
+ 'use strict';
2
+
3
+ const require$$2 = require('react/jsx-runtime');
4
+ const core = require('@mantine/core');
5
+ const hooks = require('@mantine/hooks');
6
+ const React = require('react');
7
+
8
+ const InfinityLoadMoreButton = ({
9
+ infinity,
10
+ labels,
11
+ ...props
12
+ }) => {
13
+ const { inViewport, ref } = hooks.useInViewport();
14
+ const {
15
+ loadMore = "Cargar más",
16
+ loading = "Cargando...",
17
+ end = "Fin de la lista"
18
+ } = labels || {};
19
+ const { hasNextPage, isFetchingNextPage, fetchNextPage } = infinity;
20
+ React.useEffect(() => {
21
+ if (inViewport && hasNextPage && !isFetchingNextPage) fetchNextPage();
22
+ }, [inViewport, hasNextPage, isFetchingNextPage, fetchNextPage]);
23
+ return /* @__PURE__ */ require$$2.jsx(
24
+ core.Button,
25
+ {
26
+ ref,
27
+ onClick: () => fetchNextPage(),
28
+ disabled: !hasNextPage || isFetchingNextPage,
29
+ variant: "subtle",
30
+ ...props,
31
+ children: isFetchingNextPage ? loading : hasNextPage ? loadMore : end
32
+ }
33
+ );
34
+ };
35
+
36
+ module.exports = InfinityLoadMoreButton;
package/dist/components/InfinityLoadMoreButton/index.js ADDED
@@ -0,0 +1,34 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { Button } from '@mantine/core';
3
+ import { useInViewport } from '@mantine/hooks';
4
+ import { useEffect } from 'react';
5
+
6
+ const InfinityLoadMoreButton = ({
7
+ infinity,
8
+ labels,
9
+ ...props
10
+ }) => {
11
+ const { inViewport, ref } = useInViewport();
12
+ const {
13
+ loadMore = "Cargar más",
14
+ loading = "Cargando...",
15
+ end = "Fin de la lista"
16
+ } = labels || {};
17
+ const { hasNextPage, isFetchingNextPage, fetchNextPage } = infinity;
18
+ useEffect(() => {
19
+ if (inViewport && hasNextPage && !isFetchingNextPage) fetchNextPage();
20
+ }, [inViewport, hasNextPage, isFetchingNextPage, fetchNextPage]);
21
+ return /* @__PURE__ */ jsx(
22
+ Button,
23
+ {
24
+ ref,
25
+ onClick: () => fetchNextPage(),
26
+ disabled: !hasNextPage || isFetchingNextPage,
27
+ variant: "subtle",
28
+ ...props,
29
+ children: isFetchingNextPage ? loading : hasNextPage ? loadMore : end
30
+ }
31
+ );
32
+ };
33
+
34
+ export { InfinityLoadMoreButton as default };
package/dist/components/InfinityLoader/index.cjs CHANGED
@@ -20,14 +20,31 @@ const InfinityLoader = ({
20
20
  rootMargin
21
21
  });
22
22
  React.useEffect(() => {
23
- if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
24
- }, [entry?.isIntersecting]);
23
+ if (!entry?.isIntersecting) return;
24
+ if (!infinity.hasNextPage) return;
25
+ if (infinity.isFetchingNextPage || infinity.isFetching) return;
26
+ infinity.fetchNextPage();
27
+ }, [
28
+ entry?.isIntersecting,
29
+ infinity.hasNextPage,
30
+ infinity.isFetchingNextPage,
31
+ infinity.isFetching
32
+ ]);
25
33
  React.useEffect(() => {
26
34
  if (!entry?.isIntersecting) return;
27
35
  const el = root?.current ?? document.documentElement;
28
36
  const hasScroll = el?.scrollHeight > el?.clientHeight;
29
- if (!hasScroll) infinity.fetchNextPage();
30
- }, [entry?.isIntersecting, infinity.data?.pages.length]);
37
+ if (hasScroll) return;
38
+ if (!infinity.hasNextPage) return;
39
+ if (infinity.isFetchingNextPage || infinity.isFetching) return;
40
+ infinity.fetchNextPage();
41
+ }, [
42
+ entry?.isIntersecting,
43
+ infinity.data?.pages.length,
44
+ infinity.hasNextPage,
45
+ infinity.isFetchingNextPage,
46
+ infinity.isFetching
47
+ ]);
31
48
  const showLoader = infinity.isLoading || infinity.isFetchingNextPage;
32
49
  const showEndMessage = infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage;
33
50
  if (!showLoader && !showEndMessage) {
package/dist/components/InfinityLoader/index.js CHANGED
@@ -16,14 +16,31 @@ const InfinityLoader = ({
16
16
  rootMargin
17
17
  });
18
18
  useEffect(() => {
19
- if (entry?.isIntersecting && infinity.hasNextPage) infinity.fetchNextPage();
20
- }, [entry?.isIntersecting]);
19
+ if (!entry?.isIntersecting) return;
20
+ if (!infinity.hasNextPage) return;
21
+ if (infinity.isFetchingNextPage || infinity.isFetching) return;
22
+ infinity.fetchNextPage();
23
+ }, [
24
+ entry?.isIntersecting,
25
+ infinity.hasNextPage,
26
+ infinity.isFetchingNextPage,
27
+ infinity.isFetching
28
+ ]);
21
29
  useEffect(() => {
22
30
  if (!entry?.isIntersecting) return;
23
31
  const el = root?.current ?? document.documentElement;
24
32
  const hasScroll = el?.scrollHeight > el?.clientHeight;
25
- if (!hasScroll) infinity.fetchNextPage();
26
- }, [entry?.isIntersecting, infinity.data?.pages.length]);
33
+ if (hasScroll) return;
34
+ if (!infinity.hasNextPage) return;
35
+ if (infinity.isFetchingNextPage || infinity.isFetching) return;
36
+ infinity.fetchNextPage();
37
+ }, [
38
+ entry?.isIntersecting,
39
+ infinity.data?.pages.length,
40
+ infinity.hasNextPage,
41
+ infinity.isFetchingNextPage,
42
+ infinity.isFetching
43
+ ]);
27
44
  const showLoader = infinity.isLoading || infinity.isFetchingNextPage;
28
45
  const showEndMessage = infinity.data && infinity.data.pages.length > 1 && !infinity.hasNextPage;
29
46
  if (!showLoader && !showEndMessage) {
package/dist/components/SelectInfinity/index.cjs CHANGED
@@ -9,7 +9,7 @@ const core = require('@mantine/core');
9
9
  const hooks = require('@mantine/hooks');
10
10
  const index = require('../../node_modules/@tanstack/react-virtual/dist/esm/index.cjs');
11
11
  const virtualStyles = require('../../utils/virtual-styles.cjs');
12
- const index$1 = require('../InfinityLoader/index.cjs');
12
+ const index$1 = require('../InfinityLoadMoreButton/index.cjs');
13
13
 
14
14
  function InfinitySelect({
15
15
  value,
@@ -29,6 +29,7 @@ function InfinitySelect({
29
29
  comboboxProps,
30
30
  searchable = true,
31
31
  defaultSelectedOption = null,
32
+ loadMoreButtonProps,
32
33
  ...props
33
34
  }) {
34
35
  const combobox = core.useCombobox();
@@ -147,18 +148,14 @@ function InfinitySelect({
147
148
  renderOption ? renderOption({ option }) : getOptionLabel(option)
148
149
  );
149
150
  }) }) : !infinity.isFetching ? /* @__PURE__ */ require$$2.jsx(core.Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
150
- /* @__PURE__ */ require$$2.jsx(
151
- index$1.InfinityLoader,
151
+ /* @__PURE__ */ require$$2.jsx(core.Center, { children: /* @__PURE__ */ require$$2.jsx(
152
+ index$1,
152
153
  {
153
- root: scrollRef,
154
154
  infinity,
155
- loaderProps: {
156
- mt: 4,
157
- mb: 8,
158
- size: "sm"
159
- }
155
+ size: "compact-sm",
156
+ ...loadMoreButtonProps
160
157
  }
161
- )
158
+ ) })
162
159
  ]
163
160
  }
164
161
  ) })
package/dist/components/SelectInfinity/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  'use client';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { useEffect, useRef, createElement } from 'react';
4
- import { useCombobox, Combobox, InputBase, Input } from '@mantine/core';
4
+ import { useCombobox, Combobox, InputBase, Input, Center } from '@mantine/core';
5
5
  import { useUncontrolled } from '@mantine/hooks';
6
6
  import { useVirtualizer } from '../../node_modules/@tanstack/react-virtual/dist/esm/index.js';
7
7
  import { getVirtualContainerProps, getVirtualItemProps } from '../../utils/virtual-styles.js';
8
- import { InfinityLoader } from '../InfinityLoader/index.js';
8
+ import InfinityLoadMoreButton from '../InfinityLoadMoreButton/index.js';
9
9
 
10
10
  function InfinitySelect({
11
11
  value,
@@ -25,6 +25,7 @@ function InfinitySelect({
25
25
  comboboxProps,
26
26
  searchable = true,
27
27
  defaultSelectedOption = null,
28
+ loadMoreButtonProps,
28
29
  ...props
29
30
  }) {
30
31
  const combobox = useCombobox();
@@ -143,18 +144,14 @@ function InfinitySelect({
143
144
  renderOption ? renderOption({ option }) : getOptionLabel(option)
144
145
  );
145
146
  }) }) : !infinity.isFetching ? /* @__PURE__ */ jsx(Combobox.Empty, { mih: 24, children: nothingFoundMessage ? typeof nothingFoundMessage === "function" ? nothingFoundMessage({ combobox }) : nothingFoundMessage : "No hay resultados" }) : null,
146
- /* @__PURE__ */ jsx(
147
- InfinityLoader,
147
+ /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(
148
+ InfinityLoadMoreButton,
148
149
  {
149
- root: scrollRef,
150
150
  infinity,
151
- loaderProps: {
152
- mt: 4,
153
- mb: 8,
154
- size: "sm"
155
- }
151
+ size: "compact-sm",
152
+ ...loadMoreButtonProps
156
153
  }
157
- )
154
+ ) })
158
155
  ]
159
156
  }
160
157
  ) })
package/dist/index.cjs CHANGED
@@ -6,20 +6,20 @@ const index = require('./components/EmptyState/index.cjs');
6
6
  const index$1 = require('./components/InfinityLoader/index.cjs');
7
7
  const NavItems = require('./components/NavItems.cjs');
8
8
  const Icon = require('./components/Icon.cjs');
9
- const index$2 = require('./components/MyRadioGroup/index.cjs');
10
- const index$3 = require('./components/MyDatePickerInput/index.cjs');
11
- const index$4 = require('./components/MyDateTimePicker/index.cjs');
12
- const index$5 = require('./components/MyNotifications/index.cjs');
13
- const index$6 = require('./components/MyNumberInput/index.cjs');
14
- const index$7 = require('./components/MySelect/index.cjs');
15
- const index$8 = require('./components/MyTextarea/index.cjs');
16
- const index$9 = require('./components/MyTextInput/index.cjs');
17
- const index$a = require('./components/MyTimeInput/index.cjs');
18
- const index$b = require('./components/SelectInfinity/index.cjs');
19
- const index$c = require('./components/MyMultiSelect/index.cjs');
20
- const index$d = require('./components/MyMonthPickerInput/index.cjs');
21
- const index$e = require('./components/MyDateInput/index.cjs');
22
- const index$f = require('./components/MyCheckboxGroup/index.cjs');
9
+ const index$2 = require('./components/MyDatePickerInput/index.cjs');
10
+ const index$3 = require('./components/MyDateTimePicker/index.cjs');
11
+ const index$4 = require('./components/MyNotifications/index.cjs');
12
+ const index$5 = require('./components/MyNumberInput/index.cjs');
13
+ const index$6 = require('./components/MySelect/index.cjs');
14
+ const index$7 = require('./components/MyTextarea/index.cjs');
15
+ const index$8 = require('./components/MyTextInput/index.cjs');
16
+ const index$9 = require('./components/MyTimeInput/index.cjs');
17
+ const index$a = require('./components/SelectInfinity/index.cjs');
18
+ const index$b = require('./components/MyMultiSelect/index.cjs');
19
+ const index$c = require('./components/MyMonthPickerInput/index.cjs');
20
+ const index$d = require('./components/MyDateInput/index.cjs');
21
+ const index$e = require('./components/MyCheckboxGroup/index.cjs');
22
+ const index$f = require('./components/MyRadioGroup/index.cjs');
23
23
  const httpStatus = require('./consts/http-status.cjs');
24
24
  const revalidate = require('./consts/revalidate.cjs');
25
25
  const index$g = require('./contexts/NavigationHistoryContext/index.cjs');
@@ -70,20 +70,20 @@ exports.EmptyState = index.EmptyState;
70
70
  exports.InfinityLoader = index$1.InfinityLoader;
71
71
  exports.NavItems = NavItems.NavItems;
72
72
  exports.Icon = Icon.Icon;
73
- exports.MyRadioGroup = index$2.MyRadioGroup;
74
- exports.MyDatePickerInput = index$3.MyDatePickerInput;
75
- exports.MyDateTimePicker = index$4.MyDateTimePicker;
76
- exports.MyNotifications = index$5.MyNotifications;
77
- exports.MyNumberInput = index$6.MyNumberInput;
78
- exports.MySelect = index$7.MySelect;
79
- exports.MyTextarea = index$8.MyTextarea;
80
- exports.MyTextInput = index$9.MyTextInput;
81
- exports.MyTimeInput = index$a.MyTimeInput;
82
- exports.InfinitySelect = index$b.InfinitySelect;
83
- exports.MyMultiSelect = index$c.MyMultiSelect;
84
- exports.MyMonthPickerInput = index$d.MyMonthPickerInput;
85
- exports.MyDateInput = index$e.MyDateInput;
86
- exports.MyCheckboxGroup = index$f.MyCheckboxGroup;
73
+ exports.MyDatePickerInput = index$2.MyDatePickerInput;
74
+ exports.MyDateTimePicker = index$3.MyDateTimePicker;
75
+ exports.MyNotifications = index$4.MyNotifications;
76
+ exports.MyNumberInput = index$5.MyNumberInput;
77
+ exports.MySelect = index$6.MySelect;
78
+ exports.MyTextarea = index$7.MyTextarea;
79
+ exports.MyTextInput = index$8.MyTextInput;
80
+ exports.MyTimeInput = index$9.MyTimeInput;
81
+ exports.InfinitySelect = index$a.InfinitySelect;
82
+ exports.MyMultiSelect = index$b.MyMultiSelect;
83
+ exports.MyMonthPickerInput = index$c.MyMonthPickerInput;
84
+ exports.MyDateInput = index$d.MyDateInput;
85
+ exports.MyCheckboxGroup = index$e.MyCheckboxGroup;
86
+ exports.MyRadioGroup = index$f.MyRadioGroup;
87
87
  exports.HttpStatus = httpStatus.HttpStatus;
88
88
  exports.Revalidate = revalidate.Revalidate;
89
89
  exports.NavigationHistoryProvider = index$g.NavigationHistoryProvider;
package/dist/index.d.ts CHANGED
@@ -334,7 +334,18 @@ export declare interface InfinityLoaderProps extends CenterProps {
334
334
  loaderProps?: LoaderProps;
335
335
  }
336
336
 
337
- export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, defaultSelectedOption, ...props }: InfinitySelectProps<T>): JSX.Element;
337
+ export declare interface InfinityLoadMoreButtonProps<T> extends ButtonProps {
338
+ infinity: InfiniteQueryHookResult<InfiniteData<{
339
+ data: T[];
340
+ }, number>, Error>;
341
+ labels?: {
342
+ loadMore?: string;
343
+ loading?: string;
344
+ end?: string;
345
+ };
346
+ }
347
+
348
+ export declare function InfinitySelect<T = unknown>({ value, searchValue, defaultSearchValue, nothingFoundMessage, infinity, defaultValue, onChange, onSearchChange, renderOption, onOptionSubmit, getOptionLabel, getOptionValue, onSelectedOptionChange, selectedOption, comboboxProps, searchable, defaultSelectedOption, loadMoreButtonProps, ...props }: InfinitySelectProps<T>): JSX.Element;
338
349
 
339
350
  export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps, ElementProps<'input', keyof InputBaseProps | 'value' | 'onChange'> {
340
351
  value?: string | null;
@@ -361,6 +372,7 @@ export declare interface InfinitySelectProps<T = unknown> extends InputBaseProps
361
372
  comboboxProps?: ComboboxProps;
362
373
  searchable?: boolean;
363
374
  ref?: React.Ref<HTMLInputElement>;
375
+ loadMoreButtonProps?: Partial<InfinityLoadMoreButtonProps<T>>;
364
376
  }
365
377
 
366
378
  export declare const isInfinityEmpty: (data: InfiniteData<{
package/dist/index.js CHANGED
@@ -2,7 +2,6 @@ export { EmptyState } from './components/EmptyState/index.js';
2
2
  export { InfinityLoader } from './components/InfinityLoader/index.js';
3
3
  export { NavItems } from './components/NavItems.js';
4
4
  export { Icon } from './components/Icon.js';
5
- export { MyRadioGroup } from './components/MyRadioGroup/index.js';
6
5
  export { MyDatePickerInput } from './components/MyDatePickerInput/index.js';
7
6
  export { MyDateTimePicker } from './components/MyDateTimePicker/index.js';
8
7
  export { MyNotifications } from './components/MyNotifications/index.js';
@@ -16,6 +15,7 @@ export { MyMultiSelect } from './components/MyMultiSelect/index.js';
16
15
  export { MyMonthPickerInput } from './components/MyMonthPickerInput/index.js';
17
16
  export { MyDateInput } from './components/MyDateInput/index.js';
18
17
  export { MyCheckboxGroup } from './components/MyCheckboxGroup/index.js';
18
+ export { MyRadioGroup } from './components/MyRadioGroup/index.js';
19
19
  export { HttpStatus } from './consts/http-status.js';
20
20
  export { Revalidate } from './consts/revalidate.js';
21
21
  export { NavigationHistoryProvider } from './contexts/NavigationHistoryContext/index.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lkd-web-kit",
3
- "version": "0.7.10",
3
+ "version": "0.7.12",
4
4
  "description": "A template for creating React component libraries with Vite.",
5
5
  "author": "LKD",
6
6
  "license": "MIT",