Function Body

src/ui-react-inspector/Body.tsx:36–122

({s}: StoreProp)

import {StoreView} from './StoreView.tsx';

export const Body = ({s}: StoreProp) => {
  const articleRef = useRef<HTMLElement>(null);
  const idleCallbackRef = useRef<number>(0);
  const [scrolled, setScrolled] = useState(false);
  const {scrollLeft, scrollTop} = useValues(s);

  useLayoutEffect(() => {
    const article = articleRef.current;
    if (article && !scrolled) {
      const observer = new MutationObserver(() => {
        if (
          article.scrollWidth >=
            mathFloor(scrollLeft as number) + article.clientWidth &&
          article.scrollHeight >=
            mathFloor(scrollTop as number) + article.clientHeight
        ) {
          article.scrollTo(scrollLeft as number, scrollTop as number);
        }
      });
      observer.observe(article, {childList: true, subtree: true});
      return () => observer.disconnect();
    }
  }, [scrolled, scrollLeft, scrollTop]);

  const handleScroll = useCallback(
    (event: SyntheticEvent<HTMLElement>) => {
      const {scrollLeft, scrollTop} = event[CURRENT_TARGET];
      cancelInspectorIdleCallback(idleCallbackRef.current);
      idleCallbackRef.current = requestInspectorIdleCallback(() => {
        setScrolled(true);
        s.setPartialValues({scrollLeft, scrollTop});
      });
    },
    [s],
  );

  const store = useStore();
  const storeIds = useStoreIds();
  const metrics = useMetrics();
  const metricsIds = useMetricsIds();
  const indexes = useIndexes();
  const indexesIds = useIndexesIds();
  const relationships = useRelationships();
  const relationshipsIds = useRelationshipsIds();
  const queries = useQueries();
  const queriesIds = useQueriesIds();

  return isUndefined(store) &&
    arrayIsEmpty(storeIds) &&
    isUndefined(metrics) &&
    arrayIsEmpty(metricsIds) &&
    isUndefined(indexes) &&
    arrayIsEmpty(indexesIds) &&
    isUndefined(relationships) &&
    arrayIsEmpty(relationshipsIds) &&
    isUndefined(queries) &&
    arrayIsEmpty(queriesIds) ? (
    <span className="warn">{NO_PROVIDED_OBJECTS_MESSAGE}</span>