tomat / react-auto-scale Goto Github PK

import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import elementResizeEvent, { unbind } from 'element-resize-event';

const RelativeRoot = styled.div`
  position: relative;
`;

const Wrapper = styled.div`
  position: absolute;
  width: 100%;
`;

const Container = styled.div`
  max-width: 100%;
  overflow: hidden;
`;

const Content = styled.div`
  transform-origin: 0 0 0;
`;

type Size = {
  width: number;
  height: number;
};

export type AutoScaleProps = {
  maxHeight?: number;
  maxWidth?: number;
  maxScale?: number;
};

export const AutoScale: React.FC<AutoScaleProps> = ({ maxWidth, maxHeight, maxScale, children }) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  const [contentSize, setContentSize] = useState<Size>({ width: 0, height: 0 });
  const [scale, setScale] = useState<number>(1);

  const updateState = () => {
    const actualContent = contentRef.current!.children[0] as HTMLElement;
    const _wrapperSize: Size = { width: wrapperRef.current!.offsetWidth, height: wrapperRef.current!.offsetHeight };
    const _contentSize: Size = { width: actualContent.offsetWidth, height: actualContent.offsetHeight };

    let _scale = (_wrapperSize.width / _contentSize.width);

    if (maxHeight) {
      _scale = Math.min(_scale, (maxHeight / _contentSize.height));
    }
    if (maxWidth) {
      _scale = Math.min(_scale, (maxWidth / _contentSize.width));
    }
    if (maxScale) {
      _scale = Math.min(_scale, maxScale);
    }

    setContentSize(_contentSize);
    setScale(_scale);
  };

  useEffect(() => {
    const actualContent = contentRef.current!.children[0] as HTMLElement;
    updateState();
    elementResizeEvent(actualContent, updateState);
    elementResizeEvent(wrapperRef.current!, updateState);
    return () => {
      unbind(actualContent);
      unbind(wrapperRef.current!);
    };
  }, []);

  const containerStyles = {
    width: scale * contentSize.width,
    height: scale * contentSize.height,
  };

  const contentStyles = {
    transform: `scale(${scale})`,
  };

  return (
    <RelativeRoot>
      <Wrapper ref={wrapperRef}>
        <Container style={containerStyles}>
          <Content ref={contentRef} style={contentStyles}>
            {children}
          </Content>
        </Container>
      </Wrapper>
    </RelativeRoot>
  );
};