Главная Обзор Помощь
Вход
wiki
/
weseek__growi
зеркало из https://github.com/weseek/growi
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

render background-image using ThemeImageProvider

yohei0125 3 лет назад
Родитель
49f3a7dfed
Сommit
be90092d2b
9 измененных файлов с 116 добавлено и 2 удалено
Единый вид Показать статистику Diff
  1. 18 2
      packages/app/src/components/Layout/RawLayout.tsx
  2. 9 0
      packages/app/src/components/Theme/ThemeAntarctic.tsx
  3. 9 0
      packages/app/src/components/Theme/ThemeChristmas.tsx
  4. 9 0
      packages/app/src/components/Theme/ThemeHalloween.tsx
  5. 13 0
      packages/app/src/components/Theme/ThemeHufflepuff.tsx
  6. 9 0
      packages/app/src/components/Theme/ThemeIsland.tsx
  7. 9 0
      packages/app/src/components/Theme/ThemeSpring.tsx
  8. 9 0
      packages/app/src/components/Theme/ThemeWood.tsx
  9. 31 0
      packages/app/src/components/Theme/utils/ThemeImageProvider.tsx

+ 18 - 2
packages/app/src/components/Layout/RawLayout.tsx
Просмотреть файл 

@@ -1,10 +1,14 @@
 
-import React, { ReactNode, useEffect, useState } from 'react';
 
+import React, {
 
+  ReactNode, useCallback, useEffect, useState,
 
+} from 'react';
 
 
 
 import Head from 'next/head';
 
 import Head from 'next/head';
 
+import Image from 'next/image';
 
 
 
 import { useGrowiTheme } from '~/stores/context';
 
 import { useGrowiTheme } from '~/stores/context';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
 
 
+import { getBackgroundImageSrc } from '../Theme/utils/ThemeImageProvider';
 
 import { ThemeProvider } from '../Theme/utils/ThemeProvider';
 
 import { ThemeProvider } from '../Theme/utils/ThemeProvider';
 
 
 
 type Props = {
 
 type Props = {
 
@@ -25,12 +29,21 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
 
   const { resolvedTheme } = useNextThemes();
 
   const { resolvedTheme } = useNextThemes();
 
 
 
   const [colorScheme, setColorScheme] = useState<Themes|undefined>(undefined);
 
   const [colorScheme, setColorScheme] = useState<Themes|undefined>(undefined);
 
-
 
+  const [backgroundImageSrc, setBackgroundImageSrc] = useState<string | undefined>(undefined);
 
   // set colorScheme in CSR
 
   // set colorScheme in CSR
 
   useEffect(() => {
 
   useEffect(() => {
 
     setColorScheme(resolvedTheme as Themes);
 
     setColorScheme(resolvedTheme as Themes);
 
   }, [resolvedTheme]);
 
   }, [resolvedTheme]);
 
 
 
+  useEffect(() => {
 
+    if (growiTheme == null || colorScheme == null) {
 
+      setBackgroundImageSrc(undefined);
 
+      return;
 
+    }
 
+    const imgSrc = getBackgroundImageSrc(growiTheme, colorScheme);
 
+    setBackgroundImageSrc(imgSrc);
 
+  }, [growiTheme, colorScheme]);
 
+
 
   return (
 
   return (
 
     <>
 
     <>
 
       <Head>
 
       <Head>
 
@@ -40,6 +53,9 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
 
       </Head>
 
       </Head>
 
       <ThemeProvider theme={growiTheme}>
 
       <ThemeProvider theme={growiTheme}>
 
         <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
 
         <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
 
+          {backgroundImageSrc != null && <div className="bg-image-wrapper">
 
+            <Image className='bg-image' alt='background-image' src={backgroundImageSrc} layout='fill' />
 
+          </div>}
 
           {children}
 
           {children}
 
         </div>
 
         </div>
 
       </ThemeProvider>
 
       </ThemeProvider>

+ 9 - 0
packages/app/src/components/Theme/ThemeAntarctic.tsx
Просмотреть файл 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeAntarctic.module.scss';
 
 import styles from './ThemeAntarctic.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/antarctic/bg.svg';
 
+  }
 
+};
 
+
 
 const ThemeAntarctic = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeAntarctic = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 9 - 0
packages/app/src/components/Theme/ThemeChristmas.tsx
Просмотреть файл 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeChristmas.module.scss';
 
 import styles from './ThemeChristmas.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/christmas/christmas.jpg';
 
+  }
 
+};
 
