@datalayer/core
Version:
**Datalayer Core**
44 lines (43 loc) • 2.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useState, useEffect, useCallback } from "react";
import { FormControl, Select } from "@primer/react";
import { Box } from "@datalayer/primer-addons";
import { useCache, useUser } from "./../../hooks";
import { useLayoutStore } from "../../state";
export const SpaceSelect = () => {
const user = useUser();
const { organization, space, updateLayoutSpace } = useLayoutStore();
const { refreshUserSpaces, getUserSpaces, refreshOrganizationSpaces, getOrganizationSpaces } = useCache();
const [spaces, setSpaces] = useState([]);
const [_, setSelection] = useState(space);
useEffect(() => {
if (organization) {
refreshOrganizationSpaces(organization.id).then(resp => {
if (resp.success) {
setSpaces(getOrganizationSpaces(organization.id));
}
});
}
else {
refreshUserSpaces().then(resp => {
if (resp.success) {
setSpaces(getUserSpaces());
}
});
}
}, [user, organization]);
const onSelectionChange = useCallback((e) => {
const selectedSpace = e.target.value;
const org = (selectedSpace === undefined)
? undefined
: spaces[parseInt(selectedSpace, 10)];
setSelection(org);
updateLayoutSpace(org);
}, [setSelection, spaces]);
return (_jsx(_Fragment, { children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Select a space" }), _jsx(FormControl.Caption, { children: "This will go with you while you navigate" }), _jsx(Select, { block: true, width: "medium", onChange: onSelectionChange, placeholder: "Please select an space...", children: spaces.map((sp, index) => (_jsx(Select.Option, { value: `${index}`, selected: sp.id === space?.id, children: sp.name }))) })] }) }) }));
};
export default SpaceSelect;