Skip to content

Commit

Permalink
docs(color-preview): change preview by theme change
Browse files Browse the repository at this point in the history
  • Loading branch information
danielleroux committed Aug 13, 2024
1 parent ef9acee commit 0d797bf
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 6 deletions.
2 changes: 2 additions & 0 deletions packages/documentation/src/components/ThemeBorders/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import React, { useState } from 'react';
import { themeBorders } from './borders';
import './ThemeBorders.css';
import { useTheme } from '@site/src/utils/hooks/useTheme';

function Search(props: { onChange: (value: string) => void }) {
return (
Expand Down Expand Up @@ -56,6 +57,7 @@ function BorderPreview(props: { border: string }) {

const ThemeBorders: React.FC = () => {
const [borders, setBorders] = useState(themeBorders);
useTheme();

const updateFilter = (filter) => {
setBorders([
Expand Down
12 changes: 6 additions & 6 deletions packages/documentation/src/components/ThemeColors/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ import {
IxRow,
showToast,
} from '@siemens/ix-react';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { resolveColorValue, themeColors } from './resolve-colors';
import './ThemeColors.css';
import { useTheme } from '@site/src/utils/hooks/useTheme';

function Search(props: { onChange: (value: string) => void }) {
return (
Expand Down Expand Up @@ -59,6 +60,7 @@ function ColorPreview(props: { color: string }) {

const ThemeColors: React.FC = () => {
const [colors, setColors] = useState(themeColors);
const theme = useTheme();

const updateFilter = (filter) => {
setColors([
Expand All @@ -80,11 +82,9 @@ const ThemeColors: React.FC = () => {
});
};

useEffect(() => {
window.addEventListener('theme-change', () => {
setColors([...colors]);
});
}, []);
useLayoutEffect(() => {
setColors([...colors]);
}, [theme]);

return (
<div className="Theme__Colors">
Expand Down
2 changes: 2 additions & 0 deletions packages/documentation/src/components/ThemeFonts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import CodeBlock from '@theme/CodeBlock';
import React, { useCallback, useState } from 'react';
import { CodeSelection, getCodeExample, getPreview, themeFonts } from './fonts';
import './ThemeFonts.css';
import { useTheme } from '@site/src/utils/hooks/useTheme';

function Search(props: { onChange: (value: string) => void }) {
return (
Expand All @@ -43,6 +44,7 @@ function Search(props: { onChange: (value: string) => void }) {
}

const ThemeFonts: React.FunctionComponent = () => {
useTheme();
const [fonts] = useState(themeFonts);
const [filter, setFilter] = useState('');
const [framework, setFramework] = useState<CodeSelection>('react');
Expand Down
2 changes: 2 additions & 0 deletions packages/documentation/src/components/ThemeShadows/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import React, { useState } from 'react';
import { themeShadows } from './shadows';
import './ThemeShadows.css';
import { useTheme } from '@site/src/utils/hooks/useTheme';

function Search(props: { onChange: (value: string) => void }) {
return (
Expand Down Expand Up @@ -55,6 +56,7 @@ function ShadowPreview(props: { border: string }) {
}

const ThemeShadows: React.FC = () => {
useTheme();
const [borders, setBorders] = useState(themeShadows);

const updateFilter = (filter) => {
Expand Down

0 comments on commit 0d797bf

Please sign in to comment.