@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
103 lines (102 loc) • 8 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const LocalFileChooser_1 = __importDefault(require("./LocalFileChooser"));
const UrlChooser_1 = __importDefault(require("./UrlChooser"));
const util_1 = require("../../util");
const types_1 = require("../../util/types");
const NUM_SHOWN = 2;
function ToggleButtonWithTooltip(props) {
const { title, children, ...other } = props;
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: title || '', children: (0, jsx_runtime_1.jsx)(material_1.ToggleButton, { ...other, children: children }) }));
}
function shorten(str, len) {
if (typeof str === 'string' && str.length > len) {
return `${str.slice(0, Math.max(0, len))}…`;
}
return str;
}
function Inline({ children }) {
return (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 4 }, children: children });
}
function Box2({ children }) {
return ((0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "row", children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: children }) }));
}
function Input(props) {
const { setLocation, inline, toggleButtonValue, selectedAccount } = props;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.SelectorComponent) ? ((0, jsx_runtime_1.jsx)(selectedAccount.SelectorComponent, { ...props, setLocation: setLocation })) : toggleButtonValue === 'url' ? ((0, jsx_runtime_1.jsx)(UrlChooser_1.default, { ...props, setLocation: setLocation, label: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.selectorLabel, style: inline ? { margin: 0 } : undefined })) : toggleButtonValue === 'file' ? ((0, jsx_runtime_1.jsx)(LocalFileChooser_1.default, { ...props })) : null }));
}
const FileSelector = (0, mobx_react_1.observer)(function (props) {
const { inline, location, name, description, rootModel, setLocation } = props;
const fileOrUrl = !location || (0, types_1.isUriLocation)(location) ? 'url' : 'file';
const [toggleButtonValue, setToggleButtonValue] = (0, react_1.useState)(location && 'internetAccountId' in location && location.internetAccountId
? location.internetAccountId
: fileOrUrl);
const accounts = (0, types_1.isAppRootModel)(rootModel)
? rootModel.internetAccounts.filter(f => f.type !== 'HTTPBasicInternetAccount')
: [];
const [recentlyUsedInternetAccounts, setRecentlyUsedInternetAccounts] = (0, util_1.useLocalStorage)('fileSelector-recentlyUsedInternetAccounts', []);
const map = Object.fromEntries(accounts.map(a => [a.internetAccountId, a]));
const arr = [...new Set(accounts.map(s => s.internetAccountId))].sort((a, b) => recentlyUsedInternetAccounts.indexOf(a) -
recentlyUsedInternetAccounts.indexOf(b));
const shownAccounts = arr.slice(0, NUM_SHOWN);
const hiddenAccounts = arr.slice(NUM_SHOWN);
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const selectedAccount = map[toggleButtonValue];
const setLocationWithAccount = (0, react_1.useCallback)((location) => {
setLocation({
...location,
...(selectedAccount && (0, types_1.isUriLocation)(location)
? { internetAccountId: selectedAccount.internetAccountId }
: {}),
});
}, [setLocation, selectedAccount]);
(0, react_1.useEffect)(() => {
if (selectedAccount &&
(0, types_1.isUriLocation)(location) &&
location.internetAccountId !== selectedAccount.internetAccountId) {
setLocationWithAccount(location);
}
}, [location, selectedAccount, setLocationWithAccount]);
const Wrapper = inline ? Inline : Box2;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", children: (0, jsx_runtime_1.jsx)(material_1.InputLabel, { shrink: true, children: name }) }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, { children: [(0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsxs)(material_1.ToggleButtonGroup, { value: toggleButtonValue, exclusive: true, size: "small", onChange: (_event, newState) => {
setRecentlyUsedInternetAccounts([
...new Set([newState, ...recentlyUsedInternetAccounts].filter(util_1.notEmpty)),
]);
if (newState) {
setToggleButtonValue(newState);
}
if ((0, types_1.isUriLocation)(location)) {
setLocationWithAccount(location);
}
}, "aria-label": "file, url, or account picker", children: [new URLSearchParams(window.location.search).get('adminKey') ? null : ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, { size: "small", value: "file", "aria-label": "local file", children: "File" })), (0, jsx_runtime_1.jsx)(material_1.ToggleButton, { size: "small", value: "url", "aria-label": "url", children: "URL" }), shownAccounts.map(id => {
const { internetAccountId, name, toggleContents } = map[id];
return ((0, jsx_runtime_1.jsx)(ToggleButtonWithTooltip, { value: internetAccountId, title: name, children: typeof toggleContents === 'string'
? shorten(toggleContents, 5)
: toggleContents || shorten(name, 5) }, id));
}), hiddenAccounts.length > 0 ? ((0, jsx_runtime_1.jsxs)(material_1.ToggleButton, { onClick: event => {
setAnchorEl(event.target);
}, selected: false, children: ["More", (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {})] })) : null] }), inline ? ((0, jsx_runtime_1.jsx)(Input, { ...props, toggleButtonValue: toggleButtonValue, selectedAccount: selectedAccount, setLocation: setLocationWithAccount })) : null] }), !inline ? ((0, jsx_runtime_1.jsx)(Input, { ...props, toggleButtonValue: toggleButtonValue, selectedAccount: selectedAccount, setLocation: setLocationWithAccount })) : null] }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: description }), anchorEl ? ((0, jsx_runtime_1.jsx)(material_1.Menu, { open: true, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, onClose: () => {
setAnchorEl(null);
}, children: hiddenAccounts.map(id => {
const { internetAccountId, name } = map[id];
return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: internetAccountId, onClick: () => {
setRecentlyUsedInternetAccounts([
...new Set([
internetAccountId,
...recentlyUsedInternetAccounts,
].filter(util_1.notEmpty)),
]);
setToggleButtonValue(internetAccountId);
setAnchorEl(null);
}, children: name }, id));
}) })) : null] }));
});
exports.default = FileSelector;