89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
imageClassNames: function() {
|
|
return imageClassNames;
|
|
},
|
|
useImageStyles_unstable: function() {
|
|
return useImageStyles_unstable;
|
|
}
|
|
});
|
|
const _react = require("@griffel/react");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const imageClassNames = {
|
|
root: 'fui-Image'
|
|
};
|
|
const useStyles = (0, _react.makeStyles)({
|
|
// Base styles
|
|
base: {
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
|
|
borderRadius: _reacttheme.tokens.borderRadiusNone,
|
|
boxSizing: 'border-box',
|
|
display: 'inline-block'
|
|
},
|
|
// Bordered styles
|
|
bordered: {
|
|
..._react.shorthands.borderStyle('solid'),
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
|
|
},
|
|
// Shape variations
|
|
circular: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusCircular
|
|
},
|
|
rounded: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
},
|
|
square: {},
|
|
// Shadow styles
|
|
shadow: {
|
|
boxShadow: _reacttheme.tokens.shadow4
|
|
},
|
|
// Fit variations
|
|
center: {
|
|
objectFit: 'none',
|
|
objectPosition: 'center'
|
|
},
|
|
contain: {
|
|
objectFit: 'contain',
|
|
objectPosition: 'center'
|
|
},
|
|
default: {},
|
|
cover: {
|
|
objectFit: 'cover',
|
|
objectPosition: 'center'
|
|
},
|
|
none: {
|
|
objectFit: 'none',
|
|
objectPosition: 'left top'
|
|
},
|
|
// When no explicit height/width props are provided, apply full-size
|
|
// sizing so fit modes behave as intended (object-fit fills the element).
|
|
fitFill: {
|
|
height: '100%',
|
|
width: '100%'
|
|
},
|
|
// Block styles
|
|
block: {
|
|
width: '100%'
|
|
}
|
|
});
|
|
const useImageStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const styles = useStyles();
|
|
const { height, width } = state.root;
|
|
// eslint-disable-next-line eqeqeq
|
|
const hasExplicitSize = height != null || width != null;
|
|
const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
|
|
state.root.className = (0, _react.mergeClasses)(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);
|
|
return state;
|
|
};
|