@yandex/ui
Version:
Yandex UI components
74 lines (73 loc) • 4.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Attach = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var di_1 = require("@bem-react/di");
var mergeRefs_1 = require("../lib/mergeRefs");
var keyboard_1 = require("../lib/keyboard");
var useUniqId_1 = require("../useUniqId");
var Attach_const_1 = require("./Attach.const");
require("./Attach.css");
tslib_1.__exportStar(require("./Attach.const"), exports);
/**
* Компонент для создания кнопки выбора файла, предназначенного для отправки на сервер.
* @param {IAttachProps} props
*/
var Attach = function (_a) {
var children = _a.children, className = _a.className, controlRef = _a.controlRef, disabled = _a.disabled, hasHolder = _a.hasHolder, holderText = _a.holderText, holderTextWidth = _a.holderTextWidth,
// eslint-disable-next-line react-hooks/rules-of-hooks
_b = _a.id,
// eslint-disable-next-line react-hooks/rules-of-hooks
id = _b === void 0 ? useUniqId_1.useUniqId() : _b, innerRef = _a.innerRef, name = _a.name, onChange = _a.onChange, onClearClick = _a.onClearClick, size = _a.size, theme = _a.theme, view = _a.view, _c = _a.tabIndex, tabIndex = _c === void 0 ? 0 : _c, accept = _a.accept, props = tslib_1.__rest(_a, ["children", "className", "controlRef", "disabled", "hasHolder", "holderText", "holderTextWidth", "id", "innerRef", "name", "onChange", "onClearClick", "size", "theme", "view", "tabIndex", "accept"]);
var _d = tslib_1.__read(react_1.useState({}), 2), _e = _d[0], fileName = _e.fileName, fileExtension = _e.fileExtension, setFileMeta = _d[1];
var _f = di_1.useComponentRegistry(Attach_const_1.cnAttach()), Button = _f.Button, Holder = _f.Holder, Control = _f.Control;
var controlInternalRef = react_1.useRef(null);
react_1.useEffect(function () {
mergeRefs_1.mergeRefs(controlInternalRef, controlRef);
}, [controlInternalRef, controlRef]);
var onInternalChange = react_1.useCallback(function (event) {
var fileName = event.target.value.split('\\').pop();
var rawFileExtension = fileName.split('.').pop().toLowerCase();
var fileExtension = Attach_const_1.extensionsMap[rawFileExtension] || 'unknown';
if (onChange !== undefined) {
onChange(event);
}
setFileMeta({ fileName: fileName, fileExtension: fileExtension });
}, [onChange]);
var onInternalClearClick = react_1.useCallback(function (event) {
if (controlInternalRef.current !== null) {
if (onChange !== undefined) {
// Создаем синтетическое событие для эмуляции очистки контрола.
var syntheticEvent = Object.create(event);
syntheticEvent.target = controlInternalRef.current;
syntheticEvent.currentTarget = controlInternalRef.current;
controlInternalRef.current.value = '';
onChange(syntheticEvent);
}
else {
controlInternalRef.current.value = '';
}
}
if (onClearClick !== undefined) {
onClearClick(event);
}
setFileMeta({ fileName: undefined, fileExtension: undefined });
}, [onChange, onClearClick]);
var onInternalKeyUp = react_1.useCallback(function (event) {
if (controlInternalRef.current !== null && keyboard_1.isKeyCode(event.keyCode, [keyboard_1.Keys.SPACE, keyboard_1.Keys.ENTER])) {
controlInternalRef.current.click();
}
}, [controlInternalRef]);
return (react_1.default.createElement("span", tslib_1.__assign({}, props, { ref: innerRef, className: Attach_const_1.cnAttach({ disabled: disabled }, [className]) }),
react_1.default.createElement(Button, { disabled: disabled, theme: theme, view: view, size: size, as: "span",
// Указываем role и aria-label для доступности.
role: "button", "aria-label": children, tabIndex: disabled ? -1 : tabIndex, onKeyUp: onInternalKeyUp, className: Attach_const_1.cnAttach('Button'),
// @ts-ignore
autoComplete: null,
// @ts-ignore
type: null, addonAfter: react_1.default.createElement(Control, { disabled: disabled, id: id, name: name, onChange: onInternalChange, innerRef: controlInternalRef, accept: accept }) }, children),
hasHolder && (react_1.default.createElement(Holder, { id: id, fileName: fileName, fileExtension: fileExtension, textWidth: holderTextWidth, onClearClick: onInternalClearClick }, holderText))));
};
exports.Attach = Attach;
exports.Attach.displayName = Attach_const_1.cnAttach();