|
|
|
|
@ -1,17 +1,23 @@
|
|
|
|
|
import React, { forwardRef, MutableRefObject, useEffect } from 'react';
|
|
|
|
|
import React, { forwardRef, useEffect, useState } from 'react';
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
import data from '@emoji-mart/data';
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
import { Picker } from '../../../node_modules/emoji-mart/dist/index.cjs';
|
|
|
|
|
import Picker from '@emoji-mart/react';
|
|
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
|
import { getTheme } from '../../state/selectors/theme';
|
|
|
|
|
import { noop } from 'lodash';
|
|
|
|
|
import { loadEmojiPanelI18n } from '../../util/i18n';
|
|
|
|
|
import { FixedBaseEmoji, FixedPickerProps } from '../../types/Reaction';
|
|
|
|
|
import { ThemeStateType } from '../../themes/colors.js';
|
|
|
|
|
import { COLORS, PrimaryColorStateType, THEMES, ThemeStateType } from '../../themes/colors.js';
|
|
|
|
|
import { hexColorToRGB } from '../../util/hexColorToRGB';
|
|
|
|
|
import { getPrimaryColor } from '../../state/selectors/primaryColor';
|
|
|
|
|
import { i18nEmojiData } from '../../util/emoji';
|
|
|
|
|
|
|
|
|
|
export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: ThemeStateType }>`
|
|
|
|
|
export const StyledEmojiPanel = styled.div<{
|
|
|
|
|
isModal: boolean;
|
|
|
|
|
primaryColor: PrimaryColorStateType;
|
|
|
|
|
theme: ThemeStateType;
|
|
|
|
|
panelBackgroundRGB: string;
|
|
|
|
|
panelTextRGB: string;
|
|
|
|
|
}>`
|
|
|
|
|
padding: var(--margins-lg);
|
|
|
|
|
z-index: 5;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
@ -29,41 +35,25 @@ export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: ThemeState
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
em-emoji-picker {
|
|
|
|
|
background-color: var(--color-cell-background);
|
|
|
|
|
border: 1px solid var(--color-session-border);
|
|
|
|
|
${props => props.panelBackgroundRGB && `background-color: rgb(${props.panelBackgroundRGB})`};
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
padding-bottom: var(--margins-sm);
|
|
|
|
|
--shadow: none;
|
|
|
|
|
--border-radius: 8px;
|
|
|
|
|
--color-border: var(--color-session-border);
|
|
|
|
|
--font-family: var(--font-default);
|
|
|
|
|
--font-size: var(--font-size-sm);
|
|
|
|
|
--rgb-accent: 0, 247, 130; // Constants.UI.COLORS.GREEN
|
|
|
|
|
|
|
|
|
|
${props => {
|
|
|
|
|
switch (props.theme) {
|
|
|
|
|
case 'ocean-dark':
|
|
|
|
|
// TODO Theming
|
|
|
|
|
return ``;
|
|
|
|
|
case 'ocean-light':
|
|
|
|
|
// TODO Theming
|
|
|
|
|
return ``;
|
|
|
|
|
case 'classic-dark':
|
|
|
|
|
return `
|
|
|
|
|
--background-rgb: 27, 27, 27; // var(--color-cell-background)
|
|
|
|
|
--rgb-background: 27, 27, 27;
|
|
|
|
|
--rgb-color: 255, 255, 255; // var(--color-text)
|
|
|
|
|
--rgb-input: 27, 27, 27;
|
|
|
|
|
`;
|
|
|
|
|
case 'classic-light':
|
|
|
|
|
default:
|
|
|
|
|
return `
|
|
|
|
|
--background-rgb: 249, 249, 249; // var(--color-cell-background)
|
|
|
|
|
--rgb-background: 249, 249, 249;
|
|
|
|
|
--rgb-color: 0, 0, 0; // var(--color-text)
|
|
|
|
|
--rgb-input: 249, 249, 249;
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
--shadow: none;
|
|
|
|
|
--border-radius: 8px;
|
|
|
|
|
--color-border: var(--border-color);
|
|
|
|
|
--color-border-over: var(--border-color);
|
|
|
|
|
--background-rgb: ${props => props.panelBackgroundRGB};
|
|
|
|
|
--rgb-background: ${props => props.panelBackgroundRGB};
|
|
|
|
|
--rgb-color: ${props => props.panelTextRGB};
|
|
|
|
|
--rgb-input: ${props => props.panelBackgroundRGB};
|
|
|
|
|
--rgb-accent: ${props =>
|
|
|
|
|
hexColorToRGB(
|
|
|
|
|
props.primaryColor
|
|
|
|
|
? (COLORS.PRIMARY as any)[`${props.primaryColor.toUpperCase()}`]
|
|
|
|
|
: COLORS.PRIMARY.GREEN
|
|
|
|
|
)};
|
|
|
|
|
|
|
|
|
|
${props =>
|
|
|
|
|
!props.isModal &&
|
|
|
|
|
@ -75,14 +65,14 @@ export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: ThemeState
|
|
|
|
|
left: calc(100% - 79px);
|
|
|
|
|
width: 22px;
|
|
|
|
|
height: 22px;
|
|
|
|
|
background-color: var(--color-cell-background);
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
transform: scaleY(1.4) rotate(45deg);
|
|
|
|
|
border: 0.7px solid var(--color-session-border);
|
|
|
|
|
border: 0.7px solid var(--border-color);
|
|
|
|
|
clip-path: polygon(100% 100%, 7.2px 100%, 100% 7.2px);
|
|
|
|
|
${props.panelBackgroundRGB && `background-color: rgb(${props.panelBackgroundRGB})`};
|
|
|
|
|
}
|
|
|
|
|
`}
|
|
|
|
|
`};
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
@ -90,6 +80,7 @@ type Props = {
|
|
|
|
|
onEmojiClicked: (emoji: FixedBaseEmoji) => void;
|
|
|
|
|
show: boolean;
|
|
|
|
|
isModal?: boolean;
|
|
|
|
|
// NOTE Currently this doesn't work but we have a PR waiting to be merged to resolve this. William Grant 30/09/2022
|
|
|
|
|
onKeyDown?: (event: any) => void;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -102,45 +93,51 @@ const pickerProps: FixedPickerProps = {
|
|
|
|
|
|
|
|
|
|
export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
|
|
|
|
|
const { onEmojiClicked, show, isModal = false, onKeyDown } = props;
|
|
|
|
|
const primaryColor = useSelector(getPrimaryColor);
|
|
|
|
|
const theme = useSelector(getTheme);
|
|
|
|
|
const emojiPanelTheme = theme.includes('light') ? 'light' : 'dark';
|
|
|
|
|
const pickerRef = ref as MutableRefObject<HTMLDivElement>;
|
|
|
|
|
|
|
|
|
|
const [panelBackgroundRGB, setPanelBackgroundRGB] = useState('');
|
|
|
|
|
const [panelTextRGB, setPanelTextRGB] = useState('');
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
let isCancelled = false;
|
|
|
|
|
if (pickerRef.current !== null) {
|
|
|
|
|
if (pickerRef.current.children.length === 0) {
|
|
|
|
|
loadEmojiPanelI18n()
|
|
|
|
|
.then(async i18n => {
|
|
|
|
|
if (isCancelled) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// tslint:disable-next-line: no-unused-expression
|
|
|
|
|
new Picker({
|
|
|
|
|
data,
|
|
|
|
|
ref,
|
|
|
|
|
i18n,
|
|
|
|
|
theme: emojiPanelTheme,
|
|
|
|
|
onEmojiSelect: onEmojiClicked,
|
|
|
|
|
onKeyDown,
|
|
|
|
|
...pickerProps,
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(noop);
|
|
|
|
|
}
|
|
|
|
|
switch (theme) {
|
|
|
|
|
case 'ocean-dark':
|
|
|
|
|
setPanelBackgroundRGB(hexColorToRGB(THEMES.OCEAN_DARK.COLOR1));
|
|
|
|
|
setPanelTextRGB(hexColorToRGB(THEMES.OCEAN_DARK.COLOR6));
|
|
|
|
|
break;
|
|
|
|
|
case 'ocean-light':
|
|
|
|
|
setPanelBackgroundRGB(hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR7!));
|
|
|
|
|
setPanelTextRGB(hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR1));
|
|
|
|
|
break;
|
|
|
|
|
case 'classic-dark':
|
|
|
|
|
setPanelBackgroundRGB(hexColorToRGB(THEMES.CLASSIC_DARK.COLOR1));
|
|
|
|
|
setPanelTextRGB(hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6));
|
|
|
|
|
break;
|
|
|
|
|
case 'classic-light':
|
|
|
|
|
default:
|
|
|
|
|
setPanelBackgroundRGB(hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR6));
|
|
|
|
|
setPanelTextRGB(hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0));
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
isCancelled = true;
|
|
|
|
|
};
|
|
|
|
|
}, [data, pickerProps]);
|
|
|
|
|
}, [theme]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<StyledEmojiPanel
|
|
|
|
|
isModal={isModal}
|
|
|
|
|
primaryColor={primaryColor}
|
|
|
|
|
theme={theme}
|
|
|
|
|
panelBackgroundRGB={panelBackgroundRGB}
|
|
|
|
|
panelTextRGB={panelTextRGB}
|
|
|
|
|
className={classNames(show && 'show')}
|
|
|
|
|
ref={ref}
|
|
|
|
|
/>
|
|
|
|
|
>
|
|
|
|
|
<Picker
|
|
|
|
|
theme={theme.includes('light') ? 'light' : 'dark'}
|
|
|
|
|
i18n={i18nEmojiData}
|
|
|
|
|
onEmojiSelect={onEmojiClicked}
|
|
|
|
|
onKeyDown={onKeyDown}
|
|
|
|
|
{...pickerProps}
|
|
|
|
|
/>
|
|
|
|
|
</StyledEmojiPanel>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
|
William Grant
3 years ago