@yamada-ui/file-input
Version:
Yamada UI file input component
178 lines (177 loc) • 6.44 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/file-input.tsx
var file_input_exports = {};
__export(file_input_exports, {
FileInput: () => FileInput
});
module.exports = __toCommonJS(file_input_exports);
var import_core = require("@yamada-ui/core");
var import_form_control = require("@yamada-ui/form-control");
var import_use_clickable = require("@yamada-ui/use-clickable");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var defaultFormat = ({ name }) => name;
var FileInput = (0, import_core.forwardRef)(
({ children, ...props }, ref) => {
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("FileInput", props);
const {
id,
form,
name,
className,
accept,
component,
defaultValue,
format = defaultFormat,
lineClamp = 1,
multiple,
placeholder,
resetRef,
separator = ",",
value,
onChange: onChangeProp,
onClick: onClickProp,
...computedProps
} = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
const [
{
"aria-readonly": ariaReadonly,
disabled,
readOnly,
...formControlProps
},
rest
] = (0, import_utils.splitObject)(computedProps, import_form_control.formControlProperties);
const inputRef = (0, import_react.useRef)(null);
const [values, setValues] = (0, import_use_controllable_state.useControllableState)({
defaultValue,
value,
onChange: onChangeProp
});
const onClick = (0, import_react.useCallback)(() => {
var _a;
if (disabled || readOnly) return;
(_a = inputRef.current) == null ? void 0 : _a.click();
}, [disabled, readOnly]);
const onChange = (0, import_react.useCallback)(
(ev) => {
let files = !(0, import_utils.isNull)(ev.currentTarget.files) ? Array.from(ev.currentTarget.files) : void 0;
if (!(files == null ? void 0 : files.length)) files = void 0;
setValues(files);
},
[setValues]
);
const onReset = (0, import_react.useCallback)(() => {
if (inputRef.current) inputRef.current.value = "";
setValues(void 0);
}, [setValues]);
(0, import_utils.assignRef)(resetRef, onReset);
const cloneChildren = (0, import_react.useMemo)(() => {
if (!(values == null ? void 0 : values.length))
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { lineClamp, children: placeholder });
if (children) return children(values);
if (component) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { lineClamp, children: values.map((value2, index) => {
const el = component({ index, value: value2 });
const style = {
marginBlockEnd: "0.125rem",
marginBlockStart: "0.125rem",
marginInlineEnd: "0.25rem"
};
return el ? (0, import_react.cloneElement)(el, { key: index, style }) : null;
}) });
} else {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { lineClamp, children: values.map((value2, index) => {
const isLast = values.length === index + 1;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.span, { display: "inline-block", me: "0.25rem", children: [
format(value2, index),
!isLast ? separator : null
] }, index);
}) });
}
}, [children, format, lineClamp, placeholder, separator, component, values]);
const clickableProps = (0, import_use_clickable.useClickable)({
ref,
...formControlProps,
...rest,
disabled: disabled || readOnly,
onClick: (0, import_utils.handlerAll)(onClickProp, onClick)
});
const css = {
alignItems: "center",
cursor: !readOnly ? "pointer" : "auto",
display: "flex",
...styles.field
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.input,
{
id,
ref: (0, import_utils.mergeRefs)(inputRef, ref),
form,
type: "file",
name,
style: {
border: "0px",
clip: "rect(0px, 0px, 0px, 0px)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: "0px",
position: "absolute",
whiteSpace: "nowrap",
width: "1px"
},
"aria-hidden": true,
"aria-readonly": ariaReadonly,
accept,
disabled,
multiple,
readOnly,
tabIndex: -1,
onChange,
...formControlProps
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.div,
{
className: (0, import_utils.cx)("ui-file-input", className),
"data-placeholder": (0, import_utils.dataAttr)(!(values == null ? void 0 : values.length)),
py: (values == null ? void 0 : values.length) && component ? "0.125rem" : void 0,
__css: css,
...clickableProps,
children: cloneChildren
}
)
] });
}
);
FileInput.displayName = "FileInput";
FileInput.__ui__ = "FileInput";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FileInput
});
//# sourceMappingURL=file-input.js.map