@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
114 lines (113 loc) • 4.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getMaxHeightInPixels = exports.getHeightOfSingleTextLine = exports.calculateContentWidth = exports.calculateContentHeight = exports.calculateBiggestWidth = void 0;
var _chaynsApi = require("chayns-api");
var _react = _interopRequireDefault(require("react"));
var _server = require("react-dom/server");
var _ColorSchemeProvider = _interopRequireDefault(require("../components/color-scheme-provider/ColorSchemeProvider"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const calculateContentWidth = (list, functions, values) => {
const length = [];
list.forEach(({
suffixElement,
text,
textStyles
}) => {
const tagName = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.tagName) ?? 'div';
const styles = textStyles === null || textStyles === void 0 ? void 0 : textStyles.styles;
const div = document.createElement(tagName);
if (styles) {
Object.assign(div.style, styles);
}
div.style.display = 'flex';
div.style.gap = '10px';
div.style.position = 'absolute';
div.style.visibility = 'hidden';
div.style.whiteSpace = 'nowrap';
div.style.width = 'auto';
document.body.appendChild(div);
div.innerText = text;
if (suffixElement) {
// ColorSchemeProvider is used to prevent missing scheme context error.
// Due to the fact that the element is never rendered visible, the values are irrelevant.
div.innerHTML += (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
data: values,
functions: functions,
isModule: true
}, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
color: "#005EB8",
colorMode: 0
}, suffixElement)));
}
length.push(div.offsetWidth);
document.body.removeChild(div);
});
return Math.max.apply(null, length);
};
exports.calculateContentWidth = calculateContentWidth;
const calculateBiggestWidth = elements => {
const container = document.createElement('div');
container.style.visibility = 'hidden';
container.style.position = 'absolute';
container.style.width = 'auto';
container.style.whiteSpace = 'nowrap';
container.style.padding = '7px 12px';
container.style.display = 'block';
elements.forEach(({
text,
id
}) => {
const element = document.createElement('div');
element.accessKey = `slider-button-pseudo--${id}`;
element.innerText = text;
container.appendChild(element);
});
document.body.appendChild(container);
const width = container.offsetWidth;
document.body.removeChild(container);
return width;
};
exports.calculateBiggestWidth = calculateBiggestWidth;
const calculateContentHeight = elements => {
const heights = [];
elements.forEach(element => {
const div = document.createElement('div');
div.style.visibility = 'hidden';
div.style.position = 'absolute';
div.style.width = 'auto';
div.style.padding = '4px 10px';
div.style.whiteSpace = 'nowrap';
document.body.appendChild(div);
div.innerText = element;
heights.push(div.offsetHeight);
document.body.removeChild(div);
});
return heights.reduce((partialSum, a) => partialSum + a, 0);
};
exports.calculateContentHeight = calculateContentHeight;
const getHeightOfSingleTextLine = () => {
const span = document.createElement('span');
span.innerText = 'A';
document.body.appendChild(span);
const height = span.offsetHeight;
document.body.removeChild(span);
return height;
};
exports.getHeightOfSingleTextLine = getHeightOfSingleTextLine;
const getMaxHeightInPixels = (maxHeight, rootElement) => {
const tempElement = document.createElement('div');
tempElement.style.position = 'absolute';
tempElement.style.visibility = 'hidden';
tempElement.style.height = '100vh';
tempElement.style.maxHeight = maxHeight;
rootElement.appendChild(tempElement);
const {
height
} = tempElement.getBoundingClientRect();
rootElement.removeChild(tempElement);
return height;
};
exports.getMaxHeightInPixels = getMaxHeightInPixels;
//# sourceMappingURL=calculate.js.map