lkd-web-kit 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +10 -4
- package/dist/src/components/SelectInfinity/index.cjs +1 -1
- package/dist/src/components/SelectInfinity/index.cjs.map +1 -1
- package/dist/src/components/SelectInfinity/index.mjs +11 -11
- package/dist/src/components/SelectInfinity/index.mjs.map +1 -1
- package/dist/src/hooks/useFetchNextPageOnScroll.cjs +1 -1
- package/dist/src/hooks/useFetchNextPageOnScroll.cjs.map +1 -1
- package/dist/src/hooks/useFetchNextPageOnScroll.mjs +14 -10
- package/dist/src/hooks/useFetchNextPageOnScroll.mjs.map +1 -1
- package/dist/src/hooks/useOnScrollProgress.cjs +1 -1
- package/dist/src/hooks/useOnScrollProgress.cjs.map +1 -1
- package/dist/src/hooks/useOnScrollProgress.mjs +10 -10
- package/dist/src/hooks/useOnScrollProgress.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -86,6 +86,14 @@ export declare interface EmptyProps extends ComponentProps<'div'> {
|
|
|
86
86
|
|
|
87
87
|
export declare const EmptyState: ({ label, action, icon, className, size, ...props }: EmptyProps) => JSX.Element;
|
|
88
88
|
|
|
89
|
+
export declare type FetchNextPageOnScrollOptions = {
|
|
90
|
+
infinity: InfiniteQueryHookResult<InfiniteData<{
|
|
91
|
+
data: unknown[];
|
|
92
|
+
}, number>, Error>;
|
|
93
|
+
scrollRef?: RefObject<HTMLElement | null>;
|
|
94
|
+
disabled?: boolean;
|
|
95
|
+
};
|
|
96
|
+
|
|
89
97
|
export declare const Form: <T extends FieldValues, TContext = any, TT extends T = T>({ methods, onSubmit, onSubmitError, ...rest }: FormProps<T, TContext, TT>) => JSX.Element;
|
|
90
98
|
|
|
91
99
|
export declare function formatBytes(bytes: number, decimals?: number): string;
|
|
@@ -462,9 +470,7 @@ export declare type TSearchParams = {
|
|
|
462
470
|
|
|
463
471
|
export declare const useBreakpoint: (breakpoint: keyof typeof breakpointsWithPx) => boolean;
|
|
464
472
|
|
|
465
|
-
export declare const useFetchNextPageOnScroll: (infinity:
|
|
466
|
-
data: unknown[];
|
|
467
|
-
}, number>, Error>, elementRef?: RefObject<HTMLElement | null>) => void;
|
|
473
|
+
export declare const useFetchNextPageOnScroll: ({ infinity, scrollRef: scrollRef, disabled, }: FetchNextPageOnScrollOptions) => void;
|
|
468
474
|
|
|
469
475
|
/**
|
|
470
476
|
* Hook para usar el historial de navegación
|
|
@@ -472,7 +478,7 @@ export declare const useFetchNextPageOnScroll: (infinity: InfiniteQueryHookResul
|
|
|
472
478
|
*/
|
|
473
479
|
export declare function useNavigationHistory(): NavigationHistoryHook;
|
|
474
480
|
|
|
475
|
-
export declare const useOnScrollProgress: (triggerPercentage: number, callback: () => void,
|
|
481
|
+
export declare const useOnScrollProgress: (triggerPercentage: number, callback: () => void, scrollRef?: RefObject<HTMLElement | null>) => void;
|
|
476
482
|
|
|
477
483
|
export declare const usePageData: <T>() => T;
|
|
478
484
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@mantine/core"),g=require("react"),C=require("../../hooks/useFetchNextPageOnScroll.cjs"),S=require("../InfinityLoader/index.cjs");function f({value:a,onChange:b,data:r=[],searchValue:x,onSearchChange:l,renderOption:c,onOptionSubmit:p,nothingFoundMessage:d,infinity:s,placeholder:m,...h}){const n=o.useCombobox({onDropdownClose:()=>{n.resetSelectedOption(),n.focusTarget(),l?.("")},onDropdownOpen:()=>{n.focusSearchInput()}}),i=r.map(t=>e.jsx(o.Combobox.Option,{value:t.value,children:c?c({option:t}):t.label},t.value)),j=r.find(t=>t.value===a),u=g.useRef(null);return C.useFetchNextPageOnScroll(s,u),e.jsxs(o.Combobox,{store:n,middlewares:{shift:{crossAxis:!0}},onOptionSubmit:t=>{b?.(t),p?.(t),n.closeDropdown()},children:[e.jsx(o.Combobox.Target,{children:e.jsx(o.InputBase,{component:"button",type:"button",pointer:!0,rightSection:e.jsx(o.Combobox.Chevron,{}),onClick:()=>n.toggleDropdown(),rightSectionPointerEvents:"none",...h,children:j?.label||e.jsx(o.Input.Placeholder,{children:m})})}),e.jsxs(o.Combobox.Dropdown,{children:[e.jsx(o.Combobox.Search,{value:x,onChange:t=>l?.(t.currentTarget.value),placeholder:"Escribe para buscar"}),e.jsx(o.Combobox.Options,{children:e.jsxs(o.ScrollArea.Autosize,{mah:200,type:"scroll",viewportRef:u,children:[i.length>0?i:s.isFetching?null:e.jsx(o.Combobox.Empty,{onClick:()=>n.closeDropdown(),className:"min-h-6",children:d??"Sin resultados"}),e.jsx(S.InfinityLoader,{className:"text-sm",infinity:s,loaderProps:{size:"sm",className:"mt-1 mb-2"}})]})})]})]})}exports.SelectInfinity=f;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@mantine/core"),g=require("react"),C=require("../../hooks/useFetchNextPageOnScroll.cjs"),S=require("../InfinityLoader/index.cjs");function f({value:a,onChange:b,data:r=[],searchValue:x,onSearchChange:l,renderOption:c,onOptionSubmit:p,nothingFoundMessage:d,infinity:s,placeholder:m,...h}){const n=o.useCombobox({onDropdownClose:()=>{n.resetSelectedOption(),n.focusTarget(),l?.("")},onDropdownOpen:()=>{n.focusSearchInput()}}),i=r.map(t=>e.jsx(o.Combobox.Option,{value:t.value,children:c?c({option:t}):t.label},t.value)),j=r.find(t=>t.value===a),u=g.useRef(null);return C.useFetchNextPageOnScroll({infinity:s,scrollRef:u}),e.jsxs(o.Combobox,{store:n,middlewares:{shift:{crossAxis:!0}},onOptionSubmit:t=>{b?.(t),p?.(t),n.closeDropdown()},children:[e.jsx(o.Combobox.Target,{children:e.jsx(o.InputBase,{component:"button",type:"button",pointer:!0,rightSection:e.jsx(o.Combobox.Chevron,{}),onClick:()=>n.toggleDropdown(),rightSectionPointerEvents:"none",...h,children:j?.label||e.jsx(o.Input.Placeholder,{children:m})})}),e.jsxs(o.Combobox.Dropdown,{children:[e.jsx(o.Combobox.Search,{value:x,onChange:t=>l?.(t.currentTarget.value),placeholder:"Escribe para buscar"}),e.jsx(o.Combobox.Options,{children:e.jsxs(o.ScrollArea.Autosize,{mah:200,type:"scroll",viewportRef:u,children:[i.length>0?i:s.isFetching?null:e.jsx(o.Combobox.Empty,{onClick:()=>n.closeDropdown(),className:"min-h-6",children:d??"Sin resultados"}),e.jsx(S.InfinityLoader,{className:"text-sm",infinity:s,loaderProps:{size:"sm",className:"mt-1 mb-2"}})]})})]})]})}exports.SelectInfinity=f;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/SelectInfinity/index.tsx"],"sourcesContent":["'use client';\r\nimport {\r\n Combobox,\r\n ComboboxItem,\r\n ElementProps,\r\n Input,\r\n InputBase,\r\n InputBaseProps,\r\n ScrollArea,\r\n useCombobox,\r\n} from '@mantine/core';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { ReactNode, useRef } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useFetchNextPageOnScroll } from '../../hooks/useFetchNextPageOnScroll';\r\nimport { InfinityLoader } from '../InfinityLoader';\r\n\r\nexport interface SelectInfinityProps\r\n extends InputBaseProps,\r\n ElementProps<'button', keyof InputBaseProps | 'value' | 'onChange'> {\r\n value?: string | null;\r\n onChange?: (value: string | null) => void;\r\n data?: ComboboxItem[];\r\n searchValue?: string;\r\n onSearchChange?: (value: string) => void;\r\n renderOption?: (args: { option: ComboboxItem }) => React.ReactNode;\r\n onOptionSubmit?: (value: string) => void;\r\n nothingFoundMessage?: ReactNode;\r\n infinity: InfiniteQueryHookResult<InfiniteData<{ data: unknown[] }, number>, Error>;\r\n placeholder?: string;\r\n}\r\n\r\nexport function SelectInfinity({\r\n value,\r\n onChange,\r\n data = [],\r\n searchValue,\r\n onSearchChange,\r\n renderOption,\r\n onOptionSubmit,\r\n nothingFoundMessage,\r\n infinity,\r\n placeholder,\r\n ...props\r\n}: SelectInfinityProps) {\r\n const combobox = useCombobox({\r\n onDropdownClose: () => {\r\n combobox.resetSelectedOption();\r\n combobox.focusTarget();\r\n onSearchChange?.('');\r\n },\r\n onDropdownOpen: () => {\r\n combobox.focusSearchInput();\r\n },\r\n });\r\n\r\n const options = data.map((i) => (\r\n <Combobox.Option\r\n value={i.value}\r\n key={i.value}\r\n >\r\n {renderOption ? renderOption({ option: i }) : i.label}\r\n </Combobox.Option>\r\n ));\r\n\r\n const selectedOption = data.find((i) => i.value === value);\r\n\r\n const
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/SelectInfinity/index.tsx"],"sourcesContent":["'use client';\r\nimport {\r\n Combobox,\r\n ComboboxItem,\r\n ElementProps,\r\n Input,\r\n InputBase,\r\n InputBaseProps,\r\n ScrollArea,\r\n useCombobox,\r\n} from '@mantine/core';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { ReactNode, useRef } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useFetchNextPageOnScroll } from '../../hooks/useFetchNextPageOnScroll';\r\nimport { InfinityLoader } from '../InfinityLoader';\r\n\r\nexport interface SelectInfinityProps\r\n extends InputBaseProps,\r\n ElementProps<'button', keyof InputBaseProps | 'value' | 'onChange'> {\r\n value?: string | null;\r\n onChange?: (value: string | null) => void;\r\n data?: ComboboxItem[];\r\n searchValue?: string;\r\n onSearchChange?: (value: string) => void;\r\n renderOption?: (args: { option: ComboboxItem }) => React.ReactNode;\r\n onOptionSubmit?: (value: string) => void;\r\n nothingFoundMessage?: ReactNode;\r\n infinity: InfiniteQueryHookResult<InfiniteData<{ data: unknown[] }, number>, Error>;\r\n placeholder?: string;\r\n}\r\n\r\nexport function SelectInfinity({\r\n value,\r\n onChange,\r\n data = [],\r\n searchValue,\r\n onSearchChange,\r\n renderOption,\r\n onOptionSubmit,\r\n nothingFoundMessage,\r\n infinity,\r\n placeholder,\r\n ...props\r\n}: SelectInfinityProps) {\r\n const combobox = useCombobox({\r\n onDropdownClose: () => {\r\n combobox.resetSelectedOption();\r\n combobox.focusTarget();\r\n onSearchChange?.('');\r\n },\r\n onDropdownOpen: () => {\r\n combobox.focusSearchInput();\r\n },\r\n });\r\n\r\n const options = data.map((i) => (\r\n <Combobox.Option\r\n value={i.value}\r\n key={i.value}\r\n >\r\n {renderOption ? renderOption({ option: i }) : i.label}\r\n </Combobox.Option>\r\n ));\r\n\r\n const selectedOption = data.find((i) => i.value === value);\r\n\r\n const scrollRef = useRef<HTMLDivElement>(null);\r\n\r\n useFetchNextPageOnScroll({ infinity, scrollRef });\r\n\r\n return (\r\n <Combobox\r\n store={combobox}\r\n middlewares={{\r\n shift: {\r\n crossAxis: true,\r\n },\r\n }}\r\n onOptionSubmit={(val) => {\r\n onChange?.(val);\r\n onOptionSubmit?.(val);\r\n combobox.closeDropdown();\r\n }}\r\n >\r\n <Combobox.Target>\r\n <InputBase\r\n component=\"button\"\r\n type=\"button\"\r\n pointer\r\n rightSection={<Combobox.Chevron />}\r\n onClick={() => combobox.toggleDropdown()}\r\n rightSectionPointerEvents=\"none\"\r\n {...props}\r\n >\r\n {selectedOption?.label || <Input.Placeholder>{placeholder}</Input.Placeholder>}\r\n </InputBase>\r\n </Combobox.Target>\r\n <Combobox.Dropdown>\r\n <Combobox.Search\r\n value={searchValue}\r\n onChange={(event) => onSearchChange?.(event.currentTarget.value)}\r\n placeholder=\"Escribe para buscar\"\r\n />\r\n <Combobox.Options>\r\n <ScrollArea.Autosize\r\n mah={200}\r\n type=\"scroll\"\r\n viewportRef={scrollRef}\r\n >\r\n {options.length > 0 ? (\r\n options\r\n ) : !infinity.isFetching ? (\r\n <Combobox.Empty\r\n onClick={() => combobox.closeDropdown()}\r\n className=\"min-h-6\"\r\n >\r\n {nothingFoundMessage ?? 'Sin resultados'}\r\n </Combobox.Empty>\r\n ) : null}\r\n <InfinityLoader\r\n className=\"text-sm\"\r\n infinity={infinity}\r\n loaderProps={{\r\n size: 'sm',\r\n className: 'mt-1 mb-2',\r\n }}\r\n />\r\n </ScrollArea.Autosize>\r\n </Combobox.Options>\r\n </Combobox.Dropdown>\r\n </Combobox>\r\n );\r\n}\r\n"],"names":["SelectInfinity","value","onChange","data","searchValue","onSearchChange","renderOption","onOptionSubmit","nothingFoundMessage","infinity","placeholder","props","combobox","useCombobox","options","i","jsx","Combobox","selectedOption","scrollRef","useRef","useFetchNextPageOnScroll","jsxs","val","InputBase","Input","event","ScrollArea","InfinityLoader"],"mappings":"+QAgCO,SAASA,EAAe,CAC7B,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,CAAC,EACR,YAAAC,EACA,eAAAC,EACA,aAAAC,EACA,eAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,MAAMC,EAAWC,EAAAA,YAAY,CAC3B,gBAAiB,IAAM,CACrBD,EAAS,oBAAoB,EAC7BA,EAAS,YAAY,EACrBP,IAAiB,EAAE,CACrB,EACA,eAAgB,IAAM,CACpBO,EAAS,iBAAiB,CAAA,CAC5B,CACD,EAEKE,EAAUX,EAAK,IAAKY,GACxBC,EAAA,IAACC,EAAAA,SAAS,OAAT,CACC,MAAOF,EAAE,MAGR,WAAeT,EAAa,CAAE,OAAQS,CAAE,CAAC,EAAIA,EAAE,KAAA,EAF3CA,EAAE,KAAA,CAIV,EAEKG,EAAiBf,EAAK,KAAMY,GAAMA,EAAE,QAAUd,CAAK,EAEnDkB,EAAYC,SAAuB,IAAI,EAEpBC,OAAAA,2BAAA,CAAE,SAAAZ,EAAU,UAAAU,EAAW,EAG9CG,EAAA,KAACL,EAAA,SAAA,CACC,MAAOL,EACP,YAAa,CACX,MAAO,CACL,UAAW,EAAA,CAEf,EACA,eAAiBW,GAAQ,CACvBrB,IAAWqB,CAAG,EACdhB,IAAiBgB,CAAG,EACpBX,EAAS,cAAc,CACzB,EAEA,SAAA,CAACI,EAAAA,IAAAC,EAAA,SAAS,OAAT,CACC,SAAAD,EAAA,IAACQ,EAAA,UAAA,CACC,UAAU,SACV,KAAK,SACL,QAAO,GACP,aAAcR,EAAA,IAACC,WAAS,QAAT,CAAA,CAAiB,EAChC,QAAS,IAAML,EAAS,eAAe,EACvC,0BAA0B,OACzB,GAAGD,EAEH,YAAgB,OAASK,EAAA,IAACS,EAAM,MAAA,YAAN,CAAmB,SAAYf,CAAA,CAAA,CAAA,CAAA,EAE9D,EACAY,EAAAA,KAACL,EAAS,SAAA,SAAT,CACC,SAAA,CAAAD,EAAA,IAACC,EAAAA,SAAS,OAAT,CACC,MAAOb,EACP,SAAWsB,GAAUrB,IAAiBqB,EAAM,cAAc,KAAK,EAC/D,YAAY,qBAAA,CACd,EACAV,EAAAA,IAACC,EAAS,SAAA,QAAT,CACC,SAAAK,EAAA,KAACK,EAAAA,WAAW,SAAX,CACC,IAAK,IACL,KAAK,SACL,YAAaR,EAEZ,SAAA,CAAAL,EAAQ,OAAS,EAChBA,EACGL,EAAS,WAOV,KANFO,EAAA,IAACC,EAAAA,SAAS,MAAT,CACC,QAAS,IAAML,EAAS,cAAc,EACtC,UAAU,UAET,SAAuBJ,GAAA,gBAAA,CAAA,EAG5BQ,EAAA,IAACY,EAAA,eAAA,CACC,UAAU,UACV,SAAAnB,EACA,YAAa,CACX,KAAM,KACN,UAAW,WAAA,CACb,CAAA,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CAAA,CACF,CAEJ"}
|
|
@@ -13,16 +13,16 @@ function R({
|
|
|
13
13
|
renderOption: i,
|
|
14
14
|
onOptionSubmit: h,
|
|
15
15
|
nothingFoundMessage: b,
|
|
16
|
-
infinity:
|
|
16
|
+
infinity: r,
|
|
17
17
|
placeholder: f,
|
|
18
18
|
...g
|
|
19
19
|
}) {
|
|
20
|
-
const
|
|
20
|
+
const n = S({
|
|
21
21
|
onDropdownClose: () => {
|
|
22
|
-
|
|
22
|
+
n.resetSelectedOption(), n.focusTarget(), c?.("");
|
|
23
23
|
},
|
|
24
24
|
onDropdownOpen: () => {
|
|
25
|
-
|
|
25
|
+
n.focusSearchInput();
|
|
26
26
|
}
|
|
27
27
|
}), p = s.map((e) => /* @__PURE__ */ o(
|
|
28
28
|
t.Option,
|
|
@@ -32,17 +32,17 @@ function R({
|
|
|
32
32
|
},
|
|
33
33
|
e.value
|
|
34
34
|
)), x = s.find((e) => e.value === u), a = D(null);
|
|
35
|
-
return O(
|
|
35
|
+
return O({ infinity: r, scrollRef: a }), /* @__PURE__ */ l(
|
|
36
36
|
t,
|
|
37
37
|
{
|
|
38
|
-
store:
|
|
38
|
+
store: n,
|
|
39
39
|
middlewares: {
|
|
40
40
|
shift: {
|
|
41
41
|
crossAxis: !0
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
onOptionSubmit: (e) => {
|
|
45
|
-
m?.(e), h?.(e),
|
|
45
|
+
m?.(e), h?.(e), n.closeDropdown();
|
|
46
46
|
},
|
|
47
47
|
children: [
|
|
48
48
|
/* @__PURE__ */ o(t.Target, { children: /* @__PURE__ */ o(
|
|
@@ -52,7 +52,7 @@ function R({
|
|
|
52
52
|
type: "button",
|
|
53
53
|
pointer: !0,
|
|
54
54
|
rightSection: /* @__PURE__ */ o(t.Chevron, {}),
|
|
55
|
-
onClick: () =>
|
|
55
|
+
onClick: () => n.toggleDropdown(),
|
|
56
56
|
rightSectionPointerEvents: "none",
|
|
57
57
|
...g,
|
|
58
58
|
children: x?.label || /* @__PURE__ */ o(w.Placeholder, { children: f })
|
|
@@ -74,10 +74,10 @@ function R({
|
|
|
74
74
|
type: "scroll",
|
|
75
75
|
viewportRef: a,
|
|
76
76
|
children: [
|
|
77
|
-
p.length > 0 ? p :
|
|
77
|
+
p.length > 0 ? p : r.isFetching ? null : /* @__PURE__ */ o(
|
|
78
78
|
t.Empty,
|
|
79
79
|
{
|
|
80
|
-
onClick: () =>
|
|
80
|
+
onClick: () => n.closeDropdown(),
|
|
81
81
|
className: "min-h-6",
|
|
82
82
|
children: b ?? "Sin resultados"
|
|
83
83
|
}
|
|
@@ -86,7 +86,7 @@ function R({
|
|
|
86
86
|
I,
|
|
87
87
|
{
|
|
88
88
|
className: "text-sm",
|
|
89
|
-
infinity:
|
|
89
|
+
infinity: r,
|
|
90
90
|
loaderProps: {
|
|
91
91
|
size: "sm",
|
|
92
92
|
className: "mt-1 mb-2"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../src/components/SelectInfinity/index.tsx"],"sourcesContent":["'use client';\r\nimport {\r\n Combobox,\r\n ComboboxItem,\r\n ElementProps,\r\n Input,\r\n InputBase,\r\n InputBaseProps,\r\n ScrollArea,\r\n useCombobox,\r\n} from '@mantine/core';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { ReactNode, useRef } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useFetchNextPageOnScroll } from '../../hooks/useFetchNextPageOnScroll';\r\nimport { InfinityLoader } from '../InfinityLoader';\r\n\r\nexport interface SelectInfinityProps\r\n extends InputBaseProps,\r\n ElementProps<'button', keyof InputBaseProps | 'value' | 'onChange'> {\r\n value?: string | null;\r\n onChange?: (value: string | null) => void;\r\n data?: ComboboxItem[];\r\n searchValue?: string;\r\n onSearchChange?: (value: string) => void;\r\n renderOption?: (args: { option: ComboboxItem }) => React.ReactNode;\r\n onOptionSubmit?: (value: string) => void;\r\n nothingFoundMessage?: ReactNode;\r\n infinity: InfiniteQueryHookResult<InfiniteData<{ data: unknown[] }, number>, Error>;\r\n placeholder?: string;\r\n}\r\n\r\nexport function SelectInfinity({\r\n value,\r\n onChange,\r\n data = [],\r\n searchValue,\r\n onSearchChange,\r\n renderOption,\r\n onOptionSubmit,\r\n nothingFoundMessage,\r\n infinity,\r\n placeholder,\r\n ...props\r\n}: SelectInfinityProps) {\r\n const combobox = useCombobox({\r\n onDropdownClose: () => {\r\n combobox.resetSelectedOption();\r\n combobox.focusTarget();\r\n onSearchChange?.('');\r\n },\r\n onDropdownOpen: () => {\r\n combobox.focusSearchInput();\r\n },\r\n });\r\n\r\n const options = data.map((i) => (\r\n <Combobox.Option\r\n value={i.value}\r\n key={i.value}\r\n >\r\n {renderOption ? renderOption({ option: i }) : i.label}\r\n </Combobox.Option>\r\n ));\r\n\r\n const selectedOption = data.find((i) => i.value === value);\r\n\r\n const
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../src/components/SelectInfinity/index.tsx"],"sourcesContent":["'use client';\r\nimport {\r\n Combobox,\r\n ComboboxItem,\r\n ElementProps,\r\n Input,\r\n InputBase,\r\n InputBaseProps,\r\n ScrollArea,\r\n useCombobox,\r\n} from '@mantine/core';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { ReactNode, useRef } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useFetchNextPageOnScroll } from '../../hooks/useFetchNextPageOnScroll';\r\nimport { InfinityLoader } from '../InfinityLoader';\r\n\r\nexport interface SelectInfinityProps\r\n extends InputBaseProps,\r\n ElementProps<'button', keyof InputBaseProps | 'value' | 'onChange'> {\r\n value?: string | null;\r\n onChange?: (value: string | null) => void;\r\n data?: ComboboxItem[];\r\n searchValue?: string;\r\n onSearchChange?: (value: string) => void;\r\n renderOption?: (args: { option: ComboboxItem }) => React.ReactNode;\r\n onOptionSubmit?: (value: string) => void;\r\n nothingFoundMessage?: ReactNode;\r\n infinity: InfiniteQueryHookResult<InfiniteData<{ data: unknown[] }, number>, Error>;\r\n placeholder?: string;\r\n}\r\n\r\nexport function SelectInfinity({\r\n value,\r\n onChange,\r\n data = [],\r\n searchValue,\r\n onSearchChange,\r\n renderOption,\r\n onOptionSubmit,\r\n nothingFoundMessage,\r\n infinity,\r\n placeholder,\r\n ...props\r\n}: SelectInfinityProps) {\r\n const combobox = useCombobox({\r\n onDropdownClose: () => {\r\n combobox.resetSelectedOption();\r\n combobox.focusTarget();\r\n onSearchChange?.('');\r\n },\r\n onDropdownOpen: () => {\r\n combobox.focusSearchInput();\r\n },\r\n });\r\n\r\n const options = data.map((i) => (\r\n <Combobox.Option\r\n value={i.value}\r\n key={i.value}\r\n >\r\n {renderOption ? renderOption({ option: i }) : i.label}\r\n </Combobox.Option>\r\n ));\r\n\r\n const selectedOption = data.find((i) => i.value === value);\r\n\r\n const scrollRef = useRef<HTMLDivElement>(null);\r\n\r\n useFetchNextPageOnScroll({ infinity, scrollRef });\r\n\r\n return (\r\n <Combobox\r\n store={combobox}\r\n middlewares={{\r\n shift: {\r\n crossAxis: true,\r\n },\r\n }}\r\n onOptionSubmit={(val) => {\r\n onChange?.(val);\r\n onOptionSubmit?.(val);\r\n combobox.closeDropdown();\r\n }}\r\n >\r\n <Combobox.Target>\r\n <InputBase\r\n component=\"button\"\r\n type=\"button\"\r\n pointer\r\n rightSection={<Combobox.Chevron />}\r\n onClick={() => combobox.toggleDropdown()}\r\n rightSectionPointerEvents=\"none\"\r\n {...props}\r\n >\r\n {selectedOption?.label || <Input.Placeholder>{placeholder}</Input.Placeholder>}\r\n </InputBase>\r\n </Combobox.Target>\r\n <Combobox.Dropdown>\r\n <Combobox.Search\r\n value={searchValue}\r\n onChange={(event) => onSearchChange?.(event.currentTarget.value)}\r\n placeholder=\"Escribe para buscar\"\r\n />\r\n <Combobox.Options>\r\n <ScrollArea.Autosize\r\n mah={200}\r\n type=\"scroll\"\r\n viewportRef={scrollRef}\r\n >\r\n {options.length > 0 ? (\r\n options\r\n ) : !infinity.isFetching ? (\r\n <Combobox.Empty\r\n onClick={() => combobox.closeDropdown()}\r\n className=\"min-h-6\"\r\n >\r\n {nothingFoundMessage ?? 'Sin resultados'}\r\n </Combobox.Empty>\r\n ) : null}\r\n <InfinityLoader\r\n className=\"text-sm\"\r\n infinity={infinity}\r\n loaderProps={{\r\n size: 'sm',\r\n className: 'mt-1 mb-2',\r\n }}\r\n />\r\n </ScrollArea.Autosize>\r\n </Combobox.Options>\r\n </Combobox.Dropdown>\r\n </Combobox>\r\n );\r\n}\r\n"],"names":["SelectInfinity","value","onChange","data","searchValue","onSearchChange","renderOption","onOptionSubmit","nothingFoundMessage","infinity","placeholder","props","combobox","useCombobox","options","i","jsx","Combobox","selectedOption","scrollRef","useRef","useFetchNextPageOnScroll","jsxs","val","InputBase","Input","event","ScrollArea","InfinityLoader"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),o=require("./useOnScrollProgress.cjs"),l=({infinity:e,scrollRef:t,disabled:c=!1})=>{o.useOnScrollProgress(.9,()=>{e.hasNextPage&&!c&&e.fetchNextPage()},t),s.useEffect(()=>{const r=t?.current??document.documentElement;!(r.scrollHeight>r.clientHeight)&&e.hasNextPage&&!c&&e.fetchNextPage()},[e.data,t,c])};exports.useFetchNextPageOnScroll=l;
|
|
2
2
|
//# sourceMappingURL=useFetchNextPageOnScroll.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFetchNextPageOnScroll.cjs","sources":["../../../src/hooks/useFetchNextPageOnScroll.ts"],"sourcesContent":["'use client';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { RefObject, useEffect } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useOnScrollProgress } from './useOnScrollProgress';\r\n\r\nexport
|
|
1
|
+
{"version":3,"file":"useFetchNextPageOnScroll.cjs","sources":["../../../src/hooks/useFetchNextPageOnScroll.ts"],"sourcesContent":["'use client';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { RefObject, useEffect } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useOnScrollProgress } from './useOnScrollProgress';\r\n\r\nexport type FetchNextPageOnScrollOptions = {\r\n infinity: InfiniteQueryHookResult<InfiniteData<{ data: unknown[] }, number>, Error>;\r\n scrollRef?: RefObject<HTMLElement | null>;\r\n disabled?: boolean;\r\n};\r\n\r\nexport const useFetchNextPageOnScroll = ({\r\n infinity,\r\n scrollRef: scrollRef,\r\n disabled = false,\r\n}: FetchNextPageOnScrollOptions) => {\r\n useOnScrollProgress(\r\n 0.9,\r\n () => {\r\n if (infinity.hasNextPage && !disabled) infinity.fetchNextPage();\r\n },\r\n scrollRef,\r\n );\r\n\r\n useEffect(() => {\r\n const el = scrollRef?.current;\r\n const scrollTarget = el ?? document.documentElement;\r\n\r\n const hasScroll = scrollTarget.scrollHeight > scrollTarget.clientHeight;\r\n\r\n if (!hasScroll && infinity.hasNextPage && !disabled) infinity.fetchNextPage();\r\n }, [infinity.data, scrollRef, disabled]);\r\n};\r\n"],"names":["useFetchNextPageOnScroll","infinity","scrollRef","disabled","useOnScrollProgress","useEffect","scrollTarget"],"mappings":"6JAYaA,EAA2B,CAAC,CACvC,SAAAC,EACA,UAAAC,EACA,SAAAC,EAAW,EACb,IAAoC,CAClCC,EAAA,oBACE,GACA,IAAM,CACAH,EAAS,aAAe,CAACE,KAAmB,cAAc,CAChE,EACAD,CACF,EAEAG,EAAAA,UAAU,IAAM,CAER,MAAAC,EADKJ,GAAW,SACK,SAAS,gBAIhC,EAFcI,EAAa,aAAeA,EAAa,eAEzCL,EAAS,aAAe,CAACE,KAAmB,cAAc,GAC3E,CAACF,EAAS,KAAMC,EAAWC,CAAQ,CAAC,CACzC"}
|
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { useOnScrollProgress as
|
|
4
|
-
const
|
|
5
|
-
|
|
2
|
+
import { useEffect as r } from "react";
|
|
3
|
+
import { useOnScrollProgress as s } from "./useOnScrollProgress.mjs";
|
|
4
|
+
const m = ({
|
|
5
|
+
infinity: e,
|
|
6
|
+
scrollRef: t,
|
|
7
|
+
disabled: c = !1
|
|
8
|
+
}) => {
|
|
9
|
+
s(
|
|
6
10
|
0.9,
|
|
7
11
|
() => {
|
|
8
|
-
e.hasNextPage && e.fetchNextPage();
|
|
12
|
+
e.hasNextPage && !c && e.fetchNextPage();
|
|
9
13
|
},
|
|
10
14
|
t
|
|
11
|
-
),
|
|
12
|
-
const
|
|
13
|
-
!(
|
|
14
|
-
}, [e.data, t]);
|
|
15
|
+
), r(() => {
|
|
16
|
+
const o = t?.current ?? document.documentElement;
|
|
17
|
+
!(o.scrollHeight > o.clientHeight) && e.hasNextPage && !c && e.fetchNextPage();
|
|
18
|
+
}, [e.data, t, c]);
|
|
15
19
|
};
|
|
16
20
|
export {
|
|
17
|
-
|
|
21
|
+
m as useFetchNextPageOnScroll
|
|
18
22
|
};
|
|
19
23
|
//# sourceMappingURL=useFetchNextPageOnScroll.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFetchNextPageOnScroll.mjs","sources":["../../../src/hooks/useFetchNextPageOnScroll.ts"],"sourcesContent":["'use client';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { RefObject, useEffect } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useOnScrollProgress } from './useOnScrollProgress';\r\n\r\nexport
|
|
1
|
+
{"version":3,"file":"useFetchNextPageOnScroll.mjs","sources":["../../../src/hooks/useFetchNextPageOnScroll.ts"],"sourcesContent":["'use client';\r\nimport { InfiniteData } from '@tanstack/react-query';\r\nimport { RefObject, useEffect } from 'react';\r\nimport { InfiniteQueryHookResult } from 'react-query-kit';\r\nimport { useOnScrollProgress } from './useOnScrollProgress';\r\n\r\nexport type FetchNextPageOnScrollOptions = {\r\n infinity: InfiniteQueryHookResult<InfiniteData<{ data: unknown[] }, number>, Error>;\r\n scrollRef?: RefObject<HTMLElement | null>;\r\n disabled?: boolean;\r\n};\r\n\r\nexport const useFetchNextPageOnScroll = ({\r\n infinity,\r\n scrollRef: scrollRef,\r\n disabled = false,\r\n}: FetchNextPageOnScrollOptions) => {\r\n useOnScrollProgress(\r\n 0.9,\r\n () => {\r\n if (infinity.hasNextPage && !disabled) infinity.fetchNextPage();\r\n },\r\n scrollRef,\r\n );\r\n\r\n useEffect(() => {\r\n const el = scrollRef?.current;\r\n const scrollTarget = el ?? document.documentElement;\r\n\r\n const hasScroll = scrollTarget.scrollHeight > scrollTarget.clientHeight;\r\n\r\n if (!hasScroll && infinity.hasNextPage && !disabled) infinity.fetchNextPage();\r\n }, [infinity.data, scrollRef, disabled]);\r\n};\r\n"],"names":["useFetchNextPageOnScroll","infinity","scrollRef","disabled","useOnScrollProgress","useEffect","scrollTarget"],"mappings":";;;AAYO,MAAMA,IAA2B,CAAC;AAAA,EACvC,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAoC;AAClC,EAAAC;AAAA,IACE;AAAA,IACA,MAAM;AACJ,MAAIH,EAAS,eAAe,CAACE,OAAmB,cAAc;AAAA,IAChE;AAAA,IACAD;AAAA,EACF,GAEAG,EAAU,MAAM;AAER,UAAAC,IADKJ,GAAW,WACK,SAAS;AAIpC,IAAI,EAFcI,EAAa,eAAeA,EAAa,iBAEzCL,EAAS,eAAe,CAACE,OAAmB,cAAc;AAAA,KAC3E,CAACF,EAAS,MAAMC,GAAWC,CAAQ,CAAC;AACzC;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),h=(
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),h=(e,s,o)=>{if(e<0||e>1)throw new Error("El porcentaje debe estar entre 0 y 1");a.useEffect(()=>{let l=!1;const t=()=>{const c=o?.current,r=c??document.documentElement,i=r.scrollHeight-r.clientHeight,u=c?r.scrollTop:window.scrollY,d=i>0?Math.min(1,u/i):0;!l&&d>=e&&(s(),l=!0)},n=o?.current??window;return n.addEventListener("scroll",t),t(),()=>{n.removeEventListener("scroll",t)}},[e,s,o])};exports.useOnScrollProgress=h;
|
|
2
2
|
//# sourceMappingURL=useOnScrollProgress.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOnScrollProgress.cjs","sources":["../../../src/hooks/useOnScrollProgress.ts"],"sourcesContent":["'use client';\r\nimport { RefObject, useEffect } from 'react';\r\n\r\nexport const useOnScrollProgress = (\r\n triggerPercentage: number,\r\n callback: () => void,\r\n
|
|
1
|
+
{"version":3,"file":"useOnScrollProgress.cjs","sources":["../../../src/hooks/useOnScrollProgress.ts"],"sourcesContent":["'use client';\r\nimport { RefObject, useEffect } from 'react';\r\n\r\nexport const useOnScrollProgress = (\r\n triggerPercentage: number,\r\n callback: () => void,\r\n scrollRef?: RefObject<HTMLElement | null>,\r\n): void => {\r\n if (triggerPercentage < 0 || triggerPercentage > 1) {\r\n throw new Error('El porcentaje debe estar entre 0 y 1');\r\n }\r\n\r\n useEffect(() => {\r\n let hasTriggered = false;\r\n\r\n const handleScroll = () => {\r\n const el = scrollRef?.current;\r\n const target = el ?? document.documentElement;\r\n\r\n const scrollHeight = target.scrollHeight - target.clientHeight;\r\n const scrollTop = el ? target.scrollTop : window.scrollY;\r\n\r\n const scrollProgress = scrollHeight > 0 ? Math.min(1, scrollTop / scrollHeight) : 0;\r\n\r\n if (!hasTriggered && scrollProgress >= triggerPercentage) {\r\n callback();\r\n hasTriggered = true;\r\n }\r\n };\r\n\r\n const scrollTarget = scrollRef?.current ?? window;\r\n scrollTarget.addEventListener('scroll', handleScroll);\r\n handleScroll();\r\n\r\n return () => {\r\n scrollTarget.removeEventListener('scroll', handleScroll);\r\n };\r\n }, [triggerPercentage, callback, scrollRef]);\r\n};\r\n"],"names":["useOnScrollProgress","triggerPercentage","callback","scrollRef","useEffect","hasTriggered","handleScroll","el","target","scrollHeight","scrollTop","scrollProgress","scrollTarget"],"mappings":"sHAGaA,EAAsB,CACjCC,EACAC,EACAC,IACS,CACL,GAAAF,EAAoB,GAAKA,EAAoB,EACzC,MAAA,IAAI,MAAM,sCAAsC,EAGxDG,EAAAA,UAAU,IAAM,CACd,IAAIC,EAAe,GAEnB,MAAMC,EAAe,IAAM,CACzB,MAAMC,EAAKJ,GAAW,QAChBK,EAASD,GAAM,SAAS,gBAExBE,EAAeD,EAAO,aAAeA,EAAO,aAC5CE,EAAYH,EAAKC,EAAO,UAAY,OAAO,QAE3CG,EAAiBF,EAAe,EAAI,KAAK,IAAI,EAAGC,EAAYD,CAAY,EAAI,EAE9E,CAACJ,GAAgBM,GAAkBV,IAC5BC,EAAA,EACMG,EAAA,GAEnB,EAEMO,EAAeT,GAAW,SAAW,OAC9B,OAAAS,EAAA,iBAAiB,SAAUN,CAAY,EACvCA,EAAA,EAEN,IAAM,CACEM,EAAA,oBAAoB,SAAUN,CAAY,CACzD,CACC,EAAA,CAACL,EAAmBC,EAAUC,CAAS,CAAC,CAC7C"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useEffect as h } from "react";
|
|
3
|
-
const
|
|
3
|
+
const w = (o, s, e) => {
|
|
4
4
|
if (o < 0 || o > 1)
|
|
5
5
|
throw new Error("El porcentaje debe estar entre 0 y 1");
|
|
6
6
|
h(() => {
|
|
7
|
-
let
|
|
8
|
-
const
|
|
9
|
-
const c =
|
|
10
|
-
!
|
|
11
|
-
},
|
|
12
|
-
return
|
|
13
|
-
|
|
7
|
+
let n = !1;
|
|
8
|
+
const t = () => {
|
|
9
|
+
const c = e?.current, r = c ?? document.documentElement, i = r.scrollHeight - r.clientHeight, d = c ? r.scrollTop : window.scrollY, u = i > 0 ? Math.min(1, d / i) : 0;
|
|
10
|
+
!n && u >= o && (s(), n = !0);
|
|
11
|
+
}, l = e?.current ?? window;
|
|
12
|
+
return l.addEventListener("scroll", t), t(), () => {
|
|
13
|
+
l.removeEventListener("scroll", t);
|
|
14
14
|
};
|
|
15
|
-
}, [o,
|
|
15
|
+
}, [o, s, e]);
|
|
16
16
|
};
|
|
17
17
|
export {
|
|
18
|
-
|
|
18
|
+
w as useOnScrollProgress
|
|
19
19
|
};
|
|
20
20
|
//# sourceMappingURL=useOnScrollProgress.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOnScrollProgress.mjs","sources":["../../../src/hooks/useOnScrollProgress.ts"],"sourcesContent":["'use client';\r\nimport { RefObject, useEffect } from 'react';\r\n\r\nexport const useOnScrollProgress = (\r\n triggerPercentage: number,\r\n callback: () => void,\r\n
|
|
1
|
+
{"version":3,"file":"useOnScrollProgress.mjs","sources":["../../../src/hooks/useOnScrollProgress.ts"],"sourcesContent":["'use client';\r\nimport { RefObject, useEffect } from 'react';\r\n\r\nexport const useOnScrollProgress = (\r\n triggerPercentage: number,\r\n callback: () => void,\r\n scrollRef?: RefObject<HTMLElement | null>,\r\n): void => {\r\n if (triggerPercentage < 0 || triggerPercentage > 1) {\r\n throw new Error('El porcentaje debe estar entre 0 y 1');\r\n }\r\n\r\n useEffect(() => {\r\n let hasTriggered = false;\r\n\r\n const handleScroll = () => {\r\n const el = scrollRef?.current;\r\n const target = el ?? document.documentElement;\r\n\r\n const scrollHeight = target.scrollHeight - target.clientHeight;\r\n const scrollTop = el ? target.scrollTop : window.scrollY;\r\n\r\n const scrollProgress = scrollHeight > 0 ? Math.min(1, scrollTop / scrollHeight) : 0;\r\n\r\n if (!hasTriggered && scrollProgress >= triggerPercentage) {\r\n callback();\r\n hasTriggered = true;\r\n }\r\n };\r\n\r\n const scrollTarget = scrollRef?.current ?? window;\r\n scrollTarget.addEventListener('scroll', handleScroll);\r\n handleScroll();\r\n\r\n return () => {\r\n scrollTarget.removeEventListener('scroll', handleScroll);\r\n };\r\n }, [triggerPercentage, callback, scrollRef]);\r\n};\r\n"],"names":["useOnScrollProgress","triggerPercentage","callback","scrollRef","useEffect","hasTriggered","handleScroll","el","target","scrollHeight","scrollTop","scrollProgress","scrollTarget"],"mappings":";;AAGO,MAAMA,IAAsB,CACjCC,GACAC,GACAC,MACS;AACL,MAAAF,IAAoB,KAAKA,IAAoB;AACzC,UAAA,IAAI,MAAM,sCAAsC;AAGxD,EAAAG,EAAU,MAAM;AACd,QAAIC,IAAe;AAEnB,UAAMC,IAAe,MAAM;AACzB,YAAMC,IAAKJ,GAAW,SAChBK,IAASD,KAAM,SAAS,iBAExBE,IAAeD,EAAO,eAAeA,EAAO,cAC5CE,IAAYH,IAAKC,EAAO,YAAY,OAAO,SAE3CG,IAAiBF,IAAe,IAAI,KAAK,IAAI,GAAGC,IAAYD,CAAY,IAAI;AAE9E,MAAA,CAACJ,KAAgBM,KAAkBV,MAC5BC,EAAA,GACMG,IAAA;AAAA,IAEnB,GAEMO,IAAeT,GAAW,WAAW;AAC9B,WAAAS,EAAA,iBAAiB,UAAUN,CAAY,GACvCA,EAAA,GAEN,MAAM;AACE,MAAAM,EAAA,oBAAoB,UAAUN,CAAY;AAAA,IACzD;AAAA,EACC,GAAA,CAACL,GAAmBC,GAAUC,CAAS,CAAC;AAC7C;"}
|