@addsign/moje-agenda-shared-lib 0.0.55 → 0.0.57
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/assets/tailwind.css +31 -16
- package/dist/components/datatable/DataTable.js +1 -1
- package/dist/components/datatable/DataTableServer.js +198 -186
- package/dist/components/datatable/DataTableServer.js.map +1 -1
- package/dist/components/form/AutocompleteSearchBar.js +3 -3
- package/dist/components/form/AutocompleteSearchBar.js.map +1 -1
- package/dist/components/form/FileInput.js +1 -1
- package/dist/components/form/FormField.js +1 -1
- package/dist/components/form/InputField.d.ts +6 -0
- package/dist/components/form/InputField.js +144 -0
- package/dist/components/form/InputField.js.map +1 -0
- package/dist/components/form/PositionsSelectorSingle.js +1 -1
- package/dist/components/form/SelectField.d.ts +3 -19
- package/dist/components/form/SelectField.js +33 -19
- package/dist/components/form/SelectField.js.map +1 -1
- package/dist/{index-qxZYrVct.js → index-BDqNIr_C.js} +12 -12
- package/dist/{index-qxZYrVct.js.map → index-BDqNIr_C.js.map} +1 -1
- package/dist/types.d.ts +18 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n Button,\r\n DataTableColumn,\r\n FormField,\r\n IPageable,\r\n handleErrors,\r\n useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n MdArrowBack,\r\n MdArrowDownward,\r\n MdArrowForward,\r\n MdArrowUpward,\r\n MdClose,\r\n MdOutlineFilterAlt,\r\n MdOutlineFilterAltOff,\r\n MdSearch,\r\n} from \"react-icons/md\";\r\n\r\ninterface DataTableServerProps<T> {\r\n url: string;\r\n columns: DataTableColumn<T | \"actions\">[];\r\n itemsPerPage?: number;\r\n title?: string;\r\n subtitle?: string;\r\n allowSearch?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n url,\r\n columns,\r\n itemsPerPage = 10,\r\n title,\r\n subtitle,\r\n allowSearch = true,\r\n}: DataTableServerProps<T>) {\r\n const federationContext = useFederationContext();\r\n const [data, setData] = useState<IPageable<T>>();\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [currentPage, setCurrentPage] = useState(0);\r\n const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n {}\r\n );\r\n\r\n const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n const [sortConfig, setSortConfig] = useState<{\r\n sortParam: string;\r\n direction: \"ascending\" | \"descending\" | null;\r\n } | null>(null);\r\n useEffect(() => {\r\n setIsLoading(true);\r\n\r\n federationContext.apiClient\r\n .get(url, {\r\n params: {\r\n ...columnFilters,\r\n pageSize: itemsPerPage,\r\n page: currentPage,\r\n sortBy: sortConfig?.sortParam,\r\n sortDirection: sortConfig?.direction,\r\n },\r\n })\r\n .then((response) => {\r\n setData(response.data);\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n console.error(\"Error fetching data:\", error);\r\n handleErrors(error, federationContext.emitter);\r\n setIsLoading(false);\r\n });\r\n }, [url, columnFilters, itemsPerPage, currentPage, sortConfig]);\r\n\r\n useEffect(() => {\r\n const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n if (!column.filterSource) {\r\n } else {\r\n try {\r\n const response = await federationContext.apiClient.get(\r\n column.filterSource\r\n );\r\n\r\n const options = response.data.map((item: any) => ({\r\n value: item[column.filterValueKey as keyof typeof item],\r\n label: item[column.filterLabelKey as keyof typeof item],\r\n }));\r\n return options;\r\n } catch (error) {\r\n console.error(\"Error fetching filter options:\", error);\r\n return [];\r\n }\r\n }\r\n };\r\n\r\n const updateFilterOptions = async () => {\r\n const newFilterOptions: Record<string, any[]> = {};\r\n\r\n for (const column of columns) {\r\n if (\r\n column.filterType &&\r\n column.filterSource &&\r\n column.filterValueKey &&\r\n column.filterLabelKey &&\r\n column.filterParam\r\n ) {\r\n const options = await fetchFilterOptions(column);\r\n\r\n if (options) {\r\n newFilterOptions[column.filterParam as string] = [\r\n { value: \"\", label: \"\" },\r\n ...options,\r\n ];\r\n }\r\n }\r\n }\r\n console.log(\r\n \"%clibcomponentsdatatableDataTable.tsx:142 newFilterOptions\",\r\n \"color: #007acc;\",\r\n newFilterOptions\r\n );\r\n setFilterOptions(newFilterOptions);\r\n };\r\n console.log(\r\n \"%clibcomponentsDataTable.tsx:162 items, columns\",\r\n \"color: #007acc;\",\r\n columns\r\n );\r\n updateFilterOptions();\r\n }, [columns]);\r\n\r\n const requestSort = (sortParam: string) => {\r\n setSortConfig((prevSortConfig) => {\r\n if (\r\n prevSortConfig?.sortParam === sortParam &&\r\n prevSortConfig.direction !== null\r\n ) {\r\n return prevSortConfig.direction === \"ascending\"\r\n ? { sortParam, direction: \"descending\" }\r\n : null;\r\n } else {\r\n return { sortParam, direction: \"ascending\" };\r\n }\r\n });\r\n };\r\n\r\n const getSortIcon = (sortParam: string) => {\r\n if (sortConfig?.sortParam === sortParam) {\r\n return sortConfig.direction === \"ascending\" ? (\r\n <MdArrowUpward fontSize=\"small\" />\r\n ) : sortConfig.direction === \"descending\" ? (\r\n <MdArrowDownward fontSize=\"small\" />\r\n ) : (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n }\r\n return (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n };\r\n\r\n const nextPage = () => {\r\n setCurrentPage(currentPage + 1);\r\n };\r\n\r\n const prevPage = () => {\r\n setCurrentPage(currentPage - 1);\r\n };\r\n const handleSearchChanged = (\r\n e: React.ChangeEvent<\r\n HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n >\r\n ) => {\r\n console.log(\r\n \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n \"color: #007acc;\",\r\n e\r\n );\r\n setFulltextSearch(e.target?.value);\r\n setCurrentPage(0);\r\n };\r\n\r\n // Pagination display logic\r\n const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n const filterHandler = (filterParam: keyof T, value: string) => {\r\n console.log(\r\n \"%clibcomponentsdatatableDataTable.tsx:223 object filterParam, value, columnFilters \",\r\n \"color: #007acc;\",\r\n filterParam,\r\n value,\r\n columnFilters\r\n );\r\n setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n setCurrentPage(0);\r\n };\r\n const handleToggleShowColFilters = () => {\r\n setShowColFilters(!showColFilters);\r\n if (!showColFilters) {\r\n setColumnFilters({});\r\n }\r\n };\r\n\r\n //if (isLoading) return <Spinner />;\r\n return (\r\n <>\r\n <div className=\"container shadow-lg border border-gray-200 rounded-xl overflow-hidden \">\r\n {(title || subtitle || allowSearch) && (\r\n <div className=\"p-5 leading-9 flex \">\r\n <div className=\"flex-grow\">\r\n {title && (\r\n <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n {title}\r\n </h1>\r\n )}\r\n {subtitle && (\r\n <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n )}\r\n </div>\r\n\r\n <div\r\n className=\"flex items-center text-xl h-full p-3 cursor-pointer text-gray-500 \"\r\n onClick={handleToggleShowColFilters}\r\n >\r\n {!showColFilters && <MdOutlineFilterAlt />}\r\n {showColFilters && <MdOutlineFilterAltOff />}\r\n </div>\r\n {allowSearch && (\r\n <div className=\"ml-5\">\r\n <FormField\r\n placeholder=\"Vyhledávání\"\r\n name=\"search\"\r\n onInputChange={handleSearchChanged}\r\n type=\"text\"\r\n value={fulltextSearch}\r\n >\r\n {\" \"}\r\n <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n {!fulltextSearch && <MdSearch></MdSearch>}\r\n {fulltextSearch && (\r\n <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n )}\r\n </div>\r\n </FormField>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full leading-normal\">\r\n <thead>\r\n {showColFilters &&\r\n columns.findIndex((it) => it.filterType) > -1 && (\r\n <tr>\r\n {columns.map(({ key, header, filterType, filterParam }) => (\r\n <th\r\n key={String(key) + \"_filter\"}\r\n id={String(key) + \"_filter\"}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={` font-medium cursor-pointer leading-9 text-xs text-left p-0 pb-5 text-gray-600 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n }`}\r\n >\r\n {filterType && (\r\n <div className=\"ml-5\">\r\n <FormField\r\n label={header}\r\n name={String(key) + \"_filter\"}\r\n onInputChange={(e) =>\r\n filterHandler(\r\n filterParam as keyof T,\r\n e.target.value\r\n )\r\n }\r\n type={filterType}\r\n options={filterOptions[String(filterParam)] || []}\r\n value={columnFilters[String(filterParam)]}\r\n clearable\r\n className=\"max-w-[300px] min-w-[100px]\"\r\n ></FormField>\r\n </div>\r\n )}\r\n </th>\r\n ))}\r\n </tr>\r\n )}\r\n <tr>\r\n {columns.map(({ key, header, actions, sortParam }) => (\r\n <th\r\n key={String(key)}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={`group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n onClick={() =>\r\n sortParam ? requestSort(sortParam) : () => {}\r\n }\r\n >\r\n <span className=\"inline-flex items-center gap-2\">\r\n {header}{\" \"}\r\n {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n </span>\r\n </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n\r\n {!isLoading && (\r\n <tbody>\r\n {data &&\r\n data.content &&\r\n data.content.map((item, rowIndex) => (\r\n <tr\r\n key={rowIndex}\r\n className={`${\r\n item._isHighlighted ? \" bg-gray-200 \" : \" \"\r\n } hover:bg-gray-50 border-gray-200 border-b text-sm `}\r\n >\r\n {columns.map(({ render, actions, classes }, colIndex) => (\r\n <td\r\n key={`${rowIndex}-${colIndex}`}\r\n className={`px-5 py-2\r\n ${\r\n colIndex == 0\r\n ? \" font-medium text-gray-900\"\r\n : \" text-gray-700\"\r\n } ${classes || \"\"}`}\r\n >\r\n {render ? render(item) : \"\"}\r\n {actions &&\r\n actions\r\n .filter((it) => {\r\n if (it.visible) {\r\n return it.visible(item);\r\n } else true;\r\n })\r\n .map((action, actionIndex) => (\r\n <div\r\n key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n className=\"flex inline-flex align-middle\"\r\n >\r\n {action.icon && (\r\n <Button\r\n variant=\"icon\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.icon}\r\n </Button>\r\n )}\r\n {!action.icon && (\r\n <Button\r\n variant=\"transparent\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.label}\r\n </Button>\r\n )}\r\n </div>\r\n ))}\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n {data?.content?.length == 0 && (\r\n <tr key=\"tr-nodata \">\r\n <td\r\n key=\"td-nodata\"\r\n className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n colSpan={columns.length}\r\n >\r\n Žádná data\r\n </td>\r\n </tr>\r\n )}\r\n </tbody>\r\n )}\r\n </table>\r\n </div>\r\n <div className=\"w-full p-5 grid grid-cols-3\">\r\n <div className=\"text-left items-start justify-start\">\r\n {data && !data.first && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={prevPage}\r\n className=\"flex items-center float-left\"\r\n >\r\n <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n </Button>\r\n )}\r\n </div>\r\n <div className=\" text-center text-xs text-gray-800\">\r\n {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n </div>\r\n <div className=\"text-right items-end justify-end\">\r\n {data && !data.last && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={nextPage}\r\n className=\"flex items-center float-right\"\r\n >\r\n Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTableServer.js","sources":["../../../lib/components/datatable/DataTableServer.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\nimport {\r\n Button,\r\n DataTableColumn,\r\n FormField,\r\n IPageable,\r\n Spinner,\r\n handleErrors,\r\n useFederationContext,\r\n} from \"../../main\";\r\nimport {\r\n MdArrowBack,\r\n MdArrowDownward,\r\n MdArrowForward,\r\n MdArrowUpward,\r\n MdClose,\r\n MdOutlineFilterAlt,\r\n MdOutlineFilterAltOff,\r\n MdSearch,\r\n} from \"react-icons/md\";\r\nimport SelectField from \"../form/SelectField\";\r\nimport InputField from \"../form/InputField\";\r\n\r\ninterface DataTableServerProps<T> {\r\n url: string;\r\n columns: DataTableColumn<T | \"actions\">[];\r\n itemsPerPage?: number;\r\n title?: string;\r\n subtitle?: string;\r\n allowSearch?: boolean;\r\n}\r\n\r\ntype DataTableInternalItems = {\r\n _isHighlighted?: boolean;\r\n};\r\n\r\nfunction DataTableServer<T extends DataTableInternalItems>({\r\n url,\r\n columns,\r\n itemsPerPage = 10,\r\n title,\r\n subtitle,\r\n allowSearch = true,\r\n}: DataTableServerProps<T>) {\r\n const federationContext = useFederationContext();\r\n const [data, setData] = useState<IPageable<T>>();\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [currentPage, setCurrentPage] = useState(0);\r\n const [fulltextSearch, setFulltextSearch] = useState(\"\");\r\n const [filterOptions, setFilterOptions] = useState<Record<string, any[]>>({});\r\n const [columnFilters, setColumnFilters] = useState<Record<string, string>>(\r\n {}\r\n );\r\n\r\n const [showColFilters, setShowColFilters] = useState(false);\r\n\r\n const [sortConfig, setSortConfig] = useState<{\r\n sortParam: string;\r\n direction: \"ascending\" | \"descending\" | null;\r\n } | null>(null);\r\n useEffect(() => {\r\n setIsLoading(true);\r\n federationContext.apiClient\r\n .get(url, {\r\n params: {\r\n ...columnFilters,\r\n pageSize: itemsPerPage,\r\n page: currentPage,\r\n sortBy: sortConfig?.sortParam,\r\n sortDirection: sortConfig?.direction,\r\n },\r\n })\r\n .then((response) => {\r\n setData(response.data);\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n console.error(\"Error fetching data:\", error);\r\n handleErrors(error, federationContext.emitter);\r\n setIsLoading(false);\r\n });\r\n }, [url, columnFilters, itemsPerPage, currentPage, sortConfig]);\r\n\r\n useEffect(() => {\r\n const fetchFilterOptions = async (column: DataTableColumn<T>) => {\r\n if (!column.filterSource) {\r\n } else {\r\n try {\r\n const response = await federationContext.apiClient.get(\r\n column.filterSource\r\n );\r\n\r\n const options = response.data.map((item: any) => ({\r\n value: item[column.filterValueKey as keyof typeof item],\r\n label: item[column.filterLabelKey as keyof typeof item],\r\n }));\r\n return options;\r\n } catch (error) {\r\n console.error(\"Error fetching filter options:\", error);\r\n return [];\r\n }\r\n }\r\n };\r\n\r\n const updateFilterOptions = async () => {\r\n const newFilterOptions: Record<string, any[]> = {};\r\n\r\n for (const column of columns) {\r\n if (\r\n column.filterType &&\r\n column.filterSource &&\r\n column.filterValueKey &&\r\n column.filterLabelKey &&\r\n column.filterParam\r\n ) {\r\n const options = await fetchFilterOptions(column);\r\n\r\n if (options) {\r\n newFilterOptions[column.filterParam as string] = [\r\n { value: \"\", label: \"\" },\r\n ...options,\r\n ];\r\n }\r\n }\r\n }\r\n\r\n setFilterOptions(newFilterOptions);\r\n };\r\n\r\n updateFilterOptions();\r\n }, [columns]);\r\n\r\n const requestSort = (sortParam: string) => {\r\n setSortConfig((prevSortConfig) => {\r\n if (\r\n prevSortConfig?.sortParam === sortParam &&\r\n prevSortConfig.direction !== null\r\n ) {\r\n return prevSortConfig.direction === \"ascending\"\r\n ? { sortParam, direction: \"descending\" }\r\n : null;\r\n } else {\r\n return { sortParam, direction: \"ascending\" };\r\n }\r\n });\r\n };\r\n\r\n const getSortIcon = (sortParam: string) => {\r\n if (sortConfig?.sortParam === sortParam) {\r\n return sortConfig.direction === \"ascending\" ? (\r\n <MdArrowUpward fontSize=\"small\" />\r\n ) : sortConfig.direction === \"descending\" ? (\r\n <MdArrowDownward fontSize=\"small\" />\r\n ) : (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n }\r\n return (\r\n <MdArrowUpward\r\n fontSize=\"small\"\r\n className=\"text-gray-300 invisible group-hover:visible \"\r\n />\r\n );\r\n };\r\n\r\n const nextPage = () => {\r\n setCurrentPage(currentPage + 1);\r\n };\r\n\r\n const prevPage = () => {\r\n setCurrentPage(currentPage - 1);\r\n };\r\n const handleSearchChanged = (\r\n e: React.ChangeEvent<\r\n HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\r\n >\r\n ) => {\r\n console.log(\r\n \"%clibcomponentsdatatableDataTable.tsx:238 e\",\r\n \"color: #007acc;\",\r\n e\r\n );\r\n setFulltextSearch(e.target?.value);\r\n setCurrentPage(0);\r\n };\r\n\r\n // Pagination display logic\r\n const paginationDisplay = `Strana ${currentPage + 1} z ${data?.totalPages}`;\r\n\r\n const filterHandler = (filterParam: keyof T, value: string) => {\r\n setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));\r\n setCurrentPage(0);\r\n };\r\n const handleToggleShowColFilters = () => {\r\n if (showColFilters) {\r\n setColumnFilters({});\r\n }\r\n setShowColFilters(!showColFilters);\r\n };\r\n\r\n //if (isLoading) return <Spinner />;\r\n return (\r\n <>\r\n <div\r\n className=\"shadow-lg border border-gray-200 rounded-xl overflow-x-auto\"\r\n style={{ overflowY: \"visible\" }}\r\n >\r\n {(title || subtitle || allowSearch) && (\r\n <div className=\"p-5 leading-9 flex \">\r\n <div className=\"flex-grow\">\r\n {title && (\r\n <h1 className=\"font-semibold text-xl leading-[42px] \">\r\n {title}\r\n </h1>\r\n )}\r\n {subtitle && (\r\n <p className=\"font-normal text-gray-600\">{subtitle}</p>\r\n )}\r\n </div>\r\n\r\n <div\r\n className=\"flex items-center text-xl h-full p-3 cursor-pointer text-gray-500 \"\r\n onClick={handleToggleShowColFilters}\r\n >\r\n {!showColFilters && <MdOutlineFilterAlt />}\r\n {showColFilters && <MdOutlineFilterAltOff />}\r\n </div>\r\n {allowSearch && (\r\n <div className=\"ml-5\">\r\n <FormField\r\n placeholder=\"Vyhledávání\"\r\n name=\"search\"\r\n onInputChange={handleSearchChanged}\r\n type=\"text\"\r\n value={fulltextSearch}\r\n >\r\n {\" \"}\r\n <div className=\" text-gray-500 leading-5 flex items-center h-full\">\r\n {!fulltextSearch && <MdSearch></MdSearch>}\r\n {fulltextSearch && (\r\n <MdClose onClick={() => setFulltextSearch(\"\")}></MdClose>\r\n )}\r\n </div>\r\n </FormField>\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n <div className=\"\">\r\n <table className=\"w-full leading-normal \">\r\n <thead>\r\n {showColFilters &&\r\n columns.findIndex((it) => it.filterType) > -1 && (\r\n <tr>\r\n {columns.map(({ key, header, filterType, filterParam }) => (\r\n <th\r\n key={String(key) + \"_filter\"}\r\n id={String(key) + \"_filter\"}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={` font-medium leading-9 text-xs text-left p-0 pb-5 text-gray-600 overflow-ellipsis \r\n whitespace-nowrap ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n }`}\r\n >\r\n {filterType && filterType === \"select\" && (\r\n <SelectField\r\n label={header}\r\n name={String(key) + \"_filter\"}\r\n onInputChange={(e) =>\r\n filterHandler(\r\n filterParam as keyof T,\r\n e.target.value\r\n )\r\n }\r\n type={filterType}\r\n options={filterOptions[String(filterParam)] || []}\r\n value={columnFilters[String(filterParam)]}\r\n clearable\r\n className=\"pl-5\"\r\n ></SelectField>\r\n )}\r\n {filterType && filterType !== \"select\" && (\r\n <InputField\r\n label={header}\r\n name={String(key) + \"_filter\"}\r\n onInputChange={(e) =>\r\n filterHandler(\r\n filterParam as keyof T,\r\n e.target.value\r\n )\r\n }\r\n type={filterType}\r\n value={columnFilters[String(filterParam)]}\r\n clearable\r\n className=\"max-w-[300px] min-w-[100px] pl-5\"\r\n ></InputField>\r\n )}\r\n </th>\r\n ))}\r\n </tr>\r\n )}\r\n <tr>\r\n {columns.map(({ key, header, actions, sortParam }) => (\r\n <th\r\n key={String(key)}\r\n // className=\"cursor-pointer px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-medium text-gray-600 uppercase tracking-wider\"\r\n className={`group font-medium leading-9 text-xs text-left px-5 text-gray-600 bg bg-gray-50 border-t border-b border-gray-200 ${\r\n !title && !subtitle ? \"border-t-0\" : \"\"\r\n } ${sortParam ? \" cursor-pointer \" : \"\"}`}\r\n onClick={() =>\r\n sortParam ? requestSort(sortParam) : () => {}\r\n }\r\n >\r\n <span className=\"inline-flex items-center gap-2\">\r\n {header}{\" \"}\r\n {!actions && sortParam ? getSortIcon(sortParam) : \"\"}\r\n </span>\r\n </th>\r\n ))}\r\n </tr>\r\n </thead>\r\n {data && data?.content && data?.content.length > 0 && (\r\n <tbody className=\"relative\">\r\n {isLoading && (\r\n <div className=\"absolute inset-0 bg-gray-300 opacity-50 z-50\">\r\n <div className=\"flex items-center justify-center h-full\">\r\n <Spinner />\r\n </div>\r\n </div>\r\n )}\r\n {data.content.map((item, rowIndex) => (\r\n <tr\r\n key={rowIndex}\r\n className={`${\r\n item._isHighlighted ? \" bg-gray-200 \" : \" \"\r\n } hover:bg-gray-50 border-gray-200 border-b text-sm `}\r\n >\r\n {columns.map(({ render, actions, classes }, colIndex) => (\r\n <td\r\n key={`${rowIndex}-${colIndex}`}\r\n className={`px-5 py-2\r\n ${\r\n colIndex == 0\r\n ? \" font-medium text-gray-900\"\r\n : \" text-gray-700\"\r\n } ${classes || \"\"}`}\r\n >\r\n {render ? render(item) : \"\"}\r\n {actions &&\r\n actions\r\n .filter((it) => {\r\n if (it.visible) {\r\n return it.visible(item);\r\n } else true;\r\n })\r\n .map((action, actionIndex) => (\r\n <div\r\n key={`${rowIndex}-${colIndex}-${actionIndex}`}\r\n className=\"flex inline-flex align-middle\"\r\n >\r\n {action.icon && (\r\n <Button\r\n variant=\"icon\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.icon}\r\n </Button>\r\n )}\r\n {!action.icon && (\r\n <Button\r\n variant=\"transparent\"\r\n onClick={() => action.onClick(item)}\r\n >\r\n {\" \"}\r\n {action.label}\r\n </Button>\r\n )}\r\n </div>\r\n ))}\r\n </td>\r\n ))}\r\n </tr>\r\n ))}\r\n {data?.content?.length == 0 && (\r\n <tr key=\"tr-nodata \">\r\n <td\r\n key=\"td-nodata\"\r\n className=\"px-5 py-3 border-b border-gray-200 bg-white text-sm items-center justify-center align-middle\"\r\n colSpan={columns.length}\r\n >\r\n Žádná data\r\n </td>\r\n </tr>\r\n )}\r\n </tbody>\r\n )}\r\n </table>\r\n </div>\r\n <div className=\"w-full p-5 grid grid-cols-3\">\r\n <div className=\"text-left items-start justify-start\">\r\n {data && !data.first && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={prevPage}\r\n className=\"flex items-center float-left\"\r\n >\r\n <MdArrowBack className=\"mr-1.5\" /> Předchozí\r\n </Button>\r\n )}\r\n </div>\r\n <div className=\" text-center text-xs text-gray-800\">\r\n {paginationDisplay} {/* Updated to use dynamic page numbers */}\r\n </div>\r\n <div className=\"text-right items-end justify-end\">\r\n {data && !data.last && (\r\n <Button\r\n variant=\"secondary\"\r\n onClick={nextPage}\r\n className=\"flex items-center float-right\"\r\n >\r\n Následující <MdArrowForward className=\"ml-2\" size={20} />\r\n </Button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </>\r\n );\r\n}\r\n\r\nexport default DataTableServer;\r\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from "react";
|
|
3
3
|
import '../../assets/tailwind.css';/* empty css */
|
|
4
|
-
import {
|
|
4
|
+
import { M as MdExpandLess, a as MdExpandMore, b as MdClose } from "../../index-BDqNIr_C.js";
|
|
5
5
|
import "../../contexts/FederationContext.js";
|
|
6
6
|
import { useFederationContext } from "../../contexts/useFederationContext.js";
|
|
7
7
|
import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
|
|
@@ -288,7 +288,7 @@ const SearchInput = ({
|
|
|
288
288
|
"input",
|
|
289
289
|
{
|
|
290
290
|
type: "text",
|
|
291
|
-
className: `pl-1 py-1 border-gray-800 w-full ${isLoading ? "pr-10" : "pr-20"}`,
|
|
291
|
+
className: `pl-1 py-1 border-gray-800 w-full ${isLoading ? "pr-10 " : "pr-20"}`,
|
|
292
292
|
value,
|
|
293
293
|
onChange,
|
|
294
294
|
onKeyDown,
|
|
@@ -345,7 +345,7 @@ const SearchInput = ({
|
|
|
345
345
|
value && !isLoading && /* @__PURE__ */ jsx(
|
|
346
346
|
MdClose,
|
|
347
347
|
{
|
|
348
|
-
className: "material-icons absolute right-
|
|
348
|
+
className: "material-icons absolute right-6 cursor-pointer text-gray-500",
|
|
349
349
|
onClick: handleClearQuery
|
|
350
350
|
}
|
|
351
351
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n options: IOptionItem[];\r\n selectedOptionIndex: number;\r\n handleOptionClick: (option: IOptionItem) => void;\r\n}\r\n\r\ninterface SearchInputProps {\r\n value: string;\r\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n onFocus: () => void;\r\n clearQuery: () => void;\r\n inputRef: React.RefObject<HTMLInputElement>;\r\n placeholder?: string;\r\n isFocused?: boolean;\r\n onBlur: () => void;\r\n isLoading?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n label: string;\r\n name: string;\r\n required?: boolean;\r\n disabled?: boolean;\r\n description?: string;\r\n fetchUrl?: string;\r\n valueKey: string;\r\n labelKey: string;\r\n onChange: (value: any) => void;\r\n onFocus: () => void;\r\n onBlur: () => void;\r\n placeholder?: string;\r\n serverSearch?: boolean;\r\n value?: string;\r\n initOptions?: IOptionItem[];\r\n showId?: boolean;\r\n}> = ({\r\n label,\r\n name,\r\n required,\r\n disabled,\r\n description,\r\n fetchUrl,\r\n valueKey,\r\n labelKey,\r\n onChange,\r\n onFocus,\r\n onBlur,\r\n placeholder,\r\n serverSearch = false,\r\n value,\r\n initOptions,\r\n showId,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n const [options, setOptions] = useState<IOptionItem[]>([]);\r\n const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n null\r\n );\r\n const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const ref = useRef(null);\r\n const federationContext = useFederationContext();\r\n\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const [errors] = useState<any>({});\r\n\r\n useEffect(() => {\r\n const fetchOptions = async () => {\r\n setLoading(true);\r\n console.log(\r\n \"%csrcsharedAutocompleteSearchBar.tsx:77 fetchUrl, value\",\r\n \"color: #007acc;\",\r\n fetchUrl\r\n );\r\n const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n // osetreni obou variant navratu z BE\r\n const tmpData = data.content || data;\r\n\r\n setOptions(\r\n tmpData.map((item: any) => ({\r\n value: item[valueKey],\r\n label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n }))\r\n ); // Adjust map according to actual API response\r\n setLoading(false);\r\n };\r\n\r\n if (fetchUrl) fetchOptions();\r\n }, [fetchUrl]);\r\n\r\n useEffect(() => {\r\n if (initOptions) setOptions(initOptions);\r\n }, [initOptions]);\r\n\r\n useEffect(() => {\r\n if (value && options) {\r\n const initOption = options.find((it) => it.value == value);\r\n\r\n if (initOption) {\r\n setQuery(initOption.label);\r\n setSelectedOption(initOption);\r\n }\r\n }\r\n }, [value, options]);\r\n\r\n useEffect(() => {\r\n const fetchOptions = async () => {\r\n setLoading(true);\r\n const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n setOptions(\r\n data.map((item: any) => ({\r\n value: item[valueKey],\r\n label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n }))\r\n ); // Adjust map according to actual API response\r\n setSearchResults(\r\n data.map((item: any) => ({\r\n value: item[valueKey],\r\n label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n }))\r\n ); // Adjust map according to actual API response\r\n\r\n setLoading(false);\r\n };\r\n\r\n if (serverSearch) fetchOptions();\r\n }, [\r\n query,\r\n serverSearch,\r\n valueKey,\r\n labelKey,\r\n fetchUrl,\r\n federationContext.apiClient,\r\n showId,\r\n ]);\r\n\r\n useClickAway(ref, () => {\r\n setSearchResults([]);\r\n if (!selectedOption) {\r\n setQuery(\"\");\r\n onChange(null);\r\n }\r\n\r\n handleBlur();\r\n });\r\n\r\n const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setQuery(event.target.value);\r\n setSelectedOption(null);\r\n setSelectedOptionIndex(-1);\r\n setSearchResults(\r\n options.filter((option) =>\r\n option?.label\r\n ?.toLowerCase()\r\n .includes(event.target?.value?.toLowerCase())\r\n )\r\n );\r\n };\r\n const handleFocus = () => {\r\n console.log(\"handleFocus query\", query);\r\n setIsFocused(true);\r\n onFocus();\r\n setSearchResults(\r\n options /*.filter((option) =>\r\n option.label.toLowerCase().includes(query.toLowerCase()),\r\n ),*/\r\n );\r\n };\r\n\r\n const handleClearQuery = () => {\r\n console.log(\r\n \"%csrcsharedAutocompleteSearchBar.tsx:95 handleClearQuery\",\r\n \"color: #007acc;\"\r\n );\r\n setQuery(\"\");\r\n onChange(null);\r\n setSelectedOption(null);\r\n setTimeout(() => {\r\n setSelectedOptionIndex(-1);\r\n setSearchResults(options);\r\n }, 1000);\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n setSelectedOptionIndex((prevIndex) =>\r\n prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n );\r\n } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n setSelectedOptionIndex((prevIndex) =>\r\n prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n );\r\n } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n handleOptionClick(searchResults[selectedOptionIndex]);\r\n } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n handleBlur();\r\n }\r\n };\r\n\r\n const handleOptionClick = (option: IOptionItem) => {\r\n setQuery(option.label);\r\n setSelectedOption(option);\r\n setSelectedOptionIndex(-1);\r\n\r\n onChange(option.value);\r\n\r\n handleBlur();\r\n };\r\n const handleBlur = () => {\r\n setSearchResults([]);\r\n onBlur();\r\n setIsFocused(false);\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-20 flex-col justify-start items-start gap-1.5 inline-flex\">\r\n <div\r\n className=\"self-stretch min-h-14 flex-col justify-start items-start gap-1.5 flex relative\"\r\n ref={ref}\r\n >\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n <div\r\n className={`self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border \r\n ${\r\n isFocused\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n } \r\n ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } \r\n ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} \r\n ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`}\r\n >\r\n <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-8 justify-start items-start gap-2 flex relative flex-col w-full mx-auto\">\r\n <SearchInput\r\n value={query}\r\n onChange={handleQueryChange}\r\n onKeyDown={handleKeyDown}\r\n onFocus={handleFocus} // Pass the onFocus handler\r\n clearQuery={handleClearQuery} // Pass the onFocus handler\r\n inputRef={inputRef}\r\n placeholder={placeholder}\r\n isFocused={isFocused}\r\n onBlur={handleBlur}\r\n isLoading={loading}\r\n />\r\n </div>\r\n </div>\r\n {searchResults.length > 0 && (\r\n <OptionList\r\n options={searchResults}\r\n selectedOptionIndex={selectedOptionIndex}\r\n handleOptionClick={handleOptionClick}\r\n />\r\n )}\r\n </div>\r\n {description && (\r\n <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n options,\r\n selectedOptionIndex,\r\n handleOptionClick,\r\n}) => {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n // Ensure the selected option is scrolled into view\r\n if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n const selectedElement = containerRef.current?.children[\r\n selectedOptionIndex\r\n ] as HTMLDivElement;\r\n selectedElement?.scrollIntoView({\r\n behavior: \"instant\",\r\n block: \"nearest\",\r\n });\r\n }\r\n }, [selectedOptionIndex, options.length]);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className=\"overflow-y-auto resultOptionContainer w-full max-h-96 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 top-[73px]\"\r\n >\r\n {options?.map((option, index) => (\r\n <div\r\n key={option.value as string}\r\n className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer ${\r\n selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n }`}\r\n onClick={() => handleOptionClick(option)}\r\n >\r\n <p className=\"font-normal\">{option.label}</p>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n value,\r\n onChange,\r\n onKeyDown,\r\n onFocus,\r\n onBlur,\r\n inputRef,\r\n placeholder,\r\n clearQuery,\r\n isFocused,\r\n isLoading,\r\n}) => {\r\n const handleExpandMoreClick = () => {\r\n inputRef.current?.focus();\r\n onFocus();\r\n };\r\n\r\n const handleClearQuery = () => {\r\n clearQuery();\r\n };\r\n\r\n return (\r\n <div className=\"relative flex items-center w-full sharedResource\">\r\n <input\r\n type=\"text\"\r\n className={`pl-1 py-1 border-gray-800 w-full ${\r\n isLoading ? \"pr-10\" : \"pr-20\"\r\n }`}\r\n value={value}\r\n onChange={onChange}\r\n onKeyDown={onKeyDown}\r\n onFocus={onFocus}\r\n ref={inputRef}\r\n placeholder={placeholder}\r\n disabled={isLoading}\r\n />\r\n {isLoading && (\r\n <div className=\"loader absolute right-0 text-gray-500\">\r\n {/* You can replace this div with an SVG or another icon of your choice */}\r\n <svg\r\n className=\"animate-spin h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <circle\r\n className=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"4\"\r\n />\r\n <path\r\n className=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n {isFocused && !isLoading && (\r\n <MdExpandLess\r\n className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n onClick={onBlur}\r\n />\r\n )}\r\n {!isFocused && !isLoading && (\r\n <MdExpandMore\r\n className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n onClick={handleExpandMoreClick}\r\n />\r\n )}\r\n {value && !isLoading && (\r\n <MdClose\r\n className=\"material-icons absolute right-10 cursor-pointer text-gray-500\"\r\n onClick={handleClearQuery}\r\n />\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_b","_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AutocompleteSearchBar.js","sources":["../../../lib/components/form/AutocompleteSearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\nimport { MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\n\r\ninterface OptionListProps {\r\n options: IOptionItem[];\r\n selectedOptionIndex: number;\r\n handleOptionClick: (option: IOptionItem) => void;\r\n}\r\n\r\ninterface SearchInputProps {\r\n value: string;\r\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\r\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n onFocus: () => void;\r\n clearQuery: () => void;\r\n inputRef: React.RefObject<HTMLInputElement>;\r\n placeholder?: string;\r\n isFocused?: boolean;\r\n onBlur: () => void;\r\n isLoading?: boolean;\r\n}\r\n\r\nconst AutocompleteSearchBar: React.FC<{\r\n label: string;\r\n name: string;\r\n required?: boolean;\r\n disabled?: boolean;\r\n description?: string;\r\n fetchUrl?: string;\r\n valueKey: string;\r\n labelKey: string;\r\n onChange: (value: any) => void;\r\n onFocus: () => void;\r\n onBlur: () => void;\r\n placeholder?: string;\r\n serverSearch?: boolean;\r\n value?: string;\r\n initOptions?: IOptionItem[];\r\n showId?: boolean;\r\n}> = ({\r\n label,\r\n name,\r\n required,\r\n disabled,\r\n description,\r\n fetchUrl,\r\n valueKey,\r\n labelKey,\r\n onChange,\r\n onFocus,\r\n onBlur,\r\n placeholder,\r\n serverSearch = false,\r\n value,\r\n initOptions,\r\n showId,\r\n}) => {\r\n const [query, setQuery] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n const [options, setOptions] = useState<IOptionItem[]>([]);\r\n const [selectedOptionIndex, setSelectedOptionIndex] = useState(-1);\r\n const [selectedOption, setSelectedOption] = useState<IOptionItem | null>(\r\n null\r\n );\r\n const [searchResults, setSearchResults] = useState<IOptionItem[]>([]);\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n const ref = useRef(null);\r\n const federationContext = useFederationContext();\r\n\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const [errors] = useState<any>({});\r\n\r\n useEffect(() => {\r\n const fetchOptions = async () => {\r\n setLoading(true);\r\n console.log(\r\n \"%csrcsharedAutocompleteSearchBar.tsx:77 fetchUrl, value\",\r\n \"color: #007acc;\",\r\n fetchUrl\r\n );\r\n const { data } = await federationContext.apiClient.get(fetchUrl || \"\");\r\n // osetreni obou variant navratu z BE\r\n const tmpData = data.content || data;\r\n\r\n setOptions(\r\n tmpData.map((item: any) => ({\r\n value: item[valueKey],\r\n label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n }))\r\n ); // Adjust map according to actual API response\r\n setLoading(false);\r\n };\r\n\r\n if (fetchUrl) fetchOptions();\r\n }, [fetchUrl]);\r\n\r\n useEffect(() => {\r\n if (initOptions) setOptions(initOptions);\r\n }, [initOptions]);\r\n\r\n useEffect(() => {\r\n if (value && options) {\r\n const initOption = options.find((it) => it.value == value);\r\n\r\n if (initOption) {\r\n setQuery(initOption.label);\r\n setSelectedOption(initOption);\r\n }\r\n }\r\n }, [value, options]);\r\n\r\n useEffect(() => {\r\n const fetchOptions = async () => {\r\n setLoading(true);\r\n const { data } = await federationContext.apiClient.get(fetchUrl + query);\r\n setOptions(\r\n data.map((item: any) => ({\r\n value: item[valueKey],\r\n label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n }))\r\n ); // Adjust map according to actual API response\r\n setSearchResults(\r\n data.map((item: any) => ({\r\n value: item[valueKey],\r\n label: item[labelKey] + (showId ? \" (\" + item[valueKey] + \")\" : \"\"),\r\n }))\r\n ); // Adjust map according to actual API response\r\n\r\n setLoading(false);\r\n };\r\n\r\n if (serverSearch) fetchOptions();\r\n }, [\r\n query,\r\n serverSearch,\r\n valueKey,\r\n labelKey,\r\n fetchUrl,\r\n federationContext.apiClient,\r\n showId,\r\n ]);\r\n\r\n useClickAway(ref, () => {\r\n setSearchResults([]);\r\n if (!selectedOption) {\r\n setQuery(\"\");\r\n onChange(null);\r\n }\r\n\r\n handleBlur();\r\n });\r\n\r\n const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setQuery(event.target.value);\r\n setSelectedOption(null);\r\n setSelectedOptionIndex(-1);\r\n setSearchResults(\r\n options.filter((option) =>\r\n option?.label\r\n ?.toLowerCase()\r\n .includes(event.target?.value?.toLowerCase())\r\n )\r\n );\r\n };\r\n const handleFocus = () => {\r\n console.log(\"handleFocus query\", query);\r\n setIsFocused(true);\r\n onFocus();\r\n setSearchResults(\r\n options /*.filter((option) =>\r\n option.label.toLowerCase().includes(query.toLowerCase()),\r\n ),*/\r\n );\r\n };\r\n\r\n const handleClearQuery = () => {\r\n console.log(\r\n \"%csrcsharedAutocompleteSearchBar.tsx:95 handleClearQuery\",\r\n \"color: #007acc;\"\r\n );\r\n setQuery(\"\");\r\n onChange(null);\r\n setSelectedOption(null);\r\n setTimeout(() => {\r\n setSelectedOptionIndex(-1);\r\n setSearchResults(options);\r\n }, 1000);\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === \"ArrowUp\" && searchResults.length > 0) {\r\n setSelectedOptionIndex((prevIndex) =>\r\n prevIndex > 0 ? prevIndex - 1 : searchResults.length - 1\r\n );\r\n } else if (event.key === \"ArrowDown\" && searchResults.length > 0) {\r\n setSelectedOptionIndex((prevIndex) =>\r\n prevIndex < searchResults.length - 1 ? prevIndex + 1 : 0\r\n );\r\n } else if (event.key === \"Enter\" && selectedOptionIndex !== -1) {\r\n handleOptionClick(searchResults[selectedOptionIndex]);\r\n } else if (event.key === \"Escape\" && selectedOptionIndex !== -1) {\r\n handleBlur();\r\n }\r\n };\r\n\r\n const handleOptionClick = (option: IOptionItem) => {\r\n setQuery(option.label);\r\n setSelectedOption(option);\r\n setSelectedOptionIndex(-1);\r\n\r\n onChange(option.value);\r\n\r\n handleBlur();\r\n };\r\n const handleBlur = () => {\r\n setSearchResults([]);\r\n onBlur();\r\n setIsFocused(false);\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-20 flex-col justify-start items-start gap-1.5 inline-flex\">\r\n <div\r\n className=\"self-stretch min-h-14 flex-col justify-start items-start gap-1.5 flex relative\"\r\n ref={ref}\r\n >\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n <div\r\n className={`self-stretch px-3 py-1.5 rounded-lg justify-start items-center gap-2 inline-flex outline-none border \r\n ${\r\n isFocused\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n } \r\n ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } \r\n ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} \r\n ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}`}\r\n >\r\n <div className=\"Content grow shrink basis-0 min-h-5 xl:min-h-8 justify-start items-start gap-2 flex relative flex-col w-full mx-auto\">\r\n <SearchInput\r\n value={query}\r\n onChange={handleQueryChange}\r\n onKeyDown={handleKeyDown}\r\n onFocus={handleFocus} // Pass the onFocus handler\r\n clearQuery={handleClearQuery} // Pass the onFocus handler\r\n inputRef={inputRef}\r\n placeholder={placeholder}\r\n isFocused={isFocused}\r\n onBlur={handleBlur}\r\n isLoading={loading}\r\n />\r\n </div>\r\n </div>\r\n {searchResults.length > 0 && (\r\n <OptionList\r\n options={searchResults}\r\n selectedOptionIndex={selectedOptionIndex}\r\n handleOptionClick={handleOptionClick}\r\n />\r\n )}\r\n </div>\r\n {description && (\r\n <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nconst OptionList: React.FC<OptionListProps> = ({\r\n options,\r\n selectedOptionIndex,\r\n handleOptionClick,\r\n}) => {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n useEffect(() => {\r\n // Ensure the selected option is scrolled into view\r\n if (selectedOptionIndex >= 0 && selectedOptionIndex < options.length) {\r\n const selectedElement = containerRef.current?.children[\r\n selectedOptionIndex\r\n ] as HTMLDivElement;\r\n selectedElement?.scrollIntoView({\r\n behavior: \"instant\",\r\n block: \"nearest\",\r\n });\r\n }\r\n }, [selectedOptionIndex, options.length]);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className=\"overflow-y-auto resultOptionContainer w-full max-h-96 absolute outline-4 bg-white border border-gray-200 drop-shadow-xl rounded-xl z-50 top-[73px]\"\r\n >\r\n {options?.map((option, index) => (\r\n <div\r\n key={option.value as string}\r\n className={`py-2 px-4 flex items-center justify-between gap-8 hover:bg-gray-200 cursor-pointer ${\r\n selectedOptionIndex === index ? \"bg-gray-200\" : \"\"\r\n }`}\r\n onClick={() => handleOptionClick(option)}\r\n >\r\n <p className=\"font-normal\">{option.label}</p>\r\n </div>\r\n ))}\r\n </div>\r\n );\r\n};\r\n\r\nconst SearchInput: React.FC<SearchInputProps> = ({\r\n value,\r\n onChange,\r\n onKeyDown,\r\n onFocus,\r\n onBlur,\r\n inputRef,\r\n placeholder,\r\n clearQuery,\r\n isFocused,\r\n isLoading,\r\n}) => {\r\n const handleExpandMoreClick = () => {\r\n inputRef.current?.focus();\r\n onFocus();\r\n };\r\n\r\n const handleClearQuery = () => {\r\n clearQuery();\r\n };\r\n\r\n return (\r\n <div className=\"relative flex items-center w-full sharedResource\">\r\n <input\r\n type=\"text\"\r\n className={`pl-1 py-1 border-gray-800 w-full ${\r\n isLoading ? \"pr-10 \" : \"pr-20\"\r\n }`}\r\n value={value}\r\n onChange={onChange}\r\n onKeyDown={onKeyDown}\r\n onFocus={onFocus}\r\n ref={inputRef}\r\n placeholder={placeholder}\r\n disabled={isLoading}\r\n />\r\n {isLoading && (\r\n <div className=\"loader absolute right-0 text-gray-500\">\r\n {/* You can replace this div with an SVG or another icon of your choice */}\r\n <svg\r\n className=\"animate-spin h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <circle\r\n className=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"4\"\r\n />\r\n <path\r\n className=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n {isFocused && !isLoading && (\r\n <MdExpandLess\r\n className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n onClick={onBlur}\r\n />\r\n )}\r\n {!isFocused && !isLoading && (\r\n <MdExpandMore\r\n className=\"material-icons absolute right-0 cursor-pointer text-gray-500\"\r\n onClick={handleExpandMoreClick}\r\n />\r\n )}\r\n {value && !isLoading && (\r\n <MdClose\r\n className=\"material-icons absolute right-6 cursor-pointer text-gray-500\"\r\n onClick={handleClearQuery}\r\n />\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default AutocompleteSearchBar;\r\n"],"names":["_b","_a"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import React__default, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from "react";
|
|
3
3
|
import '../../assets/tailwind.css';/* empty css */
|
|
4
|
-
import { k as MdInsertDriveFile, l as MdDeleteOutline } from "../../index-
|
|
4
|
+
import { k as MdInsertDriveFile, l as MdDeleteOutline } from "../../index-BDqNIr_C.js";
|
|
5
5
|
import "../../contexts/FederationContext.js";
|
|
6
6
|
import { useFederationContext } from "../../contexts/useFederationContext.js";
|
|
7
7
|
import { handleErrors } from "../../utils/handleErrors.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useEffect } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { b as MdClose } from "../../index-BDqNIr_C.js";
|
|
4
4
|
import '../../assets/tailwind.css';/* empty css */
|
|
5
5
|
import "../../contexts/FederationContext.js";
|
|
6
6
|
import { useFederationContext } from "../../contexts/useFederationContext.js";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { IFormFieldGlobalProps } from '../../types';
|
|
2
|
+
|
|
3
|
+
export interface IInputFieldProps extends IFormFieldGlobalProps {
|
|
4
|
+
maxLength?: number;
|
|
5
|
+
}
|
|
6
|
+
export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { b as MdClose } from "../../index-BDqNIr_C.js";
|
|
4
|
+
import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
|
|
5
|
+
function InputField({
|
|
6
|
+
label,
|
|
7
|
+
name,
|
|
8
|
+
value,
|
|
9
|
+
description,
|
|
10
|
+
onInputChange,
|
|
11
|
+
placeholder,
|
|
12
|
+
className,
|
|
13
|
+
register,
|
|
14
|
+
type,
|
|
15
|
+
disabled,
|
|
16
|
+
maxLength,
|
|
17
|
+
errors = {}
|
|
18
|
+
}) {
|
|
19
|
+
var _a;
|
|
20
|
+
const wrapperRef = React.useRef(null);
|
|
21
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
22
|
+
const handleClear = (e) => {
|
|
23
|
+
onInputChange({
|
|
24
|
+
...e,
|
|
25
|
+
target: {
|
|
26
|
+
value: "",
|
|
27
|
+
name
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
const fallbackRef = React.useRef(null);
|
|
32
|
+
const {
|
|
33
|
+
ref: registeredRef = fallbackRef,
|
|
34
|
+
onBlur: formOnBlur = () => {
|
|
35
|
+
},
|
|
36
|
+
...rest
|
|
37
|
+
} = register ? register(name) : {};
|
|
38
|
+
const ref = registeredRef || fallbackRef;
|
|
39
|
+
const handleSetFocus = () => {
|
|
40
|
+
console.log(
|
|
41
|
+
"%clibcomponents\formInputField.tsx:44 handleSetFocus",
|
|
42
|
+
"color: #007acc;"
|
|
43
|
+
);
|
|
44
|
+
setIsFocused(true);
|
|
45
|
+
ref.current.focus();
|
|
46
|
+
};
|
|
47
|
+
useClickAway(wrapperRef, () => {
|
|
48
|
+
console.log(
|
|
49
|
+
"%clibcomponents\formInputField.tsx:48 clickAway",
|
|
50
|
+
"color: #007acc;"
|
|
51
|
+
);
|
|
52
|
+
setIsFocused(false);
|
|
53
|
+
});
|
|
54
|
+
const hangleChange = (e) => {
|
|
55
|
+
onInputChange(e);
|
|
56
|
+
setIsFocused(false);
|
|
57
|
+
};
|
|
58
|
+
const renderInput = () => {
|
|
59
|
+
switch (type) {
|
|
60
|
+
case "textarea":
|
|
61
|
+
return /* @__PURE__ */ jsx(
|
|
62
|
+
"textarea",
|
|
63
|
+
{
|
|
64
|
+
id: name,
|
|
65
|
+
className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none ",
|
|
66
|
+
disabled,
|
|
67
|
+
value: value || "",
|
|
68
|
+
rows: 3,
|
|
69
|
+
...rest,
|
|
70
|
+
ref,
|
|
71
|
+
onChange: (e) => hangleChange(e),
|
|
72
|
+
onFocus: () => setIsFocused(true),
|
|
73
|
+
maxLength: maxLength || 4e3,
|
|
74
|
+
onBlur: (e) => {
|
|
75
|
+
formOnBlur(e);
|
|
76
|
+
setIsFocused(false);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
default:
|
|
81
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
|
|
82
|
+
"input",
|
|
83
|
+
{
|
|
84
|
+
className: "text-gray-900 text-sm font-medium leading-normal text-ellipsis overflow-hidden w-full",
|
|
85
|
+
id: name,
|
|
86
|
+
readOnly: disabled,
|
|
87
|
+
value: value || "",
|
|
88
|
+
type,
|
|
89
|
+
...rest,
|
|
90
|
+
ref,
|
|
91
|
+
placeholder,
|
|
92
|
+
onChange: (e) => hangleChange(e),
|
|
93
|
+
onFocus: () => setIsFocused(true),
|
|
94
|
+
onBlur: (e) => {
|
|
95
|
+
formOnBlur(e);
|
|
96
|
+
setIsFocused(false);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
) });
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
className: "min-h-30 flex-col justify-start items-start gap-1.5 w-full relative " + className,
|
|
106
|
+
ref: wrapperRef,
|
|
107
|
+
id: "component",
|
|
108
|
+
children: [
|
|
109
|
+
/* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex", children: [
|
|
110
|
+
label && /* @__PURE__ */ jsx("div", { className: "text-slate-700 text-sm font-medium leading-tight", children: label }),
|
|
111
|
+
/* @__PURE__ */ jsxs(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
className: `self-stretch w-full px-3 py-1 bg-white rounded-lg border justify-start items-center gap-0 inline-flex outline-none
|
|
115
|
+
${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}`,
|
|
116
|
+
onClick: handleSetFocus,
|
|
117
|
+
children: [
|
|
118
|
+
/* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: renderInput() }),
|
|
119
|
+
value && /* @__PURE__ */ jsxs(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
className: "w-6 h-6 relative cursor-pointer ",
|
|
123
|
+
onClick: handleClear,
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: /* @__PURE__ */ jsx(MdClose, {}) }),
|
|
126
|
+
" "
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
)
|
|
133
|
+
] }),
|
|
134
|
+
description && !isFocused && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
|
|
135
|
+
" ",
|
|
136
|
+
errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message })
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
) });
|
|
140
|
+
}
|
|
141
|
+
export {
|
|
142
|
+
InputField as default
|
|
143
|
+
};
|
|
144
|
+
//# sourceMappingURL=InputField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const handleClear = (e: any) => {\r\n value;\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = React.useRef(null);\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const ref = registeredRef || fallbackRef;\r\n const handleSetFocus = () => {\r\n console.log(\r\n \"%clibcomponents\\formInputField.tsx:44 handleSetFocus\",\r\n \"color: #007acc;\"\r\n );\r\n setIsFocused(true);\r\n ref.current.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n console.log(\r\n \"%clibcomponents\\formInputField.tsx:48 clickAway\",\r\n \"color: #007acc;\"\r\n );\r\n setIsFocused(false);\r\n });\r\n\r\n const hangleChange = (e: any) => {\r\n onInputChange(e);\r\n setIsFocused(false);\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none \"\r\n disabled={disabled}\r\n value={value || \"\"}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={(e) => hangleChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength || 4000}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className=\"text-gray-900 text-sm font-medium leading-normal text-ellipsis overflow-hidden w-full\"\r\n id={name}\r\n readOnly={disabled}\r\n value={value || \"\"}\r\n type={type}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n placeholder={placeholder}\r\n onChange={(e) => hangleChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div\r\n className={\r\n \"min-h-30 flex-col justify-start items-start gap-1.5 w-full relative \" +\r\n className\r\n }\r\n ref={wrapperRef}\r\n id=\"component\"\r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label}\r\n </div>\r\n )}\r\n <div\r\n className={`self-stretch w-full px-3 py-1 bg-white rounded-lg border justify-start items-center gap-0 inline-flex outline-none \r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n {value && (\r\n <div\r\n className=\"w-6 h-6 relative cursor-pointer \"\r\n onClick={handleClear}\r\n >\r\n <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n <MdClose />\r\n </div>{\" \"}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n {description && !isFocused && (\r\n <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import '../../assets/tailwind.css';/* empty css */
|
|
|
4
4
|
import Button from "../Button.js";
|
|
5
5
|
import AutocompleteSearchBar from "./AutocompleteSearchBar.js";
|
|
6
6
|
import FormField from "./FormField.js";
|
|
7
|
-
import {
|
|
7
|
+
import { j as MdCheck } from "../../index-BDqNIr_C.js";
|
|
8
8
|
import SectionTitle from "../layout/SectionTitle.js";
|
|
9
9
|
import "../../contexts/FederationContext.js";
|
|
10
10
|
import { useFederationContext } from "../../contexts/useFederationContext.js";
|
|
@@ -1,24 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
export interface IFormFieldGlobalProps {
|
|
5
|
-
label?: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
name: string;
|
|
8
|
-
type: string;
|
|
9
|
-
value?: any;
|
|
10
|
-
methods?: UseFormReturn<any>;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
required?: boolean;
|
|
13
|
-
clearable?: boolean;
|
|
14
|
-
placeholder?: string;
|
|
15
|
-
children?: React.ReactNode;
|
|
16
|
-
className?: string;
|
|
17
|
-
onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
|
|
18
|
-
}
|
|
1
|
+
import { IFormFieldGlobalProps, IOptionItem } from '../../types';
|
|
2
|
+
|
|
19
3
|
export interface ISelectFieldProps extends IFormFieldGlobalProps {
|
|
20
4
|
options?: IOptionItem[];
|
|
21
5
|
valueKey?: string;
|
|
22
6
|
labelKey?: string;
|
|
23
7
|
}
|
|
24
|
-
export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { b as MdClose, M as MdExpandLess, a as MdExpandMore, j as MdCheck } from "../../index-BDqNIr_C.js";
|
|
4
4
|
import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
|
|
5
5
|
function SelectField({
|
|
6
6
|
label,
|
|
@@ -9,8 +9,11 @@ function SelectField({
|
|
|
9
9
|
description,
|
|
10
10
|
onInputChange,
|
|
11
11
|
options,
|
|
12
|
-
placeholder
|
|
12
|
+
placeholder,
|
|
13
|
+
className,
|
|
14
|
+
errors = {}
|
|
13
15
|
}) {
|
|
16
|
+
var _a;
|
|
14
17
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
15
18
|
const ref = React.useRef(null);
|
|
16
19
|
const handleClear = (e) => {
|
|
@@ -39,7 +42,7 @@ function SelectField({
|
|
|
39
42
|
setIsFocused(false);
|
|
40
43
|
};
|
|
41
44
|
const currentlySelectedOption = React.useMemo(() => {
|
|
42
|
-
if (
|
|
45
|
+
if (value === null || value === void 0 || value === "")
|
|
43
46
|
return null;
|
|
44
47
|
return options == null ? void 0 : options.find((option) => option.value === value);
|
|
45
48
|
}, [options, value]);
|
|
@@ -50,20 +53,20 @@ function SelectField({
|
|
|
50
53
|
"div",
|
|
51
54
|
{
|
|
52
55
|
id: "list",
|
|
53
|
-
className: "max-h-[390px] bg-white rounded-lg shadow-xl border border-gray-200 justify-start items-start inline-flex overflow-auto
|
|
56
|
+
className: "max-h-[390px] min-w-32 whitespace-nowrap fixed z-[100000] top-auto mt-[4px] bg-white rounded-lg shadow-xl border border-gray-200 justify-start items-start inline-flex overflow-auto ",
|
|
54
57
|
children: /* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex", children: options.map((option, index) => {
|
|
55
58
|
return /* @__PURE__ */ jsxs(
|
|
56
59
|
"div",
|
|
57
60
|
{
|
|
58
|
-
className: "group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50",
|
|
61
|
+
className: "group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 ",
|
|
59
62
|
onClick: () => hangleChange(option),
|
|
60
63
|
children: [
|
|
61
|
-
/* @__PURE__ */ jsx("div", { className: "grow shrink basis-0
|
|
62
|
-
/* @__PURE__ */ jsx("div", { className: "text-gray-900 text-
|
|
63
|
-
option.description && /* @__PURE__ */ jsx("div", { className: "text-slate-600
|
|
64
|
+
/* @__PURE__ */ jsx("div", { className: "grow shrink basis-0 px-1 py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex", children: /* @__PURE__ */ jsxs("div", { className: "self-stretch justify-start items-center gap-2 inline-flex", children: [
|
|
65
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-900 text-sm font-medium leading-normal", children: option.label }),
|
|
66
|
+
option.description && /* @__PURE__ */ jsx("div", { className: "text-slate-600 sm-base font-normal leading-normal", children: option.description })
|
|
64
67
|
] }) }),
|
|
65
68
|
/* @__PURE__ */ jsxs("div", { className: "w-5 h-5 relative", children: [
|
|
66
|
-
option.value === value && /* @__PURE__ */ jsx(MdCheck, { size: 22, className: "text-primary" }),
|
|
69
|
+
option.value === value && value !== "" && /* @__PURE__ */ jsx(MdCheck, { size: 22, className: "text-primary" }),
|
|
67
70
|
" ",
|
|
68
71
|
option.value !== value && /* @__PURE__ */ jsx(
|
|
69
72
|
MdCheck,
|
|
@@ -81,34 +84,44 @@ function SelectField({
|
|
|
81
84
|
}
|
|
82
85
|
);
|
|
83
86
|
};
|
|
84
|
-
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */
|
|
87
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
85
88
|
"div",
|
|
86
89
|
{
|
|
87
|
-
className: " flex-col justify-start items-start gap-
|
|
90
|
+
className: "min-h-30 flex-col justify-start items-start gap-1.5 w-full relative " + className,
|
|
88
91
|
id: "component",
|
|
89
92
|
ref,
|
|
90
93
|
children: [
|
|
91
|
-
/* @__PURE__ */ jsxs("div", { className: "self-stretch
|
|
94
|
+
/* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex", children: [
|
|
92
95
|
label && /* @__PURE__ */ jsx("div", { className: "text-slate-700 text-sm font-medium leading-tight", children: label }),
|
|
93
96
|
/* @__PURE__ */ jsxs(
|
|
94
97
|
"div",
|
|
95
98
|
{
|
|
96
|
-
className: `self-stretch px-3
|
|
99
|
+
className: `self-stretch w-full px-3 py-1 bg-white rounded-lg border justify-start items-center gap-0 inline-flex outline-none
|
|
97
100
|
${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}`,
|
|
98
101
|
onClick: () => handleToggleFocus(),
|
|
99
102
|
children: [
|
|
100
|
-
/* @__PURE__ */ jsxs("div", { className: "grow shrink basis-0 h-
|
|
101
|
-
/* @__PURE__ */ jsxs("div", { className: "text-gray-900 text-
|
|
103
|
+
/* @__PURE__ */ jsxs("div", { className: "grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ", children: [
|
|
104
|
+
/* @__PURE__ */ jsxs("div", { className: "text-gray-900 text-sm font-medium leading-normal text-ellipsis overflow-hidden w-full", children: [
|
|
102
105
|
currentlySelectedOption == null ? void 0 : currentlySelectedOption.label,
|
|
103
106
|
!(currentlySelectedOption == null ? void 0 : currentlySelectedOption.label) && placeholder && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal", children: [
|
|
104
107
|
" ",
|
|
105
108
|
placeholder
|
|
106
109
|
] })
|
|
107
110
|
] }),
|
|
108
|
-
/* @__PURE__ */ jsx("div", { className: "text-slate-600 text-base font-normal leading-normal", children: currentlySelectedOption == null ? void 0 : currentlySelectedOption.description })
|
|
109
|
-
value && /* @__PURE__ */ jsx("div", { className: "pl-1.5", onClick: handleClear, children: /* @__PURE__ */ jsx(MdClose, {}) })
|
|
111
|
+
/* @__PURE__ */ jsx("div", { className: "text-slate-600 text-base font-normal leading-normal", children: currentlySelectedOption == null ? void 0 : currentlySelectedOption.description })
|
|
110
112
|
] }),
|
|
111
|
-
|
|
113
|
+
value !== "" && value !== null && value !== void 0 && /* @__PURE__ */ jsxs(
|
|
114
|
+
"div",
|
|
115
|
+
{
|
|
116
|
+
className: "w-6 h-6 relative cursor-pointer ",
|
|
117
|
+
onClick: handleClear,
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: /* @__PURE__ */ jsx(MdClose, {}) }),
|
|
120
|
+
" "
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
),
|
|
124
|
+
/* @__PURE__ */ jsx("div", { className: "w-6 h-6 relative cursor-pointer ", children: /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg", children: [
|
|
112
125
|
isFocused && /* @__PURE__ */ jsx(MdExpandLess, {}),
|
|
113
126
|
!isFocused && /* @__PURE__ */ jsx(MdExpandMore, {})
|
|
114
127
|
] }) })
|
|
@@ -117,10 +130,11 @@ function SelectField({
|
|
|
117
130
|
)
|
|
118
131
|
] }),
|
|
119
132
|
description && !isFocused && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
|
|
133
|
+
errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message }),
|
|
120
134
|
isFocused && listOfOptions()
|
|
121
135
|
]
|
|
122
136
|
}
|
|
123
|
-
) })
|
|
137
|
+
) });
|
|
124
138
|
}
|
|
125
139
|
export {
|
|
126
140
|
SelectField as default
|