Restore icon picker
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
01a4e7370f
commit
dfa5d3ec8e
6 changed files with 49 additions and 83 deletions
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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> => {
|
||||
|
|
Loading…
Reference in a new issue