@cloud-ru/ds-dropzone 1.0.0

package/dist/cjs/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,45 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ChangeEventHandler, InputHTMLAttributes, ReactElement, Ref } from 'react';
+import { UploadMode } from '../../types';
+import { AcceptInput, FileRejection } from '../../utils';
+/**
+ * Нативные атрибуты `<input type="file">`, проксируемые на скрытый input:
+ * `name`, `id`, `required`, `capture`, `form`, `onBlur` и т.п. — всё, что нужно
+ * для работы в HTML-форме и интеграции с react-hook-form (`{...register(name)}`).
+ * Управляемые самим компонентом поля исключены.
+ */
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'multiple' | 'disabled' | 'value' | 'defaultValue' | 'onChange' | 'children'>;
+export type FileUploadProps = WithSupportProps<{
+    /** Триггер открытия диалога выбора файлов (кнопка / лейбл). Клонируется, к нему добавляется `onClick`. */
+    children: ReactElement;
+    /** Колбек с принятыми файлами (прошедшими проверку `maxSize` и `accept`). */
+    onFilesUpload(files: File[]): void;
+    /**
+     * Колбек с отклонёнными файлами и причиной отказа (`maxSize` / `mime`).
+     * Вызывается только когда задан `maxSize` и/или `accept` и есть отклонённые файлы.
+     */
+    onFilesReject?(rejections: FileRejection[]): void;
+    /**
+     * Нативный `onChange` скрытого input. Вызывается до валидации с исходным событием —
+     * точка интеграции с react-hook-form и другими form-библиотеками.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Режим выбора файлов
+     * @default multiple
+     */
+    mode?: UploadMode;
+    /**
+     * Разрешённые типы файлов: MIME-тип (`image/png`), шаблон (`image/*`) или расширение (`.pdf`).
+     * Строка (через запятую, как нативный `accept`) или массив. Задаёт нативный `accept` и валидацию.
+     */
+    accept?: AcceptInput;
+    /** Максимальный размер одного файла в байтах. Превысившие уходят в `onFilesReject`. */
+    maxSize?: number;
+    /** Деактивирует триггер и input. */
+    disabled?: boolean;
+    /** Ссылка на нативный `<input type="file">` — для интеграции с формами (react-hook-form `ref`). */
+    innerRef?: Ref<HTMLInputElement>;
+} & NativeInputProps>;
+export declare function FileUpload({ mode, onFilesUpload, onFilesReject, onChange, accept, maxSize, disabled, innerRef, children, ...rest }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/FileUpload/FileUpload.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUpload = FileUpload;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const utils_2 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef ведёт на скрытый <input type="file">, а не на корень: маркер соврал бы поповеру.
+function FileUpload({ mode = constants_1.UPLOAD_MODE.Multiple, onFilesUpload, onFilesReject, onChange, accept, maxSize, disabled = false, innerRef, children, ...rest }) {
+    const hiddenFileInput = (0, react_1.useRef)(null);
+    const setInputRef = (node) => {
+        hiddenFileInput.current = node;
+        if (typeof innerRef === 'function') {
+            innerRef(node);
+        }
+        else if (innerRef) {
+            innerRef.current = node;
+        }
+    };
+    const handleButtonClick = (cb) => (e) => {
+        if (disabled)
+            return;
+        hiddenFileInput.current?.click();
+        cb?.(e);
+    };
+    const handleFileSelect = (e) => {
+        onChange?.(e);
+        const { files } = e.target;
+        if (!files)
+            return;
+        const filesArray = Array.from(files);
+        if (typeof maxSize === 'number' || accept) {
+            const { accepted, rejected } = (0, utils_2.partitionFiles)(filesArray, { maxSize, accept });
+            if (rejected.length) {
+                onFilesReject?.(rejected);
+            }
+            onFilesUpload(accepted);
+            return;
+        }
+        onFilesUpload(filesArray);
+    };
+    const handleClick = (e) => {
+        e.target.value = '';
+    };
+    const childProps = children.props;
+    const mergedProps = {
+        onClick: handleButtonClick(childProps?.onClick),
+        disabled: childProps?.disabled ?? disabled,
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.cloneElement)(children, mergedProps), (0, jsx_runtime_1.jsx)("input", { ...rest, onChange: handleFileSelect, multiple: mode === constants_1.UPLOAD_MODE.Multiple, ref: setInputRef, className: styles_module_scss_1.default.hiddenInput, type: 'file', accept: (0, utils_2.buildAcceptAttribute)(accept), disabled: disabled, onClick: handleClick, "data-test-id": constants_1.TEST_IDS.fileUpload.nativeInput, ...(0, utils_1.extractDataTestProps)(rest) })] }));
+}

package/dist/cjs/components/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

package/dist/cjs/components/FileUpload/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FileUpload"), exports);

package/dist/cjs/components/FileUpload/styles.module.css

@@ -0,0 +1,3 @@
+.hiddenInput{
+  display:none;
+}

package/dist/cjs/components/HiddenDropZone/HiddenDropZone.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DropzoneProps } from '../Dropzone';
+export type HiddenDropZoneProps = Omit<DropzoneProps, 'children'> & {
+    /** Контент dropzone при drag (overlay) */
+    content?: ReactNode;
+    /** Дочерний контент, поверх которого отображается dropzone при drag */
+    children: ReactNode;
+};
+/** Компонент — скрытая дропзона, накрывающая произвольный контент (формы, карточки) */
+export declare function HiddenDropZone(props: HiddenDropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/HiddenDropZone/HiddenDropZone.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenDropZone = HiddenDropZone;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const useDrag_1 = require("../../hooks/useDrag");
+const PrivateDropZone_1 = require("../PrivateDropZone");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Компонент — скрытая дропзона, накрывающая произвольный контент (формы, карточки) */
+function HiddenDropZone(props) {
+    const { disabled = false, children, className, content, 'data-test-id': dataTestId, ...rest } = props;
+    const { events, isOver } = (0, useDrag_1.useDrag)(disabled);
+    const showOverlay = isOver && !disabled;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), ...(0, utils_1.extractSupportProps)({ ...rest, 'data-test-id': dataTestId }), ...events, children: [showOverlay && ((0, jsx_runtime_1.jsx)(PrivateDropZone_1.PrivateDropZone, { className: styles_module_scss_1.default.dropZone, ...events, ...rest, isOver: true, disabled: disabled, children: content })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.children, showOverlay && styles_module_scss_1.default.hidden), children: children })] }));
+}

package/dist/cjs/components/HiddenDropZone/index.d.ts

@@ -0,0 +1 @@
+export * from './HiddenDropZone';

package/dist/cjs/components/HiddenDropZone/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HiddenDropZone"), exports);

package/dist/cjs/components/HiddenDropZone/styles.module.css

@@ -0,0 +1,20 @@
+.wrapper{
+  position:relative;
+  display:inline-block;
+}
+
+.dropZone{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+
+.hidden *{
+  visibility:hidden;
+  opacity:0;
+}
+
+.children{
+  width:100%;
+  height:100%;
+}

package/dist/cjs/components/PrivateDropZone/PrivateDropZone.d.ts

@@ -0,0 +1,2 @@
+import { PrivateDropZoneProps } from './types';
+export declare function PrivateDropZone({ disabled, className, isOver, onDragLeave, onDragOver, onDrop, mode, children, onFilesUpload, onFilesReject, accept, maxSize, onChange, innerRef, name, id, required, form, capture, size, ...rest }: PrivateDropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PrivateDropZone/PrivateDropZone.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrivateDropZone = PrivateDropZone;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const utils_2 = require("../../utils");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef ведёт на скрытый <input type="file">, а не на корень: маркер соврал бы поповеру.
+function PrivateDropZone({ disabled = false, className, isOver, onDragLeave, onDragOver, onDrop, mode = constants_2.UPLOAD_MODE.Multiple, children, onFilesUpload, onFilesReject, accept, maxSize, onChange, innerRef, name, id, required, form, capture, size = 'm', ...rest }) {
+    const hiddenFileInput = (0, react_1.useRef)(null);
+    const setInputRef = (node) => {
+        hiddenFileInput.current = node;
+        if (typeof innerRef === 'function') {
+            innerRef(node);
+        }
+        else if (innerRef) {
+            innerRef.current = node;
+        }
+    };
+    const emitFiles = (files) => {
+        if (typeof maxSize === 'number' || accept) {
+            const { accepted, rejected } = (0, utils_2.partitionFiles)(files, { maxSize, accept });
+            if (rejected.length) {
+                onFilesReject?.(rejected);
+            }
+            onFilesUpload(accepted);
+            return;
+        }
+        onFilesUpload(files);
+    };
+    const handleAttachFile = () => {
+        if (disabled)
+            return;
+        hiddenFileInput.current?.click();
+    };
+    const handleFileSelect = (e) => {
+        onChange?.(e);
+        const { files } = e.target;
+        if (!files)
+            return;
+        emitFiles(Array.from(files));
+    };
+    const handleDrop = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        const filesArray = Array.from(e.dataTransfer.files);
+        onDrop?.(e);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        emitFiles(mode === constants_2.UPLOAD_MODE.Single ? [filesArray[0]] : filesArray);
+    };
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)(className, styles_module_scss_1.default.container), type: 'button', disabled: disabled, ...(0, utils_1.extractSupportProps)(rest), "data-over": isOver || undefined, "data-disabled": disabled || undefined, "data-size": size, onClick: handleAttachFile, tabIndex: disabled ? -1 : 0, onDrop: handleDrop, onDragLeave: onDragLeave, onDragOver: onDragOver, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.acrylic, "aria-hidden": true }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.borderLayer, "data-state-layer": true, "aria-hidden": true, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.overLayer, "data-state-layer": true, "aria-hidden": true, "data-state": 'activatedOnBackground' }), children && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.content, children: children }), (0, jsx_runtime_1.jsx)("input", { "data-test-id": constants_1.TEST_IDS.dropzone.nativeInput, className: styles_module_scss_1.default.hidden, onChange: handleFileSelect, multiple: mode === constants_2.UPLOAD_MODE.Multiple, ref: setInputRef, type: 'file', accept: (0, utils_2.buildAcceptAttribute)(accept), disabled: disabled, name: name, id: id, required: required, form: form, capture: capture, onClick: e => {
+                    e.target.value = '';
+                } })] }));
+}

package/dist/cjs/components/PrivateDropZone/constants.d.ts

@@ -0,0 +1 @@
+export { UPLOAD_MODE } from '../../constants';

package/dist/cjs/components/PrivateDropZone/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UPLOAD_MODE = void 0;
+var constants_1 = require("../../constants");
+Object.defineProperty(exports, "UPLOAD_MODE", { enumerable: true, get: function () { return constants_1.UPLOAD_MODE; } });

package/dist/cjs/components/PrivateDropZone/index.d.ts

@@ -0,0 +1,2 @@
+export { PrivateDropZone } from './PrivateDropZone';
+export type { PrivateDropZoneProps } from './types';

package/dist/cjs/components/PrivateDropZone/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrivateDropZone = void 0;
+var PrivateDropZone_1 = require("./PrivateDropZone");
+Object.defineProperty(exports, "PrivateDropZone", { enumerable: true, get: function () { return PrivateDropZone_1.PrivateDropZone; } });