@mantine/core/cjs/components/FileButton/FileButton.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"FileButton.cjs","names":["genericFactory","useProps"],"sources":["../../../src/components/FileButton/FileButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { assignRef, useMergedRef } from '@mantine/hooks';\nimport { Factory, genericFactory, useProps } from '../../core';\n\nexport interface FileButtonProps<Multiple extends boolean = false> {\n  ref?: React.Ref<HTMLInputElement>;\n\n  /** Called when files are picked */\n  onChange: (payload: Multiple extends true ? File[] : File | null) => void;\n\n  /** Function that receives button props and returns react node that should be rendered */\n  children: (props: { onClick: () => void }) => React.ReactNode;\n\n  /** If set, user can pick more than one file */\n  multiple?: Multiple;\n\n  /** File input accept attribute, for example, `\"image/png,image/jpeg\"` */\n  accept?: string;\n\n  /** Input name attribute */\n  name?: string;\n\n  /** Input form attribute */\n  form?: string;\n\n  /** Reference of the function that should be called when value changes to null or empty array */\n  resetRef?: React.Ref<() => void>;\n\n  /** Disables file picker */\n  disabled?: boolean;\n\n  /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */\n  capture?: boolean | 'user' | 'environment';\n\n  /** Passes down props to the input element used to capture files */\n  inputProps?: React.ComponentProps<'input'>;\n}\n\nexport type FileButtonFactory = Factory<{\n  props: FileButtonProps;\n  signature: <Multiple extends boolean = false>(\n    props: FileButtonProps<Multiple>\n  ) => React.JSX.Element;\n}>;\n\nexport const FileButton = genericFactory<FileButtonFactory>((props) => {\n  const {\n    onChange,\n    children,\n    multiple,\n    accept,\n    name,\n    form,\n    resetRef,\n    disabled,\n    capture,\n    inputProps,\n    ref,\n    ...others\n  } = useProps('FileButton', null, props);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const onClick = () => {\n    !disabled && inputRef.current?.click();\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.currentTarget.files === null) {\n      return onChange(multiple ? ([] as any) : null);\n    }\n\n    if (multiple) {\n      onChange(Array.from(event.currentTarget.files) as any);\n    } else {\n      onChange((event.currentTarget.files[0] as any) || null);\n    }\n  };\n\n  const reset = () => {\n    if (inputRef.current) {\n      inputRef.current.value = '';\n    }\n  };\n\n  assignRef(resetRef, reset);\n\n  return (\n    <>\n      <input\n        style={{ display: 'none' }}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        onChange={handleChange}\n        ref={useMergedRef(ref, inputRef)}\n        name={name}\n        form={form}\n        capture={capture}\n        {...inputProps}\n      />\n\n      {children({ onClick, ...others })}\n    </>\n  );\n});\n\nFileButton.displayName = '@mantine/core/FileButton';\n"],"mappings":";;;;;;;;;AA6CA,MAAa,aAAaA,gBAAAA,gBAAmC,UAAU;CACrE,MAAM,EACJ,UACA,UACA,UACA,QACA,MACA,MACA,UACA,UACA,SACA,YACA,KACA,GAAG,WACDC,kBAAAA,SAAS,cAAc,MAAM,MAAM;CAEvC,MAAM,YAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,gBAAgB;AACpB,GAAC,YAAY,SAAS,SAAS,OAAO;;CAGxC,MAAM,gBAAgB,UAA+C;AACnE,MAAI,MAAM,cAAc,UAAU,KAChC,QAAO,SAAS,WAAY,EAAE,GAAW,KAAK;AAGhD,MAAI,SACF,UAAS,MAAM,KAAK,MAAM,cAAc,MAAM,CAAQ;MAEtD,UAAU,MAAM,cAAc,MAAM,MAAc,KAAK;;CAI3D,MAAM,cAAc;AAClB,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ;;AAI7B,EAAA,GAAA,eAAA,WAAU,UAAU,MAAM;AAE1B,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,OAAO,EAAE,SAAS,QAAQ;EAC1B,MAAK;EACG;EACE;EACV,UAAU;EACV,MAAA,GAAA,eAAA,cAAkB,KAAK,SAAS;EAC1B;EACA;EACG;EACT,GAAI;EACJ,CAAA,EAED,SAAS;EAAE;EAAS,GAAG;EAAQ,CAAC,CAChC,EAAA,CAAA;EAEL;AAEF,WAAW,cAAc"}