wiki
/
weseek__growi
зеркало из https://github.com/weseek/growi


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							import type { JSX, ReactNode } from 'react';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import type { ColorScheme } from '@growi/core';
import { useIsomorphicLayoutEffect } from 'usehooks-ts';

import {
  NextThemesProvider,
  useNextThemes,
} from '~/stores-universal/use-next-themes';
import loggerFactory from '~/utils/logger';

import styles from './RawLayout.module.scss';

const toastContainerClass = styles['grw-toast-container'] ?? '';

const logger = loggerFactory('growi:cli:RawLayout');

const ToastContainer = dynamic(
  () => import('react-toastify').then((mod) => mod.ToastContainer),
  { ssr: false },
);

type Props = {
  className?: string;
  children?: ReactNode;
};

export const RawLayout = ({ children, className }: Props): JSX.Element => {
  const classNames: string[] = ['layout-root', 'growi'];
  if (className != null) {
    classNames.push(className);
  }
  // get color scheme from next-themes
  const { resolvedTheme, resolvedThemeByAttributes } = useNextThemes();

  const [colorScheme, setColorScheme] = useState<ColorScheme | undefined>(
    undefined,
  );

  // set colorScheme in CSR
  useIsomorphicLayoutEffect(() => {
    setColorScheme(resolvedTheme ?? resolvedThemeByAttributes);
  }, [resolvedTheme, resolvedThemeByAttributes]);

  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <NextThemesProvider>
        <div className={classNames.join(' ')}>
          {children}
          <ToastContainer className={toastContainerClass} theme={colorScheme} />
        </div>
      </NextThemesProvider>
    </>
  );
};