@ozen-ui/kit
Version:
React component library
77 lines (76 loc) • 6.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilePicker = exports.cnFilePicker = void 0;
var tslib_1 = require("tslib");
require("./FilePicker.css");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("@ozen-ui/icons");
var useDeprecated_1 = require("../../hooks/useDeprecated");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var isKey_1 = require("../../utils/isKey");
var FieldControl_1 = require("../FieldControl");
var FieldHint_1 = require("../FieldHint");
var FieldIcon_1 = require("../FieldIcon");
var FieldLabel_1 = require("../FieldLabel");
var Fieldset_1 = require("../Fieldset");
var IconButtonNext_1 = require("../IconButtonNext");
var constants_1 = require("./constants");
exports.cnFilePicker = (0, classname_1.cn)('FilePicker');
exports.FilePicker = (0, react_1.forwardRef)(function (inProps, ref) {
var _a = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'FilePicker',
}), _b = _a.size, size = _b === void 0 ? constants_1.FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? constants_1.FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? constants_1.FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? constants_1.FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? icons_1.AttachmentIcon : _h, renderValueProp = _a.renderValue, onChangeProp = _a.onChange, onClearProp = _a.onClear, inputRef = _a.inputRef, fileList = _a.fileList, accept = _a.accept, id = _a.id, name = _a.name, label = _a.label, autoFocus = _a.autoFocus, error = _a.error, hint = _a.hint, renderLeft = _a.renderLeft, labelProps = _a.labelProps, inputProps = _a.inputProps, hintProps = _a.hintProps, labelRef = _a.labelRef, className = _a.className, other = tslib_1.__rest(_a, ["size", "disabled", "required", "fullWidth", "disableTruncate", "multiple", "placeholder", "clearText", "renderRight", "renderValue", "onChange", "onClear", "inputRef", "fileList", "accept", "id", "name", "label", "autoFocus", "error", "hint", "renderLeft", "labelProps", "inputProps", "hintProps", "labelRef", "className"]);
(0, useDeprecated_1.useDeprecatedProperty)(!!labelRef, 'labelRef', 'labelProps.ref');
(0, useDeprecated_1.useDeprecatedProperty)(!!inputRef, 'inputRef', 'inputProps.ref');
var inputInnerRef = (0, react_1.useRef)(null);
var _j = tslib_1.__read((0, react_1.useState)(false), 2), focused = _j[0], setFocused = _j[1];
var hasFiles = !!(fileList === null || fileList === void 0 ? void 0 : fileList.length);
var handleFocus = function (e) {
var _a;
(_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
setFocused(true);
};
var handleBlur = function (e) {
var _a;
(_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
setFocused(false);
};
var onChange = function (e) {
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
if (inputInnerRef.current) {
inputInnerRef.current.value = '';
}
};
var onClear = function (e) {
e.preventDefault();
onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(e, { name: name });
};
var onKeyDown = function (e) {
if ((0, isKey_1.isKey)(e, 'Backspace')) {
onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(e, { name: name });
}
};
var renderValue = function (file, disableTruncate) {
return renderValueProp
? renderValueProp(file)
: (0, constants_1.FILE_PICKER_DEFAULT_VALUE_RENDERER)(file, disableTruncate);
};
return (react_1.default.createElement(FieldControl_1.FieldControl, tslib_1.__assign({ size: size, error: error, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth, filled: hasFiles }, other, { className: (0, exports.cnFilePicker)('', [className]), ref: ref }),
react_1.default.createElement("label", { className: (0, exports.cnFilePicker)('Body') },
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderLeft }),
react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('FieldContainer') },
react_1.default.createElement(FieldLabel_1.FieldLabel, tslib_1.__assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: (0, exports.cnFilePicker)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
react_1.default.createElement("input", tslib_1.__assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: (0, exports.cnFilePicker)('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: (0, useMultiRef_1.useMultiRef)([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
hasFiles ? (react_1.default.createElement("span", { className: (0, exports.cnFilePicker)('FileName') }, renderValue(fileList, disableTruncate))) : (react_1.default.createElement("span", { "aria-placeholder": placeholder, className: (0, exports.cnFilePicker)('Placeholder') }, placeholder))),
react_1.default.createElement("div", { className: (0, exports.cnFilePicker)('RenderRight') },
onClearProp && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, tabIndex: -1, icon: icons_1.CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: (0, exports.cnFilePicker)('ClearButton', {
visibility: hasFiles,
}) })),
react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight })),
react_1.default.createElement(Fieldset_1.Fieldset, null)),
react_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({}, hintProps), hint)));
});
exports.FilePicker.displayName = 'FilePicker';