@flipdish/portal-library 1.0.43 → 1.0.44
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/components/index.cjs.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -1
- package/dist/components/ui/Form/GenericAutocompleteField.cjs.js.map +1 -1
- package/dist/components/ui/Form/GenericAutocompleteField.d.ts +1 -1
- package/dist/components/ui/Form/GenericAutocompleteField.js.map +1 -1
- package/dist/components/ui/Form/PaginatedAutocompleteField.cjs.js +2 -0
- package/dist/components/ui/Form/PaginatedAutocompleteField.cjs.js.map +1 -0
- package/dist/components/ui/Form/PaginatedAutocompleteField.d.ts +9 -0
- package/dist/components/ui/Form/PaginatedAutocompleteField.js +2 -0
- package/dist/components/ui/Form/PaginatedAutocompleteField.js.map +1 -0
- package/package.json +5 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./themes/flipdishPublicTheme.cjs.js"),
|
|
1
|
+
"use strict";var e=require("./themes/flipdishPublicTheme.cjs.js"),i=require("./ui/NotFoundPage/NotFoundPage.cjs.js"),r=require("./ui/PageLayout/PageLayout.cjs.js"),o=require("./ui/PortalMock/PortalMock.cjs.js"),t=require("./ui/LazyComponent/LazyComponent.cjs.js"),s=require("./ui/Spacer/Spacer.cjs.js"),c=require("./ui/Chip/Chip.cjs.js"),a=require("./ui/Switch/Switch.cjs.js"),u=require("./ui/Form/utilities/formValidation.cjs.js"),n=require("./ui/Form/GenericAutocompleteField.cjs.js"),l=require("./ui/Form/GenericFormContainer.cjs.js"),j=require("./ui/Form/GenericTextField.cjs.js"),p=require("./ui/Form/PaginatedAutocompleteField.cjs.js"),d=require("./ui/GenericDateTimePickerField/GenericDateTimePickerField.cjs.js"),m=require("./ui/GenericRadioButtons/GenericRadioButtons.cjs.js"),T=require("./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.cjs.js"),G=require("./ui/GenericTable/GenericTable.cjs.js"),q=require("./ui/GenericTableBody/GenericTableBody.cjs.js"),x=require("./ui/GenericTableBodyRow/GenericTableBodyRow.cjs.js"),P=require("./ui/GenericTableTitle/GenericTableTitle.cjs.js");require("react/jsx-runtime"),require("react"),require("../providers/TranslationProvider.cjs.js"),exports.flipdishPublicTheme=e,exports.NotFoundPage=i,exports.PageLayout=r.default,exports.PortalMock=o,exports.LazyComponent=t,exports.Spacer=s,exports.Chip=c,exports.Switch=a,exports.formikValidate=u.formikValidate,exports.GenericAutocompleteField=n,exports.GenericFormContainer=l,exports.GenericTextField=j,exports.PaginatedAutocompleteField=p,exports.GenericDatePickerField=d,exports.GenericRadioButtons=m,exports.DateTimeLocalizationProvider=T,exports.GenericTable=G,exports.GenericTableBody=q,exports.GenericTableBodyRow=x,exports.GenericTableTitle=P;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -10,6 +10,7 @@ export { formikValidate } from './ui/Form/utilities/formValidation.js';
|
|
|
10
10
|
export { default as GenericAutocompleteField } from './ui/Form/GenericAutocompleteField.js';
|
|
11
11
|
export { default as GenericFormContainer } from './ui/Form/GenericFormContainer.js';
|
|
12
12
|
export { default as GenericTextField } from './ui/Form/GenericTextField.js';
|
|
13
|
+
export { default as PaginatedAutocompleteField } from './ui/Form/PaginatedAutocompleteField.js';
|
|
13
14
|
export { default as GenericDatePickerField } from './ui/GenericDateTimePickerField/GenericDateTimePickerField.js';
|
|
14
15
|
export { default as GenericRadioButtons } from './ui/GenericRadioButtons/GenericRadioButtons.js';
|
|
15
16
|
export { default as DateTimeLocalizationProvider } from './ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.js';
|
package/dist/components/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as flipdishPublicTheme}from"./themes/flipdishPublicTheme.js";export{default as NotFoundPage}from"./ui/NotFoundPage/NotFoundPage.js";export{default as PageLayout}from"./ui/PageLayout/PageLayout.js";export{default as PortalMock}from"./ui/PortalMock/PortalMock.js";export{default as LazyComponent}from"./ui/LazyComponent/LazyComponent.js";export{default as Spacer}from"./ui/Spacer/Spacer.js";export{default as Chip}from"./ui/Chip/Chip.js";export{default as Switch}from"./ui/Switch/Switch.js";export{formikValidate}from"./ui/Form/utilities/formValidation.js";export{default as GenericAutocompleteField}from"./ui/Form/GenericAutocompleteField.js";export{default as GenericFormContainer}from"./ui/Form/GenericFormContainer.js";export{default as GenericTextField}from"./ui/Form/GenericTextField.js";export{default as GenericDatePickerField}from"./ui/GenericDateTimePickerField/GenericDateTimePickerField.js";export{default as GenericRadioButtons}from"./ui/GenericRadioButtons/GenericRadioButtons.js";export{default as DateTimeLocalizationProvider}from"./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.js";export{default as GenericTable}from"./ui/GenericTable/GenericTable.js";export{default as GenericTableBody}from"./ui/GenericTableBody/GenericTableBody.js";export{default as GenericTableBodyRow}from"./ui/GenericTableBodyRow/GenericTableBodyRow.js";export{default as GenericTableTitle}from"./ui/GenericTableTitle/GenericTableTitle.js";import"react/jsx-runtime";import"react";import"../providers/TranslationProvider.js";
|
|
1
|
+
export{default as flipdishPublicTheme}from"./themes/flipdishPublicTheme.js";export{default as NotFoundPage}from"./ui/NotFoundPage/NotFoundPage.js";export{default as PageLayout}from"./ui/PageLayout/PageLayout.js";export{default as PortalMock}from"./ui/PortalMock/PortalMock.js";export{default as LazyComponent}from"./ui/LazyComponent/LazyComponent.js";export{default as Spacer}from"./ui/Spacer/Spacer.js";export{default as Chip}from"./ui/Chip/Chip.js";export{default as Switch}from"./ui/Switch/Switch.js";export{formikValidate}from"./ui/Form/utilities/formValidation.js";export{default as GenericAutocompleteField}from"./ui/Form/GenericAutocompleteField.js";export{default as GenericFormContainer}from"./ui/Form/GenericFormContainer.js";export{default as GenericTextField}from"./ui/Form/GenericTextField.js";export{default as PaginatedAutocompleteField}from"./ui/Form/PaginatedAutocompleteField.js";export{default as GenericDatePickerField}from"./ui/GenericDateTimePickerField/GenericDateTimePickerField.js";export{default as GenericRadioButtons}from"./ui/GenericRadioButtons/GenericRadioButtons.js";export{default as DateTimeLocalizationProvider}from"./ui/DateTimeLocalizationProvider/DateTimeLocalizationProvider.js";export{default as GenericTable}from"./ui/GenericTable/GenericTable.js";export{default as GenericTableBody}from"./ui/GenericTableBody/GenericTableBody.js";export{default as GenericTableBodyRow}from"./ui/GenericTableBodyRow/GenericTableBodyRow.js";export{default as GenericTableTitle}from"./ui/GenericTableTitle/GenericTableTitle.js";import"react/jsx-runtime";import"react";import"../providers/TranslationProvider.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericAutocompleteField.cjs.js","sources":["../../../../src/components/ui/Form/GenericAutocompleteField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { TextFieldProps, Autocomplete, TextField, Typography, CircularProgress } from '@mui/material';\nimport { Field, FieldProps } from 'formik';\nimport { SyntheticEvent } from 'react';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\n\
|
|
1
|
+
{"version":3,"file":"GenericAutocompleteField.cjs.js","sources":["../../../../src/components/ui/Form/GenericAutocompleteField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { TextFieldProps, Autocomplete, TextField, Typography, CircularProgress } from '@mui/material';\nimport { Field, FieldProps } from 'formik';\nimport { SyntheticEvent } from 'react';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\n\nexport type Props<T> = {\n label: string;\n fieldName: string;\n options: T[];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n validation?: (value: T | T[]) => string | undefined;\n onChange?: (e: SyntheticEvent, value: T | T[]) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n};\n\nconst GenericAutocompleteField = <T,>({\n label,\n fieldName,\n options,\n placeholder,\n getOptionLabel,\n validation,\n onChange,\n onInputChange,\n isOptionEqualToValue,\n onScroll,\n layout = 'horizontal',\n variant = 'outlined',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags = undefined,\n}: Props<T>) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {({ field, form }: FieldProps) => {\n const { errors, touched, isSubmitting } = form;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText({\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: field.value,\n });\n\n return (\n <Autocomplete\n options={options}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n onChange={(e: SyntheticEvent, value: T[]) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(fieldName, value);\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={onInputChange}\n disabled={isSubmitting || disabled}\n fullWidth\n value={field.value}\n loading={loading}\n renderInput={(params) => (\n <TextField\n {...params}\n label={variant === 'standard' ? undefined : label}\n variant={variant}\n data-testid={`text-field-${fieldName}`}\n fullWidth\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n placeholder={placeholder ? placeholder : undefined}\n required={required}\n error={showError}\n helperText={helperText}\n FormHelperTextProps={{\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n }}\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <>\n {loading && <CircularProgress color=\"inherit\" size={25} />}\n {params.InputProps.endAdornment}\n </>\n ),\n }}\n />\n )}\n ListboxProps={{\n onScroll,\n }}\n multiple={multiple}\n limitTags={multiple ? (limitTags ?? 2) : undefined}\n />\n );\n }}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericAutocompleteField;\n"],"names":["label","fieldName","options","placeholder","getOptionLabel","validation","onChange","onInputChange","isOptionEqualToValue","onScroll","layout","variant","disabled","loading","required","multiple","limitTags","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","Autocomplete","e","setFieldValue","fullWidth","renderInput","params","TextField","undefined","style","paddingRight","error","FormHelperTextProps","textAlign","InputProps","endAdornment","_jsxs","jsxs","_Fragment","jsx","CircularProgress","color","size","ListboxProps","Typography","component","FormItemLayout"],"mappings":"6MA2BiC,EAC7BA,QACAC,YACAC,UACAC,cACAC,iBACAC,aACAC,WACAC,gBACAC,uBACAC,WACAC,SAAS,aACTC,UAAU,WACVC,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMC,EAAc,IAEZC,MAACC,EAAAA,OAAMC,KAAMnB,EAAWoB,SAAUhB,EAAUiB,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACId,MAACe,EAAYA,aAAA,CACT/B,QAASA,EACTE,eAAgBA,EAChBI,qBAAsBA,EACtBF,SAAU,CAAC4B,EAAmBF,KAE1BR,EAAKW,cAAclC,EAAW+B,GAC1B1B,GACAA,EAAS4B,EAAGF,EACf,EAELzB,cAAeA,EACfK,SAAUe,GAAgBf,EAC1BwB,WACA,EAAAJ,MAAOT,EAAMS,MACbnB,QAASA,EACTwB,YAAcC,GACVpB,MAACqB,EAAAA,UACO,IAAAD,EACJtC,MAAmB,aAAZW,OAAyB6B,EAAYxC,EAC5CW,QAASA,EAAO,cACH,cAAcV,IAC3BmC,WAAS,EACTK,MAAO,CAAEC,aAAyB,eAAXhC,EAA0B,GAAK,GACtDP,YAAaA,QAA4BqC,EACzC1B,SAAUA,EACV6B,MAAOd,EACPC,WAAYA,EACZc,oBAAqB,CACjBtB,SAAU,IACVmB,MAAO,CAAEI,UAAW,UAExBC,WAAY,IACLR,EAAOQ,WACVC,aACIC,EACKC,KAAAC,WAAA,CAAA5B,SAAA,CAAAT,GAAWK,EAACiC,IAAAC,mBAAiB,CAAAC,MAAM,UAAUC,KAAM,KACnDhB,EAAOQ,WAAWC,mBAMvCQ,aAAc,CACV9C,YAEJM,SAAUA,EACVC,UAAWD,EAAYC,GAAa,OAAKwB,GAE/C,IAMlB,MAAe,aAAX9B,EAEIsC,EAAAC,KAAAC,WAAA,CAAA5B,SAAA,CACiB,aAAZX,GACGO,EAAAiC,IAACK,aAAU,CAAC7C,QAAQ,YAAY8C,UAAU,KAAKJ,MAAM,cAChD/B,SAAAtB,IAGRiB,OAKNC,EAAAiC,IAACO,EAAc,CAAC1D,MAAOA,EAAQsB,SAAAL,KAA+B"}
|
|
@@ -23,4 +23,4 @@ type Props<T> = {
|
|
|
23
23
|
};
|
|
24
24
|
declare const GenericAutocompleteField: <T>({ label, fieldName, options, placeholder, getOptionLabel, validation, onChange, onInputChange, isOptionEqualToValue, onScroll, layout, variant, disabled, loading, required, multiple, limitTags, }: Props<T>) => react_jsx_runtime.JSX.Element;
|
|
25
25
|
|
|
26
|
-
export { GenericAutocompleteField as default };
|
|
26
|
+
export { type Props, GenericAutocompleteField as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GenericAutocompleteField.js","sources":["../../../../src/components/ui/Form/GenericAutocompleteField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { TextFieldProps, Autocomplete, TextField, Typography, CircularProgress } from '@mui/material';\nimport { Field, FieldProps } from 'formik';\nimport { SyntheticEvent } from 'react';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\n\
|
|
1
|
+
{"version":3,"file":"GenericAutocompleteField.js","sources":["../../../../src/components/ui/Form/GenericAutocompleteField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { TextFieldProps, Autocomplete, TextField, Typography, CircularProgress } from '@mui/material';\nimport { Field, FieldProps } from 'formik';\nimport { SyntheticEvent } from 'react';\nimport useRenderValidText from '../../custom-hooks/useRenderValidText';\nimport FormItemLayout from './FormItemLayout';\n\nexport type Props<T> = {\n label: string;\n fieldName: string;\n options: T[];\n placeholder?: string;\n getOptionLabel?: (option: T) => string;\n validation?: (value: T | T[]) => string | undefined;\n onChange?: (e: SyntheticEvent, value: T | T[]) => void;\n onInputChange?: (e: SyntheticEvent, value: string) => void;\n isOptionEqualToValue?: (option: T, value: T) => boolean;\n onScroll?: (e: React.UIEvent<HTMLUListElement, UIEvent>) => void;\n layout?: 'horizontal' | 'vertical';\n variant?: TextFieldProps['variant'];\n disabled?: boolean;\n loading?: boolean;\n required?: boolean;\n multiple?: boolean;\n limitTags?: number;\n};\n\nconst GenericAutocompleteField = <T,>({\n label,\n fieldName,\n options,\n placeholder,\n getOptionLabel,\n validation,\n onChange,\n onInputChange,\n isOptionEqualToValue,\n onScroll,\n layout = 'horizontal',\n variant = 'outlined',\n disabled = false,\n loading = false,\n required = false,\n multiple = false,\n limitTags = undefined,\n}: Props<T>) => {\n const renderField = () => {\n return (\n <Field name={fieldName} validate={validation}>\n {({ field, form }: FieldProps) => {\n const { errors, touched, isSubmitting } = form;\n const fieldError = errors[field.name] as string | undefined;\n const showError = !!fieldError && (touched[field.name] as boolean | undefined);\n const helperText = useRenderValidText({\n fieldError,\n showError,\n touched: !!touched[field.name],\n value: field.value,\n });\n\n return (\n <Autocomplete\n options={options}\n getOptionLabel={getOptionLabel}\n isOptionEqualToValue={isOptionEqualToValue}\n onChange={(e: SyntheticEvent, value: T[]) => {\n // eslint-disable-next-line @typescript-eslint/no-floating-promises\n form.setFieldValue(fieldName, value);\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={onInputChange}\n disabled={isSubmitting || disabled}\n fullWidth\n value={field.value}\n loading={loading}\n renderInput={(params) => (\n <TextField\n {...params}\n label={variant === 'standard' ? undefined : label}\n variant={variant}\n data-testid={`text-field-${fieldName}`}\n fullWidth\n style={{ paddingRight: layout === 'horizontal' ? 16 : 0 }}\n placeholder={placeholder ? placeholder : undefined}\n required={required}\n error={showError}\n helperText={helperText}\n FormHelperTextProps={{\n children: ' ', // reserves line height for error message\n style: { textAlign: 'right' },\n }}\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <>\n {loading && <CircularProgress color=\"inherit\" size={25} />}\n {params.InputProps.endAdornment}\n </>\n ),\n }}\n />\n )}\n ListboxProps={{\n onScroll,\n }}\n multiple={multiple}\n limitTags={multiple ? (limitTags ?? 2) : undefined}\n />\n );\n }}\n </Field>\n );\n };\n\n if (layout === 'vertical') {\n return (\n <>\n {variant === 'standard' && (\n <Typography variant=\"subtitle1\" component=\"h3\" color=\"textPrimary\">\n {label}\n </Typography>\n )}\n {renderField()}\n </>\n );\n }\n\n return <FormItemLayout label={label}>{renderField()}</FormItemLayout>;\n};\n\nexport default GenericAutocompleteField;\n"],"names":["GenericAutocompleteField","label","fieldName","options","placeholder","getOptionLabel","validation","onChange","onInputChange","isOptionEqualToValue","onScroll","layout","variant","disabled","loading","required","multiple","limitTags","renderField","_jsx","Field","name","validate","children","field","form","errors","touched","isSubmitting","fieldError","showError","helperText","useRenderValidText","value","Autocomplete","e","setFieldValue","fullWidth","renderInput","params","TextField","undefined","style","paddingRight","error","FormHelperTextProps","textAlign","InputProps","endAdornment","_jsxs","_Fragment","CircularProgress","color","size","ListboxProps","Typography","component","FormItemLayout"],"mappings":"4RA2BM,MAAAA,EAA2B,EAC7BC,QACAC,YACAC,UACAC,cACAC,iBACAC,aACAC,WACAC,gBACAC,uBACAC,WACAC,SAAS,aACTC,UAAU,WACVC,YAAW,EACXC,WAAU,EACVC,YAAW,EACXC,YAAW,EACXC,gBAEA,MAAMC,EAAc,IAEZC,EAACC,GAAMC,KAAMnB,EAAWoB,SAAUhB,EAAUiB,SACvC,EAAGC,QAAOC,WACP,MAAMC,OAAEA,EAAMC,QAAEA,EAAOC,aAAEA,GAAiBH,EACpCI,EAAaH,EAAOF,EAAMH,MAC1BS,IAAcD,GAAeF,EAAQH,EAAMH,MAC3CU,EAAaC,EAAmB,CAClCH,aACAC,YACAH,UAAWA,EAAQH,EAAMH,MACzBY,MAAOT,EAAMS,QAGjB,OACId,EAACe,EAAY,CACT/B,QAASA,EACTE,eAAgBA,EAChBI,qBAAsBA,EACtBF,SAAU,CAAC4B,EAAmBF,KAE1BR,EAAKW,cAAclC,EAAW+B,GAC1B1B,GACAA,EAAS4B,EAAGF,EACf,EAELzB,cAAeA,EACfK,SAAUe,GAAgBf,EAC1BwB,WACA,EAAAJ,MAAOT,EAAMS,MACbnB,QAASA,EACTwB,YAAcC,GACVpB,EAACqB,EACO,IAAAD,EACJtC,MAAmB,aAAZW,OAAyB6B,EAAYxC,EAC5CW,QAASA,EAAO,cACH,cAAcV,IAC3BmC,WAAS,EACTK,MAAO,CAAEC,aAAyB,eAAXhC,EAA0B,GAAK,GACtDP,YAAaA,QAA4BqC,EACzC1B,SAAUA,EACV6B,MAAOd,EACPC,WAAYA,EACZc,oBAAqB,CACjBtB,SAAU,IACVmB,MAAO,CAAEI,UAAW,UAExBC,WAAY,IACLR,EAAOQ,WACVC,aACIC,EACKC,EAAA,CAAA3B,SAAA,CAAAT,GAAWK,EAACgC,EAAiB,CAAAC,MAAM,UAAUC,KAAM,KACnDd,EAAOQ,WAAWC,mBAMvCM,aAAc,CACV5C,YAEJM,SAAUA,EACVC,UAAWD,EAAYC,GAAa,OAAKwB,GAE/C,IAMlB,MAAe,aAAX9B,EAEIsC,EAAAC,EAAA,CAAA3B,SAAA,CACiB,aAAZX,GACGO,EAACoC,EAAU,CAAC3C,QAAQ,YAAY4C,UAAU,KAAKJ,MAAM,cAChD7B,SAAAtB,IAGRiB,OAKNC,EAACsC,EAAc,CAACxD,MAAOA,EAAQsB,SAAAL,KAA+B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("formik"),r=require("react"),n=require("./GenericAutocompleteField.cjs.js"),u=require("lodash.debounce"),o=require("@tanstack/react-query");module.exports=a=>{const{fieldName:s,fetch:c,onChange:i,onInputChange:l,onScroll:g}=a,{values:d}=t.useFormikContext(),[h,q]=r.useState(d[s]?[d[s]]:[]),[f,m]=r.useState(1),[p,y]=r.useState(""),[C,S]=r.useState(!0),{data:j,isLoading:k}=o.useQuery({queryKey:[`PaginatedAutocompleteField-${s}`,f,p],queryFn:()=>c(f,p),retry:1});r.useEffect((()=>{j&&0!==j.length?(S(!0),q(1===f?j:e=>[...e,...j])):S(!1)}),[j]);const x=r.useCallback((()=>{!k&&C&&m((e=>e+1))}),[k,C]),F=u((e=>{m(1),y(e),S(!0)}),500);return r.useEffect((()=>()=>{F.cancel()}),[F]),e.jsx(n,{...a,options:h,loading:k,onChange:(e,t)=>{y(""),i&&i(e,t)},onInputChange:(e,t)=>{F(t),l&&l(e,t)},onScroll:e=>{(e=>{const t=e.currentTarget;t.scrollTop+t.clientHeight>=t.scrollHeight-100&&x()})(e),g&&g(e)}})};
|
|
2
|
+
//# sourceMappingURL=PaginatedAutocompleteField.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginatedAutocompleteField.cjs.js","sources":["../../../../src/components/ui/Form/PaginatedAutocompleteField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useFormikContext } from 'formik';\nimport { SyntheticEvent, useCallback, useEffect, useState } from 'react';\nimport GenericAutocompleteField, { Props as GenericAutocompleteFieldProps } from './GenericAutocompleteField';\nimport debounce from 'lodash.debounce';\nimport { useQuery } from '@tanstack/react-query';\n\ntype Props<T> = Omit<GenericAutocompleteFieldProps<T>, 'options'> & {\n fetch: (page: number, search: string) => Promise<T[]>;\n};\n\nconst PaginatedAutocompleteField = <T,>(props: Props<T>) => {\n const { fieldName, fetch, onChange, onInputChange, onScroll } = props;\n const { values } = useFormikContext<{ [key: string]: any }>();\n\n const [options, setOptions] = useState<T[]>(values[fieldName] ? [values[fieldName]] : []);\n const [page, setPage] = useState(1);\n const [searchQuery, setSearchQuery] = useState('');\n const [hasMore, setHasMore] = useState(true);\n\n const { data: queryResult, isLoading } = useQuery({\n queryKey: [`PaginatedAutocompleteField-${fieldName}`, page, searchQuery],\n queryFn: () => fetch(page, searchQuery),\n retry: 1,\n });\n\n useEffect(() => {\n if (!queryResult || queryResult.length === 0) {\n setHasMore(false);\n return;\n }\n setHasMore(true);\n if (page === 1) {\n setOptions(queryResult);\n } else {\n setOptions((prevVouchers) => [...prevVouchers, ...queryResult]);\n }\n }, [queryResult]);\n\n const loadMore = useCallback(() => {\n if (isLoading || !hasMore) {\n return;\n }\n setPage((prevPage) => prevPage + 1);\n }, [isLoading, hasMore]);\n\n const handleScroll = (event: React.UIEvent<HTMLUListElement, UIEvent>) => {\n const listboxNode = event.currentTarget;\n if (\n listboxNode.scrollTop + listboxNode.clientHeight >=\n listboxNode.scrollHeight - 100 // Trigger 100px before the bottom\n ) {\n loadMore();\n }\n };\n\n const handleInputChange = debounce((value: string) => {\n setPage(1);\n setSearchQuery(value);\n setHasMore(true);\n }, 500);\n\n useEffect(() => {\n return () => {\n handleInputChange.cancel();\n };\n }, [handleInputChange]);\n\n return (\n <GenericAutocompleteField\n {...props}\n options={options}\n loading={isLoading}\n onChange={(e: SyntheticEvent, value: T[]) => {\n setSearchQuery('');\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={(e: SyntheticEvent, value: string) => {\n handleInputChange(value);\n if (onInputChange) {\n onInputChange(e, value);\n }\n }}\n onScroll={(e: React.UIEvent<HTMLUListElement, UIEvent>) => {\n handleScroll(e);\n if (onScroll) {\n onScroll(e);\n }\n }}\n />\n );\n};\n\nexport default PaginatedAutocompleteField;\n"],"names":["props","fieldName","fetch","onChange","onInputChange","onScroll","values","useFormikContext","options","setOptions","useState","page","setPage","searchQuery","setSearchQuery","hasMore","setHasMore","data","queryResult","isLoading","useQuery","queryKey","queryFn","retry","useEffect","length","prevVouchers","loadMore","useCallback","prevPage","handleInputChange","debounce","value","cancel","_jsx","GenericAutocompleteField","loading","e","event","listboxNode","currentTarget","scrollTop","clientHeight","scrollHeight","handleScroll"],"mappings":"qNAWwCA,IACpC,MAAMC,UAAEA,EAASC,MAAEA,EAAKC,SAAEA,EAAQC,cAAEA,EAAaC,SAAEA,GAAaL,GAC1DM,OAAEA,GAAWC,EAAAA,oBAEZC,EAASC,GAAcC,EAAQA,SAAMJ,EAAOL,GAAa,CAACK,EAAOL,IAAc,KAC/EU,EAAMC,GAAWF,EAAQA,SAAC,IAC1BG,EAAaC,GAAkBJ,EAAQA,SAAC,KACxCK,EAASC,GAAcN,EAAQA,UAAC,IAE/BO,KAAMC,EAAWC,UAAEA,GAAcC,EAAAA,SAAS,CAC9CC,SAAU,CAAC,8BAA8BpB,IAAaU,EAAME,GAC5DS,QAAS,IAAMpB,EAAMS,EAAME,GAC3BU,MAAO,IAGXC,EAAAA,WAAU,KACDN,GAAsC,IAAvBA,EAAYO,QAIhCT,GAAW,GAEPP,EADS,IAATE,EACWO,EAECQ,GAAiB,IAAIA,KAAiBR,KAPlDF,GAAW,EAQd,GACF,CAACE,IAEJ,MAAMS,EAAWC,EAAAA,aAAY,MACrBT,GAAcJ,GAGlBH,GAASiB,GAAaA,EAAW,GAAE,GACpC,CAACV,EAAWJ,IAYTe,EAAoBC,GAAUC,IAChCpB,EAAQ,GACRE,EAAekB,GACfhB,GAAW,EAAK,GACjB,KAQH,OANAQ,EAAAA,WAAU,IACC,KACHM,EAAkBG,QAAQ,GAE/B,CAACH,IAGAI,MAACC,EAAwB,IACjBnC,EACJQ,QAASA,EACT4B,QAASjB,EACThB,SAAU,CAACkC,EAAmBL,KAC1BlB,EAAe,IACXX,GACAA,EAASkC,EAAGL,EACf,EAEL5B,cAAe,CAACiC,EAAmBL,KAC/BF,EAAkBE,GACd5B,GACAA,EAAciC,EAAGL,EACpB,EAEL3B,SAAWgC,IAvCE,CAACC,IAClB,MAAMC,EAAcD,EAAME,cAEtBD,EAAYE,UAAYF,EAAYG,cACpCH,EAAYI,aAAe,KAE3BhB,GACH,EAiCOiB,CAAaP,GACThC,GACAA,EAASgC,EACZ,GAGX"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Props as Props$1 } from './GenericAutocompleteField.js';
|
|
3
|
+
|
|
4
|
+
type Props<T> = Omit<Props$1<T>, 'options'> & {
|
|
5
|
+
fetch: (page: number, search: string) => Promise<T[]>;
|
|
6
|
+
};
|
|
7
|
+
declare const PaginatedAutocompleteField: <T>(props: Props<T>) => react_jsx_runtime.JSX.Element;
|
|
8
|
+
|
|
9
|
+
export { PaginatedAutocompleteField as default };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{useFormikContext as e}from"formik";import{useState as t,useEffect as r,useCallback as n}from"react";import a from"./GenericAutocompleteField.js";import c from"lodash.debounce";import{useQuery as i}from"@tanstack/react-query";const l=l=>{const{fieldName:m,fetch:s,onChange:p,onInputChange:u,onScroll:g}=l,{values:d}=e(),[f,h]=t(d[m]?[d[m]]:[]),[y,C]=t(1),[q,F]=t(""),[j,k]=t(!0),{data:x,isLoading:A}=i({queryKey:[`PaginatedAutocompleteField-${m}`,y,q],queryFn:()=>s(y,q),retry:1});r((()=>{x&&0!==x.length?(k(!0),h(1===y?x:o=>[...o,...x])):k(!1)}),[x]);const H=n((()=>{!A&&j&&C((o=>o+1))}),[A,j]),I=c((o=>{C(1),F(o),k(!0)}),500);return r((()=>()=>{I.cancel()}),[I]),o(a,{...l,options:f,loading:A,onChange:(o,e)=>{F(""),p&&p(o,e)},onInputChange:(o,e)=>{I(e),u&&u(o,e)},onScroll:o=>{(o=>{const e=o.currentTarget;e.scrollTop+e.clientHeight>=e.scrollHeight-100&&H()})(o),g&&g(o)}})};export{l as default};
|
|
2
|
+
//# sourceMappingURL=PaginatedAutocompleteField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginatedAutocompleteField.js","sources":["../../../../src/components/ui/Form/PaginatedAutocompleteField.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useFormikContext } from 'formik';\nimport { SyntheticEvent, useCallback, useEffect, useState } from 'react';\nimport GenericAutocompleteField, { Props as GenericAutocompleteFieldProps } from './GenericAutocompleteField';\nimport debounce from 'lodash.debounce';\nimport { useQuery } from '@tanstack/react-query';\n\ntype Props<T> = Omit<GenericAutocompleteFieldProps<T>, 'options'> & {\n fetch: (page: number, search: string) => Promise<T[]>;\n};\n\nconst PaginatedAutocompleteField = <T,>(props: Props<T>) => {\n const { fieldName, fetch, onChange, onInputChange, onScroll } = props;\n const { values } = useFormikContext<{ [key: string]: any }>();\n\n const [options, setOptions] = useState<T[]>(values[fieldName] ? [values[fieldName]] : []);\n const [page, setPage] = useState(1);\n const [searchQuery, setSearchQuery] = useState('');\n const [hasMore, setHasMore] = useState(true);\n\n const { data: queryResult, isLoading } = useQuery({\n queryKey: [`PaginatedAutocompleteField-${fieldName}`, page, searchQuery],\n queryFn: () => fetch(page, searchQuery),\n retry: 1,\n });\n\n useEffect(() => {\n if (!queryResult || queryResult.length === 0) {\n setHasMore(false);\n return;\n }\n setHasMore(true);\n if (page === 1) {\n setOptions(queryResult);\n } else {\n setOptions((prevVouchers) => [...prevVouchers, ...queryResult]);\n }\n }, [queryResult]);\n\n const loadMore = useCallback(() => {\n if (isLoading || !hasMore) {\n return;\n }\n setPage((prevPage) => prevPage + 1);\n }, [isLoading, hasMore]);\n\n const handleScroll = (event: React.UIEvent<HTMLUListElement, UIEvent>) => {\n const listboxNode = event.currentTarget;\n if (\n listboxNode.scrollTop + listboxNode.clientHeight >=\n listboxNode.scrollHeight - 100 // Trigger 100px before the bottom\n ) {\n loadMore();\n }\n };\n\n const handleInputChange = debounce((value: string) => {\n setPage(1);\n setSearchQuery(value);\n setHasMore(true);\n }, 500);\n\n useEffect(() => {\n return () => {\n handleInputChange.cancel();\n };\n }, [handleInputChange]);\n\n return (\n <GenericAutocompleteField\n {...props}\n options={options}\n loading={isLoading}\n onChange={(e: SyntheticEvent, value: T[]) => {\n setSearchQuery('');\n if (onChange) {\n onChange(e, value);\n }\n }}\n onInputChange={(e: SyntheticEvent, value: string) => {\n handleInputChange(value);\n if (onInputChange) {\n onInputChange(e, value);\n }\n }}\n onScroll={(e: React.UIEvent<HTMLUListElement, UIEvent>) => {\n handleScroll(e);\n if (onScroll) {\n onScroll(e);\n }\n }}\n />\n );\n};\n\nexport default PaginatedAutocompleteField;\n"],"names":["PaginatedAutocompleteField","props","fieldName","fetch","onChange","onInputChange","onScroll","values","useFormikContext","options","setOptions","useState","page","setPage","searchQuery","setSearchQuery","hasMore","setHasMore","data","queryResult","isLoading","useQuery","queryKey","queryFn","retry","useEffect","length","prevVouchers","loadMore","useCallback","prevPage","handleInputChange","debounce","value","cancel","_jsx","GenericAutocompleteField","loading","e","event","listboxNode","currentTarget","scrollTop","clientHeight","scrollHeight","handleScroll"],"mappings":"gRAWA,MAAMA,EAAkCC,IACpC,MAAMC,UAAEA,EAASC,MAAEA,EAAKC,SAAEA,EAAQC,cAAEA,EAAaC,SAAEA,GAAaL,GAC1DM,OAAEA,GAAWC,KAEZC,EAASC,GAAcC,EAAcJ,EAAOL,GAAa,CAACK,EAAOL,IAAc,KAC/EU,EAAMC,GAAWF,EAAS,IAC1BG,EAAaC,GAAkBJ,EAAS,KACxCK,EAASC,GAAcN,GAAS,IAE/BO,KAAMC,EAAWC,UAAEA,GAAcC,EAAS,CAC9CC,SAAU,CAAC,8BAA8BpB,IAAaU,EAAME,GAC5DS,QAAS,IAAMpB,EAAMS,EAAME,GAC3BU,MAAO,IAGXC,GAAU,KACDN,GAAsC,IAAvBA,EAAYO,QAIhCT,GAAW,GAEPP,EADS,IAATE,EACWO,EAECQ,GAAiB,IAAIA,KAAiBR,KAPlDF,GAAW,EAQd,GACF,CAACE,IAEJ,MAAMS,EAAWC,GAAY,MACrBT,GAAcJ,GAGlBH,GAASiB,GAAaA,EAAW,GAAE,GACpC,CAACV,EAAWJ,IAYTe,EAAoBC,GAAUC,IAChCpB,EAAQ,GACRE,EAAekB,GACfhB,GAAW,EAAK,GACjB,KAQH,OANAQ,GAAU,IACC,KACHM,EAAkBG,QAAQ,GAE/B,CAACH,IAGAI,EAACC,EAAwB,IACjBnC,EACJQ,QAASA,EACT4B,QAASjB,EACThB,SAAU,CAACkC,EAAmBL,KAC1BlB,EAAe,IACXX,GACAA,EAASkC,EAAGL,EACf,EAEL5B,cAAe,CAACiC,EAAmBL,KAC/BF,EAAkBE,GACd5B,GACAA,EAAciC,EAAGL,EACpB,EAEL3B,SAAWgC,IAvCE,CAACC,IAClB,MAAMC,EAAcD,EAAME,cAEtBD,EAAYE,UAAYF,EAAYG,cACpCH,EAAYI,aAAe,KAE3BhB,GACH,EAiCOiB,CAAaP,GACThC,GACAA,EAASgC,EACZ,GAGX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/portal-library",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.44",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
"@mui/icons-material": "5.16.7",
|
|
12
12
|
"@mui/material": "5.16.7",
|
|
13
13
|
"@mui/x-date-pickers": "^7.22.2",
|
|
14
|
+
"@tanstack/react-query": "^5.62.0",
|
|
14
15
|
"formik": "^2.4.6",
|
|
16
|
+
"lodash.debounce": "^4.0.8",
|
|
15
17
|
"moment": "^2.30.1",
|
|
16
18
|
"react": "18.3.1",
|
|
17
19
|
"react-dom": "18.3.1",
|
|
@@ -32,6 +34,7 @@
|
|
|
32
34
|
"@storybook/react": "^8.3.5",
|
|
33
35
|
"@storybook/react-vite": "^8.3.5",
|
|
34
36
|
"@storybook/test": "^8.3.5",
|
|
37
|
+
"@tanstack/react-query": "^5.62.0",
|
|
35
38
|
"@testing-library/jest-dom": "6.6.2",
|
|
36
39
|
"@testing-library/react": "15.0.7",
|
|
37
40
|
"@types/react": "18.3.11",
|
|
@@ -45,6 +48,7 @@
|
|
|
45
48
|
"eslint-plugin-react-refresh": "0.4.12",
|
|
46
49
|
"eslint-plugin-storybook": "^0.9.0",
|
|
47
50
|
"jsdom": "24.1.3",
|
|
51
|
+
"lodash.debounce": "^4.0.8",
|
|
48
52
|
"prompt-sync": "^4.2.0",
|
|
49
53
|
"rollup": "^4.24.0",
|
|
50
54
|
"rollup-plugin-dts": "^6.1.1",
|