@grafana/ui/dist/esm/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.mjs.map

Grafana Components Library

{"version":3,"file":"DataLinksInlineEditorBase.mjs","sources":["../../../../../src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';\nimport { cloneDeep } from 'lodash';\nimport { useEffect, useState } from 'react';\n\nimport { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../../themes/ThemeContext';\nimport { Button } from '../../Button/Button';\nimport { Modal } from '../../Modal/Modal';\n\nimport { DataLinksListItemBase } from './DataLinksListItemBase';\n\nexport interface DataLinksInlineEditorBaseProps<T extends DataLink | Action> {\n  type: 'link' | 'action';\n  items?: T[];\n  onChange: (items: T[]) => void;\n  data: DataFrame[];\n  children: (\n    item: T,\n    index: number,\n    onSave: (index: number, item: T) => void,\n    onCancel: (index: number) => void\n  ) => React.ReactNode;\n}\n\n/** @internal */\nexport function DataLinksInlineEditorBase<T extends DataLink | Action>({\n  type,\n  items,\n  onChange,\n  data,\n  children,\n}: DataLinksInlineEditorBaseProps<T>) {\n  const [editIndex, setEditIndex] = useState<number | null>(null);\n  const [isNew, setIsNew] = useState(false);\n\n  const [itemsSafe, setItemsSafe] = useState<T[]>([]);\n\n  useEffect(() => {\n    setItemsSafe(items ?? []);\n  }, [items]);\n\n  const styles = useStyles2(getDataLinksInlineEditorStyles);\n  const isEditing = editIndex !== null;\n\n  const _onChange = (index: number, item: T) => {\n    if (isNew) {\n      const title = item.title;\n      // @ts-ignore - https://github.com/microsoft/TypeScript/issues/27808\n      const url = item.url ?? item.fetch?.url ?? '';\n\n      if (title.trim() === '' && url.trim() === '') {\n        setIsNew(false);\n        setEditIndex(null);\n        return;\n      } else {\n        setEditIndex(null);\n        setIsNew(false);\n      }\n    }\n\n    if (item.oneClick === true) {\n      itemsSafe.forEach((item) => {\n        if (item.oneClick) {\n          item.oneClick = false;\n        }\n      });\n    }\n\n    const update = cloneDeep(itemsSafe);\n    update[index] = item;\n    onChange(update);\n    setEditIndex(null);\n  };\n\n  const _onCancel = (index: number) => {\n    if (isNew) {\n      setIsNew(false);\n    }\n    setEditIndex(null);\n  };\n\n  const onDataLinkAdd = () => {\n    let update = cloneDeep(itemsSafe);\n    setEditIndex(update.length);\n    setIsNew(true);\n  };\n\n  const onDataLinkRemove = (index: number) => {\n    const update = cloneDeep(itemsSafe);\n    update.splice(index, 1);\n    onChange(update);\n  };\n\n  const onDragEnd = (result: DropResult) => {\n    if (items == null || result.destination == null) {\n      return;\n    }\n\n    const update = cloneDeep(itemsSafe);\n    const link = update[result.source.index];\n\n    update.splice(result.source.index, 1);\n    update.splice(result.destination.index, 0, link);\n\n    setItemsSafe(update);\n    onChange(update);\n  };\n\n  const getItemText = (action: 'edit' | 'add') => {\n    let text = '';\n    switch (type) {\n      case 'link':\n        text =\n          action === 'edit'\n            ? t('grafana-ui.data-links-inline-editor.edit-link', 'Edit link')\n            : t('grafana-ui.data-links-inline-editor.add-link', 'Add link');\n        break;\n      case 'action':\n        text =\n          action === 'edit'\n            ? t('grafana-ui.action-editor.inline.edit-action', 'Edit action')\n            : t('grafana-ui.action-editor.inline.add-action', 'Add action');\n        break;\n    }\n\n    return text;\n  };\n\n  return (\n    <div className={styles.container}>\n      <DragDropContext onDragEnd={onDragEnd}>\n        <Droppable droppableId=\"sortable-links\" direction=\"vertical\">\n          {(provided) => (\n            <div className={styles.wrapper} ref={provided.innerRef} {...provided.droppableProps}>\n              {itemsSafe.map((item, idx) => {\n                const key = `${item.title}/${idx}`;\n                return (\n                  <DataLinksListItemBase<T>\n                    key={key}\n                    index={idx}\n                    item={item}\n                    onChange={_onChange}\n                    onEdit={() => setEditIndex(idx)}\n                    onRemove={() => onDataLinkRemove(idx)}\n                    data={data}\n                    itemKey={key}\n                  />\n                );\n              })}\n              {provided.placeholder}\n            </div>\n          )}\n        </Droppable>\n      </DragDropContext>\n\n      {isEditing && editIndex !== null && (\n        <Modal\n          title={getItemText(isNew ? 'add' : 'edit')}\n          isOpen={true}\n          closeOnBackdropClick={false}\n          onDismiss={() => {\n            _onCancel(editIndex);\n          }}\n        >\n          {children(itemsSafe[editIndex], editIndex, _onChange, _onCancel)}\n        </Modal>\n      )}\n\n      <Button size=\"sm\" icon=\"plus\" onClick={onDataLinkAdd} variant=\"secondary\" className={styles.button}>\n        {getItemText('add')}\n      </Button>\n    </div>\n  );\n}\n\nconst getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    position: 'relative',\n  }),\n  wrapper: css({\n    marginBottom: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  button: css({\n    marginLeft: theme.spacing(1),\n  }),\n});\n"],"names":["item"],"mappings":"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"}