@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
72 lines (69 loc) • 2.01 kB
JavaScript
import { forwardRef, useEffect } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { sidebar } from './SideBar.tokens.js';
import { bordersTemplate, useToken } from '@equinor/eds-utils';
import { SideBarProvider, useSideBar } from './SideBar.context.js';
import { jsx } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';
const SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer({
onToggle: onToggleCallback,
children,
...rest
}, ref) {
const {
isOpen,
onToggle,
setOnToggle
} = useSideBar();
useEffect(() => {
if (onToggle === null && onToggleCallback) {
setOnToggle(onToggleCallback);
}
}, [onToggle, onToggleCallback, setOnToggle]);
return /*#__PURE__*/jsx(GridContainer, {
...rest,
open: isOpen,
ref: ref,
children: children
});
});
const GridContainer = styled.div.withConfig({
displayName: "SideBar__GridContainer",
componentId: "sc-a84pkc-0"
})(({
theme,
open
}) => {
return css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:auto;width:", ";min-width:", ";", ""], bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth, !open && css(["scrollbar-width:none;&::-webkit-scrollbar{display:none;}"]));
});
const SideBar = /*#__PURE__*/forwardRef(({
onToggle,
open = false,
children,
...rest
}, ref) => {
const {
density
} = useEds();
const token = useToken({
density
}, sidebar);
const props = {
onToggle,
open,
children,
...rest
};
return /*#__PURE__*/jsx(ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsx(SideBarProvider, {
isOpen: open,
children: /*#__PURE__*/jsx(SideBarContainer, {
...props,
ref: ref
})
})
});
});
SideBar.displayName = 'SideBar';
export { SideBar };