129 lines
8.3 KiB
JavaScript
129 lines
8.3 KiB
JavaScript
'use client';
|
|
|
|
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
import { treeItemLevelToken } from '../../utils/tokens';
|
|
import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
|
|
import { useTreeContext_unstable } from '../../contexts/treeContext';
|
|
export const treeItemPersonaLayoutClassNames = {
|
|
root: 'fui-TreeItemPersonaLayout',
|
|
media: 'fui-TreeItemPersonaLayout__media',
|
|
description: 'fui-TreeItemPersonaLayout__description',
|
|
main: 'fui-TreeItemPersonaLayout__main',
|
|
expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
|
|
aside: 'fui-TreeItemPersonaLayout__aside',
|
|
actions: 'fui-TreeItemPersonaLayout__actions',
|
|
selector: 'fui-TreeItemPersonaLayout__selector'
|
|
};
|
|
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1r98egg", null, [".r1r98egg{display:grid;grid-template-rows:1fr auto;grid-template-columns:auto auto 1fr auto;grid-template-areas:\"expandIcon media main aside\" \"expandIcon media description aside\";align-items:center;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r1r98egg:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1r98egg:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".r1r98egg:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".r1r98egg:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
|
|
/**
|
|
* Styles for the root slot
|
|
*/
|
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
leaf: {
|
|
uwmqm3: ["f1k1erfc", "faevyjx"]
|
|
},
|
|
branch: {
|
|
uwmqm3: ["fo100m9", "f6yw3pu"]
|
|
},
|
|
medium: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
small: {
|
|
sshi5w: "f1pha7fy",
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fy9rknc",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "fwrc4pm"
|
|
},
|
|
subtle: {},
|
|
"subtle-alpha": {
|
|
Jwef8y: "f146ro5n",
|
|
ecr2s2: "fkam630"
|
|
},
|
|
transparent: {
|
|
De3pzq: "f1c21dwh",
|
|
Jwef8y: "fjxutwb",
|
|
ecr2s2: "fophhak"
|
|
}
|
|
}, {
|
|
d: [".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
|
|
h: [".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
|
|
a: [".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"]
|
|
});
|
|
/**
|
|
* Styles for the expand icon slot
|
|
*/
|
|
const useMediaBaseStyles = /*#__PURE__*/__resetStyles("rkcde6g", "r1e986zr", [".rkcde6g{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalXXS);}", ".r1e986zr{display:flex;align-items:center;width:32px;height:32px;grid-area:media;padding:0 var(--spacingHorizontalXXS) 0 var(--spacingHorizontalXS);}"]);
|
|
const useMainBaseStyles = /*#__PURE__*/__resetStyles("r1qjtz99", "rob5fcp", [".r1qjtz99{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".rob5fcp{grid-area:main;padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
|
|
const useMainStyles = /*#__PURE__*/__styles({
|
|
withDescription: {
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: ["f1625emv", "f5y9hxg"]
|
|
}
|
|
}, {
|
|
d: [[".f1625emv{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalXS) 0 var(--spacingHorizontalS);}", {
|
|
p: -1
|
|
}], [".f5y9hxg{padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) 0 var(--spacingHorizontalXS);}", {
|
|
p: -1
|
|
}]]
|
|
});
|
|
const useDescriptionBaseStyles = /*#__PURE__*/__resetStyles("r1bnsn1b", "r13x7gq", [".r1bnsn1b{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalXS) var(--spacingVerticalMNudge) var(--spacingHorizontalS);}", ".r13x7gq{grid-area:description;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);padding:0 var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalXS);}"]);
|
|
/**
|
|
* Styles for the action icon slot
|
|
*/
|
|
const useActionsBaseStyles = /*#__PURE__*/__resetStyles("rzvs2in", "r17h8a29", [".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}", ".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"]);
|
|
/**
|
|
* Styles for the action icon slot
|
|
*/
|
|
const useAsideBaseStyles = /*#__PURE__*/__resetStyles("r1825u21", "rezy0yk", [".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}", ".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"]);
|
|
/**
|
|
* Styles for the expand icon slot
|
|
*/
|
|
const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rn61xvs", null, [".rn61xvs{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);grid-area:expandIcon;flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"]);
|
|
/**
|
|
* Apply styling to the TreeItemPersonaLayout slots based on the state
|
|
*/
|
|
export const useTreeItemPersonaLayoutStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const rootBaseStyles = useRootBaseStyles();
|
|
const rootStyles = useRootStyles();
|
|
const mediaBaseStyles = useMediaBaseStyles();
|
|
const descriptionBaseStyles = useDescriptionBaseStyles();
|
|
const actionsBaseStyles = useActionsBaseStyles();
|
|
const asideBaseStyles = useAsideBaseStyles();
|
|
const expandIconBaseStyles = useExpandIconBaseStyles();
|
|
const mainBaseStyles = useMainBaseStyles();
|
|
const mainStyles = useMainStyles();
|
|
const size = useTreeContext_unstable(ctx => ctx.size);
|
|
const appearance = useTreeContext_unstable(ctx => ctx.appearance);
|
|
const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
|
|
state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootBaseStyles, rootStyles[itemType], rootStyles[appearance], rootStyles[size], state.root.className);
|
|
state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaBaseStyles, state.media.className);
|
|
if (state.main) {
|
|
state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainBaseStyles, state.description && mainStyles.withDescription, state.main.className);
|
|
}
|
|
if (state.description) {
|
|
state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionBaseStyles, state.description.className);
|
|
}
|
|
if (state.actions) {
|
|
state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsBaseStyles, state.actions.className);
|
|
}
|
|
if (state.aside) {
|
|
state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideBaseStyles, state.aside.className);
|
|
}
|
|
if (state.expandIcon) {
|
|
state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconBaseStyles, state.expandIcon.className);
|
|
}
|
|
if (state.selector) {
|
|
state.selector.className = mergeClasses(treeItemPersonaLayoutClassNames.selector, state.selector.className);
|
|
}
|
|
return state;
|
|
}; |