You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
983 B
38 lines
983 B
import classNames from 'classnames';
|
|
import * as React from 'react';
|
|
import { useBootstrapPrefix } from './ThemeProvider';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
const defaultProps = {
|
|
aspectRatio: '1x1'
|
|
};
|
|
|
|
function toPercent(num) {
|
|
if (num <= 0 || num > 100) return '100%';
|
|
if (num < 1) return `${num * 100}%`;
|
|
return `${num}%`;
|
|
}
|
|
|
|
const Ratio = /*#__PURE__*/React.forwardRef(({
|
|
bsPrefix,
|
|
className,
|
|
children,
|
|
aspectRatio,
|
|
style,
|
|
...props
|
|
}, ref) => {
|
|
bsPrefix = useBootstrapPrefix(bsPrefix, 'ratio');
|
|
const isCustomRatio = typeof aspectRatio === 'number';
|
|
return /*#__PURE__*/_jsx("div", {
|
|
ref: ref,
|
|
...props,
|
|
style: { ...style,
|
|
...(isCustomRatio && {
|
|
'--bs-aspect-ratio': toPercent(aspectRatio)
|
|
})
|
|
},
|
|
className: classNames(bsPrefix, className, !isCustomRatio && `${bsPrefix}-${aspectRatio}`),
|
|
children: React.Children.only(children)
|
|
});
|
|
});
|
|
Ratio.defaultProps = defaultProps;
|
|
export default Ratio; |