| 1 |
import { BaseControl } from '@wordpress/components'; |
| 2 |
import { applyFilters } from '@wordpress/hooks'; |
| 3 |
import { sprintf, __ } from '@wordpress/i18n'; |
| 4 |
import { Lang, Theme } from 'shiki'; |
| 5 |
import defaultThemes from '../../defaultThemes.json'; |
| 6 |
import { useSettingsStore } from '../../state/settings'; |
| 7 |
import { ThemePreview } from '../components/ThemePreview'; |
| 8 |
import { Notice } from './Notice'; |
| 9 |
|
| 10 |
type ThemeSelectProps = { |
| 11 |
theme: Theme; |
| 12 |
language: Lang; |
| 13 |
code: string; |
| 14 |
fontSize: string; |
| 15 |
lineHeight: string; |
| 16 |
fontFamily: string; |
| 17 |
search: string; |
| 18 |
onClick: (slug: Theme) => void; |
| 19 |
}; |
| 20 |
export const ThemeSelect = (props: ThemeSelectProps) => { |
| 21 |
const { hiddenThemes } = useSettingsStore(); |
| 22 |
const themes = applyFilters( |
| 23 |
'blocks.codeBlockPro.themes', |
| 24 |
defaultThemes, |
| 25 |
) as Record<string, { name: string; priority?: boolean }>; |
| 26 |
const themesSorted = Object.entries(themes) |
| 27 |
.filter(([slug]) => !hiddenThemes.includes(slug)) |
| 28 |
.filter(([slug]) => slug.includes(props.search.toLocaleLowerCase())) |
| 29 |
.map(([slug, { name, priority }]) => ({ name, slug, priority })) |
| 30 |
.sort((a, b) => (a.priority === b.priority ? 0 : a.priority ? -1 : 1)); |
| 31 |
|
| 32 |
return ( |
| 33 |
<div className="code-block-pro-editor"> |
| 34 |
{themesSorted.map(({ name, slug }) => ( |
| 35 |
<ThemeItem key={slug} slug={slug} name={name} {...props} /> |
| 36 |
))} |
| 37 |
<BaseControl id="add-on-themes"> |
| 38 |
<Notice |
| 39 |
seenKey={'add-on-themes'} |
| 40 |
href="https://code-block-pro.com" |
| 41 |
callback={console.log} |
| 42 |
message={'Click here for more themes'} |
| 43 |
/> |
| 44 |
</BaseControl> |
| 45 |
</div> |
| 46 |
); |
| 47 |
}; |
| 48 |
|
| 49 |
const ThemeItem = ({ |
| 50 |
slug, |
| 51 |
name, |
| 52 |
theme, |
| 53 |
language, |
| 54 |
code, |
| 55 |
fontSize, |
| 56 |
lineHeight, |
| 57 |
fontFamily, |
| 58 |
onClick, |
| 59 |
}: { slug: string; name: string } & ThemeSelectProps) => ( |
| 60 |
<BaseControl |
| 61 |
id={`code-block-pro-theme-${slug}`} |
| 62 |
label={ |
| 63 |
theme === slug |
| 64 |
? sprintf(__('%s (current)', 'code-block-pro'), name) |
| 65 |
: name |
| 66 |
}> |
| 67 |
<ThemePreview |
| 68 |
id={`code-block-pro-theme-${slug}`} |
| 69 |
theme={slug as Theme} |
| 70 |
lang={language} |
| 71 |
fontSize={fontSize} |
| 72 |
lineHeight={lineHeight} |
| 73 |
fontFamily={fontFamily} |
| 74 |
onClick={() => { |
| 75 |
onClick(slug as Theme); |
| 76 |
}} |
| 77 |
code={code} |
| 78 |
/> |
| 79 |
</BaseControl> |
| 80 |
); |
| 81 |
|
