theme.keycloak.v2.admin.resources.assets.KeycloakDataTable-jyvvxdb8.js.map Maven / Gradle / Ivy
{"version":3,"file":"KeycloakDataTable-jyvvxdb8.js","sources":["../../../../../node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@patternfly/react-icons/dist/esm/icons/sync-alt-icon.js","../../../../../node_modules/.pnpm/[email protected]/node_modules/lodash-es/isArrayLikeObject.js","../../../../../node_modules/.pnpm/[email protected]/node_modules/lodash-es/_baseDifference.js","../../../../../node_modules/.pnpm/[email protected]/node_modules/lodash-es/last.js","../../../../../node_modules/.pnpm/[email protected]/node_modules/lodash-es/differenceBy.js","../../src/components/table-toolbar/KeycloakDataTable.tsx"],"sourcesContent":["import { createIcon } from '../createIcon';\n\nexport const SyncAltIconConfig = {\n name: 'SyncAltIcon',\n height: 512,\n width: 512,\n svgPath: 'M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z',\n yOffset: 0,\n xOffset: 0,\n};\n\nexport const SyncAltIcon = createIcon(SyncAltIconConfig);\n\nexport default SyncAltIcon;","import isArrayLike from './isArrayLike.js';\nimport isObjectLike from './isObjectLike.js';\n\n/**\n * This method is like `_.isArrayLike` except that it also checks if `value`\n * is an object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array-like object,\n * else `false`.\n * @example\n *\n * _.isArrayLikeObject([1, 2, 3]);\n * // => true\n *\n * _.isArrayLikeObject(document.body.children);\n * // => true\n *\n * _.isArrayLikeObject('abc');\n * // => false\n *\n * _.isArrayLikeObject(_.noop);\n * // => false\n */\nfunction isArrayLikeObject(value) {\n return isObjectLike(value) && isArrayLike(value);\n}\n\nexport default isArrayLikeObject;\n","import SetCache from './_SetCache.js';\nimport arrayIncludes from './_arrayIncludes.js';\nimport arrayIncludesWith from './_arrayIncludesWith.js';\nimport arrayMap from './_arrayMap.js';\nimport baseUnary from './_baseUnary.js';\nimport cacheHas from './_cacheHas.js';\n\n/** Used as the size to enable large array optimizations. */\nvar LARGE_ARRAY_SIZE = 200;\n\n/**\n * The base implementation of methods like `_.difference` without support\n * for excluding multiple arrays or iteratee shorthands.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {Array} values The values to exclude.\n * @param {Function} [iteratee] The iteratee invoked per element.\n * @param {Function} [comparator] The comparator invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n */\nfunction baseDifference(array, values, iteratee, comparator) {\n var index = -1,\n includes = arrayIncludes,\n isCommon = true,\n length = array.length,\n result = [],\n valuesLength = values.length;\n\n if (!length) {\n return result;\n }\n if (iteratee) {\n values = arrayMap(values, baseUnary(iteratee));\n }\n if (comparator) {\n includes = arrayIncludesWith;\n isCommon = false;\n }\n else if (values.length >= LARGE_ARRAY_SIZE) {\n includes = cacheHas;\n isCommon = false;\n values = new SetCache(values);\n }\n outer:\n while (++index < length) {\n var value = array[index],\n computed = iteratee == null ? value : iteratee(value);\n\n value = (comparator || value !== 0) ? value : 0;\n if (isCommon && computed === computed) {\n var valuesIndex = valuesLength;\n while (valuesIndex--) {\n if (values[valuesIndex] === computed) {\n continue outer;\n }\n }\n result.push(value);\n }\n else if (!includes(values, computed, comparator)) {\n result.push(value);\n }\n }\n return result;\n}\n\nexport default baseDifference;\n","/**\n * Gets the last element of `array`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Array\n * @param {Array} array The array to query.\n * @returns {*} Returns the last element of `array`.\n * @example\n *\n * _.last([1, 2, 3]);\n * // => 3\n */\nfunction last(array) {\n var length = array == null ? 0 : array.length;\n return length ? array[length - 1] : undefined;\n}\n\nexport default last;\n","import baseDifference from './_baseDifference.js';\nimport baseFlatten from './_baseFlatten.js';\nimport baseIteratee from './_baseIteratee.js';\nimport baseRest from './_baseRest.js';\nimport isArrayLikeObject from './isArrayLikeObject.js';\nimport last from './last.js';\n\n/**\n * This method is like `_.difference` except that it accepts `iteratee` which\n * is invoked for each element of `array` and `values` to generate the criterion\n * by which they're compared. The order and references of result values are\n * determined by the first array. The iteratee is invoked with one argument:\n * (value).\n *\n * **Note:** Unlike `_.pullAllBy`, this method returns a new array.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Array\n * @param {Array} array The array to inspect.\n * @param {...Array} [values] The values to exclude.\n * @param {Function} [iteratee=_.identity] The iteratee invoked per element.\n * @returns {Array} Returns the new array of filtered values.\n * @example\n *\n * _.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);\n * // => [1.2]\n *\n * // The `_.property` iteratee shorthand.\n * _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');\n * // => [{ 'x': 2 }]\n */\nvar differenceBy = baseRest(function(array, values) {\n var iteratee = last(values);\n if (isArrayLikeObject(iteratee)) {\n iteratee = undefined;\n }\n return isArrayLikeObject(array)\n ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), baseIteratee(iteratee, 2))\n : [];\n});\n\nexport default differenceBy;\n","import { Button, ButtonVariant, ToolbarItem } from \"@patternfly/react-core\";\nimport type { SVGIconProps } from \"@patternfly/react-icons/dist/js/createIcon\";\nimport {\n ActionsColumn,\n ExpandableRowContent,\n IAction,\n IActions,\n IActionsResolver,\n IFormatter,\n IRow,\n IRowCell,\n ITransform,\n Table,\n TableProps,\n TableVariant,\n Tbody,\n Td,\n Th,\n Thead,\n Tr,\n} from \"@patternfly/react-table\";\nimport { cloneDeep, differenceBy, get } from \"lodash-es\";\nimport {\n ComponentClass,\n ReactNode,\n isValidElement,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { useStoredState } from \"@keycloak/keycloak-ui-shared\";\nimport { useFetch } from \"../../utils/useFetch\";\nimport { KeycloakSpinner } from \"../keycloak-spinner/KeycloakSpinner\";\nimport { ListEmptyState } from \"../list-empty-state/ListEmptyState\";\nimport { PaginatingTableToolbar } from \"./PaginatingTableToolbar\";\nimport { SyncAltIcon } from \"@patternfly/react-icons\";\n\ntype TitleCell = { title: JSX.Element };\ntype Cell = keyof T | JSX.Element | TitleCell;\n\ntype BaseRow = {\n data: T;\n cells: Cell[];\n};\n\ntype Row = BaseRow & {\n selected: boolean;\n isOpen?: boolean;\n disableSelection: boolean;\n disableActions: boolean;\n};\n\ntype SubRow = BaseRow & {\n parent: number;\n};\n\ntype DataTableProps = {\n ariaLabelKey: string;\n columns: Field[];\n rows: (Row | SubRow)[];\n actions?: IActions;\n actionResolver?: IActionsResolver;\n onSelect?: (isSelected: boolean, rowIndex: number) => void;\n onCollapse?: (isOpen: boolean, rowIndex: number) => void;\n canSelectAll: boolean;\n isNotCompact?: boolean;\n isRadio?: boolean;\n};\n\ntype CellRendererProps = {\n row: IRow;\n};\n\nconst CellRenderer = ({ row }: CellRendererProps) => {\n const isRow = (c: ReactNode | IRowCell): c is IRowCell =>\n !!c && (c as IRowCell).title !== undefined;\n return row.cells!.map((c, i) => (\n {(isRow(c) ? c.title : c) as ReactNode} \n ));\n};\n\nfunction DataTable({\n columns,\n rows,\n actions,\n actionResolver,\n ariaLabelKey,\n onSelect,\n onCollapse,\n canSelectAll,\n isNotCompact,\n isRadio,\n ...props\n}: DataTableProps) {\n const { t } = useTranslation();\n\n const [selectedRows, setSelectedRows] = useState([]);\n const [expandedRows, setExpandedRows] = useState([]);\n\n const updateState = (rowIndex: number, isSelected: boolean) => {\n const items = [\n ...(rowIndex === -1 ? Array(rows.length).fill(isSelected) : selectedRows),\n ];\n items[rowIndex] = isSelected;\n setSelectedRows(items);\n };\n\n useEffect(() => {\n if (canSelectAll) {\n const selectAllCheckbox = document.getElementsByName(\"check-all\").item(0);\n if (selectAllCheckbox) {\n const checkbox = selectAllCheckbox as HTMLInputElement;\n const selected = selectedRows.filter((r) => r === true);\n checkbox.indeterminate =\n selected.length < rows.length && selected.length > 0;\n }\n }\n }, [selectedRows]);\n\n return (\n \n \n \n {onCollapse && {\n onSelect!(isSelected, rowIndex);\n updateState(-1, isSelected);\n },\n isSelected:\n selectedRows.filter((r) => r === true).length ===\n rows.length,\n }\n : undefined\n }\n />\n )}\n {columns.map((column) => (\n \n {t(column.displayKey || column.name)}\n \n ))}\n \n \n {!onCollapse ? (\n \n {(rows as IRow[]).map((row, index) => (\n \n {onSelect && (\n {\n onSelect!(isSelected, rowIndex);\n updateState(rowIndex, isSelected);\n },\n isSelected: selectedRows[index],\n variant: isRadio ? \"radio\" : \"checkbox\",\n }}\n />\n )}\n \n \n )}\n \n ))}\n \n ) : (\n (rows as IRow[]).map((row, index) => (\n \n {index % 2 === 0 ? (\n \n {\n onCollapse(isOpen, rowIndex);\n const expand = [...expandedRows];\n expand[index] = isOpen;\n setExpandedRows(expand);\n },\n }}\n />\n \n ) : (\n \n \n \n \n \n \n )}\n \n ))\n )}\n \n );\n}\n\nexport type Field = {\n name: string;\n displayKey?: string;\n cellFormatters?: IFormatter[];\n transforms?: ITransform[];\n cellRenderer?: (row: T) => JSX.Element | string;\n};\n\nexport type DetailField = {\n name: string;\n enabled?: (row: T) => boolean;\n cellRenderer?: (row: T) => JSX.Element | string;\n};\n\nexport type Action = IAction & {\n onRowClick?: (row: T) => Promise | void;\n};\n\nexport type LoaderFunction = (\n first?: number,\n max?: number,\n search?: string,\n) => Promise;\n\nexport type DataListProps = Omit<\n TableProps,\n \"rows\" | \"cells\" | \"onSelect\"\n> & {\n loader: T[] | LoaderFunction;\n onSelect?: (value: T[]) => void;\n canSelectAll?: boolean;\n detailColumns?: DetailField[];\n isRowDisabled?: (value: T) => boolean;\n isPaginated?: boolean;\n ariaLabelKey: string;\n searchPlaceholderKey?: string;\n columns: Field[];\n actions?: Action[];\n actionResolver?: IActionsResolver;\n searchTypeComponent?: ReactNode;\n toolbarItem?: ReactNode;\n subToolbar?: ReactNode;\n emptyState?: ReactNode;\n icon?: ComponentClass;\n isNotCompact?: boolean;\n isRadio?: boolean;\n isSearching?: boolean;\n};\n\n/**\n * A generic component that can be used to show the initial list most sections have. Takes care of the loading of the date and filtering.\n * All you have to define is how the columns are displayed.\n * @example\n * Promise} props.loader - loader function that will fetch the data to display first, max and search are only applicable when isPaginated = true\n * @param {Field} props.columns - definition of the columns\n * @param {Field} props.detailColumns - definition of the columns expandable columns\n * @param {Action[]} props.actions - the actions that appear on the row\n * @param {IActionsResolver} props.actionResolver Resolver for the given action\n * @param {ReactNode} props.toolbarItem - Toolbar items that appear on the top of the table {@link toolbarItem}\n * @param {ReactNode} props.emptyState - ReactNode show when the list is empty could be any component but best to use {@link ListEmptyState}\n */\nexport function KeycloakDataTable({\n ariaLabelKey,\n searchPlaceholderKey,\n isPaginated = false,\n onSelect,\n canSelectAll = false,\n isNotCompact,\n isRadio,\n detailColumns,\n isRowDisabled,\n loader,\n columns,\n actions,\n actionResolver,\n searchTypeComponent,\n toolbarItem,\n subToolbar,\n emptyState,\n icon,\n isSearching = false,\n ...props\n}: DataListProps) {\n const { t } = useTranslation();\n const [selected, setSelected] = useState([]);\n const [rows, setRows] = useState<(Row | SubRow)[]>();\n const [unPaginatedData, setUnPaginatedData] = useState();\n const [loading, setLoading] = useState(false);\n\n const [defaultPageSize, setDefaultPageSize] = useStoredState(\n localStorage,\n \"pageSize\",\n 10,\n );\n\n const [max, setMax] = useState(defaultPageSize);\n const [first, setFirst] = useState(0);\n const [search, setSearch] = useState(\"\");\n const prevSearch = useRef();\n\n const [key, setKey] = useState(0);\n const prevKey = useRef();\n const refresh = () => setKey(key + 1);\n const id = useId();\n\n const renderCell = (columns: (Field | DetailField)[], value: T) => {\n return columns.map((col) => {\n if (\"cellFormatters\" in col) {\n const v = get(value, col.name);\n return col.cellFormatters?.reduce((s, f) => f(s), v);\n }\n if (col.cellRenderer) {\n const Component = col.cellRenderer;\n //@ts-ignore\n return { title: | SubRow)[] => {\n const isDetailColumnsEnabled = (value: T) =>\n detailColumns?.[0]?.enabled?.(value);\n return data\n .map((value, index) => {\n const disabledRow = isRowDisabled ? isRowDisabled(value) : false;\n const row: (Row | SubRow)[] = [\n {\n data: value,\n disableSelection: disabledRow,\n disableActions: disabledRow,\n selected: !!selected.find((v) => get(v, \"id\") === get(value, \"id\")),\n isOpen: isDetailColumnsEnabled(value) ? false : undefined,\n cells: renderCell(columns, value),\n },\n ];\n if (detailColumns) {\n row.push({\n parent: index * 2,\n cells: isDetailColumnsEnabled(value)\n ? renderCell(detailColumns!, value)\n : [],\n } as SubRow);\n }\n return row;\n })\n .flat();\n };\n\n const getNodeText = (node: Cell): string => {\n if ([\"string\", \"number\"].includes(typeof node)) {\n return node!.toString();\n }\n if (node instanceof Array) {\n return node.map(getNodeText).join(\"\");\n }\n if (typeof node === \"object\") {\n return getNodeText(\n isValidElement((node as TitleCell).title)\n ? (node as TitleCell).title.props\n : Object.values(node),\n );\n }\n return \"\";\n };\n\n const filteredData = useMemo<(Row | SubRow)[] | undefined>(\n () =>\n search === \"\" || isPaginated\n ? undefined\n : convertToColumns(unPaginatedData || [])\n .filter((row) =>\n row.cells.some(\n (cell) =>\n cell &&\n getNodeText(cell)\n .toLowerCase()\n .includes(search.toLowerCase()),\n ),\n )\n .slice(first, first + max + 1),\n [search, first, max],\n );\n\n useFetch(\n async () => {\n setLoading(true);\n const newSearch = prevSearch.current === \"\" && search !== \"\";\n\n if (newSearch) {\n setFirst(0);\n }\n prevSearch.current = search;\n return typeof loader === \"function\"\n ? key === prevKey.current && unPaginatedData\n ? unPaginatedData\n : await loader(newSearch ? 0 : first, max + 1, search)\n : loader;\n },\n (data) => {\n prevKey.current = key;\n if (!isPaginated) {\n setUnPaginatedData(data);\n if (data.length > first) {\n data = data.slice(first, first + max + 1);\n } else {\n setFirst(0);\n }\n }\n\n const result = convertToColumns(data);\n setRows(result);\n setLoading(false);\n },\n [\n key,\n first,\n max,\n search,\n typeof loader !== \"function\" ? loader : undefined,\n ],\n );\n\n const convertAction = () =>\n actions &&\n cloneDeep(actions).map((action: Action, index: number) => {\n delete action.onRowClick;\n action.onClick = async (_, rowIndex) => {\n const result = await actions[index].onRowClick!(\n (filteredData || rows)![rowIndex].data,\n );\n if (result) {\n if (!isPaginated) {\n setSearch(\"\");\n }\n refresh();\n }\n };\n return action;\n });\n\n const _onSelect = (isSelected: boolean, rowIndex: number) => {\n const data = filteredData || rows;\n if (rowIndex === -1) {\n setRows(\n data!.map((row) => {\n (row as Row).selected = isSelected;\n return row;\n }),\n );\n } else {\n (data![rowIndex] as Row).selected = isSelected;\n\n setRows([...rows!]);\n }\n\n // Keeps selected items when paginating\n const difference = differenceBy(\n selected,\n data!.map((row) => row.data),\n \"id\",\n );\n\n // Selected rows are any rows previously selected from a different page, plus current page selections\n const selectedRows = [\n ...difference,\n ...data!.filter((row) => (row as Row).selected).map((row) => row.data),\n ];\n\n setSelected(selectedRows);\n onSelect!(selectedRows);\n };\n\n const onCollapse = (isOpen: boolean, rowIndex: number) => {\n (data![rowIndex] as Row).isOpen = isOpen;\n setRows([...data!]);\n };\n\n const data = filteredData || rows;\n const noData = !data || data.length === 0;\n const searching = search !== \"\" || isSearching;\n // if we use detail columns there are twice the number of rows\n const maxRows = detailColumns ? max * 2 : max;\n const rowLength = detailColumns ? (data?.length || 0) / 2 : data?.length || 0;\n\n return (\n <>\n {(loading || !noData || searching) && (\n {\n setFirst(first);\n setMax(max);\n setDefaultPageSize(max);\n }}\n inputGroupName={\n searchPlaceholderKey ? `${ariaLabelKey}input` : undefined\n }\n inputGroupOnEnter={setSearch}\n inputGroupPlaceholder={t(searchPlaceholderKey || \"\")}\n searchTypeComponent={searchTypeComponent}\n toolbarItem={\n <>\n {toolbarItem} \n \n \n \n }\n subToolbar={subToolbar}\n >\n {!loading && !noData && (\n setSearch(\"\"),\n type: ButtonVariant.link,\n },\n ]\n : []\n }\n />\n )}\n {loading && © 2015 - 2025 Weber Informatics LLC | Privacy Policy