import React from 'react'; import { useTranslation } from 'react-i18next'; import Button from '../Button'; import Box from '../Box'; import Icon from '../Icon'; import Typography from '../Typography'; import Tabs from '../Tabs'; import Divider from '../Divider'; import SliderWithTitle from '../SliderWithTitle'; import TextBox from '../WatermarkTextBox'; import ColorSelector from '../../containers/ColorSelector'; import { Container, Head, Body, Footer, IconWrapper, } from '../../global/sidebarStyled'; type Props = WatermarkType & { onClick: () => void; isActive: boolean; onSave: () => void; onDelete: () => void; setDataState: (arg: Record) => void; }; const WatermarkOption: React.SFC = ({ onClick, type, opacity = 0, scale = 1, rotation, textcolor, text, onSave, onDelete, setDataState = (): void => { // do nothing }, }: Props) => { const { t } = useTranslation('sidebar'); return ( {t('watermark')} {t('type')} { setDataState({ text: value }); }} /> ), }, ]} onChange={(option: SelectOptionType): void => { setDataState({ type: option.key }); }} /> {type === 'text' ? ( <> { setDataState({ textcolor: val }); }} throughPortal /> ) : null} { setDataState({ opacity: val * 0.01 }); }} /> { setDataState({ rotation: val }); }} /> { setDataState({ scale: val / 100 }); }} /> ); }; export default WatermarkOption;