44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import { getSheetCoordinates, SkinToneKey } from './lib';
|
||
|
|
|
||
|
|
export type OwnProps = {
|
||
|
|
inline?: boolean;
|
||
|
|
shortName: string;
|
||
|
|
skinTone?: SkinToneKey | number;
|
||
|
|
size?: 16 | 20 | 28 | 32 | 64 | 66;
|
||
|
|
};
|
||
|
|
|
||
|
|
export type Props = OwnProps &
|
||
|
|
Pick<React.HTMLProps<HTMLDivElement>, 'style' | 'className'>;
|
||
|
|
|
||
|
|
export const Emoji = React.memo(
|
||
|
|
React.forwardRef<HTMLDivElement, Props>(
|
||
|
|
(
|
||
|
|
{ style = {}, size = 28, shortName, skinTone, inline, className }: Props,
|
||
|
|
ref
|
||
|
|
) => {
|
||
|
|
const [sheetX, sheetY] = getSheetCoordinates(shortName, skinTone);
|
||
|
|
const x = -(size * sheetX);
|
||
|
|
const y = -(size * sheetY);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={classNames(
|
||
|
|
'module-emoji',
|
||
|
|
`module-emoji--${size}px`,
|
||
|
|
inline ? 'module-emoji--inline' : null,
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
style={{
|
||
|
|
...style,
|
||
|
|
backgroundPositionX: `${x}px`,
|
||
|
|
backgroundPositionY: `${y}px`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
)
|
||
|
|
);
|