@navinc/base-react-components/dist/dropzone.js

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDropzone } from 'react-dropzone-esm';
import { styled } from 'styled-components';
import { objectFilter } from '@navinc/utils';
const Wrapper = styled.div.withConfig({ displayName: "brc-sc-Wrapper", componentId: "brc-sc-1o7uxck" }) `
  width: 100%;
`;
/**
The `<Dropzone />` is a wrapper component using `useDropzone` hook of `react-dropzone` library to handle drag 'n' drop and select files from the file dialog. It has a `<div>` as root and a hidden `<input />`. See their [documentation](https://react-dropzone.js.org/) for more information.

### Props

The props are composited of `DropzoneOptions`, `inputProps` and any other HTML attributes.

#### DropzoneOptions

The `useDropzone` takes an option object to initiate the hook. These are all the options, some of them are set with default values

```
{
    accept, // {string[]}
    minSize, // number, default: 0
    maxSize, // number, default: Infinity
    maxFiles, // number, default: 0
    preventDropOnDocument, // bool, default: true
    noClick,  // bool, default: false
    noKeyboard, // bool, default: false
    noDrag, // bool, default: false
    noDragEventsBubbling, // bool, default: false
    disabled,  // bool, default: false,
    onDrop, // function
    onDropAccepted, // function
    onDropRejected, // function
    getFilesFromEvent, // function
    onFileDialogCancel, // function
    onFileDialogOpen, // function
    onError, // function
    validator, // function
    useFsAccessApi: true,
    autoFocus,  // bool, default: false
    multiple // bool, default: true,
    onDragEnter, // function
    onDragLeave, // function
    onDragOver, // function
}
```

These options can be set as the props of `<Dropzone />`. They are extracted and passed to `useDropzone` under the hood.

```
<Dropzone disabled />
```

#### inputProps

There are two props getters, `getRootProps` and `getInputProps` returned from `useDropzone` hook. They are two functions that return objects with properties used to create the drag 'n' drop zone. They are applied to the root `<div>` and the `<input />`

```
const Dropzone() {
  const {getRootProps, getInputProps} = useDropzone()

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
    </div>
  )
}
```

The `inputProps` is meant to be used whenever you want to add other props to the inner `<input />` element.

```
<Dropzone
    inputProps={
        id: 'input-id',
        name: 'input-name',
        ...
    }
/>
```

### children

The optional `children` prop is a function with `state` object as argument returned from `useDropzone` and returns a JSX element.

```
const Component = (state: DropzoneState) => <p>Drag 'n' drop files here</p>

<Dropzone>
    {Component}
</Dropzone>
```

These are the fields of the `state`:

```
{
    open: () => void;
    isFocused: boolean;
    isDragActive: boolean;
    isDragAccept: boolean;
    isDragReject: boolean;
    isFileDialogActive: boolean;
    acceptedFiles: File[];
    fileRejections: FileRejection[];
    rootRef: RefObject<HTMLElement>;
    inputRef: RefObject<HTMLInputElement>;
}
```

### Opening file dialog programmatically

You can programmatically invoke the default OS file prompt; just use the `open` method passed to the `children`.

**Note** that we need to set `noClick` and `noKeyboard` to be `true` when use the `open` method to avoid opening the file dialog twice. This is because `getRootProps` applies `onClick` to the root `<div>` to open the dialog under the hood.

```
<Dropzone noClick noKeyboard>
    {({open}) => <button onClick={open}>Select files</button>}
</Dropzone>
```

### Custom validation

We can customize the validation rules through the `validator` prop.

```
const maxLength = 10

// custom validation rule
const nameLengthValidator = (file: File): DropzoneFileError | void => {
  if (file.name.length <= maxLength) {
    return
  }

  return {
    code: 'name-too-large',
    message: `Name is larger than ${maxLength} characters`,
  }
}

<Dropzone validator={nameLengthValidator} />
```

 */
export const Dropzone = (_a) => {
    var { children, accept, minSize, maxSize, maxFiles, preventDropOnDocument, noClick, noKeyboard, noDrag, noDragEventsBubbling, disabled, onDrop, onDropAccepted, onDropRejected, getFilesFromEvent, onFileDialogCancel, onFileDialogOpen, onError, validator, useFsAccessApi, autoFocus, multiple, onDragEnter, onDragLeave, onDragOver, inputProps, className } = _a, rootProps = __rest(_a, ["children", "accept", "minSize", "maxSize", "maxFiles", "preventDropOnDocument", "noClick", "noKeyboard", "noDrag", "noDragEventsBubbling", "disabled", "onDrop", "onDropAccepted", "onDropRejected", "getFilesFromEvent", "onFileDialogCancel", "onFileDialogOpen", "onError", "validator", "useFsAccessApi", "autoFocus", "multiple", "onDragEnter", "onDragLeave", "onDragOver", "inputProps", "className"]);
    // useDropzone hook sets default options.
    // Here using objectFilter to filter out undefined values to avoid overriding the default options
    const dropzoneOptions = objectFilter((val) => val !== undefined)({
        accept,
        minSize,
        maxSize,
        maxFiles,
        preventDropOnDocument,
        noClick,
        noKeyboard,
        noDrag,
        noDragEventsBubbling,
        disabled,
        onDrop,
        onDropAccepted,
        onDropRejected,
        getFilesFromEvent,
        onFileDialogCancel,
        onFileDialogOpen,
        onError,
        validator,
        useFsAccessApi,
        autoFocus,
        multiple,
        onDragEnter,
        onDragLeave,
        onDragOver,
    });
    const _b = useDropzone(dropzoneOptions), { getRootProps, getInputProps } = _b, state = __rest(_b, ["getRootProps", "getInputProps"]);
    return (_jsxs(Wrapper, Object.assign({ "data-testid": "dropzone" }, getRootProps(rootProps), { className: className, children: [_jsx("input", Object.assign({}, getInputProps(inputProps))), children && children(state)] })));
};
const StyledDropzone = styled(Dropzone).withConfig({ displayName: "brc-sc-StyledDropzone", componentId: "brc-sc-5yp5dr" }) ``;
export const type = StyledDropzone;
//# sourceMappingURL=dropzone.js.map