react-responsive-pagination
Version:
React component for responsive pagination
34 lines (33 loc) • 1.46 kB
JavaScript
// V3-TODO: use logical properties throughout
export function getElementWidth(element) {
const style = getComputedStyle(element);
const overrideInlineMarginStart = style.getPropertyValue('--pagination-override-margin-inline-start');
const overrideInlineMarginEnd = style.getPropertyValue('--pagination-override-margin-inline-end');
return (styleMetricToInt(overrideInlineMarginStart || style.marginLeft) +
getWidth(element) +
styleMetricToInt(overrideInlineMarginEnd || style.marginRight));
}
export function getContentWidth(element) {
const style = getComputedStyle(element);
return (element.getBoundingClientRect().width -
styleMetricToInt(style.borderLeftWidth) -
styleMetricToInt(style.paddingLeft) -
styleMetricToInt(style.paddingRight) -
styleMetricToInt(style.borderRightWidth));
}
export function getNonContentWidth(element) {
const style = getComputedStyle(element);
return (styleMetricToInt(style.marginLeft) +
styleMetricToInt(style.borderLeftWidth) +
styleMetricToInt(style.paddingLeft) +
styleMetricToInt(style.paddingRight) +
styleMetricToInt(style.borderRightWidth) +
styleMetricToInt(style.marginRight));
}
export function getWidth(element) {
return element.getBoundingClientRect().width;
}
// V3-TODO: round up
function styleMetricToInt(styleAttribute) {
return styleAttribute ? parseInt(styleAttribute) : 0;
}