@knowmax/genericlist-fluentuiv9
Version:
Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.
67 lines (66 loc) • 2.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from "react";
import { observer } from "mobx-react-lite";
import { makeStyles, shorthands, mergeClasses } from '@griffel/react';
import { Caption1Strong, tokens } from "@fluentui/react-components";
import { ToggleOpenButton } from "../core";
import { ResetFilters, RecycleBinFilter } from ".";
const useClasses = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
...shorthands.padding(tokens.spacingHorizontalS),
backgroundColor: tokens.colorBrandBackground2,
boxShadow: tokens.shadow8,
position: 'sticky',
overflowX: 'hidden',
transitionProperty: 'row-gap',
transitionDuration: '350ms',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)'
},
rootOpen: {
rowGap: tokens.spacingHorizontalM,
},
rootClosed: {
rowGap: '0px',
},
head: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
},
headCollapsible: {
cursor: 'pointer'
},
contents: {
display: 'flex',
flexDirection: 'column',
rowGap: tokens.spacingHorizontalL,
overflow: 'hidden',
transitionProperty: 'max-height, opacity, transform',
transitionDuration: '350ms',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)'
},
contentsOpen: {
maxHeight: '2000px', // Large enough to accommodate content
opacity: '1',
transform: 'translateY(0px)'
},
contentsClosed: {
maxHeight: '0px',
opacity: '0',
transform: 'translateY(-8px)'
}
});
/** Wrap this around components to be put on a fancy side panel besides list. Renders as div. */
export const SidePanel = observer(({ children, caption, showResetFilters = true, showRecycleBinFilter = false, collapsible = false, collapsed = false, listId, className, captionClassName, filterList }) => {
const [open, setOpen] = useState(!collapsed || !collapsible);
const classes = useClasses();
const toggle = useCallback(() => {
if (collapsible) {
setOpen(o => !o);
}
}, [collapsible]);
return (_jsxs("div", { className: mergeClasses(classes.root, open ? classes.rootOpen : classes.rootClosed, className), children: [_jsxs("section", { className: mergeClasses(classes.head, collapsible && classes.headCollapsible), onClick: toggle, children: [caption &&
_jsx(Caption1Strong, { className: captionClassName, children: caption }), collapsible && _jsx(ToggleOpenButton, { value: open })] }), _jsxs("section", { className: mergeClasses(classes.contents, open ? classes.contentsOpen : classes.contentsClosed), children: [showResetFilters && _jsx(ResetFilters, { listId: listId, filterList: filterList }), showRecycleBinFilter && _jsx(RecycleBinFilter, { listId: listId }), children] })] }));
});