{"version":3,"file":"RemoveVideoFromPlaylistMutation-DYlg1CmL.js","sources":["../../../client/components/core/Menu.tsx","../../../client/components/mutations/RemoveVideoFromPlaylistMutation.tsx"],"sourcesContent":["import React, { useState, useRef, MutableRefObject } from 'react';\nimport TetherComponent from 'react-tether';\n\nimport useClickOutside from 'utils/useClickOutside';\n\ninterface Props {\n  attachment?: string;\n  targetAttachment?: string;\n\n  renderButton(props: {\n    ref(element: HTMLButtonElement | null): void;\n    handleClick(): void;\n  }): React.ReactNode;\n\n  renderItems(props: { closeMenu(): void }): React.ReactNode;\n}\n\nconst Menu: React.FC<Props> = (props) => {\n  const {\n    attachment = 'top left',\n    targetAttachment = 'bottom left',\n    renderButton,\n    renderItems\n  } = props;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const buttonRef = useRef<HTMLElement>();\n  const itemsRef = useRef<HTMLElement>();\n\n  useClickOutside(\n    [buttonRef, itemsRef],\n    () => {\n      setIsOpen(false);\n    },\n    isOpen\n  );\n\n  return (\n    <TetherComponent\n      attachment={attachment}\n      targetAttachment={targetAttachment}\n      offset=\"-4px 0\"\n      constraints={[\n        {\n          to: 'scrollParent',\n          attachment: 'together'\n        }\n      ]}\n      renderTarget={(ref: MutableRefObject<HTMLElement>) =>\n        renderButton({\n          ref: (element) => {\n            buttonRef.current = element ?? undefined;\n\n            if (element != null) {\n              ref.current = element;\n            }\n          },\n          handleClick: () => {\n            setIsOpen(!isOpen);\n          }\n        })\n      }\n      renderElement={(ref: MutableRefObject<HTMLElement>) =>\n        isOpen && (\n          <div\n            ref={(element) => {\n              itemsRef.current = element ?? undefined;\n\n              if (element != null) {\n                ref.current = element;\n              }\n            }}\n          >\n            {renderItems({\n              closeMenu: () => {\n                setIsOpen(false);\n              }\n            })}\n          </div>\n        )\n      }\n    />\n  );\n};\n\nexport default Menu;\n","import { gql } from '@apollo/client';\n\nexport type {\n  RemoveVideoFromPlaylistMutation,\n  RemoveVideoFromPlaylistMutationVariables\n} from './__generated__/RemoveVideoFromPlaylistMutation';\n\nexport const REMOVE_VIDEO_FROM_PLAYLIST_MUTATION = gql`\n  mutation RemoveVideoFromPlaylistMutation(\n    $input: RemoveVideoFromPlaylistInput!\n  ) {\n    removeVideoFromPlaylist(input: $input) {\n      playlist {\n        id\n        title\n        thumbnailUrl\n\n        videos {\n          id\n          slug\n          title\n          description\n          thumbnailUrl\n\n          artists {\n            id\n            firstName\n            lastName\n          }\n        }\n      }\n\n      error\n    }\n  }\n`;\n"],"names":["Menu","props","attachment","targetAttachment","renderButton","renderItems","isOpen","setIsOpen","useState","buttonRef","useRef","itemsRef","useClickOutside","jsx","TetherComponent","ref","element","REMOVE_VIDEO_FROM_PLAYLIST_MUTATION","gql"],"mappings":"0EAiBM,MAAAA,EAAyBC,GAAU,CACjC,KAAA,CACJ,WAAAC,EAAa,WACb,iBAAAC,EAAmB,cACnB,aAAAC,EACA,YAAAC,CACE,EAAAJ,EAEE,CAACK,EAAQC,CAAS,EAAIC,WAAS,EAAK,EACpCC,EAAYC,EAAAA,SACZC,EAAWD,EAAAA,SAEjB,OAAAE,EACE,CAACH,EAAWE,CAAQ,EACpB,IAAM,CACJJ,EAAU,EAAK,CACjB,EACAD,CAAA,EAIAO,EAAA,IAACC,EAAA,CACC,WAAAZ,EACA,iBAAAC,EACA,OAAO,SACP,YAAa,CACX,CACE,GAAI,eACJ,WAAY,UACd,CACF,EACA,aAAeY,GACbX,EAAa,CACX,IAAMY,GAAY,CAChBP,EAAU,QAAUO,GAAW,OAE3BA,GAAW,OACbD,EAAI,QAAUC,EAElB,EACA,YAAa,IAAM,CACjBT,EAAU,CAACD,CAAM,CACnB,CAAA,CACD,EAEH,cAAgBS,GACdT,GACEO,EAAA,IAAC,MAAA,CACC,IAAMG,GAAY,CAChBL,EAAS,QAAUK,GAAW,OAE1BA,GAAW,OACbD,EAAI,QAAUC,EAElB,EAEC,SAAYX,EAAA,CACX,UAAW,IAAM,CACfE,EAAU,EAAK,CACjB,CAAA,CACD,CAAA,CACH,CAAA,CAAA,CAKV,EC5EaU,EAAsCC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}