@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":";;;;;;;;;;;;AA4BO,SAAS,yBAAA,CAAuD;AAAA,EACrE,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAwB,IAAI,CAAA;AAC9D,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AAExC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA,CAAc,EAAE,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,EAAE,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,MAAA,GAAS,WAAW,8BAA8B,CAAA;AACxD,EAAA,MAAM,YAAY,SAAA,KAAc,IAAA;AAEhC,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAe,IAAA,KAAY;AA/ChD,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAgDI,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,MAAM,QAAQ,IAAA,CAAK,KAAA;AAEnB,MAAA,MAAM,GAAA,GAAA,CAAM,gBAAK,GAAA,KAAL,IAAA,GAAA,EAAA,GAAA,CAAY,UAAK,KAAA,KAAL,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAY,QAAxB,IAAA,GAAA,EAAA,GAA+B,EAAA;AAE3C,MAAA,IAAI,MAAM,IAAA,EAAK,KAAM,MAAM,GAAA,CAAI,IAAA,OAAW,EAAA,EAAI;AAC5C,QAAA,QAAA,CAAS,KAAK,CAAA;AACd,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA;AAAA,MACF,CAAA,MAAO;AACL,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA,QAAA,CAAS,KAAK,CAAA;AAAA,MAChB;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,CAAK,aAAa,IAAA,EAAM;AAC1B,MAAA,SAAA,CAAU,OAAA,CAAQ,CAACA,KAAAA,KAAS;AAC1B,QAAA,IAAIA,MAAK,QAAA,EAAU;AACjB,UAAAA,MAAK,QAAA,GAAW,KAAA;AAAA,QAClB;AAAA,MACF,CAAC,CAAA;AAAA,IACH;AAEA,IAAA,MAAM,MAAA,GAAS,UAAU,SAAS,CAAA;AAClC,IAAA,MAAA,CAAO,KAAK,CAAA,GAAI,IAAA;AAChB,IAAA,QAAA,CAAS,MAAM,CAAA;AACf,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAkB;AACnC,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,QAAA,CAAS,KAAK,CAAA;AAAA,IAChB;AACA,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,MAAA,GAAS,UAAU,SAAS,CAAA;AAChC,IAAA,YAAA,CAAa,OAAO,MAAM,CAAA;AAC1B,IAAA,QAAA,CAAS,IAAI,CAAA;AAAA,EACf,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAkB;AAC1C,IAAA,MAAM,MAAA,GAAS,UAAU,SAAS,CAAA;AAClC,IAAA,MAAA,CAAO,MAAA,CAAO,OAAO,CAAC,CAAA;AACtB,IAAA,QAAA,CAAS,MAAM,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,MAAA,KAAuB;AACxC,IAAA,IAAI,KAAA,IAAS,IAAA,IAAQ,MAAA,CAAO,WAAA,IAAe,IAAA,EAAM;AAC/C,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,MAAA,GAAS,UAAU,SAAS,CAAA;AAClC,IAAA,MAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,KAAK,CAAA;AAEvC,IAAA,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,KAAA,EAAO,CAAC,CAAA;AACpC,IAAA,MAAA,CAAO,MAAA,CAAO,MAAA,CAAO,WAAA,CAAY,KAAA,EAAO,GAAG,IAAI,CAAA;AAE/C,IAAA,YAAA,CAAa,MAAM,CAAA;AACnB,IAAA,QAAA,CAAS,MAAM,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,MAAA,KAA2B;AAC9C,IAAA,IAAI,IAAA,GAAO,EAAA;AACX,IAAA,QAAQ,IAAA;AAAM,MACZ,KAAK,MAAA;AACH,QAAA,IAAA,GACE,MAAA,KAAW,SACP,CAAA,CAAE,+CAAA,EAAiD,WAAW,CAAA,GAC9D,CAAA,CAAE,gDAAgD,UAAU,CAAA;AAClE,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,IAAA,GACE,MAAA,KAAW,SACP,CAAA,CAAE,6CAAA,EAA+C,aAAa,CAAA,GAC9D,CAAA,CAAE,8CAA8C,YAAY,CAAA;AAClE,QAAA;AAAA;AAGJ,IAAA,OAAO,IAAA;AAAA,EACT,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,WACf,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,aAAY,gBAAA,EAAiB,SAAA,EAAU,YAC/C,QAAA,EAAA,CAAC,QAAA,0BACC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,OAAA,EAAS,GAAA,EAAK,SAAS,QAAA,EAAW,GAAG,SAAS,cAAA,EAClE,QAAA,EAAA;AAAA,MAAA,SAAA,CAAU,GAAA,CAAI,CAAC,IAAA,EAAM,GAAA,KAAQ;AAC5B,QAAA,MAAM,GAAA,GAAM,CAAA,EAAG,IAAA,CAAK,KAAK,IAAI,GAAG,CAAA,CAAA;AAChC,QAAA,uBACE,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YAEC,KAAA,EAAO,GAAA;AAAA,YACP,IAAA;AAAA,YACA,QAAA,EAAU,SAAA;AAAA,YACV,MAAA,EAAQ,MAAM,YAAA,CAAa,GAAG,CAAA;AAAA,YAC9B,QAAA,EAAU,MAAM,gBAAA,CAAiB,GAAG,CAAA;AAAA,YACpC,IAAA;AAAA,YACA,OAAA,EAAS;AAAA,WAAA;AAAA,UAPJ;AAAA,SAQP;AAAA,MAEJ,CAAC,CAAA;AAAA,MACA,QAAA,CAAS;AAAA,KAAA,EACZ,GAEJ,CAAA,EACF,CAAA;AAAA,IAEC,SAAA,IAAa,cAAc,IAAA,oBAC1B,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,WAAA,CAAY,KAAA,GAAQ,KAAA,GAAQ,MAAM,CAAA;AAAA,QACzC,MAAA,EAAQ,IAAA;AAAA,QACR,oBAAA,EAAsB,KAAA;AAAA,QACtB,WAAW,MAAM;AACf,UAAA,SAAA,CAAU,SAAS,CAAA;AAAA,QACrB,CAAA;AAAA,QAEC,mBAAS,SAAA,CAAU,SAAS,CAAA,EAAG,SAAA,EAAW,WAAW,SAAS;AAAA;AAAA,KACjE;AAAA,oBAGF,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,MAAK,MAAA,EAAO,OAAA,EAAS,aAAA,EAAe,OAAA,EAAQ,aAAY,SAAA,EAAW,MAAA,CAAO,MAAA,EACzF,QAAA,EAAA,WAAA,CAAY,KAAK,CAAA,EACpB;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,MAAM,8BAAA,GAAiC,CAAC,KAAA,MAA0B;AAAA,EAChE,WAAW,GAAA,CAAI;AAAA,IACb,QAAA,EAAU;AAAA,GACX,CAAA;AAAA,EACD,SAAS,GAAA,CAAI;AAAA,IACX,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe;AAAA,GAChB,CAAA;AAAA,EACD,QAAQ,GAAA,CAAI;AAAA,IACV,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC5B;AACH,CAAA,CAAA;;;;"}