@ozen-ui/kit
Version:
React component library
74 lines (73 loc) • 6.25 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import './FilePicker.css';
import React, { forwardRef, useRef, useState } from 'react';
import { AttachmentIcon, CrossIcon } from '@ozen-ui/icons';
import { useDeprecatedProperty } from '../../hooks/useDeprecated';
import { useMultiRef } from '../../hooks/useMultiRef';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { isKey } from '../../utils/isKey';
import { FieldControl } from '../FieldControl';
import { FieldHint } from '../FieldHint';
import { FieldIcon } from '../FieldIcon';
import { FieldLabel } from '../FieldLabel';
import { Fieldset } from '../Fieldset';
import { IconButton } from '../IconButtonNext';
import { FILE_PICKER_DEFAULT_DISABLE_TRUNCATE, FILE_PICKER_DEFAULT_DISABLED, FILE_PICKER_DEFAULT_FULL_WIDTH, FILE_PICKER_DEFAULT_MULTIPLE, FILE_PICKER_DEFAULT_REQUIRED, FILE_PICKER_DEFAULT_SIZE, FILE_PICKER_DEFAULT_VALUE_RENDERER, } from './constants';
export var cnFilePicker = cn('FilePicker');
export var FilePicker = forwardRef(function (inProps, ref) {
var _a = useThemeProps({
props: inProps,
name: 'FilePicker',
}), _b = _a.size, size = _b === void 0 ? FILE_PICKER_DEFAULT_SIZE : _b, _c = _a.disabled, disabled = _c === void 0 ? FILE_PICKER_DEFAULT_DISABLED : _c, _d = _a.required, required = _d === void 0 ? FILE_PICKER_DEFAULT_REQUIRED : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? FILE_PICKER_DEFAULT_FULL_WIDTH : _e, _f = _a.disableTruncate, disableTruncate = _f === void 0 ? FILE_PICKER_DEFAULT_DISABLE_TRUNCATE : _f, _g = _a.multiple, multiple = _g === void 0 ? FILE_PICKER_DEFAULT_MULTIPLE : _g, placeholder = _a.placeholder, clearText = _a.clearText, _h = _a.renderRight, renderRight = _h === void 0 ? 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 = __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"]);
useDeprecatedProperty(!!labelRef, 'labelRef', 'labelProps.ref');
useDeprecatedProperty(!!inputRef, 'inputRef', 'inputProps.ref');
var inputInnerRef = useRef(null);
var _j = __read(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 (isKey(e, 'Backspace')) {
onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(e, { name: name });
}
};
var renderValue = function (file, disableTruncate) {
return renderValueProp
? renderValueProp(file)
: FILE_PICKER_DEFAULT_VALUE_RENDERER(file, disableTruncate);
};
return (React.createElement(FieldControl, __assign({ size: size, error: error, focused: focused, disabled: disabled, required: required, fullWidth: fullWidth, filled: hasFiles }, other, { className: cnFilePicker('', [className]), ref: ref }),
React.createElement("label", { className: cnFilePicker('Body') },
React.createElement(FieldIcon, { icon: renderLeft }),
React.createElement("div", { className: cnFilePicker('FieldContainer') },
React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: cnFilePicker('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]) }), label),
React.createElement("input", __assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: cnFilePicker('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
hasFiles ? (React.createElement("span", { className: cnFilePicker('FileName') }, renderValue(fileList, disableTruncate))) : (React.createElement("span", { "aria-placeholder": placeholder, className: cnFilePicker('Placeholder') }, placeholder))),
React.createElement("div", { className: cnFilePicker('RenderRight') },
onClearProp && (React.createElement(IconButton, { size: size, tabIndex: -1, icon: CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: cnFilePicker('ClearButton', {
visibility: hasFiles,
}) })),
React.createElement(FieldIcon, { icon: renderRight })),
React.createElement(Fieldset, null)),
React.createElement(FieldHint, __assign({}, hintProps), hint)));
});
FilePicker.displayName = 'FilePicker';