react-responsive-pagination
Version:
React component for responsive pagination
50 lines (49 loc) • 2.02 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 getColumnGap(element) {
const style = getComputedStyle(element);
const columnGap = style.columnGap;
if (columnGap === 'normal' || !columnGap)
return 0;
if (columnGap.indexOf('px') === -1) {
if (process.env.NODE_ENV !== 'production') {
console.log(`react-responsive-pagination: gap not supported: ${columnGap}`);
}
return 0;
}
return styleMetricToIntRounded(columnGap);
}
export function getWidth(element) {
return element.getBoundingClientRect().width;
}
function styleMetricToInt(styleAttribute) {
return styleAttribute ? parseInt(styleAttribute) : 0;
}
// V3-TODO: use for all metrics
function styleMetricToIntRounded(styleAttribute) {
return Math.ceil(parseFloat(styleAttribute));
}