@mantine/dropzone/cjs/DropzoneFullScreen.cjs.map

Dropzone component built with Mantine theme and components

{"version":3,"file":"DropzoneFullScreen.cjs","names":["OptionalPortal","Box","Dropzone","classes"],"sources":["../src/DropzoneFullScreen.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  BasePortalProps,\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  OptionalPortal,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { Dropzone, DropzoneProps, DropzoneStylesNames, DropzoneVariant } from './Dropzone';\nimport classes from './Dropzone.module.css';\n\nexport type DropzoneFullScreenStylesNames = DropzoneStylesNames | 'fullScreen';\n\nexport interface DropzoneFullScreenProps\n  extends\n    BoxProps,\n    Omit<DropzoneProps, 'styles' | 'classNames' | 'vars' | 'variant' | 'attributes'>,\n    StylesApiProps<DropzoneFullScreenFactory>,\n    ElementProps<'div', 'onDragLeave' | 'onDragOver' | 'onDrop' | 'onDragEnter'> {\n  /** Determines whether user can drop files to browser window @default true */\n  active?: boolean;\n\n  /** Z-index value @default 9999 */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Determines whether component should be rendered within `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the portal when withinPortal is `true` */\n  portalProps?: Omit<BasePortalProps, 'withinPortal'>;\n}\n\nexport type DropzoneFullScreenFactory = Factory<{\n  props: DropzoneFullScreenProps;\n  ref: HTMLDivElement;\n  stylesNames: DropzoneFullScreenStylesNames;\n  variant: DropzoneVariant;\n}>;\n\nconst defaultProps = {\n  maxSize: Infinity,\n  activateOnDrag: true,\n  dragEventsBubbling: true,\n  activateOnKeyboard: true,\n  active: true,\n  zIndex: getDefaultZIndex('max'),\n  withinPortal: true,\n} satisfies Partial<DropzoneFullScreenProps>;\n\nexport const DropzoneFullScreen = factory<DropzoneFullScreenFactory>((_props) => {\n  const props = useProps('DropzoneFullScreen', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    active,\n    onDrop,\n    onReject,\n    zIndex,\n    withinPortal,\n    portalProps,\n    attributes,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<DropzoneFullScreenFactory>({\n    name: 'DropzoneFullScreen',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'fullScreen',\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<DropzoneFullScreenFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [counter, setCounter] = useState(0);\n  const [visible, { open, close }] = useDisclosure(false);\n\n  const handleDragEnter = (event: DragEvent) => {\n    if (event.dataTransfer?.types.includes('Files')) {\n      setCounter((prev) => prev + 1);\n      open();\n    }\n  };\n\n  const handleDragLeave = () => {\n    setCounter((prev) => prev - 1);\n  };\n\n  useEffect(() => {\n    counter === 0 && close();\n  }, [counter]);\n\n  useEffect(() => {\n    if (!active) {\n      return undefined;\n    }\n\n    document.addEventListener('dragenter', handleDragEnter, false);\n    document.addEventListener('dragleave', handleDragLeave, false);\n\n    return () => {\n      document.removeEventListener('dragenter', handleDragEnter, false);\n      document.removeEventListener('dragleave', handleDragLeave, false);\n    };\n  }, [active]);\n\n  return (\n    <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n      <Box\n        {...getStyles('fullScreen', {\n          style: { opacity: visible ? 1 : 0, pointerEvents: visible ? 'all' : 'none', zIndex },\n        })}\n      >\n        <Dropzone\n          activateOnClick={false}\n          {...others}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          className={classes.dropzone}\n          onDrop={(files: any) => {\n            onDrop?.(files);\n            close();\n            setCounter(0);\n          }}\n          onReject={(files: any) => {\n            onReject?.(files);\n            close();\n            setCounter(0);\n          }}\n        />\n      </Box>\n    </OptionalPortal>\n  );\n});\n\nDropzoneFullScreen.classes = classes;\nDropzoneFullScreen.displayName = '@mantine/dropzone/DropzoneFullScreen';\n\nexport type DropzoneFullScreenType = typeof DropzoneFullScreen;\n"],"mappings":";;;;;;;;AA+CA,MAAM,eAAe;CACnB,SAAS;CACT,gBAAgB;CAChB,oBAAoB;CACpB,oBAAoB;CACpB,QAAQ;CACR,SAAA,GAAA,cAAA,iBAAA,CAAyB,KAAK;CAC9B,cAAc;AAChB;AAEA,MAAa,sBAAA,GAAA,cAAA,QAAA,EAAyD,WAAW;CAC/E,MAAM,SAAA,GAAA,cAAA,SAAA,CAAiB,sBAAsB,cAAc,MAAM;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,UACA,QACA,cACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,UAAA,CAAiD;EACrD,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,qBAAA,CAAmE;EAC7F;EACA;EACA;CACF,CAAC;CAED,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,SAAA,CAAuB,CAAC;CACxC,MAAM,CAAC,SAAS,EAAE,MAAM,YAAA,GAAA,eAAA,cAAA,CAAyB,KAAK;CAEtD,MAAM,mBAAmB,UAAqB;EAC5C,IAAI,MAAM,cAAc,MAAM,SAAS,OAAO,GAAG;GAC/C,YAAY,SAAS,OAAO,CAAC;GAC7B,KAAK;EACP;CACF;CAEA,MAAM,wBAAwB;EAC5B,YAAY,SAAS,OAAO,CAAC;CAC/B;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,YAAY,KAAK,MAAM;CACzB,GAAG,CAAC,OAAO,CAAC;CAEZ,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,QACH;EAGF,SAAS,iBAAiB,aAAa,iBAAiB,KAAK;EAC7D,SAAS,iBAAiB,aAAa,iBAAiB,KAAK;EAE7D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,KAAK;GAChE,SAAS,oBAAoB,aAAa,iBAAiB,KAAK;EAClE;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;GACE,GAAI,UAAU,cAAc,EAC1B,OAAO;IAAE,SAAS,UAAU,IAAI;IAAG,eAAe,UAAU,QAAQ;IAAQ;GAAO,EACrF,CAAC;aAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;IACE,iBAAiB;IACjB,GAAI;IACJ,YAAY;IACZ,QAAQ;IACE;IACV,WAAWC,wBAAAA,QAAQ;IACnB,SAAS,UAAe;KACtB,SAAS,KAAK;KACd,MAAM;KACN,WAAW,CAAC;IACd;IACA,WAAW,UAAe;KACxB,WAAW,KAAK;KAChB,MAAM;KACN,WAAW,CAAC;IACd;GACD,CAAA;EACE,CAAA;CACS,CAAA;AAEpB,CAAC;AAED,mBAAmB,UAAUA,wBAAAA;AAC7B,mBAAmB,cAAc"}