theme.keycloak.v2.admin.resources.assets.DraggableTable-yOogAvJ0.js.map Maven / Gradle / Ivy
{"version":3,"file":"DraggableTable-yOogAvJ0.js","sources":["../../src/authentication/components/DraggableTable.tsx"],"sourcesContent":["import styles from \"@patternfly/react-styles/css/components/DataList/data-list\";\nimport {\n ActionsColumn,\n IAction,\n Table,\n Tbody,\n Td,\n Th,\n Thead,\n Tr,\n type TableProps,\n ThProps,\n} from \"@patternfly/react-table\";\nimport type { ThInfoType } from \"@patternfly/react-table/dist/esm/components/Table/base/types\";\nimport { get } from \"lodash-es\";\nimport {\n DragEvent as ReactDragEvent,\n ReactNode,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type Field = Pick & {\n name: string;\n displayKey?: string;\n cellRenderer?: (row: T) => ReactNode;\n thTooltipText?: string;\n};\n\nexport type Action = IAction & { isActionable?: (item: T) => boolean };\n\ntype DraggableTableProps = Omit & {\n keyField: string;\n columns: Field[];\n data: T[];\n actions?: Action[];\n onDragFinish: (dragged: string, newOrder: string[]) => void;\n};\n\nexport function DraggableTable({\n keyField,\n columns,\n data,\n actions,\n onDragFinish,\n ...props\n}: DraggableTableProps) {\n const { t } = useTranslation();\n const bodyRef = useRef(null);\n\n const [state, setState] = useState({\n draggedItemId: \"\",\n draggingToItemIndex: -1,\n dragging: false,\n tempItemOrder: [\"\"],\n });\n\n const itemOrder: string[] = useMemo(\n () => data.map((d) => get(d, keyField)),\n [data],\n );\n\n const onDragStart = (evt: ReactDragEvent) => {\n evt.dataTransfer.effectAllowed = \"move\";\n evt.dataTransfer.setData(\"text/plain\", evt.currentTarget.id);\n const draggedItemId = evt.currentTarget.id;\n\n evt.currentTarget.classList.add(styles.modifiers.ghostRow);\n evt.currentTarget.setAttribute(\"aria-grabbed\", \"true\");\n setState({ ...state, draggedItemId, dragging: true });\n };\n\n const moveItem = (arr: string[], i1: string, toIndex: number) => {\n const fromIndex = arr.indexOf(i1);\n if (fromIndex === toIndex) {\n return arr;\n }\n const temp = arr.splice(fromIndex, 1);\n arr.splice(toIndex, 0, temp[0]);\n\n return arr;\n };\n\n const move = (itemOrder: string[]) => {\n if (!bodyRef.current) return;\n const ulNode = bodyRef.current;\n const nodes = Array.from(ulNode.children);\n if (nodes.map((node) => node.id).every((id, i) => id === itemOrder[i])) {\n return;\n }\n while (ulNode.firstChild) {\n ulNode.removeChild(ulNode.lastChild!);\n }\n\n itemOrder.forEach((id) => {\n ulNode.appendChild(nodes.find((n) => n.id === id)!);\n });\n };\n\n const onDragCancel = () => {\n Array.from(bodyRef.current?.children || []).forEach((el) => {\n el.classList.remove(styles.modifiers.ghostRow);\n el.setAttribute(\"aria-grabbed\", \"false\");\n });\n setState({\n ...state,\n draggedItemId: \"\",\n draggingToItemIndex: -1,\n dragging: false,\n });\n };\n\n const onDragLeave = (evt: ReactDragEvent) => {\n if (!isValidDrop(evt)) {\n move(itemOrder);\n setState({ ...state, draggingToItemIndex: -1 });\n }\n };\n\n const isValidDrop = (evt: ReactDragEvent) => {\n const ulRect = bodyRef.current!.getBoundingClientRect();\n return (\n evt.clientX > ulRect.x &&\n evt.clientX < ulRect.x + ulRect.width &&\n evt.clientY > ulRect.y &&\n evt.clientY < ulRect.y + ulRect.height\n );\n };\n\n const onDrop = (evt: ReactDragEvent) => {\n if (isValidDrop(evt)) {\n onDragFinish(state.draggedItemId, state.tempItemOrder);\n } else {\n onDragCancel();\n }\n };\n\n const onDragOver = (evt: ReactDragEvent) => {\n evt.preventDefault();\n\n const td = evt.target as HTMLTableCellElement;\n const curListItem = td.closest(\"tr\");\n if (\n !curListItem ||\n (bodyRef.current && !bodyRef.current.contains(curListItem)) ||\n curListItem.id === state.draggedItemId\n ) {\n return null;\n } else {\n const dragId = curListItem.id;\n const draggingToItemIndex = Array.from(\n bodyRef.current?.children || [],\n ).findIndex((item) => item.id === dragId);\n if (draggingToItemIndex !== state.draggingToItemIndex) {\n const tempItemOrder = moveItem(\n itemOrder,\n state.draggedItemId,\n draggingToItemIndex,\n );\n move(tempItemOrder);\n\n setState({\n ...state,\n draggingToItemIndex,\n tempItemOrder,\n });\n }\n }\n };\n\n const onDragEnd = (evt: ReactDragEvent) => {\n const tr = evt.target as HTMLTableRowElement;\n tr.classList.remove(styles.modifiers.ghostRow);\n tr.setAttribute(\"aria-grabbed\", \"false\");\n setState({\n ...state,\n draggedItemId: \"\",\n draggingToItemIndex: -1,\n dragging: false,\n });\n };\n\n const thInfo = (column: Field): ThInfoType | undefined => {\n if (!column.thTooltipText) return undefined;\n return {\n popover: {t(column.thTooltipText)},\n ariaLabel: t(column.thTooltipText),\n };\n };\n\n return (\n \n \n \n \n {t(column.displayKey || column.name)}\n \n ))}\n \n \n \n {data.map((row) => (\n \n \n {column.cellRenderer\n ? column.cellRenderer(row)\n : get(row, column.name)}\n \n ))}\n {actions && (\n \n \n isActionable\n ? { ...action, isDisabled: !isActionable(row) }\n : action,\n )}\n rowData={row!}\n />\n \n )}\n \n ))}\n \n \n );\n}\n"],"names":["DraggableTable","keyField","columns","data","actions","onDragFinish","props","t","useTranslation","bodyRef","useRef","state","setState","useState","itemOrder","useMemo","d","get","onDragStart","evt","draggedItemId","styles","moveItem","arr","i1","toIndex","fromIndex","temp","move","ulNode","nodes","node","id","i","n","onDragCancel","el","onDragLeave","isValidDrop","ulRect","onDrop","onDragOver","curListItem","dragId","draggingToItemIndex","item","tempItemOrder","onDragEnd","tr","thInfo","column","jsx","jsxs","Table","Thead","Tr","Th","Tbody","row","Td","ActionsColumn","isActionable","action"],"mappings":"6RAyCO,SAASA,EAAkB,CAChC,SAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EAA2B,CACnB,KAAA,CAAE,EAAAC,GAAMC,IACRC,EAAUC,EAAgC,IAAI,EAE9C,CAACC,EAAOC,CAAQ,EAAIC,EAAS,CACjC,cAAe,GACf,oBAAqB,GACrB,SAAU,GACV,cAAe,CAAC,EAAE,CAAA,CACnB,EAEKC,EAAsBC,EAC1B,IAAMZ,EAAK,IAAKa,GAAMC,EAAID,EAAGf,CAAQ,CAAC,EACtC,CAACE,CAAI,CAAA,EAGDe,EAAeC,GAAwB,CAC3CA,EAAI,aAAa,cAAgB,OACjCA,EAAI,aAAa,QAAQ,aAAcA,EAAI,cAAc,EAAE,EACrD,MAAAC,EAAgBD,EAAI,cAAc,GAExCA,EAAI,cAAc,UAAU,IAAIE,EAAO,UAAU,QAAQ,EACrDF,EAAA,cAAc,aAAa,eAAgB,MAAM,EACrDP,EAAS,CAAE,GAAGD,EAAO,cAAAS,EAAe,SAAU,GAAM,CAAA,EAGhDE,EAAW,CAACC,EAAeC,EAAYC,IAAoB,CACzD,MAAAC,EAAYH,EAAI,QAAQC,CAAE,EAChC,GAAIE,IAAcD,EACT,OAAAF,EAET,MAAMI,EAAOJ,EAAI,OAAOG,EAAW,CAAC,EACpC,OAAAH,EAAI,OAAOE,EAAS,EAAGE,EAAK,CAAC,CAAC,EAEvBJ,CAAA,EAGHK,EAAQd,GAAwB,CACpC,GAAI,CAACL,EAAQ,QAAS,OACtB,MAAMoB,EAASpB,EAAQ,QACjBqB,EAAQ,MAAM,KAAKD,EAAO,QAAQ,EACxC,GAAI,CAAAC,EAAM,IAAKC,GAASA,EAAK,EAAE,EAAE,MAAM,CAACC,EAAIC,IAAMD,IAAOlB,EAAUmB,CAAC,CAAC,EAGrE,MAAOJ,EAAO,YACLA,EAAA,YAAYA,EAAO,SAAU,EAGtCf,EAAU,QAASkB,GAAO,CACjBH,EAAA,YAAYC,EAAM,KAAMI,GAAMA,EAAE,KAAOF,CAAE,CAAE,CAAA,CACnD,EAAA,EAGGG,EAAe,IAAM,CACnB,MAAA,KAAK1B,EAAQ,SAAS,UAAY,EAAE,EAAE,QAAS2B,GAAO,CAC1DA,EAAG,UAAU,OAAOf,EAAO,UAAU,QAAQ,EAC1Ce,EAAA,aAAa,eAAgB,OAAO,CAAA,CACxC,EACQxB,EAAA,CACP,GAAGD,EACH,cAAe,GACf,oBAAqB,GACrB,SAAU,EAAA,CACX,CAAA,EAGG0B,EAAelB,GAAwB,CACtCmB,EAAYnB,CAAG,IAClBS,EAAKd,CAAS,EACdF,EAAS,CAAE,GAAGD,EAAO,oBAAqB,EAAI,CAAA,EAChD,EAGI2B,EAAenB,GAAwB,CACrC,MAAAoB,EAAS9B,EAAQ,QAAS,sBAAsB,EACtD,OACEU,EAAI,QAAUoB,EAAO,GACrBpB,EAAI,QAAUoB,EAAO,EAAIA,EAAO,OAChCpB,EAAI,QAAUoB,EAAO,GACrBpB,EAAI,QAAUoB,EAAO,EAAIA,EAAO,MAAA,EAI9BC,EAAUrB,GAAwB,CAClCmB,EAAYnB,CAAG,EACJd,EAAAM,EAAM,cAAeA,EAAM,aAAa,EAExCwB,GACf,EAGIM,EAActB,GAAwB,CAC1CA,EAAI,eAAe,EAGb,MAAAuB,EADKvB,EAAI,OACQ,QAAQ,IAAI,EACnC,GACE,CAACuB,GACAjC,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASiC,CAAW,GACzDA,EAAY,KAAO/B,EAAM,cAElB,OAAA,KACF,CACL,MAAMgC,EAASD,EAAY,GACrBE,EAAsB,MAAM,KAChCnC,EAAQ,SAAS,UAAY,CAAC,CAAA,EAC9B,UAAWoC,GAASA,EAAK,KAAOF,CAAM,EACpC,GAAAC,IAAwBjC,EAAM,oBAAqB,CACrD,MAAMmC,EAAgBxB,EACpBR,EACAH,EAAM,cACNiC,CAAA,EAEFhB,EAAKkB,CAAa,EAETlC,EAAA,CACP,GAAGD,EACH,oBAAAiC,EACA,cAAAE,CAAA,CACD,CACH,CACF,CAAA,EAGIC,EAAa5B,GAAwB,CACzC,MAAM6B,EAAK7B,EAAI,OACf6B,EAAG,UAAU,OAAO3B,EAAO,UAAU,QAAQ,EAC1C2B,EAAA,aAAa,eAAgB,OAAO,EAC9BpC,EAAA,CACP,GAAGD,EACH,cAAe,GACf,oBAAqB,GACrB,SAAU,EAAA,CACX,CAAA,EAGGsC,EAAUC,GAA6C,CAC3D,GAAKA,EAAO,cACL,MAAA,CACL,QAAUC,EAAA,MAAA,CAAK,SAAE5C,EAAA2C,EAAO,aAAa,EAAE,EACvC,UAAW3C,EAAE2C,EAAO,aAAa,CAAA,CACnC,EAIA,OAAAE,EAACC,EAAA,CACC,aAAW,kBACX,UAAW1C,EAAM,SAAWU,EAAO,UAAU,SAAW,GACvD,GAAGf,EAEJ,SAAA,CAAC6C,EAAAG,EAAA,CACC,WAACC,EACC,CAAA,SAAA,CAACJ,EAAAK,EAAA,CAAG,cAAY,MAAO,CAAA,EACtBtD,EAAQ,IAAKgD,GACZC,EAACK,EAAA,CAEC,KAAMP,EAAOC,CAAM,EACnB,MAAOA,EAAO,MACd,SAAS,aAER,SAAE3C,EAAA2C,EAAO,YAAcA,EAAO,IAAI,CAAA,EAL9BA,EAAO,IAAA,CAOf,CAAA,CAAA,CACH,CACF,CAAA,EACAC,EAACM,EAAA,CACC,IAAKhD,EACL,WAAAgC,EACA,OAAQA,EACR,YAAAJ,EAEC,SAAAlC,EAAK,IAAKuD,GACTN,EAACG,EAAA,CAEC,GAAItC,EAAIyC,EAAKzD,CAAQ,EACrB,UAAS,GACT,OAAAuC,EACA,UAAAO,EACA,YAAA7B,EAEA,SAAA,CAAAiC,EAACQ,EAAA,CACC,aAAc,CACZ,GAAI,iBAAiB1C,EAAIyC,EAAKzD,CAAQ,CAAC,EACzC,CAAA,CACF,EACCC,EAAQ,IAAKgD,GACZC,EAACQ,EAAA,CAEC,UAAWT,EAAO,KAEjB,SAAAA,EAAO,aACJA,EAAO,aAAaQ,CAAG,EACvBzC,EAAIyC,EAAKR,EAAO,IAAI,CAAA,EALnB,GAAGjC,EAAIyC,EAAKzD,CAAQ,CAAC,IAAIiD,EAAO,IAAI,EAAA,CAO5C,EACA9C,GACC+C,EAACQ,EAAG,CAAA,aAAY,GACd,SAAAR,EAACS,EAAA,CACC,MAAOxD,EAAQ,IAAI,CAAC,CAAE,aAAAyD,EAAc,GAAGC,KACrCD,EACI,CAAE,GAAGC,EAAQ,WAAY,CAACD,EAAaH,CAAG,CAC1C,EAAAI,CACN,EACA,QAASJ,CAAA,CAAA,EAEb,CAAA,CAAA,EAhCGzC,EAAIyC,EAAKzD,CAAQ,CAAA,CAmCzB,CAAA,CACH,CAAA,CAAA,CAAA,CAGN"} © 2015 - 2025 Weber Informatics LLC | Privacy Policy