@datalayer/core
Version:
**Datalayer Core**
44 lines (43 loc) • 2.11 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useCallback, useMemo, useRef } from 'react';
import { Button, IconButton } from '@primer/react';
import { UploadIcon } from '@primer/octicons-react';
function UploadBaseButton(props) {
const { buttonFactory, multiple, upload } = props;
const inputRef = useRef(null);
const onInputChanged = useCallback(() => {
if (inputRef.current && inputRef.current.files) {
const files = Array.from(inputRef.current.files);
Promise.all(files.map(file => upload(file))).catch(reason => {
const msg = 'Failed to upload files.';
console.error(msg, reason);
});
}
}, [inputRef.current, upload]);
const onInputClick = useCallback(() => {
if (inputRef.current) {
inputRef.current.value = '';
}
}, [inputRef.current]);
return (_jsxs(_Fragment, { children: [buttonFactory(() => {
inputRef.current?.click();
}), _jsx("input", { ref: inputRef, style: { display: 'none' }, type: "file", multiple: multiple, onClick: onInputClick, onChange: onInputChanged })] }));
}
export function UploadIconButton(props) {
const { label, ...others } = props;
const factory = useMemo(() => (onClick) => (_jsx(IconButton, { "aria-label": label, icon: UploadIcon, size: "small", variant: "invisible", onClick: onClick })), []);
return _jsx(UploadBaseButton, { buttonFactory: factory, ...others });
}
export function UploadButton(props) {
const { label, variant, ...others } = props;
const factory = useMemo(() => (onClick) => (_jsx(Button, { "aria-label": label, leadingVisual: () => _jsx(UploadIcon, { fill: "white" }), size: "small", variant: variant, onClick: onClick, children: label })), []);
return _jsx(UploadBaseButton, { buttonFactory: factory, ...others });
}
UploadButton.defaultProps = {
variant: "primary",
};
export default UploadButton;