+
 
 const ThemeChristmas = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeChristmas = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 9 - 0
packages/app/src/components/Theme/ThemeHalloween.tsx
Просмотреть файл 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeHalloween.module.scss';
 
 import styles from './ThemeHalloween.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/halloween/halloween-navbar.jpg';
 
+  }
 
+};
 
+
 
 const ThemeHalloween = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeHalloween = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 13 - 0
packages/app/src/components/Theme/ThemeHufflepuff.tsx
Просмотреть файл 

@@ -1,7 +1,20 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeHufflepuff.module.scss';
 
 import styles from './ThemeHufflepuff.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    case Themes.light:
 
+      return '/images/themes/hufflepuff/badger-light3.png';
 
+    case Themes.dark:
 
+      return '/images/themes/hufflepuff/badger-dark.jpg';
 
+    default:
 
+      return '/images/themes/hufflepuff/badger-light3.png';
 
+  }
 
+};
 
+
 
 const ThemeHufflepuff = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeHufflepuff = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 9 - 0
packages/app/src/components/Theme/ThemeIsland.tsx
Просмотреть файл 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeIsland.module.scss';
 
 import styles from './ThemeIsland.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/island/island.png';
 
+  }
 
+};
 
+
 
 const ThemeIsland = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeIsland = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 9 - 0
packages/app/src/components/Theme/ThemeSpring.tsx
Просмотреть файл 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeSpring.module.scss';
 
 import styles from './ThemeSpring.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/spring/spring02.svg';
 
+  }
 
+};
 
+
 
 const ThemeSpring = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeSpring = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 9 - 0
packages/app/src/components/Theme/ThemeWood.tsx
Просмотреть файл 

@@ -1,7 +1,16 @@
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
 
 
 import styles from './ThemeWood.module.scss';
 
 import styles from './ThemeWood.module.scss';
 
 
 
+export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
+  switch (colorScheme) {
 
+    default:
 
+      return '/images/themes/wood/wood.jpg';
 
+  }
 
+};
 
+
 
 const ThemeWood = ({ children }: { children: JSX.Element }): JSX.Element => {
 
 const ThemeWood = ({ children }: { children: JSX.Element }): JSX.Element => {
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
   return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
 
 };
 
 };

+ 31 - 0
packages/app/src/components/Theme/utils/ThemeImageProvider.tsx
Просмотреть файл 

@@ -0,0 +1,31 @@
 
+import { GrowiThemes } from '~/interfaces/theme';
 
+import { Themes } from '~/stores/use-next-themes';
 
+
 
+import { getBackgroundImageSrc as getAntarcticBackgroundImageSrc } from '../ThemeAntarctic';
 
+import { getBackgroundImageSrc as getChristmasBackgroundImageSrc } from '../ThemeChristmas';
 
+import { getBackgroundImageSrc as getHalloweenBackgroundImageSrc } from '../ThemeHalloween';
 
+import { getBackgroundImageSrc as getHuffulePuffBackgroundImageSrc } from '../ThemeHufflepuff';
 
+import { getBackgroundImageSrc as getIslandBackgroundImageSrc } from '../ThemeIsland';
 
+import { getBackgroundImageSrc as getSpringBackgroundImageSrc } from '../ThemeSpring';
 
+import { getBackgroundImageSrc as getWoodBackgroundImageSrc } from '../ThemeWood';
 
+
 
+export const getBackgroundImageSrc = (theme: GrowiThemes, colorScheme: Themes): string | undefined => {
 
+  switch (theme) {
 
+    case GrowiThemes.ANTARCTIC:
 
+      return getAntarcticBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.CHRISTMAS:
 
+      return getChristmasBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.HALLOWEEN:
 
+      return getHalloweenBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.ISLAND:
 
+      return getIslandBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.HUFFLEPUFF:
 
+      return getHuffulePuffBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.SPRING:
 
+      return getSpringBackgroundImageSrc(colorScheme);
 
+    case GrowiThemes.WOOD:
 
+      return getWoodBackgroundImageSrc(colorScheme);
 
+    default:
 
+      return undefined;
 
+  }
 
+};