@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
79 lines (78 loc) • 2.58 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { useFileInputState } from "../../state/components/file-input/useFileInputState.js";
import { useRegisterFormInput } from "../../state/components/form/useRegisterFormInput.js";
import { useInput } from "../../state/components/input/useInput.js";
import { useComponentId } from "../../state/components/useId.js";
import { BasicFileInputComponent } from "./BasicFileInput.js";
import { DropzoneFileInputComponent } from "./DropzoneFileInput.js";
const EMPTY_ARRAY = [];
const FileInput = /* @__PURE__ */ forwardRef(({
variant = "dropzone",
...restProps
}, ref) => {
return /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: DISPLAY_NAME, children: /* @__PURE__ */ jsx(FileInputWithoutRef, { variant, ...restProps, innerRef: ref }) });
});
const FileInputWithoutRef = ({
variant,
...props
}) => {
const id = useComponentId(props.id);
const {
state,
dispatch
} = useFileInputState(id, {
initialState: {
disabled: props.disabled ?? props.defaultDisabled,
initialValue: props.multiple ? EMPTY_ARRAY : void 0
}
});
const newOnChange = props.multiple ? (v) => {
var _a;
return (_a = props.onChange) == null ? void 0 : _a.call(props, v);
} : (v) => {
var _a;
return (_a = props.onChange) == null ? void 0 : _a.call(props, v.length ? v[0] : void 0);
};
const {
inputProps
} = useInput({
...props,
onChange: newOnChange
}, state, dispatch, (v) => props.multiple ? v : v.length ? v[0] : void 0);
useRegisterFormInput(id, "file-input");
const {
innerRef,
className,
style,
width,
height,
grow,
validate: _,
onChange: __,
defaultDisabled: ___,
...restProps
} = props;
const {
classes: layoutClasses,
cx
} = useCommonLayoutStyle({
width,
height,
grow
});
if (variant === "dropzone") {
return /* @__PURE__ */ jsx(DropzoneFileInputComponent, { ref: innerRef, className: cx(layoutClasses.style, className), style, ...inputProps, ...restProps });
} else {
return /* @__PURE__ */ jsx(BasicFileInputComponent, { ref: innerRef, className: cx(layoutClasses.style, className), style, ...inputProps, ...restProps });
}
};
const DISPLAY_NAME = "FileInput";
FileInput.displayName = DISPLAY_NAME;
export {
FileInput,
FileInputWithoutRef
};
//# sourceMappingURL=FileInput.js.map