115 lines
3.7 KiB
JavaScript
115 lines
3.7 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
const virtualizerClassName = 'fui-Virtualizer';
|
|
/**
|
|
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
|
|
*/
|
|
export const virtualizerClassNames = {
|
|
before: `${virtualizerClassName}__before`,
|
|
beforeContainer: `${virtualizerClassName}__beforeContainer`,
|
|
after: `${virtualizerClassName}__after`,
|
|
afterContainer: `${virtualizerClassName}__afterContainer`
|
|
};
|
|
const useStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
mc9l5x: "ftgm304",
|
|
Bkecrkj: "f1aehjj5"
|
|
},
|
|
relative: {
|
|
qhf8xq: "f10pi13n"
|
|
},
|
|
horizontal: {
|
|
sshi5w: "fan4evk"
|
|
},
|
|
vertical: {
|
|
Bf4jedk: "f11qra4b"
|
|
}
|
|
}, {
|
|
d: [".ftgm304{display:block;}", ".f1aehjj5{pointer-events:none;}", ".f10pi13n{position:relative;}", ".fan4evk{min-height:100%;}", ".f11qra4b{min-width:100%;}"]
|
|
});
|
|
/**
|
|
* Apply styling to the Virtualizer states
|
|
* @deprecated migrated to \@fluentui\-contrib/react\-virtualizer for stable release.
|
|
*/
|
|
export const useVirtualizerStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const styles = useStyles();
|
|
const {
|
|
reversed,
|
|
axis,
|
|
beforeBufferHeight,
|
|
afterBufferHeight,
|
|
bufferSize
|
|
} = state;
|
|
const horizontal = axis === 'horizontal';
|
|
state.before.className = mergeClasses(virtualizerClassNames.before, styles.base, styles.relative, horizontal ? styles.horizontal : styles.vertical, state.before.className);
|
|
state.after.className = mergeClasses(virtualizerClassNames.after, styles.base, styles.relative, horizontal ? styles.horizontal : styles.vertical, state.after.className);
|
|
state.beforeContainer.className = mergeClasses(virtualizerClassNames.beforeContainer, styles.base, horizontal ? styles.horizontal : styles.vertical, state.beforeContainer.className);
|
|
state.afterContainer.className = mergeClasses(virtualizerClassNames.afterContainer, styles.base, horizontal ? styles.horizontal : styles.vertical, state.afterContainer.className);
|
|
const beforeHeightPx = beforeBufferHeight + 'px';
|
|
const afterHeightPx = afterBufferHeight + 'px';
|
|
const beforeBufferHeightPx = beforeBufferHeight + bufferSize + 'px';
|
|
const afterBufferHeightPx = afterBufferHeight + bufferSize + 'px';
|
|
const bufferPx = bufferSize + 'px';
|
|
const beforeBuffer = {
|
|
// Column
|
|
...(!reversed && !horizontal && {
|
|
marginBottom: `-${bufferPx}`
|
|
}),
|
|
// Column-Reverse
|
|
...(reversed && !horizontal && {
|
|
marginTop: `-${bufferPx}`
|
|
}),
|
|
// Row
|
|
...(!reversed && horizontal && {
|
|
marginRight: `-${bufferPx}`
|
|
}),
|
|
// Row-Reverse
|
|
...(reversed && horizontal && {
|
|
marginLeft: `-${bufferPx}`
|
|
})
|
|
};
|
|
const afterBuffer = {
|
|
// Column
|
|
...(!reversed && !horizontal && {
|
|
marginTop: `-${bufferPx}`
|
|
}),
|
|
// Column-Reverse
|
|
...(reversed && !horizontal && {
|
|
marginBottom: `-${bufferPx}`
|
|
}),
|
|
// Row
|
|
...(!reversed && horizontal && {
|
|
marginLeft: `-${bufferPx}`
|
|
}),
|
|
// Row-Reverse
|
|
...(reversed && horizontal && {
|
|
marginRight: `-${bufferPx}`
|
|
})
|
|
};
|
|
state.before.style = {
|
|
height: horizontal ? '100%' : beforeBufferHeightPx,
|
|
width: horizontal ? beforeBufferHeightPx : '100%',
|
|
...beforeBuffer,
|
|
...state.before.style
|
|
};
|
|
state.beforeContainer.style = {
|
|
height: horizontal ? 'auto' : beforeHeightPx,
|
|
width: horizontal ? beforeHeightPx : 'auto',
|
|
...state.beforeContainer.style
|
|
};
|
|
state.after.style = {
|
|
height: horizontal ? '100%' : afterBufferHeightPx,
|
|
width: horizontal ? afterBufferHeightPx : '100%',
|
|
...afterBuffer,
|
|
...state.after.style
|
|
};
|
|
state.afterContainer.style = {
|
|
height: horizontal ? 'auto' : afterHeightPx,
|
|
width: horizontal ? afterHeightPx : 'auto',
|
|
...state.afterContainer.style
|
|
};
|
|
return state;
|
|
}; |