@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
143 lines (142 loc) • 5.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getMaxHeightInPixels = exports.getHeightOfSingleTextLine = exports.calculateMaxComboBoxItemWidth = 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 calculateMaxComboBoxItemWidth = ({
functions,
list,
shouldShowBigImage,
values
}) => {
const length = [];
list.forEach(({
icons,
imageUrl,
rightElement,
subtext,
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 (rightElement) {
// 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, null, rightElement)));
}
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, null, suffixElement)));
}
let width = div.offsetWidth;
if (icons && icons.length > 0) {
width += 20 + 10; // icon width + gap
}
if (imageUrl) {
width += (shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '' ? 40 : 22) + 10; // image width + gap
}
length.push(width);
document.body.removeChild(div);
});
return Math.max.apply(null, length);
};
exports.calculateMaxComboBoxItemWidth = calculateMaxComboBoxItemWidth;
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 = ({
container
}) => {
const div = document.createElement('div');
div.style.visibility = 'hidden';
div.style.position = 'absolute';
div.style.whiteSpace = 'nowrap';
div.innerText = 'Single text line';
container.appendChild(div);
const {
height
} = div.getBoundingClientRect();
container.removeChild(div);
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