File "icon-list.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/icon-picker/icon-list.tsx
File size: 3.51 KB
MIME-type: text/plain
Charset: utf-8
import React, {ComponentType, Fragment} from 'react';
import * as Icons from '../../icons/material/all-icons';
import {ButtonBase} from '../buttons/button-base';
import {SvgIconProps} from '../../icons/svg-icon';
import {elementToTree, IconTree} from '../../icons/create-svg-icon';
import {iconGridStyle} from './icon-grid-style';
import {useFilter} from '../../i18n/use-filter';
import clsx from 'clsx';
import {Trans} from '../../i18n/trans';
import {YoutubeIcon} from '@common/icons/social/youtube';
import {AmazonIcon} from '@common/icons/social/amazon';
import {AppleIcon} from '@common/icons/social/apple';
import {BandcampIcon} from '@common/icons/social/bandcamp';
import {EnvatoIcon} from '@common/icons/social/envato';
import {FacebookIcon} from '@common/icons/social/facebook';
import {InstagramIcon} from '@common/icons/social/instagram';
import {LinkedinIcon} from '@common/icons/social/linkedin';
import {PatreonIcon} from '@common/icons/social/patreon';
import {PinterestIcon} from '@common/icons/social/pinterest';
import {SnapchatIcon} from '@common/icons/social/snapchat';
import {SoundcloudIcon} from '@common/icons/social/soundcloud';
import {SpotifyIcon} from '@common/icons/social/spotify';
import {TelegramIcon} from '@common/icons/social/telegram';
import {TiktokIcon} from '@common/icons/social/tiktok';
import {TwitchIcon} from '@common/icons/social/twitch';
import {TwitterIcon} from '@common/icons/social/twitter';
import {WhatsappIcon} from '@common/icons/social/whatsapp';
const socialIcons: [string, ComponentType<SvgIconProps>][] = [
['amazon', AmazonIcon],
['apple', AppleIcon],
['bandcamp', BandcampIcon],
['envato', EnvatoIcon],
['facebook', FacebookIcon],
['instagram', InstagramIcon],
['linkedin', LinkedinIcon],
['patreon', PatreonIcon],
['pinterest', PinterestIcon],
['snapchat', SnapchatIcon],
['soundcloud', SoundcloudIcon],
['spotify', SpotifyIcon],
['telegram', TelegramIcon],
['tiktok', TiktokIcon],
['twitch', TwitchIcon],
['twitter', TwitterIcon],
['whatsapp', WhatsappIcon],
['youtube', YoutubeIcon],
];
const entries = Object.entries(Icons)
.map(([name, cmp]) => {
const prettyName = name
.replace('Icon', '')
.replace(/[A-Z]/g, letter => ` ${letter.toLowerCase()}`);
return [prettyName, cmp] as [string, ComponentType<SvgIconProps>];
})
.concat(socialIcons);
interface IconListProps {
onIconSelected: (icon: IconTree[] | null) => void;
searchQuery: string;
}
export default function IconList({onIconSelected, searchQuery}: IconListProps) {
const {contains} = useFilter({
sensitivity: 'base',
});
const matchedEntries = entries.filter(([name]) =>
contains(name, searchQuery)
);
return (
<Fragment>
<ButtonBase
className={clsx(iconGridStyle.button, 'diagonal-lines')}
onClick={e => {
onIconSelected(null);
}}
>
<Trans message="None" />
</ButtonBase>
{matchedEntries.map(([name, Icon]) => (
<ButtonBase
key={name}
className={iconGridStyle.button}
onClick={e => {
const svgTree = elementToTree(
e.currentTarget.querySelector('svg') as SVGElement
);
// only emit svg children, and not svg tag itself
onIconSelected(svgTree.child as IconTree[]);
}}
>
<Icon className="block text-muted icon-lg" />
<span className="mt-16 block whitespace-normal text-xs capitalize">
{name}
</span>
</ButtonBase>
))}
</Fragment>
);
}