Restore icon picker

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-02-28 18:04:24 +01:00
parent 01a4e7370f
commit dfa5d3ec8e
6 changed files with 49 additions and 83 deletions

View file

@ -13,7 +13,7 @@ const getImageURL = (set: string, name: string) => {
return joinPublicPath(`/packs/emoji/${name}.svg`);
};
function Picker(props: any) {
const Picker = (props: any) => {
const ref = useRef(null);
useEffect(() => {
@ -23,7 +23,7 @@ function Picker(props: any) {
}, []);
return <div ref={ref} />;
}
};
export {
Picker,

View file

@ -40,6 +40,7 @@ export const addCustomToPool = (customEmojis: any[]) => {
const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => {
return index.search(str, maxResults)
.flatMap((id: string) => {
console.log(id);
if (id[0] === 'c') {
const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();
@ -55,7 +56,7 @@ const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, cus
return {
id: (id as string).slice(1),
colons: ':' + id + ':',
colons: ':' + id.slice(1) + ':',
unified: skins[0].unified,
native: skins[0].native,
};

View file

@ -13,10 +13,10 @@ const messages = defineMessages({
interface IIconPickerDropdown {
value: string
onPickEmoji: React.ChangeEventHandler
onPickIcon: (icon: string) => void
}
const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji }) => {
const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }) => {
const intl = useIntl();
const [active, setActive] = useState(false);
@ -73,9 +73,9 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji
<Overlay show={active} placement={placement} target={target.current}>
<IconPickerMenu
customEmojis={forkAwesomeIcons}
icons={forkAwesomeIcons}
onClose={onHideDropdown}
onPick={onPickEmoji}
onPick={onPickIcon}
/>
</Overlay>
</div>

View file

@ -1,30 +1,25 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import clsx from 'clsx';
import { supportsPassiveEvents } from 'detect-passive-events';
import React, { useCallback, useEffect, useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Text } from 'soapbox/components/ui';
const messages = defineMessages({
emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
emoji_not_found: { id: 'icon_button.not_found', defaultMessage: 'No icons!! (╯°□°)╯︵ ┻━┻' },
custom: { id: 'icon_button.icons', defaultMessage: 'Icons' },
search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
});
const backgroundImageFn = () => '';
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
const categoriesSort = ['custom'];
interface IIconPickerMenu {
customEmojis: Record<string, Array<string>>
icons: Record<string, Array<string>>
onClose: () => void
onPick: any
onPick: (icon: string) => void
style?: React.CSSProperties
}
const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPick, style }) => {
const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, style }) => {
const intl = useIntl();
const node = useRef<HTMLDivElement | null>(null);
@ -59,70 +54,42 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPi
});
};
const getI18n = () => {
return {
search: intl.formatMessage(messages.emoji_search),
notfound: intl.formatMessage(messages.emoji_not_found),
categories: {
search: intl.formatMessage(messages.search_results),
custom: intl.formatMessage(messages.custom),
},
};
};
const handleClick = (emoji: Record<string, any>) => {
emoji.native = emoji.colons;
const handleClick = (icon: string) => {
onClose();
onPick(emoji);
onPick(icon);
};
const buildIcons = () => {
const emojis: Record<string, any> = [];
const renderIcon = (icon: string) => {
const name = icon.replace('fa fa-', '');
Object.values(customEmojis).forEach((category) => {
category.forEach((icon) => {
const name = icon.replace('fa fa-', '');
if (icon !== 'email' && icon !== 'memo') {
emojis.push({
id: name,
name,
short_names: [name],
emoticons: [],
keywords: [name],
imageUrl: '',
});
}
});
});
return emojis;
return (
<li key={icon} className='col-span-1 inline-block'>
<button
className='flex items-center justify-center rounded-full p-1.5 hover:bg-gray-50 dark:hover:bg-primary-800'
aria-label={name}
title={name}
onClick={() => handleClick(name)}
>
<i className={clsx(icon, 'h-[1.375rem] w-[1.375rem] text-lg leading-[1.15]')} />
</button>
</li>
);
};
const data = { compressed: true, categories: [], aliases: [], emojis: [] };
const title = intl.formatMessage(messages.emoji);
return (
<div className={clsx('font-icon-picker emoji-picker-dropdown__menu')} style={style} ref={setRef}>
{/* <Picker
perLine={8}
emojiSize={22}
include={categoriesSort}
sheetSize={32}
custom={buildIcons()}
color=''
emoji=''
set=''
title={title}
i18n={getI18n()}
onClick={handleClick}
showPreview={false}
backgroundImageFn={backgroundImageFn}
emojiTooltip
noShowAnchors
data={data}
/> */}
<div
className={clsx('absolute z-[101] -my-0.5')}
style={{ transform: 'translateX(calc(-1 * env(safe-area-inset-right)))', ...style }}
ref={setRef}
>
<div className='h-[270px] overflow-x-hidden overflow-y-scroll rounded bg-white p-1.5 text-gray-900 dark:bg-primary-900 dark:text-gray-100' aria-label={title}>
<Text className='px-1.5 py-1'><FormattedMessage id='icon_button.icons' defaultMessage='Icons' /></Text>
<ul className='grid grid-cols-8'>
{Object.values(icons).flat().map(icon => renderIcon(icon))}
</ul>
</div>
</div>
);
};

View file

@ -4,15 +4,13 @@ import IconPickerDropdown from './icon-picker-dropdown';
interface IIconPicker {
value: string
onChange: React.ChangeEventHandler
onChange: (icon: string) => void
}
const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
return (
<div className='relative mt-1 rounded-md border border-solid border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-800'>
<IconPickerDropdown value={value} onPickEmoji={onChange} />
</div>
);
};
const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => (
<div className='relative mt-1 rounded-md border border-solid border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-800'>
<IconPickerDropdown value={value} onPickIcon={onChange} />
</div>
);
export default IconPicker;

View file

@ -17,8 +17,8 @@ const messages = defineMessages({
const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange }) => {
const intl = useIntl();
const handleIconChange = (icon: any) => {
onChange(value.set('icon', icon.id));
const handleIconChange = (icon: string) => {
onChange(value.set('icon', icon));
};
const handleChange = (key: 'text' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {