irisrad-ui/src/components/SizeTweeking/SizeTweeking.js

UI elements developered for IRIS R&D Group Inc

import React, { useState, useEffect, useCallback } from "react";

const MIN_FONT_SIZE = 0.8;
const MAX_FONT_SIZE = 2;

const initialFontSize = (MIN_FONT_SIZE + MAX_FONT_SIZE) / 2;

const MIN_PADDING = 0;
const MAX_PADDING = 1.5;

const initialPadding = (MIN_PADDING + MAX_PADDING) / 2;
export function SizeTweeking({ children }) {
  const [fontSize, setFontSize] = useState(initialFontSize);
  const [paddingVertical, setPaddingVertical] = useState(initialPadding);
  const [paddingHorizontal, setPaddingHorizontal] = useState(initialPadding);
  const toggleSize = useCallback((classList, classPrefix, size, multiplier) => {
    if (classList) {
      debugger;
      const fontClass = [...classList].find((fc) => fc.startsWith(classPrefix));
      if (fontClass) {
        classList.remove(fontClass);
      }
      const updatedClass = classPrefix + "-" + size * multiplier;
      classList.toggle(updatedClass);
    }
    console.log(`classList`, classList);
  }, []);

  useEffect(() => {
    const classList = children.ref.current.classList;
    debugger;
    toggleSize(classList, "fs-testing", Number(fontSize), 10);
  }, [fontSize, toggleSize]);
  useEffect(() => {
    const classList = children.ref.current.classList;
    toggleSize(classList, "ph-testing", Number(paddingVertical), 1000);
  }, [paddingVertical, toggleSize]);
  useEffect(() => {
    const classList = children.ref.current.classList;
    toggleSize(classList, "pv-testing", Number(paddingHorizontal), 1000);
  }, [paddingHorizontal, toggleSize]);

  return (
    <div style={{ padding: "1em", margin: "1rem" }}>
      {children}
      <p>font size: {fontSize}</p>
      <p>padding H: {paddingHorizontal}</p>
      <p>padding V: {paddingVertical}</p>

      <div>
        <div>
          <input
            type="range"
            max={MAX_FONT_SIZE}
            min={MIN_FONT_SIZE}
            step={0.1}
            value={fontSize}
            onChange={(e) => setFontSize(Number(e.target.value))}
          />
        </div>
        <div>
          <input
            type="range"
            max={MAX_PADDING}
            min={MIN_PADDING}
            step={0.125}
            value={paddingHorizontal}
            onChange={(e) => setPaddingHorizontal(Number(e.target.value))}
          />
        </div>
        <div>
          <input
            type="range"
            max={MAX_PADDING}
            min={MIN_PADDING}
            step={0.125}
            value={paddingVertical}
            onChange={(e) => setPaddingVertical(Number(e.target.value))}
          />
        </div>
      </div>
    </div>
  );
}