59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import type { FC } from '../../../lib/teact/teact';
|
|
import React, { memo, useMemo } from '../../../lib/teact/teact';
|
|
|
|
import type { ApiDocument } from '../../../api/types';
|
|
import type { ISettings } from '../../../types';
|
|
import { ApiMediaFormat } from '../../../api/types';
|
|
|
|
import { getDocumentMediaHash } from '../../../global/helpers';
|
|
import buildClassName from '../../../util/buildClassName';
|
|
|
|
import useAppLayout from '../../../hooks/useAppLayout';
|
|
import useMedia from '../../../hooks/useMedia';
|
|
|
|
import styles from './AttachBotIcon.module.scss';
|
|
|
|
type OwnProps = {
|
|
icon: ApiDocument;
|
|
theme: ISettings['theme'];
|
|
};
|
|
|
|
const ADDITIONAL_STROKE_WIDTH = '0.5px';
|
|
const DARK_THEME_COLOR = 'rgb(170, 170, 170)';
|
|
const LIGHT_THEME_COLOR = 'rgb(112, 117, 121)';
|
|
const COLOR_REPLACE_PATTERN = /#fff/gi;
|
|
|
|
const AttachBotIcon: FC<OwnProps> = ({
|
|
icon, theme,
|
|
}) => {
|
|
const { isTouchScreen } = useAppLayout();
|
|
const mediaData = useMedia(getDocumentMediaHash(icon, 'full'), false, ApiMediaFormat.Text);
|
|
|
|
const iconSvg = useMemo(() => {
|
|
if (!mediaData) return '';
|
|
const color = theme === 'dark' ? DARK_THEME_COLOR : LIGHT_THEME_COLOR;
|
|
|
|
const mediaDataWithReplacedColors = mediaData.replace(COLOR_REPLACE_PATTERN, color);
|
|
const doc = new DOMParser().parseFromString(mediaDataWithReplacedColors, 'image/svg+xml');
|
|
doc.querySelectorAll('path').forEach((path) => {
|
|
path.style.stroke = color;
|
|
path.style.strokeWidth = ADDITIONAL_STROKE_WIDTH;
|
|
});
|
|
|
|
return `data:image/svg+xml;utf8,${doc.documentElement.outerHTML}`;
|
|
}, [mediaData, theme]);
|
|
|
|
return (
|
|
<i className={buildClassName(styles.root, 'icon', !isTouchScreen && styles.compact)}>
|
|
<img
|
|
src={iconSvg}
|
|
alt=""
|
|
className={buildClassName(styles.image, !isTouchScreen && styles.compact)}
|
|
draggable={false}
|
|
/>
|
|
</i>
|
|
);
|
|
};
|
|
|
|
export default memo(AttachBotIcon);
|