All Downloads are FREE. Search and download functionalities are using the official Maven repository.

theme.keycloak.v2.admin.resources.assets.DraggableTable-852f161b.js.map Maven / Gradle / Ivy

There is a newer version: 25.0.1
Show newest version
{"version":3,"file":"DraggableTable-852f161b.js","sources":["../../src/authentication/components/DraggableTable.tsx"],"sourcesContent":["import {\n  DragEvent as ReactDragEvent,\n  ReactNode,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { get } from \"lodash-es\";\nimport {\n  ActionsColumn,\n  IAction,\n  TableComposable,\n  TableComposableProps,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n} from \"@patternfly/react-table\";\nimport { ThInfoType } from \"@patternfly/react-table/components/Table/base/types\";\nimport styles from \"@patternfly/react-styles/css/components/DataList/data-list\";\n\nexport type Field = {\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(\"authentication\");\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-pressed\", \"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-pressed\", \"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-pressed\", \"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 {columns.map((column) => (\n \n {t(column.displayKey || column.name)}\n \n ))}\n \n \n \n {data.map((row) => (\n \n \n {columns.map((column) => (\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","TableComposable","Thead","Tr","Th","Tbody","row","Td","ActionsColumn","isActionable","action"],"mappings":"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"}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy