63 lines
3.1 KiB
JavaScript
63 lines
3.1 KiB
JavaScript
'use client';
|
|
|
|
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
import { treeItemLevelToken } from '../../utils/tokens';
|
|
import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
|
|
import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
|
|
export const treeItemClassNames = {
|
|
root: 'fui-TreeItem'
|
|
};
|
|
const useBaseStyles = /*#__PURE__*/__resetStyles("r15xhw3a", "r2f6k57", [".r15xhw3a{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}", ".r15xhw3a:focus{outline-style:none;}", ".r15xhw3a:focus-visible{outline-style:none;}", ".r15xhw3a[data-fui-focus-visible]>.fui-TreeItemLayout,.r15xhw3a[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}", ".r2f6k57{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}", ".r2f6k57:focus{outline-style:none;}", ".r2f6k57:focus-visible{outline-style:none;}", ".r2f6k57[data-fui-focus-visible]>.fui-TreeItemLayout,.r2f6k57[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}"]);
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
level1: {
|
|
iytv0q: "f10bgyvd"
|
|
},
|
|
level2: {
|
|
iytv0q: "f1h0rod3"
|
|
},
|
|
level3: {
|
|
iytv0q: "fgoqafk"
|
|
},
|
|
level4: {
|
|
iytv0q: "f75dvuh"
|
|
},
|
|
level5: {
|
|
iytv0q: "fqk7yw6"
|
|
},
|
|
level6: {
|
|
iytv0q: "f1r3z17b"
|
|
},
|
|
level7: {
|
|
iytv0q: "f1hrpd1h"
|
|
},
|
|
level8: {
|
|
iytv0q: "f1iy65d0"
|
|
},
|
|
level9: {
|
|
iytv0q: "ftg42e5"
|
|
},
|
|
level10: {
|
|
iytv0q: "fyat3t"
|
|
}
|
|
}, {
|
|
d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
|
|
});
|
|
/**
|
|
* Apply styling to the TreeItem slots based on the state
|
|
*/
|
|
export const useTreeItemStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const baseStyles = useBaseStyles();
|
|
const styles = useStyles();
|
|
const {
|
|
level
|
|
} = state;
|
|
state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
|
|
return state;
|
|
};
|
|
function isStaticallyDefinedLevel(level) {
|
|
return level >= 1 && level <= 10;
|
|
} |