@chayns-components/core/lib/esm/utils/calculate.js

A set of beautiful React components for developing your own applications with chayns.

import { ChaynsProvider } from 'chayns-api';
import React from 'react';
import { renderToString } from 'react-dom/server';
import ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';
export const calculateContentWidth = (list, functions, values) => {
  const length = [];
  list.forEach(_ref => {
    let {
      suffixElement,
      text,
      textStyles
    } = _ref;
    const tagName = textStyles?.tagName ?? 'div';
    const styles = 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 += renderToString(/*#__PURE__*/React.createElement(ChaynsProvider, {
        data: values,
        functions: functions,
        isModule: true
      }, /*#__PURE__*/React.createElement(ColorSchemeProvider, {
        color: "#005EB8",
        colorMode: 0
      }, suffixElement)));
    }
    length.push(div.offsetWidth);
    document.body.removeChild(div);
  });
  return Math.max.apply(null, length);
};
export 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(_ref2 => {
    let {
      text,
      id
    } = _ref2;
    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;
};
export 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);
};
export const getHeightOfSingleTextLine = () => {
  const span = document.createElement('span');
  span.innerText = 'A';
  document.body.appendChild(span);
  const height = span.offsetHeight;
  document.body.removeChild(span);
  return height;
};
export 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;
};
//# sourceMappingURL=calculate.js.map